/* Vicetok web, page-level styles. Load after /assets/tokens.css and /assets/components.css. */

/* ============ 1. shared page styles ============ */
/* Google Fonts load without blocking render. Same metric-matched local faces as forum.css (same names and values),
   so the swap does not reflow text on any page; plus a width-matched face for the Big Shoulders numerals. */
@font-face { font-family: 'Jost Fallback'; src: local('Futura-Medium'), local('Futura Medium');
       size-adjust: 93.03%; ascent-override: 115.02%; descent-override: 40.31%; line-gap-override: 0%; }
@font-face { font-family: 'Jost Fallback Sans'; src: local('ArialMT'), local('Arial'), local('Roboto');
       size-adjust: 95.69%; ascent-override: 111.81%; descent-override: 39.19%; line-gap-override: 0%; }
@font-face { font-family: 'Dial Fallback'; src: local('Arial Narrow'), local('ArialNarrow'); size-adjust: 87%; }
:root {
  --text: 'Jost', 'Jost Fallback', 'Jost Fallback Sans', sans-serif;
  --dial: 'Big Shoulders Display', 'Dial Fallback', 'Jost Fallback', sans-serif;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: calc(var(--z-masthead) + 1); padding: 12px 18px;
       border-radius: var(--r-pill); background: var(--neon-cream); color: var(--midnight); font: 500 var(--t-ui)/1 var(--text);
       text-decoration: none; transition: top var(--fade); }
.skip:focus { top: 12px; }
.masthead .badge { margin-left: auto; }
.masthead nav + .badge { margin-left: 0; }
@media (max-width: 719px) { .masthead .icon-btn--forum { margin-left: auto; } .masthead .wordmark { margin-right: 0; } }

/* ---- how-to and legal pages ---- */
.doc-h1 { font-size: var(--t-thread); line-height: 1.34; margin: 22px 0 14px; text-wrap: balance; }
.howto .lead { margin-top: var(--s-3); }
.howto .lead p:first-child { font-size: var(--t-lede); color: var(--neon-cream); }
.howto h2.caps { font-size: 15px; line-height: 1.4; margin: var(--s-5) 0 var(--s-2); }
.howto .read ol { gap: .9em; }
.howto .read ol b { font-weight: 500; color: var(--neon-cream); }
.howto .read ul { padding-left: 1.1em; display: grid; gap: .45em; }
.howto .read ul li::marker { color: var(--lilac); }
.howto .rows { margin-top: var(--s-2); }
.howto .qbar h2 { font-size: 13px; margin: 0; }

.legal-doc .read h2 { font-size: var(--t-ui); font-weight: 600; text-transform: none; letter-spacing: 0; margin: var(--s-4) 0 var(--s-1); }
.legal-doc .read p, .legal-doc .read li { color: var(--haze); }
.legal-doc .read ul { padding-left: 1.1em; display: grid; gap: .45em; margin-top: .6em; }
.legal-doc .read ul li::marker { color: var(--lilac); }
.legal-doc .read strong { background: none; padding: 0; }
.legal-doc .rule { height: 2px; border-radius: var(--r-tick); background: var(--dusk-x); width: min(100%, 220px); margin: var(--s-3) 0 var(--s-4); }
.site-foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-foot .wordmark { min-height: 44px; }

/* ============ 2. landing (body.landing): one painted coast, night to day ============ */
/* Ten painted scenes (assets/img/bg-*, credits in assets/img/credits.txt) by mean luminance, dark > light > dark:
   city 44 (hero) > overpass 78 > neon 100 > palms 124 > causeway 145 (Ask, the peak) > boardwalk 134
   > marina 113 > rooftop 90 > beach 65 > hotels 50 (Get). Layers per section: scene (Ken Burns on scroll) > text scrim (navy, .2-.45, weighted
   behind the copy only) > edge fade to ONE boundary colour shared with the neighbour (--b0..--b10, sampled from the
   real top/bottom rows of both images and averaged), so seams vanish. Every scene is mid/dark where the copy sits, so
   the text is light (cream/haze), except the two brightest (#ask, #read) and the 404, which use .on-light. */
.landing {
  --cta-pink: #ffb2c7;
  --b0: 19 23 55;   --b1: 52 40 77;   --b2: 84 57 73;   --b3: 81 59 78;   --b4: 46 68 114; --b5: 58 103 126;
  --b6: 105 74 70;  --b7: 79 54 82;   --b8: 46 46 84;   --b9: 25 25 53;   --b10: 7 8 16;
  --navy: 12 13 27;
  --l-body: clamp(1.125rem, 1.04rem + .38vw, 1.3125rem);
  --l-lede: clamp(1.1875rem, 1.06rem + .55vw, 1.5rem);
  --l-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);
  --l-h3: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --kb-ease: cubic-bezier(.3, 0, .7, 1);
}
@media (max-width: 719px) { .landing { --b0: 19 26 61; --b1: 49 43 88; --b2: 100 69 86; --b3: 93 61 76; --b4: 51 72 118; --b5: 53 108 131;
  --b6: 108 82 77; --b7: 84 61 90; --b8: 57 54 94; --b9: 25 25 51; } }
/* .on-light: navy text on a cream scrim (#ask, #read, 404) */
.on-light {
  --neon-cream: #0c0d1b; --haze: #1d1f44; --lilac: #2c3868; --signal: #2c3868; --surf: #0f4f5a; --flamingo: #9c1f57;
  --static: rgb(12 13 27 / .22); --static-tick: rgb(12 13 27 / .4); color: var(--neon-cream);
}
.on-light .btn { background: rgb(255 249 203 / .6); border-color: rgb(12 13 27 / .25); }
.on-light .btn:hover { border-color: #0c0d1b; }

/* ---- section shell ---- */
html:has(.landing), html:has(.landing) body { overflow-x: clip; }
.zone { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(72px, 2.5rem + 4vw, 124px); background: rgb(var(--top));
        view-timeline: --zone block; --fade-h: clamp(56px, 7vw, 112px); }
.zone .wrap { position: relative; }
.zone-bg, .hero2 .scene { position: absolute; inset: 0; z-index: -1; overflow: clip; display: block; }
.zone-bg img, .hero2 .scene img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.zone-bg::before, .zone-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.zone-bg::before { background: var(--scrim); }
.zone-bg::after { background: linear-gradient(180deg, rgb(var(--top)) 0, rgb(var(--top) / 0) var(--fade-h),
                  rgb(var(--bot) / 0) calc(100% - var(--fade-h)), rgb(var(--bot)) 100%); }
/* scrim shapes: copy on the left, copy on the right, copy centred */
.zone { --scrim: linear-gradient(90deg, rgb(var(--navy) / var(--a1)) 0, rgb(var(--navy) / var(--a1)) 40%, rgb(var(--navy) / var(--a0)) 66%); --a0: .14; --a1: .36; }
/* bright scenes (causeway, boardwalk): navy text on a cream scrim weighted behind the copy */
.zone--dusk.on-light { --scrim: linear-gradient(90deg, rgb(255 249 222 / var(--a1)) 0, rgb(255 249 222 / var(--a1)) 40%, rgb(255 249 222 / var(--a0)) 66%); --a1: .5; --a0: .08; }
.zone--day.on-light { --scrim: linear-gradient(90deg, rgb(255 249 222 / .45), rgb(255 249 222 / .2) 46%, rgb(255 249 222 / .2)); }
.zone--golden { --a1: .62; } .zone--sunrise { --a1: .4; --a0: .16; } .zone--deep { --a1: .5; } .zone--predawn { --a1: .45; }
.zone--sunset { --a1: .42; }
.zone--sunset, .zone--predawn, .zone--dawn, .zone--day {
  --scrim: radial-gradient(120% 90% at 50% 45%, rgb(var(--navy) / var(--a1)) 0, rgb(var(--navy) / var(--a1)) 45%, rgb(var(--navy) / var(--a0)) 100%); }
.zone--warm    { --top: var(--b0); --bot: var(--b2); }
.zone--golden  { --top: var(--b2); --bot: var(--b3); }
.zone--sunset  { --top: var(--b3); --bot: var(--b4); }
.zone--dusk    { --top: var(--b4); --bot: var(--b5); }
.zone--day   { --top: var(--b5); --bot: var(--b6); }
.zone--deep    { --top: var(--b6); --bot: var(--b7); }
.zone--predawn { --top: var(--b7); --bot: var(--b8); }
.zone--dawn    { --top: var(--b8); --bot: var(--b9); }
.zone--sunrise { --top: var(--b9); --bot: var(--b10); }
.lost.on-light { --scrim: linear-gradient(180deg, rgb(255 249 222 / .74), rgb(255 249 222 / .56)); --top: 12 13 27; --bot: 7 8 16; }
@media (max-width: 899px) {
  .zone, .zone--dusk, .zone--sunset, .zone--predawn, .zone--dawn, .zone--day {
    --scrim: linear-gradient(180deg, rgb(var(--navy) / var(--m, .32)), rgb(var(--navy) / var(--m, .32))); }
  .zone--golden, .zone--sunset { --m: .58; } .zone--deep { --m: .64; } .zone--predawn { --m: .54; } .zone--sunrise { --m: .4; }
  .zone.on-light { --scrim: linear-gradient(180deg, rgb(255 249 222 / .58), rgb(255 249 222 / .58)); }
  .zone--day.on-light { --scrim: linear-gradient(180deg, rgb(255 249 222 / .55), rgb(255 249 222 / .4) 40%, rgb(255 249 222 / .4)); }
}
.zone-title { font-size: var(--l-h2); line-height: 1.15; text-align: center; letter-spacing: .12em; text-wrap: balance; max-width: 26ch; margin-inline: auto; }
.landing .band-head { max-width: 46rem; gap: var(--s-3); }
.landing .band-head h2 { font-size: var(--l-h2); line-height: 1.15; letter-spacing: .12em; }
.landing .band-head p { font-size: var(--l-lede); line-height: 1.5; max-width: 40ch; }

/* ---- hero: the night city, three depth layers + window-light canvas (landing.js) ---- */
.hero2 { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: min(100svh, 980px); background: rgb(var(--b0)); }
.hero2 .scene { --pos: center 62%; }
.hero2 .scene::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
       background: linear-gradient(100deg, rgb(var(--navy) / .45) 0, rgb(var(--navy) / .3) 40%, rgb(var(--navy) / 0) 62%),
                   linear-gradient(180deg, rgb(var(--b0) / 0) 70%, rgb(var(--b0)) 100%); }
.depth { position: absolute; inset: -24px; will-change: transform; }
.depth > picture, .depth > img { position: absolute; inset: 0; display: block; }
.depth img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.depth--near { -webkit-mask-image: linear-gradient(180deg, transparent 63%, #000 70%), linear-gradient(90deg, #000 16%, transparent 26%);
               mask-image: linear-gradient(180deg, transparent 63%, #000 70%), linear-gradient(90deg, #000 16%, transparent 26%); }
.depth--lights { pointer-events: none; mix-blend-mode: screen; }
.depth--lights canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero2 .masthead { position: relative; }
.hero2-main { flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 8px var(--gutter) 96px;
       display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s-5); align-items: center; }
.hero2 h1 { font-size: clamp(2.375rem, 1.3rem + 3.6vw, 4.625rem); line-height: 1.04; letter-spacing: .1em; max-width: 17ch; text-wrap: balance; }
.hero2 .what, .signoff .what { margin-top: var(--s-3); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.45; color: var(--haze); max-width: 34ch; font-weight: 500; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.hero-cta > small, .signoff .actions > small { font-size: var(--l-body); font-weight: 600; color: var(--haze); }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }
.proof { gap: 4px 26px; }
.proof a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1rem; font-weight: 500; color: var(--haze);
       text-decoration: none; transition: color var(--fade); --duo: #ffb2c7; }
.proof a:hover { color: var(--neon-cream); }
.proof svg { width: 20px; height: 20px; }
@media (max-width: 719px) { .proof { display: none; } }
.hero2-phone { justify-self: center; display: grid; justify-items: center; gap: 18px; }
.reel3 { position: relative; width: min(330px, 70vw); aspect-ratio: 800 / 1636; }
.reel3 > .reel-shot { position: absolute; inset: 0; display: block; }
.reel-shot picture, .shot picture, .scr > span { display: block; }
.reel3 img { width: 100%; height: auto; filter: drop-shadow(0 40px 46px rgb(7 8 16 / .6)); }
.reel3 > :nth-child(2) { clip-path: inset(100% 0 0 0); animation: swipe-2 15s var(--kb-ease) infinite; }
.reel3 > :nth-child(3) { clip-path: inset(100% 0 0 0); animation: swipe-3 15s var(--kb-ease) infinite; }
@keyframes swipe-2 { 0%, 30.5% { clip-path: inset(100% 0 0 0); } 33.3%, 96.6% { clip-path: inset(0 0 0 0); } 96.7%, 100% { clip-path: inset(100% 0 0 0); } }
@keyframes swipe-3 { 0%, 63.8% { clip-path: inset(100% 0 0 0); } 66.6%, 97.2% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
.reel-progress { display: flex; gap: 8px; width: min(250px, 56vw); }
.reel-progress i { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 249 203 / .28); overflow: hidden; }
.reel-progress i::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, #5a6fe0, #d1499b 55%, #ff9a52);
       transform-origin: left; transform: scaleX(0); animation: seg-1 15s linear infinite; }
.reel-progress i:nth-child(2)::after { animation-name: seg-2; } .reel-progress i:nth-child(3)::after { animation-name: seg-3; }
@keyframes seg-1 { 0% { transform: scaleX(0); } 33.3%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes seg-2 { 0%, 33.3% { transform: scaleX(0); } 66.6%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes seg-3 { 0%, 66.6% { transform: scaleX(0); } 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.hero2.idle :is(.reel3 > *, .needle-run, .float), .hero2.idle .reel-progress i::after { animation-play-state: paused; }

/* tuning scale on the waterline, needle steps with the reel */
.tuneline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; height: 48px; }
.tuneline img { width: 100%; height: 40px; opacity: .45; }
.needle-run { position: absolute; inset: 0; animation: needle 15s var(--spring) infinite; }
.needle-run::after { content: ""; position: absolute; left: 0; top: -6px; width: 2px; height: 54px; border-radius: var(--r-tick); background: var(--neon-cream); }
@keyframes needle { 0%, 30% { translate: 20% 0; } 33.3%, 63% { translate: 50% 0; } 66.6%, 96% { translate: 80% 0; } 100% { translate: 20% 0; } }
@media (max-width: 899px) {
  .hero2 .scene::after { background: linear-gradient(180deg, rgb(var(--navy) / .45) 0, rgb(var(--navy) / .32) 55%, rgb(var(--navy) / .2) 75%, rgb(var(--b0)) 100%); }
  .hero2-main { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-2); padding-bottom: 72px; }
  .reel3 { width: min(300px, 72vw); }
}
@media (max-width: 719px) { .tuneline { display: none; } }

/* ---- icon tiles: the Coastline set (sprite #b-*, 24 grid, 1.75 stroke, one duotone part .d) ---- */
.d { fill: var(--duo, currentColor); fill-opacity: var(--duo-a, .55); }
.blip { --duo: #ffb2c7; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
       border-radius: 12px 4px 12px 12px; color: #fff9cb; background: rgb(7 8 16 / .58);
       box-shadow: inset 0 0 0 1px rgb(255 249 203 / .2), 0 10px 22px -12px rgb(7 8 16 / .7); }
.blip svg { width: 22px; height: 22px; }
.blip--s { width: 30px; height: 30px; border-radius: 9px 3px 9px 9px; } .blip--s svg { width: 17px; height: 17px; }
.blip--lilac { --duo: #ccc2f5; } .blip--teal { --duo: #b8f0ea; } .blip--peach { --duo: #fff9cb; }
.facts li:nth-child(2) .blip, .safety li:nth-child(2) .blip, .steps li:nth-child(2) .blip { --duo: #ccc2f5; }
.facts li:nth-child(3) .blip, .safety li:nth-child(3) .blip, .steps li:nth-child(3) .blip { --duo: #b8f0ea; }
.icon-btn .duo { --duo: #ffb2c7; }


/* ---- lists, steps, safety, FAQ, rows at body size ---- */
.landing .facts { max-width: 36rem; }
.landing .facts li { grid-template-columns: 40px 1fr; gap: 16px; align-items: center; padding: 16px 0; font-size: var(--l-body); line-height: 1.5; }
.landing .steps h3 { font-size: var(--l-h3); gap: 12px; }
.landing .steps p { font-size: var(--l-body); line-height: 1.55; max-width: 32ch; color: var(--haze); }
.landing .steps li { padding: 22px 24px 26px; border-radius: var(--r-card); background: rgb(7 8 16 / .5); border: 1px solid rgb(255 249 203 / .12); }
.landing .steps li::before { left: 24px; }
@media (max-width: 899px) { .landing .steps li::before { left: -28px; top: 34px; } }
.landing .safety h3 { font-size: var(--l-h3); gap: 12px; }
.landing .safety p { font-size: var(--l-body); line-height: 1.5; color: var(--haze); }
.landing .qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--s-4) var(--s-5); max-width: 64rem; margin: var(--s-5) auto 0; }
.landing .qa dt { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); font-weight: 600; line-height: 1.3; color: var(--neon-cream); text-wrap: pretty; }
.landing .qa dd { margin: var(--s-2) 0 0; font-size: var(--l-body); line-height: 1.55; color: var(--haze); max-width: 46ch; }
.landing .qa a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.landing .rows .row-title { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); }
.landing .rows .row-cat { font-size: 12px; }
.landing .btn { min-height: 52px; font-size: var(--l-body); padding: 0 24px 0 7px; background: rgb(7 8 16 / .5); }
.landing .btn .blip { width: 38px; height: 38px; } .landing .btn .blip svg { width: 20px; height: 20px; }
.landing .chip { min-height: 48px; font-size: 17px; padding: 0 20px 0 8px; background: rgb(7 8 16 / .5); }
.band-head + .safety, .band-head + .steps { margin-top: var(--s-5); }
#faq .band-head { max-width: 64rem; margin-inline: auto; }

/* ---- Post: steps with the console marks (official artwork as a mask, tinted to the text colour) ---- */
.steps-wrap { position: relative; margin-top: var(--s-5); }
.steps-progress { position: absolute; z-index: 1; left: 0; right: 0; top: 7px; height: 3px; border-radius: var(--r-tick);
       background: linear-gradient(90deg, #252644, #ffb2c7 55%, #4b2f54); transform-origin: left; }
.consoles { display: flex; align-items: center; gap: 18px; color: var(--neon-cream); }
.consoles .mark { display: block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mark--ps5 { --m: url(/assets/img/brand/ps5-logo.svg); width: 104px; aspect-ratio: 990.96 / 215.56; }
.mark--xbox { --m: url(/assets/img/brand/xbox-sphere.svg); width: 26px; height: 26px; }
@media (max-width: 899px) { .steps-progress { right: auto; top: 0; bottom: 0; left: 3px; width: 3px; height: auto; transform-origin: top; } }

/* ---- Read: forum hub + static category chips ---- */
.forum-hub { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.forum-hub > .band-head { grid-column: 1; }
.forum-hub > .hub-list { grid-column: 3; display: grid; gap: var(--s-4); padding: 8px 28px 28px; border-radius: var(--r-card); background: rgb(255 249 222 / .7); border: 1px solid rgb(12 13 27 / .1); }
.hub-list .rows { border-top: 0; }
@media (max-width: 719px) { .forum-hub > .hub-list { padding: 4px 18px 22px; margin-inline: -6px; } }
.hub-list .btn { justify-self: start; }
#read .rows a:hover .row-title { color: var(--flamingo); }
.cats { margin-top: var(--s-5); }
.cats li:nth-child(even) .blip { --duo: #b8f0ea; }
@media (max-width: 899px) { .forum-hub { grid-template-columns: 1fr; gap: var(--s-4); } .forum-hub > * { grid-column: 1 !important; } }


/* ---- final CTA ---- */
.signoff { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; padding-top: var(--s-5); }
.signoff::before { display: none; }
/* local night pool behind the closing copy so it never sits on the neon tubes */
.signoff > div { position: relative; isolation: isolate; }
.signoff > div::before { content: ""; position: absolute; z-index: -1; inset: -90px -160px -90px -120px; pointer-events: none;
       background: radial-gradient(closest-side, rgb(7 8 16 / .78), rgb(7 8 16 / .6) 55%, rgb(7 8 16 / 0)); }
@media (max-width: 719px) { .signoff > div::before { inset: -60px -40px; } #get { --pos: center 0%; } }
.signoff h2 { font-size: clamp(2.375rem, 1.3rem + 3.6vw, 4.625rem); line-height: 1.05; letter-spacing: .1em; text-wrap: balance; max-width: 18ch; }
.signoff .actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.signoff .qr { width: 148px; height: 148px; }
@media (max-width: 719px) { .signoff { grid-template-columns: 1fr; } .signoff .qr { display: none; } }
.wordmark .mark { width: 28px; height: 28px; flex: none; }
.masthead .wordmark { gap: 12px; }

/* ---- real app screens (framed iPhone shots, assets/img/app/<name>-400/800) ---- */
.landing .shot { display: block; position: relative; margin-top: var(--s-5); }
.landing .shot img { width: 100%; height: auto; filter: drop-shadow(0 36px 40px rgb(7 8 16 / .5)); }
.float { justify-self: center; }
.float .shot { width: min(340px, 76vw); }

.landing .on-light :is(.btn, .chip) { background: rgb(255 249 222 / .72); border-color: rgb(12 13 27 / .22); color: #0c0d1b; }
/* ---- buttons: lift on hover, glow ring fades in, press scale (transform/opacity only) ---- */
.landing :is(.btn, .badge, .chip) { position: relative; transition: translate .45s var(--spring), scale .45s var(--spring), border-color var(--fade); }
.landing :is(.btn, .badge, .chip)::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
       box-shadow: 0 0 0 1px rgb(255 178 199 / .7), 0 14px 30px -10px rgb(255 178 199 / .55); transition: opacity var(--fade); }
.landing :is(.btn, .badge, .chip):hover { translate: 0 -2px; }
.landing :is(.btn, .badge, .chip):hover::after, .landing :is(.btn, .badge, .chip):focus-visible::after { opacity: 1; }
.landing :is(.btn, .badge, .chip):active { scale: .96; translate: 0 0; }
.landing .btn .blip { transition: rotate .45s var(--spring); }
.landing .btn:hover .blip { rotate: -6deg; }

/* ---- motion: idle float (time), Ken Burns (scroll), one-shot reveals in landing.js ---- */
.float { animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes kb { from { transform: scale(1.1); } to { transform: scale(1.02); } }
@keyframes draw { from { scale: 0 1; } }
@keyframes draw-y { from { scale: 1 0; } }
@supports (animation-timeline: view()) {
  .zone-bg img { animation: kb linear both; animation-timeline: --zone; animation-range: cover; }
  .steps-progress { animation: draw linear both; animation-timeline: view(); animation-range: entry 60% cover 55%; }
  @media (max-width: 899px) { .steps-progress { animation-name: draw-y; } }
}
/* one-shot reveals (html.io, set by landing.js); Ken Burns fallback when view() is missing */
.io :is(.reveal, .landing .split-media) { opacity: 0; translate: 0 16px; transition: opacity .35s ease-out, translate .45s var(--spring); }
.io :is(.reveal, .landing .split-media).in { opacity: 1; translate: 0 0; }
.io.no-sda .zone-bg img { transform: scale(1.1); transition: transform 14s var(--kb-ease); }
.io.no-sda .zone.in .zone-bg img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .landing .split-media, .zone-bg img, .hero2 .scene, .float, .float .shot, .fphone,
  .steps-progress, .needle-run, .reel3 > *, .reel-progress i::after { animation: none !important; transition: none !important; }
  .reel3:not(.js) > :not(:first-child) { display: none; }
  .reel-progress i:first-child::after { transform: scaleX(1); }
  .landing :is(.btn, .badge, .chip) { transition: none; }
  .landing :is(.btn, .badge, .chip):hover, .landing .btn:hover .blip { translate: none; rotate: none; }
}

/* ---- live phones (landing.js): screens swap inside the fixed frame, tab-bar hit areas, driving rows ---- */
.reel3.js > .reel-shot { clip-path: none; animation: none; opacity: 0; translate: 0 6px; transition: opacity .2s ease-out, translate .2s ease-out; }
.reel3.js > .reel-shot.on { opacity: 1; translate: 0 0; }
.reel3.js { touch-action: pan-y; cursor: pointer; }
.scr { position: absolute; inset: 0; z-index: 1; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity .2s ease-out, translate .2s ease-out; }
.scr.on { opacity: 1; translate: 0 0; }
.scr picture, .scr img { display: block; width: 100%; height: auto; }
.landing .scr img { filter: none; }
.hit { position: absolute; z-index: 3; top: 87%; height: 7.5%; width: 26.6%; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.hit--heart { top: 50%; width: 9%; height: 4.6%; }
.hit:focus-visible { outline: 2px solid #ffb2c7; outline-offset: 2px; }
.burst { position: absolute; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; }
.hero2-phone.js .reel-progress i::after { animation: none; transform: scaleX(var(--f, 0)); }
.hero2-phone.js .reel-progress i.run::after { animation: seg-run 5s linear forwards; }
@keyframes seg-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero2.js-reel .needle-run { animation: none; translate: var(--nx, 20%) 0; transition: translate .45s var(--spring); }
.landing :is(.shot, .reel3) { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; }
/* driving rows: a real button per row; the active one gets the dusk edge line and brighter text */
.drive { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.drive:focus-visible { outline: none; }
:is(.facts, .steps) li.drives { position: relative; cursor: pointer; transition: color .2s ease-out; }
:is(.facts, .steps) li.drives::after { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
       background: linear-gradient(180deg, #5a6fe0, #d1499b 55%, #ff9a52); opacity: 0; transition: opacity .2s ease-out; }
.steps li.drives::after { left: 0; top: 18px; bottom: 18px; }
:is(.facts, .steps) li.drives.is-on::after { opacity: 1; }
.facts li.drives.is-on, .facts li.drives.is-on b, .steps li.drives.is-on p { color: var(--neon-cream); }
.steps li.drives.is-on { background: rgb(7 8 16 / .66); }
:is(.facts, .steps) li.drives:has(.drive:focus-visible) { outline: 2px solid #ffb2c7; outline-offset: 4px; border-radius: 12px; }
.chip[aria-current="true"] { border-color: #0c0d1b; background: rgb(255 249 222 / .95); }
@media (prefers-reduced-motion: reduce) {
  .reel3.js > .reel-shot, .scr { transition: none; translate: none; }
  .landing :is(.shot, .reel3) { transform: none; }
}

/* ---- one phone on desktop: fixed in the right column (left set by landing.js), section phones hidden ---- */
.fphone { display: none; }
@media (min-width: 900px) {
  .landing main .split-media { display: none; }
  .landing .hero2-phone { visibility: hidden; }
  .fphone { display: block; position: fixed; z-index: 5; top: 50%; left: var(--fx, 75vw); width: min(360px, calc((100vh - 110px) * 800 / 1636));
       translate: -50% calc(-50% + 24px); opacity: 0; visibility: hidden; pointer-events: none;
       transition: opacity .35s ease-out, translate .45s var(--spring), visibility 0s .45s; }
  .fphone.on { opacity: 1; visibility: visible; translate: -50% -50%; pointer-events: auto; transition-delay: 0s; }
  .fphone .shot { margin-top: 0; width: 100%; }
  /* Ask and Profiles sit between full-width bands: one screen tall, so the phone has room to show */
  #ask, #profiles { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .fphone, .fphone.on { translate: -50% -50%; transition: none; } }

/* ---- 404 (causeway scene, navy on cream) ---- */
.lost { min-height: 70svh; display: grid; align-items: center; }
.lost h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: .1em; }
.lost .what { margin-top: var(--s-3); font-size: var(--l-lede); color: var(--haze); font-weight: 500; }
.lost .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }

/* ---- legibility over painted scenes ---- */
.landing :is(.zone:not(.on-light) .wrap, .hero2 .wrap) { text-shadow: 0 1px 2px rgb(7 8 16 / .55), 0 2px 18px rgb(7 8 16 / .6); }
.landing .zone.on-light .wrap { text-shadow: 0 0 16px rgb(255 249 222 / .75); }
.landing :is(.phone, .shot, .badge, .btn, .qr) { text-shadow: none; }
#read .rows li { transition: opacity .2s ease-out; }
#read .rows li.dim { opacity: .28; }

/* ---- Post: steps on the left, phones on the right (desktop) ---- */
@media (min-width: 900px) {
  #post .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); align-items: start; }
  #post .band-head, #post .steps-wrap { grid-column: 1; }
  #post .steps { grid-template-columns: 1fr; gap: var(--s-3); padding: 0; }
  #post .steps::before, #post .steps li::before, #post .steps-progress { display: none; }
  #post .steps li { grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; padding: 20px 24px; }
  #post .steps li > * { grid-column: 2; }
  #post .steps li > .step-n { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  #post .steps p { max-width: 44ch; }
}
/* FAQ lines up with every other section */
#faq .band-head { max-width: none; margin-inline: 0; }
.landing .qa { margin-inline: 0; max-width: 72rem; }

/* Ask: copy sits on a frosted cream panel so it reads over the bright causeway */
#ask .split-copy { background: rgb(255 249 222 / .8); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgb(255 255 255 / .5); border-radius: 28px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 20px 60px rgb(12 13 27 / .18); }
#ask .split-copy, #ask .split-copy * { text-shadow: none; }

/* story order: hero > watch > post > ask > read > profiles; watch now follows the hero directly */
.landing #watch { --top: var(--b1); }
/* Read keeps to the left column on desktop so the one phone (forum screen) stays up beside it */
@media (min-width: 900px) {
  #read .forum-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); }
  #read .forum-hub > * { grid-column: 1 !important; }
  #read .forum-hub > .hub-list { margin-top: var(--s-4); }
  #read .cats .chips { max-width: calc(50% - 44px); }
}

/* feed screen video: the screen area of the 800x1636 frame (72,69 / 1206x2622 of 1350x2760), bezel cut-out on top */
.live { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; border-radius: 14.1% / 6.48%; overflow: hidden; pointer-events: none; }
.live video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease-out; }
.live video.go { opacity: 1; }
.landing img.bezel { position: absolute; inset: 0; width: 100%; height: auto; filter: none; pointer-events: none; }