/* birthinjuryanswers.org
   ---------------------------------------------------------------------------
   A reading site for someone frightened, tired, and on a phone.
   Self-hosted type, no external requests, WCAG 2.1 AA, light and dark.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- type */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- tokens */
:root {
  /* neutrals, warm */
  --paper:      #fbf9f5;
  --paper-2:    #f4f0e9;
  --paper-3:    #ebe5db;
  --ink:        #14201d;
  --ink-2:      #33413d;
  --ink-3:      #5d6b66;
  --line:       #ddd5c8;
  --line-2:     #cbc1b1;
  --surface:    #ffffff;

  /* brand: deep pine */
  --pine-900:   #0b2a26;
  --pine-800:   #10382f;
  --pine-700:   #16483d;
  --pine-600:   #1d5b4c;
  --pine-500:   #2a7561;
  --pine-100:   #dceae4;
  --pine-50:    #eef5f1;

  /* accent: warm clay, used sparingly */
  --clay-700:   #8a3f1d;
  --clay-600:   #a34c24;
  --clay-500:   #c25e2c;
  --clay-100:   #f8e6d9;
  --clay-50:    #fdf3ec;

  --footer-bg:  #234f45;
  --footer-ink: #dbe8e3;
  --footer-mut: #a9c4bc;

  --link:       #10554a;
  --link-hover: #0b3b34;
  --visited:    #4a3a72;
  --focus:      #b4530a;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;     --sp-7: 3rem;    --sp-8: 4rem;  --sp-9: 6rem;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 42, 38, .05), 0 1px 3px rgba(11, 42, 38, .04);
  --shadow-2: 0 2px 4px rgba(11, 42, 38, .05), 0 6px 16px rgba(11, 42, 38, .06);
  --shadow-3: 0 4px 8px rgba(11, 42, 38, .06), 0 14px 34px rgba(11, 42, 38, .09);

  --wrap: 76rem;
  --prose: 40rem;

  --mark-arc: #1d5b4c;
  --mark-seed: #d99a53;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif', Georgia, 'Times New Roman', serif;
}


/* Explicit dark choice, so the toggle wins in both directions. */

  :root[data-theme="dark"] { color-scheme: dark;
    --paper:    #1b2624;
    --paper-2:  #24312e;
    --paper-3:  #2e3c38;
    --ink:      #f1f5f2;
    --ink-2:    #ccd6d1;
    --ink-3:    #9daba5;
    --line:     #384744;
    --line-2:   #4a5b57;
    --surface:  #24312e;

    --pine-900: #cfe3da;
    --pine-800: #bcd8cd;
    --pine-700: #a6cbbe;
    --pine-600: #8dbcac;
    --pine-500: #6aa693;
    --pine-100: #1c302a;
    --pine-50:  #16261f;

    --clay-700: #f0b990;
    --clay-600: #e8a877;
    --clay-500: #d98f56;
    --clay-100: #33221a;
    --clay-50:  #241a14;

    --footer-bg:  #24312e;
    --footer-ink: #ccd6d1;
    --footer-mut: #9daba5;

    --link:       #86c9b5;
    --link-hover: #a9dbcb;
    --visited:    #bdaee6;
    --focus:      #f0a95c;

    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.25);
    --mark-arc: #6db39b;
    --mark-seed: #e9b06a;

    --shadow-3: 0 6px 14px rgba(0,0,0,.4), 0 18px 42px rgba(0,0,0,.3);
  }


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }
@media (min-width: 48rem) { .wrap { padding: 0 var(--sp-6); } }

.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine-800); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- links */
a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
    text-underline-offset: 0.18em; text-decoration-thickness: 1.5px;
    transition: color .12s ease, text-decoration-color .12s ease; }
a:visited { color: var(--visited); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  min-height: 4.25rem;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--ink); text-decoration: none; margin-right: auto;
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.brand:visited { color: var(--ink); }
.brand:hover { color: var(--pine-600); text-decoration: none; }
.brand-mark { width: 2.4rem; height: 2.4rem; flex: none; display: block; }
.brand-mark .mark-cradle { stroke: var(--mark-arc); }
.brand-mark .mark-seed { fill: var(--mark-seed); }
.brand:hover .mark-cradle { stroke: var(--pine-500); }
.brand-name { white-space: nowrap; }

.nav-toggle {
  font: inherit; font-size: .95rem; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .45rem .95rem; cursor: pointer; box-shadow: var(--shadow-1);
}
.nav-toggle:hover { border-color: var(--pine-500); color: var(--pine-600); }

.site-nav { display: none; width: 100%; flex-direction: column; padding-bottom: var(--sp-3); }
.site-nav.open { display: flex; }
.site-nav a {
  color: var(--ink-2); padding: .7rem .25rem; text-decoration: none;
  border-bottom: 1px solid var(--line); font-weight: 500;
}
.site-nav a:visited { color: var(--ink-2); }
.site-nav a:hover { color: var(--pine-600); }
.site-nav a[aria-current="page"] { color: var(--pine-700); font-weight: 650; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; flex-direction: row; width: auto; gap: .35rem; padding: 0; }
  .site-nav a {
    border: 0; padding: .45rem .7rem; border-radius: var(--r-pill);
    font-size: .97rem; transition: background .14s ease, color .14s ease;
  }
  .site-nav a:hover { background: var(--pine-50); color: var(--pine-700); }
  .site-nav a[aria-current="page"] { background: var(--pine-100); color: var(--pine-800); }
}

/* ---------------------------------------------------------------- layout */
main { padding: var(--sp-5) 0 var(--sp-8); }
.page { max-width: var(--prose); }
.page > section,
.page > .faq, .page > .related, .page > .sources,
.page > .terms, .page > .icd { margin-top: var(--sp-7); }

/* --------------------------------------------------------------- headings */
h1, h2, h3, h4 {
  font-family: var(--serif); color: var(--ink);
  letter-spacing: -0.021em; line-height: 1.18; font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.05rem); margin: var(--sp-4) 0 var(--sp-4); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem); margin: 0 0 var(--sp-4); }
h3 { font-size: clamp(1.13rem, 1.05rem + 0.4vw, 1.3rem); margin: var(--sp-6) 0 var(--sp-2); line-height: 1.3; }
h4 { font-family: var(--sans); font-size: 1rem; font-weight: 650; letter-spacing: 0;
     margin: var(--sp-5) 0 var(--sp-2); color: var(--ink-2); }

p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); }
li::marker { color: var(--pine-500); }
strong { font-weight: 650; color: var(--ink); }

.standfirst {
  font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.5; color: var(--ink-3); margin: 0 0 var(--sp-5); max-width: 34rem;
}

/* ------------------------------------------------------------ breadcrumbs */
.crumbs { font-size: .84rem; color: var(--ink-3); margin: var(--sp-4) 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; color: var(--line-2); margin-right: .4rem; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--pine-600); text-decoration: underline; }

/* ------------------------------------------------------------ answer box */
.answer {
  position: relative;
  background: linear-gradient(180deg, var(--pine-50), var(--surface) 90%);
  border: 1px solid var(--pine-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-2);
  margin: 0 0 var(--sp-6);
  box-shadow: var(--shadow-1);
}
.answer::before {
  content: ""; position: absolute; left: 0; top: var(--sp-5); bottom: var(--sp-5);
  width: 3px; border-radius: 0 3px 3px 0; background: var(--pine-500);
}
.answer p {
  font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .45vw, 1.26rem);
  line-height: 1.55; color: var(--ink);
}
.answer p:last-child { margin-bottom: var(--sp-4); }

/* ------------------------------------------------------------- key facts */
.key-facts {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-1);
}
.key-facts h2 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--pine-600);
  margin-bottom: var(--sp-4);
}
.key-facts dl { margin: 0; display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .key-facts dl { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); } }
.fact { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .fact:nth-child(-n+2) { border-top: 0; padding-top: 0; } }
@media (max-width: 39.99rem) { .fact:first-child { border-top: 0; padding-top: 0; } }
.fact dt {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin-bottom: .3rem;
}
.fact dd { margin: 0; font-size: .98rem; line-height: 1.55; }

/* -------------------------------------------------------------------- toc */
.toc {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
  background: var(--paper-2);
}
.toc h2 {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.toc ol { margin: 0; padding-left: 1.3em; font-size: .95rem; columns: 1; }
@media (min-width: 40rem) { .toc ol { columns: 2; column-gap: var(--sp-6); } }
.toc li { margin-bottom: .35rem; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- inline detail */
.cite-wrap { white-space: nowrap; }
.cite { text-decoration: none; font-weight: 600; color: var(--pine-600); }
.cite sup { font-size: .68em; padding: 0 .1em; }
.cite:hover { color: var(--clay-600); }
a.term {
  text-decoration: none;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--pine-500) 60%, transparent);
  color: inherit;
}
a.term:visited { color: inherit; }
a.term:hover { border-bottom-style: solid; color: var(--pine-600); }

.callout {
  position: relative;
  background: var(--clay-50); border: 1px solid var(--clay-100);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5) var(--sp-1) 3.1rem;
  margin: var(--sp-5) 0;
}
.callout::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.25rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--clay-500);
  -webkit-mask: no-repeat center / 1.1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.2 1.2 0 110 2.4A1.2 1.2 0 0112 7zm1.2 11h-2.4v-7h2.4z'/%3E%3C/svg%3E");
  mask: no-repeat center / 1.1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.2 1.2 0 110 2.4A1.2 1.2 0 0112 7zm1.2 11h-2.4v-7h2.4z'/%3E%3C/svg%3E");
}
.callout p { margin-bottom: var(--sp-3); }

/* ------------------------------------------------------------------ table */
.table-wrap {
  overflow-x: auto; margin: var(--sp-5) 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--paper-2); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
tbody th { font-weight: 650; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper-2); }

/* ------------------------------------------------------- faq, terms, srcs */
.faq h2, .terms h2, .sources h2, .related h2, .icd h2 { margin-bottom: var(--sp-4); }
.qa { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.qa:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.qa h3 { margin-top: 0; font-size: 1.12rem; }

.term-list { margin: 0; }
.gterm { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.gterm:first-child { border-top: 0; padding-top: 0; }
.gterm dt { font-weight: 650; font-family: var(--serif); font-size: 1.06rem; }
.gterm dd { margin: .2rem 0 0; color: var(--ink-2); font-size: .97rem; }
.more-terms { margin-top: var(--sp-4); font-size: .95rem; }

.source-list { font-size: .88rem; color: var(--ink-3); padding-left: 1.4em; }
.source-list li { margin-bottom: var(--sp-3); }
.src-pub { color: var(--ink-2); font-weight: 600; }
.src-checked { display: block; font-size: .92em; opacity: .8; }
cite { font-style: italic; }

.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { border-bottom: 1px solid var(--line); }
.related-list li:last-child { border-bottom: 0; }
.related-list a {
  display: block; padding: var(--sp-3) 0; text-decoration: none; font-weight: 550;
}
.related-list a:hover { text-decoration: underline; }
.rel-note { display: block; color: var(--ink-3); font-size: .9rem; font-weight: 400; }

/* -------------------------------------------------------- scope and stamp */
.scope {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-7); font-size: .92rem; color: var(--ink-3);
}
.scope p { margin: 0; }
.page-stamp {
  margin-top: var(--sp-5); font-size: .86rem; color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: var(--sp-4);
}
.page-stamp p { margin-bottom: var(--sp-2); }
.review-line { color: var(--clay-700); }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin: var(--sp-5) 0 var(--sp-6); padding: 0; list-style: none; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.card h3 {
  margin: 0 0 var(--sp-2); font-size: 1.08rem; line-height: 1.3;
}
.card h3 a { text-decoration: none; color: var(--pine-700); }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.card:hover h3 a { color: var(--pine-600); }
.card p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-3); }

.state-grid { gap: var(--sp-3); }
.state-grid .card { padding: var(--sp-3) var(--sp-4); }
.state-grid .card h3 { font-size: .98rem; margin: 0; }
.state-grid .card p { font-size: .8rem; margin-top: .15rem; }
@media (min-width: 40rem) { .state-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .state-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- buttons */
.lead-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-6); }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pine-600); color: #fff; text-decoration: none;
  padding: .78rem 1.35rem; border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  border: 1px solid var(--pine-600); cursor: pointer; line-height: 1.2;
  box-shadow: var(--shadow-1);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
:root[data-theme="dark"] .btn { color: var(--pine-900); }
.btn:visited { color: #fff; }
:root[data-theme="dark"] .btn:visited { color: var(--pine-900); }
.btn:hover { background: var(--pine-500); border-color: var(--pine-500); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn.secondary {
  background: var(--surface); color: var(--pine-700); border-color: var(--line-2); box-shadow: none;
}
.btn.secondary:visited { color: var(--pine-700); }
.btn.secondary:hover { background: var(--pine-50); border-color: var(--pine-500); color: var(--pine-800); }

/* ------------------------------------------------------------------ tools */
.tool { max-width: 46rem; }
.tool fieldset {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-5); margin: 0 0 var(--sp-5);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.tool legend {
  font-family: var(--sans); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--pine-600);
  padding: 0 .5rem; margin-left: -.5rem;
}
.tool label { display: block; font-weight: 600; font-size: .95rem; margin: var(--sp-4) 0 var(--sp-2); color: var(--ink-2); }
.tool input[type="text"], .tool input[type="date"], .tool input[type="time"],
.tool input[type="number"], .tool select, .tool textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .65rem .8rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.tool textarea { min-height: 5.5rem; resize: vertical; line-height: 1.55; }
.tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible {
  border-color: var(--pine-500); box-shadow: 0 0 0 3px var(--pine-100); outline: none;
}
.tool select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6b66' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .7rem;
  padding-right: 2.6rem;
}
.tool .hint { font-size: .87rem; color: var(--ink-3); margin: .35rem 0 0; }
.tool .check { display: flex; gap: .6rem; align-items: flex-start; margin: .55rem 0; font-weight: 400; color: var(--ink); }
.tool .check input { margin-top: .38rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--pine-600); }

.privacy-badge {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--pine-50); border: 1px solid var(--pine-100);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-6); font-size: .93rem; color: var(--ink-2);
}
.privacy-badge::before {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1rem;
  background: var(--pine-600);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5zm0 10.5h7c-.5 4.2-3.2 8-7 9.2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5zm0 10.5h7c-.5 4.2-3.2 8-7 9.2z'/%3E%3C/svg%3E");
}
.privacy-badge p { margin: 0; }

.output {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.output:empty { display: none; }
.output h3:first-child { margin-top: 0; }
.result-strong { font-weight: 600; color: var(--pine-700); }
.letter {
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.6; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); overflow-x: auto; color: var(--ink-2);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--sp-3) 0 var(--sp-4); }
.chip { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .25rem .75rem; font-size: .84rem; }
[hidden] { display: none !important; }
.bar { height: .6rem; background: var(--paper-3); border-radius: var(--r-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--pine-500); }

.save-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-4) 0; }
.save-status { font-size: .88rem; color: var(--ink-3); }

.tl-row, .th-row {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface);
}
.tl-row label, .th-row label { margin-top: var(--sp-2); }
.tl-row .btn, .th-row .btn { margin-top: var(--sp-3); font-size: .85rem; padding: .4rem .9rem; }
@media (min-width: 48rem) {
  .th-row { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: var(--sp-3); align-items: end; }
  .th-row .btn { margin-top: 0; }
}
#tl-prompts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
#tl-prompts li { margin: 0; }
#tl-prompts .btn { font-size: .84rem; padding: .4rem .85rem; text-align: left; font-weight: 500; }

/* --------------------------------------------------------------- diagrams */
figure.diagram { margin: var(--sp-6) 0; }
figure.diagram svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
figure.diagram figcaption { font-size: .89rem; color: var(--ink-3); margin-top: var(--sp-3); line-height: 1.55; }

/* ------------------------------------------------------------- link lists */
.linklist { columns: 1; padding-left: 1.2em; }
@media (min-width: 42rem) { .linklist { columns: 2; column-gap: var(--sp-6); } }
@media (min-width: 62rem) { .linklist { columns: 3; } }
.linklist li { break-inside: avoid; }

/* -------------------------------------------------------- printable packs */
.write-line { display: block; border-bottom: 1px solid var(--line-2); min-height: 1.7rem; margin: .4rem 0; }
.write-box { display: block; border: 1px solid var(--line-2); border-radius: var(--r-sm); min-height: 4.5rem; margin: var(--sp-2) 0; }
.print-only { display: none; }
.tickbox { list-style: none; padding-left: 0; }
.tickbox li { position: relative; padding-left: 2rem; margin-bottom: var(--sp-3); }
.tickbox li::before {
  content: ""; position: absolute; left: 0; top: .32rem;
  width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface);
}

/* ---------------------------------------------------------- index layout */
body.layout-index .page { max-width: none; }
body.layout-index .page > h1,
body.layout-index .page > .standfirst,
body.layout-index .page > .answer,
body.layout-index .page > .toc,
body.layout-index .page > .faq,
body.layout-index .page > .terms,
body.layout-index .page > .sources,
body.layout-index .page > .related,
body.layout-index .page > .scope,
body.layout-index .page > .page-stamp { max-width: var(--prose); }
body.layout-index .page > .key-facts { max-width: 56rem; }
body.layout-index .page > section > p,
body.layout-index .page > section > ul:not(.grid):not(.linklist):not(.tickbox),
body.layout-index .page > section > ol,
body.layout-index .page > section > h2,
body.layout-index .page > section > h3,
body.layout-index .page > section > .callout,
body.layout-index .page > section > .table-wrap { max-width: var(--prose); }
@media (min-width: 62rem) {
  body.layout-index .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------- hero */
.hero { padding: var(--sp-6) 0 var(--sp-5); }
.hero h1 { margin-top: 0; max-width: 16ch; }
.hero .standfirst { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); color: var(--ink-2); max-width: 32rem; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--pine-600); background: var(--pine-50); border: 1px solid var(--pine-100);
  padding: .35rem .85rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}

/* ----------------------------------------------------------------- footer */
.site-foot {
  background: var(--footer-bg); color: var(--footer-ink);
  padding: var(--sp-7) 0 var(--sp-6); margin-top: var(--sp-8); font-size: .93rem;
}
:root[data-theme="dark"] .site-foot { border-top: 1px solid var(--line); }
.site-foot a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.site-foot a:visited { color: #fff; }
.site-foot a:hover { text-decoration-color: currentColor; }
:root[data-theme="dark"] .site-foot a,
:root[data-theme="dark"] .site-foot a:visited { color: var(--pine-700); }
.foot-lead {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.45;
  color: #fff; max-width: 34rem; margin-bottom: var(--sp-5);
}
:root[data-theme="dark"] .foot-lead { color: var(--ink); }
.site-foot nav ul {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(255,255,255,.18);
}
:root[data-theme="dark"] .site-foot nav ul { border-bottom-color: var(--line); }
.site-foot nav li { margin: 0; }
.foot-legal { color: var(--footer-mut); max-width: 48rem; font-size: .87rem; line-height: 1.6; }
.foot-copy { color: var(--footer-mut); font-size: .84rem; margin: var(--sp-4) 0 0; opacity: .82; }

/* ------------------------------------------------------------ hero media */
.hero-media { margin: 0 0 var(--sp-6); }
.hero-media img {
  display: block; width: 100%; height: auto; border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); background: var(--paper-2);
  aspect-ratio: 1600 / 914; object-fit: cover;
}
body.layout-index .page > .hero-media { max-width: none; }

.section-media { margin: var(--sp-6) 0; }
.section-media img {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); aspect-ratio: 1600 / 914; object-fit: cover;
}
.section-media figcaption { font-size: .87rem; color: var(--ink-3); margin-top: var(--sp-2); }

/* ------------------------------------------------------------------ gate */
.gate-teaser {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0 var(--sp-4);
  background: var(--paper-2);
}
.gate-teaser-label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); margin: 0 0 var(--sp-2);
}
.gate-teaser ul { margin: 0; padding-left: 1.2em; columns: 1; }
@media (min-width: 40rem) { .gate-teaser ul { columns: 2; column-gap: var(--sp-6); } }
.gate-teaser li { color: var(--ink-2); font-size: .95rem; break-inside: avoid; }

.gate {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--pine-500) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--pine-50), var(--surface));
  border: 1px solid var(--pine-100);
  box-shadow: var(--shadow-2);
  margin: var(--sp-5) 0 var(--sp-7);
}
.gate-inner { padding: var(--sp-6) var(--sp-5); }
@media (min-width: 40rem) { .gate-inner { padding: var(--sp-7) var(--sp-6); } }
.gate-eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pine-600);
  background: var(--surface); border: 1px solid var(--pine-100);
  padding: .3rem .8rem; border-radius: var(--r-pill); margin: 0 0 var(--sp-3);
}
.gate h2 { margin: 0 0 var(--sp-3); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); }
.gate-blurb { color: var(--ink-2); max-width: 34rem; margin-bottom: var(--sp-5); }

.gate-form { display: grid; gap: var(--sp-4); }
.gate-row { display: grid; gap: var(--sp-4); }
@media (min-width: 34rem) { .gate-row { grid-template-columns: 1fr 1fr; } }
.gate-field label {
  display: block; font-size: .86rem; font-weight: 650; color: var(--ink-2);
  margin-bottom: .35rem;
}
.gate-field .req {
  font-weight: 500; font-size: .78rem; color: var(--clay-600);
  text-transform: uppercase; letter-spacing: .06em; margin-left: .35rem;
}
.gate-field input, .gate-field select {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.gate-field input:focus-visible, .gate-field select:focus-visible {
  border-color: var(--pine-500); box-shadow: 0 0 0 3px var(--pine-100); outline: none;
}
.gate-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6b66' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .7rem;
  padding-right: 2.6rem;
}
.gate-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.gate-check input { margin-top: .3rem; flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--pine-600); }
.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gate-error {
  margin: 0; color: var(--clay-700); font-size: .93rem; font-weight: 600;
  background: var(--clay-50); border: 1px solid var(--clay-100);
  border-radius: var(--r-md); padding: .6rem .9rem;
}
.gate-submit { justify-self: start; font-size: 1.02rem; padding: .85rem 1.6rem; }
.gate-fine { font-size: .84rem; color: var(--ink-3); margin: 0; max-width: 36rem; }

/* ------------------------------------------------------------ split hero */
.hero-split { margin-bottom: var(--sp-6); }
.hero-split .hero-copy > h1 { margin-top: 0; }
.hero-split .hero-media { margin: var(--sp-5) 0 0; }
.hero-split .hero-media img { aspect-ratio: 4 / 3; }
.hero-split .lead-actions { margin-bottom: 0; }
@media (min-width: 62rem) {
  .hero-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-7); align-items: center;
    margin: var(--sp-5) 0 var(--sp-8);
  }
  .hero-split .hero-media { margin: 0; }
  .hero-split .hero-media img { aspect-ratio: 5 / 4; }
  .hero-split .hero-copy > h1 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem); }
}
body.layout-index .page > .hero-split { max-width: none; }

.gated-region { animation: gate-in .35s ease both; }
@keyframes gate-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gated-region { animation: none; } }

/* ----------------------------------------------------------- theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; box-shadow: var(--shadow-1); padding: 0;
  transition: border-color .14s ease, color .14s ease;
}
.theme-toggle:hover { border-color: var(--pine-500); color: var(--pine-600); }
.theme-toggle-icon {
  width: 1.1rem; height: 1.1rem; background: currentColor; display: block;
  -webkit-mask: no-repeat center / contain var(--icon); mask: no-repeat center / contain var(--icon);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.3 2a9 9 0 108.4 12.1A7.5 7.5 0 0112.3 2z'/%3E%3C/svg%3E");
}
.theme-toggle[data-mode="dark"] .theme-toggle-icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18a6 6 0 110-12 6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zM11 1h2v3h-2zm0 19h2v3h-2zM3.5 4.9 4.9 3.5 7 5.6 5.6 7zM17 18.4l1.4-1.4 2.1 2.1-1.4 1.4zM20 11h3v2h-3zM1 11h3v2H1zm18.5-6.1L21 6.3 18.9 8.4 17.5 7zM5.6 17 7 18.4 4.9 20.5 3.5 19.1z'/%3E%3C/svg%3E");
}