/* =============================================================================
   Locked.AI — lockedai.app
   styles.css — shared design system for /, /privacy, /terms, /support
   -----------------------------------------------------------------------------
   THEMING: every brand color is a CSS custom property in the single :root block
   below. The DARK palette is the launch default. To A/B the warm sand+olive
   "light" theme, comment out the dark values and uncomment the LIGHT block —
   eight values reskin the whole site. (Spec §3.)
   ============================================================================= */

/* ----------------------------------------------------------------- Fonts ---- */
/* Self-hosted (a privacy-first product must not leak visitors to a font CDN).
   Type voice: Schibsted Grotesk (confident editorial display) + Hanken Grotesk
   (clean, legible body) + Space Mono (honest "machine readout" for data/labels). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/hanken-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/hanken-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/space-mono-400.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/space-mono-700.woff2") format("woff2")}

/* ----------------------------------------------------------------- Tokens --- */
:root{
  /* ---- WHITE (launch default) — clean white + popping indigo, à la calai.app ---- */
  --bg:#ffffff;        --surface:#f5f7fa;   --surface-2:#eef1f6;
  --hairline:rgba(13,17,23,.08); --hairline-2:rgba(13,17,23,.14);
  --text:#0d1117;      --muted:#525a6b;     --faint:#6a7180;
  --accent:#4f46e5;    --accent-soft:rgba(79,70,229,.10);  --on-accent:#ffffff;
  --success:#0a8f4f;   --success-ink:#097040;   --streak:#c2670a;
  --glow:rgba(79,70,229,.26);
  --shadow-card:0 1px 2px rgba(13,17,23,.04), 0 14px 32px -18px rgba(13,17,23,.18);
  --shadow-float:0 18px 40px -18px rgba(13,17,23,.22);

  /* ---- DARK A/B (the app's signature slate + periwinkle). Uncomment this block,
          comment the one above, to reskin the entire site in a single edit. ----
  --bg:#10131c;        --surface:#1a1f2b;   --surface-2:#1e2434;
  --hairline:rgba(255,255,255,.085); --hairline-2:rgba(255,255,255,.16);
  --text:#eef2fb;      --muted:#8a93a8;     --faint:#80899c;
  --accent:#6c8cff;    --accent-soft:rgba(108,140,255,.16); --on-accent:#0a0d16;
  --success:#46e0a0;   --success-ink:#46e0a0;   --streak:#ffb454;
  --glow:rgba(108,140,255,.30);
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 16px 34px -18px rgba(0,0,0,.6);
  --shadow-float:0 18px 40px -18px rgba(0,0,0,.7);
  */

  /* ---- Scale / shape (theme-independent) ---- */
  --radius:18px; --radius-lg:26px; --radius-sm:12px;
  --maxw:1120px; --gutter:clamp(20px,5vw,40px);
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --section-y:clamp(64px,9vw,120px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --lock-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8a5 5 0 0 0-5 5V9H6.2A2.2 2.2 0 0 0 4 11.2v8.6A2.2 2.2 0 0 0 6.2 22h11.6A2.2 2.2 0 0 0 20 19.8v-8.6A2.2 2.2 0 0 0 17.8 9H17V6.8a5 5 0 0 0-5-5Zm3 7.2H9V6.8a3 3 0 0 1 6 0V9Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:84px}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:clamp(16px,1.05vw,17px);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700; line-height:1.05;
  letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--accent); color:var(--on-accent)}

/* --------------------------------------------------------------- A11y base -- */
.skip-link{position:fixed; top:16px; left:16px; z-index:200; padding:12px 18px;
  background:var(--accent); color:var(--on-accent); border-radius:10px; font-weight:600;
  transform:translateY(-150%); transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* --------------------------------------------------------------- Layout ----- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.eyebrow{font-family:var(--font-mono); font-size:.74rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.section__head{max-width:680px; margin-bottom:clamp(36px,5vw,60px)}
.section__title{font-size:clamp(1.9rem,4.4vw,3rem)}
.section__lead{margin-top:18px; font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted);
  max-width:60ch}
.accent{color:var(--accent)}

/* --------------------------------------------------------------- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:var(--radius-sm); font-family:var(--font-body);
  font-weight:600; font-size:.98rem; line-height:1; transition:transform .18s var(--ease),
  background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:var(--on-accent);
  box-shadow:0 10px 30px -12px var(--glow)}
.btn--primary:hover{box-shadow:0 14px 36px -10px var(--glow); transform:translateY(-1px)}
.btn--ghost{background:var(--surface); color:var(--text); border:1px solid var(--hairline-2)}
.btn--ghost:hover{border-color:var(--accent); color:var(--text)}
.btn--block{width:100%}

/* App Store badge — pre-launch reads "Coming soon"; swap href when listing is live. */
.badge-app{display:inline-flex; align-items:center; gap:11px; padding:11px 18px 11px 16px;
  border-radius:14px; background:var(--text); color:var(--bg);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease)}
.badge-app:hover{transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(13,17,23,.35)}
.badge-app__glyph{width:21px; height:21px; flex:none; background:var(--bg);
  -webkit-mask:url("/assets/apple-logo-transparent.png") center/contain no-repeat;
  mask:url("/assets/apple-logo-transparent.png") center/contain no-repeat}
.badge-app__txt{display:flex; flex-direction:column; line-height:1.1; text-align:left}
.badge-app__txt small{font-size:.62rem; letter-spacing:.04em; opacity:.7;
  text-transform:uppercase; font-family:var(--font-mono)}
.badge-app__txt b{font-family:var(--font-display); font-size:1.02rem; font-weight:700}

/* --------------------------------------------------------------- Waitlist --- */
.waitlist{display:flex; gap:10px; width:100%; max-width:430px; flex-wrap:wrap}
.waitlist__field{flex:1 1 220px; display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--radius-sm);
  padding:0 6px 0 16px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease)}
.waitlist__field:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.waitlist input[type=email]{flex:1; min-width:0; background:none; border:0; color:var(--text);
  padding:13px 0; font-size:.96rem; outline:none}
.waitlist input[type=email]::placeholder{color:var(--faint)}
.waitlist .btn{padding:11px 18px; margin:5px 0}
.waitlist__note{margin-top:12px; font-size:.82rem; color:var(--faint)}
.waitlist__note .mono{font-family:var(--font-mono)}
.form-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.waitlist__ok{display:none; align-items:center; gap:10px; color:var(--success-ink); font-weight:600}
.waitlist[data-done="true"] .waitlist__field,
.waitlist[data-done="true"] .btn{display:none}
.waitlist[data-done="true"] .waitlist__ok{display:flex}

/* --------------------------------------------------------------- Nav -------- */
.nav{position:sticky; top:0; z-index:100; transition:background .3s var(--ease),
  border-color .3s var(--ease), backdrop-filter .3s var(--ease)}
.nav__inner{display:flex; align-items:center; gap:20px; height:68px}
.nav.is-scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--hairline)}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:1.18rem; letter-spacing:-.01em}
.brand__mark{width:26px; height:26px; flex:none}
.brand .dim{color:var(--muted); font-weight:500}
.nav__links{display:flex; gap:30px; margin-left:18px}
.nav__links a{color:var(--muted); font-size:.95rem; font-weight:500; transition:color .15s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__spacer{flex:1}
.nav__cta{display:flex; align-items:center; gap:14px}
.nav__menu{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:11px; border:1px solid var(--hairline-2); background:var(--surface)}
.nav__menu svg{width:20px; height:20px}
.nav__mobile{display:none}

/* --------------------------------------------------------------- Hero ------- */
.hero{position:relative; padding-top:clamp(40px,7vw,76px); padding-bottom:var(--section-y);
  overflow:clip}
.hero__bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.hero__bg::before{content:""; position:absolute; top:-12%; right:-6%; width:60vw; height:60vw;
  max-width:760px; max-height:760px;
  background:radial-gradient(circle at 60% 40%,var(--glow),transparent 62%); filter:blur(8px)}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px);
  align-items:center}
.hero__title{font-size:clamp(2.5rem,5.6vw,4rem); line-height:1.02}
.hero__sub{margin-top:24px; font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--muted);
  max-width:46ch}
.hero__cta{margin-top:34px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.hero__cta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hero__trust{margin-top:30px; display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center}
.hero__trust span{display:inline-flex; align-items:center; gap:8px; color:var(--faint);
  font-size:.82rem; font-family:var(--font-mono); letter-spacing:.02em}
.hero__trust svg{width:15px; height:15px; color:var(--success)}

/* ----- Phone mockup (signature) ----- */
.hero__visual{position:relative; display:flex; justify-content:center}
.phone-wrap{position:relative; width:min(310px,80%)}
.phone{position:relative; border-radius:48px; padding:11px;
  background:linear-gradient(150deg,#2a3142,#11141d 60%);
  box-shadow:0 34px 74px -30px rgba(13,17,23,.34), 0 0 0 1px rgba(255,255,255,.06) inset,
  0 2px 4px rgba(255,255,255,.10) inset;
  will-change:transform}
.phone__screen{position:relative; border-radius:38px; overflow:hidden; aspect-ratio:760/1652;
  background:var(--bg)}
.phone__screen img{width:100%; height:100%; object-fit:cover; object-position:top center}
.phone__glow{position:absolute; inset:-14% -10%; z-index:-1;
  background:radial-gradient(circle at 50% 42%,var(--glow),transparent 60%); filter:blur(18px);
  animation:breathe 6s var(--ease) infinite}

/* Floating "earn it" chip — the core mechanic, visualized as a live data readout. */
.earn-chip{position:absolute; left:-26px; bottom:84px; z-index:3;
  display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;
  border-radius:16px; background:var(--bg);
  border:1px solid var(--hairline-2); box-shadow:var(--shadow-float);
  animation:floaty 7s var(--ease) infinite}
.earn-chip__ring{width:42px; height:42px; flex:none; transform:rotate(-90deg)}
.earn-chip__ring circle{fill:none; stroke-width:5; stroke-linecap:round}
.earn-chip__track{stroke:var(--hairline-2)}
.earn-chip__bar{stroke:var(--accent); stroke-dasharray:113; stroke-dashoffset:113;
  animation:earnfill 6s var(--ease) infinite}
.earn-chip__txt{line-height:1.2}
.earn-chip__txt b{font-family:var(--font-display); font-size:.92rem}
.earn-chip__txt small{display:block; font-family:var(--font-mono); font-size:.66rem;
  color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-top:2px}
.streak-chip{position:absolute; right:-22px; top:64px; z-index:3;
  display:flex; align-items:center; gap:9px; padding:10px 15px; border-radius:14px;
  background:var(--bg); border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-float); animation:floaty 7s var(--ease) -3.5s infinite}
.streak-chip svg{width:18px; height:18px; color:var(--streak)}
.streak-chip b{font-family:var(--font-mono); font-weight:700; font-size:.86rem}
.streak-chip span{color:var(--muted); font-size:.78rem}

/* --------------------------------------------------------------- How it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,28px);
  counter-reset:step}
.step{position:relative; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); padding:26px 24px 28px; overflow:hidden; box-shadow:var(--shadow-card);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)}
.step:hover{border-color:var(--hairline-2); transform:translateY(-3px); box-shadow:var(--shadow-float)}
.step__n{counter-increment:step; font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  color:var(--accent); letter-spacing:.1em}
.step__n::before{content:"0" counter(step)}
.step__shot{margin:18px 0 22px; border-radius:18px; overflow:hidden; border:1px solid var(--hairline);
  background:var(--bg); aspect-ratio:4/5}
.step__shot img{width:100%; height:100%; object-fit:cover; object-position:top center}
.step h3{font-size:1.32rem; margin-bottom:9px}
.step p{color:var(--muted); font-size:.97rem}
.steps__foot{margin-top:30px; color:var(--faint); font-size:.96rem; display:flex; gap:10px;
  align-items:center}
.steps__foot svg{width:18px; height:18px; color:var(--accent); flex:none}

/* --------------------------------------------------------------- Features --- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px);
  align-items:center; padding-block:clamp(40px,6vw,72px)}
.feature + .feature{border-top:1px solid var(--hairline)}
.feature:nth-child(even) .feature__media{order:-1}
.feature__kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:16px}
.feature__kicker svg{width:16px; height:16px}
.feature h3{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:16px}
.feature p{color:var(--muted); font-size:1.06rem; max-width:48ch}
.feature__list{margin-top:20px; display:grid; gap:11px}
.feature__list li{display:flex; gap:11px; align-items:flex-start; color:var(--text);
  font-size:.98rem}
.feature__list svg{width:19px; height:19px; color:var(--success); flex:none; margin-top:2px}
.feature__media{display:flex; justify-content:center}
.feature__media .phone-wrap{width:min(260px,72%)}

/* --------------------------------------------------------------- Privacy ---- */
.privacy{background:
  radial-gradient(1100px 460px at 50% -10%,var(--accent-soft),transparent 70%), var(--surface);
  border-block:1px solid var(--hairline)}
.privacy__head{text-align:center; max-width:680px; margin:0 auto clamp(40px,5vw,56px)}
.privacy__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,26px)}
.pcard{background:var(--bg); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-card)}
.pcard__icon{width:46px; height:46px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:var(--accent-soft); color:var(--accent); margin-bottom:18px}
.pcard__icon svg{width:24px; height:24px}
.pcard h3{font-size:1.2rem; margin-bottom:10px}
.pcard p{color:var(--muted); font-size:.96rem}
.privacy__foot{margin-top:clamp(34px,4vw,46px); text-align:center; display:flex;
  flex-direction:column; align-items:center; gap:18px}
.privacy__coach{max-width:62ch; color:var(--muted); font-size:1rem}
.privacy__coach b{color:var(--text); font-weight:600}

/* --------------------------------------------------------------- Why -------- */
.why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,26px)}
.why-card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:30px 26px; box-shadow:var(--shadow-card);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)}
.why-card:hover{border-color:var(--hairline-2); transform:translateY(-3px); box-shadow:var(--shadow-float)}
.why-card__icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; margin-bottom:20px; background:var(--accent-soft); color:var(--accent)}
.why-card__icon svg{width:26px; height:26px}
.why-card h3{font-size:1.3rem; margin-bottom:11px}
.why-card p{color:var(--muted); font-size:.99rem}

/* --------------------------------------------------------------- FAQ -------- */
.faq__grid{max-width:820px; margin-inline:auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-item:first-child{border-top:1px solid var(--hairline)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;
  text-align:left; padding:24px 4px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--text)}
.faq-q__icon{flex:none; width:26px; height:26px; position:relative; transition:transform .3s var(--ease)}
.faq-q__icon::before,.faq-q__icon::after{content:""; position:absolute; inset:0; margin:auto;
  background:var(--accent); border-radius:2px}
.faq-q__icon::before{width:14px; height:2px}
.faq-q__icon::after{width:2px; height:14px; transition:transform .3s var(--ease)}
.faq-item[aria-expanded="true"] .faq-q__icon::after{transform:scaleY(0)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.faq-item[aria-expanded="true"] .faq-a{grid-template-rows:1fr}
.faq-a__inner{overflow:hidden; min-height:0}   /* no padding here: lets the row fully collapse */
.faq-a__inner p{margin:0; padding:2px 4px 26px; color:var(--muted); font-size:1.02rem; max-width:68ch}
.faq-a__inner a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

/* --------------------------------------------------------------- Final CTA -- */
.cta{position:relative; overflow:clip}
.cta__panel{position:relative; background:
  radial-gradient(900px 420px at 50% 120%,var(--accent-soft),transparent 70%), var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,72px) var(--gutter); text-align:center; overflow:hidden}
.cta__panel::after{content:""; position:absolute; left:50%; bottom:-40%; translate:-50% 0;
  width:480px; height:480px; background:radial-gradient(circle,var(--glow),transparent 60%);
  filter:blur(20px); z-index:0; pointer-events:none}
.cta__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center}
.cta h2{font-size:clamp(2rem,4.4vw,3rem); max-width:18ch}
.cta p{margin-top:18px; color:var(--muted); font-size:1.12rem; max-width:48ch}
.cta__actions{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:18px;
  width:100%}
.cta .waitlist{justify-content:center}

/* --------------------------------------------------------------- Footer ----- */
.footer{border-top:1px solid var(--hairline); padding-block:clamp(48px,6vw,72px) 40px}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.footer__brand .brand{font-size:1.3rem}
.footer__tag{margin-top:16px; color:var(--muted); font-size:.94rem; max-width:34ch}
.footer__tag .mono{font-family:var(--font-mono); color:var(--faint); font-size:.8rem;
  display:block; margin-top:14px; letter-spacing:.02em}
.footer h4{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:700; margin-bottom:18px}
.footer ul{display:grid; gap:12px}
.footer ul a{color:var(--muted); font-size:.95rem; transition:color .15s var(--ease)}
.footer ul a:hover{color:var(--text)}
.footer__reach-row{margin-top:clamp(36px,5vw,52px); padding:20px 24px; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap}
.footer__reach-row p{margin:0; color:var(--muted); font-size:1rem}
.footer__reach{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:var(--radius-sm);
  background:var(--bg); border:1px solid var(--hairline-2); color:var(--text); font-weight:600; font-size:.96rem;
  transition:border-color .18s var(--ease), transform .18s var(--ease)}
.footer__reach:hover{border-color:var(--accent); transform:translateY(-1px)}
.footer__reach svg{width:18px; height:18px; color:var(--accent); flex:none}
.footer__bar{margin-top:clamp(28px,3.5vw,40px); padding-top:26px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  color:var(--faint); font-size:.86rem}
.footer__bar .mono{font-family:var(--font-mono)}

/* --------------------------------------------------------------- Legal pages  */
.legal{padding-block:clamp(40px,6vw,72px) var(--section-y)}
.legal__wrap{max-width:760px; margin-inline:auto}
.legal-review{display:flex; gap:13px; align-items:flex-start; padding:16px 18px;
  background:var(--accent-soft); border:1px solid var(--hairline-2); border-radius:14px;
  margin-bottom:40px; color:var(--text); font-size:.92rem}
.legal-review svg{width:20px; height:20px; color:var(--accent); flex:none; margin-top:1px}
.legal h1{font-size:clamp(2rem,4.4vw,2.8rem); margin-bottom:14px}
.legal-meta{font-family:var(--font-mono); font-size:.82rem; color:var(--faint);
  padding-bottom:28px; margin-bottom:10px; border-bottom:1px solid var(--hairline); line-height:1.7}
.legal section{padding-top:34px}
.legal h2{font-size:1.5rem; margin-bottom:14px; scroll-margin-top:90px}
.legal h3{font-size:1.12rem; margin:24px 0 10px; color:var(--text)}
.legal p{color:var(--muted); margin-bottom:14px; line-height:1.72}
.legal ul{display:grid; gap:10px; margin-bottom:16px; padding-left:4px}
.legal li{position:relative; padding-left:24px; color:var(--muted); line-height:1.65}
.legal li::before{content:""; position:absolute; left:4px; top:11px; width:7px; height:7px;
  border-radius:2px; background:var(--accent)}
.legal strong{color:var(--text); font-weight:600}
.legal code{font-family:var(--font-mono); font-size:.85em; background:var(--surface);
  padding:2px 7px; border-radius:6px; border:1px solid var(--hairline); color:var(--text)}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.legal em{color:var(--faint)}
.legal .callout{position:relative; background:var(--accent-soft); border:1px solid var(--hairline-2);
  border-radius:12px; padding:16px 18px 16px 50px; color:var(--text); font-size:1rem; margin:8px 0 18px}
.legal .callout::before{content:""; position:absolute; left:18px; top:17px; width:20px; height:20px;
  background:var(--accent); -webkit-mask:var(--lock-mask) center/contain no-repeat;
  mask:var(--lock-mask) center/contain no-repeat}
.legal .callout strong{color:var(--text)}

/* --------------------------------------------------------------- Reveal ----- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),
  transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* --------------------------------------------------------------- Keyframes -- */
@keyframes breathe{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
@keyframes earnfill{0%{stroke-dashoffset:113} 55%,75%{stroke-dashoffset:6}
  92%,100%{stroke-dashoffset:113}}

/* --------------------------------------------------------------- Responsive - */
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr; gap:48px}
  .hero__visual{order:-1}
  .phone-wrap{width:min(264px,68%)}
  .steps{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .feature{grid-template-columns:1fr; gap:30px}
  .feature:nth-child(even) .feature__media{order:0}
  .feature__media{order:-1}
  .feature__media .phone-wrap{width:min(230px,62%)}
  .privacy__grid,.why__grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .footer__grid{grid-template-columns:1fr 1fr; gap:30px 24px}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:680px){
  .nav__links{display:none}
  .nav__cta .badge-app{display:none}
  .nav__menu{display:flex}
  .nav.is-menu-open{background:var(--bg); backdrop-filter:none}
  .nav__mobile{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease)}
  .nav.is-menu-open .nav__mobile{grid-template-rows:1fr}
  /* no vertical padding on the collapsing item, or it can't shrink to zero when closed */
  .nav__mobile-inner{overflow:hidden; min-height:0; padding:0 var(--gutter);
    display:grid; gap:6px}
  .nav__mobile-inner > :last-child{margin-bottom:22px}
  .nav__mobile a{padding:14px 8px; color:var(--muted); font-size:1.05rem; font-weight:500;
    border-bottom:1px solid var(--hairline)}
  .nav__mobile a:last-of-type{border-bottom:0}
  .nav__mobile .badge-app{margin-top:14px; width:100%; justify-content:center}
  .hero__cta-row{width:100%}
  .badge-app{width:100%; justify-content:center}
  .waitlist{max-width:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__bar{flex-direction:column; align-items:flex-start}
  .earn-chip{left:-12px; bottom:64px} .streak-chip{right:-10px}
}
@media (max-width:380px){
  .footer__grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .earn-chip__bar{stroke-dashoffset:6}      /* show the loop's "earned" rest state */
  .phone__glow{opacity:.85}
}

/* --------------------------------------------------------------- Print ------ */
@media print{
  .nav,.footer__bar,.legal-review{filter:none}
  body{background:#fff; color:#111}
}