/* Static site styles. Light default; [data-theme="dark"] overrides. Layout
   echoes a proven masthead/nav structure; identity is distinct (evidentiary
   serif, steel + ochre provenance palette, data-mono figures). */
:root {
  --ink:#16181d; --paper:#ffffff; --panel:#f6f5f2; --panel2:#efeee9; --rule:#d8dae0;
  --muted:#5b6270; --steel:#2f5d86; --ochre:#9a6b12; --accent:#2f5d86; --link:#2f5d86;
  --maxw:960px; --maxw-wide:1160px; --radius:9px;
  --theme-tr:.28s;   /* one shared duration so every themed color eases together on flip */
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
}
[data-theme="dark"] {
  --ink:#e8e9ec; --paper:#14161a; --panel:#1c1f25; --panel2:#232730; --rule:#2c3038;
  --muted:#9aa1af; --steel:#7fb0dd; --ochre:#d9ad5c; --accent:#7fb0dd; --link:#8fc0ea;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
}
* { box-sizing:border-box; }
/* Coordinated theme flip: every element eases its themed colors (background,
   text, border, svg fill, shadow) over one shared duration, so light/dark switches
   as a single motion instead of some parts snapping and others fading. Motion-only
   properties (transform/filter) stay on their own faster hover timings below. */
*, *::before, *::after {
  transition: background-color var(--theme-tr) ease, color var(--theme-tr) ease,
              border-color var(--theme-tr) ease, fill var(--theme-tr) ease,
              box-shadow var(--theme-tr) ease;
}
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body { margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 Georgia,"Times New Roman",serif; -webkit-font-smoothing:antialiased; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.22; font-weight:700; }
h1 { font-size:2.15rem; margin:.15em 0 .35em; letter-spacing:-.01em; }
h2 { font-size:1.45rem; margin:2.2em 0 .6em; padding-bottom:.32em; border-bottom:1px solid var(--rule); }
h3 { font-size:1.08rem; margin:1.5em 0 .35em; }
p { margin:.7em 0; }
.mono { font-family:"Courier New",ui-monospace,monospace; }
.muted { color:var(--muted); }
.eyebrow { display:inline-block; font:700 .72rem/1 "Courier New",monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:8px 14px; border-radius:0 0 6px 0; }
.skip:focus { left:0; z-index:100; }
/* Visually hidden but read by screen readers. Used for headings that keep the
   document outline unbroken (h1 -> h2 -> h3) where the design shows no h2. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ---- masthead / nav ---- */
.masthead { border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:20; user-select:none; -webkit-user-select:none; -moz-user-select:none;
  background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(1.1) blur(6px); }
.masthead .wrap { max-width:var(--maxw-wide); display:flex; align-items:center; gap:22px; min-height:64px; padding:0 28px; }
.brand { color:var(--ink); display:inline-flex; align-items:center; flex:0 0 auto; }
.brand svg { display:block; height:38px; width:auto; }
.wordmark-sub { opacity:.6; }
.nav { margin-left:auto; }
.nav ul { list-style:none; display:flex; align-items:center; gap:22px; margin:0; padding:0; }
.nav a { color:var(--ink); font-size:.93rem; white-space:nowrap; padding:6px 0; border-bottom:2px solid transparent; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; transition:border-color var(--theme-tr) ease,color var(--theme-tr) ease; }
.nav a:hover { text-decoration:none; border-bottom-color:var(--rule); }
.nav a[aria-current="page"] { border-bottom-color:var(--accent); }
.nav a.family-link { color:var(--ochre); font-weight:700; }
.nav a.family-link:hover { border-bottom-color:var(--ochre); }
.theme-toggle { flex:0 0 auto; order:3; margin-left:4px; background:var(--panel); border:1px solid var(--rule);
  color:var(--ink); border-radius:8px; width:38px; height:38px; display:inline-grid; place-items:center; cursor:pointer; transition:background-color var(--theme-tr) ease,border-color var(--theme-tr) ease; }
.theme-toggle:hover { border-color:var(--muted); }
.theme-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
.nav-toggle { display:none; order:2; background:var(--panel); border:1px solid var(--rule); color:var(--ink);
  border-radius:8px; padding:9px 13px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }

/* mobile nav: switch to a menu button before the row can crowd */
@media (max-width:900px) {
  .masthead .wrap { flex-wrap:wrap; gap:14px; padding:0 20px; }
  html.js .nav-toggle { display:inline-block; }
  html.js .nav { order:5; flex-basis:100%; margin:0; overflow:hidden; max-height:0; transition:max-height .22s ease; }
  html.js .nav[data-open="true"] { max-height:70vh; }
  .nav ul { flex-direction:column; align-items:stretch; gap:0; padding:6px 0 12px; }
  .nav li { border-top:1px solid var(--rule); }
  .nav a { display:block; width:100%; padding:12px 2px; font-size:1rem; border-bottom:0; }
  .nav a[aria-current="page"] { border-bottom:0; color:var(--accent); }
}
@media (max-width:900px) {
  html:not(.js) .nav ul { flex-wrap:wrap; }
}

/* ---- hero / buttons ---- */
main { display:block; }
.page-header,
.hero { padding:56px 0 26px; }
.hero .lede { font-size:1.2rem; color:var(--muted); max-width:64ch; }
.actions { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:11px 20px; border-radius:8px; font-weight:700; font-size:.98rem; border:1px solid transparent; cursor:pointer; transition:background-color var(--theme-tr) ease,color var(--theme-tr) ease,filter .15s,transform .05s,box-shadow .15s; }
.btn--primary { background:var(--accent); color:#fff; } [data-theme="dark"] .btn--primary { color:#14161a; }
.btn--secondary { background:transparent; color:var(--link); border-color:var(--rule); }
.btn--family { background:var(--ochre); color:#fff; } [data-theme="dark"] .btn--family { color:#14161a; }
.btn:hover { text-decoration:none; filter:brightness(1.05); }
.btn:active { transform:translateY(1px); }
.btn--ghost { background:var(--panel); color:var(--ink); border-color:var(--rule); }

/* ---- trust row (home) ---- */
/* 2x2 grid rather than a wrapping flex row: the dataset item's list is much longer
   than the other three, and under flex-wrap it consumed the first row and pushed the
   remaining items into a ragged second row. A fixed two-column grid keeps the four
   items aligned in even rows regardless of how long any one label runs, and mirrors
   the .grid--2x2 used by the cards below. align-items:start keeps the short items
   top-aligned against the taller wrapped one instead of centering them in the row. */
.trust { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px 30px; margin:6px 0 4px; padding:16px 0 0; border-top:1px solid var(--rule); }
@media (max-width:640px) { .trust { grid-template-columns:1fr; } }
.trust div { font-size:.9rem; line-height:1.45; color:var(--muted); }
.trust strong { display:block; font:700 1.02rem "Courier New",monospace; color:var(--ink); letter-spacing:-.01em; margin-bottom:1px; }

/* ---- provenance chips ---- */
.prov { font:700 .66rem/1 "Courier New",monospace; letter-spacing:.04em; padding:2px 6px; border-radius:3px; white-space:nowrap; }
.prov-cms { background:#e8eef5; color:#2f5d86; border:1px solid #b7cbe0; }
.prov-pc { background:#f6efe0; color:#9a6b12; border:1px solid #e0cfa3; }
[data-theme="dark"] .prov-cms { background:#17222e; color:#7fb0dd; border-color:#2f4864; }
[data-theme="dark"] .prov-pc { background:#2a2413; color:#d9ad5c; border-color:#5a4a20; }

/* ---- cards / panels / notices ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:26px 0; }
.grid--2x2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px) { .grid--2x2 { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius); padding:18px 20px; transition:background-color var(--theme-tr) ease,border-color var(--theme-tr) ease,box-shadow var(--theme-tr) ease,transform .15s ease; }
.card:hover { border-color:var(--muted); box-shadow:var(--shadow); transform:translateY(-1px); }
.card h3 { margin-top:0; }
.card.tier { display:flex; flex-direction:column; }
.card.tier .price { margin:.2em 0 .4em; }
.card.tier .muted { flex:1 0 auto; }
.tier-cta { display:inline-block; margin-top:14px; font-weight:700; font-size:.92rem; color:var(--link); }
.tier-cta:hover { text-decoration:none; }
.tier-cta::after { content:""; }
.panel { background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius); padding:18px 22px; margin:18px 0; }
.notice { border-left:3px solid var(--ochre); background:var(--panel); padding:13px 17px; font-size:.94rem; margin:18px 0; border-radius:0 var(--radius) var(--radius) 0; }
.family-callout { background:var(--panel2); border:1px solid var(--rule); border-left:4px solid var(--ochre);
  border-radius:var(--radius); padding:22px 24px; margin:28px 0; }
.family-callout h2 { border:0; margin-top:0; }

/* ---- For Families hero (photo) ---- */
.fam-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; margin:30px 0 8px; }
.fam-hero .fam-copy .eyebrow { color:var(--ochre); }
.fam-hero h1 { font-size:2rem; margin-top:.1em; }
.fam-hero .lede { font-size:1.14rem; color:var(--muted); }
.fam-figure { margin:0; }
.fam-figure img { width:100%; height:auto; aspect-ratio:4/5; max-height:470px; object-fit:cover; object-position:50% 64%; display:block;
  border-radius:var(--radius); border:1px solid var(--rule); box-shadow:var(--shadow); background:var(--panel); }
.fam-figure figcaption { font-size:.78rem; color:var(--muted); margin-top:6px; }
.free-badge { display:inline-block; background:var(--ochre); color:#fff; font:700 .72rem/1 "Courier New",monospace;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:5px; margin-bottom:8px; }
[data-theme="dark"] .free-badge { color:#14161a; }
@media (max-width:760px) { .fam-hero { grid-template-columns:1fr; gap:20px; } .fam-hero .fam-figure { order:-1; } .fam-figure img { max-height:300px; aspect-ratio:16/10; object-position:50% 60%; } }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--rule); vertical-align:top; }
th { font:700 .72rem/1.2 "Courier New",monospace; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
td.num,th.num { text-align:right; font-family:"Courier New",monospace; }
code,.code { font-family:"Courier New",monospace; background:var(--panel); padding:1px 5px; border-radius:4px; font-size:.9em; }
.price { font:700 1.85rem "Courier New",monospace; } .price small { font-size:.9rem; color:var(--muted); font-weight:500; margin-left:.45em; letter-spacing:.01em; }

/* ---- FAQ ---- */
.faq details { border:1px solid var(--rule); border-radius:var(--radius); margin:10px 0; background:var(--panel); }
.faq summary { cursor:pointer; padding:14px 18px; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--muted); font-family:"Courier New",monospace; }
.faq details[open] summary::after { content:"–"; }
.faq details > p { padding:0 18px 16px; margin:0; color:var(--muted); }

/* ---- form ---- */
.form { max-width:560px; } .field { margin:14px 0; }
.field label { display:block; font-weight:700; font-size:.92rem; margin-bottom:5px; }
.field .hint { display:block; font-weight:400; font-size:.82rem; color:var(--muted); margin-top:2px; }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid var(--rule); border-radius:7px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:.96rem; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.hp { position:absolute; left:-9999px; } .form-status { margin-top:12px; font-weight:700; }
.form-status.err { color:#b3261e; } .form-status.ok { color:#1e7a46; }

/* ---- sample: document viewer ---- */
.bleed { position:relative; left:50%; transform:translateX(-50%); width:min(96vw, var(--maxw-wide)); margin-top:10px; }
.doc-viewer { background:var(--panel2); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); margin:8px 0 4px; }
.doc-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px;
  background:var(--panel); border-bottom:1px solid var(--rule); }
.doc-bar .doc-name { font:700 .82rem/1 "Courier New",monospace; letter-spacing:.03em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.doc-bar .doc-name svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.doc-bar .doc-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.doc-bar .doc-actions a { font-size:.85rem; font-weight:700; padding:7px 13px; border-radius:7px; border:1px solid var(--rule); color:var(--ink); background:var(--paper); }
.doc-bar .doc-actions a:hover { text-decoration:none; border-color:var(--muted); }
.doc-bar .doc-actions a.primary { background:var(--accent); color:#fff; border-color:transparent; }
[data-theme="dark"] .doc-bar .doc-actions a.primary { color:#14161a; }
.doc-stage { background:#d4d3ce; padding:22px clamp(10px,3vw,30px); }
[data-theme="dark"] .doc-stage { background:#0e1013; }
.report-frame { display:block; width:100%; max-width:850px; margin:0 auto; height:80vh; min-height:600px;
  border:0; border-radius:5px; background:#fff; box-shadow:0 10px 34px rgba(16,24,40,.28); }

footer.site { border-top:1px solid var(--rule); margin-top:56px; padding:28px 0; color:var(--muted); font-size:.86rem; }
footer.site .wrap { max-width:var(--maxw-wide); }
footer.site .cols { display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; }
footer.site a { color:var(--muted); }
footer.site .disclaimer { margin-top:14px; font-size:.8rem; max-width:80ch; }
.blocker { color:var(--ochre); font-weight:700; }

/* ---- Families guide: checklist + print/PDF -------------------------------- */
/* The PDF is generated from families.html by WeasyPrint at build time, so these
   print rules are also the PDF's stylesheet. Anything hidden here is absent from
   the download: navigation a reader cannot click on paper, and the button that
   produced the file they are already holding. */
.fam-actions { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.fam-checklist { border-top: 2px solid var(--rule, #e5e7eb); padding-top: 1.5rem; }
.fam-checklist h3 { margin-top: 1.5rem; }
ul.checklist { list-style: none; padding-left: 0; }
ul.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; break-inside: avoid; }
ul.checklist li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.05em; height: 1.05em; border: 1.5px solid var(--ink, #111827);
  border-radius: 3px; opacity: .55;
}

@media print {
  @page {
    size: A4; margin: 16mm 14mm 20mm;
    @bottom-center {
      content: "General information, not legal advice. Verify with an attorney licensed in your state.";
      font: 7.5pt Georgia, serif; color: #555;
    }
    @bottom-right { content: counter(page) " / " counter(pages); font: 7.5pt Georgia, serif; color: #777; }
  }
  .masthead, .site, .skip, .fam-actions, .nav-toggle, .theme-toggle { display: none !important; }
  body { font-size: 10.5pt; line-height: 1.45; color: #000; background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .fam-hero { display: block; }
  .fam-figure { display: none; }
  h1 { font-size: 20pt; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; }
  h2 { font-size: 13pt; }
  h3 { font-size: 11pt; }
  section { break-inside: auto; }
  li, p { orphans: 3; widows: 3; }
  /* keep a subsection, note, callout, figure or table intact (and, via the heading
     rule above, with its heading) so nothing is orphaned across a page break */
  .fam-sub, .small, .notice, .kv, figure, table, blockquote { break-inside: avoid; page-break-inside: avoid; }
  /* a printed page cannot be clicked, so surface the destination */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  a { text-decoration: none; color: #000; }
  /* the checklist starts a fresh page; drop its screen-only top rule so it cannot
     orphan a separator at the foot of the previous page */
  .fam-checklist { break-before: page; page-break-before: always; border-top: 0; padding-top: 0; }
}

/* Long-form methodology guide: breathing room + a separator under the title */
.guide { padding-top:34px; }
.guide > h1:first-child { padding-bottom:.5rem; border-bottom:1px solid var(--rule); margin-bottom:1.1rem; }

/* Fine print (families page general-info notes and disclaimers). The class was
   used in markup but never had a rule, so these notes rendered at body size;
   de-emphasize them to read as the asides they are. */
.small { font-size: 0.9em; color: var(--muted); }

/* --- Sub-navigation tabs -------------------------------------------------
   A segmented control used for the sample-report switcher (facility / operator /
   state) and the methodology overview/guide toggle. Works as links (no JS) and,
   on the sample page, as JS buttons that swap the embedded report. */
.subnav {
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 22px; padding:4px;
  background:var(--panel); border:1px solid var(--rule);
  border-radius:calc(var(--radius) + 3px); width:fit-content; max-width:100%;
}
.subnav a, .subnav button {
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:600 .95rem/1 inherit; color:var(--muted); padding:9px 17px;
  border-radius:var(--radius); text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.subnav a:hover, .subnav button:hover { color:var(--ink); text-decoration:none; }
.subnav .active,
.subnav [aria-current="page"],
.subnav [aria-selected="true"] {
  background:var(--paper); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.10);
}
.subnav-label { font-size:.82rem; color:var(--muted); align-self:center; margin-right:2px; padding-left:8px; }
@media (max-width:520px){
  .subnav { width:100%; }
  .subnav a, .subnav button { flex:1 1 auto; text-align:center; padding:9px 10px; }
}

/* Force the pricing cards into a 2x2 grid on wide screens; stack on narrow. */
@media (max-width:640px){ .grid--2x2 { grid-template-columns:1fr; } }

/* Methodology toggle sits at the top of the content on both methodology pages,
   in the same fixed position, so it never jumps between the two views. Scoped to
   where the toggle is main's first child (methodology pages only). */
main > .subnav:first-child { margin: 34px 0 2px; }
main > .subnav:first-child + .page-header { padding-top: 14px; }
main > .subnav:first-child + .guide { padding-top: 14px; }

/* ---- notes pages ------------------------------------------------------- */
/* Notes pages build their own layout (article.note) instead of .page-header, so
   they never picked up the 56px gap between the nav row and the first heading
   that .page-header/.hero give every other page. Matched here rather than by
   adding .page-header to the templates, because the notes h1 sits under a
   kicker and inside the narrower .note measure. Zeroing the first child's own
   margin keeps the gap at 56px instead of 56px plus whatever it brings. */
.note { max-width: 62rem; margin: 0 auto; padding-top: 56px; }
.note > :first-child { margin-top: 0; }
.note-kicker { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: .4rem; }
.note-meta { font-size: .88rem; opacity: .78; border-left: 3px solid var(--rule, #ccc); padding-left: .9rem; margin: 0 0 1.6rem; }
.note .lede { font-size: 1.06rem; }
.table-note { font-size: .9rem; opacity: .8; }
.table-scroll { overflow-x: auto; margin: 1rem 0 1.6rem; }
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.data th, table.data td { padding: .38rem .6rem; border-bottom: 1px solid var(--rule, #e2e2e2); text-align: left; white-space: nowrap; }
table.data thead th { border-bottom-width: 2px; font-weight: 600; }
table.data td.num, table.data th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td { font-size: .85rem; opacity: .8; white-space: normal; border-bottom: none; padding-top: .8rem; }
/* The Change and % columns were once amber for growth and green for decline. On a
   page about an enrollment moratorium that colors growth as caution and decline as
   healthy, which is an editorial judgment the reports themselves refuse to make. It
   also carried meaning in color alone (WCAG 1.4.1). The +/- sign states the
   direction without characterizing it, so these columns now render like every other
   number in the table. */
ul.limits-plain li { margin-bottom: .7rem; }
ul.sources { font-size: .92rem; }
.note-foot { font-size: .92rem; opacity: .85; border-top: 1px solid var(--rule, #e2e2e2); padding-top: 1rem; margin-top: 2rem; }
.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; }