/* ============================================================
   Already — marketing site
   Design tokens lifted verbatim from the app (Passes 1–3).
   Source of truth: already-shared.jsx  →  ALREADY {}
   Hand-rolled CSS (no runtime framework) for fast mobile load,
   no FOUC, and full control of the premium look. Utility-style
   classes mirror Tailwind naming so a CLI build can replace this
   later if desired.
   ============================================================ */

:root{
  /* palette */
  --black:#0A0907;      /* primary surface */
  --charcoal:#1A1714;   /* cards, containers */
  --graphite:#2A2622;
  --ivory:#F2EDE3;      /* secondary surface */
  --cream:#E8E1D2;      /* note cards */
  --gold:#B8924F;       /* default accent — text on dark, the streak number */
  --bronze:#8A6A3B;     /* pre-attention accent (eyebrows on cream) */
  --gold-soft:#C9A45E;  /* hover / pressed / 1px hairline rules */
  --warm-grey:#9C958A;
  --dim-grey:#5C564E;

  --ivory-78:rgba(242,237,227,.78);
  --ivory-62:rgba(242,237,227,.62);
  --ivory-45:rgba(242,237,227,.45);
  --ivory-30:rgba(242,237,227,.30);
  --hair:rgba(242,237,227,.14);

  /* type */
  --serif:"EB Garamond","Tiempos Headline","GT Sectra Display",Georgia,serif;
  --sans:"Hanken Grotesk","Söhne",system-ui,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",monospace;

  --maxw:1120px;
  --gut:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--ivory);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ---- type primitives ------------------------------------- */
.serif{font-family:var(--serif);font-weight:500;font-style:normal;letter-spacing:-.005em}
.italic{font-family:var(--serif);font-style:italic;font-weight:400} /* italic = doorway, allow-list only */
.mono{
  font-family:var(--mono);text-transform:uppercase;font-weight:500;
  font-size:11px;letter-spacing:.28em;
}
.eyebrow{color:var(--gold);}
.eyebrow.on-light{color:var(--bronze);}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;font-style:normal;letter-spacing:-.01em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}

/* ---- layout ---------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.section-pad{padding-block:clamp(72px,12vw,140px)}

.hairline{height:1px;background:var(--hair);border:0;margin:0}

/* ---- header ---------------------------------------------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:30;
  padding-block:22px;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.wordmark{font-family:var(--serif);font-weight:500;font-style:normal;color:var(--ivory);letter-spacing:.01em;line-height:1}
.wordmark .rule{display:block;height:1px;background:var(--gold-soft);margin-top:.18em;width:1.1em}
.header-link{font-size:13px;letter-spacing:.04em;color:var(--ivory-78);transition:color .3s}
.header-link:hover{color:var(--gold-soft)}

/* ---- CTA pattern: gold-soft top rule + black bar + gold word ---- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:56px;padding:0 32px;background:var(--black);color:var(--gold);
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.06em;
  border:0;border-top:1px solid var(--gold-soft);cursor:pointer;
  transition:color .35s ease, background .35s ease;width:100%;
}
.cta:hover{color:var(--gold-soft);background:#0d0b09}
.cta .arrow{font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0}
/* pre-launch "Coming soon" state — applied via JS when no App Store URL is set */
.cta.is-soon{color:var(--ivory-45);border-top-color:var(--ivory-30);cursor:default;pointer-events:none}
a.is-soon{cursor:default;pointer-events:none;color:var(--ivory-45)}
.cta-note{margin-top:10px;font-size:11.5px;color:var(--ivory-45);letter-spacing:.03em;text-align:center}

.ghost{
  display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  border:1px solid var(--ivory-30);color:var(--ivory-78);background:transparent;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s,color .3s;
}
.ghost:hover{border-color:var(--gold-soft);color:var(--ivory)}

/* ---- download cluster (badge + qr) ----------------------- */
.dl-cluster{display:flex;flex-direction:column;gap:18px}
.qr-card{
  display:none;align-items:center;gap:18px;
}
.qr-card img{width:104px;height:104px;background:var(--ivory);padding:8px}
.qr-card .qr-copy{max-width:200px}
.qr-card .qr-copy .t{font-family:var(--serif);font-size:18px;color:var(--ivory)}
.qr-card .qr-copy .s{font-size:13px;color:var(--ivory-62);margin-top:4px;line-height:1.45}

/* JS sets these on <html>; default (no-JS) shows the badge */
html.is-desktop .cta-badge-wrap{display:none}
html.is-desktop .qr-card{display:flex}
html.is-mobile .qr-card{display:none}

/* ---- hero ------------------------------------------------ */
.hero{padding-top:clamp(120px,18vw,160px);padding-bottom:clamp(56px,10vw,90px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,8vw,64px);align-items:center}
.hero h1{
  font-size:clamp(44px,12vw,76px);line-height:1.0;margin-top:22px;
}
.hero h1 .ital{font-family:var(--serif);font-style:italic;font-weight:400}
.hero .sub{
  margin-top:24px;max-width:30ch;font-size:clamp(17px,2.4vw,20px);
  color:var(--ivory-62);line-height:1.55;
}
.hero .dl-cluster{margin-top:38px;max-width:340px}

/* phone frame */
.phone{
  position:relative;width:min(300px,72vw);margin-inline:auto;
  border-radius:46px;background:#000;
  padding:10px;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(184,146,79,.10),
             inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone img{width:100%;height:auto;border-radius:38px;display:block}
.phone.tilt{transform:rotate(0deg)}
.hero-phone-wrap{position:relative}
.hero-phone-wrap::after{ /* warm glow behind phone */
  content:"";position:absolute;inset:-12% -8%;z-index:-1;
  background:radial-gradient(ellipse at 50% 42%,rgba(184,146,79,.16),rgba(184,146,79,0) 62%);
  filter:blur(8px);
}

/* ---- steps (how it works) -------------------------------- */
.steps{display:grid;grid-template-columns:1fr;gap:clamp(56px,9vw,76px)}
.step{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.step .copy .idx{
  font-family:var(--serif);font-style:normal;font-weight:500;font-size:15px;color:var(--gold);
  display:inline-flex;align-items:center;gap:12px;
}
.step .copy .idx::after{content:"";width:38px;height:1px;background:var(--gold-soft);opacity:.7}
.step h3{font-size:clamp(26px,5vw,34px);margin-top:18px}
.step .copy p{margin-top:14px;color:var(--ivory-62);max-width:42ch;font-size:16px}
.step .shot{display:flex;justify-content:center}

/* ---- benefits -------------------------------------------- */
.benefit{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.benefit + .benefit{margin-top:clamp(64px,10vw,108px)}
.benefit h3{font-size:clamp(28px,5.4vw,40px);line-height:1.12}
.benefit .lead{margin-top:18px;color:var(--ivory-62);font-size:17px;max-width:44ch}
.benefit .micro{margin-top:22px;font-size:13px;color:var(--ivory-45);letter-spacing:.02em;max-width:42ch}

/* ---- ivory section (social proof) ------------------------ */
.on-ivory{background:var(--ivory);color:var(--charcoal)}
.on-ivory .mono{color:var(--bronze)}
.on-ivory h2{color:var(--charcoal)}
.on-ivory .lede{color:#4a443c}

/* testimonials — data-light, easy to populate */
.quote-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(26,23,20,.12);margin-top:48px;border-block:1px solid rgba(26,23,20,.12)}
.quote{background:var(--ivory);padding:clamp(28px,4vw,40px)}
.quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.6vw,24px);line-height:1.4;color:var(--charcoal)}
.quote .attr{margin-top:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.quote.placeholder blockquote{color:rgba(26,23,20,.35)}
.quote .stars{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold);margin-bottom:18px}

/* ---- section heads --------------------------------------- */
.sec-head{max-width:30ch}
.sec-head h2{font-size:clamp(30px,6vw,46px);margin-top:18px;line-height:1.1}
.sec-head .lede{margin-top:20px;color:var(--ivory-62);font-size:18px}

/* ---- final cta ------------------------------------------- */
.final{text-align:center}
.final h2{font-size:clamp(34px,8vw,60px);line-height:1.05;max-width:16ch;margin-inline:auto}
.final h2 .ital{font-family:var(--serif);font-style:italic;font-weight:400}
.final .dl-cluster{margin-top:40px;max-width:340px;margin-inline:auto}
.final .qr-card{justify-content:center}

/* ---- footer ---------------------------------------------- */
.site-footer{border-top:1px solid var(--hair);padding-block:clamp(48px,8vw,72px);background:var(--black)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px}
.footer-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:500}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-col a{color:var(--ivory-62);font-size:14px;transition:color .3s}
.footer-col a:hover{color:var(--gold-soft)}
.footer-bottom{margin-top:48px;display:flex;flex-direction:column;gap:14px;
  font-size:12px;color:var(--ivory-30);letter-spacing:.02em}
.footer-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom .legal a{color:var(--ivory-45)}
.footer-bottom .legal a:hover{color:var(--gold-soft)}

/* ---- reveal-on-scroll (sparing motion) ------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Responsive — tablet / desktop
   ============================================================ */
@media (min-width:760px){
  .quote-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
}
@media (min-width:920px){
  body{font-size:18px}
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero .dl-cluster{margin-top:42px}
  .phone{width:min(330px,34vw)}
  .hero .phone{width:min(286px,30vw)}
  .step{grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,90px)}
  .step.flip .copy{order:2}
  .step.flip .shot{order:1}
  .benefit{grid-template-columns:1.1fr .9fr;gap:clamp(48px,7vw,90px)}
  .benefit.flip .copy{order:2}
  .benefit.flip .shot{order:1}
}

/* legal pages */
.legal-page{max-width:760px;margin:0 auto;padding:clamp(120px,16vw,160px) var(--gut) 120px}
.legal-page h1{font-size:clamp(36px,7vw,56px)}
.legal-page .updated{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.legal-page h2{font-size:clamp(22px,3.4vw,28px);margin-top:56px}
.legal-page h3{font-size:18px;margin-top:32px;font-family:var(--sans);font-weight:600;letter-spacing:0}
.legal-page p,.legal-page li{color:var(--ivory-78);font-size:16px;line-height:1.7;margin-top:16px}
.legal-page ul{padding-left:20px}
.legal-page a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}
.legal-page .back{display:inline-flex;align-items:center;gap:10px;margin-bottom:40px;font-size:13px;letter-spacing:.04em;color:var(--ivory-45);white-space:nowrap}
.legal-page .back:hover{color:var(--gold-soft)}
.legal-note{margin-top:64px;padding:24px;border:1px solid var(--hair);background:var(--charcoal);
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--warm-grey);text-transform:none}