/* ============================================================
   Tutati — landing site styles
   Cream "Stories Reel" theme. Tokens from 02-DESIGN-SYSTEM.md.
   Base: candidate A (editorial). Grafts from candidate C:
   spotlight-beam timeline, reveal-on-scroll, gradient step discs,
   rotation finale. No dark mode anywhere — all surfaces cream/white.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#faf3ea; --bg-2:#f1e8dc; --card:#ffffff; --border:#e8ddd2;
  /* ink */
  --ink:#171419; --text-2:#6e6168; --text-muted:#6f6168;
  /* brand */
  --accent:#0abab5; --accent-2:#1b6e6e; --accent-glow:#a0d9d4;
  --gold:#d4b07a; --success:#3a8e5e; --error:#b85c3a;
  /* gradient */
  --tiffany-gradient:linear-gradient(135deg,#0abab5 0%,#4dc4be 50%,#1b6e6e 100%);
  /* type */
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Manrope',system-ui,sans-serif;
  /* shape */
  --radius-card:20px; --radius-pill:999px;
  --shadow-card:0 1px 4px rgba(0,0,0,.06),0 12px 32px rgba(23,20,25,.06);
  --shadow-lift:0 1px 4px rgba(0,0,0,.05),0 30px 70px rgba(23,20,25,.10);
  --shadow-glow:0 0 24px rgba(10,186,181,.45);
  /* layout */
  --maxw:1180px; --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-weight:500; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

h1,h2,h3,.display{
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  color:var(--ink); letter-spacing:-.02em; line-height:1.02; margin:0;
}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}

/* ---------- shared atoms ---------- */
.eyebrow{
  font-family:var(--font-sans); font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:.22em; font-size:11px;
  color:var(--accent-2); margin:0;
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:9px; vertical-align:middle;
  transform:translateY(-1px);
}
.accent-italic{font-family:var(--font-serif); font-style:italic; color:var(--accent-2)}
.lead{color:var(--text-2); font-size:clamp(16px,2.1vw,19px); line-height:1.65}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:14px 26px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:800; font-size:15px;
  letter-spacing:.3px; cursor:pointer; border:0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(10,186,181,.28)}
.btn-primary:hover{background:var(--accent-2); transform:translateY(-2px); box-shadow:0 12px 30px rgba(10,186,181,.34)}

/* ---------- official store badges (official badge art) ---------- */
.badges{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.store-badge{
  display:inline-flex; min-height:54px;
  border-radius:10px; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 8px 22px rgba(23,20,25,.14);
}
.store-badge img{height:54px; width:auto; display:block; border-radius:10px}
.store-badge:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(23,20,25,.22); filter:brightness(1.06)}
.store-badge:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:10px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(250,243,234,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--border);
  box-shadow:0 4px 24px rgba(23,20,25,.04);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; min-height:44px}
.brand img{height:36px; width:36px; border-radius:9px; box-shadow:0 2px 8px rgba(23,20,25,.10)}
.brand .mark{
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:25px; color:var(--accent); letter-spacing:-.5px; line-height:1;
}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a.nl{
  font-weight:600; font-size:14.5px; color:var(--text-2);
  letter-spacing:.2px; transition:color .15s ease; min-height:44px;
  display:inline-flex; align-items:center;
}
.nav-links a.nl:hover{color:var(--ink)}
.nav-cta{padding:11px 22px; min-height:44px}
/* mobile nav: keep Watch + CTA reachable (judge fix) */
.nav-links a.nl.nl-watch{display:inline-flex}
@media (max-width:760px){
  .nav-links{gap:14px}
  .nav-links a.nl{display:none}
  .nav-links a.nl.nl-watch{display:inline-flex; font-size:14px}
  .nav-cta{padding:11px 18px}
}
@media (max-width:380px){
  .nav-links a.nl.nl-watch{display:none}
}

/* ---------- hero (editorial, asymmetric) ---------- */
.hero{position:relative; padding-top:clamp(40px,8vw,90px); padding-bottom:clamp(52px,8vw,100px)}
.hero::before{ /* soft tiffany glow, top-left */
  content:""; position:absolute; top:-160px; left:-120px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(10,186,181,.16), rgba(10,186,181,0) 68%);
  pointer-events:none; z-index:0;
}
.hero::after{ /* faint gold glow lower-right */
  content:""; position:absolute; bottom:-140px; right:-100px; width:480px; height:480px;
  background:radial-gradient(circle, rgba(212,176,122,.13), rgba(212,176,122,0) 70%);
  pointer-events:none; z-index:0;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero-copy{max-width:600px}
.hero h1{
  font-size:clamp(40px,7vw,74px); line-height:.98; letter-spacing:-.03em;
  margin-top:20px;
}
.hero h1 .line2{color:var(--accent-2)}
.hero .sub{margin-top:20px; max-width:50ch}
.hero .cta-row{margin-top:28px}
.hero .watch{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-weight:700; font-size:14px; color:var(--accent-2);
  min-height:44px; max-width:46ch; transition:gap .2s ease, color .15s ease;
}
.hero .watch:hover{gap:13px; color:var(--accent)}
.hero .watch .arr{transition:transform .25s ease; flex:none}
.hero .watch:hover .arr{transform:translateX(3px)}
.hero .meta-row{
  display:flex; flex-wrap:wrap; gap:26px; margin-top:28px;
  padding-top:24px; border-top:1px solid var(--border);
}
.hero .meta b{
  display:block; font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:26px; color:var(--ink); line-height:1;
}
.hero .meta span{font-size:12.5px; color:var(--text-2); letter-spacing:.3px; margin-top:6px; display:block}

/* hero visual = the 9:16 promo video, framed as a phone */
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:1px}
.phone-video{
  position:relative; padding:11px;
  /* width follows from the 9/16 video ratio + the cap on its height */
  width:auto; border-radius:42px;
  background:linear-gradient(160deg,#1d1a20,#2c2730);
  box-shadow:var(--shadow-lift); transform:rotate(2.4deg);
}
.phone-ring{ /* tiffany story-ring glow behind the video */
  position:absolute; inset:-26px; border-radius:60px; z-index:0;
  background:var(--tiffany-gradient); filter:blur(2px); opacity:.16;
  transform:rotate(2.4deg);
}
.live-tag{
  position:absolute; top:30px; left:-12px; z-index:5;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--gold); color:#3a2c14;
  font-weight:800; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  box-shadow:0 0 22px rgba(212,176,122,.55), 0 8px 18px rgba(23,20,25,.12);
}
.live-tag .pulse{width:8px; height:8px; border-radius:50%; background:#3a2c14; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-copy{max-width:none}
  .hero-visual{order:-1}
}
@media (max-width:380px){
  .live-tag{left:-4px; padding:7px 11px; font-size:11px}
}

/* ---------- section scaffolding ---------- */
.section{padding-block:clamp(60px,9vw,116px); position:relative}
.section.alt{background:var(--bg-2)}
.sec-head{max-width:680px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(34px,5.4vw,60px); line-height:1; margin-top:16px}
.sec-head p{margin-top:18px}

/* ---------- promo video (VERTICAL 9:16 — the hero phone) ---------- */
.video-frame{
  position:relative;
  /* shot vertical 9:16 — looks like a tall phone screen */
  aspect-ratio:9/16;
  /* cap height so the whole hero fits in ~one laptop viewport; width follows the ratio */
  height:clamp(420px,72vh,760px);
  width:auto; max-width:100%;
  border-radius:32px; overflow:hidden;
  background:var(--ink); z-index:1;
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:32px}
/* click-to-load facade — vertical app screenshot poster fills the tall frame */
.video-facade{
  position:absolute; inset:0; cursor:pointer; border:0; padding:0; margin:0;
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--ink);
}
.video-facade .poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.94; filter:saturate(1.05);
}
.video-facade .glow{position:absolute; inset:0; background:radial-gradient(circle at 50% 46%, rgba(10,186,181,.26), rgba(23,20,25,.42) 74%)}
.play-btn{
  position:relative; z-index:2; width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.96); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 14px rgba(255,255,255,.10), 0 18px 40px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.video-facade:hover .play-btn{transform:scale(1.07); box-shadow:0 0 0 18px rgba(255,255,255,.12),0 22px 48px rgba(0,0,0,.34)}
.video-facade:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.play-btn svg{width:30px; height:30px; fill:var(--accent-2); margin-left:5px}
.video-facade .vlabel{
  position:absolute; left:18px; right:18px; bottom:20px; z-index:2;
  color:rgba(255,255,255,.95); font-weight:700; font-size:13px; letter-spacing:.3px;
  display:flex; align-items:center; gap:9px; text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.video-facade .vlabel .ld{
  background:var(--gold); color:#3a2c14; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; padding:4px 10px; border-radius:999px;
  flex:none;
}

@media (max-width:880px){
  .video-frame{height:clamp(380px,62vh,620px)}
}
@media (max-width:380px){
  .video-frame{height:auto; width:78vw; border-radius:26px}
  .video-frame iframe{border-radius:26px}
}

/* ---------- how it works — spotlight-beam timeline (graft from C) ---------- */
.steps-intro{
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:flex-end;
  margin-bottom:clamp(36px,5vw,56px);
}
.kicker-quote{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.9vw,17px); color:var(--text-2);
  max-width:30ch; line-height:1.45;
  border-left:2px solid var(--accent); padding-left:18px;
}
@media (max-width:720px){.steps-intro{grid-template-columns:1fr} .kicker-quote{max-width:none}}

.timeline{position:relative; margin-top:8px}
/* the vertical "spotlight beam" spine */
.timeline::before{
  content:""; position:absolute; left:50%; top:14px; bottom:14px;
  width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(10,186,181,0) 0%, rgba(10,186,181,.5) 7%, rgba(10,186,181,.5) 93%, rgba(10,186,181,0) 100%);
  z-index:0;
}
@media (max-width:860px){.timeline::before{left:26px}}

.beat{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px); align-items:center; margin-bottom:clamp(56px,8vw,92px);
}
.beat:last-child{margin-bottom:0}
.beat .beat-text{padding:4px 0}
.beat:nth-child(even) .beat-media{order:2}
.beat:nth-child(even) .beat-text{order:1; text-align:right}
.beat:nth-child(even) .beat-text .step-num{margin-left:auto}
.beat:nth-child(even) .beat-text .beat-foot{justify-content:flex-end}
.beat:nth-child(even) .beat-body{margin-left:auto}

/* node on the spine */
.beat .node{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--bg); border:3px solid var(--accent);
  box-shadow:0 0 0 6px rgba(10,186,181,.14); z-index:3;
}
.beat.in .node{animation:nodePop .5s ease both}
@keyframes nodePop{0%{transform:translate(-50%,-50%) scale(.2)}70%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}

/* gradient story-ring step disc (graft from C) */
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:24px; color:#fff;
  background:var(--tiffany-gradient); box-shadow:var(--shadow-glow);
  margin-bottom:18px;
}
.beat h3{font-size:clamp(26px,3.4vw,36px); line-height:1.05}
.beat .beat-body{margin-top:12px; color:var(--text-2); font-size:17px; max-width:26em}
.beat .verbatim{font-family:var(--font-serif); font-style:italic; color:var(--ink); font-weight:400}
.beat .beat-foot{margin-top:14px; display:flex; gap:8px; align-items:center}
.beat .beat-foot .src{font-size:12px; color:var(--text-muted); font-style:italic; font-family:var(--font-serif)}

/* media card (white card, NOT dark — brand discipline) */
.beat-media{position:relative; display:flex; justify-content:center}
.frame-card{
  position:relative; width:min(300px,80%); border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-lift);
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.beat:nth-child(odd) .frame-card{transform:rotate(-2deg)}
.beat:nth-child(even) .frame-card{transform:rotate(2deg)}
.beat:hover .frame-card{transform:rotate(0) scale(1.02)}
.frame-card img{width:100%; height:auto; display:block}
.frame-card.kf img{aspect-ratio:480/860; object-fit:cover}
.frame-card.shot img{aspect-ratio:289/628; object-fit:cover}
.frame-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-sans); font-weight:700;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
}
.frame-tag.live{background:rgba(212,176,122,.94); color:#2a2018; border:0; display:inline-flex; align-items:center; gap:6px}
.frame-tag.live .ld{width:7px; height:7px; border-radius:50%; background:#2a2018; animation:pulse 1.6s ease-in-out infinite}
.frame-tag.accent{background:rgba(10,186,181,.92); border:0}

@media (max-width:860px){
  .beat{grid-template-columns:1fr; gap:22px; padding-left:60px; margin-bottom:56px}
  .beat .beat-media, .beat .beat-text{order:unset !important; text-align:left !important}
  .beat:nth-child(even) .beat-media{order:unset}
  .beat .beat-body{margin-left:0 !important; margin-right:0 !important}
  .beat:nth-child(even) .beat-text .step-num{margin-left:0}
  .beat:nth-child(even) .beat-text .beat-foot{justify-content:flex-start}
  .beat .node{left:26px; top:28px; transform:translate(-50%,0)}
  .beat .frame-card{width:min(280px,90%); transform:rotate(0) !important; margin:0}
  .beat-media{justify-content:flex-start}
}
@media (max-width:420px){
  .beat{padding-left:48px}
  .beat .node{left:20px}
  .timeline::before{left:20px}
}

/* rotation finale (graft from C) — closes the loop */
.rotate-note{
  margin:clamp(48px,7vw,72px) auto 0; max-width:660px; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:36px 28px; position:relative; overflow:hidden;
}
.rotate-note::before{
  content:""; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:320px; height:200px;
  background:radial-gradient(circle, rgba(10,186,181,.14), transparent 65%);
  pointer-events:none;
}
.rotate-note .spin{
  position:relative; width:58px; height:58px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--accent-glow); border-top-color:var(--accent);
  animation:spin 2.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rotate-note p{position:relative; font-family:var(--font-serif); font-style:italic; font-weight:700; font-size:clamp(21px,2.8vw,28px); color:var(--ink)}
.rotate-note small{position:relative; display:block; margin-top:12px; font-family:var(--font-sans); font-style:normal; font-weight:600; color:var(--text-2); font-size:15px}

/* ---------- feature grid ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feat{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:30px 28px;
  transition:transform .22s ease, box-shadow .22s ease;
}
.feat:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
.feat .ic{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(10,186,181,.10); margin-bottom:18px;
}
.feat .ic svg{width:24px; height:24px; stroke:var(--accent-2); fill:none; stroke-width:1.8}
.feat.gold .ic{background:rgba(212,176,122,.16)}
.feat.gold .ic svg{stroke:#9a7635}
.feat h3{font-size:21px; line-height:1.1}
.feat p{margin-top:10px; color:var(--text-2); font-size:15px; line-height:1.6}
@media (max-width:880px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* ---------- closing CTA (light/cream premium — NO dark mode) ---------- */
.cta{position:relative; overflow:hidden}
.cta-card{
  position:relative;
  background:linear-gradient(150deg,#ffffff 0%,#fbf6ef 60%,#f6efe4 100%);
  border:1px solid var(--border); color:var(--ink);
  border-radius:32px; padding:clamp(48px,7vw,84px) clamp(28px,6vw,72px);
  text-align:center; overflow:hidden; box-shadow:var(--shadow-lift);
}
.cta-card::before{
  content:""; position:absolute; top:-130px; left:50%; transform:translateX(-50%);
  width:620px; height:420px;
  background:radial-gradient(circle, rgba(10,186,181,.20), transparent 64%);
  pointer-events:none;
}
.cta-card::after{
  content:""; position:absolute; bottom:-160px; right:-80px; width:380px; height:380px;
  background:radial-gradient(circle, rgba(212,176,122,.16), transparent 68%);
  pointer-events:none;
}
.cta-ring{
  position:relative; width:84px; height:84px; margin:0 auto 24px;
  border-radius:24px; padding:3px; background:var(--tiffany-gradient);
  box-shadow:var(--shadow-glow);
}
.cta-ring img{width:100%; height:100%; border-radius:21px; object-fit:cover; display:block}
.cta-card .eyebrow{position:relative}
.cta-card h2{font-size:clamp(36px,6vw,64px); margin-top:14px; position:relative}
.cta-card h2 em{color:var(--accent-2)}
.cta-card p{position:relative; margin-top:18px; color:var(--text-2); max-width:42ch; margin-inline:auto; font-size:17px}
.cta-card .badges{justify-content:center; margin-top:32px; position:relative}

/* ---------- footer (cream — NEVER dark) ---------- */
.footer{background:var(--bg-2); border-top:1px solid var(--border); padding-block:clamp(54px,7vw,76px) 36px}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:42px; border-bottom:1px solid var(--border);
}
.foot-brand .mark img{height:36px; width:36px; border-radius:9px; box-shadow:0 2px 8px rgba(23,20,25,.10)}
.foot-brand p{margin-top:14px; color:var(--text-2); font-size:15px; max-width:30ch}
.foot-brand .mail{
  display:inline-flex; margin-top:18px; font-weight:700; color:var(--accent-2);
  font-size:15px; min-height:44px; align-items:center; border-bottom:1px solid transparent;
}
.foot-brand .mail:hover{border-bottom-color:var(--accent-2)}
.foot-col h4{
  font-family:var(--font-sans); font-style:normal; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--text-2);
  margin:0 0 14px;
}
.foot-col a{
  display:flex; align-items:center; min-height:40px; color:var(--text-2);
  font-size:15px; font-weight:600; transition:color .15s ease;
}
.foot-col a:hover{color:var(--accent-2)}
.foot-col .badge-links{display:flex; flex-direction:column; gap:10px; margin-top:4px; margin-bottom:18px}
.foot-col .badge-links a{min-height:auto}
.foot-col .badge-links img{height:42px; width:auto; border-radius:8px; box-shadow:0 4px 14px rgba(23,20,25,.12)}
.socials{display:flex; gap:12px; margin-top:4px; flex-wrap:wrap}
.socials a{
  width:44px; height:44px; border-radius:12px; background:var(--card);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.socials a:hover{transform:translateY(-2px); border-color:var(--accent); background:rgba(10,186,181,.06)}
.socials svg{width:19px; height:19px; fill:var(--text-2)}
.socials a:hover svg{fill:var(--accent-2)}
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding-top:24px;
}
/* judge fix: use --text-2 (not muted) for contrast AA on cream */
.foot-bottom p{font-size:13.5px; color:var(--text-2); margin:0}
.foot-bottom .badge-mini{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2)}
.foot-bottom .badge-mini .liv{width:7px; height:7px; border-radius:50%; background:var(--gold)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr 1fr; gap:28px}.foot-brand{grid-column:1/-1}}

/* ---------- legal pages ---------- */
.legal-main{padding-block:clamp(40px,6vw,72px)}
.legal{max-width:760px; margin:0 auto}
.legal .eyebrow{margin-bottom:14px}
.legal h1{font-size:clamp(34px,6vw,56px); line-height:1.02}
.legal .updated{margin-top:14px; color:var(--text-muted); font-size:14px}
.legal .legal-note{
  margin-top:24px; background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:14px; padding:16px 20px;
  color:var(--text-2); font-size:14.5px; box-shadow:var(--shadow-card);
}
.legal h2{
  font-family:var(--font-serif); font-style:italic; font-weight:700; color:var(--ink);
  font-size:clamp(22px,3vw,28px); margin-top:38px; line-height:1.1;
}
.legal h3{font-family:var(--font-serif); font-style:italic; font-weight:700; font-size:19px; margin-top:26px}
.legal p{margin-top:14px; color:var(--text-2); font-size:16px; line-height:1.7}
.legal ul{margin-top:14px; padding-left:20px; color:var(--text-2); font-size:16px; line-height:1.7}
.legal li{margin-top:8px}
.legal li strong{color:var(--ink); font-weight:700}
.legal a{color:var(--accent-2); font-weight:600; border-bottom:1px solid transparent; transition:border-color .15s ease}
.legal a:hover{border-bottom-color:var(--accent-2)}
.legal hr{border:0; border-top:1px solid var(--border); margin:38px 0 0}
.legal .copyline{margin-top:22px; color:var(--text-muted); font-size:14px}

/* skip link */
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px}
.skip:focus{left:12px}

/* ---------- reveal-on-scroll (graft from C, reduced-motion safe) ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}
.reveal[data-delay="4"]{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}

/* ---------- launch-safe states: shown only while store/video tokens are unset ---------- */
.store-badge.is-soon,
.badge-links a.is-soon{
  position:relative; opacity:.5; cursor:default; pointer-events:none; filter:grayscale(.25);
}
.store-badge.is-soon::after,
.badge-links a.is-soon::after{
  content:"Coming soon"; position:absolute; left:50%; bottom:-17px; transform:translateX(-50%);
  font-family:var(--font-sans); font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--accent-2); white-space:nowrap; pointer-events:none;
}
/* room for the "coming soon" caption under badge rows */
.hero .badges, .cta-card .badges{margin-bottom:26px}
.badge-links{margin-bottom:24px}

.video-frame.is-soon{cursor:default}
.video-frame.is-soon .video-facade{cursor:default}
.video-frame.is-soon .play-btn,
.video-frame.is-soon .vlabel{display:none}
.video-frame.is-soon::after{
  content:"Promo coming soon"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;
  background:rgba(23,20,25,.72); color:#fff; font-family:var(--font-sans);
  font-size:13px; font-weight:800; letter-spacing:.3px; padding:10px 16px; border-radius:var(--radius-pill);
}

/* ---------- Beta CTA (replaces store badges pre-launch) ---------- */
.btn-beta{font-size:15px; padding:15px 30px; min-height:48px}
.beta-row{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; margin-bottom:6px}
.cta-card .beta-row{justify-content:center}
.beta-note{font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--text-2)}
.beta-note.center{display:block; text-align:center; margin-top:14px}
.foot-beta{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:800; font-size:14px; color:var(--accent-2); text-decoration:none; margin-top:4px}
.foot-beta:hover{color:var(--accent)}
.foot-beta-note{display:block; font-size:12.5px; color:var(--text-muted); margin-top:6px; margin-bottom:18px}