/* ==========================================================================
   FigureMill — design system
   Self-hosted type, warm paper surfaces, category accents.
   No frameworks, no runtime CSS-in-JS.
   ========================================================================== */

/* ---------- Type ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/space-grotesk-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --paper: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #f1eee7;
  --field: #fbfaf7;
  --ink: #15171e;
  --ink-2: #4c5464;
  --ink-3: #7a8291;
  --line: #e6e1d6;
  --line-2: #d6d0c3;

  /* Blueprint navy rather than indigo-600. Cream + navy is the technical-document
     pairing this site is imitating (drawings, spec sheets); indigo/violet reads as
     generic SaaS and undercuts the "we show the work" premise. */
  --brand: #1e3a8a;
  --brand-2: #1e40af;
  --brand-dark: #172554;
  --brand-soft: #e9eef9;
  --teal: #0d9488;
  --grad-end: #0f766e;

  --ok: #0f7a55;
  --ok-soft: #e6f4ee;
  --warn: #a15c07;
  --warn-soft: #fbf1de;
  --danger: #c0322b;
  --danger-soft: #fdecea;

  --cat-finance: #047857;
  --cat-diy: #b45309;
  --cat-students: #0369a1;
  --cat-dev: #6d28d9;
  --cat-words: #be123c;

  /* The three live clusters. These names must match the body class each page
     carries (cat-materials / cat-hvac / cat-hometax) or every accent silently
     falls back to brand indigo and the colour coding does nothing. */
  --cat-materials: #b45309;
  --cat-hvac: #0f766e;
  --cat-hometax: #047857;

  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-xs: 0 1px 2px rgba(20, 24, 35, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 24, 35, 0.04), 0 6px 16px -10px rgba(20, 24, 35, 0.18);
  --shadow: 0 2px 4px rgba(20, 24, 35, 0.04), 0 22px 44px -26px rgba(20, 24, 35, 0.28);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);

  --max: clamp(1140px, 92vw, 1720px);
  --prose: min(720px, 68ch);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0d13;
    --surface: #11161f;
    --surface-2: #0d121a;
    --field: #0c1119;
    --ink: #edf0f6;
    --ink-2: #a7b1c2;
    --ink-3: #7c8798;
    --line: #212936;
    --line-2: #303a4c;

    --brand: #93b4f5;
    --brand-2: #b8ccf7;
    --brand-dark: #b8ccf7;
    --brand-soft: #121a2b;
    --teal: #2dd4bf;
    --grad-end: #5eead4;

    --ok: #6ee7b7;
    --ok-soft: #0e2a22;
    --warn: #fbbf24;
    --warn-soft: #2b210f;
    --danger: #fca5a5;
    --danger-soft: #2f1515;

    --cat-finance: #34d399;
    --cat-diy: #fbbf24;
    --cat-students: #38bdf8;
    --cat-dev: #a78bfa;
    --cat-words: #fb7185;

    --cat-materials: #f0b23e;
    --cat-hvac: #2dd4bf;
    --cat-hometax: #4ade9d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -12px rgba(0, 0, 0, 0.7);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 26px 50px -28px rgba(0, 0, 0, 0.8);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { font-size: 17px; }

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(820px 420px at 8% -6%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 68%),
    radial-gradient(680px 360px at 96% -10%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%);
  background-repeat: no-repeat;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 38%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12; margin: 0 0 0.55em; letter-spacing: -0.03em; font-weight: 600;
}
h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.05rem); font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem); margin-top: 2.1rem; text-wrap: balance; }
h3 { font-size: 1.14rem; margin-top: 1.5rem; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- Category accents ---------- */
.cat-finance { --cat: var(--cat-finance); }
.cat-tax { --cat: var(--cat-finance); }
.cat-diy { --cat: var(--cat-diy); }
.cat-students { --cat: var(--cat-students); }
.cat-dev { --cat: var(--cat-dev); }
.cat-words { --cat: var(--cat-words); }
.cat-materials { --cat: var(--cat-materials); }
.cat-hvac { --cat: var(--cat-hvac); }
.cat-hometax { --cat: var(--cat-hometax); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.04em;
  color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand) 10%, var(--brand-2) 90%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 14px -8px color-mix(in srgb, var(--brand) 80%, transparent);
  color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
}
.brand em { font-style: normal; color: var(--brand); }

.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  font-size: 0.92rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  padding: 8px 13px; border-radius: 999px; transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 9px 15px; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-xs);
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; width: 100%; margin-left: 0; margin-top: 10px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 12px 14px; font-size: 1rem; border-radius: 9px; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 0.85rem; color: var(--ink-3); padding: 18px 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 7px; color: var(--line-2); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Page head ---------- */
.page-head { padding: 26px 0 8px; max-width: 780px; }
.page-head .lede { font-size: 1.06rem; color: var(--ink-2); margin-bottom: 0.4em; max-width: 64ch; }
.category-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cat, var(--brand));
  background: color-mix(in srgb, var(--cat, var(--brand)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, var(--brand)) 22%, transparent);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.category-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

main { padding-bottom: 64px; }
section[id] { scroll-margin-top: 92px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 26px;
}
.tool-card { position: relative; margin: 24px 0 10px; overflow: hidden; }
.tool-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cat, var(--brand)), color-mix(in srgb, var(--cat, var(--brand)) 18%, transparent));
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
label, .label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 7px; color: var(--ink); }
.hint { font-size: 0.82rem; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

input[type="text"], input[type="number"], input[type="search"], input[type="month"], select, textarea {
  width: 100%; padding: 12px 13px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
textarea { min-height: 190px; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink-3) 45%, var(--line-2)); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: var(--ring); outline: none; background: var(--surface);
}
input[type="color"] {
  width: 60px; height: 46px; padding: 4px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
input[type="range"] { width: 100%; accent-color: var(--brand); }

.check { display: flex; align-items: flex-start; gap: 11px; font-weight: 500; font-size: 0.95rem; color: var(--ink-2); }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 20px; font: inherit; font-size: 0.95rem; font-weight: 600;
  color: #fff; background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  border: 1px solid color-mix(in srgb, var(--brand-dark) 80%, #000);
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px -10px color-mix(in srgb, var(--brand) 75%, transparent);
  transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.btn:hover { filter: brightness(1.07); color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18); }
.btn-secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); filter: none; }
.btn-ghost { background: transparent; color: var(--brand); border-color: transparent; box-shadow: none; padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand-dark); filter: none; }
.btn-sm { min-height: 38px; padding: 8px 13px; font-size: 0.86rem; border-radius: 8px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* On dark surfaces --brand is a pale lavender, so a white-on-lavender button
   lands around 1.8:1. Flip the label to ink instead of lightening the fill. */
@media (prefers-color-scheme: dark) {
  .btn {
    color: #0c0f16;
    background: linear-gradient(180deg, #b8b3ff, #918bfb);
    border-color: #7d76ef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 18px -10px rgba(124, 116, 255, 0.55);
  }
  .btn:hover { color: #0c0f16; filter: brightness(1.06); }
  .btn:active { color: #0c0f16; }
  .btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--line-2); }
  .btn-secondary:hover { color: var(--ink); background: var(--surface-2); }
  .btn-ghost { background: transparent; color: var(--brand); }
  .btn-ghost:hover { background: var(--brand-soft); color: var(--ink); }
  .tn-player-btn.is-main { color: #0c0f16; }
}

/* ---------- Results ---------- */
.result {
  margin-top: 20px; padding: 22px; border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--surface)), var(--surface) 60%);
  border: 1px solid var(--line);
}
.result.is-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); color: var(--danger); }
.result.is-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.result h2, .result h3 { margin-top: 0; }

.big-number {
  font-family: var(--font-display); font-size: clamp(1.85rem, 1.4rem + 2vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.big-number small { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }

.stat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); margin-top: 6px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; box-shadow: var(--shadow-xs);
}
.stat .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); font-weight: 700; }
.stat .stat-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat .stat-sub { font-size: 0.8rem; color: var(--ink-3); margin-top: 1px; }

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); background: var(--surface-2); font-weight: 700; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
tbody tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }

/* ---------- Chips / word results ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  font-family: var(--font-mono); font-size: 0.9rem; padding: 5px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.chip b { color: var(--teal); font-weight: 700; margin-left: 3px; }
.chip-list { max-height: 420px; overflow: auto; padding-right: 4px; }

/* Wordle input grid */
.wordle-grid { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 360px; }
.tile-col { display: grid; gap: 6px; }
.tile-input {
  width: 100%; text-align: center; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  text-transform: uppercase; height: 58px; padding: 4px; border-radius: 10px;
}
.tile-color {
  height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2);
  cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease;
}
.tile-color:hover { filter: brightness(1.06); }
.tile-color:active { transform: scale(0.97); }
.tile-col[data-state="absent"] .tile-color { background: #787c7e; border-color: #787c7e; }
.tile-col[data-state="present"] .tile-color { background: #c9b458; border-color: #c9b458; }
.tile-col[data-state="correct"] .tile-color { background: #6aaa64; border-color: #6aaa64; }
.tile-col[data-state="absent"] .tile-input { border-color: #9aa0a6; }
.tile-col[data-state="present"] .tile-input { border-color: #c9b458; }
.tile-col[data-state="correct"] .tile-input { border-color: #6aaa64; }
.tile-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.83rem; color: var(--ink-2); margin-top: 12px; }
.tile-legend span { display: inline-flex; align-items: center; gap: 7px; }
.swatch-dot { width: 13px; height: 13px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.12); }

/* ---------- Ad slots (reserved, no ad code) ---------- */
/* Reserved ad space. Before AdSense is live the slot is empty, and a 100px
   striped billboard above the calculator reads as a broken element rather than
   as reserved space. Keep the reserved height, drop the texture. */
.ad-slot {
  /* Hidden until there is real inventory. An empty reserved box was rendering as a
     grey dashed band directly under the hero — the second thing a visitor saw — and
     a fixed-height empty container also shifts layout when an ad finally fills it.
     Restore `display: grid` once AdSense is approved. */
  position: relative; margin: 26px auto; display: none; place-items: center; text-align: center;
  min-height: 100px; padding: 14px; border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--line-2) 65%, transparent);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  color: color-mix(in srgb, var(--ink-3) 72%, transparent);
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.ad-slot span { display: inline-flex; align-items: center; gap: 8px; }
.ad-slot span::before, .ad-slot span::after {
  content: ""; width: 18px; height: 1px; background: var(--line-2);
}
.ad-slot--leaderboard { max-width: 970px; min-height: 90px; }
.ad-slot--rectangle { max-width: 336px; min-height: 280px; }
/* A centred 336px box between a full-width card and a left-aligned text column
   reads as a floating rectangle. Sit it on the text column's left edge. */
@media (min-width: 900px) {
  .ad-slot--rectangle { margin-left: 0; margin-right: auto; }
  .prose .ad-slot--rectangle, .prose + .ad-slot--rectangle { margin-left: 0; }
}
@media (max-width: 640px) {
  .ad-slot--rectangle { min-height: 250px; max-width: 100%; }
  /* The leaderboard sat between the H1 and the first input. On a phone that
     pushes the tool half a screen down, so it gets a shorter reservation. */
  .ad-slot--leaderboard { min-height: 66px; margin: 16px auto; padding: 8px; }
}

/* ---------- Prose ---------- */
.prose { max-width: var(--prose); }
/* A hairline above each section heading. Long pages are otherwise one
   undifferentiated column of text; the rule gives the eye somewhere to land
   without adding colour. */
.prose h2 {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
}
.prose > h2:first-child { margin-top: 0.4rem; padding-top: 0; border-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--ink-3); }
.prose code {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px;
}
.prose table { margin: 1.2em 0 1.6em; }

.callout {
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--brand) 62%, var(--line));
  background: linear-gradient(180deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, var(--surface)));
  padding: 17px 20px; border-radius: 3px var(--radius-md) var(--radius-md) 3px; margin: 1.7em 0; font-size: 0.95rem;
  line-height: 1.62;
}
.callout > strong:first-child { color: var(--ink); font-weight: 700; }
.callout--warn { border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); border-left-color: color-mix(in srgb, var(--warn) 62%, var(--line)); background: var(--warn-soft); }
.disclaimer {
  font-size: 0.85rem; color: var(--ink-3); border-top: 1px solid var(--line);
  padding-top: 16px; margin-top: 34px; line-height: 1.6;
}

details.faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  padding: 0 18px; margin-bottom: 10px; transition: border-color 0.15s ease;
}
details.faq[open] { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
details.faq summary {
  cursor: pointer; font-weight: 600; padding: 15px 30px 15px 0; list-style: none; position: relative;
  font-family: var(--font-display); letter-spacing: -0.01em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 2px; top: 12px; font-size: 1.3rem;
  color: var(--ink-3); font-weight: 400; line-height: 1.2;
}
details.faq[open] summary::after { content: "–"; }
details.faq .faq-body { padding-bottom: 16px; color: var(--ink-2); font-size: 0.94rem; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Home ---------- */
.hero {
  position: relative; padding: 62px 0 18px; max-width: none; overflow: clip;
  display: grid; gap: 44px; align-items: center;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); padding: 74px 0 30px; gap: 48px; }
}
.hero-copy { max-width: 720px; }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: -60px; top: -80px; width: min(460px, 90vw); height: 400px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 16%, transparent), transparent 72%);
  filter: blur(8px); pointer-events: none;
}

/* Product mock in the hero (decorative) */
.hero-figure { display: none; }
@media (min-width: 1000px) { .hero-figure { display: block; position: relative; } }
.mock-wrap { position: relative; transform: rotate(-2deg); }
.mock-wrap::before {
  content: ""; position: absolute; inset: -44px -34px; z-index: -1;
  background: radial-gradient(60% 60% at 58% 42%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 72%);
  filter: blur(18px);
}
.mock-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  box-shadow: 0 34px 64px -34px rgba(20, 24, 35, 0.4), 0 2px 6px rgba(20, 24, 35, 0.06);
}
.mock-top { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 16%, transparent); }
.mock-big { font-family: var(--font-display); font-size: 2.35rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mock-sub { color: var(--ink-3); font-size: 0.8rem; margin: 4px 0 16px; }
.mock-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); }
.mock-row b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.mock-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.mock-pill { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); padding: 5px 10px; border-radius: 999px; }
.mock-meta { font-size: 0.72rem; color: var(--ink-3); }
.mock-chip {
  position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; font-size: 0.76rem; font-weight: 600; color: var(--ink-2);
  box-shadow: 0 10px 24px -14px rgba(20, 24, 35, 0.5), var(--shadow-sm);
}
/* Two white chips sitting 14px from two white card corners merge into one
   shape. Push them clear of the card's edge and give them their own shadow so
   they read as annotations pinned to the mock, not as part of it. */
.mock-chip--a { left: -34px; bottom: -30px; transform: rotate(-2deg); }
.mock-chip--b { right: -30px; top: -30px; transform: rotate(2deg); }
@media (max-width: 1080px) {
  .mock-chip--a { left: -8px; bottom: -18px; }
  .mock-chip--b { right: -8px; top: -18px; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  font-size: 0.8rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 18%, transparent); }
.hero h1 { margin-bottom: 0.3em; }
.hero .hero-sub { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
/* Was a brand -> violet -> teal gradient clipped to the text. A three-hue sweep
   across a heading is the strongest "generated page" tell there is, and on a site
   whose whole argument is "we show the work", looking machine-made costs trust.
   Now: one warm accent, borrowed from the materials category colour, which is
   also the colour of the material in the hero photo. */
.grad { color: var(--cat-materials); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.trust-row span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.tick { color: var(--ok); font-weight: 800; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--line);
}
/* align-items:center drops the marker into the middle of a two-line heading;
   pin it to the first line instead so it reads as a bullet. */
.section-head h2 { margin: 0; display: flex; align-items: flex-start; gap: 11px; }
.section-head h2::before {
  content: ""; flex: none; margin-top: 0.38em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--cat, var(--brand));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat, var(--brand)) 14%, transparent);
}
/* Was --ink-3 (#7a8291) at 0.86rem — roughly 3.5:1 on the cream ground, below the
   4.5:1 floor for small text, and in practice the line was unreadable. It is a
   real sentence, not decoration, so it gets a real contrast ratio. */
.section-head p { margin: 0; color: var(--ink-2); font-size: 0.86rem; }
#finance { --cat: var(--cat-finance); }
#diy { --cat: var(--cat-diy); }
#students { --cat: var(--cat-students); }
#dev { --cat: var(--cat-dev); }
#word-games { --cat: var(--cat-words); }
#materials { --cat: var(--cat-materials); }
#hvac { --cat: var(--cat-hvac); }
#home-tax { --cat: var(--cat-hometax); }

.tool-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

/* A section holding two or three cards inside a four-column track leaves a
   hole at the end of the row, and the hole reads as a rendering bug. Collapse
   the track count to the number of cards, and cap the width so the cards do
   not stretch into banners. Browsers without :has() keep the auto-fill grid. */
@media (min-width: 760px) {
  .tool-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .tool-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .tool-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Five cards in a four-column track leaves one card alone on a second row
     with three-quarters of the width empty. One row of five is tidier. */
  .tool-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Nine cards in four columns leaves one card alone on a third row; three by
     three is the layout the home-tax hub is meant to have. */
  .tool-grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ten tools on the home page: two clean rows of five. */
  .tool-grid:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Thirteen tools on the home-tax hub: five per row leaves three on the last
     row, where four per row would leave one card stranded under three empty columns. */
  .tool-grid:has(> :nth-child(13):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.tool-link {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 20px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tool-link:hover {
  transform: translateY(-3px); color: var(--ink);
  border-color: color-mix(in srgb, var(--cat, var(--brand)) 45%, var(--line));
  box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--ink) 45%, transparent);
}
.icon-tile {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 14px; color: var(--cat, var(--brand));
  background: color-mix(in srgb, var(--cat, var(--brand)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, var(--brand)) 20%, transparent);
  transition: transform 0.18s ease;
}
.tool-link:hover .icon-tile { transform: scale(1.06) rotate(-3deg); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-link .badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-3); margin-bottom: 5px; }
.tool-link h3 { margin: 0 0 5px; font-size: 1.03rem; color: var(--ink); letter-spacing: -0.02em; }
.tool-link:hover h3 { color: var(--cat, var(--brand)); }
.tool-link p { margin: 0; font-size: 0.89rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 65%, var(--paper));
  padding: 40px 0 30px; font-size: 0.9rem; color: var(--ink-2);
}
.footer-inner { display: grid; gap: 26px; grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
.footer-inner h4 { font-family: var(--font-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-3); margin: 4px 0 10px; font-weight: 700; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
.footer-inner li { margin-bottom: 7px; }
.footer-inner a { color: var(--ink-2); text-decoration: none; }
.footer-inner a:hover { color: var(--brand); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--ink-3);
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }

/* ---------- Repeating course rows ---------- */
.course-rows { display: grid; gap: 10px; margin-bottom: 14px; }
.course-row {
  display: grid; gap: 10px; align-items: end;
  grid-template-columns: 1.6fr 0.9fr 0.8fr 1fr auto;
  padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.course-row .field { margin-bottom: 0; }
.course-row label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 5px; }
.course-row .c-remove { color: var(--danger); font-weight: 600; }
@media (max-width: 720px) {
  .course-row { grid-template-columns: 1fr 1fr; }
  .course-row .c-remove { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Utilities ---------- */
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }
.cite-line {
  margin-top: 18px; padding: 10px 13px;
  border-left: 2px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  border-radius: 0 7px 7px 0;
}
.cite-line strong { color: var(--ink); font-weight: 600; }
.cite-line .cite-target { font-family: var(--font-mono); font-size: 0.78rem; word-break: break-all; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.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; }
[hidden] { display: none !important; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .hero { padding-top: 42px; }
  .tool-card { padding: 20px; }
  .result { padding: 18px; }
  /* 14px breadcrumb links are a 17px-tall tap target. Pad them without
     shifting the layout (negative margin cancels the padding). */
  .breadcrumbs a { display: inline-block; padding: 9px 2px; margin: -9px -2px; }
  .brand { padding-block: 6px; }
}
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .wrap { padding: 0 16px; }
  /* One column turned a nine-field calculator into an 800px-tall stack with the
     Calculate button far below the fold. Two columns, with selects keeping the
     full width they need. */
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .field-row > .field:has(select), .field-row > .field:has(textarea) { grid-column: 1 / -1; }
  /* A three-field row inside two columns leaves one empty cell, which reads as a
     broken form. Let the orphan take the full width instead. */
  .field-row > .field:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
  /* Two-line labels push their input out of line with the neighbour's. Reserve
     the space for every label in the row so the inputs stay on one baseline. */
  /* The payment form opens a row with a short select ("30 years — fixed").
     Spanning it there would strand the next field alone in a half-empty row. */
  #mpForm .field-row > .field:first-child:has(select) { grid-column: auto; }
  .field-row > .field > label { min-height: 2.4em; margin-bottom: 6px; }
  .field-row > .field > .hint { font-size: 0.76rem; }
  .field { margin-bottom: 13px; }
  .tool-card, .card { padding: 16px; }
  .stat-grid { gap: 10px; }
  .stat { padding: 11px 13px; }
  .big-number { font-size: 1.9rem; }
  .hero-sub { font-size: 1.02rem; }
}

@media print {
  .site-header, .site-footer, .ad-slot, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Respect forced-colors mode: gradient text is invisible there. */
@media (forced-colors: active) {
  .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
}

/* ---------- Music player (circular) ---------- */
.tn-player { position: fixed; right: 18px; bottom: 18px; z-index: 70; font-family: var(--font-sans); }
.tn-disc {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #1a1a1a 0 2px, #232323 2px 4px),
    #1a1a1a;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  display: grid; place-items: center;
}
.tn-disc::after {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand));
  box-shadow: 0 0 0 3px rgba(0,0,0,.55);
}
.tn-disc-label {
  position: absolute; z-index: 2; font-size: 9px; font-weight: 800; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none;
}
.tn-player-dock { position: relative; }
.tn-player-toggle {
  padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%;
  line-height: 0; -webkit-tap-highlight-color: transparent;
}
/* The disc is a widget on every page. Give the visitor a way out: a small ×
   pinned to the disc's corner, quiet until hovered or focused. */
.tn-player-dismiss {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%;
  /* Alpha on the element itself lets the black disc bleed through and the
     button turns grey. Keep it opaque; go quiet with colour instead. */
  background: var(--surface); color: color-mix(in srgb, var(--ink-3) 85%, transparent);
  font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 24, 35, 0.22);
  transition: color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tn-player-dismiss:hover, .tn-player-dismiss:focus-visible {
  color: var(--ink); transform: scale(1.08);
  border-color: color-mix(in srgb, var(--ink-3) 55%, var(--line-2));
}
.tn-player-dismiss:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 22px is the right visual weight on a 64px disc but a finger needs 44px, so the
   hit area is expanded invisibly. */
.tn-player-dismiss::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.tn-player-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 70%, transparent); outline-offset: 3px; }
.tn-player.is-playing .tn-disc { animation: tn-spin 6s linear infinite; }
@keyframes tn-spin { to { transform: rotate(360deg); } }
.tn-player-panel {
  position: absolute; right: 0; bottom: 80px; width: min(340px, calc(100vw - 36px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px; display: none;
}
.tn-player.is-open .tn-player-panel { display: block; }
.tn-player-head { display: flex; align-items: flex-start; gap: 12px; }
.tn-mini-disc {
  flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative;
  background: repeating-radial-gradient(circle at 50% 50%, #1a1a1a 0 1.5px, #262626 1.5px 3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.tn-mini-disc::after {
  content: ""; position: absolute; inset: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand));
}
.tn-player.is-playing .tn-mini-disc { animation: tn-spin 6s linear infinite; }
.tn-player-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.tn-player-meta { font-size: 0.78rem; color: var(--ink-3); margin-top: 2px; }
.tn-player-close { margin-left: auto; border: 0; background: transparent; color: var(--ink-3); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px; border-radius: 6px; }
.tn-player-close:hover { background: var(--surface-2); color: var(--ink); }
.tn-player-range { width: 100%; accent-color: var(--brand); margin: 12px 0 4px; }
.tn-player-times { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tn-player-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.tn-player-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 0.95rem;
}
.tn-player-btn:hover { background: var(--surface-2); }
.tn-player-btn.is-main { width: 46px; height: 46px; background: var(--brand); border-color: var(--brand); color: #fff; font-size: 1rem; }
.tn-player-btn.is-main:hover { filter: brightness(1.07); background: var(--brand); }
.tn-player-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: 0.72rem; color: var(--ink-3); }
.tn-player-foot span { flex: 1 1 auto; min-width: 0; }
.tn-player-foot a { color: var(--ink-3); }
.tn-player-vol { width: 84px; accent-color: var(--brand); }
@media print { .tn-player { display: none !important; } }
@media (max-width: 480px) {
  .tn-player { right: 12px; bottom: 12px; }
  .tn-player-panel { width: calc(100vw - 24px); }
}
/* ---------- Home hero background carousel ---------- */
.hero { overflow: clip; }
.hero-copy, .hero-figure { position: relative; z-index: 1; }
.hero-bg {
  position: absolute; inset: 0; border-radius: 26px;
  z-index: -2; overflow: hidden; pointer-events: none;
}
.hero-bg picture { display: contents; }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease; filter: saturate(0.92) contrast(1.03);
}
.hero-bg img.is-active { opacity: 1; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 30%, color-mix(in srgb, var(--paper) 58%, transparent) 56%, color-mix(in srgb, var(--paper) 10%, transparent) 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 58%, var(--paper) 99%);
}
@media (max-width: 700px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--paper) 64%, transparent) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 54%, var(--paper) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { transition: none; }
}
/* The hero photo is a daylight scene. Left at full brightness it becomes a
   glowing band across the top of an otherwise dark page. */
@media (prefers-color-scheme: dark) {
  .hero-bg img { filter: saturate(0.55) brightness(0.42) contrast(1.12); }
  .hero-bg::after {
    background:
      linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 26%, color-mix(in srgb, var(--paper) 74%, transparent) 52%, color-mix(in srgb, var(--paper) 34%, transparent) 78%, color-mix(in srgb, var(--paper) 12%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--paper) 40%, transparent) 0%, transparent 40%, var(--paper) 98%);
  }
}

/* ---------- Wide screens (fill the viewport) ---------- */
@media (min-width: 1500px) {
  .wrap { padding: 0 34px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
  .prose { max-width: min(800px, 74ch); }
  .hero { padding: 86px 0 34px; gap: 56px; }
  .card.tool-card { padding: 32px 34px; }
  .footer-inner { gap: 56px; }
}
@media (min-width: 1760px) {
  .lede { font-size: 1.15rem; }
  .hero-copy { max-width: 780px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
/* Full-bleed hero band on desktop */
@media (min-width: 1200px) {
  .hero {
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
  }
  .hero-bg { border-radius: 0 0 30px 30px; }
}
html { overflow-x: clip; }