@charset "UTF-8";
/* ==========================================================================
   EasyCalculatorSmart — Homepage (v3, 2026-09-23). body.is-home only.
   Loaded after hubs.css, by the homepage alone.

   Two intentionally designed themes, not one inverted:
     dark   near-black warm brown, orange/gold primary, solid gradient icons
            (the owner's primary reference)
     light  white + soft blue surfaces, blue primary, pastel icon squares
   The page re-points main.css's neutral role tokens (--bg, --surface,
   --line, --text*, --accent*) inside body.is-home so the shared header,
   FAQ and footer follow. --tile-calc and --calc-accent are NOT touched:
   they draw the logo, which stays exactly as approved.
   ========================================================================== */

body.is-home,
body.is-hub {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-alt: #f8faff;
  --line: #e3e8f1;
  --line-strong: #cfd7e4;
  --text: #0f172a;
  --text-soft: #3f4b5f;
  --text-faint: #5b6679;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-strong: #1d4ed8;
  --accent-soft: #eaf1ff;
  --accent-line: #bfd3fb;
  --focus: #2563eb;

  --hx-acc1: #3b82f6;
  --hx-acc2: #1d4ed8;
  --hx-on-acc: #ffffff;
  --hx-acc-text: #1d4ed8;
  --hx-hero: radial-gradient(48rem 26rem at 88% 10%, #dbe8ff 0%, transparent 62%),
             radial-gradient(40rem 22rem at 0% 0%, #eef4ff 0%, transparent 60%),
             linear-gradient(180deg, #f3f7ff 0%, #f6f8fc 100%);
  --hx-card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
  --hx-card-shadow-hover: 0 10px 28px rgba(37, 99, 235, .13);
  --hx-card-line-hover: #bcd0f7;
  --hx-plinth: #dfe8f7;
  --hx-plinth-top: #eef3fb;
  --hx-side: #1e3a8a;
  --hx-scr1: #e8f0ff;
  --hx-scr2: #cfdcf6;
  --hx-digit: #1e3a8a;
  --hx-key: rgba(255, 255, 255, .92);
  --hx-glyph: #1e3a8a;
  --hx-glow: rgba(59, 130, 246, .22);
  background: var(--bg);
}

:root[data-theme="dark"] body.is-home,
:root[data-theme="dark"] body.is-hub {
  --bg: #0e0a07;
  --surface: #17110c;
  --surface-alt: #120d09;
  --surface-sunk: #120d09;
  --line: rgba(255, 170, 90, .13);
  --line-strong: rgba(255, 170, 90, .24);
  --text: #f6efe7;
  --text-soft: #d3c5b5;
  --text-faint: #a8998a;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-strong: #fbbf24;
  --accent-soft: rgba(245, 158, 11, .12);
  --accent-line: rgba(245, 158, 11, .35);
  --focus: #fbbf24;

  --hx-acc1: #fbbf24;
  --hx-acc2: #f97316;
  --hx-on-acc: #1b1006;
  --hx-acc-text: #fbad3c;
  --hx-hero: radial-gradient(46rem 26rem at 82% 40%, rgba(249, 115, 22, .22) 0%, transparent 62%),
             radial-gradient(40rem 20rem at 5% 0%, rgba(245, 158, 11, .07) 0%, transparent 60%),
             linear-gradient(180deg, #160e08 0%, #0e0a07 100%);
  --hx-card-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  --hx-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(249, 115, 22, .25);
  --hx-card-line-hover: rgba(249, 115, 22, .45);
  --hx-plinth: #1d140d;
  --hx-plinth-top: #2a1c11;
  --hx-side: #7c2d12;
  --hx-scr1: #2a1a0e;
  --hx-scr2: #1a1009;
  --hx-digit: #fbbf24;
  --hx-key: rgba(40, 22, 8, .55);
  --hx-glyph: #fff3e0;
  --hx-glow: rgba(249, 115, 22, .38);
  color-scheme: dark;
}

/* ---- The eight icon hues. Light: pastel square + coloured glyph.
        Dark: solid gradient square + white glyph. ---- */
body:is(.is-home, .is-hub) .hx-g0, body.is-hub .hx-g0 { --a: #fb923c; --b: #ea580c; }
body:is(.is-home, .is-hub) .hx-g1, body.is-hub .hx-g1 { --a: #60a5fa; --b: #2563eb; }
body:is(.is-home, .is-hub) .hx-g2, body.is-hub .hx-g2 { --a: #fb7185; --b: #e11d48; }
body:is(.is-home, .is-hub) .hx-g3, body.is-hub .hx-g3 { --a: #34d399; --b: #059669; }
body:is(.is-home, .is-hub) .hx-g4, body.is-hub .hx-g4 { --a: #a78bfa; --b: #7c3aed; }
body:is(.is-home, .is-hub) .hx-g5, body.is-hub .hx-g5 { --a: #fbbf24; --b: #d97706; }
body:is(.is-home, .is-hub) .hx-g6, body.is-hub .hx-g6 { --a: #22d3ee; --b: #0891b2; }
body:is(.is-home, .is-hub) .hx-g7, body.is-hub .hx-g7 { --a: #f87171; --b: #dc2626; }

body:is(.is-home, .is-hub) .hx-tile-icon,
body:is(.is-home, .is-hub) .hx-cat-icon,
body:is(.is-home, .is-hub) .hx-row-icon,
body:is(.is-home, .is-hub) .hx-strip-icon,
body:is(.is-home, .is-hub) .hx-float {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 16px;
  background: color-mix(in srgb, var(--b, #2563eb) 12%, #ffffff);
  color: var(--b, #2563eb);
  border: 1px solid color-mix(in srgb, var(--b, #2563eb) 18%, #ffffff);
}

:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-tile-icon,
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-cat-icon,
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-row-icon,
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-strip-icon,
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-float {
  background: linear-gradient(150deg, var(--a, #fbbf24) 0%, var(--b, #f97316) 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--b, #f97316) 70%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .25);
}

body:is(.is-home, .is-hub) .hx-tile-tool .hx-tile-icon { --a: #a78bfa; --b: #7c3aed; }

/* ---- Header (homepage + the two hubs) ---- */
body.is-hub .site-header, body.is-home .site-header {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}
body.is-hub .nav-link, body.is-home .nav-link { font-weight: 550; color: var(--text-soft); }
body.is-hub .nav-link:hover, body.is-home .nav-link:hover { color: var(--hx-acc-text); }
body.is-hub .nav-link[aria-current="page"], body.is-home .nav-link[aria-current="page"] { color: var(--hx-acc-text); }
body.is-hub .nav-link[aria-current="page"]::after, body.is-home .nav-link[aria-current="page"]::after { background: var(--hx-acc-text); }

body:is(.is-home, .is-hub) .hx-header-search { display: none; }
@media (max-width: 900px) {
  body:is(.is-home, .is-hub) .hx-header-search {
    display: inline-grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 12px;
    color: var(--text);
    border: 1px solid var(--line);
    background: var(--surface);
  }
  body:is(.is-home, .is-hub) .hx-header-search svg { inline-size: 20px; block-size: 20px; }
}

/* ---- Hero ---- */
body:is(.is-home, .is-hub) .hx-hero {
  background: var(--hx-hero);
  border-block-end: 1px solid var(--line);
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) var(--s6);
  overflow: hidden;
}

body:is(.is-home, .is-hub) .hx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: var(--s6);
  align-items: center;
}

body:is(.is-home, .is-hub) .hx-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--s4);
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--hx-card-shadow);
}
body:is(.is-home, .is-hub) .hx-badge-dot {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc1) 22%, transparent);
}

body:is(.is-home, .is-hub) .hx-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--text);
}
body:is(.is-home, .is-hub) .hx-h1-line { display: block; }
body:is(.is-home, .is-hub) .hx-accent {
  background: linear-gradient(100deg, var(--hx-acc1), var(--hx-acc2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body:is(.is-home, .is-hub) .hx-lede {
  margin: var(--s4) 0 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-soft);
}

/* Search: one rounded pill with the button inside it. */
body:is(.is-home, .is-hub) .hx-search { margin-block-start: var(--s5); max-inline-size: 36rem; }
body:is(.is-home, .is-hub) .hx-search .search-hero { max-width: none; margin: 0; }
body:is(.is-home, .is-hub) .hx-search .search-row {
  gap: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--hx-card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body:is(.is-home, .is-hub) .hx-search .search-row:focus-within {
  border-color: var(--hx-acc1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acc1) 20%, transparent);
}
body:is(.is-home, .is-hub) .hx-search .input {
  min-height: 52px;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  transform: none;
  color: var(--text);
}
body:is(.is-home, .is-hub) .hx-search .input:focus { box-shadow: none; transform: none; outline: none; }
body:is(.is-home, .is-hub) .hx-search .btn {
  min-height: 52px;
  padding-inline: 1.75rem;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  box-shadow: 0 8px 20px -8px var(--hx-glow);
}
body:is(.is-home, .is-hub) .hx-search .btn:hover { filter: brightness(1.06); }

body:is(.is-home, .is-hub) .hx-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block-start: var(--s4);
}
body:is(.is-home, .is-hub) .hx-chips-label { font-size: .85rem; font-weight: 600; color: var(--text-faint); margin-inline-end: .15rem; }
body:is(.is-home, .is-hub) .hx-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 34px;
  padding: .2rem .85rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
body:is(.is-home, .is-hub) .hx-chip:hover { color: var(--hx-acc-text); border-color: var(--hx-card-line-hover); transform: translateY(-1px); }

/* Illustration */
body:is(.is-home, .is-hub) .hx-art { position: relative; display: grid; place-items: center; min-block-size: 22rem; }
body:is(.is-home, .is-hub) .hx-art-glow {
  position: absolute; inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hx-glow), transparent 75%);
  filter: blur(8px);
}
body:is(.is-home, .is-hub) .hx-art-svg { position: relative; inline-size: 100%; max-inline-size: 23rem; block-size: auto; }
body:is(.is-home, .is-hub) .hx-s-acc1 { stop-color: var(--hx-acc1); }
body:is(.is-home, .is-hub) .hx-s-acc2 { stop-color: var(--hx-acc2); }
body:is(.is-home, .is-hub) .hx-s-scr1 { stop-color: var(--hx-scr1); }
body:is(.is-home, .is-hub) .hx-s-scr2 { stop-color: var(--hx-scr2); }
body:is(.is-home, .is-hub) .hx-f-plinth { fill: var(--hx-plinth); }
body:is(.is-home, .is-hub) .hx-f-plinth-top { fill: var(--hx-plinth-top); }
body:is(.is-home, .is-hub) .hx-f-side { fill: var(--hx-side); }
body:is(.is-home, .is-hub) .hx-f-sheen { fill: url(#hxBody); opacity: 0; }
body:is(.is-home, .is-hub) .hx-f-key rect { fill: var(--hx-key); }
body:is(.is-home, .is-hub) .hx-f-op rect { fill: #ffffff; opacity: .95; }
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-f-op rect { fill: #1b1006; opacity: .75; }
body:is(.is-home, .is-hub) .hx-f-glyph text,
body:is(.is-home, .is-hub) .hx-f-opglyph text { font: 700 17px/1 system-ui, sans-serif; text-anchor: middle; }
body:is(.is-home, .is-hub) .hx-f-glyph text { fill: var(--hx-glyph); }
body:is(.is-home, .is-hub) .hx-f-opglyph text { fill: var(--hx-acc2); }
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-f-opglyph text { fill: #fbbf24; }
body:is(.is-home, .is-hub) .hx-f-digits { font: 700 38px/1 ui-monospace, monospace; fill: var(--hx-digit); }

body:is(.is-home, .is-hub) .hx-float {
  position: absolute;
  inline-size: 3.6rem;
  block-size: 3.6rem;
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
  animation: hx-bob 6s ease-in-out infinite;
}
body:is(.is-home, .is-hub) .hx-float svg { inline-size: 1.6rem; block-size: 1.6rem; }
body:is(.is-home, .is-hub) .hx-float-a { inset-block-start: 6%;  inset-inline-start: 4%; }
body:is(.is-home, .is-hub) .hx-float-b { inset-block-start: 40%; inset-inline-end: 0;     animation-delay: -2s; }
body:is(.is-home, .is-hub) .hx-float-c { inset-block-end: 12%;   inset-inline-start: 0;   animation-delay: -4s; }
@keyframes hx-bob { 50% { translate: 0 -8px; } }

body:is(.is-home, .is-hub) .hx-note {
  position: absolute;
  inset-block-start: 4%;
  inset-inline-end: 4%;
  font: italic 600 1.05rem/1.25 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: var(--text-soft);
  transform: rotate(-8deg);
}

/* Benefit strip */
body:is(.is-home, .is-hub) .hx-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  margin: var(--s6) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--hx-card-shadow);
}
body:is(.is-home, .is-hub) .hx-strip li { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; }
body:is(.is-home, .is-hub) .hx-strip li + li { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s4); }
body:is(.is-home, .is-hub) .hx-strip-icon { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 12px; }
body:is(.is-home, .is-hub) .hx-strip-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
body:is(.is-home, .is-hub) .hx-strip strong { display: block; font-size: .95rem; color: var(--text); }
body:is(.is-home, .is-hub) .hx-strip small { display: block; font-size: .8rem; color: var(--text-faint); }

/* ---- Sections ---- */
body:is(.is-home, .is-hub) .hx-main { padding-block-end: var(--s7); }
body:is(.is-home, .is-hub) .hx-section { margin-block-start: clamp(2.5rem, 1.8rem + 2vw, 3.75rem); }

body:is(.is-home, .is-hub) .hx-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block-end: var(--s4);
}
body:is(.is-home, .is-hub) .hx-head h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
body:is(.is-home, .is-hub) .hx-count { font-weight: 500; color: var(--text-faint); font-size: .8em; }
body:is(.is-home, .is-hub) .hx-head-icon {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: 12px;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}
body:is(.is-home, .is-hub) .hx-head-icon svg { inline-size: 1.2rem; block-size: 1.2rem; }
body:is(.is-home, .is-hub) .hx-head-tool { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
body:is(.is-home, .is-hub) .hx-head-hot { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }

body:is(.is-home, .is-hub) .hx-more {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .45rem .95rem;
  font-size: .85rem; font-weight: 700;
  color: var(--hx-acc-text);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
body:is(.is-home, .is-hub) .hx-more svg { inline-size: .95rem; block-size: .95rem; transition: transform .15s ease; }
body:is(.is-home, .is-hub) .hx-more:hover svg { transform: translateX(3px); }
[dir="rtl"] body:is(.is-home, .is-hub) .hx-more svg,
[dir="rtl"] body:is(.is-home, .is-hub) .hx-cat-arrow svg,
[dir="rtl"] body:is(.is-home, .is-hub) .hx-btn svg { scale: -1 1; }

/* Pills */
body:is(.is-home, .is-hub) .hx-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: var(--s4); }
body:is(.is-home, .is-hub) .hx-pills[hidden] { display: none; }
body:is(.is-home, .is-hub) .hx-pill {
  min-block-size: 36px;
  padding: .3rem 1rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
body:is(.is-home, .is-hub) .hx-pill:hover { border-color: var(--hx-card-line-hover); color: var(--text); }
body:is(.is-home, .is-hub) .hx-pill[aria-pressed="true"] {
  color: var(--hx-on-acc);
  border-color: transparent;
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
}

/* Tiles */
body:is(.is-home, .is-hub) .hx-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
body:is(.is-home, .is-hub) .hx-tiles-tool { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body:is(.is-home, .is-hub) .hx-tiles:not([data-filtered="true"]) .is-extra { display: none; }

body:is(.is-home, .is-hub) .hx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  min-block-size: 9.25rem;
  padding: 1.25rem .75rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--hx-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body:is(.is-home, .is-hub) .hx-tile[hidden] { display: none; }
body:is(.is-home, .is-hub) .hx-tile-icon { inline-size: 3.5rem; block-size: 3.5rem; transition: transform .18s ease; }
body:is(.is-home, .is-hub) .hx-tile-icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
body:is(.is-home, .is-hub) .hx-tile-name { font-size: .9rem; font-weight: 650; line-height: 1.3; }
body:is(.is-home, .is-hub) .hx-tile:hover {
  transform: translateY(-3px);
  border-color: var(--hx-card-line-hover);
  box-shadow: var(--hx-card-shadow-hover);
  color: var(--text);
}
body:is(.is-home, .is-hub) .hx-tile:hover .hx-tile-icon { transform: scale(1.06); }

body:is(.is-home, .is-hub) .hx-badge-new {
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .55rem;
  padding: .08rem .45rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #065f46; background: #d1fae5; border-radius: 999px;
}
:root[data-theme="dark"] body:is(.is-home, .is-hub) .hx-badge-new { color: #1b1006; background: #fbbf24; }
body:is(.is-home, .is-hub) .hx-badge-inline { position: static; vertical-align: middle; margin-inline-start: .35rem; }

body:is(.is-home, .is-hub) .hx-center { margin: var(--s5) 0 0; text-align: center; }

/* Buttons */
body:is(.is-home, .is-hub) .hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 48px;
  padding: .6rem 1.5rem;
  font-weight: 700; font-size: .95rem;
  text-decoration: none;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 10px 24px -10px var(--hx-glow);
  transition: transform .15s ease, filter .15s ease;
}
body:is(.is-home, .is-hub) .hx-btn:hover { transform: translateY(-1px); filter: brightness(1.05); color: var(--hx-on-acc); }
body:is(.is-home, .is-hub) .hx-btn svg { inline-size: 1rem; block-size: 1rem; }
body:is(.is-home, .is-hub) .hx-btn-ghost,
body:is(.is-home, .is-hub) .hx-btn-ghost:hover {
  color: var(--hx-acc-text);
  background: var(--surface);
  border-color: var(--hx-card-line-hover);
  box-shadow: none;
}

/* Categories and rows */
body:is(.is-home, .is-hub) .hx-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 12px;
}
body:is(.is-home, .is-hub) .hx-cat,
body:is(.is-home, .is-hub) .hx-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--hx-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body:is(.is-home, .is-hub) .hx-cat:hover,
body:is(.is-home, .is-hub) .hx-row:hover { transform: translateY(-2px); border-color: var(--hx-card-line-hover); box-shadow: var(--hx-card-shadow-hover); color: var(--text); }
body:is(.is-home, .is-hub) .hx-cat-icon,
body:is(.is-home, .is-hub) .hx-row-icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 13px; }
body:is(.is-home, .is-hub) .hx-cat-icon svg,
body:is(.is-home, .is-hub) .hx-row-icon svg { inline-size: 1.3rem; block-size: 1.3rem; }
body:is(.is-home, .is-hub) .hx-cat-text,
body:is(.is-home, .is-hub) .hx-row-text { flex: 1 1 auto; min-inline-size: 0; }
body:is(.is-home, .is-hub) .hx-cat-name,
body:is(.is-home, .is-hub) .hx-row-name { display: block; font-weight: 650; font-size: .95rem; line-height: 1.3; }
body:is(.is-home, .is-hub) .hx-cat-count { display: block; font-size: .8rem; color: var(--text-faint); }
body:is(.is-home, .is-hub) .hx-row-short {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .82rem; color: var(--text-faint); line-height: 1.45;
}
body:is(.is-home, .is-hub) .hx-cat-arrow { flex: none; color: var(--text-faint); transition: transform .18s ease, color .18s ease; }
body:is(.is-home, .is-hub) .hx-cat-arrow svg { inline-size: 1rem; block-size: 1rem; }
body:is(.is-home, .is-hub) .hx-cat:hover .hx-cat-arrow,
body:is(.is-home, .is-hub) .hx-row:hover .hx-cat-arrow { color: var(--hx-acc-text); transform: translateX(3px); }

body:is(.is-home, .is-hub) .hx-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* CTA */
body:is(.is-home, .is-hub) .hx-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--hx-card-line-hover);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(30rem 14rem at 100% 0%, color-mix(in srgb, var(--hx-acc1) 22%, transparent), transparent 70%),
    radial-gradient(26rem 14rem at 0% 100%, color-mix(in srgb, var(--hx-acc2) 14%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--hx-card-shadow);
}
body:is(.is-home, .is-hub) .hx-cta-art svg { inline-size: 6rem; block-size: 6rem; display: block; }
body:is(.is-home, .is-hub) .hx-ring-a { fill: #ef4444; }
body:is(.is-home, .is-hub) .hx-ring-b { fill: #ffffff; }
body:is(.is-home, .is-hub) .hx-ring-c { fill: var(--hx-acc2); }
body:is(.is-home, .is-hub) .hx-dart { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
body:is(.is-home, .is-hub) .hx-cta h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
body:is(.is-home, .is-hub) .hx-cta p { margin: .5rem 0 0; color: var(--text-soft); max-inline-size: 50ch; }
body:is(.is-home, .is-hub) .hx-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* FAQ */
body:is(.is-home, .is-hub) .hx-faq { max-inline-size: 60rem; margin-inline: auto; }
body:is(.is-home, .is-hub) .hx-faq .disclosure { background: var(--surface); border-color: var(--line); border-radius: 14px; }

/* Footer follows the home tokens; only its surface. */
body.is-home .site-footer { background: var(--surface-alt); border-top: 1px solid var(--line); }

/* Focus */
body:is(.is-home, .is-hub) .hx-tile:focus-visible,
body:is(.is-home, .is-hub) .hx-cat:focus-visible,
body:is(.is-home, .is-hub) .hx-row:focus-visible,
body:is(.is-home, .is-hub) .hx-chip:focus-visible,
body:is(.is-home, .is-hub) .hx-pill:focus-visible,
body:is(.is-home, .is-hub) .hx-btn:focus-visible,
body:is(.is-home, .is-hub) .hx-more:focus-visible,
body:is(.is-home, .is-hub) .hx-header-search:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body:is(.is-home, .is-hub) .hx-float { animation: none; }
  body:is(.is-home, .is-hub) .hx-tile, body:is(.is-home, .is-hub) .hx-cat, body:is(.is-home, .is-hub) .hx-row, body:is(.is-home, .is-hub) .hx-chip,
  body:is(.is-home, .is-hub) .hx-btn, body:is(.is-home, .is-hub) .hx-tile-icon, body:is(.is-home, .is-hub) .hx-cat-arrow { transition: none; }
  body:is(.is-home, .is-hub) .hx-tile:hover, body:is(.is-home, .is-hub) .hx-cat:hover, body:is(.is-home, .is-hub) .hx-row:hover { transform: none; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  body:is(.is-home, .is-hub) .hx-hero-grid { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s4); }
  body:is(.is-home, .is-hub) .hx-art { min-block-size: 15rem; }
  body:is(.is-home, .is-hub) .hx-note { display: none; }
  body:is(.is-home, .is-hub) .hx-float { inline-size: 2.8rem; block-size: 2.8rem; border-radius: 14px; }
  body:is(.is-home, .is-hub) .hx-float svg { inline-size: 1.2rem; block-size: 1.2rem; }
  body:is(.is-home, .is-hub) .hx-tiles, body:is(.is-home, .is-hub) .hx-tiles-tool { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:is(.is-home, .is-hub) .hx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is(.is-home, .is-hub) .hx-strip li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  body:is(.is-home, .is-hub) .hx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is(.is-home, .is-hub) .hx-cta { grid-template-columns: auto minmax(0, 1fr); }
  body:is(.is-home, .is-hub) .hx-cta-actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body:is(.is-home, .is-hub) .hx-hero-grid { grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: start; row-gap: var(--s4); }
  body:is(.is-home, .is-hub) .hx-hero-copy { display: contents; }
  body:is(.is-home, .is-hub) .hx-badge { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; margin: 0; }
  body:is(.is-home, .is-hub) .hx-h1 { grid-column: 1 / -1; grid-row: 2; }
  body:is(.is-home, .is-hub) .hx-art { grid-column: 2; grid-row: 1; min-block-size: 0; margin-block-end: -2rem; }
  body:is(.is-home, .is-hub) .hx-float, body:is(.is-home, .is-hub) .hx-art-glow { display: none; }
  body:is(.is-home, .is-hub) .hx-lede, body:is(.is-home, .is-hub) .hx-search, body:is(.is-home, .is-hub) .hx-chips { grid-column: 1 / -1; margin-block-start: 0; }
  body:is(.is-home, .is-hub) .hx-search .btn { padding-inline: 1.1rem; }
  body:is(.is-home, .is-hub) .hx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body:is(.is-home, .is-hub) .hx-tiles-tool { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:is(.is-home, .is-hub) .hx-tile { min-block-size: 7.25rem; padding: .9rem .35rem .75rem; border-radius: 16px; gap: .5rem; }
  body:is(.is-home, .is-hub) .hx-h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.3rem); }
  body:is(.is-home, .is-hub) .hx-tile-icon { inline-size: 3rem; block-size: 3rem; border-radius: 14px; }
  body:is(.is-home, .is-hub) .hx-tile-name { font-size: .82rem; }
  body:is(.is-home, .is-hub) .hx-strip { padding: var(--s3); gap: var(--s3); }
  body:is(.is-home, .is-hub) .hx-strip li + li { border-inline-start: 0; padding-inline-start: 0; }
  body:is(.is-home, .is-hub) .hx-strip small { display: none; }
  body:is(.is-home, .is-hub) .hx-strip-icon { inline-size: 2.2rem; block-size: 2.2rem; }
  body:is(.is-home, .is-hub) .hx-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body:is(.is-home, .is-hub) .hx-cat { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .85rem; }
  body:is(.is-home, .is-hub) .hx-cat .hx-cat-arrow { display: none; }
  body:is(.is-home, .is-hub) .hx-list { grid-template-columns: minmax(0, 1fr); }
  body:is(.is-home, .is-hub) .hx-cta { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  body:is(.is-home, .is-hub) .hx-cta-art svg { inline-size: 4rem; block-size: 4rem; }
  body:is(.is-home, .is-hub) .hx-cta-actions .hx-btn { flex: 1 1 100%; }
  body:is(.is-home, .is-hub) .hx-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  body:is(.is-home, .is-hub) .hx-pill { flex: none; }
}
@media (max-width: 359px) {
  body:is(.is-home, .is-hub) .hx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The header's compact search keeps main.css's warm sunk fill otherwise. */
body.is-hub .header-search .input, body.is-home .header-search .input { background: var(--surface); border-color: var(--line); color: var(--text); }

/* ==========================================================================
   Reference pass 2 (2026-09-23) — header, tab bar, grid, mobile buttons.
   ========================================================================== */

/* "All tools" button in the header, as in the reference. */
body:is(.is-home, .is-hub) .hx-header-cta {
  display: none;
  align-items: center;
  gap: .45rem;
  min-block-size: 40px;
  padding: .35rem 1.05rem;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--hx-on-acc);
  background: linear-gradient(135deg, var(--hx-acc1), var(--hx-acc2));
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px var(--hx-glow);
}
body:is(.is-home, .is-hub) .hx-header-cta svg { inline-size: 1rem; block-size: 1rem; }
body:is(.is-home, .is-hub) .hx-header-cta:hover { color: var(--hx-on-acc); filter: brightness(1.06); }
@media (min-width: 1080px) {
  body:is(.is-home, .is-hub) .hx-header-cta { display: inline-flex; }
}

/* Homepage header: the hero holds the search field, so the bar shows a
   search icon instead — which leaves room to keep the full nav inline
   down to 901px, like the laptop reference. */
body:is(.is-home, .is-hub) .header-search { display: none; }
body:is(.is-home, .is-hub) .hx-header-search {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--surface);
}
body:is(.is-home, .is-hub) .hx-header-search svg { inline-size: 19px; block-size: 19px; }
body.is-home .nav { justify-content: center; }

@media (min-width: 901px) and (max-width: 1079px) {
  body.is-home .menu-btn { display: none; }
  body.is-home .brand { margin-inline-end: 0; }
  body.is-home .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  body.is-home .nav-list { flex-direction: row; gap: 2px; }
  body.is-home .nav-link { padding: .5rem .7rem; font-size: .92rem; }
  body.is-home .hx-header-cta { display: inline-flex; }
}
@media (max-width: 1079px) {
  /* Inside the collapsed menu panel the search is useful again. */
  body:is(.is-home, .is-hub) .nav[data-open="true"] .header-search { display: block; }
}

/* Calculator grid: 6 across down to 961px, like the reference. */
@media (min-width: 961px) {
  body.is-home .hx-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.is-home .hx-tiles-tool { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Mobile bottom tab bar. */
body:is(.is-home, .is-hub) .hx-tabbar { display: none; }
@media (max-width: 640px) {
  body:is(.is-home, .is-hub) .hx-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  body:is(.is-home, .is-hub) .hx-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-block-size: 52px;
    padding: .3rem 0;
    font: inherit;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-faint);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
  }
  body:is(.is-home, .is-hub) .hx-tab svg { inline-size: 1.4rem; block-size: 1.4rem; }
  body:is(.is-home, .is-hub) .hx-tab[aria-current="page"] { color: var(--hx-acc-text); }
  body:is(.is-home, .is-hub) .hx-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  body:is(.is-home, .is-hub) { padding-block-end: calc(68px + env(safe-area-inset-bottom)); }

  /* Full-width outlined "View all", as in the mobile reference. */
  body.is-home .hx-center .hx-btn { inline-size: 100%; border-radius: 999px; }
  /* The four benefits in one compact row, like the reference. */
  body.is-home .hx-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  body.is-home .hx-strip li { flex-direction: column; text-align: center; gap: .35rem; }
  body.is-home .hx-strip strong { font-size: .7rem; line-height: 1.25; }
}