/* VTH homepage v3, "Golden hour cinema" (home-previews-20261021/option-1.html).
   Everything below the font block is option 1's stylesheet byte for byte, except:
   - the two inline WebP data URIs, now files under /images/landing-v3-*;
   - the two blocks marked "v3:" at the end. */
@font-face{font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/landing-v3-instrumentserif-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap; src:url("/fonts/landing-v3-instrumentserif-400italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Tight"; font-style:normal; font-weight:400 600; font-display:swap; src:url("/fonts/landing-v3-intertight-var-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --img-base:image-set(url("/images/landing-v3-golden-hour-base-1536.webp") type("image/webp"), url("/images/landing-v3-golden-hour-base-1536.jpg") type("image/jpeg"));
  --img-plane:image-set(url("/images/landing-v3-golden-hour-plane-1237.webp") type("image/webp"), url("/images/landing-v3-golden-hour-plane-1237.png") type("image/png"));
  --ink:#0c0d12; --ink-2:#121319; --ink-3:#191a22; --ink-4:#23242e;
  --cream:#f6eee2; --cream-2:#d9cfc1; --muted:#a8a091;
  --amber:#f5a25d; --gold:#ffcf8a; --ember:#e0703a; --rose:#c95f48;
  --indigo:#5752f2; --indigo-2:#6d69ff;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(20px, 4.2vw, 64px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,1,.36,1);
  --hh: max(100svh, 760px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--ink); color-scheme:dark; scrollbar-color:#5a4a3c var(--ink); caret-color:var(--amber)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:#4a3d33; border-radius:10px; border:2px solid var(--ink)}
body{margin:0; background:var(--ink); color:var(--cream); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
::selection{background:var(--amber); color:var(--ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:16px; top:-80px; z-index:200; background:var(--gold); color:var(--ink); padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none; transition:top .2s}
.skip:focus{top:16px}
.wrap{width:100%; max-width:calc(var(--maxw) + 2*var(--m)); margin:0 auto; padding:0 var(--m)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- grain + letterbox ---------- */
.grain{position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.letterbox{position:fixed; left:0; right:0; height:13vh; background:#000; z-index:95; pointer-events:none; transform-origin:top; display:none}
.letterbox.b{bottom:0; transform-origin:bottom}
.letterbox.t{top:0}
.intro .letterbox{display:block}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:80; transition:background .5s var(--ease), transform .5s var(--ease)}
.nav.scrolled{background:rgba(12,13,18,.94)}
.nav-in{display:flex; align-items:center; gap:28px; height:76px}
.brand{white-space:nowrap; display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:19px; letter-spacing:-.02em; min-height:44px}
.brand svg{width:30px; height:30px; flex:none}
.brand .dot{color:var(--amber)}
.nav-links{display:flex; gap:6px; margin-left:auto; margin-right:auto}
.nav-links a, .signin{white-space:nowrap; text-decoration:none; font-size:15px; color:var(--cream-2); padding:10px 14px; border-radius:999px; min-height:44px; display:inline-flex; align-items:center; transition:color .25s, background .25s}
.nav-links a:hover, .signin:hover{color:var(--cream); background:rgba(246,238,226,.08)}
.nav-cta{display:flex; align-items:center; gap:6px}

/* ---------- buttons ---------- */
.btn{--bg:var(--indigo); white-space:nowrap; position:relative; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 22px 0 24px; border-radius:999px; background:var(--bg); color:#fff; font-weight:600; font-size:16px; letter-spacing:-.01em; text-decoration:none; border:0; cursor:pointer; isolation:isolate; transition:background .3s, box-shadow .4s var(--ease)}
.btn .arr{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.16); transition:transform .45s var(--ease)}
.btn:hover{--bg:var(--indigo-2); box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.btn:hover .arr{transform:rotate(-45deg)}
.btn:active{transform:scale(.97)}
.btn.lg{min-height:60px; font-size:18px; padding:0 26px 0 30px}
.btn.ghost{--bg:transparent; box-shadow:inset 0 0 0 1px rgba(246,238,226,.35)}
.btn.ghost:hover{--bg:rgba(246,238,226,.08); box-shadow:inset 0 0 0 1px rgba(255,207,138,.7)}
.btn.sm{min-height:44px; font-size:15px; padding:0 16px 0 18px}
.btn.sm .arr{width:22px; height:22px}
.magnetic{will-change:transform}
.tlink{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--gold); text-decoration:none; font-weight:500; position:relative}
.tlink::after{content:""; position:absolute; left:0; right:30px; bottom:8px; height:1px; background:currentColor; transform-origin:left; transform:scaleX(.25); transition:transform .5s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- type ---------- */
.serif{font-family:var(--serif); font-weight:400}
.kicker{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0 0 22px; display:flex; align-items:center; gap:14px}
.kicker::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
h1,h2,h3{margin:0; font-weight:400}
.h2{font-family:var(--serif); font-size:clamp(46px, 6.6vw, 108px); line-height:.95; letter-spacing:-.025em}
.h2 em{font-style:normal; color:var(--muted)}
.h3 em{font-style:normal; color:inherit}
.lede{font-size:clamp(17px, 1.35vw, 20px); color:var(--cream-2); max-width:34em}

/* ---------- hero ---------- */
.hero{position:relative; height:var(--hh); overflow:hidden; background:#1a1c25; isolation:isolate}
.stage{--W: max(100vw, calc(var(--hh) * 1.5)); --fx:.5; --fy:.62;
  position:absolute; width:var(--W); aspect-ratio:3/2; left:calc((100vw - var(--W)) * var(--fx)); top:calc((var(--hh) - var(--W) / 1.5) * var(--fy))}
.layer{position:absolute; inset:0; will-change:transform}
.layer .img{position:absolute; inset:0; background-size:100% 100%; background-repeat:no-repeat}
.l-base{z-index:1}
.l-base .img{background-image:var(--img-base); filter:saturate(1.12) contrast(1.06) brightness(.92)}
.l-plane{z-index:5; inset:auto; left:15.365%; top:44.434%; width:80.534%; aspect-ratio:1237/352}
.l-plane .img{background-image:var(--img-plane); filter:saturate(1.05) brightness(.98) drop-shadow(0 30px 40px rgba(20,8,0,.35))}
.haze{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(60% 45% at 8% 48%, rgba(255,170,90,.55), transparent 70%),
    linear-gradient(180deg, rgba(12,13,18,.78) 0%, rgba(30,24,30,.35) 26%, rgba(245,162,93,.12) 46%, rgba(224,112,58,.10) 62%, transparent 75%);
  mix-blend-mode:normal}
.warm{position:absolute; inset:0; z-index:6; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(224,112,58,.28) 80%, rgba(201,95,72,.32) 100%); mix-blend-mode:multiply}
.flare{position:absolute; z-index:3; width:70vmax; height:70vmax; left:0; top:0; margin:-35vmax 0 0 -35vmax; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(255,207,138,.55), rgba(245,162,93,.22) 35%, rgba(224,112,58,.06) 60%, transparent 72%)}
.flare::after{content:""; position:absolute; left:-40%; right:-40%; top:50%; height:2px; margin-top:-1px; background:linear-gradient(90deg, transparent, rgba(255,207,138,.0) 20%, rgba(255,220,170,.55) 50%, rgba(255,207,138,0) 80%, transparent); filter:blur(1px)}
.wisps{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.wisps svg{position:absolute; width:140%; left:-20%; height:auto}
.wisps.back{z-index:4}
.wisps.front{z-index:7}
.wisps.back svg{top:30%; animation:drift 70s linear infinite alternate; opacity:.55}
.wisps.front svg{bottom:-6%; animation:drift 48s linear infinite alternate-reverse; opacity:.9}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.fade{position:absolute; left:0; right:0; bottom:0; height:48%; z-index:8; pointer-events:none; background:linear-gradient(180deg, rgba(12,13,18,0) 0%, rgba(12,13,18,.55) 45%, rgba(12,13,18,.94) 82%, var(--ink) 100%)}
.hero-title{position:absolute; z-index:4; left:0; right:0; top:calc(var(--hh) * .17); text-align:center; pointer-events:none}
.eyebrow{font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2.3vw, 36px); color:var(--gold); margin:0 0 .1em; letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.4)}
.h1{font-family:var(--serif); font-size:clamp(84px, 19.5vw, 330px); line-height:.82; letter-spacing:-.045em; color:var(--cream); white-space:nowrap;
  text-shadow:0 18px 60px rgba(12,8,6,.35)}
.h1 .sp{display:inline}
.h1 .ch{display:inline-block; will-change:transform, filter, opacity}
.h1 .it{font-style:italic; padding-right:.03em}
.h1 .pd{color:var(--amber)}
.intro .h1 .ch, .intro .eyebrow, .intro .hero-copy > *, .intro .stats > *{opacity:0}
.hero-copy{position:absolute; z-index:10; left:0; right:0; bottom:clamp(28px, 5vh, 56px)}
.hero-copy .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:end; gap:40px}
.hero-sub{font-size:clamp(17px, 1.4vw, 21px); line-height:1.5; color:var(--cream); max-width:30em; margin:0 0 26px; text-wrap:pretty}
.stats{display:grid; grid-template-columns:repeat(3, auto); justify-content:end; gap:clamp(24px, 3.4vw, 56px); margin:0; padding:0; list-style:none}
.stats li{display:flex; flex-direction:column; gap:2px}
.stats b{font-family:var(--serif); font-weight:400; font-size:clamp(40px, 4.2vw, 68px); line-height:.9; color:var(--cream); letter-spacing:-.02em}
.stats span{font-size:14px; color:var(--cream-2); max-width:19ch; line-height:1.35}
.scrollcue{position:absolute; z-index:10; left:50%; bottom:22px; width:1px; height:44px; background:linear-gradient(rgba(255,207,138,0), rgba(255,207,138,.8)); transform-origin:top; animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1); transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

/* ---------- intro ---------- */
section{position:relative}
.sec{padding:clamp(96px, 10.5vw, 160px) 0}
.intro-sec{padding:0}
.intro-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(40px, 6vw, 110px); align-items:end}
.intro-grid .h2{font-size:clamp(46px, 6.2vw, 104px)}
.intro-side p{margin:0 0 28px}
.horizon-wrap{position:relative; min-height:clamp(600px, 66vw, 940px); display:flex; overflow:hidden; isolation:isolate}
.horizon{position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:linear-gradient(180deg, var(--ink) 0%, #1b1520 16%, #3a2228 38%, #8a3f2c 58%, #e0703a 72%, #f5a25d 80%, #ffcf8a 86%, #2a1d22 86.4%, #120f15 94%, var(--ink) 100%)}
.hz-copy{padding-top:clamp(110px, 12vw, 190px)}
.hz-copy .h2{font-size:clamp(44px, 6.3vw, 112px); line-height:.94}
.hz-copy .h2 em{color:#d8b9a4}
.intro-foot{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:end; padding-top:clamp(40px, 5vw, 72px)}
.intro-foot .lede{font-family:var(--serif); font-size:clamp(26px, 2.5vw, 36px); line-height:1.25; color:var(--cream); max-width:24em; margin:0}
.intro-foot .tlink{justify-self:end}
.horizon .sun{position:absolute; left:50%; top:86%; width:clamp(180px, 22vw, 340px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, #fff3dc 0%, #ffcf8a 38%, rgba(245,162,93,.6) 55%, rgba(245,162,93,0) 70%); clip-path:inset(0 0 50% 0)}
.horizon .bands{position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 14px, rgba(12,13,18,.10) 14px 15px); mix-blend-mode:multiply}
.horizon .refl{position:absolute; left:50%; top:86.4%; width:clamp(120px, 14vw, 230px); height:14%; transform:translateX(-50%); background:repeating-linear-gradient(180deg, rgba(255,207,138,.55) 0 3px, transparent 3px 9px); filter:blur(1px); -webkit-mask:linear-gradient(#000, transparent); mask:linear-gradient(#000, transparent)}
.horizon .sil{position:absolute; left:0; top:60%; width:clamp(160px, 18vw, 280px); aspect-ratio:1237/352; background:var(--img-plane) center/100% 100% no-repeat; filter:brightness(0) opacity(.92); transform:translateX(-30%) rotate(-4deg)}
.is-shot .horizon .sil, .is-reduced .horizon .sil{left:58%}
.horizon figcaption{position:absolute; left:clamp(22px,3vw,44px); top:clamp(22px,3vw,40px); right:clamp(22px,3vw,44px); display:flex; justify-content:space-between; gap:20px; font-family:var(--serif); font-style:italic; font-size:clamp(20px, 2vw, 30px); color:var(--cream)}
.horizon figcaption span:last-child{color:var(--gold)}

/* ---------- prep / chapters ---------- */
.prep-head{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px 40px; align-items:end; margin-bottom:clamp(60px, 7vw, 110px)}
.prep-head > div{grid-column:1/-1}
.prep-head .side{grid-column:2}
.prep-head .side{font-family:var(--serif); font-style:italic; font-size:clamp(22px, 2vw, 30px); line-height:1.25; color:var(--cream-2); margin:0; max-width:16em}
.chapters{position:relative}
.track{display:flex; flex-direction:column; gap:clamp(90px, 10vw, 150px)}
.chapter{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(40px, 6vw, 100px); align-items:center}
.chapter:nth-child(even) .ch-text{order:2}
.numeral{font-family:var(--serif); font-size:clamp(150px, 19vw, 300px); line-height:.78; letter-spacing:-.05em; margin:0 0 18px; display:block;
  color:var(--amber)}
.ch-label{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-2); margin:0 0 18px; font-weight:500}
.ch-label b{color:var(--gold); font-weight:500}
.h3{font-family:var(--serif); font-size:clamp(42px, 4.9vw, 82px); line-height:.96; letter-spacing:-.02em; margin:0 0 22px; text-wrap:balance}
.ch-text p{color:var(--cream-2); margin:0 0 16px; max-width:31em}
.ch-text p.body{color:var(--cream)}
.art{position:relative; aspect-ratio:5/4; border-radius:28px; overflow:hidden; isolation:isolate}
.art::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,207,138,.12); pointer-events:none}
.art-1{background:radial-gradient(90% 70% at 85% 110%, #ffcf8a 0%, #f5a25d 22%, #c95f48 48%, #3b2027 75%, #16131a 100%)}
.art-2{background:radial-gradient(80% 80% at 10% 0%, #f5a25d 0%, #b8533a 30%, #3a1f2b 62%, #141219 100%)}
.art-3{background:radial-gradient(110% 80% at 50% 120%, #ffe2b0 0%, #f5a25d 20%, #8a3f2c 46%, #2b1b24 70%, #121117 100%)}
.art .ring{position:absolute; border-radius:50%; border:1px solid rgba(255,207,138,.18)}
.fc{position:absolute; width:62%; aspect-ratio:1.5; border-radius:20px; padding:clamp(16px, 2vw, 28px); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.fc small{font-size:clamp(11px, .85vw, 12px); letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.fc p{margin:0; font-family:var(--serif); font-size:clamp(18px, 1.9vw, 30px); line-height:1.1}
.fc.front{left:12%; top:16%; background:var(--cream); color:#1b1720; transform:rotate(-5deg); z-index:2}
.fc.front small{color:#9a4a26}
.fc.back{right:8%; bottom:12%; background:#1a1720; color:var(--cream); transform:rotate(4deg); box-shadow:0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,207,138,.2)}
.fc.back small{color:var(--gold)}
.fc .side-t{display:flex; justify-content:space-between; gap:8px}
.vc{position:absolute; inset:12% 10%; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(18px, 2.4vw, 34px); border-radius:22px; background:rgba(12,13,18,.62); box-shadow:inset 0 0 0 1px rgba(255,207,138,.18)}
.vc small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.wave{display:flex; align-items:center; gap:clamp(3px,.4vw,6px); height:42%}
.wave i{flex:1; border-radius:3px; background:linear-gradient(var(--gold), var(--amber)); height:var(--h); transform-origin:center; animation:wv 1.4s ease-in-out infinite; animation-delay:var(--d)}
@keyframes wv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.score{display:flex; align-items:baseline; gap:16px}
.score b{font-family:var(--serif); font-weight:400; font-size:clamp(56px, 6vw, 96px); line-height:.8; color:var(--cream)}
.score b sub{font-size:.45em; vertical-align:baseline; color:var(--cream-2); bottom:0}
.score span{color:var(--cream-2); font-size:15px}
.db{position:absolute; inset:12% 10%; padding:clamp(18px, 2.4vw, 34px); border-radius:22px; background:rgba(246,238,226,.94); color:#1b1720; display:flex; flex-direction:column; justify-content:space-between}
.db small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#9a4a26; font-weight:600}
.db p{font-family:var(--serif); font-size:clamp(26px, 2.6vw, 42px); line-height:1; margin:10px 0 0; letter-spacing:-.01em}
.db ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.db li{display:flex; align-items:center; gap:12px; font-weight:500; font-size:clamp(15px, 1.2vw, 18px)}
.db li svg{flex:none; width:24px; height:24px}
/* horizontal mode (desktop, JS) */
.hmode .chapters{height:100vh; overflow:hidden; display:flex; align-items:center}
.hmode .track{flex-direction:row; gap:0; padding-left:var(--m); will-change:transform}
.hmode .chapter{flex:none; width:min(1240px, 84vw); padding-right:clamp(60px, 7vw, 120px)}
.hmode .chapter:nth-child(even) .ch-text{order:0}
.hmode .numeral{font-size:clamp(130px, 15vw, 240px)}
.hprog{display:none}
.hmode .hprog{display:flex; position:absolute; left:var(--m); right:var(--m); bottom:32px; align-items:center; gap:20px; font-family:var(--serif); font-size:22px; color:rgba(246,238,226,.4); z-index:2}
.hstop{transition:color .5s var(--ease)}
.hstop.on{color:var(--gold)}
.hprog .bar{flex:1; height:2px; background:rgba(246,238,226,.14); border-radius:2px; overflow:hidden}
.hprog .bar i{display:block; height:100%; width:100%; background:var(--amber); transform-origin:left; transform:scaleX(0)}

/* ---------- try ---------- */
.try{background:var(--ink-2)}
.try-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 110px); align-items:center}
.steps{list-style:none; margin:40px 0 28px; padding:0; display:grid; gap:4px; counter-reset:s}
.steps li{display:grid; grid-template-columns:56px 1fr; align-items:baseline; padding:16px 0; border-top:1px solid rgba(246,238,226,.1); font-size:18px}
.steps li:last-child{border-bottom:1px solid rgba(246,238,226,.1)}
.steps li::before{counter-increment:s; content:counter(s); font-family:var(--serif); font-style:italic; color:var(--amber); font-size:24px}
.steps b{font-weight:600}
.flip{perspective:1800px; position:relative}
.flip-glow{position:absolute; inset:8% 4% -4%; background:radial-gradient(closest-side, rgba(245,162,93,.45), transparent); filter:blur(30px); z-index:0}
.card3d{position:relative; z-index:1; transform-style:preserve-3d; transition:transform 1s var(--ease); min-height:560px}
.card3d.flipped{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:30px; padding:clamp(24px, 3vw, 40px); display:flex; flex-direction:column}
.face.front{background:var(--cream); color:#1b1720}
.face.back{transform:rotateY(180deg); background:radial-gradient(70% 50% at 100% 0%, rgba(224,112,58,.22), transparent 70%), #171219; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(255,207,138,.22)}
.face .top{display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.face.front .top{color:#9a4a26}
.face.back .top{color:var(--gold)}
.meta{display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:10px 28px; margin:26px 0 0; padding:0}
.meta div{display:flex; flex-direction:column; gap:2px}
.meta dt{font-size:12px; color:#6b6157}
.meta dd{margin:0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.q{font-family:var(--serif); font-size:clamp(34px, 3.4vw, 54px); line-height:1.02; letter-spacing:-.02em; margin:auto 0 16px; text-wrap:balance}
.prompt{font-style:italic; font-family:var(--serif); font-size:22px; color:#6b6157; margin:0 0 26px}
.face-foot{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding-top:18px; border-top:1px solid rgba(27,23,32,.12); font-size:14px; color:#4d453d}
.face-foot a{color:#1b1720; font-weight:600; min-height:44px; display:inline-flex; align-items:center; gap:8px}
.face-foot .free{background:#1b1720; color:var(--gold); padding:6px 12px; border-radius:999px; font-weight:600; font-size:13px}
.flipbtn{align-self:flex-start; display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 22px; border-radius:999px; border:0; background:#1b1720; color:var(--cream); font-weight:600; font-size:16px; cursor:pointer; margin-bottom:24px; transition:background .3s, transform .3s var(--ease)}
.flipbtn:hover{background:var(--indigo)}
.flipbtn svg{transition:transform .6s var(--ease)}
.flipbtn:hover svg{transform:rotate(180deg)}
.face.back .flipbtn{background:rgba(246,238,226,.1); color:var(--cream)}
.face.back .flipbtn:hover{background:var(--indigo)}
.star{display:grid; gap:0; margin:28px 0 auto; padding:0; list-style:none}
.star li{display:grid; grid-template-columns:64px 1fr; align-items:baseline; padding:14px 0; border-top:1px solid rgba(246,238,226,.1)}
.star li b{font-family:var(--serif); font-size:44px; line-height:.8; color:var(--amber); font-weight:400}
.star li span{font-size:17px; color:var(--cream)}
.star li span em{font-style:normal; color:var(--cream-2)}
.back-lead{font-family:var(--serif); font-size:clamp(28px, 2.8vw, 42px); line-height:1.05; margin:28px 0 0}

/* ---------- airlines ---------- */
.airlines{overflow:hidden}
.marquee{margin:clamp(40px, 5vw, 70px) 0 clamp(50px, 6vw, 90px); display:flex; overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee ul{display:flex; flex:none; gap:0; margin:0; padding:0; list-style:none; animation:mq 38s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{font-family:var(--serif); font-size:clamp(64px, 9vw, 150px); line-height:1; letter-spacing:-.02em; padding:0 .32em; white-space:nowrap; color:var(--cream); display:flex; align-items:center; gap:.64em; transition:color .3s}
.marquee li:nth-child(even){font-style:italic; color:var(--amber)}
.marquee li::after{content:""; width:.16em; height:.16em; border-radius:50%; background:var(--gold); opacity:.7; transform:translateX(.32em)}
@keyframes mq{to{transform:translateX(-100%)}}
.air-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(40px, 6vw, 100px)}
.air-grid .count{font-family:var(--serif); font-size:clamp(120px, 14vw, 230px); line-height:.8; color:var(--amber); letter-spacing:-.04em; margin:0}
.air-grid .count + p{font-family:var(--serif); font-style:italic; font-size:28px; margin:12px 0 26px; color:var(--cream)}
.oplist{columns:4 180px; column-gap:32px; margin:0; padding:0; list-style:none}
.oplist li{break-inside:avoid; padding:7px 0; font-size:15px; color:var(--cream-2); transition:color .2s, transform .3s var(--ease)}
.oplist li:hover{color:var(--gold); transform:translateX(4px)}
.disclaimer{margin-top:44px; font-size:14px; color:var(--muted); max-width:60em}

/* ---------- pricing ---------- */
.pricing{background:radial-gradient(70% 50% at 50% 0%, rgba(245,162,93,.13), transparent 70%), var(--ink)}
.p-head{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:clamp(50px, 6vw, 90px)}
.tickets{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px); align-items:stretch}
.ticket{--mx:50%; --my:0%; position:relative; display:flex; flex-direction:column; border-radius:26px; background:var(--ink-3); padding:34px clamp(22px, 2.2vw, 34px) 30px; transition:transform .6s var(--ease), box-shadow .6s var(--ease), background .4s;
  -webkit-mask:radial-gradient(circle 16px at 0 var(--cut), transparent 98%, #000) , radial-gradient(circle 16px at 100% var(--cut), transparent 98%, #000); -webkit-mask-composite:source-in; mask:radial-gradient(circle 16px at 0 var(--cut), transparent 98%, #000) , radial-gradient(circle 16px at 100% var(--cut), transparent 98%, #000); mask-composite:intersect; --cut:300px}
.ticket::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .5s; background:radial-gradient(500px circle at var(--mx) var(--my), rgba(255,207,138,.16), transparent 45%)}
.ticket:hover{transform:translateY(-10px)}
.ticket:hover::before{opacity:1}
.ticket.hot{background:linear-gradient(180deg, #3a2126 0%, #22161c 40%, #191a22 100%); box-shadow:inset 0 0 0 1px rgba(245,162,93,.45)}
.ticket .tag{font-size:15px; color:var(--gold); font-weight:500; min-height:22px; margin:0 0 6px}
.ticket h3{font-family:var(--serif); font-size:clamp(38px, 3.4vw, 54px); line-height:1; letter-spacing:-.02em; margin:0 0 10px}
.ticket .tl{color:var(--cream-2); margin:0 0 26px; min-height:3.1em}
.price{display:flex; align-items:baseline; gap:10px; margin:0 0 24px; height:96px}
.price b{font-family:var(--serif); font-weight:400; font-size:clamp(76px, 7vw, 110px); line-height:.8; letter-spacing:-.04em; color:var(--cream)}
.hot .price b{color:var(--gold)}
.price span{color:var(--cream-2); font-size:15px}
.perf{position:relative; height:0; margin:26px -40px 26px; border-top:2px dashed rgba(246,238,226,.16)}
.feat{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px}
.feat li{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:16px}
.feat svg{margin-top:3px}
.fine{margin-top:auto; font-size:13.5px; color:var(--muted); line-height:1.5}
.fine b{display:block; color:var(--cream-2); font-size:14px; font-weight:600; margin-bottom:4px}
.ticket .btn{align-self:flex-start}
.stub{position:absolute; right:clamp(22px,2.2vw,34px); top:34px; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:18px}

/* ---------- faq ---------- */
.faq{padding-top:clamp(40px, 5vw, 80px)}
.faq-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(40px, 7vw, 120px); align-items:start}
.faq-aside{position:sticky; top:120px}
.faq-aside p{color:var(--cream-2)}
.acc{border-top:1px solid rgba(246,238,226,.14)}
.acc-item{border-bottom:1px solid rgba(246,238,226,.14)}
.acc-q{width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; text-align:left; background:none; border:0; padding:26px 0; cursor:pointer; font-family:var(--serif); font-size:clamp(26px, 2.5vw, 38px); line-height:1.08; letter-spacing:-.01em; min-height:44px; transition:color .3s}
.acc-q:hover{color:var(--gold)}
.acc-q .pm{flex:none; position:relative; width:44px; height:44px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(246,238,226,.25); transition:background .4s, box-shadow .4s, transform .6s var(--ease)}
.acc-q .pm::before,.acc-q .pm::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; background:currentColor; transform:translate(-50%,-50%)}
.acc-q .pm::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .5s var(--ease)}
.acc-q[aria-expanded="true"] .pm{background:var(--amber); color:var(--ink); box-shadow:none; transform:rotate(180deg)}
.acc-q[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.acc-a > div{overflow:hidden}
.acc-a p{margin:0; padding:0 64px 30px 0; color:var(--cream-2); font-size:17px; max-width:40em}
.acc-q[aria-expanded="true"] + .acc-a{grid-template-rows:1fr}

/* ---------- final cta ---------- */
.final{position:relative; overflow:hidden; min-height:min(92vh, 880px); display:flex; align-items:center; isolation:isolate}
.final .bg{position:absolute; inset:-10% 0; z-index:-2}
.fstage{position:absolute; --W:max(100%, calc(var(--fh) * 1.5)); width:var(--W); aspect-ratio:3/2; left:calc((100% - var(--W)) * .08); top:50%; transform:translateY(-50%)}
.final{--fh:min(92vh, 880px)}
.final .bg{overflow:hidden}
.final .l-plane{transform-origin:20% 50%}
.final::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--ink) 0%, rgba(12,13,18,.5) 28%, rgba(12,13,18,.25) 55%, rgba(12,13,18,.75) 85%, var(--ink) 100%), linear-gradient(90deg, rgba(12,13,18,.55), transparent 60%)}
.final .h2{font-size:clamp(52px, 7.6vw, 128px); max-width:11em}
.final-row{display:flex; flex-wrap:wrap; align-items:center; gap:22px 28px; margin-top:40px}
.final-row p{margin:0; color:var(--cream)}
.sub-form{margin-top:70px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; max-width:720px}
.sub-form label{flex-basis:100%; color:var(--cream); font-size:16px}
.sub-form input{flex:1 1 260px; min-height:52px; border-radius:999px; border:0; padding:0 22px; background:rgba(246,238,226,.1); color:var(--cream); font:inherit; box-shadow:inset 0 0 0 1px rgba(246,238,226,.25); transition:box-shadow .3s, background .3s}
.sub-form input::placeholder{color:#b8ae9f}
.sub-form input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--gold); background:rgba(246,238,226,.14)}

/* ---------- footer ---------- */
footer{background:var(--ink); padding:clamp(80px, 9vw, 130px) 0 40px; position:relative; overflow:hidden}
.foot-top{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(4, minmax(0,1fr)); gap:32px}
.foot-top .tag{font-family:var(--serif); font-style:italic; font-size:clamp(26px, 2.4vw, 36px); line-height:1.1; margin:0; max-width:10em}
.foot-col h3{font-family:var(--serif); font-size:24px; color:var(--gold); font-weight:400; margin:0 0 10px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col a{display:inline-flex; align-items:center; min-height:40px; text-decoration:none; color:var(--cream-2); font-size:15px; transition:color .2s}
.foot-col a:hover{color:var(--cream)}
.giant{font-family:var(--serif); font-size:clamp(70px, 15.2vw, 250px); line-height:.8; letter-spacing:-.05em; white-space:nowrap; margin:clamp(60px, 8vw, 120px) 0 30px; color:var(--cream); text-align:center}
.giant .dot{color:var(--amber)}
.giant em{color:var(--amber)}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; font-size:13.5px; color:var(--muted); padding-top:24px; border-top:1px solid rgba(246,238,226,.1)}
.legal a{color:var(--cream-2)}
.legal p{margin:0; max-width:60em}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .hero-copy .wrap{grid-template-columns:1fr}
  .stats{justify-content:start}
  .tickets{grid-template-columns:1fr; max-width:620px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top .tag{grid-column:1/-1}
}
@media (max-width: 900px){
  .intro-grid, .prep-head, .try-grid, .air-grid, .p-head, .faq-grid{grid-template-columns:1fr}
  .chapter{grid-template-columns:1fr}
  .chapter:nth-child(even) .ch-text{order:0}
  .faq-aside{position:static}
}
@media (max-width: 720px){
  :root{--hh: 660px}
  body{font-size:16.5px}
  .nav-in{height:64px; gap:8px}
  .brand{font-size:17px}
  .brand svg{width:26px; height:26px}
  .signin{padding:10px 8px; font-size:14px}
  .nav-cta{gap:2px}
  .nav-cta .btn .arr{display:none}
  .nav-cta .btn{padding:0 16px; font-size:14px}
  .stage{--W:calc(var(--hh) * 1.75); --fx:.13; --fy:0}
  .h1 .br{display:block; height:0}
  .hero{height:auto; overflow:hidden}
  .hero-stage{position:relative; height:var(--hh); overflow:hidden}
  .hero-title{top:92px; text-align:left; padding:0 20px}
  .eyebrow{margin-left:.1em}
  .h1{font-size:40vw; line-height:.78; white-space:normal}
  .eyebrow{font-size:22px}
  .fade{height:34%}
  .hero-copy{position:relative; bottom:auto; background:var(--ink); padding:4px 0 56px; margin-top:-30px}
  .stats{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:44px}
  .stats b{font-size:40px}
  .stats span{font-size:13px}
  .scrollcue{display:none}
  .horizon figcaption{flex-direction:column; gap:4px}
  .numeral{font-size:120px}
  .art{aspect-ratio:4/4.2}
  .fc{width:74%}
  .fc.front{left:6%; top:10%}
  .fc.back{right:5%; bottom:9%}
  .card3d{min-height:640px}
  .meta{grid-template-columns:repeat(2, auto)}
  .q{font-size:34px}
  .oplist{columns:2}
  .foot-top{grid-template-columns:1fr 1fr; gap:28px 20px}
  .giant{font-size:15.6vw; margin-left:-4px}
  .acc-a p{padding-right:0}
  .perf{margin-left:-24px; margin-right:-24px}
}
@media (max-width: 720px){
  .final{display:block; min-height:0; padding:330px 0 100px; --fh:600px}
  .final .bg{inset:-8% 0}
  .fstage{--W:calc(var(--fh) * 1.6); left:calc((100% - var(--W)) * .2); top:0; transform:none}
  .final::before{background:linear-gradient(180deg, var(--ink) 0%, rgba(12,13,18,0) 12%, rgba(12,13,18,0) 26%, rgba(12,13,18,.8) 40%, var(--ink) 56%)}
  .intro-foot{grid-template-columns:1fr}
  .intro-foot .tlink{justify-self:start}
  .horizon-wrap{min-height:560px}
  .prep-head .side{grid-column:1}
  .h1 .sp{display:none}
}
@media (max-width: 400px){ .brand svg{display:none} }
@media (max-width: 340px){ .signin{display:none} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important; scroll-behavior:auto!important}
  .marquee ul{animation:none}
}
.is-shot .grain, .is-shot .letterbox, .is-shot .scrollcue{display:none}
.is-shot .marquee ul{animation:none}
.is-shot .wave i{animation:none}
@media (min-width: 721px){ .hero-stage{position:absolute; inset:0} }

/* v3: browsers without image-set() type() get the JPEG/PNG cuts. */
@supports not (background-image:image-set(url("/images/landing-v3-golden-hour-base-1536.webp") type("image/webp"))){
  :root{--img-base:url("/images/landing-v3-golden-hour-base-1536.jpg"); --img-plane:url("/images/landing-v3-golden-hour-plane-1237.png")}
}
/* v3: each operator name is a link to /app?op=<id>. The link takes the row's
   7px padding (cancelled by its negative margin), so the row looks and spaces
   exactly as option 1 and the whole row is the tap area. */
.oplist a{display:block; padding:7px 0; margin:-7px 0; text-decoration:none}