/* ─────────────────────────────────────────────────────────────────────────────
 * legal.css — shared chrome and long-form prose styling for terms.html and
 * privacy.html.
 *
 * WHY A SHARED FILE, when every other page in this repo inlines its <style>:
 * these two pages are siblings that must stay visually identical to each
 * other, and they cross-link constantly (the Terms reference the Privacy
 * Policy and vice versa). Duplicating ~300 lines of tokens + nav + footer +
 * prose rules into both files guarantees they drift — which is exactly what
 * already happened between index.html (Hallmark tokens, Space Grotesk) and
 * login.html (an older Segoe UI/hex system). One file, two consumers, no
 * build step required.
 *
 * The design tokens below are copied verbatim from index.html's :root so the
 * legal pages read as part of the product rather than a bolt-on. If
 * index.html's palette changes, this block should be updated to match.
 * ───────────────────────────────────────────────────────────────────────── */

:root{
  /* — colour · brand-locked, same OKLCH values as index.html — */
  --paper:        oklch(20.0% 0.040 258.3);  /* #0a1628 */
  --paper-2:      oklch(23.9% 0.058 261.8);  /* #0f1e3a */
  --paper-3:      oklch(26.6% 0.051 248.5);  /* #0f273d */
  --rule:         oklch(32.5% 0.063 244.3);  /* #133752 */
  --rule-2:       oklch(52.4% 0.097 235.5);  /* #23729a */
  --ink:          oklch(92.9% 0.013 255.5);  /* #e2e8f0 */
  --ink-2:        oklch(86.9% 0.020 252.9);  /* #cbd5e1 */
  --dim:          oklch(71.1% 0.035 256.8);  /* #94a3b8 */
  --teal:         oklch(75.4% 0.139 232.7);  /* #38bdf8 */
  --accent:       oklch(77.9% 0.143 178.6);  /* #00d4b8 */
  --accent-ink:   oklch(17.7% 0.034 246.5);  /* #04121f */
  --focus:        oklch(77.9% 0.143 178.6);

  /* — type — */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;

  /* — space · 4pt scale — */
  --space-2xs: 0.25rem;  --space-xs:  0.5rem;
  --space-sm:  0.75rem;  --space-md:  1rem;    --space-lg: 1.5rem;
  --space-xl:  2.5rem;   --space-2xl: 4rem;    --space-3xl: 6rem;

  /* — motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:   120ms;
  --dur-short:   220ms;

  /* — structure — */
  --rule-hair: 1px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --nav-h:     64px;
  --page-max:  1140px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Long-form measure. Narrower than --page-max on purpose: legal prose is
     read line by line, and 72ch is the band where that stays comfortable. */
  --prose-max: 72ch;

  --z-sticky-nav: 300;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{
  overflow-x:clip;
  font-family:var(--font-body);
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
svg{display:block}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--rule-2);color:var(--ink)}

/* Skip link — these are long documents and the nav is the only thing in front
   of the content, so a keyboard user gets a way past it. */
.skip{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-sticky-nav) + 1);
  padding:var(--space-sm) var(--space-md);background:var(--teal);color:var(--accent-ink);
  font-size:var(--text-sm);font-weight:600;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

/* ─── NAV · same structure and behaviour as index.html ─── */
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-sticky-nav);
  background:transparent;border-bottom:var(--rule-hair) solid transparent;
  transition:background-color var(--dur-short) var(--ease-out),
             border-color var(--dur-short) var(--ease-out)}
.nav.is-scrolled{background:color-mix(in oklch,var(--paper) 82%,transparent);
  backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--rule)}
.nav__inner{max-width:var(--page-max);margin:0 auto;height:var(--nav-h);
  padding-inline:var(--page-gutter);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-md)}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);
  letter-spacing:-0.02em;color:var(--teal);line-height:1;justify-self:start}
.wordmark b{color:var(--accent);font-weight:700}
.nav__center{justify-self:center;display:flex;align-items:center;gap:var(--space-lg)}
.nav__link{font-size:var(--text-sm);color:var(--dim);white-space:nowrap;line-height:1;
  padding-block:var(--space-xs);
  border-bottom:2px solid transparent;
  transition:color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out)}
.nav__link:hover{color:var(--ink);border-bottom-color:var(--accent)}
.nav__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.nav__right{justify-self:end;display:flex;align-items:center;gap:var(--space-sm)}

/* ─── BUTTONS · subset of index.html's set ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;line-height:1;
  white-space:nowrap;cursor:pointer;
  padding:var(--space-sm) var(--space-md);
  border:var(--rule-hair) solid var(--rule-2);border-radius:var(--radius-sm);
  background:transparent;color:var(--ink);
  transition:background-color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out),
             transform var(--dur-micro) var(--ease-out)}
.btn:hover{border-color:var(--teal);background:var(--paper-3)}
.btn:active{transform:translateY(1px)}
.btn--fill{background:var(--teal);border-color:var(--teal);color:var(--accent-ink)}
.btn--fill:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--quiet{border-color:transparent;color:var(--dim);padding-inline:var(--space-sm)}
.btn--quiet:hover{color:var(--ink);background:var(--paper-3);border-color:transparent}

main{padding-top:var(--nav-h)}

/* ─── DOCUMENT HEADER ─── */
.doc-head{max-width:var(--page-max);margin:0 auto;
  padding-inline:var(--page-gutter);
  padding-block:var(--space-2xl) var(--space-lg);
  border-bottom:var(--rule-hair) solid var(--rule)}
.doc-head__label{display:flex;align-items:center;gap:var(--space-sm);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-xs);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);line-height:1;
  margin-bottom:var(--space-lg)}
.doc-head__label::before{content:"";width:28px;height:2px;background:var(--accent);flex:none}
.doc-head__title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-0.03em;
  overflow-wrap:anywhere;min-width:0;color:var(--ink)}

/* "Last updated" — shown prominently, directly under the title, not buried
   at the foot of the document. */
.doc-head__updated{display:inline-flex;align-items:baseline;gap:var(--space-xs);
  margin-top:var(--space-lg);
  padding:var(--space-xs) var(--space-md);
  border:var(--rule-hair) solid var(--rule-2);border-radius:var(--radius-md);
  background:var(--paper-2);
  font-size:var(--text-sm);color:var(--ink-2)}
.doc-head__updated b{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

/* Cross-link to the sibling document. */
.doc-head__sibling{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--dim)}
.doc-head__sibling a{color:var(--teal);text-decoration:underline;
  text-decoration-color:var(--rule-2);text-underline-offset:0.18em;
  transition:text-decoration-color var(--dur-micro) var(--ease-out)}
.doc-head__sibling a:hover{text-decoration-color:var(--accent);color:var(--accent)}

/* ─── LAYOUT · optional sticky table of contents beside the prose ─── */
.doc-layout{max-width:var(--page-max);margin:0 auto;
  padding-inline:var(--page-gutter);
  padding-block:var(--space-xl) var(--space-3xl);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
.doc-layout--toc{grid-template-columns:minmax(0,1fr) 15rem}

.toc{position:sticky;top:calc(var(--nav-h) + var(--space-lg));align-self:start;
  max-height:calc(100vh - var(--nav-h) - var(--space-2xl));overflow-y:auto;
  grid-row:1;grid-column:2}
.toc__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--dim);
  margin-bottom:var(--space-md)}
.toc__list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2xs)}
.toc__link{display:block;font-size:var(--text-sm);color:var(--dim);line-height:1.4;
  padding:var(--space-2xs) var(--space-xs);
  border-left:2px solid var(--rule);
  transition:color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out)}
.toc__link:hover{color:var(--ink);border-left-color:var(--accent)}
.toc__num{display:inline-block;min-width:1.5em;color:var(--rule-2);font-weight:600}
.toc__link:hover .toc__num{color:var(--accent)}

/* ─── PROSE ─── */
.prose{grid-row:1;grid-column:1;max-width:var(--prose-max);min-width:0}
.prose > * + *{margin-top:var(--space-md)}

/* The preamble, above section 1. */
.prose__intro{color:var(--ink-2);font-size:var(--text-md)}
.prose__intro p + p{margin-top:var(--space-md)}

.prose section{scroll-margin-top:calc(var(--nav-h) + var(--space-md))}
.prose section + section{margin-top:var(--space-xl)}

/* Vertical rhythm INSIDE a section. These documents are almost entirely
   consecutive one-sentence paragraphs, so this rule carries most of the
   legibility: without it every section renders as one undifferentiated wall
   of text. It has to target children of <section>, not of .prose, because
   that is where the paragraphs actually live. */
.prose section > * + *{margin-top:var(--space-md)}
/* A sub-heading opens a new block: more air above it, less below. The two
   rules below share this file's highest prose specificity and come after the
   generic one, so source order decides — keep them here. */
.prose section > * + h3{margin-top:var(--space-xl)}
.prose section > h3 + *{margin-top:var(--space-xs)}

.prose h2{font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xl);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);
  margin-bottom:var(--space-md);
  padding-top:var(--space-md);
  border-top:var(--rule-hair) solid var(--rule);
  display:flex;gap:var(--space-sm);align-items:baseline;
  overflow-wrap:anywhere}
.prose h2 .sec-num{color:var(--accent);font-variant-numeric:tabular-nums;flex:none}

/* Sub-headings inside a section ("Clinical responsibility", "Refunds", …).
   These carry no number in the source document, so they carry none here. */
.prose h3{font-family:var(--font-display);font-weight:700;
  font-size:var(--text-base);line-height:1.3;letter-spacing:-0.01em;color:var(--ink)}

.prose p{color:var(--ink-2);overflow-wrap:break-word}

.prose ul,.prose ol{padding-left:var(--space-lg);
  display:flex;flex-direction:column;gap:var(--space-xs)}
.prose li{color:var(--ink-2);padding-left:var(--space-2xs)}
.prose ul li::marker{color:var(--accent)}
.prose ol li::marker{color:var(--accent);font-weight:600}

.prose a{color:var(--teal);text-decoration:underline;
  text-decoration-color:var(--rule-2);text-underline-offset:0.18em;
  transition:color var(--dur-micro) var(--ease-out),
             text-decoration-color var(--dur-micro) var(--ease-out)}
.prose a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* Contact block — an address, so it stays <address> and loses the italics. */
.prose address{font-style:normal;color:var(--ink-2);
  display:flex;flex-direction:column;gap:var(--space-2xs)}

/* ─── TABLE · the service-provider table in the Privacy Policy ─── */
/* Scrolls sideways on a narrow viewport so the PAGE never does. The wrapper
   carries tabindex/role in the markup so a keyboard user can scroll it; the
   focus ring below is what makes that reachable state visible. */
.table-wrap{margin-top:var(--space-md);overflow-x:auto;
  border:var(--rule-hair) solid var(--rule);border-radius:var(--radius-md)}
.table-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-sm);
  min-width:34rem}
.prose caption{text-align:left;padding:var(--space-sm) var(--space-md);
  font-size:var(--text-xs);color:var(--dim);letter-spacing:0.04em;
  text-transform:uppercase;font-weight:600;
  border-bottom:var(--rule-hair) solid var(--rule)}
.prose th,.prose td{text-align:left;padding:var(--space-sm) var(--space-md);
  border-bottom:var(--rule-hair) solid var(--rule);vertical-align:top}
.prose thead th{background:var(--paper-2);color:var(--ink);font-weight:600;
  font-size:var(--text-xs);letter-spacing:0.04em;text-transform:uppercase}
.prose tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.prose tbody td{color:var(--ink-2)}
.prose tbody tr:last-child th,.prose tbody tr:last-child td{border-bottom:none}

/* ─── BACK TO TOP ─── */
.to-top{display:inline-flex;align-items:center;gap:var(--space-xs);
  margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--dim);
  transition:color var(--dur-micro) var(--ease-out)}
.to-top:hover{color:var(--accent)}

/* ─── FOOTER · same Ft5 Statement treatment as index.html ─── */
.foot{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter);
  padding-block:var(--space-2xl) var(--space-xl);
  border-top:var(--rule-hair) solid var(--rule)}
.foot__line{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.15;letter-spacing:-0.025em;
  overflow-wrap:anywhere;min-width:0;max-width:28ch;color:var(--ink)}
.foot__meta{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  margin-top:var(--space-2xl);padding-top:var(--space-md);
  border-top:var(--rule-hair) solid var(--rule)}
.foot__links{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  margin-left:auto}
.foot__link{font-size:var(--text-sm);color:var(--dim);line-height:1;
  transition:color var(--dur-micro) var(--ease-out)}
.foot__link:hover{color:var(--accent)}
.foot__link[aria-current="page"]{color:var(--ink-2)}

/* ─── RESPONSIVE ─── */
@media (max-width:60rem){
  .nav__center{display:none}
  .doc-layout--toc{grid-template-columns:minmax(0,1fr)}
  /* The TOC stops being a sidebar and becomes a block above the prose —
     still useful on a phone, just not sticky (a sticky panel on a small
     viewport eats the reading area it exists to serve). */
  .toc{position:static;max-height:none;overflow:visible;
    grid-row:1;grid-column:1;
    padding:var(--space-md);
    border:var(--rule-hair) solid var(--rule);border-radius:var(--radius-md);
    background:var(--paper-2)}
  .prose{grid-row:2;grid-column:1}
  .doc-layout{gap:var(--space-xl)}
}
@media (max-width:40rem){
  .doc-head{padding-block:var(--space-xl) var(--space-md)}
  .doc-layout{padding-block:var(--space-lg) var(--space-2xl)}
  .prose table{min-width:28rem}
  .foot__meta{align-items:flex-start;flex-direction:column;gap:var(--space-lg)}
  .foot__links{margin-left:0}
}
@media (pointer:coarse){
  .btn{min-height:44px}
  /* Touch targets in the TOC and footer link rows. */
  .toc__link{padding-block:var(--space-xs)}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:150ms !important;scroll-behavior:auto !important}
  .btn:active{transform:none}
}

/* ─── PRINT · these will be printed and filed, so make that work ─── */
@media print{
  .nav,.toc,.to-top,.skip,.doc-head__sibling{display:none !important}
  main{padding-top:0}
  body{background:#fff;color:#000}
  .prose p,.prose li,.prose td{color:#000}
  .prose h2,.prose h3,.doc-head__title{color:#000}
  .doc-layout--toc{grid-template-columns:minmax(0,1fr)}
  .prose{max-width:none;grid-column:1;grid-row:1}
  .prose section{break-inside:auto}
  .prose h2,.prose h3{break-after:avoid}
  .table-wrap{overflow:visible}
}

/* ─── AUTH NAV · JS toggles these to flex, same as index.html ─── */
.nav-auth{display:none;align-items:center;gap:var(--space-sm)}
.nav-greeting{font-size:var(--text-sm);color:var(--dim);white-space:nowrap;line-height:1}
.nav-greeting b{color:var(--ink);font-weight:600}