/* Public pages (home, privacy, terms, How it works) - served ahead of sign-in
   (Program.cs), so they don't load the app's style.css. Colors mirror
   style.css's :root tokens. */
:root { color-scheme: dark; --bg: #0f1115; --panel: #171a21; --border: #2a2e37; --text: #e8eaed; --muted: #9aa0aa; --accent: #4f9dff; --accent-text: #0b0d11; --good: #35c98c; --warn: #e0a52c; }
:root[data-theme="light"] { color-scheme: light; --bg: #f1f6fd; --panel: #ffffff; --border: #cfdbeb; --text: #2b3648; --muted: #536078; --accent: #2f6fce; --accent-text: #ffffff; --good: #1f9d68; --warn: #b5790a; }
* { box-sizing: border-box; }
/* Full screen (viewport-fit=cover), kept clear of the notch and home indicator. */
body {
  margin: 0; font-family: var(--font-body);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg); color: var(--text); line-height: 1.55;
}
a { color: var(--accent); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

/* Docked: stays put while the page scrolls. */
header.site { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: none; align-self: center; color: var(--accent); }
.brand-name { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.brand-sub { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.signin { padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.signin:hover { border-color: var(--muted); }

/* main.wrap, not main - .wrap's padding shorthand would otherwise zero the
   top and bottom. */
main.wrap { padding-top: 40px; padding-bottom: 56px; }
h1 { font-family: var(--font-heading); font-weight: 600; font-size: 2rem; line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.01em; }
h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 22px 0 6px; }
p, li { color: var(--text); }
.lede { font-size: 1.1rem; color: var(--muted); margin: 0 0 32px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }

/* --- Home -------------------------------------------------------------------- */

/* Wider than the reading pages, in bands that run edge to edge. */
.home-page .wrap { max-width: 1120px; }
.home-page main { overflow-x: clip; }
.home-page h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }

/* The header's section links (home only). */
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.site-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.home-page) { scroll-behavior: smooth; }
}
.home-page .section { scroll-margin-top: 64px; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border);
  font-weight: 600; text-decoration: none; color: var(--text); background: var(--panel);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* An arrow, in CSS so site.js's "Open calculator" relabel keeps it. */
.btn.primary::after { content: "→"; transition: transform 0.15s ease; }
.btn.primary:hover { border-color: var(--accent); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover::after { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }

/* Hero: a soft glow of the accent behind the pitch and the example plan. */
.hero {
  position: relative;
  padding: 72px 0 64px;
  background:
    radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 60% at 0% 0%, color-mix(in srgb, var(--good) 8%, transparent), transparent 70%);
}
.hero::before {
  /* A faint grid, fading out toward the bottom. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 20px; }
.hero .lede { font-size: 1.15rem; margin: 0 0 32px; max-width: 34em; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.88rem; }
.trust li { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); }
.trust li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--good) 18%, transparent) no-repeat center / 9px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2335c98c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5'/%3E%3C/svg%3E");
}

/* The example plan / year, drawn as an app window. */
.preview {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent);
  overflow: hidden;
}
:root[data-theme="light"] .preview { box-shadow: 0 30px 60px -28px rgba(30, 60, 110, 0.28), 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent); }
.hero .preview { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }
.preview-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 50%, var(--panel)); }
.preview-dots { display: flex; gap: 6px; }
.preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.preview-title { font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.preview-body { padding: 18px 18px 14px; }
.preview figcaption { padding: 0 18px 14px; font-size: 0.75rem; color: var(--muted); }

.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.metric { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 35%, var(--panel)); }
.metric-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.metric-value { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric-value.good { color: var(--good); }
.metric-value small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--muted); margin-left: 2px; }

.projection { display: block; width: 100%; height: auto; }
.projection .grid line { stroke: var(--border); stroke-width: 1; }
.projection .band { fill: color-mix(in srgb, var(--accent) 20%, transparent); }
.projection .median { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.projection .retire { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 5; }
.projection .retire-label, .projection .axis text { fill: var(--muted); font-family: var(--font-body); font-size: 12px; }
.projection .axis text { text-anchor: middle; }
.projection .dot { fill: var(--panel); stroke: var(--accent); stroke-width: 3; }
.legend { display: flex; gap: 18px; margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.legend .key-median { height: 3px; background: var(--accent); }
.legend .key-band { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* The strip of what every projection accounts for. */
.models { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
/* The label above, the pills centered beneath it, so however many rows
   they wrap to, each row sits balanced rather than one left hanging. */
.models .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; padding-bottom: 22px; }
.models p { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.models ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.models li { margin: 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.84rem; color: var(--text); background: var(--panel); }

.section { padding: 88px 0; }
.section-alt { background: color-mix(in srgb, var(--panel) 45%, var(--bg)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 640px; margin: 0 0 40px; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; margin: 0; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature {
  position: relative; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 16px;
  border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.feature-icon svg, .privacy-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin: 0 0 8px; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.93rem; }

/* A year in detail: the copy beside an example year. */
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.spotlight-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.checks { list-style: none; padding: 0; margin: 20px 0 0; }
.checks li { position: relative; padding-left: 28px; margin: 10px 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent) no-repeat center / 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234f9dff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.3 4.6-5'/%3E%3C/svg%3E");
}
.flow-heading { display: flex; justify-content: space-between; margin: 4px 0 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.flow-heading span { color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.flows { margin: 0 0 18px; }
.flow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 12px; font-size: 0.9rem; }
.flow dt { color: var(--text); }
.flow dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.flow .bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border) 60%, transparent); position: relative; overflow: hidden; }
.flow .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--bar); }
.bar.s1 { --bar: #3987e5; } .bar.s2 { --bar: #d95926; } .bar.s3 { --bar: #199e70; } .bar.s4 { --bar: #c98500; } .bar.s6 { --bar: #9085e9; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; margin: 0; padding: 24px; border-top: 2px solid var(--accent); background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); border-radius: 0 0 14px 14px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin: 0 0 12px; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: var(--accent); line-height: 1; }
.steps h3 { margin: 0 0 8px; font-size: 1.1rem; }
.steps p { margin: 0; color: var(--muted); }

.privacy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; max-width: 900px; }
.privacy-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.privacy-icon svg { width: 28px; height: 28px; }
.privacy h2 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); }
.privacy p { color: var(--muted); }
.privacy p:last-child { margin-bottom: 0; }
.privacy code { font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); }

/* Pricing (pricing.js): a card per tier, Plus picked out, then every
   feature in a table that opens below them. */
.pricing-status { color: var(--muted); }
.tier-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tier-cards[hidden], .tier-compare[hidden] { display: none; }
.tier-card {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tier-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); }
.tier-card.tier-plus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%), var(--panel);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tier-name { margin: 0 0 18px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.tier-plus .tier-name { color: var(--accent); }
.tier-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--border); }
.tier-stat { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--bg) 40%, var(--panel)); border: 1px solid var(--border); }
.tier-stat dt { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tier-stat dd { margin: 0; font-size: 0.75rem; color: var(--muted); }
.tier-lead { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tier-list { margin-top: 12px; font-size: 0.93rem; }
.tier-list li { margin: 9px 0; }
.tier-value { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.tier-compare { margin: 24px 0 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.tier-compare summary { padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.tier-compare summary::-webkit-details-marker { display: none; }
.tier-compare summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--muted); line-height: 1; }
.tier-compare[open] summary::after { content: "−"; }
.tier-compare[open] summary { border-bottom: 1px solid var(--border); }
.tier-compare-scroll { max-width: 100%; overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.pricing-table th { padding: 14px 16px; text-align: left; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.pricing-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table td:first-child { min-width: 240px; }
.pricing-table .what { display: block; margin-top: 2px; color: var(--muted); font-size: 0.84rem; }
.pricing-table .tier { width: 110px; text-align: center; white-space: nowrap; }
.pricing-table .yes { color: var(--good); font-weight: 600; }
.pricing-table .no { color: var(--muted); }
.tier-footnote { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: 0.92rem; }

.cta {
  position: relative; overflow: hidden; text-align: center; padding: 56px 24px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--panel);
}
.cta p { max-width: 520px; margin: 0 auto 28px; color: var(--muted); font-size: 1.05rem; }
.cta .actions { justify-content: center; margin: 0; }
.disclaimer { max-width: 760px; margin: 40px auto 0; text-align: center; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 960px) {
  .hero-grid, .spotlight { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero .preview { transform: none; }
  .features, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 760px) {
  .site-nav { display: none; }
  .hero { padding: 44px 0 40px; }
  .section { padding: 56px 0; }
  .features, .steps { grid-template-columns: minmax(0, 1fr); }
  .privacy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .metric-value { font-size: 1.2rem; }
  .metric { padding: 8px 10px; }
  .cta { padding: 40px 20px; }
}
@media (max-width: 600px) {
  .pricing-table td, .pricing-table th { padding: 10px; }
  .pricing-table td:first-child { min-width: 190px; }
  .pricing-table .tier { width: 72px; }
}
@media (max-width: 420px) {
  .metric-label { white-space: normal; }
  .hero .actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .feature, .tier-card, .btn.primary::after { transition: none; }
}

/* --- Privacy and terms: long reading pages, headings spaced from the text above. */

.legal h2 { margin-top: 32px; }
.updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 24px; }

footer.site { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 18px; padding-bottom: 24px; }
footer.site a { color: var(--muted); }

/* --- How it works ---------------------------------------------------------- */

.about-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 20px;
}
.about-section > :last-child { margin-bottom: 0; }

/* Numbered steps, each its own block. */
.step-list { list-style: none; padding: 0; counter-reset: step; }
.step-list li {
  counter-increment: step;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.step-list li::before { content: "Step " counter(step) ": "; font-weight: 600; color: var(--accent); }

.formula {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  overflow-x: auto;
}

.note {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.about-section table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 14px 0; font-size: 0.9rem; }
.about-section th { padding: 9px 12px; text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
.about-section td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.about-section tr:last-child td { border-bottom: none; }

/* The Contents column (about.js): sticky on the left, as the Plan's inputs
   are beside its results, with the section you're reading highlighted.
   Hidden, the sections take the full width. Narrower screens stack it above
   them. The page is wider than the other public pages to fit it. */
.about-page .wrap { max-width: 1180px; }
.about-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.about-layout.nav-hidden { grid-template-columns: minmax(0, 1fr); }
.about-layout.nav-hidden .about-nav { display: none; }
.about-content { min-width: 0; }
.about-content > .about-section { scroll-margin-top: calc(var(--header-height, 64px) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.about-page) { scroll-behavior: smooth; }
}

.about-nav {
  position: sticky;
  top: calc(var(--header-height, 64px) + 16px);
  max-height: calc(100vh - var(--header-height, 64px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 8px 10px;
}
.about-nav[hidden] { display: none; }
/* Its title and Hide, staying at the top while the column scrolls. */
.about-nav-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -8px 6px;
  padding: 12px 12px 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.about-nav-title { margin: 0; font-size: 1.05rem; }
.about-nav-list { list-style: none; margin: 0; padding: 0; }
.about-nav-list li { margin: 0; }
.about-nav-list a {
  display: block;
  padding: 6px 10px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}
.about-nav-list a:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.about-nav-list a[aria-current] {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.about-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.about-icon-btn:hover { color: var(--text); border-color: var(--muted); }

/* Brings the hidden column back, at the top of the page. */
.about-show-btn {
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.about-show-btn:hover { border-color: var(--muted); }
.about-show-btn[hidden] { display: none; }

@media (max-width: 900px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); }
  .about-nav { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 700px) {
  .about-section { padding: 16px; }
  h1 { font-size: 1.6rem; }
}