@import url('colors_and_type.css');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   ICON SYSTEM — strictly brand colors, no purple/green/off-brand
   Every [data-icon] inherits its color from its parent. We never
   apply non-brand colors to icons. */
[data-icon] {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1em; height: 1em;
  color: var(--ward-blue);   /* default brand-blue */
  flex: 0 0 auto;
  vertical-align: middle;
}
[data-icon] svg {
  width: 100%; height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
}
/* Brand-color variants for icon containers */
.ico, [data-icon].brand-slate { color: var(--capitol-slate); }
[data-icon].brand-coral, .ico.coral { color: var(--dc-coral); }
[data-icon].brand-teal, .ico.teal { color: var(--rising-teal); }
[data-icon].brand-blue, .ico.blue { color: var(--ward-blue); }
[data-icon].brand-white, .ico.white { color: white; }

html, body {
  background: var(--light-bg);
  color: var(--body-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: #EEF1F5;            /* clean editorial gray, no decorative blobs */
  min-height: 100vh;
  padding: 0.4in 0;
}

/* ============================================================
   PAGE SHEET — US Letter (8.5 × 11), professional document feel
   Each .page is a logical "sheet" of content. On screen, the sheet
   grows to fit its content (NEVER clips). In print, each .page article
   starts a fresh physical sheet; tall content paginates naturally
   across multiple sheets without losing anything. */
.page {
  width: 8.5in;
  min-height: 11in;          /* feels like a Letter sheet */
  height: auto;              /* grows to fit content */
  margin: 0 auto 0.4in;
  background: var(--white);
  border-radius: 0;          /* rectangular like real Letter paper */
  box-shadow:
    0 0 0 1px rgba(30,48,72,0.10),
    0 4px 14px rgba(30,48,72,0.08);
  position: relative;
  overflow: visible;         /* never clip — let content breathe */
}
.page:first-of-type { margin-top: 0; }
.page:last-of-type { margin-bottom: 0; }

/* Legacy modifier — pages flow by default now. */
.page.page-flow { height: auto; min-height: 11in; overflow: visible; }

body { counter-reset: sheet; }

/* ---- CONTINUATION HEADER ----
   Quiet text-only running header at the top of continuation sheets.
   No decorative bars, no gradients — just the section name and a
   "continued" tag, like a real published document. */
.section-continued {
  background: var(--white);
  color: var(--capitol-slate);
  padding: 0.4in 1in 0.18in;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 1in;
  position: relative;
}
.section-continued .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.section-continued .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--capitol-slate);
  letter-spacing: 0;
  flex: 1;
}
.section-continued .tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-coral);
  white-space: nowrap;
}

/* ---- TYPOGRAPHIC SAFE AREA ----
   Inside each Letter canvas, the .content block carries the printable
   safe area: 1in horizontal margin, 0.5in vertical breathing room.
   Edge-bleed banners (.section-divider, .doc-header, .closing-strip,
   .doc-footer) extend full-width and use their own internal padding. */
.page .content { padding: 0.5in 1in 0.6in 1in !important; }
.page .section-divider {
  padding: 0.6in 1in 0.5in !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  background: var(--capitol-slate) !important;
  overflow: hidden;
}
.page .section-divider::before { display: none !important; }
.page .doc-header { border-radius: 0 !important; }
.page .doc-header::before { display: none !important; }
.page .closing-strip { border-radius: 0 !important; }
.page .section-divider h2 { font-size: 32px !important; line-height: 1.1 !important; }
.page .section-divider p { font-size: 15px !important; line-height: 1.5 !important; }
.page .lead { font-size: 17px !important; margin-bottom: 18px !important; line-height: 1.55 !important; }
.page h3.sub { margin: 22px 0 10px !important; font-size: 22px !important; padding-bottom: 8px !important; }
.page h4.subsub { margin: 16px 0 6px !important; font-size: 16px !important; }
.page ul.bul { margin: 8px 0 !important; }
.page ul.bul li { margin-bottom: 5px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
.page .insight { margin: 14px 0 !important; padding: 16px 20px !important; }
.page .insight p { font-size: 13.5px !important; line-height: 1.5 !important; }
.page .data-table-wrap { margin: 12px 0 16px !important; }
.page p { margin-bottom: 10px !important; }
.page .req-grid { margin: 14px 0 !important; gap: 10px !important; }
.page .req { padding: 14px 18px !important; }

/* Checklist density */
.page .check-section { padding: 16px 56px !important; }
.page .check { padding: 6px 8px !important; }
.page .check + .check { margin-top: 0 !important; }
.page .section-bar { margin: 6px 0 10px !important; padding-bottom: 8px !important; }
.page .section-bar h2 { font-size: 18px !important; }
.page .doc-tip { padding: 10px 16px !important; margin: 12px 56px !important; font-size: 13px !important; }
.page .notes-block { padding: 14px 18px !important; margin: 14px 0 0 !important; }
.page .helpline-strip { padding: 14px 56px !important; }

/* Pathway / step / myth blocks */
.page .pathway-card-grid { margin: 12px 0 !important; gap: 10px !important; }
.page .pathway-card { padding: 12px 16px !important; }
.page .pathway-card p { font-size: 13.5px !important; line-height: 1.5 !important; }
.page .step-process { margin: 10px 0 !important; }
.page .ps-item { padding: 10px 14px !important; margin-bottom: 8px !important; }
.page .ps-body h5 { font-size: 14px !important; margin-bottom: 2px !important; }
.page .ps-body p { font-size: 13px !important; line-height: 1.45 !important; margin: 0 !important; }
.page .myth { padding: 12px 16px !important; margin-bottom: 10px !important; }
.page .myth-text { font-size: 14px !important; }
.page .reality { font-size: 13.5px !important; line-height: 1.5 !important; }

/* Twoby (2x2 grid in s6) */
.page .twoby { margin: 12px 0 !important; gap: 10px !important; }
.page .twoby .col { padding: 12px 14px !important; }
.page .twoby .col h5 { font-size: 14px !important; margin-bottom: 6px !important; }
.page .twoby .col ul.bul li { font-size: 13px !important; margin-bottom: 3px !important; }

/* Directory cards */
.page .dir-grid { margin: 12px 0 !important; gap: 10px !important; }
.page .dir-card { padding: 12px 14px !important; }
.page .dir-card .name { font-size: 13.5px !important; }
.page .dir-card .what { font-size: 12.5px !important; line-height: 1.4 !important; }
.page .dir-card .ct { font-size: 12px !important; }

/* Tables */
.page .data-table th, .page .data-table td { padding: 8px 12px !important; font-size: 13px !important; }

/* Closing strip slimmer */
.page .closing-strip { padding: 28px 56px !important; }
.page .closing-strip h2 { font-size: 26px !important; }

/* School cards (Programs Directory) */
.page .schools-grid { margin: 12px 0 16px !important; gap: 10px !important; }
.page .school-card { padding: 14px 16px !important; }
.page .school-card h4 { font-size: 15.5px !important; margin-bottom: 3px !important; padding-right: 56px !important; }
.page .school-card .focus { font-size: 11px !important; margin-bottom: 6px !important; }
.page .school-card .desc { font-size: 12.5px !important; line-height: 1.45 !important; margin-top: 4px !important; }
.page .school-card .progs { margin-bottom: 4px !important; gap: 4px !important; }
.page .schools-list-grid { margin: 8px 0 12px !important; gap: 6px !important; }
.page .school-pill { padding: 8px 12px !important; font-size: 12.5px !important; }

/* Checklist boxes (Programs Directory s9) */
.page .checklist { padding: 12px 16px !important; margin-bottom: 10px !important; }
.page .checklist h4 { font-size: 14.5px !important; margin-bottom: 6px !important; }
.page .checklist ul li { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 3px !important; }

/* Glossary tighter */
.page dl.glossary { margin: 8px 0 !important; }
.page dl.glossary dt { font-size: 13px !important; }
.page dl.glossary dd { font-size: 13px !important; line-height: 1.45 !important; margin: 3px 0 0 !important; }
.page dl.glossary > div { margin-bottom: 6px !important; }

/* Q&A density (FAQ docs) */
.page .qa-list { padding: 0.3in 0 0.4in !important; margin: 0 1in !important; }
.page .qa { padding: 0.14in 0 !important; }
.page .qa .q { margin-bottom: 0.06in !important; gap: 10px !important; }
.page .qa .q .num { width: 24px !important; height: 24px !important; font-size: 11px !important; }
.page .qa .q .text { font-size: 14.5px !important; line-height: 1.35 !important; }
.page .qa .a { font-size: 12.5px !important; line-height: 1.5 !important; padding-left: 34px !important; }
.page .key-deadline { padding: 12px 18px !important; margin: 10px 1in !important; }
.page .key-deadline h3 { font-size: 16px !important; }
.page .helpline-block { padding: 14px 1in !important; margin-top: 10px !important; }

/* Doc-headers tighter (FAQ + Checklist style) */
.page .doc-header { padding: 0.4in 1in 0.35in !important; }
.page .doc-header .doc-title { font-size: 30px !important; line-height: 1.05 !important; margin-bottom: 6px !important; }
.page .doc-header .doc-subtitle { font-size: 14px !important; line-height: 1.45 !important; }

/* ---- HEADER BLOCK (inch-based padding for screen/print parity) ---- */
.doc-header {
  background: var(--gradient-heritage);
  color: white;
  padding: 0.6in 0.6in 0.5in;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 0.18in;
  border-top-right-radius: 0.18in;
}
.doc-header::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: 0.6;
  pointer-events: none;
}
.doc-header > * { position: relative; z-index: 1; }

.doc-header .eyebrow {
  color: var(--horizon);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.doc-header .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rising-teal);
  display: inline-block;
}

.doc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: 14px;
}
.doc-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  line-height: 1.55;
}

.doc-header-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}
.doc-header-foot .lang { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }

/* ---- BODY (inch-based padding for screen/print parity) ---- */
.doc-body {
  padding: 0.5in 0.6in 0.6in;
}

.section { margin-bottom: 44px; }
.section:last-child { margin-bottom: 0; }

.section-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dc-coral);
  display: inline-block;
  margin-bottom: 8px;
}

h1.section-title, .section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--capitol-slate);
  margin-bottom: 18px;
}
h2.section-title { font-size: 24px; }

.section-title.gradient {
  background: var(--gradient-heritage);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--body-text);
  margin-bottom: 20px;
}
p { font-size: 15px; line-height: 1.7; color: var(--body-text); margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

h3 { font-size: 18px; font-weight: 600; color: var(--capitol-slate); margin: 24px 0 10px; font-family: var(--font-display); }
h4 { font-size: 15px; font-weight: 600; color: var(--capitol-slate); margin: 18px 0 6px; font-family: var(--font-display); }

ul.bullet { list-style: none; padding: 0; }
ul.bullet li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-text);
}
ul.bullet li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dc-coral);
}

/* ---- CARDS ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
.card.with-strip { padding-top: 28px; }
.card.with-strip::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-heritage);
}

.card-grid { display: grid; gap: 20px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.tint-card {
  border-radius: 20px;
  padding: 24px 26px;
  position: relative;
}
.tint-card.policy  { background: var(--ward-tint);   border-left: 4px solid var(--ward-blue); }
.tint-card.coral   { background: var(--coral-tint);  border-left: 4px solid var(--dc-coral); }
.tint-card.student { background: var(--rising-tint); border-left: 4px solid var(--rising-teal); }

/* (Avoiding the colored-left-border pattern from the guide note: prefer top strip) */
.callout {
  background: var(--ward-tint);
  border-radius: 20px;
  padding: 22px 24px;
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 18px 0;
}
.callout .icon-wrap {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  background: var(--white);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ward-blue);
  box-shadow: var(--shadow-sm);
}
.callout.coral { background: var(--coral-tint); }
.callout.coral .icon-wrap { color: var(--dc-coral); }
.callout.student { background: var(--rising-tint); }
.callout.student .icon-wrap { color: var(--ward-blue); }
.callout .body { flex: 1; }
.callout .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--capitol-slate);
  margin-bottom: 4px;
  display: block;
}
.callout p { font-size: 14.5px; margin: 0; }

/* ---- TABLES ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.data-table thead {
  background: var(--capitol-slate);
}
.data-table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: white;
  text-align: left;
  padding: 14px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.data-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  color: var(--body-text);
  line-height: 1.5;
}
.data-table tbody tr:nth-child(even) { background: #FAFCFD; }
.data-table tbody td:first-child {
  font-weight: 600;
  color: var(--capitol-slate);
  font-family: var(--font-display);
  font-size: 14px;
}

/* ---- TAGS ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag.coral  { background: var(--coral-tint); color: var(--dc-coral); }
.tag.ward   { background: var(--ward-tint); color: var(--ward-blue); }
.tag.teal   { background: var(--rising-tint); color: #2E7C8F; }
.tag.slate  { background: rgba(30,48,72,0.08); color: var(--capitol-slate); }

/* ---- CHECK ITEMS ---- */
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background 0.2s var(--ease-soft);
}
.check + .check { margin-top: 2px; }
.check:hover { background: var(--ward-tint); }
.check .box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--ward-blue);
  background: white;
  margin-top: 1px;
}
.check .text { font-size: 14.5px; line-height: 1.55; color: var(--body-text); }

/* ---- FOOTER (inch-based for screen/print parity) ---- */
.doc-footer {
  background: var(--capitol-slate);
  color: rgba(255,255,255,0.85);
  padding: 0.3in 0.6in;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom-left-radius: 0.18in;
  border-bottom-right-radius: 0.18in;
}
.doc-footer .brand {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: white;
}
.doc-footer .brand img { height: 30px; }
.doc-footer .meta { font-size: 12px; color: var(--horizon); letter-spacing: 0.04em; }
.doc-footer a { color: var(--horizon); }

/* ---- ACCENTS ---- */
.gradient-bar {
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, var(--rising-teal) 30%, var(--dc-coral) 70%, transparent);
  margin: 28px 0;
}

/* ---- TIMELINE ---- */
.timeline { position: relative; padding-left: 50px; }
.timeline::before {
  content: "";
  position: absolute; left: 19px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--rising-teal), var(--ward-blue) 50%, var(--dc-coral));
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 32px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-marker {
  position: absolute;
  left: -50px; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--ward-blue);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--capitol-slate);
  box-shadow: var(--shadow-sm);
}
.tl-item.coral .tl-marker { border-color: var(--dc-coral); color: var(--dc-coral); }
.tl-item.teal .tl-marker { border-color: var(--rising-teal); color: var(--ward-blue); }
.tl-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.tl-content::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-heritage);
}
.tl-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--capitol-slate);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.tl-meta {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-coral);
  font-weight: 700;
  margin-bottom: 12px;
}

/* ---- NUMBERED STEPS ---- */
.steps { counter-reset: stepnum; display: grid; gap: 14px; }
.step {
  display: flex; gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
.step::before {
  counter-increment: stepnum;
  content: counter(stepnum);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: white;
  background: var(--gradient-authority);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.step .step-body { flex: 1; }
.step .step-title { font-family: var(--font-display); font-weight: 600; color: var(--capitol-slate); font-size: 15px; margin-bottom: 3px; }
.step .step-text { font-size: 14px; line-height: 1.5; color: var(--body-text); }

/* ---- STAT / FEATURE ROW ---- */
.feature-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row .icon-large {
  width: 48px; height: 48px;
  background: var(--ward-tint);
  border-radius: 12px;
  color: var(--ward-blue);
  display: grid; place-items: center;
}
.feature-row .feature-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-coral);
  margin-bottom: 4px;
}
.feature-row .feature-title {
  font-family: var(--font-display); font-weight: 600;
  color: var(--capitol-slate); font-size: 17px; margin-bottom: 4px;
}
.feature-row .feature-text { font-size: 14.5px; color: var(--body-text); line-height: 1.6; }

/* ---- KPI / NUMBER GRID ---- */
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.num-cell {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  position: relative; overflow: hidden;
}
.num-cell::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradient-heritage);
}
.num-cell .n {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; color: var(--capitol-slate);
  letter-spacing: -0.02em;
  background: var(--gradient-authority);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.num-cell .l {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}

/* ---- DEFINITIONS ---- */
.dl dt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--capitol-slate);
  font-size: 16px;
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
}
.dl dt:first-child { margin-top: 0; }
.dl dt .acro {
  font-size: 11px; letter-spacing: 0.1em;
  background: var(--ward-tint); color: var(--ward-blue);
  padding: 3px 10px; border-radius: 100px;
  font-weight: 600;
}
.dl dd { font-size: 14.5px; color: var(--body-text); line-height: 1.6; margin: 6px 0 0 0; }

/* ---- LETTER STYLE ---- */
.letter {
  background: white;
  border-radius: 20px;
  padding: 36px 40px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}
.letter .field {
  display: inline-block;
  min-width: 220px;
  border-bottom: 1px dashed var(--ward-blue);
  padding: 0 4px;
  margin: 0 2px;
}
.letter .blank-line {
  display: block;
  height: 22px;
  border-bottom: 1px dashed var(--border);
  margin: 6px 0;
}

/* ---- PRINT ----
   On-screen .page is already 8.5in × 11in with inch-based padding,
   so print mostly inherits the same layout. We only override the
   chrome that doesn't make sense on paper. */
@page {
  size: 8.5in 11in;
  margin: 0;
}

@media print {
  html, body {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 8.5in !important;
    display: block !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  body { font-size: 10.5pt; }

  /* Each .page article starts on a fresh physical sheet. Tall content
     flows naturally across multiple sheets — never clips. */
  .page {
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 8.5in !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    page-break-before: always;
    break-before: page;
    page-break-inside: auto;
    break-inside: auto;
  }
  .page:first-of-type { page-break-before: avoid; break-before: avoid; }

  /* Cover pages: exactly one sheet, 11in tall. */
  .cover.page,
  .cover.page > .cover-shell,
  .cover-shell {
    height: 11in !important;
    max-height: 11in !important;
    overflow: hidden !important;
  }

  /* Force every colored / gradient surface to print, since browsers
     strip backgrounds by default. */
  .doc-header, .cover-shell, .section-divider, .closing-strip,
  .doc-footer, .index-hero, .data-table thead, .tag,
  .callout, .tint-card, .card, .tl-content::before,
  .num-cell::before, .step::before, .doc-card::before,
  .qrc, .qrc::before {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Don't split key content blocks across sheets — keep tables and cards intact */
  .card, .callout, .tint-card, .insight, .school-card, .cluster-card,
  .checklist, .sped-block, .num-cell, .step, .tl-item, .feature-row,
  .qrc, .letter, tr, .closing-strip,
  .cmp-row, .cmp3-row, .pathway-head, .data-table thead,
  .doc-header, .doc-footer, .section-divider,
  .index-card, .doc-card, .principle, .audience-card,
  .grade-block, .grade-row, .month-block,
  figure, blockquote, dl, .dl, dt + dd {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Headings should never be the last thing on a page */
  h1, h2, h3, h4, h5, h6,
  .section-eyebrow, .doc-title, .section-title {
    page-break-after: avoid;
    break-after: avoid;
  }
  /* Sections can span sheets if they're tall — let the browser break naturally */
  .section { break-inside: auto; }

  /* ============ MULTI-BLOCK PAGINATION ============
     Some docs are a single .page that contains multiple major content blocks
     (charts, letters, years, ages, months). For PDF output each major block
     should land on its own sheet. Scoped via wrapper classes so docs that are
     intended to fit on a single sheet (At-a-Glance, Quick Reference Cards) are
     not affected. */

  /* Comparison Charts — each chart prints on its own sheet */
  .cmp .section { page-break-before: always; break-before: page; padding-top: 0.4in; }
  .cmp .section:first-of-type { page-break-before: avoid; break-before: avoid; padding-top: 0; }

  /* Sample Letters & Templates — each letter section is its own sheet */
  .letters-pack .section { page-break-before: always; break-before: page; padding-top: 0.4in; }
  .letters-pack .section:first-of-type { page-break-before: avoid; break-before: avoid; padding-top: 0; }

  /* 8th–12th Grade Journey — each year row gets its own sheet */
  .timeline-grade .year-row { page-break-before: always; break-before: page; padding-top: 0.3in; }
  .timeline-grade .year-row:first-of-type { page-break-before: avoid; break-before: avoid; padding-top: 0; }

  /* SPED Transition Timeline — each age block gets its own sheet */
  .timeline-age .age-row { page-break-before: always; break-before: page; padding-top: 0.3in; }
  .timeline-age .age-row:first-of-type { page-break-before: avoid; break-before: avoid; padding-top: 0; }

  /* College Application Timeline — keep month cards intact, let them flow */
  .timeline-month .month-card { page-break-inside: avoid; break-inside: avoid; }

  /* Hide UI chrome that doesn't belong on paper */
  .download-btn, .pdf-toolbar, .no-print,
  .topbar, footer.site, .menu-toggle { display: none !important; }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100% !important; }
}

/* Mobile screens narrower than Letter: let the .page fit the viewport
   instead of forcing horizontal scroll. (Only affects elements with .page
   class — won't touch the site shell pages.) */
@media screen and (max-width: 900px) {
  .page {
    width: 100%;
    min-height: auto;
    border-radius: 0;
    margin: 0 auto 0.2in;
  }
}

/* ---- DOWNLOAD PDF FLOATING BUTTON ---- */
.pdf-toolbar {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 9999;
  display: flex;
  gap: 8px;
}
.download-btn {
  background: var(--capitol-slate);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30,48,72,0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.download-btn:hover { background: var(--ward-blue); transform: translateY(-1px); }
.download-btn.secondary { background: white; color: var(--capitol-slate); border: 1px solid var(--border); }
.download-btn.secondary:hover { background: var(--surface, #F4F1EC); }
.download-btn svg { width: 14px; height: 14px; }

/* ---- INDEX ---- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}
.index-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}
.index-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  opacity: 0; transition: opacity 0.25s var(--ease-soft);
}
.index-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.index-card:hover::before { opacity: 1; }
.index-card.h::before { background: var(--gradient-heritage); }
.index-card.a::before { background: var(--gradient-authority); }
.index-card.c::before { background: var(--gradient-civic); }
.index-card .meta {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dc-coral); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.index-card .meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dc-coral); }
.index-card h3 {
  font-family: var(--font-display); font-weight: 700;
  color: var(--capitol-slate); font-size: 17px;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 8px;
}
.index-card p { font-size: 13.5px; color: var(--body-text); line-height: 1.55; margin: 0; }
.index-card .lang-pair {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}

/* mark of identity in headers (top-right of doc-header) */
.brand-mark {
  position: absolute;
  top: 28px; right: 32px;
  z-index: 2;
  height: 36px;
  opacity: 0.95;
}