:root { color-scheme: dark; --canvas:#101112; --text:#f5f4f1; --muted:#b6b7b8; --quiet:#929396; --line:#303133; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
p,h1,figure { margin:0; }
a { color:inherit; text-underline-offset:5px; }
a:focus-visible { outline:2px solid var(--text); outline-offset:6px; }
.page { max-width:1440px; min-height:100svh; padding-inline:64px; margin-inline:auto; display:flex; flex-direction:column; }
.header { min-height:108px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; font-size:22px; line-height:28px; font-weight:800; letter-spacing:.22em; }
.brand svg { flex-shrink:0; }
.tagline,.eyebrow,.sample-label { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; text-transform:uppercase; }
.tagline { color:var(--muted); font-size:12px; line-height:16px; letter-spacing:.08em; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:64px; min-height:662px; padding-block:44px; flex:1; }
.hero-copy { display:flex; flex-direction:column; gap:28px; flex:1; min-width:0; }
.message { display:flex; flex-direction:column; gap:24px; }
.eyebrow { font-size:12px; line-height:18px; letter-spacing:.12em; color:var(--muted); }
h1 { font-size:clamp(54px,6.12vw,88px); line-height:1.0341; font-weight:800; letter-spacing:-.045em; }
.lede { font-size:20px; line-height:31px; color:var(--muted); max-width:460px; }
.action { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:12px; }
.button { display:flex; align-items:center; justify-content:space-between; gap:24px; width:270px; min-height:58px; padding:16px 22px; background:var(--text); color:var(--canvas); border-radius:8px; font-size:16px; line-height:20px; font-weight:700; text-decoration:none; transition:background .16s,transform .16s; }
.button:hover { background:#dededb; }
.button:active { transform:translateY(1px); }
.launch-note { font-size:13px; line-height:20px; color:var(--quiet); }
.photo-study { position:relative; width:40.7%; max-width:534px; aspect-ratio:534/574; flex-shrink:0; overflow:hidden; border-radius:4px; background:#18191a; }
.portrait { position:absolute; width:100%; height:116.3763%; top:-8.1882%; left:0; object-fit:cover; }
.outline { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.photo-caption { position:absolute; bottom:20px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; background:#101112e8; border:1px solid #ffffff25; border-radius:8px; }
.photo-caption div { display:flex; flex-direction:column; gap:5px; }
.photo-caption strong { font-size:15px; line-height:18px; font-weight:600; }
.photo-caption div span { font-size:12px; line-height:16px; color:var(--muted); }
.sample-label { font-size:11px; line-height:14px; color:var(--muted); white-space:nowrap; }
.footer { min-height:130px; padding-block:28px; border-top:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:22px; }
.footer-main,.footer-small { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-main { font-size:14px; line-height:20px; color:var(--muted); }
.footer nav { display:flex; align-items:center; gap:26px; color:var(--text); }
.footer nav a { text-decoration:none; }
.footer nav a:hover { text-decoration:underline; }
.footer-small { font-size:12px; line-height:18px; color:var(--quiet); }
.skip-link { position:absolute; top:-100px; left:24px; z-index:10; padding:12px; background:var(--text); color:var(--canvas); }
.skip-link:focus { top:16px; }
@media(max-width:1100px) {
 .page { padding-inline:36px; }
 .hero { gap:32px; }
 .photo-caption { left:12px; right:12px; bottom:12px; padding:12px; flex-wrap:wrap; }
 .footer-main { align-items:flex-start; }
 .footer nav { gap:18px; flex-wrap:wrap; }
}
@media(max-width:760px) {
 .page { padding-inline:24px; }
 .header { min-height:88px; }
 .brand { font-size:18px; gap:10px; }
 .brand svg { width:28px; height:26px; }
 .tagline { max-width:116px; font-size:10px; line-height:15px; text-align:right; }
 .hero { flex-direction:column; align-items:stretch; gap:40px; padding-block:52px 36px; min-height:0; }
 h1 { font-size:clamp(46px,11.8vw,72px); }
 .hero-copy { gap:20px; }
 .message { gap:20px; }
 .lede { font-size:17px; line-height:27px; }
 .desktop-break { display:none; }
 .button { width:100%; }
 .action { align-items:stretch; }
 .photo-study { width:100%; max-width:none; }
 .photo-caption { gap:8px; }
 .footer { padding-block:28px 32px; gap:24px; }
 .footer-main,.footer-small { flex-direction:column; align-items:flex-start; gap:20px; }
 .footer nav { column-gap:22px; row-gap:0; }
 .footer nav a { display:flex; align-items:center; min-height:44px; }
 .footer-small { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }