/* ============================================================
   eduloan-explained — same family as the eduloan calculator:
   deep bottle green + pale champagne gold, the moratorium wedge.
   All animation is CSS-only, gated behind prefers-reduced-motion:
   the default (unanimated) state of every element is its final,
   fully-legible state.
   ============================================================ */

:root {
  --bg:        #0B2B21;
  --panel:     #113828;
  --panel2:    #16452F;
  --line:      rgba(196, 164, 78, 0.30);   /* deep brass hairlines */
  --ink:       #EFEAD9;                    /* warm ivory */
  --muted:     #C2CDBB;
  --gold:      #E6D28E;                    /* pale champagne gold */
  --brass:     #C4A44E;
  --sage:      #A2BAAD;                    /* Scenario A */
  --copper:    #E0A96D;                    /* Scenario C */
  --gold-dim:  rgba(230, 210, 142, 0.13);
  --focus:     #E6D28E;
  --btn-ink:   #0B2B21;                    /* text on a gold button */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 1080px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #F0F3EB;                  /* celadon-tinted paper */
    --panel:     #FAFBF5;
    --panel2:    #E6ECDC;
    --line:      rgba(126, 100, 20, 0.35);
    --ink:       #123A2C;                  /* bottle-green ink */
    --muted:     #40584A;
    --gold:      #755D10;                  /* brass deepened for AA on light */
    --brass:     #8A6E1F;
    --sage:      #4E6A5C;
    --copper:    #8A501B;
    --gold-dim:  rgba(117, 93, 16, 0.10);
    --focus:     #123A2C;
    --btn-ink:   #FAFBF5;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.02em; line-height: 1.14; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; color: var(--gold); }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

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

/* ---------------- skip link + focus ---------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--gold); color: var(--btn-ink); padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* ---------------- header ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--gold); flex: none; }
.brand-name { font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-name strong { color: var(--gold); font-weight: 800; }
.site-head nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-gold { background: var(--gold); color: var(--btn-ink); }
.btn-gold:hover { background: var(--brass); color: var(--btn-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-big { padding: 13px 24px; font-size: 1.05rem; }
.btn-small { padding: 6px 12px; font-size: 0.85rem; }

/* ---------------- hero ---------------- */
.hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.eyebrow {
  display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
  background: var(--gold-dim); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 21ch; }
.lede { margin-top: 18px; font-size: 1.12rem; color: var(--muted); max-width: 56ch; }
.lede strong { color: var(--ink); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-note { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }

.hero-fig, .chart-fig, .accrual-fig, .priv-fig { margin: 0; }
.hero-svg, .chart-svg, .accrual-svg, .priv-svg { display: block; width: 100%; height: auto; }
.fig-cap { margin-top: 10px; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }

/* ---------------- SVG shared ---------------- */
.ax { stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; }
.hatch-line { stroke: var(--brass); stroke-width: 3; opacity: 0.6; }
.svg-lab { font-family: var(--sans); font-size: 15px; font-weight: 650; fill: var(--muted); }
.lab-gold { fill: var(--gold); }
.lab-a { fill: var(--sage); }
.lab-b { fill: var(--gold); }
.lab-c { fill: var(--copper); }
.lab-dim { fill: var(--muted); }
.lab-on-bar { fill: var(--bg); font-weight: 750; }

/* hero pieces */
.p-line { stroke: var(--sage); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.hw-tick { fill: var(--gold); }
.hw-exit { fill: none; stroke: var(--sage); stroke-width: 5; stroke-linecap: round; }

/* problem accrual bar */
.bar-principal { fill: var(--sage); }
.bar-accrual { fill: var(--gold); }
@media (prefers-color-scheme: light) {
  .lab-on-bar { fill: #FAFBF5; }
}

/* chart */
.mora-region { fill: var(--panel); }
.ch-tick { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.path-a { fill: none; stroke: var(--sage); stroke-width: 5; stroke-linecap: round; }
.path-b { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 8; }
.path-c { fill: none; stroke: var(--copper); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 7 14 7; }
.chart-svg .num { font-variant-numeric: tabular-nums; }

/* privacy scene */
.doc { fill: var(--panel2); stroke: var(--sage); stroke-width: 2.5; }
.doc-line { stroke: var(--sage); stroke-width: 4; stroke-linecap: round; }
.req-path { stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.7; }
.req-dot { fill: var(--gold); opacity: 0; }
.csp-wall { fill: var(--gold); }
.blocked-x line { stroke: var(--copper); stroke-width: 6; stroke-linecap: round; }
.cloud ellipse { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 5 7; opacity: 0.75; }

/* ---------------- bands / sections ---------------- */
.band { padding: 64px 0; border-bottom: 1px solid var(--line); }
.band-alt { background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.band h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); max-width: 30ch; }
.section-lede { margin-top: 14px; font-size: 1.06rem; color: var(--muted); max-width: 68ch; }
.section-lede strong, .section-lede em { color: var(--ink); }

/* problem */
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; margin-top: 32px; align-items: center; }
.stat-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px;
}
.stat-kicker { font-size: 0.8rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); }
.stat-line { margin-top: 8px; font-size: 0.95rem; color: var(--muted); }
.stat-list { margin: 14px 0 0; }
.stat { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.stat dt { font-size: 0.95rem; color: var(--muted); }
.stat dd { margin: 0; font-size: 1.15rem; font-weight: 800; }
.stat dd.accent { color: var(--gold); }
.stat .vs { display: block; font-size: 0.8rem; font-weight: 650; color: var(--muted); text-align: right; }

/* legend + scenario cards */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 18px 0 0; font-size: 0.92rem; color: var(--muted); font-weight: 650; }
.legend li { display: inline-flex; align-items: center; gap: 9px; }
.sw { width: 28px; height: 0; border-top: 4px solid; border-radius: 2px; }
.sw-a { border-color: var(--sage); }
.sw-b { border-color: var(--gold); border-top-style: dashed; }
.sw-c { border-color: var(--copper); border-top-style: dotted; }

.scen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.scen-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column;
}
.scen-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; }
.scen-badge {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 0.95rem; font-weight: 800;
  border: 2px solid; color: var(--ink);
}
.scen-a .scen-badge { border-color: var(--sage); }
.scen-b .scen-badge { border-color: var(--gold); }
.scen-c .scen-badge { border-color: var(--copper); }
.scen-a { border-top: 3px solid var(--sage); }
.scen-b { border-top: 3px solid var(--gold); }
.scen-c { border-top: 3px solid var(--copper); }
.scen-sub { margin-top: 8px; font-size: 0.9rem; color: var(--muted); min-height: 3em; }
.figs { margin: 10px 0 0; }
.figs > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline; }
.figs dt { font-size: 0.86rem; color: var(--muted); }
.figs dd { margin: 0; font-weight: 700; font-size: 0.98rem; }
.figs dd.strong { font-size: 1.08rem; font-weight: 800; color: var(--gold); }
.scen-delta { margin-top: 12px; font-size: 0.92rem; padding: 8px 12px; border-radius: var(--radius-sm); }
.scen-delta.saves { background: var(--gold-dim); color: var(--ink); border: 1px solid var(--line); }
.scen-delta.saves strong { color: var(--gold); }
.scen-delta.baseline { color: var(--muted); border: 1px dashed var(--line); }
.fine { margin-top: 22px; font-size: 0.88rem; color: var(--muted); max-width: 78ch; }

/* engine + tour */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px;
  border-top: 3px solid var(--brass);
}
.feat h3 { font-size: 1.02rem; color: var(--gold); }
.feat p { margin-top: 8px; font-size: 0.93rem; color: var(--muted); }
.feat p .num, .feat p code { color: var(--ink); }

/* privacy */
.priv-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; margin-top: 30px; align-items: start; }
.csp-block {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 0; overflow-x: auto;
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.6; color: var(--muted);
}
.csp-block code { color: var(--muted); }
.csp-block mark { background: var(--gold-dim); color: var(--gold); font-weight: 750; padding: 1px 4px; border-radius: 4px; }
.priv-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.priv-list li { padding-left: 26px; position: relative; font-size: 0.95rem; color: var(--muted); }
.priv-list li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 800;
}
.priv-list strong { color: var(--ink); }

/* CTA band */
.cta-band { text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-inner p { color: var(--muted); font-size: 1.05rem; }
.cta-sub { font-family: var(--mono); font-size: 0.85rem !important; }

/* footer */
.site-foot { padding: 36px 0 48px; }
.foot-disclaimer { font-size: 0.85rem; color: var(--muted); max-width: 90ch; line-height: 1.6; }
.foot-disclaimer strong { color: var(--ink); }
.foot-links { margin-top: 16px; font-size: 0.9rem; color: var(--muted); }

/* replay button */
.replay { margin-top: 10px; }

/* ============================================================
   ANIMATION — every rule here lives behind prefers-reduced-motion:
   no-preference. With reduced motion (or with JS off, for the
   scroll-triggered set) everything renders in its final state.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- on-load hero choreography (pure CSS, no JS needed) --- */
  .hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
  .hero-copy > *:nth-child(5) { animation-delay: 0.32s; }

  .hero-svg .hw-wedge { animation: wipeIn 1.3s 0.5s cubic-bezier(0.3, 0, 0.4, 1) both; }
  .hero-svg .hw-tick { transform-box: fill-box; transform-origin: bottom center; animation: tickUp 0.5s 1.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
  .hero-svg .hw-exit { animation: drawPath 1.1s 2.1s ease-out both; stroke-dasharray: 1; }
  .hero-svg .svg-lab { animation: fadeIn 0.6s 0.6s both; }
  .hero-svg .lab-gold { animation-delay: 1.9s; }

  /* --- scroll-triggered reveals (JS adds .in-view; without JS
         nothing here applies because .js is absent) --- */
  .js [data-animate] .rev { opacity: 0; }
  .js [data-animate].in-view .rev { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js [data-animate].in-view .rev:nth-child(2) { animation-delay: 0.08s; }
  .js [data-animate].in-view .rev:nth-child(3) { animation-delay: 0.16s; }
  .js [data-animate].in-view .scen-grid .rev:nth-child(1),
  .js [data-animate].in-view .feat-grid .rev:nth-child(1) { animation-delay: 0.05s; }
  .js [data-animate].in-view .scen-grid .rev:nth-child(2),
  .js [data-animate].in-view .feat-grid .rev:nth-child(2) { animation-delay: 0.17s; }
  .js [data-animate].in-view .scen-grid .rev:nth-child(3),
  .js [data-animate].in-view .feat-grid .rev:nth-child(3) { animation-delay: 0.29s; }
  .js [data-animate].in-view .feat-grid .rev:nth-child(4) { animation-delay: 0.41s; }
  .js [data-animate].in-view .feat-grid .rev:nth-child(5) { animation-delay: 0.53s; }
  .js [data-animate].in-view .feat-grid .rev:nth-child(6) { animation-delay: 0.65s; }
  /* grid children of a .rev container reveal with their parent */

  /* --- chart draw --- */
  .js [data-animate] .chart-svg .wipe,
  .js [data-animate] .chart-svg .ch-wedge { clip-path: inset(0 100% 0 0); }
  .js [data-animate].in-view .chart-svg .ch-wedge { animation: wipeIn 1.2s 0.3s cubic-bezier(0.3, 0, 0.4, 1) both; }
  .js [data-animate].in-view .chart-svg .wipe { animation: wipeIn 1.5s 0.4s cubic-bezier(0.3, 0, 0.4, 1) both; }
  .js [data-animate].in-view .chart-svg .wipe-d2 { animation-delay: 0.7s; }
  .js [data-animate].in-view .chart-svg .wipe-d3 { animation-delay: 1.0s; }
  .js [data-animate] .chart-svg .ch-tick { transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); }
  .js [data-animate].in-view .chart-svg .ch-tick { animation: tickUp 0.5s 1.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

  /* --- problem accrual bar --- */
  .js [data-animate] .accrual-svg .bar-accrual { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
  .js [data-animate].in-view .accrual-svg .bar-accrual { animation: growX 1.1s 0.4s cubic-bezier(0.3, 0, 0.4, 1) both; }

  /* --- privacy: a request dot repeatedly dies at the wall --- */
  .priv-svg .req-dot { animation: reqTravel 2.8s 0.6s ease-in infinite; }
  .js [data-animate].in-view .priv-svg .blocked-x line { animation: xPulse 2.8s 0.6s ease-out infinite; }

  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -3% 0 0); } }
  @keyframes tickUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes drawPath { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes reqTravel {
    0%   { opacity: 0; transform: translateX(0); }
    8%   { opacity: 1; }
    72%  { opacity: 1; transform: translateX(252px); }
    80%  { opacity: 0; transform: translateX(252px); }
    100% { opacity: 0; transform: translateX(252px); }
  }
  @keyframes xPulse {
    0%, 60% { stroke-width: 6; }
    72%     { stroke-width: 9; }
    84%, 100% { stroke-width: 6; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .replay { display: none !important; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .hero-grid, .problem-grid, .priv-grid { grid-template-columns: 1fr; }
  .scen-grid, .tour-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .scen-sub { min-height: 0; }
  .head-row { flex-wrap: wrap; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .scen-grid, .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- print ---------------- */
@media print {
  :root {
    --bg: #ffffff; --panel: #ffffff; --panel2: #f2f2ee;
    --ink: #111111; --muted: #333333; --gold: #6b5410; --brass: #6b5410;
    --sage: #3c5548; --copper: #6e401a; --line: #999999; --gold-dim: #f4efdd;
  }
  .site-head, .cta-row, .cta-band, .replay, .skip-link { display: none !important; }
  .band { border-bottom: 1px solid #ccc; padding: 24px 0; }
  a { color: #111; text-decoration: none; }
  a[href^="https://"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  body { font-size: 12pt; }
}