/* Flits landing page. Colours are the dark values in constants/tokens/color.ts;
   fonts are Inter / Inter Tight (constants/tokens/type.ts), self-hosted, SIL OFL.
   Layout modes:
   - default (no JS, reduced motion, or scripts blocked): a static stack of the same scenes
   - .js-3d: one sticky stage, one scrubbed GSAP timeline (js/landing.js) */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-400.v1.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter-600.v1.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/inter-tight-700.v1.woff2) format("woff2")}

:root{
  --canvas:#0B0C0A;      /* bg.canvas */
  --surface1:#141512;    /* bg.surface1 */
  --surface2:#1C1D1A;    /* bg.surface2 */
  --surface3:#262722;    /* bg.surface3 */
  --border-default:#2E2F29;
  --border-strong:#3D3E37;
  --text:#F4F5EF;        /* text.primary */
  --text2:#B4B6AC;       /* text.secondary */
  --lime:#C6F432;        /* accent.fill */
  --lime-on:#10120A;     /* accent.on */
  --lime-text:#D4FA5C;   /* accent.text */
  --lime-subtle:rgba(198,244,50,.12); /* accent.subtle */
  --scrim:rgba(0,0,0,.44);            /* camera.chromeScrim */
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ph:min(62svh,660px);             /* phone height */
  --pad:10px;                         /* bezel */
  --unit:100svh;                      /* scroll length per story step */
}
*{box-sizing:border-box;margin:0}
html{background:var(--canvas);color:var(--text);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.5;background:var(--canvas)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip{position:absolute;left:12px;top:-60px;background:var(--lime);color:var(--lime-on);padding:10px 16px;border-radius:10px;z-index:100;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.get-app{position:fixed;top:max(14px,2.4svh);right:max(14px,3vw);z-index:50;background:var(--text);color:var(--canvas);font-weight:600;font-size:14px;line-height:1;padding:11px 16px;border-radius:100px;text-decoration:none}
.get-app:hover{filter:brightness(.92)}
:focus-visible{outline:3px solid var(--lime-text);outline-offset:3px}
.get-app:focus-visible{outline-color:var(--lime);outline-offset:3px;box-shadow:0 0 0 3px var(--canvas)}

/* ---------- shared scene typography ---------- */
.scene{text-align:center;display:flex;flex-direction:column;align-items:center}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;font-size:clamp(34px,6.2vw,76px);max-width:16ch;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:clamp(26px,3.6vw,44px)}
.scene p{color:var(--text2);font-size:clamp(16px,1.7vw,21px);max-width:40ch;margin-top:14px;text-wrap:pretty}
.mark{margin-bottom:18px;border-radius:22%}
.note{font-size:14px!important;color:var(--text2)}

/* ---------- STATIC layout (default) ---------- */
.stage{display:block}
.bgs,.phone-wrap,.hud{display:none}
.scene{min-height:min(92svh,860px);justify-content:center;padding:clamp(56px,10svh,110px) 20px}
.scene[data-bg=hero]{background:var(--canvas)}
.scene[data-bg=select]{background:var(--surface1)}
.scene[data-bg=review]{background:var(--surface2)}
.scene[data-bg=save]{background:var(--lime);color:var(--lime-on)}
.scene[data-bg=save] p,.scene[data-bg=save] h2{color:var(--lime-on)}
.scene[data-bg=premium]{background:var(--surface3)}
.scene[data-bg=privacy]{background:var(--canvas)}
.download{background:var(--canvas)}
.features{display:flex;flex-direction:column;gap:56px;margin-top:28px;align-items:center}
.feature{display:flex;flex-direction:column;align-items:center}
.feature~.feature .shot{display:none} /* one screen is enough in the static stack; the 3D story still swaps highlights per feature */
.shot,.flyer{position:relative;margin-top:28px;width:min(66vw,300px);border-radius:26px;border:2px solid var(--border-strong);overflow:hidden;background:var(--canvas)}
.flyer{width:min(60vw,240px);border-radius:10px}
.shot img,.flyer img{width:100%;height:auto}
.hl{position:absolute;border:3px solid var(--lime);border-radius:12px;background:var(--lime-subtle)}
.scene[data-bg=save] .shot{border-color:var(--lime-on)}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime-text);margin-bottom:14px}
.scene[data-bg=save] .eyebrow{color:var(--lime-on)}

.download{gap:0}
.stores{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin-top:30px}
.badge{display:block;border-radius:10px}
.badge-apple img{width:168px;height:56px}
.badge-play img{width:216px;height:84px;margin:-14px -14px}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:56px;font-size:14px;color:var(--text2)}
.foot a{text-underline-offset:3px;padding:6px 0}
.scene .copy{font-size:12px;margin-top:14px;color:var(--text2)}

/* ---------- Details (plain crawlable text) ---------- */
.details:focus{outline:none}
.details{background:var(--surface1);padding:clamp(64px,12svh,120px) 20px}
.details>*{max-width:760px;margin-left:auto;margin-right:auto}
.details h2{font-size:clamp(30px,4.4vw,52px);max-width:none;margin-top:clamp(40px,7svh,72px);margin-bottom:18px}
.details h2:first-child{margin-top:0}
.details h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.details p,.details li{color:var(--text2);font-size:clamp(16px,1.5vw,18px);text-wrap:pretty}
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:28px}
.steps li{counter-increment:s;padding-left:clamp(44px,6vw,72px);position:relative}
.steps li::before{content:"0" counter(s);position:absolute;left:0;top:-2px;font-family:var(--display);font-weight:700;font-size:clamp(22px,3vw,34px);color:var(--lime-text)}
.plain{padding-left:1.2em;display:grid;gap:8px}
.plain li::marker{color:var(--lime-text)}
.fine{margin-top:28px;font-size:14px!important}
@media (min-width:1024px){.plain.cols{grid-template-columns:1fr 1fr;column-gap:36px}}

/* ---------- 3D MODE ---------- */
.js-3d .runway{height:calc(var(--steps) * var(--unit) + 100svh)}
.js-3d .stage{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip;contain:paint}
.js-3d .bgs{display:block;position:absolute;inset:0}
.js-3d .bg{position:absolute;inset:0;opacity:0}
.js-3d .bg[data-name=hero]{opacity:1;background:var(--canvas)}
.js-3d .bg[data-name=select]{background:var(--surface1)}
.js-3d .bg[data-name=review]{background:var(--surface2)}
.js-3d .bg[data-name=save]{background:var(--lime)}
.js-3d .bg[data-name=premium]{background:var(--surface3)}
.js-3d .bg[data-name=privacy]{background:var(--canvas)}

.js-3d .stage .scene{position:absolute;left:0;right:0;top:0;min-height:0;background:none;padding:clamp(40px,8svh,92px) 20px 0;opacity:0;pointer-events:none;z-index:3}
.js-3d .stage .scene#hero{opacity:1}
.js-3d .stage .scene[data-bg=save]{color:var(--lime-on)}
.js-3d .shot,.js-3d .flyer{display:none}
.js-3d .features{display:grid;margin-top:14px;gap:0}
.js-3d .feature{grid-area:1/1;opacity:0}
.js-3d .feature h3{margin-top:2px}
.js-3d #premium .note{margin-top:18px}
.js-3d .scene .mark{margin-bottom:12px;width:clamp(40px,6svh,56px);height:auto}
.js-3d .download{position:relative;min-height:100svh;justify-content:center;padding:80px 20px}

.phone-wrap{position:absolute;left:50%;bottom:calc(-1 * var(--ph) * .02);width:calc((var(--ph) - 2*var(--pad)) * 1084/2412 + 2*var(--pad));height:var(--ph);transform:translateX(-50%);perspective:1500px;z-index:2}
.js-3d .phone-wrap{display:block}
.phone{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.phone .body,.phone .slab{position:absolute;inset:0;border-radius:calc(var(--ph) * .085)}
.phone .body{background:var(--canvas);border:2px solid var(--border-strong);padding:var(--pad);box-shadow:0 30px 80px var(--scrim);transform:translateZ(0)}
.phone .slab{background:var(--border-default);border:2px solid var(--border-strong)}
.phone .s1{transform:translateZ(-5px)}.phone .s2{transform:translateZ(-10px)}.phone .s3{transform:translateZ(-15px);background:var(--surface3)}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--ph) * .068);overflow:hidden;background:var(--canvas);isolation:isolate}
.layer{position:absolute;inset:0;opacity:0}
.layer>img{width:100%;height:100%;object-fit:cover}
.hl-layer{position:absolute;inset:0;z-index:4}
.hl-layer .hl{opacity:0}
.flyer-layer{position:absolute;inset:0;opacity:0;z-index:5;background:var(--canvas)}
.flyer-layer img{width:100%;height:100%;object-fit:cover}

@media (max-width:1023.98px){
  :root{--ph:min(57svh,540px);--unit:70svh}
  h1,h2{font-size:clamp(30px,8.6vw,56px)}
  .scene p{font-size:clamp(16px,2.2vw,19px);margin-top:10px}
}
@media (max-height:640px) and (orientation:landscape){
  :root{--ph:min(66svh,420px)}
}

/* ---------- 3D MODE: art, asymmetric layouts ---------- */
.art{position:absolute;width:calc(var(--w)*1vw);height:auto;opacity:var(--o,.3);border-radius:10px;will-change:transform}
.cal-grid{position:absolute;inset:-2px;background-image:linear-gradient(to right,rgba(16,18,10,.14) 1px,transparent 1px),linear-gradient(to bottom,rgba(16,18,10,.14) 1px,transparent 1px);background-size:9vw 9vw}
.cal-num{position:absolute;right:-2vw;bottom:-14vw;display:flex;flex-direction:column;align-items:flex-end;font-family:var(--display);font-weight:700;color:var(--lime-on);opacity:.11;line-height:.8}
.cal-num b{font-size:58vw;letter-spacing:-.06em}
.cal-num span{font-size:9vw;letter-spacing:.1em;margin-right:5vw}

@media (min-width:1024px){
  .js-3d .stage .scene[data-layout=left],.js-3d .stage .scene[data-layout=right]{top:0;bottom:0;padding-top:0;justify-content:center;align-items:flex-start;text-align:left}
  .js-3d .features{justify-items:start}
  .js-3d .feature{align-items:flex-start}
}
@media (max-width:1023.98px){
  .art{width:calc(var(--w)*1.9vw);opacity:calc(var(--o,.3)*.55)}
  .js-3d .stage .scene:not(#hero){align-items:flex-start;text-align:left;padding-left:24px;padding-right:24px}
  .js-3d .stage .scene:not(#hero) h2{max-width:12ch}
  .js-3d .stage .scene:not(#hero) p{max-width:30ch}
  .js-3d .features{justify-items:start}
  .js-3d .feature{align-items:flex-start}
  .cal-num b{font-size:90vw}.cal-num span{font-size:14vw}.cal-grid{background-size:16vw 16vw}
}

/* ---------- editorial scale, corner-anchored copy, grain, counter (desktop) ---------- */
.js-3d .hud{display:block;position:absolute;bottom:max(18px,3.4svh);left:20px;z-index:7;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--text2);font-variant-numeric:tabular-nums;background:rgba(11,12,10,.62);padding:4px 8px;border-radius:6px}
.js-3d .stage[data-bg=save] .hud{color:var(--lime-on);background:rgba(198,244,50,.7)}
.js-3d .stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.09;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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (min-width:1024px){
  :root{--ph:min(88svh,920px)}
  .js-3d .hud{left:8vw;bottom:3svh}
  .js-3d .stage .scene[data-layout]{padding:0 8vw}
  .js-3d .stage .scene[data-layout=left]{padding-right:38vw}
  .js-3d .stage .scene[data-layout=right]{padding-left:40vw}
  .js-3d .stage .scene[data-layout] h1,.js-3d .stage .scene[data-layout] h2{font-size:clamp(48px,7.2vw,116px);max-width:none;line-height:.98;letter-spacing:-.035em}
  .js-3d .stage .scene[data-layout]>p,.js-3d .stage .scene[data-layout]>.eyebrow,.js-3d .stage .scene[data-layout]>.mark,.js-3d .stage .scene[data-layout] .features{position:absolute;margin:0}
  .js-3d .stage .scene[data-layout]>.eyebrow,.js-3d .stage .scene[data-layout]>.mark{top:5svh}
  .js-3d .stage .scene[data-layout]>p{bottom:11svh;max-width:26ch}
  .js-3d .stage .scene[data-layout]>.note{bottom:5svh;max-width:none}
  .js-3d .stage .scene[data-layout] .features{bottom:11svh;max-width:30ch}
  .js-3d .stage .scene[data-layout=left]>p,.js-3d .stage .scene[data-layout=left]>.eyebrow,.js-3d .stage .scene[data-layout=left]>.mark,.js-3d .stage .scene[data-layout=left] .features{left:8vw}
  .js-3d .stage .scene[data-layout=right]>p,.js-3d .stage .scene[data-layout=right]>.eyebrow,.js-3d .stage .scene[data-layout=right] .features{left:calc(100vw - 8vw - 30ch)}
  .js-3d .stage .scene[data-layout=right]>p{left:calc(100vw - 8vw - 26ch)}
  .js-3d .stage .scene[data-layout=right]>.note{left:calc(100vw - 8vw - 44ch)}
  .js-3d .stage .scene[data-layout=left]>.note{left:8vw}
  .js-3d .scene .mark{width:48px;height:48px}
  .js-3d .phone-wrap{z-index:4;bottom:calc(-1 * var(--ph) * .1)}
}