/* ===========================================================================
   site.css — the shared design language for every page OTHER than the home
   page and the engine. Ported from the home page (index.html) so terms,
   privacy, biosecurity, refund, pricing, the dashboard, the auth pages and the
   404 all read as one site: warm paper ground, IBM Plex Sans/Mono, a Playfair
   italic wordmark, the amber key, and the pill nav.

   The home page keeps its own bespoke CSS (hero, animated ground, lenis). This
   file is the calmer, document-and-form subset of the same system.
   =========================================================================== */

:root{
  /* Brand palette — binding, from the home page */
  --steel:#2B709C;
  --ice:#C8E3F5;
  --amber:#FFE05C;
  --ink:#192025;
  --slate:#282F33;
  --paper:#FFFFFF;

  /* Grounds — warm paper */
  --ground:#F4F2ED;
  --ground-alt:#EDEAE3;

  /* Text tones */
  --ink-70:#3C464C;
  --ink-50:#6E757A;
  --ink-35:#8B9298;

  /* Hairlines */
  --rule:#D8D4CB;
  --rule-soft:#E4E1D9;
  --rule-dark:#313A40;

  /* Semantic — kept apart from the amber key */
  --danger:#B23A2E;
  --danger-ink:#8F2C22;
  --good:#2F6B4F;

  --gutter:clamp(20px,4vw,64px);
  --frame:clamp(8px,0.9vw,14px);
  --card-r:clamp(12px,1.2vw,18px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Playfair Display','EB Garamond',Georgia,serif;

  /* Fluid display scale — four steps, same envelope as the home page */
  --d-1:clamp(38px,5.8vw,88px);
  --d-2:clamp(30px,4.0vw,62px);
  --d-3:clamp(24px,2.8vw,44px);
  --d-4:clamp(19px,1.9vw,26px);
  --display-w:300;

  --wrap-read:720px;   /* long-form column */
  --wrap-page:1180px;  /* full page width */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--steel);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
strong,b{font-weight:600;color:var(--ink)}
em,i{font-style:italic}
code{font-family:var(--mono);font-size:.86em;background:var(--ground-alt);
  padding:.08em .4em;border-radius:4px;border:1px solid var(--rule-soft);color:var(--ink)}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px;border-radius:2px}
.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}

/* ── Type primitives ───────────────────────────────────────────────────── */
.display{font-family:var(--sans);font-weight:var(--display-w);line-height:1.03;letter-spacing:-.03em;color:var(--ink);margin:0}
.h-lg{font-family:var(--sans);font-weight:300;font-size:var(--d-3);line-height:1.1;letter-spacing:-.025em;margin:0;color:var(--ink)}
.h-md{font-family:var(--sans);font-weight:400;font-size:var(--d-4);line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ink)}
.h-sm{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.005em;margin:0;color:var(--ink)}
.body{font-size:16px;line-height:1.62;color:var(--ink-70);max-width:66ch;text-wrap:pretty;margin:0}
.body--sm{font-size:14px;line-height:1.6;color:var(--ink-70);max-width:62ch;text-wrap:pretty;margin:0}
.note{font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.02em;color:var(--ink-35);margin:0}

/* The signature device: square bullet + tracked label. No "§". */
.eyebrow{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-50);margin:0}
.eyebrow::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:3px;background:var(--steel)}
.eyebrow--amber::before{background:var(--amber)}
.eyebrow--hollow::before{background:none;box-shadow:inset 0 0 0 1.5px var(--steel)}

.tag{display:inline-flex;align-items:center;font:400 11px/1 var(--mono);letter-spacing:.06em;
  color:var(--ink-70);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;white-space:nowrap;background:transparent}

/* ── Buttons — solid pill; amber key ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 11px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border-radius:999px;border:1px solid transparent;
  background:var(--ink);color:var(--paper);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.btn:hover{background:var(--steel);color:var(--paper);text-decoration:none}
.btn--key{background:var(--amber);color:var(--ink)}
.btn--key:hover{background:var(--ink);color:var(--amber)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--sm{padding:11px 18px;font-size:10px}
.btn--danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--rule))}
.btn--danger:hover{background:var(--danger);color:var(--paper);border-color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-group{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Masthead — pill nav on the warm ground ────────────────────────────── */
.site-head{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.site-head.is-stuck{border-bottom-color:var(--rule)}
.site-head__in{max-width:var(--wrap-page);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);flex:0 0 auto}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-mark{width:52px;height:25px;flex:0 0 auto;color:var(--steel)}
.brand-word{font-family:var(--display);font-style:italic;font-weight:700;font-size:20px;letter-spacing:-.005em;white-space:nowrap}
.brand-word em{font-style:italic;font-weight:900;color:var(--steel)}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav__links{display:flex;align-items:center;gap:2px;border:1px solid var(--rule);border-radius:999px;padding:4px 6px}
.site-nav__links a{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70);padding:9px 13px;border-radius:999px}
.site-nav__links a:hover{background:var(--ground-alt);color:var(--ink);text-decoration:none}
.site-nav__links a[aria-current]{color:var(--ink);background:var(--ground-alt)}
.site-nav__cta{margin-left:6px}
.nav-toggle{display:none;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule);border-radius:999px;padding:11px 15px;color:var(--ink);cursor:pointer}
@media (max-width:760px){
  .site-nav__links{display:none;position:absolute;top:calc(100% + 6px);right:var(--gutter);flex-direction:column;
    align-items:stretch;gap:2px;background:var(--paper);border-radius:var(--card-r);padding:8px;box-shadow:0 12px 34px rgba(25,32,37,.14);min-width:200px}
  .site-nav__links.is-open{display:flex}
  .site-nav__links a{padding:12px 12px}
  .nav-toggle{display:inline-flex}
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.page{flex:1 0 auto;width:100%;max-width:var(--wrap-page);margin:0 auto;padding:clamp(40px,6vw,76px) var(--gutter) clamp(48px,6vw,88px)}
.page--read{max-width:calc(var(--wrap-read) + var(--gutter)*2)}

/* Document header (legal + pricing + dashboard) */
.doc-head{max-width:var(--wrap-read)}
.doc-head .eyebrow{margin-bottom:18px}
.doc-title{font-family:var(--sans);font-weight:var(--display-w);font-size:var(--d-2);line-height:1.04;
  letter-spacing:-.03em;color:var(--ink);margin:0;text-wrap:balance}
.doc-lede{font-size:var(--d-4);line-height:1.4;color:var(--ink-70);margin:18px 0 0;max-width:60ch;font-weight:300}
.doc-meta{margin:22px 0 0;font:400 12px/1.7 var(--mono);letter-spacing:.03em;color:var(--ink-35)}
.doc-meta strong,.doc-meta b{color:var(--ink-70);font-weight:500}
.doc-meta-sep{color:var(--rule);margin:0 8px}

/* ── Long-form document body (terms / privacy / biosecurity / refund) ──── */
.doc{max-width:var(--wrap-read);margin:clamp(30px,4vw,48px) 0 0}
.doc h2{font-family:var(--sans);font-weight:400;font-size:var(--d-4);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);margin:44px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.3;color:var(--ink);margin:26px 0 0}
.doc p{font-size:16px;line-height:1.66;color:var(--ink-70);margin:14px 0 0;max-width:68ch}
.doc ul,.doc ol{margin:14px 0 0;padding-left:22px;color:var(--ink-70);font-size:16px;line-height:1.6;max-width:68ch}
.doc li{margin:7px 0}
.doc li::marker{color:var(--ink-35)}
.doc strong{color:var(--ink)}
.doc a{color:var(--steel);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.doc-callout{margin:22px 0 0;padding:16px 20px;background:var(--paper);border:1px solid var(--rule);
  border-left:3px solid var(--amber);border-radius:0 var(--card-r) var(--card-r) 0}
.doc-callout p{margin:0;font-size:15px;color:var(--ink-70)}
.doc-callout p + p{margin-top:10px}
.doc-legal-note{margin-top:10px;font-size:14px;color:var(--ink-50)}
.doc-table{overflow-x:auto;margin:18px 0 0;border:1px solid var(--rule);border-radius:var(--card-r)}
.doc-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;min-width:460px}
.doc-table th,.doc-table td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);color:var(--ink-70)}
.doc-table tr:last-child td{border-bottom:0}
.doc-table th:last-child,.doc-table td:last-child{border-right:0}
.doc-table th{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--ground-alt);font-weight:500}
.doc blockquote{margin:20px 0 0;padding:12px 18px;border-left:3px solid var(--amber);background:var(--paper);
  border-radius:0 var(--card-r) var(--card-r) 0;color:var(--ink-70);font-style:italic}
.doc blockquote p{margin:0}
.doc-crosslinks{display:none}

/* ── Cards / panels ────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--card-r);padding:clamp(20px,3vw,28px)}
.panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--card-r);padding:clamp(20px,3vw,26px)}
.panel + .panel{margin-top:16px}
.panel__title{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.005em;margin:0 0 4px}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule-soft)}
.stat-row:first-of-type{border-top:0}
.stat-row .k{font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-35)}
.stat-row .v{font-weight:600;color:var(--ink)}
.pill{display:inline-flex;align-items:center;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:999px;padding:5px 11px;color:var(--ink-70)}
.pill--amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.meter{height:6px;border-radius:999px;background:var(--ground-alt);overflow:hidden;margin:.6em 0 .3em}
.meter-fill{display:block;height:100%;background:var(--steel);width:0}

/* Danger zone (dashboard) */
.panel--danger{border-color:color-mix(in srgb,var(--danger) 40%,var(--rule))}
.panel--danger .panel__title{color:var(--danger-ink)}

/* ── Forms (auth + dashboard) ──────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.field label{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.field input,.field textarea{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;padding:12px 13px;width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px color-mix(in srgb,var(--steel) 18%,transparent)}
.field-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.form-status{font:500 12px/1.5 var(--mono);letter-spacing:.02em;margin:2px 0 0;min-height:1.2em}
.form-status.is-error{color:var(--danger)}
.form-status.is-success{color:var(--good)}

/* ── Dialog (survey / confirmations) ───────────────────────────────────── */
dialog.sheet{border:1px solid var(--rule);border-radius:var(--card-r);background:var(--paper);color:var(--ink);
  padding:0;max-width:520px;width:calc(100% - 2rem)}
dialog.sheet::backdrop{background:rgba(25,32,37,.55)}
.sheet-in{padding:clamp(20px,3vw,28px)}
.sheet-in h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 6px}
.sheet-in p.lede{color:var(--ink-70);font-size:15px;margin:0 0 18px}
.reasons{display:flex;flex-direction:column;gap:2px;margin:0 0 16px}
.reasons label{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;font-size:15px;cursor:pointer;border-radius:8px;color:var(--ink-70)}
.reasons label:hover{background:var(--ground)}
.reasons input{margin-top:4px;accent-color:var(--ink)}
.confirm-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-70);margin:0 0 20px;
  padding:11px 13px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--rule));border-radius:10px;
  background:color-mix(in srgb,var(--danger) 6%,transparent)}
.confirm-check input{margin-top:3px;accent-color:var(--danger)}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── Footer — dark band, brand + links ─────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--ink-35);margin-top:clamp(48px,7vw,90px)}
.site-foot__in{max-width:var(--wrap-page);margin:0 auto;padding:clamp(40px,5vw,64px) var(--gutter);
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.site-foot .brand{color:var(--paper)}
.site-foot .brand-word em{color:var(--ice)}
.site-foot__tag{font-size:14px;color:var(--ink-35);margin:14px 0 0;max-width:32ch}
.site-foot__links{display:flex;flex-wrap:wrap;gap:28px}
.site-foot__col h4{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin:0 0 12px}
.site-foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-foot__col a{font-size:14px;color:var(--ice);opacity:.82}
.site-foot__col a:hover{opacity:1;text-decoration:underline}
.site-foot__legal{max-width:var(--wrap-page);margin:0 auto;padding:0 var(--gutter) clamp(30px,4vw,48px)}
.site-foot__legal .note{color:var(--ink-50)}

/* ── Auth pages (signin / signup / reset) — reskin their existing markup ── */
.auth{flex:1 0 auto;display:flex;align-items:center;justify-content:center;width:100%;max-width:var(--wrap-page);margin:0 auto;padding:clamp(36px,6vw,72px) var(--gutter)}
.auth-aside{display:none}
.auth-panel{width:100%;max-width:452px}
.auth-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--card-r);padding:clamp(24px,3.4vw,36px)}
.auth-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-50);margin:0 0 14px}
.auth-kicker::before{content:"";width:8px;height:8px;background:var(--steel)}
.auth-title{font-family:var(--sans);font-weight:300;font-size:var(--d-3);line-height:1.06;letter-spacing:-.03em;color:var(--ink);margin:0}
.auth-lede{font-size:15px;line-height:1.55;color:var(--ink-70);margin:12px 0 0}
.auth-form{display:flex;flex-direction:column;gap:16px;margin:24px 0 0}
.auth-form .form-row{display:flex;flex-direction:column;gap:7px}
.auth-form label{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:12px 13px;width:100%}
.auth-form input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px color-mix(in srgb,var(--steel) 18%,transparent)}
.row-with-link{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.row-with-link a{font-size:12px}
.field-hint{font-size:12.5px;line-height:1.5;color:var(--ink-50);margin:2px 0 0}
.checkbox-row{display:flex;align-items:flex-start;gap:10px}
.checkbox-row input{margin-top:3px;accent-color:var(--ink);flex:0 0 auto}
.checkbox-row label{font:400 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-70)}
.submit{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:4px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border-radius:999px;border:1px solid transparent;background:var(--ink);color:var(--paper);cursor:pointer;transition:background .16s var(--ease)}
.submit:hover{background:var(--steel)}
.submit:disabled{opacity:.55;cursor:not-allowed}
.auth-status{font:500 12px/1.5 var(--mono);letter-spacing:.02em;margin:14px 0 0;min-height:1.2em}
.auth-status.is-error{color:var(--danger)}
.auth-status.is-success{color:var(--good)}
.auth-footer{font-size:14px;color:var(--ink-50);margin:18px 0 0}
.auth-footer a{color:var(--steel)}

/* ── Utilities ─────────────────────────────────────────────────────────── */
[hidden]{display:none!important}
.stack-4{display:flex;flex-direction:column;gap:4px}
.mt-3{margin-top:24px}