/* =========================================================
   BIOTIDE — styles.css
   Monochrome editorial-clinical. One disciplined accent.
   Mobile-first. Matches the Biotide email identity.
   ========================================================= */

:root{
  /* Color */
  --ink:        #111110;
  --ink-soft:   #3a3a37;
  --muted:      #76746c;
  --paper:      #faf9f6;
  --surface:    #ffffff;
  --line:       #e7e5de;
  --line-strong:#d6d3ca;
  --accent:     #0e5a4a;   /* tide-green: selected / active / progress only */
  --accent-soft:#e9f1ed;

  /* Type */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:   'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale */
  --wrap:  640px;
  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 1px 2px rgba(17,17,16,.04), 0 12px 32px -18px rgba(17,17,16,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:58px; }
.wordmark{
  font-family:var(--font-sans);
  font-weight:700; letter-spacing:.22em; font-size:15px;
  color:var(--ink); text-decoration:none;
}
.wordmark--sm{ font-size:13px; letter-spacing:.2em; }
.header-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted); text-transform:uppercase;
}

/* Progress (only visible during quiz) */
.progress{ height:0; overflow:hidden; transition:height .25s var(--ease); }
.progress.is-visible{ height:3px; }
.progress-bar{ height:3px; background:var(--line); }
.progress-fill{
  display:block; height:100%; width:0%;
  background:var(--accent);
  transition:width .45s var(--ease);
}

/* ---------- Screens ---------- */
#app{ flex:1 0 auto; }
.screen{ display:none; }
.screen.is-active{ display:block; animation:screen-in .42s var(--ease) both; }
@keyframes screen-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-sans); font-weight:600; font-size:16px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:14px 22px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; transition:transform .12s var(--ease), background .2s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:17px 28px; font-size:17px; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-primary:disabled{ background:var(--line-strong); color:#fff; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- Hero ---------- */
.hero{ padding-top:48px; }
.hero-inner{ text-align:center; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px;
}
.hero-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,8.5vw,52px); line-height:1.04;
  letter-spacing:-.015em; margin:0 auto 18px; max-width:14ch;
}
.hero-sub{
  font-size:18px; color:var(--ink-soft); margin:0 auto 30px; max-width:46ch;
}
.trust-line{
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  margin:16px 0 0; letter-spacing:.01em;
}
.tide{
  display:block; width:100%; height:54px; margin-top:46px;
  color:var(--line-strong);
}

/* ---------- Section shared ---------- */
.section-eyebrow,.focus-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 22px;
}

/* ---------- How it works ---------- */
.how{ padding:64px 0 12px; }
.steps{ display:grid; gap:14px; }
.step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.step-no{
  font-family:var(--font-mono); font-size:13px; color:var(--accent);
  display:block; margin-bottom:12px;
}
.step-title{
  font-family:var(--font-display); font-weight:500; font-size:21px;
  letter-spacing:-.01em; margin:0 0 8px;
}
.step-body{ margin:0; color:var(--ink-soft); font-size:16px; }

/* ---------- Inside the blueprint ---------- */
.inside{ padding:64px 0; }
.inside-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px,6vw,34px); line-height:1.1; letter-spacing:-.015em;
  margin:0 0 14px; max-width:18ch;
}
.inside-body{ color:var(--ink-soft); margin:0 0 28px; max-width:48ch; }
.readout{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.readout li{
  display:flex; align-items:baseline; gap:16px;
  padding:15px 2px; border-bottom:1px solid var(--line);
  font-size:16px;
}
.readout-code{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
  flex:0 0 auto; min-width:22px;
}
.readout--compact li{ padding:12px 2px; font-size:15.5px; }

/* ---------- Closer ---------- */
.closer{
  text-align:center; padding:56px 26px 72px; margin:8px 0 56px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.closer-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px,6vw,34px); margin:0 0 8px; letter-spacing:-.015em;
}
.closer-sub{ color:var(--ink-soft); margin:0 0 26px; }

/* ---------- Panes (funnel screens) ---------- */
.pane{ padding:40px 22px 64px; }
.pane-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:36px 26px;
}
.center-card{ text-align:center; }
.card-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px;
}
.card-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(26px,6.4vw,34px); line-height:1.12; letter-spacing:-.015em;
  margin:0 0 14px;
}
.card-sub{ color:var(--ink-soft); margin:0 auto 28px; max-width:42ch; }
.meta-row{
  list-style:none; display:flex; justify-content:center; gap:26px;
  padding:0; margin:0 0 30px; font-size:14px; color:var(--muted);
}
.meta-row strong{ color:var(--ink); font-weight:600; }

/* ---------- Quiz ---------- */
.quiz-card{ padding:30px 24px 28px; }
.q-step{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  color:var(--muted); margin:0 0 14px;
}
.q-step b{ color:var(--accent); font-weight:500; }
.q-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(23px,5.6vw,29px); line-height:1.16; letter-spacing:-.012em;
  margin:0 0 8px;
}
.q-hint{ font-size:14px; color:var(--muted); margin:0 0 22px; }

.options{ display:grid; gap:10px; }
.option{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:17px 18px;
  font-family:var(--font-sans); font-size:16.5px; color:var(--ink);
  transition:border-color .15s, background .15s, transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.option:hover{ border-color:var(--ink); }
.option:active{ transform:scale(.995); }
.option .mark{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-strong); position:relative; transition:border-color .15s;
}
.option.is-multi .mark{ border-radius:6px; }
.option.is-selected{ border-color:var(--accent); background:var(--accent-soft); }
.option.is-selected .mark{ border-color:var(--accent); background:var(--accent); }
.option.is-selected .mark::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:7px; height:11px; border:solid #fff; border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);
}
.option-text{ flex:1; }

/* Long-form text questions */
.q-textarea{
  width:100%; min-height:130px; resize:vertical;
  font-family:var(--font-sans); font-size:16.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:14px 16px; line-height:1.5;
}
.q-textarea::placeholder{ color:var(--muted); }
.q-optional{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  margin:10px 0 0; text-transform:uppercase; letter-spacing:.05em;
}

/* Age gate notice */
.gate{
  margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm);
  background:#fbf3f0; border:1px solid #ecd9d2; color:#7a3b2a; font-size:15px;
}

.quiz-nav{ display:flex; gap:12px; margin-top:22px; }
.quiz-nav .btn{ flex:1; }
.quiz-nav .btn-ghost{ flex:0 0 34%; }
.quiz-nav.is-first .btn-ghost{ display:none; }

/* ---------- Email field ---------- */
.field{ text-align:left; margin:0 0 22px; }
.field-label{
  display:block; font-size:13px; font-weight:600; color:var(--ink-soft);
  margin:0 0 8px; letter-spacing:.01em;
}
.field-input{
  width:100%; font-family:var(--font-sans); font-size:17px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:16px 16px;
}
.field-input::placeholder{ color:var(--muted); }
.field-error{ color:#b3402a; font-size:13.5px; margin:10px 0 0; }

/* ---------- Preview ---------- */
.preview-head{ text-align:center; margin:0 0 30px; }
.focus{ margin:0 0 36px; }
.focus-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.focus-item{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  padding:16px 18px; display:flex; align-items:baseline; gap:14px;
}
.focus-code{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
  flex:0 0 auto; letter-spacing:.02em;
}
.focus-name{ font-weight:600; }
.focus-from{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }

.purchase{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 24px; text-align:center;
}
.purchase-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(24px,5.6vw,30px); margin:0 0 18px; letter-spacing:-.012em;
}
.purchase-intro{ text-align:left; color:var(--ink-soft); margin:0 0 6px; font-size:15px; }
.purchase .readout{ text-align:left; margin-bottom:26px; }
.secure-line{
  font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:14px 0 0;
}
.disclaimer{
  font-size:12.5px; color:var(--muted); line-height:1.5;
  margin:22px auto 0; max-width:52ch;
}

/* ---------- Thank you ---------- */
.check{
  width:60px; height:60px; margin:0 auto 22px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
}
.check svg{ width:30px; height:30px; }

/* ---------- Footer ---------- */
.site-footer{ flex:0 0 auto; border-top:1px solid var(--line); padding:30px 0 38px; }
.footer-inner{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer-note{ font-size:12.5px; color:var(--muted); margin:0; max-width:44ch; }

/* ---------- Focus visibility (a11y) ---------- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ---------- Larger screens ---------- */
@media (min-width:720px){
  body{ font-size:18px; }
  .hero{ padding-top:72px; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .how{ padding:88px 0 12px; }
  .closer{ padding:72px 40px 84px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   THANK-YOU PAGE (/thank-you) — additions
   Reuses all existing tokens; only the few page-specific
   pieces live here.
   ========================================================= */
.ty-hero{ margin-bottom:18px; }
.ty-card{ text-align:left; }
.ty-body{ color:var(--ink-soft); margin:0 0 24px; }
.ty-heading{
  font-family:var(--font-display); font-weight:500; font-size:20px;
  letter-spacing:-.01em; margin:0 0 14px;
}
.ty-note{ color:var(--ink-soft); font-size:15px; margin:18px 0 0; }

/* Numbered "What happens next" — mono leading-zero counters */
.next-steps{ list-style:none; counter-reset:step; margin:0; padding:0; border-top:1px solid var(--line); }
.next-steps li{
  counter-increment:step; position:relative;
  padding:15px 2px 15px 44px; border-bottom:1px solid var(--line);
  font-size:16px; color:var(--ink);
}
.next-steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:2px; top:16px;
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
}

/* Info box: subtle off-white panel inside the white card */
.info-box{
  margin-top:26px; padding:22px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
.info-box .readout{ border-top:1px solid var(--line); }

.ty-actions{ text-align:center; margin:30px 0 0; }