/* =============================================================================
   AbilityFinder — refined, editorial dark UI.
   Goal: content that flows and blends (no heavy boxes), clean SVG icons,
   generous rhythm. Light + dark aware, accessible.
   ========================================================================== */

/* self-hosted fonts (both OFL) — served from our own origin, so NO third party
   (e.g. Google Fonts) is ever contacted. This keeps the "private, nothing leaves
   your browser" promise fully true. Fraunces = display serif; Inter = body. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2?v=14") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2?v=14") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* ---------------------------------------------------------------------------
   Design system — "editorial warm-black", inspired by Giga (giga.ai):
   warm near-black canvas, a light high-contrast serif for display, a
   monospace for eyebrow labels, near-monochrome UI so the semantic status
   colours (green / amber / red) are the ONLY saturated hues on the page.
   --------------------------------------------------------------------------- */
:root {
  --bg: #14110e;
  --bg-2: #191512;
  --panel: #1d1815;
  --panel-2: #241e19;
  --hair: rgba(245, 236, 224, 0.08);
  --hair-2: rgba(245, 236, 224, 0.15);

  --text: #f8f3ec;
  --text-dim: #c5bcaf;
  --text-dimmer: #948a7d;

  /* near-monochrome "accent" = warm bone; reads as premium ivory on dark */
  --accent: #e9ddc9;
  --accent-hi: #fbf4e8;
  --accent-soft: rgba(233, 221, 201, 0.10);
  --accent-line: rgba(233, 221, 201, 0.26);

  --ok: #57bf90;
  --ok-soft: rgba(87, 191, 144, 0.13);
  --warn: #e0a44e;
  --warn-soft: rgba(224, 164, 78, 0.13);

  --btn: #f7f2ea;
  --btn-ink: #14110e;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --r: 16px;
  --r-sm: 11px;
  --pill: 980px;
  --maxw: 680px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="light"] {
  /* warm paper / editorial light mode */
  --bg: #f7f2e9;
  --bg-2: #f0e9dc;
  --panel: #fffdf8;
  --panel-2: #f3ece0;
  --hair: rgba(30, 24, 18, 0.10);
  --hair-2: rgba(30, 24, 18, 0.18);
  --text: #1f1913;
  --text-dim: #665d51;
  --text-dimmer: #938a7d;
  /* accent flips to a dark warm ink in light mode */
  --accent: #43372a;
  --accent-hi: #241c13;
  --accent-soft: rgba(67, 55, 42, 0.07);
  --accent-line: rgba(67, 55, 42, 0.28);
  --ok: #1a9163;
  --ok-soft: rgba(26, 145, 99, 0.10);
  --warn: #b9791f;
  --warn-soft: rgba(185, 121, 31, 0.10);
  --btn: #1f1913;
  --btn-ink: #fffdf8;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "cv03", "ss01";
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}

/* ambient atmosphere — cool + warm gradient blooms that fill the open space
   (fixed, so every scroll position keeps some colour & motion behind content) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 48% at 85% 12%, rgba(108, 152, 222, 0.40), transparent 64%),
    radial-gradient(38% 44% at 99% 55%, rgba(78, 196, 182, 0.30), transparent 66%),
    radial-gradient(44% 50% at 8% 2%, rgba(233, 221, 201, 0.18), transparent 68%),
    radial-gradient(34% 42% at 74% 99%, rgba(158, 122, 226, 0.30), transparent 68%);
  filter: blur(26px);
  animation: ambientDrift 26s ease-in-out infinite alternate;
  transition: opacity 0.45s var(--ease);
}
@keyframes ambientDrift {
  from { transform: translate3d(-1.8%, -1.2%, 0) scale(1); }
  to   { transform: translate3d(2.2%, 1.8%, 0) scale(1.08); }
}
:root[data-theme="light"] body::before {
  opacity: 1;
  background:
    radial-gradient(42% 48% at 87% 10%, rgba(58, 118, 214, 0.26), transparent 62%),
    radial-gradient(38% 44% at 100% 52%, rgba(24, 168, 156, 0.22), transparent 64%),
    radial-gradient(40% 46% at 6% 0%, rgba(214, 148, 78, 0.16), transparent 66%),
    radial-gradient(36% 44% at 76% 100%, rgba(128, 92, 214, 0.22), transparent 66%);
}

.ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hair);
  transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--hair-2); }
.nav-inner {
  width: 100%; max-width: none; margin: 0; padding: 0 clamp(28px, 5vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
@media (max-width: 640px) { .nav-inner { padding: 0 20px; } }

/* day / night theme toggle */
.theme-toggle { appearance: none; border: none; background: transparent; cursor: pointer; padding: 4px; line-height: 0; }
.tt-track {
  position: relative; display: block; width: 52px; height: 27px; border-radius: 999px;
  background: linear-gradient(135deg, #10192f, #263a63);
  border: 1px solid var(--hair-2);
  transition: background 0.5s var(--ease), border-color 0.3s;
  overflow: hidden;
}
:root[data-theme="light"] .tt-track { background: linear-gradient(135deg, #7ec6f5, #bfe6ff); }
.tt-track::before, .tt-track::after { content: ""; position: absolute; border-radius: 50%; background: #fff; transition: opacity 0.4s; }
.tt-track::before { width: 2.5px; height: 2.5px; top: 6px; right: 9px; box-shadow: -7px 5px 0 -0.5px #fff, -3px 12px 0 -1px #fff; opacity: 0.85; }
.tt-track::after { width: 3px; height: 3px; top: 14px; right: 18px; opacity: 0.6; }
:root[data-theme="light"] .tt-track::before, :root[data-theme="light"] .tt-track::after { opacity: 0; }
.tt-icons { display: none; }
.tt-thumb {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #f3f1e6; box-shadow: inset -5px -2px 0 0 #c4cad8;
  transition: transform 0.5s var(--ease), background 0.5s, box-shadow 0.5s;
}
:root[data-theme="light"] .tt-thumb {
  transform: translateX(25px);
  background: radial-gradient(circle at 50% 45%, #ffe08a, #ffc93c);
  box-shadow: 0 0 6px 1.5px rgba(255, 200, 60, 0.7);
}
.theme-toggle:hover .tt-track { border-color: var(--accent-line); }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); --brand-ink: #12100d; }
.brand-mark {
  display: grid; place-items: center; width: 47px; height: 47px; border-radius: 15px; flex: none;
  background: linear-gradient(155deg, #202a3f 0%, #171a26 45%, #12110f 100%);
  border: 1px solid rgba(150, 180, 240, 0.25);
  box-shadow: 0 10px 26px -10px rgba(70, 120, 210, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.brand-mark::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(78% 72% at 28% 12%, rgba(120, 165, 245, 0.45), transparent 66%),
              radial-gradient(60% 60% at 90% 95%, rgba(150, 120, 235, 0.32), transparent 70%); }
.brand-mark::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
  transform: translateX(-120%); animation: brandSheen 6.5s ease-in-out infinite; }
@keyframes brandSheen { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
.brand-mark svg { position: relative; width: 32px; height: 32px; overflow: visible; }
.brand-bezel { transform-origin: 12px 12px; animation: bezelSpin 16s linear infinite; opacity: 0.9; }
@keyframes bezelSpin { to { transform: rotate(360deg); } }
.brand-needle { transform-origin: 12px 12px; animation: compassSeek 9s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
@keyframes compassSeek {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(155deg); }
  30%  { transform: rotate(120deg); }
  55%  { transform: rotate(280deg); }
  63%  { transform: rotate(250deg); }
  100% { transform: rotate(360deg); }
}
.brand:hover .brand-mark { transform: translateY(-1px) scale(1.06); box-shadow: 0 14px 32px -10px rgba(70, 120, 210, 0.7); }
.brand:hover .brand-bezel { animation-duration: 5s; }
.brand:hover .brand-needle { animation-duration: 3.2s; }
.brand-name { font-size: 1.32rem; letter-spacing: -0.03em; font-family: var(--font-display); font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-tag { font-size: 0.78rem; color: var(--text-dim); }
@media (max-width: 560px) { .nav-tag { display: none; } }

/* language switcher */
.lang {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--hair); border-radius: var(--pill);
  padding: 6px 12px 6px 11px; background: transparent;
  color: var(--text-dim); font-family: inherit; font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.lang:hover { border-color: var(--hair-2); color: var(--text); }
.lang .ic { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- layout */
.wrap { position: relative; z-index: 1; max-width: none; margin: 0; padding: 40px clamp(28px, 5vw, 72px) 130px; }
@media (max-width: 640px) { .wrap { padding: 32px 20px 120px; } }
/* views that read better in a narrower measure stay left-aligned, not centered */
.wrap.narrow { max-width: 720px; }

.progress { height: 2px; background: var(--hair); border-radius: 999px; overflow: hidden; margin-bottom: 44px; max-width: 720px; }
.progress > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 999px; transition: width 0.5s var(--ease);
}

/* “card” is now an airy container, not a hard box */
.card {
  position: relative;
  padding: 8px 2px;
  animation: rise 0.5s var(--ease);
}
.wizard-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- type */
/* Giga-style monospace eyebrow labels — uppercase, tracked, with a ● dot */
.eyebrow, .section-label, .step-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--text-dim);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem;
  margin-bottom: 24px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.step-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 0.7rem; margin: 0 0 18px; }
.step-kicker .ic { width: 14px; height: 14px; color: var(--accent-hi); }
.step-q { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(1.9rem, 4.5vw, 2.5rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
.step-help { color: var(--text-dim); margin: 0 0 26px; font-size: 1rem; max-width: 52ch; }

/* ---------------------------------------------------------------- options */
.options { display: grid; gap: 10px; }
.options.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .options.two { grid-template-columns: 1fr; } }

.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px 20px; border: 1px solid var(--hair); background: transparent;
  border-radius: 12px; cursor: pointer; font-size: 1rem; color: var(--text);
  font-family: inherit; transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.06s;
}
.opt:hover { background: var(--accent-soft); border-color: var(--hair-2); }
.opt:active { transform: scale(0.995); }
.opt.selected { border-color: var(--accent-line); background: var(--accent-soft); }
.opt .ic { width: 20px; height: 20px; color: var(--text-dim); }
.opt.selected .ic { color: var(--accent-hi); }
.opt .label { font-weight: 520; letter-spacing: -0.015em; flex: 1; }
.opt .sub { display: block; font-weight: 400; font-size: 0.82rem; color: var(--text-dim); margin-top: 1px; }
.opt .tick { width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--hair-2); flex: none; display: grid; place-items: center; color: #fff; font-size: 0.68rem; }
.opt.selected .tick { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.opt.selected .tick::after { content: "✓"; }

/* ---------------------------------------------------------------- buttons */
.nav-row { display: flex; gap: 10px; margin-top: 28px; }
.btn {
  appearance: none; border: 1px solid transparent; border-radius: var(--pill);
  padding: 12px 22px; font-size: 0.95rem; font-weight: 550; letter-spacing: -0.01em;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 0.06s, filter 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn .ic { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn); color: var(--btn-ink); flex: 1; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.32; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--hair-2); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---------------------------------------------------------------- landing */
.hero-title {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1.04; font-weight: 380;
  letter-spacing: -0.025em; margin: 0 0 20px; color: var(--text);
}
.hero-sub { color: var(--text-dim); font-size: 1.1rem; margin: 0 0 30px; max-width: 46ch; line-height: 1.55; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-cta .btn-primary { flex: 0 0 auto; padding-inline: 28px; }
.hero-cta .btn-ghost { flex: 0 0 auto; text-decoration: none; }

.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 0.86rem; color: var(--text-dim); }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust .ic { width: 15px; height: 15px; color: var(--text-dimmer); }

.section { margin-top: 66px; }
.section-label { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-dim); margin: 0 0 14px; }
.section-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 26px; line-height: 1.12; }

/* problem comparison — two flowing columns split by a hairline, no boxes */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hair); }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }
.compare-col { padding: 22px 26px 8px 0; }
.compare-col + .compare-col { padding-left: 26px; border-left: 1px solid var(--hair); }
@media (max-width: 620px) { .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--hair); padding-left: 0; } }
.compare-h { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; font-size: 1.02rem; }
.compare-col ul { margin: 0; padding: 0; list-style: none; }
.compare-col li { position: relative; padding-left: 20px; margin: 12px 0; color: var(--text-dim); font-size: 0.94rem; line-height: 1.5; }
.compare-col li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dimmer); }
.compare-col.good li { color: var(--text); }
.compare-col.good li::before { background: var(--accent); }
.compare-col b { color: var(--text); font-weight: 550; }

/* how it works — clean numbered rows, no boxes */
.steps3 { display: grid; gap: 2px; }
.step3 { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--hair); }
.step3:last-child { border-bottom: 1px solid var(--hair); }
.step3-n { font-size: 1.4rem; font-weight: 600; color: var(--accent-hi); letter-spacing: -0.03em; }
.step3 h3 { margin: 0 0 5px; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; }
.step3 p { margin: 0; color: var(--text-dim); font-size: 0.94rem; line-height: 1.55; }

/* categories — soft inline chips */
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: var(--pill); padding: 9px 15px; font-size: 0.9rem; color: var(--text); }
.cat .ic { width: 16px; height: 16px; color: var(--accent-hi); }
.cats-note { color: var(--text-dim); font-size: 0.9rem; margin: 18px 0 0; line-height: 1.55; max-width: 62ch; }

/* final cta — quiet band, not a box */
.final-cta { margin-top: 66px; padding-top: 40px; border-top: 1px solid var(--hair); text-align: center; }
.final-cta h2 { font-family: var(--font-display); font-optical-sizing: auto; margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; }
.final-cta p { margin: 0 0 22px; color: var(--text-dim); }
.final-cta .btn-primary { flex: 0 0 auto; padding-inline: 32px; }

/* ---------------------------------------------------------------- results */
.results-head { margin-bottom: 6px; }
.results-head .big { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(3.4rem, 12vw, 5.2rem); font-weight: 350; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.results-head h2 { font-family: var(--font-display); font-optical-sizing: auto; margin: 6px 0 12px; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; }
.results-head p { color: var(--text-dim); margin: 0; max-width: 54ch; font-size: 1rem; }

/* money band — the "how much could I get" headline + retro estimator */
.money-band { max-width: 1000px; margin: 26px 0 10px; padding: 26px 0; border: none; border-top: 1px solid color-mix(in srgb, var(--ok) 30%, var(--hair)); border-bottom: 1px solid var(--hair); background: none; border-radius: 0; }
.mb-head { display: flex; align-items: center; gap: 14px; }
.mb-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); flex: none; }
.mb-badge .ic { width: 22px; height: 22px; }
.mb-total { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; }
.mb-total b { color: var(--ok); }
.mb-sub { color: var(--text-dim); font-size: 0.9rem; margin-top: 2px; }
.retro { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.retro-label { display: block; font-size: 0.88rem; font-weight: 550; color: var(--text); margin-bottom: 9px; }
.retro-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.retro-row .select-input { width: auto; min-width: 180px; flex: 0 0 auto; padding: 10px 40px 10px 14px; }
.retro-out { font-size: 0.95rem; color: var(--text); }
.retro-out b { color: var(--ok); }
.mb-caveat { margin: 14px 0 0; font-size: 0.78rem; color: var(--text-dimmer); line-height: 1.5; }

/* difficulty + time-to-apply meta row on cards */
.bmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.8rem; color: var(--text-dim); }
.bm b { color: var(--text); font-weight: 550; }
.bm-diff { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bm-diff .dots { letter-spacing: 1px; font-size: 0.6rem; }
.bm-diff.easy { color: var(--ok); }
.bm-diff.med { color: var(--warn); }
.bm-diff.hard { color: #e0605e; }

/* priority rank badge */
.rank-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--bg); font-size: 0.78rem; font-weight: 700; flex: none; }
.benefit.master .rank-badge { background: var(--accent-hi); color: var(--btn-ink); }

.results-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 18px 0 4px; }
.applied-progress { font-size: 0.86rem; color: var(--text-dim); }
.applied-progress b { color: var(--ok); }
.tool-btn { appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text); border: 1px solid var(--hair); border-radius: var(--pill); padding: 8px 15px; font-size: 0.85rem; font-weight: 550; transition: border-color 0.15s; }
.tool-btn:hover { border-color: var(--hair-2); }
.tool-btn .ic { width: 15px; height: 15px; color: var(--text-dim); }

.group-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 500; color: var(--text-dim); margin: 40px 0 8px; }
.group-title .gi { display: inline-flex; }
.group-title .gi .ic { width: 16px; height: 16px; }
.group-title.ready .gi .ic { color: var(--ok); }
.group-title.almost .gi .ic { color: var(--warn); }
.group-title .count { font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text-dim); }

/* benefits are now flowing rows separated by hairlines — not boxes */
.benefit { position: relative; padding: 22px 4px 22px 18px; border-top: 1px solid var(--hair); transition: background 0.18s; }
.benefit:last-of-type { border-bottom: 1px solid var(--hair); }
.benefit::before { content: ""; position: absolute; left: 0; top: 26px; width: 3px; height: 22px; border-radius: 999px; background: var(--text-dimmer); }
.benefit.ready::before { background: var(--ok); }
.benefit.almost::before { background: var(--warn); }
.benefit.master::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.benefit.master { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); border-radius: var(--r-sm); }
/* progress-tracker treatment of the card's status bar */
.benefit.stage-saved::before, .benefit.stage-submitted::before { background: var(--accent); }
.benefit.stage-approved::before { background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent); }
.benefit.stage-denied::before { background: #e0605e; }

.benefit .top { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.benefit h3 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.025em; flex: 1 1 auto; min-width: 55%; }
.tag { font-size: 0.68rem; font-weight: 550; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); color: var(--text-dim); white-space: nowrap; }
.tag.lvl { color: var(--accent-hi); background: var(--accent-soft); }
.amount { display: block; margin: 12px 0 0; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--ok); }
.amount-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--hair); border-radius: 5px; padding: 2px 6px; margin-right: 8px; vertical-align: middle; }
.amount-sub { display: block; margin-top: 3px; font-size: 0.83rem; font-weight: 500; color: var(--text-dim); }
.detail-amount-sub { margin: 4px 0 20px; font-size: 0.92rem; color: var(--text-dim); }
.benefit.almost .amount { color: var(--warn); }
.benefit.master .amount { color: var(--accent-hi); }
.benefit .summary { margin: 5px 0 0; color: var(--text); font-size: 0.95rem; line-height: 1.5; }

.master-flag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 600; color: var(--accent-hi); margin-bottom: 8px; }
.master-flag .ic { width: 15px; height: 15px; }

.needs { margin-top: 13px; padding: 2px 0 2px 14px; border-left: 2px solid var(--warn); font-size: 0.89rem; }
.needs .needs-h { font-weight: 600; color: var(--warn); margin-bottom: 4px; }
.needs ul { margin: 0; padding-left: 16px; color: var(--text); }
.needs li { margin: 3px 0; }

.apply-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.apply { display: inline-flex; align-items: center; gap: 7px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 550; font-size: 0.9rem; letter-spacing: -0.01em; padding: 10px 16px; border-radius: var(--pill); border: none; font-family: inherit; cursor: pointer; transition: filter 0.15s, transform 0.06s; }
.apply .ic { width: 16px; height: 16px; }
.apply:hover { filter: brightness(1.08); }
.apply:active { transform: translateY(1px); }
.apply.secondary { background: transparent; color: var(--text); border: 1px solid var(--hair-2); }
/* per-card progress tracker (Not started → Approved/Denied) */
.track { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--hair); border-radius: var(--pill); padding: 3px 4px 3px 12px; background: transparent; transition: border-color 0.15s, background 0.15s; }
.track:hover { border-color: var(--hair-2); }
.track .track-ic { display: inline-flex; color: var(--text-dim); }
.track .track-ic .ic { width: 15px; height: 15px; }
.track-sel { appearance: none; font-family: inherit; font-size: 0.84rem; font-weight: 550; color: var(--text-dim); background: transparent; border: none; cursor: pointer; padding: 5px 24px 5px 4px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 11px) center, calc(100% - 7px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.track-sel:focus { outline: none; }
.track-sel option { background: var(--panel); color: var(--text); }
.track.saved     { background: var(--accent-soft); border-color: var(--accent-line); }
.track.submitted { background: var(--accent-soft); border-color: var(--accent-line); }
.track.gathering { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.track.waiting   { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.track.approved  { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.track.denied    { background: rgba(224, 96, 94, 0.13); border-color: rgba(224, 96, 94, 0.45); }
.track.saved .track-ic, .track.saved .track-sel, .track.submitted .track-ic, .track.submitted .track-sel { color: var(--accent-hi); }
.track.gathering .track-ic, .track.gathering .track-sel, .track.waiting .track-ic, .track.waiting .track-sel { color: var(--warn); }
.track.approved .track-ic, .track.approved .track-sel { color: var(--ok); }
.track.denied .track-ic, .track.denied .track-sel { color: #e0605e; }

/* group-by toggle (priority ↔ category dashboard) */
.group-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: var(--pill); }
.gt-btn { appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--text-dim); border: none; border-radius: var(--pill); padding: 6px 13px; font-size: 0.82rem; font-weight: 550; transition: background 0.15s, color 0.15s; }
.gt-btn .ic { width: 14px; height: 14px; }
.gt-btn:hover { color: var(--text); }
.gt-btn.on { background: var(--panel-2); color: var(--text); }

/* "Your progress" summary strip */
.tracker-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 820px; margin: 16px 0 2px; }
.ts-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.ts-lbl .ic { width: 15px; height: 15px; }
.ts-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 550; color: var(--text-dim); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hair); }
.ts-pill .ic { width: 14px; height: 14px; }
.ts-pill b { color: var(--text); }
.ts-pill.approved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.ts-pill.approved b { color: var(--ok); }
.ts-pill.denied { color: #e0605e; border-color: rgba(224, 96, 94, 0.4); }
.ts-pill.denied b { color: #e0605e; }
.ts-pill.saved, .ts-pill.submitted { color: var(--accent-hi); }
.ts-pill.gathering, .ts-pill.waiting { color: var(--warn); }
.source-link { font-size: 0.82rem; color: var(--text-dimmer); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.source-link:hover { color: var(--text-dim); }
.source-link .ic { width: 13px; height: 13px; }

details.notmatch { margin-top: 22px; }
details.notmatch summary { cursor: pointer; list-style: none; font-size: 0.9rem; color: var(--text-dim); padding: 14px 0; border-top: 1px solid var(--hair); }
details.notmatch summary::-webkit-details-marker { display: none; }
.nm-item { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 0.9rem; }
.nm-item b { display: block; font-weight: 550; }
.nm-item .why { color: var(--text-dim); font-size: 0.85rem; }

.restart { display: inline-flex; margin: 34px auto 0; }
.disclaimer { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 0.8rem; color: var(--text-dimmer); line-height: 1.65; max-width: 62ch; }
.disclaimer a { color: var(--text-dim); }

/* ---------------------------------------------------------------- detail guide */
.back-link { appearance: none; background: transparent; border: none; color: var(--text-dim); font-family: inherit; font-size: 0.92rem; font-weight: 500; cursor: pointer; padding: 6px 0; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 7px; transition: color 0.15s; }
.back-link:hover { color: var(--text); }
.back-link .ic { width: 16px; height: 16px; }
.back-link.bottom { margin-top: 26px; }

.detail-tags { display: flex; gap: 8px; margin-bottom: 12px; }
.detail-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(1.8rem, 4.6vw, 2.5rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 6px; }
.detail-amount { color: var(--accent-hi); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 20px; }

.status-banner { padding: 12px 0 12px 15px; margin-bottom: 22px; font-size: 0.92rem; border-left: 2px solid var(--ok); display: flex; gap: 9px; }
.status-banner.almost { border-left-color: var(--warn); }
.status-banner.maybe { border-left-color: var(--warn); }
.status-banner.maybe .ic { color: var(--warn); }
.status-banner.maybe b { color: var(--text); }

/* Phase-2 sections */
.callout { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.callout .co-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); flex: none; }
.callout .co-ic .ic { width: 17px; height: 17px; }
.callout b { display: block; font-size: 0.92rem; margin-bottom: 2px; }
.callout p { margin: 0; font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; }

.warn-list li::before { background: var(--warn) !important; }
.p2-text { color: var(--text); font-size: 0.96rem; line-height: 1.6; margin: 0; }

.faqs { display: grid; gap: 8px; }
.faq { border: 1px solid var(--hair); border-radius: 11px; overflow: hidden; }
.faq > summary { list-style: none; cursor: pointer; padding: 13px 15px; font-size: 0.94rem; font-weight: 550; display: flex; align-items: center; justify-content: space-between; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; color: var(--text-dim); font-size: 1.1rem; }
.faq[open] > summary::after { content: "−"; }
.faq > p { margin: 0; padding: 0 15px 14px; font-size: 0.92rem; color: var(--text-dim); line-height: 1.55; }

.related-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.related-chip { appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--pill); padding: 9px 15px; font-size: 0.9rem; font-weight: 550; color: var(--text); transition: border-color 0.15s, background 0.15s; }
.related-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.related-chip .ic { width: 14px; height: 14px; color: var(--text-dim); }

.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.verified .ic { width: 13px; height: 13px; }
.status-banner .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok); }
.status-banner.almost .ic { color: var(--warn); }
.status-banner ul { margin: 8px 0 0; padding-left: 16px; }
.status-banner li { margin: 3px 0; }

.detail-about { color: var(--text); font-size: 1.02rem; line-height: 1.6; margin: 0 0 4px; }
.note { margin-top: 14px; padding: 2px 0 2px 15px; border-left: 2px solid var(--hair-2); font-size: 0.9rem; color: var(--text-dim); line-height: 1.55; }
.note b { color: var(--text); font-weight: 550; }

.guide-block { margin-top: 30px; }
.guide-h { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.04rem; margin-bottom: 14px; }
.guide-h .ic { width: 18px; height: 18px; color: var(--accent-hi); }
.guide-list { margin: 0; padding: 0; list-style: none; counter-reset: g; }
.guide-list li { position: relative; padding: 0 0 0 34px; margin: 11px 0; color: var(--text); font-size: 0.96rem; line-height: 1.55; }
ol.guide-list li { counter-increment: g; }
ol.guide-list li::before { content: counter(g); position: absolute; left: 0; top: -1px; width: 23px; height: 23px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-hi); font-size: 0.76rem; font-weight: 700; display: grid; place-items: center; }
ul.guide-list li::before { content: ""; position: absolute; left: 9px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
@media (max-width: 520px) { .meta-grid { grid-template-columns: 1fr; gap: 16px; } }
.meta-item { font-size: 0.95rem; color: var(--text); }
.meta-item span { display: block; color: var(--text-dim); font-size: 0.78rem; margin-bottom: 3px; }

.apply-row.big { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair); }
.apply-row.big .apply { padding: 12px 20px; font-size: 0.95rem; }
.detail-foot { margin: 14px 0 0; font-size: 0.82rem; color: var(--text-dimmer); line-height: 1.55; }

/* ---------------------------------------------------------------- feedback */
.feedback { margin-top: 66px; padding-top: 40px; border-top: 1px solid var(--hair); }
.feedback .section-title { margin: 12px 0 8px; }
.feedback-lead { color: var(--text-dim); margin: 0 0 22px; font-size: 0.98rem; line-height: 1.55; max-width: 56ch; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 560px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-field { display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; font-weight: 550; color: var(--text-dim); margin-bottom: 14px; }
.fb-field .opt-tag { color: var(--text-dimmer); font-weight: 400; }
.feedback .btn-primary { flex: 0 0 auto; }
.fb-note { margin: 14px 0 0; font-size: 0.83rem; color: var(--text-dimmer); line-height: 1.5; }
.fb-note.err { color: var(--warn); }
.fb-note b { color: var(--text); }

.select-input, .text-input {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--r-sm);
  padding: 13px 15px; transition: border-color 0.15s; appearance: none; -webkit-appearance: none;
}
.select-input { background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; cursor: pointer; }
.select-input:hover, .text-input:hover { border-color: var(--hair-2); }
.select-input:focus, .text-input:focus { outline: none; border-color: var(--accent-line); }
textarea.text-input { resize: vertical; min-height: 96px; line-height: 1.5; }
.select-input option { background: var(--panel); color: var(--text); }

/* =============================================================================
   WIDE, LEFT-ALIGNED LAYOUT
   ========================================================================== */
/* -------- full-bleed atmospheric hero (Giga-style: open, fades into dark) ---- */
.hero-full {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: -40px;
  min-height: 90vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
@media (max-width: 640px) { .hero-full { margin-top: -32px; min-height: 82vh; } }
.hero-atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg,
    #74849b 0%, #8f8792 20%, #bda087 40%, #6f5847 60%, var(--bg) 84%); }
:root[data-theme="light"] .hero-atmos {
  background: linear-gradient(180deg,
    #b9c6d6 0%, #dcc9c2 30%, #e7d3b8 52%, #cbb59a 70%, var(--bg) 92%); }
.hero-bloom { position: absolute; top: -14%; left: 50%; width: min(1000px, 120%); height: 900px;
  background: radial-gradient(circle at 50% 45%, rgba(255,243,224,0.55), rgba(255,222,192,0.16) 34%, transparent 62%);
  filter: blur(24px); transform: translateX(-50%); animation: heroBloom 15s ease-in-out infinite; }
@keyframes heroBloom {
  0%, 100% { transform: translate(-53%, 0) scale(1); opacity: 0.8; }
  50%      { transform: translate(-46%, -3%) scale(1.09); opacity: 1; } }
.hero-ridges { position: absolute; left: -3%; right: -3%; bottom: 0; width: 106%; height: 64%; z-index: 1;
  animation: ridgeDrift 26s ease-in-out infinite alternate; }
/* animated warm glow drifting along the horizon (the "moving part" at the bottom) */
.hero-atmos::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 8%; height: 42%; z-index: 1;
  background: radial-gradient(55% 100% at 42% 100%, rgba(224,164,110,0.30), rgba(224,164,110,0) 68%);
  filter: blur(34px); animation: horizonDrift 19s ease-in-out infinite alternate; }
@keyframes ridgeDrift { from { transform: translateX(-1.6%); } to { transform: translateX(1.6%); } }
@keyframes horizonDrift { from { transform: translateX(-7%) scaleX(0.96); } to { transform: translateX(9%) scaleX(1.05); } }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--bg) 90%); }
/* flowing animated wave at the hero → content boundary */
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-wave .hw { position: absolute; bottom: -1px; left: 0; width: 200%; height: 100%; }
.hero-wave .hw-a { fill: color-mix(in srgb, #6c98d6 42%, transparent); animation: waveFlow 15s linear infinite; }
.hero-wave .hw-b { fill: color-mix(in srgb, #5fd8c6 30%, transparent); opacity: 0.75; animation: waveFlow 24s linear infinite reverse; }
@keyframes waveFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* wizard scene — layered mountain ridges that slowly drift (parallax) */
.wiz-mountains { position: fixed; left: 0; right: 0; bottom: 0; height: min(52vh, 520px); z-index: 0; pointer-events: none; overflow: hidden; }
.wiz-mountains .wm { position: absolute; left: -4%; bottom: -1px; width: 108%; height: 100%; }
.wiz-mountains .wm-3 { fill: color-mix(in srgb, #6c88c0 20%, transparent); animation: wmDrift 30s ease-in-out infinite alternate; }
.wiz-mountains .wm-2 { fill: color-mix(in srgb, #5f9fb0 26%, var(--bg)); animation: wmDrift 22s ease-in-out infinite alternate-reverse; }
.wiz-mountains .wm-1 { fill: color-mix(in srgb, var(--bg) 78%, #4a5568); animation: wmDrift 15s ease-in-out infinite alternate; }
:root[data-theme="light"] .wiz-mountains .wm-3 { fill: color-mix(in srgb, #7a96cc 34%, transparent); }
:root[data-theme="light"] .wiz-mountains .wm-2 { fill: color-mix(in srgb, #6fa6b8 40%, var(--bg)); }
:root[data-theme="light"] .wiz-mountains .wm-1 { fill: color-mix(in srgb, var(--bg) 40%, #b9a888); }
.wiz-mountains::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg), transparent 30%, transparent 72%, color-mix(in srgb, var(--bg) 70%, transparent)); }
@keyframes wmDrift { from { transform: translateX(-2.2%); } to { transform: translateX(2.2%); } }
.hero-inner {
  position: relative; z-index: 2; max-width: 1000px; margin: 0 auto;
  padding: 132px 24px 96px; display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 1px 26px rgba(10, 8, 6, 0.4);
}
:root[data-theme="light"] .hero-inner { text-shadow: 0 1px 22px rgba(255, 252, 246, 0.5); }
.hero-inner::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1;
  background: radial-gradient(56% 52% at 50% 50%, color-mix(in srgb, var(--bg) 66%, transparent), transparent 72%); }
.hero-full .eyebrow { color: var(--text); opacity: 0.92; }
.hero-full .hero-sub { color: color-mix(in srgb, var(--text) 86%, transparent); margin: 0 auto 30px; }
.hero-full .hero-cta { justify-content: center; margin-top: 6px; }
.hero-full .trust { justify-content: center; border-top: none; padding-top: 4px; color: color-mix(in srgb, var(--text) 78%, transparent); }

/* app preview — a centered "peek" that overlaps the hero's fade */
.hero-preview-wrap { display: flex; justify-content: center; position: relative; z-index: 3; margin: -78px 0 8px; }
@media (max-width: 640px) { .hero-preview-wrap { margin-top: -54px; } }
.preview {
  width: 100%; max-width: 640px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair-2); border-radius: 20px;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.85);
  padding: 18px 20px; animation: floaty 7s ease-in-out infinite;
}
.pv-row { transition: background 0.18s var(--ease), padding-left 0.18s var(--ease); border-radius: 10px; }
.pv-row:hover { background: var(--accent-soft); padding-left: 12px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.preview-top { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-dim); padding: 4px 4px 14px; }
.preview-top b { color: var(--text); font-weight: 600; }
.preview-top .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); flex: none; }
.preview-top .pv-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.68rem; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 3px 9px 3px 7px; border-radius: 999px; }
.preview-top .pv-badge .ic { width: 12px; height: 12px; }

/* Giga-style value "gauge" header inside the preview */
.pv-hero { display: flex; align-items: center; gap: 18px; padding: 14px 4px 16px; margin-bottom: 6px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.pv-hero-l { display: flex; flex-direction: column; gap: 2px; flex: none; }
.pv-hero-lbl { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; color: var(--text-dimmer); }
.pv-hero-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.pv-hero-val i { font-style: normal; font-size: 0.9rem; color: var(--text-dim); font-family: var(--font-sans); }
.pv-gauge { position: relative; flex: 1; height: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent); }
.pv-gauge-fill { position: absolute; inset: 0 26% 0 0; border-radius: 999px;
  background: linear-gradient(90deg, #6c98d6, #5fd8c6 45%, #e0c06a 80%, #e0a44e);
  animation: gaugeFill 3.4s var(--ease) 0.3s both; }
@keyframes gaugeFill { from { right: 100%; } to { right: 26%; } }
.pv-gauge-tick { position: absolute; top: -3px; width: 2px; height: 18px; border-radius: 2px; background: var(--text); opacity: 0.5; }
.pv-list { padding-top: 2px; }
.pv-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--hair); }
.pv-row:last-child { border-bottom: none; }
.pv-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hi); display: grid; place-items: center; flex: none; }
.pv-ic .ic { width: 18px; height: 18px; }
.pv-meta { flex: 1; min-width: 0; }
.pv-meta b { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.02em; }
.pv-meta span { font-size: 0.78rem; color: var(--text-dim); }
.pv-check { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.pv-check .ic { width: 14px; height: 14px; }
.pv-lock { color: var(--text-dimmer); }
.pv-lock .ic { width: 16px; height: 16px; }

/* how-it-works → 3 columns across the width */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; gap: 0; } }
.step3 { display: block; border-top: 2px solid var(--hair); padding: 20px 0 0; }
.step3-n { display: block; margin-bottom: 12px; }

/* wizard → focused card with a reassurance rail */
.wizard-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: clamp(48px, 8vw, 120px); align-items: start; }
@media (max-width: 900px) { .wizard-layout { grid-template-columns: 1fr; } .wizard-aside { display: none; } }
.wizard-aside { position: sticky; top: 92px; }
.aside-card { border: none; border-left: 1px solid var(--hair); border-radius: 0; padding: 4px 0 4px 26px; background: none; }
.aside-card h4 { margin: 0 0 14px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; }
.aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aside-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; }
.aside-list .ic { width: 17px; height: 17px; color: var(--accent-hi); flex: none; margin-top: 1px; }
.aside-list b { color: var(--text); font-weight: 550; }

/* results → OPEN, full-width rows separated by hairlines (no boxes) */
.benefits-grid { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.benefits-grid .benefit {
  border: none; border-top: 1px solid var(--hair); background: transparent; border-radius: 0;
  padding: 40px 8px 40px 26px;
  transition: background 0.25s var(--ease);
}
.benefits-grid .benefit:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 42%); }
.benefits-grid .benefit::before { top: 46px; height: 30px; }
.benefits-grid .benefit:last-of-type { border-bottom: none; }
.benefits-grid .benefit.master { background: linear-gradient(90deg, var(--accent-soft), transparent 55%); }

/* full-width row → main content stretches left, value + actions sit at the right edge */
.benefit-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26%, 380px); gap: clamp(32px, 3.5vw, 60px); align-items: start; }
@media (max-width: 760px) { .benefit-row { grid-template-columns: 1fr; gap: 20px; } }
.benefit-main { min-width: 0; }
.benefit-main .top h3 { font-size: 1.28rem; }
.benefit-main .summary { margin-top: 12px; max-width: 86ch; font-size: 1.02rem; }
.benefit-main .bmeta { margin-top: 16px; }
.benefit-side { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 761px) {
  .benefit-side { align-items: flex-end; text-align: right; }
  .benefit-side .amount, .benefit-side .amount-sub { text-align: right; }
}
.benefit-side .amount { margin-top: 0; font-size: 1.3rem; }
.benefit-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 280px; }
@media (min-width: 761px) { .benefit-actions { align-items: flex-end; } }
.benefit-actions .apply { justify-content: center; }

.results-head, .results-tools, .group-title, .answers-bar, .tracker-summary { max-width: 1000px; }

/* editable answer chips */
.answers-bar { margin: 20px 0 4px; }
.answers-lbl { display: block; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; font-family: inherit; cursor: pointer;
  font-size: 0.83rem; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: 6px 13px;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-hi); }

/* =============================================================================
   SUPPORTS & STRATEGIES — their own collapsible category sections
   ========================================================================== */
.supports-area { margin-top: 54px; padding-top: 38px; border-top: 1px solid var(--hair); max-width: 1180px; }
.supports-heading { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.12; }
.supports-sub { color: var(--text-dim); margin: 0 0 22px; font-size: 0.98rem; line-height: 1.5; }

.support-section { border-top: 1px solid var(--hair); }
.support-section:last-child { border-bottom: 1px solid var(--hair); }
.support-section > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px;
  padding: 18px 4px; font-size: 1.02rem; font-weight: 550; letter-spacing: -0.02em;
  transition: color 0.15s;
}
.support-section > summary:hover { color: var(--accent-hi); }
.support-section > summary::-webkit-details-marker { display: none; }
.support-section .ss-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); flex: none; }
.support-section .ss-ic .ic { width: 18px; height: 18px; color: var(--accent-hi); }
.support-section .ss-name { flex: 1; }
.support-section .count { font-size: 0.72rem; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text-dim); }
.support-section .ss-chev { display: inline-flex; color: var(--text-dim); transition: transform 0.25s var(--ease); }
.support-section .ss-chev .ic { width: 17px; height: 17px; }
.support-section[open] > summary { color: var(--text); }
.support-section[open] .ss-chev { transform: rotate(90deg); }

.support-list { display: grid; gap: 14px; padding: 2px 0 24px; }
.support-card { background: var(--panel); border-radius: 16px; padding: 24px 26px; }
.support-card h3 { display: flex; align-items: center; gap: 11px; margin: 0 0 8px; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; }
.support-card h3 .ic { width: 19px; height: 19px; color: var(--accent-hi); flex: none; }
.support-card .summary { color: var(--text-dim); font-size: 0.96rem; margin: 0; line-height: 1.5; }
.support-tips { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.support-tips li { position: relative; padding-left: 22px; font-size: 0.94rem; color: var(--text); line-height: 1.55; }
.support-tips li::before { content: ""; position: absolute; left: 5px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* resource link — a purposeful, tappable recommendation, not a stray button */
.support-resource {
  display: flex; align-items: center; gap: 13px; margin-top: 20px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--hair);
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.support-resource:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.support-resource:active { transform: translateY(1px); }
.support-resource .sr-badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-hi); flex: none; }
.support-resource .sr-badge .ic { width: 18px; height: 18px; }
.support-resource .sr-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.support-resource .sr-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-dimmer); }
.support-resource .sr-text { font-size: 0.94rem; font-weight: 550; letter-spacing: -0.01em; }
.support-resource > .ic { width: 17px; height: 17px; color: var(--text-dim); flex: none; }

/* human-help directory */
.help-area { margin-top: 54px; padding-top: 38px; border-top: 1px solid var(--hair); max-width: 1180px; }
.help-area .supports-heading { display: flex; align-items: center; gap: 12px; }
.help-area .supports-heading .ic { width: 26px; height: 26px; color: var(--accent-hi); flex: none; }
.help-group { margin-top: 26px; }
.help-group-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.help-group-h .hg-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); flex: none; }
.help-group-h .hg-ic .ic { width: 18px; height: 18px; color: var(--accent-hi); }
.help-group-h .hg-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.help-group-h .hg-text b { font-size: 1rem; font-weight: 620; letter-spacing: -0.02em; }
.help-group-h .hg-blurb { font-size: 0.9rem; color: var(--text-dim); line-height: 1.45; }
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .help-list { grid-template-columns: 1fr; } }
.help-card { background: var(--panel); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; }
.help-card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.help-card .summary { color: var(--text-dim); font-size: 0.93rem; margin: 0 0 16px; line-height: 1.5; flex: 1; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.help-phone, .help-web { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 0.88rem; font-weight: 550; padding: 8px 14px; border-radius: var(--pill); border: 1px solid var(--hair); transition: border-color 0.15s, background 0.15s, transform 0.06s; }
.help-phone { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.help-web { color: var(--text); }
.help-phone:hover, .help-web:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.help-web:hover { background: var(--accent-soft); color: var(--accent-hi); }
.help-phone .ic, .help-web .ic { width: 15px; height: 15px; }

/* browse / search view */
.browse { max-width: 1400px; }
.browse .back-link { margin-bottom: 18px; }
.browse-head h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2rem, 5vw, 3rem); font-weight: 380; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.08; }
.browse-head p { color: var(--text-dim); font-size: 1rem; line-height: 1.55; margin: 0 0 22px; max-width: 660px; }
.linklike { appearance: none; background: none; border: none; font: inherit; color: var(--accent-hi); font-weight: 600; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; }
.linklike .ic { width: 15px; height: 15px; }
.linklike:hover { text-decoration: underline; }
.browse-search { position: relative; display: flex; align-items: center; margin-bottom: 16px; max-width: 560px; }
.browse-search > .ic { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--text-dim); pointer-events: none; }
.browse-search .text-input { width: 100%; padding-left: 44px; }
.browse-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.browse-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.browse-chip { appearance: none; font-family: inherit; cursor: pointer; font-size: 0.85rem; font-weight: 550; color: var(--text-dim); background: transparent; border: 1px solid var(--hair); border-radius: var(--pill); padding: 7px 14px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.browse-chip:hover { border-color: var(--hair-2); color: var(--text); }
.browse-chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hi); }
.browse-count { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 6px; }
.browse-empty { color: var(--text-dim); display: flex; align-items: center; gap: 10px; padding: 30px 0; }
.browse-empty .ic { width: 18px; height: 18px; flex: none; }

/* practitioner finder */
.finder { margin-top: 30px; padding: 20px 22px; background: var(--panel); border-radius: 14px; }
.finder-lead { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 14px; line-height: 1.5; }
.finder-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.finder-row .text-input { flex: 1; min-width: 190px; }
.finder-row .btn-ghost { flex: 0 0 auto; }
.finder-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.finder-btns .apply { text-transform: none; }

/* privacy & disclaimer page */
.legal { max-width: 780px; }
.legal .back-link { margin-bottom: 20px; }
.legal-title { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 380; letter-spacing: -0.02em; line-height: 1.08; margin: 6px 0 12px; }
.legal-lede { color: var(--text-dim); font-size: 1.15rem; line-height: 1.5; margin: 0 0 10px; max-width: 60ch; }
.legal-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair); }
.legal-block h2 { font-size: 1.1rem; font-weight: 620; letter-spacing: -0.02em; margin: 0 0 10px; }
.legal-block p { color: var(--text); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 68ch; }
.legal-block p b { font-weight: 600; }

/* site footer */
.site-footer { margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.sf-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.sf-brand .ic { width: 18px; height: 18px; color: var(--accent-hi); }
.sf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; font-size: 0.9rem; }
.sf-note { color: var(--text-dimmer); font-size: 0.82rem; }
.finder-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--text-dimmer); line-height: 1.5; }
.finder-flag { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 0.9rem; line-height: 1.5; }
.finder-flag .ic { width: 17px; height: 17px; color: var(--accent-hi); flex: none; margin-top: 2px; }
.finder-ask { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.finder-ask-h { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.finder-ask ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.finder-ask li { font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; }

.fb-lbl { display: block; }

/* detail reads best in a measured column */
/* ---- guide / detail: full-width header + two-column body with sticky rail ---- */
.detail { max-width: 1280px; }
.detail-hero { max-width: 940px; margin-bottom: 34px; }
.detail-lede { color: var(--text-dim); font-size: 1.18rem; line-height: 1.5; margin: 16px 0 0; max-width: 58ch; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(44px, 5vw, 88px); align-items: start; }
@media (max-width: 960px) { .detail-body { grid-template-columns: 1fr; gap: 34px; } .detail-side { order: -1; position: static; } }
.detail-main { min-width: 0; max-width: 740px; }
.detail-side { position: sticky; top: calc(var(--nav-h) + 22px); }
.side-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, var(--panel)), var(--panel) 70%);
  border: 1px solid var(--hair-2); border-radius: 20px; padding: 26px 26px 24px;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.65);
}
.side-status { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
.side-status.ready { color: var(--ok); background: var(--ok-soft); }
.side-status.almost, .side-status.maybe { color: var(--warn); background: var(--warn-soft); }
.side-card .detail-amount { font-size: 1.55rem; margin-bottom: 4px; }
.side-card .detail-amount-sub { margin: 4px 0 0; font-size: 0.9rem; }
.side-facts { margin: 20px 0 22px; }
.fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 0.92rem; }
.fact:first-child { border-top: none; }
.fact dt { color: var(--text-dim); flex: none; }
.fact dd { margin: 0; text-align: right; font-weight: 500; color: var(--text); }
.fact-diff .dots { letter-spacing: 1px; margin-right: 4px; font-size: 0.78rem; }
.fact-diff.easy { color: var(--ok); } .fact-diff.med { color: var(--warn); } .fact-diff.hard { color: #e0605e; }
.side-actions { display: flex; flex-direction: column; gap: 10px; }
.side-actions .apply { justify-content: center; padding: 13px 18px; }
.side-actions .source-link { justify-content: center; margin-top: 4px; }
.side-foot { margin: 16px 0 0; text-align: center; font-size: 0.8rem; }

/* ---------------------------------------------------------------- a11y toolbar */
.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; }
.a11y-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.a11y-fab { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--accent); color: var(--bg); cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.7); transition: transform 0.12s, filter 0.15s; }
.a11y-fab .ic { width: 24px; height: 24px; }
.a11y-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.a11y-panel { position: absolute; right: 0; bottom: 64px; width: 286px; background: var(--panel); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); padding: 15px; display: flex; flex-direction: column; gap: 7px; animation: rise 0.22s var(--ease); }
.a11y-panel[hidden] { display: none; }
.a11y-title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
.a11y-close { appearance: none; background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.a11y-close .ic { width: 18px; height: 18px; }
.a11y-close:hover { color: var(--text); }
.a11y-read { display: flex; align-items: center; gap: 10px; appearance: none; font-family: inherit; cursor: pointer; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 12px 14px; font-size: 0.92rem; font-weight: 550; text-align: left; }
.a11y-read .ic { width: 18px; height: 18px; color: var(--accent-hi); }
.a11y-read:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.a11y-read.speaking { background: var(--accent); color: var(--bg); }
.a11y-read.speaking .ic { color: var(--bg); }
.a11y-size-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; padding: 6px 2px; }
.a11y-size { display: flex; gap: 6px; }
.a11y-size button { appearance: none; font-family: inherit; cursor: pointer; width: 40px; height: 34px; border-radius: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--hair); font-size: 0.9rem; font-weight: 600; }
.a11y-size button:hover { border-color: var(--hair-2); }
.a11y-toggle { display: flex; align-items: center; justify-content: space-between; appearance: none; font-family: inherit; cursor: pointer; text-align: left; background: var(--panel-2); color: var(--text); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 11px 14px; font-size: 0.9rem; font-weight: 500; }
.a11y-toggle:hover { border-color: var(--hair-2); }
.a11y-toggle .sw { width: 38px; height: 22px; border-radius: 999px; background: var(--hair-2); position: relative; transition: background 0.15s; flex: none; }
.a11y-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.a11y-toggle[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.a11y-toggle[aria-pressed="true"] .sw { background: var(--accent); }
.a11y-toggle[aria-pressed="true"] .sw::after { transform: translateX(16px); }
.a11y-resetall { appearance: none; font-family: inherit; cursor: pointer; margin-top: 4px; background: transparent; color: var(--text-dim); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 10px; font-size: 0.85rem; }
.a11y-resetall:hover { border-color: var(--hair-2); color: var(--text); }

.reading-guide { position: fixed; left: 0; right: 0; top: 0; height: 2.4em; background: rgba(233, 221, 201, 0.08); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; z-index: 70; display: none; }
body.a11y-guide .reading-guide { display: block; }

/* per-sentence read-aloud highlight */
.tts-active { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); border-radius: 5px; }

/* a11y modes */
body.a11y-spacing { letter-spacing: 0.045em; word-spacing: 0.16em; }
body.a11y-spacing p, body.a11y-spacing li, body.a11y-spacing .summary, body.a11y-spacing .step-help, body.a11y-spacing .detail-about, body.a11y-spacing .hero-sub { line-height: 1.9; }
body.a11y-spacing #app { font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif; }
body.a11y-links a, body.a11y-links .apply, body.a11y-links .source-link, body.a11y-links .back-link { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600; }
body.a11y-nomotion *, body.a11y-nomotion *::before, body.a11y-nomotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.a11y-contrast { --bg: #000; --bg-2: #000; --panel: #0b0b0b; --panel-2: #151515; --hair: rgba(255,255,255,0.5); --hair-2: rgba(255,255,255,0.8); --text: #fff; --text-dim: #ececec; --text-dimmer: #d0d0d0; --accent: #f4ead6; --accent-hi: #ffffff; --ok: #5ce6a0; --warn: #ffd27a; }
body.a11y-contrast::before { display: none; }
body.a11y-contrast .wizard-card, body.a11y-contrast .opt, body.a11y-contrast .cat { border-width: 2px; }

/* ---------------------------------------------------------------- print */
@media (prefers-reduced-motion: reduce) {
  .hero-bloom, .preview, .hero-ridges, .hero-atmos::after, body::before,
  .brand-needle, .brand-bezel, .brand-mark::after, .hero-wave .hw, .wiz-mountains .wm { animation: none !important; }
}
body.a11y-nomotion .hero-ridges, body.a11y-nomotion .hero-atmos::after,
body.a11y-nomotion::before, body.a11y-nomotion .brand-needle,
body.a11y-nomotion .brand-bezel, body.a11y-nomotion .brand-mark::after,
body.a11y-nomotion .hero-wave .hw, body.a11y-nomotion .wiz-mountains .wm { animation: none !important; }

@media print {
  .nav, .progress, .a11y-wrap, .reading-guide, .results-tools, .tracker-summary, .track, .apply-row, .restart, .disclaimer, details.notmatch, .back-link { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
  .benefit { border: 1px solid #ccc !important; border-radius: 8px; padding: 14px; margin-bottom: 10px; break-inside: avoid; }
  .amount { color: #000 !important; }
}