:root{
    --bg: #F6F3EC;
    --bg-alt: #EFEAE0;
    --paper: #FFFFFF;
    --ink: #14213D;
    --ink-soft: #4B5670;
    --ink-faint: #8A8F9C;
    --rule: #D9D2C2;
    --rule-strong: #B9AF98;
    --approved: #1F6B3E;
    --approved-bg: #E3F0E6;
    --review: #B8721A;
    --review-bg: #F7E8D0;
    --restricted: #A63A25;
    --restricted-bg: #F5DFD8;
    --ink-deep: #0E1930;
    --on-ink: #F6F3EC;
    --on-ink-soft: #AEB8CE;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: var(--ink); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  .wrap{ max-width: 760px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 640px){
    .wrap{
      padding-left: max(22px, env(safe-area-inset-left));
      padding-right: max(22px, env(safe-area-inset-right));
    }
  }

  /* ---------- Masthead ---------- */
  header.masthead{
    border-bottom: 1px solid var(--rule-strong);
    padding: 28px 0 18px;
  }
  .masthead-row{
    display:flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  }
  .wordmark{
    display: inline-block;
    text-decoration: none;
    line-height: 0;
  }
  .wordmark svg{ max-width: 100%; height: auto; }
  .tagline{
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 4px;
    max-width: 40ch;
  }
  .verified-badge{
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    border: 1px solid var(--rule-strong);
    padding: 6px 10px;
    white-space: nowrap;
  }

  /* ---------- Hero ---------- */
  .hero{ padding-top: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
  .eyebrow{
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--review);
    margin-bottom: 14px;
  }
  h1{
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(30px, 4.4vw, 42px);
    line-height: 1.15;
    margin: 0 0 18px;
    max-width: 20ch;
  }
  .hero p{
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0;
  }
  .hero-grid{ display: flex; gap: 32px; align-items: flex-start; }
  .hero-text{ flex: 1 1 auto; min-width: 0; }
  .hero-art{ flex: 0 0 140px; padding-top: 8px; }
  .hero-art svg{ width: 100%; height: auto; display: block; }
  @media (max-width: 820px){ .hero-art{ display: none; } }

  .hero-creds{
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
    color: var(--ink-faint); margin-top: 26px; padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 480px){
    .hero-creds{ font-size: 11px; }
  }

  section{ padding-top: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
  section:last-of-type{ border-bottom: none; }
  h2{
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
  }
  .section-note{ color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; max-width: 58ch; }

  /* ---------- Docket (signature element) ---------- */
  .docket{ list-style: none; margin: 0; padding: 0; position: relative; }
  .docket::before{
    content:"";
    position:absolute; left: 108px; top: 6px; bottom: 6px; width: 1px;
    background: var(--rule-strong);
  }
  .docket-entry{
    position: relative;
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 24px;
    padding: 0 0 26px;
    opacity: 0; transform: translateY(8px);
    animation: rise 0.5s ease forwards;
  }
  .docket-entry:last-child{ padding-bottom: 0; }
  @keyframes rise{ to{ opacity:1; transform: translateY(0); } }
  .docket-date{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    text-align: right;
    padding-top: 2px;
  }
  .docket-body{ padding-left: 22px; position: relative; }
  .docket-body::before{
    content:"";
    position:absolute; left: -25px; top: 6px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink); border: 2px solid var(--bg);
    outline: 1px solid var(--rule-strong);
  }
  .docket-body strong{ display:block; font-size: 15.5px; margin-bottom: 3px; }
  .docket-body span{ font-size: 14.5px; color: var(--ink-soft); }

  /* ---------- Ledger table ---------- */
  .vote-viz{ margin: 4px 0 32px; }
  .vote-viz svg{ display: block; }
  .vote-caption{
    margin: 10px 0 0; font-size: 13px; color: var(--ink-soft);
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  }
  .vote-dot{ display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 2px; }
  .vote-dot.rec{ background: var(--review); }
  .vote-dot.no{ background: var(--restricted); }

  table.ledger{ width: 100%; border-collapse: collapse; font-size: 15px; }
  table.ledger caption{ text-align:left; font-size: 13px; color: var(--ink-faint); margin-bottom: 10px; }
  table.ledger th{
    text-align:left; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-soft); padding: 0 10px 10px 0; border-bottom: 1px solid var(--rule-strong);
  }
  table.ledger td{ padding: 13px 10px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  table.ledger tr:last-child td{ border-bottom: none; }
  .compound{ font-weight: 600; }
  .pill{
    display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 4px 10px 4px 8px; border-radius: 20px; white-space: nowrap;
  }
  .pill::before{
    content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background: currentColor; flex-shrink:0;
  }
  .pill.approved{ background: var(--approved-bg); color: var(--approved); }
  .pill.review{ background: var(--review-bg); color: var(--review); }
  .pill.restricted{ background: var(--restricted-bg); color: var(--restricted); }

  @media (max-width: 620px){
    table.ledger thead{ display:none; }
    table.ledger, table.ledger tbody, table.ledger tr, table.ledger td{ display:block; width:100%; }
    table.ledger caption{ display:block; width:100%; box-sizing:border-box; }
    table.ledger tr{ padding: 14px 0; border-bottom: 1px solid var(--rule); }
    table.ledger td{ border-bottom: none; padding: 3px 0; }
    table.ledger td::before{
      content: attr(data-label); display:block; font-family: var(--mono); font-size: 10.5px;
      text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 2px;
    }
  }

  /* ---------- Callout ---------- */
  .callout{
    background: var(--paper); border: 1px solid var(--rule-strong); border-left: 3px solid var(--ink);
    padding: 22px 24px; margin-top: 8px;
  }
  .callout p{ margin: 0 0 10px; font-size: 15.5px; }
  .callout p:last-child{ margin-bottom: 0; }

  /* ---------- Channels ---------- */
  .channel{ display:grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; }
  .channel:last-child{ border-bottom:none; }
  .channel-num{ font-family: var(--mono); font-size: 13px; color: var(--ink-faint); padding-top: 2px; }
  .channel h3{ font-size: 16.5px; margin: 0 0 5px; font-weight: 600; }
  .channel p{ margin:0; color: var(--ink-soft); font-size: 15px; }

  /* ---------- Asides ---------- */
  .aside{ background: var(--bg-alt); padding: 20px 24px; font-size: 15px; color: var(--ink-soft); }
  .reviewer-badge{
    background: var(--approved-bg); border-left: 3px solid var(--approved);
    padding: 14px 18px; margin-bottom: 24px; font-size: 14px; color: var(--ink-soft);
  }
  .reviewer-badge strong{ color: var(--ink); }
  .aside strong{ color: var(--ink); }

  /* ---------- CTA / form ---------- */
  .cta-section{
    background: var(--ink-deep);
    padding-top: 56px; padding-bottom: 56px;
  }
  .cta-section h2{ margin-bottom: 6px; color: var(--on-ink); }
  .cta-section .section-note{ margin-bottom: 24px; color: var(--on-ink-soft); }
  .cta-section label{ color: var(--on-ink-soft); }
  .cta-section input, .cta-section select{ border: 1px solid transparent; }
  .cta-section button{ background: var(--review); color: var(--ink-deep); }
  .cta-section button:hover{ background: #CE8A2E; }
  .cta-section .form-note{ color: var(--on-ink-soft); }
  .cta-section .form-status.err{ color: #E8917A; }
  form{ display:grid; gap: 14px; }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
  label{ font-size: 12.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); display:block; margin-bottom: 5px; }
  input, select{
    width:100%; font-family: var(--sans); font-size: 15px; padding: 11px 12px;
    border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink);
  }
  button{
    font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
    background: var(--ink); color: var(--bg); border: none; padding: 13px 20px; cursor: pointer;
    justify-self: start; margin-top: 4px;
  }
  button:hover{ background: var(--ink-soft); }
  .form-note{ font-size: 13.5px; color: var(--ink-soft); margin: 0; font-weight: 500; }
  .form-status{ font-size: 14.5px; margin-top: 6px; min-height: 1.2em; }
  .inline-cta{ margin: 24px 0 0; }
  .inline-cta a{
    display: block;
    font-size: 15.5px; font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: var(--approved-bg);
    border: 1px solid var(--approved);
    border-left: 3px solid var(--approved);
    padding: 16px 20px;
  }
  .inline-cta a:hover{ background: #dde8d9; }
  .form-status.ok{ color: var(--approved); }
  .form-status.err{ color: var(--restricted); }
  .form-success{
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--approved);
    background: var(--approved-bg);
  }
  .form-success-check{
    width: 52px; height: 52px; margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--approved); color: #fff;
    font-size: 28px; line-height: 52px;
  }
  .form-success h3{
    font-family: var(--serif); font-size: 22px; font-weight: 600;
    color: var(--approved); margin: 0 0 8px;
  }
  .form-success p{
    font-size: 15.5px; color: var(--ink-soft); margin: 0 auto; max-width: 42ch;
  }

  /* ---------- Footer ---------- */
  footer{ padding: 40px 0 60px; }
  .disclaimer{ font-size: 13px; color: var(--ink-faint); max-width: 62ch; line-height: 1.65; margin: 0 0 22px; }
  .footer-meta{ font-size: 13px; color: var(--ink-soft); display:flex; justify-content: space-between; flex-wrap:wrap; gap: 10px; border-top: 1px solid var(--rule); padding-top: 18px; }
  .footer-meta a{ text-decoration: none; border-bottom: 1px solid var(--rule-strong); }

  /* ================= v9 additions ================= */
  [hidden]{ display: none !important; }

  /* three routes */
  .chan{
    background: var(--paper); border: 1px solid var(--rule-strong); border-left-width: 4px;
    padding: 20px 22px; margin-bottom: 16px;
  }
  .chan.ok{ border-left-color: var(--approved); }
  .chan.gray{ border-left-color: var(--review); }
  .chan.no{ border-left-color: var(--restricted); }
  .chan-head{ display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
  .chan-head h3{ margin: 0; font-size: 17px; font-weight: 600; }
  .chan p{ margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
  .chan p:last-child{ margin-bottom: 0; }
  .chan a{ font-weight: 600; }

  /* studied-for table */
  table.ledger td.studied{ font-size: 14.5px; color: var(--ink-soft); max-width: 34ch; }
  table.ledger td.vote{ font-size: 14px; white-space: nowrap; }
  @media (max-width: 620px){ table.ledger td.vote{ white-space: normal; } table.ledger td.studied{ max-width: none; } }

  /* next steps */
  .steps{ counter-reset: s; list-style: none; margin: 0 0 22px; padding: 0; }
  .steps li{ counter-increment: s; position: relative; padding: 0 0 20px 46px; }
  .steps li::before{
    content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
    border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--bg);
    font-family: var(--mono); font-size: 12px; line-height: 28px; text-align: center; color: var(--ink-soft);
  }
  .steps strong{ display: block; font-size: 15.5px; margin-bottom: 2px; }
  .steps span{ font-size: 14.5px; color: var(--ink-soft); }
  .timing-note{ font-size: 14.5px; color: var(--ink-soft); background: var(--bg-alt); padding: 16px 20px; margin: 4px 0 0; }
  .timing-note strong{ color: var(--ink); }

  /* provider vetting + cards */
  .checklist{ list-style: none; margin: 0 0 28px; padding: 0; }
  .checklist li{ position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-soft); }
  .checklist li:last-child{ border-bottom: none; }
  .checklist li::before{ content: ""; position: absolute; left: 2px; top: 17px; width: 11px; height: 11px; border: 1.5px solid var(--approved); border-radius: 2px; }
  .checklist strong{ color: var(--ink); }
  .disclosure{ background: var(--bg-alt); border-left: 3px solid var(--rule-strong); padding: 14px 18px; font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
  .provider{ background: var(--paper); border: 1px solid var(--rule-strong); padding: 20px 22px; margin-bottom: 14px; }
  .provider-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; }
  .provider h3{ margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
  .provider-tag{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
  .provider p{ margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
  .provider .ask{ font-size: 14px; }
  .provider .ask strong{ color: var(--ink); }
  a.provider-link{
    display: inline-block; margin-top: 4px; background: var(--ink); color: var(--bg); text-decoration: none;
    font-weight: 600; font-size: 15px; padding: 12px 18px;
  }
  a.provider-link:hover{ background: var(--ink-soft); }

  /* alerts form (dark band reuses .cta-section) */
  .hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* sources */
  .sources{ list-style: none; margin: 0; padding: 0; }
  .sources li{ padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-soft); }
  .sources li:last-child{ border-bottom: none; }
  .sources a{ color: var(--ink); text-underline-offset: 3px; }

  /* v10: top-of-page CTA + route comparison */
  .hero-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
  a.btn-primary{ display: inline-block; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 13px 20px; }
  a.btn-primary:hover{ background: var(--ink-soft); }
  a.hero-link{ font-size: 15px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
  .compare-title{ font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 36px 0 12px; }
  table.ledger.compare td{ font-size: 14px; color: var(--ink-soft); padding-right: 12px; }
  table.ledger.compare td.compound{ color: var(--ink); font-size: 14px; }
  @media (min-width: 621px){ table.ledger.compare td.compound{ width: 17%; } }
  @media (max-width: 620px){
    table.ledger.compare td.compound{ width: 100%; font-size: 16px; padding-top: 8px; }
    table.ledger.compare td.compound::before{ display: none; }
  }
  table.ledger.compare th{ padding-right: 12px; }
  .mini{ display: inline-block; margin-top: 5px; font-size: 13px; color: var(--ink-faint); }

/* ================= v11: multi-page additions ================= */
.sitenav{ border-bottom: 1px solid var(--rule); background: var(--bg); }
.sitenav ul{ list-style: none; margin: 0 auto; padding: 10px 32px; max-width: 760px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 640px){ .sitenav ul{ padding-left: 22px; padding-right: 22px; gap: 4px 14px; } }
.sitenav a{ font-size: 13.5px; color: var(--ink-soft); text-decoration: none; padding: 4px 0; display: inline-block; border-bottom: 2px solid transparent; }
.sitenav a:hover{ color: var(--ink); }
.sitenav a[aria-current="page"]{ color: var(--ink); font-weight: 600; border-bottom-color: var(--review); }

.crumbs{ font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 18px; }
.crumbs a{ color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }

.answer-box{ background: var(--paper); border: 1px solid var(--rule-strong); border-left: 4px solid var(--review); padding: 20px 22px; margin: 26px 0 0; }
.answer-box.no{ border-left-color: var(--restricted); }
.answer-box.ok{ border-left-color: var(--approved); }
.answer-box .label{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 8px; }
.answer-box p{ margin: 0 0 10px; font-size: 16px; color: var(--ink); max-width: none; }
.answer-box p:last-child{ margin-bottom: 0; }
.hero .answer-box p{ font-size: 16px; color: var(--ink); }

.prose p{ font-size: 16px; margin: 0 0 16px; max-width: 64ch; }
.prose p:last-child{ margin-bottom: 0; }
.prose h3{ font-size: 17px; font-weight: 600; margin: 26px 0 8px; }
.prose ul{ margin: 0 0 16px; padding-left: 20px; max-width: 62ch; }
.prose li{ font-size: 16px; margin-bottom: 8px; }

.hero .latest{ background: var(--review-bg); border: 1px solid #E3C58F; padding: 14px 18px; margin: 22px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.hero .latest a{ font-weight: 600; }
.hero .latest strong{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--review); display: block; margin-bottom: 4px; }

.related{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px){ .related{ grid-template-columns: 1fr; } }
.related a{ display: block; background: var(--paper); border: 1px solid var(--rule-strong); padding: 14px 16px; text-decoration: none; height: 100%; }
.related a:hover{ border-color: var(--ink-soft); }
.related strong{ display: block; font-size: 15px; margin-bottom: 3px; }
.related span{ font-size: 13.5px; color: var(--ink-soft); }

.topic-links{ list-style: none; margin: 0; padding: 0; }
.topic-links li{ border-bottom: 1px solid var(--rule); }
.topic-links li:last-child{ border-bottom: none; }
.topic-links a{ display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 16px 0; text-decoration: none; }
.topic-links strong{ font-size: 16px; }
.topic-links span.d{ display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.topic-links .arrow{ font-size: 18px; color: var(--ink-faint); }
.channel h3 a{ text-decoration: none; }
.channel .more{ display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; }

.byline{ font-size: 13.5px; color: var(--ink-faint); margin-top: 22px; }

.hero > p:not(.crumbs):not(.latest){ margin-top: 0; }
.prose .inline-cta{ max-width: none; }

/* v11 fixes: .wrap's padding shorthand was zeroing section spacing; .hero p was overriding small labels */
section.wrap{ padding-top: 48px; padding-bottom: 48px; }
section.wrap.hero{ padding-top: 52px; padding-bottom: 40px; }
section.wrap + section.wrap#sources{ padding-bottom: 56px; }
.hero .crumbs{ font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 14px; }
.hero .answer-box .label{ font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin: 0 0 8px; }
.hero .hero-creds{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); line-height: 1.6; }
@media (max-width: 480px){ .hero .hero-creds{ font-size: 11px; } }