/* ====================================================================
   HandyConvert — shared base stylesheet
   Mobile-first. Plain CSS, custom properties for theming. No preprocessor.
   Category accent colours live in /assets/<category>.css, loaded after
   this file by header.php. The :root values below are the Home & Build
   defaults and act as a fallback if no category file loads.
   ==================================================================== */

/* Inter — self-hosted variable font (was Google Fonts, 2026-06-08 PSI pass).
   Eliminates 2 third-party DNS+TLS handshakes (fonts.googleapis.com,
   fonts.gstatic.com) from the LCP path. v20 ships as a variable font, so
   one file covers weights 400-700. Subset to latin + latin-ext (EN/FR site).
   font-display: swap → text paints immediately with fallback, swaps when
   Inter loads. Paired with the fallback metric override below to cut CLS. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fallback metric override — Arial sized to closely match Inter's metrics,
   so the font-swap from system → Inter causes minimal layout shift (CLS). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --bg:            #FFFFFF;
  --surface:       #FFFFFF;
  --surface-alt:   #F4F4F5;
  --text:          #1A1A1A;
  --text-muted:    #5C5C62;
  --border:        #E6E6E9;
  --border-strong: #CDCDD2;

  --accent:        #D97706;   /* default = Home & Build amber */
  --accent-strong: #B45309;
  --accent-soft:   #FEF3E2;
  --on-accent:     #FFFFFF;

  --svg-fill:      #F4F4F5;
  --svg-stroke:    #9A9AA0;

  --ok:            #15803D;
  --shadow:        0 1px 3px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.05);

  --radius:        12px;
  --radius-sm:     8px;
  --gutter:        20px;   /* space framing the content; scales up on wider screens */

  --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg:            #16161A;
  --surface:       #1F1F25;
  --surface-alt:   #2A2A31;
  --text:          #F1F0EC;
  --text-muted:    #A6A39B;
  --border:        #34343D;
  --border-strong: #45454F;

  --accent:        #F59E0B;
  --accent-strong: #FBBF24;
  --accent-soft:   #2E2410;
  --on-accent:     #1A1A1A;

  --svg-fill:      #26262E;
  --svg-stroke:    #6E6E78;

  --ok:            #4ADE80;
  --shadow:        0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
}

/* ---- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

/* ====================================================================
   GLOBAL CORNER LOCK — no rounded corners anywhere on the site,
   on any element, ever. Overrides any legacy per-component
   border-radius from older stylesheets, browser defaults, or
   user-agent UI elements.
   ==================================================================== */
*, *::before, *::after, input, select, textarea, button {
  border-radius: 0 !important;
}
/* Reserve the homepage unit-converter's height while Alpine hydrates, so its
   reveal doesn't shove the category cards / AdSense slot down (fixes a
   CLS=1.0 PSI flag, 2026-06-08). The selector targets the cloaked .v3-conv
   directly — the earlier .uconv version was orphaned by the v3 rename and
   matched nothing, which is why CLS spiked back up. After hydration this
   selector stops matching, so the natural content height takes over.

   Heights are tuned to the default "length" view (sector tabs row + chip
   row + input row + 8 unit-result rows). Mobile chips can wrap to 2 rows
   under 540px viewport, so the mobile reserve is taller. */
.v3-conv[x-cloak] {
  display: block !important;
  visibility: hidden;
  min-height: 620px;
}
@media (min-width: 640px) {
  .v3-conv[x-cloak] { min-height: 560px; }
}
/* The conditional system-chip row (x-show, only fires for length/area/etc.)
   is the second-biggest shift source — reserve ~40px so the input row below
   doesn't jump when usesSystem flips true. */
.v3-conv__system { min-height: 40px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 1260px;            /* narrower content column; cards wrap to 2 rows */
  padding: var(--gutter) var(--gutter) 0; /* no bottom gutter so the footer sits flush */
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: fill at least the viewport so the footer sits flush at
     the bottom on short pages; main grows to take up the slack. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---- Monotone icons ---------------------------------------------- */
.icon {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.16em;
  filter: url(#hc-sketch);   /* gentle hand-drawn wobble on the line work */
}
/* Hand-drawn PNG icons replace the line icons — no SVG filter, fit cleanly. */
.icon--img { filter: none; object-fit: contain; }
[data-theme="dark"] .icon--img { filter: invert(1); }
.btn .icon, .hc-consent__btn .icon { width: 17px; height: 17px; }
.card-icon { display: block; color: var(--accent); margin-bottom: 4px; }
.card-icon .icon { width: 200px; height: auto; max-width: 100%; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 25px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
p  { margin: 0 0 1em; }
a  { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img, svg { max-width: 100%; }
.tabular { font-variant-numeric: tabular-nums; }

/* Full-width content; the 50px frame is the body padding around it. */
.container { width: 100%; margin: 0 auto; padding: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Site header -------------------------------------------------- */
/* No box — the header is just content with a soft hairline rule beneath. */
.site-header {
  background: transparent;
  border-bottom: 1px solid var(--border-strong);
}
.site-header__inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 6px 0;   /* header hugs the logo — no tall empty band */
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo__img { width: 300px; height: auto; max-width: 72vw; display: block; }
/* The logo is black line art — flip it to white in dark mode. */
[data-theme="dark"] .site-logo__img { filter: invert(1); }
.theme-toggle .icon { width: 20px; height: 20px; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--text-muted); text-decoration: none; font-weight: 500;
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 15px;
}
.site-nav a:hover { background: var(--surface-alt); color: var(--text); }
.site-nav a[aria-current="true"] { color: var(--accent-strong); }
.theme-toggle {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  font-size: 18px; line-height: 1;
}
.theme-toggle:hover { background: var(--surface-alt); }

/* ====================================================================
   NEW HEADER (.hc-header) — sticky white bar with hairline rule and
   full-width drop-down panels. Used site-wide. The old .site-header
   styles above are kept only to avoid breaking pages that still
   reference those classes; nothing live uses them now.
   ==================================================================== */
.hc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 2px solid #161616;        /* the thin solid line — now bolder */
}
[data-theme="dark"] .hc-header { background: #161616; border-bottom-color: #F4F4F4; }

.hc-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;     /* logo | nav (centered) | actions */
  align-items: center;
  gap: 24px;
  height: 56px;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.hc-header__row > .hc-header__actions { justify-self: end; }
@media (max-width: 700px) {
  /* Tight screens: fall back to single-row flex with horizontal-scroll nav. */
  .hc-header__row {
    display: flex;
    gap: 12px; padding: 0 12px; height: 52px;
  }
}

.hc-header__logo { display: inline-flex; align-items: center; flex: none; }
.hc-header__logo img {
  display: block; height: 47px; width: auto; max-width: 250px;
}
[data-theme="dark"] .hc-header__logo img { filter: invert(1); }

/* ---- Nav (the inline category buttons) ---------------------------- */
.hc-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  overflow-x: auto;          /* horizontal scroll on narrow screens */
  scrollbar-width: none;
}
.hc-nav::-webkit-scrollbar { display: none; }

.hc-nav__btn,
.hc-nav__link {
  background: transparent;
  border: 0;
  padding: 0 14px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 14px/1 var(--font);
  color: #161616;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  position: relative;
  transition: background 80ms ease, color 80ms ease;
}
[data-theme="dark"] .hc-nav__btn,
[data-theme="dark"] .hc-nav__link { color: #F4F4F4; }

.hc-nav__btn:hover,
.hc-nav__link:hover { background: #F4F4F4; }
[data-theme="dark"] .hc-nav__btn:hover,
[data-theme="dark"] .hc-nav__link:hover { background: #262626; }

.hc-nav__btn.is-open {
  background: #F4F4F4;
}
.hc-nav__btn.is-open::after,
.hc-nav__link[aria-current="page"]::after,
.hc-nav__btn[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: -1px;                /* sits on the header's bottom rule */
  height: 2px;
  background: #0062FF;
}

.hc-nav__caret {
  font-size: 10px;
  color: #525252;
  transform: translateY(1px);
}
[data-theme="dark"] .hc-nav__caret { color: #C6C6C6; }
.hc-nav__btn.is-open .hc-nav__caret { color: #0062FF; transform: translateY(1px) rotate(180deg); }

@media (max-width: 700px) {
  .hc-nav { flex: 1 1 auto; }      /* mobile flex fallback: nav fills row, scrolls */
  .hc-nav__btn,
  .hc-nav__link { padding: 0 10px; font-size: 13.5px; height: 52px; }
}

/* ---- Actions (lang + theme) --------------------------------------- */
.hc-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: auto;
}
.hc-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 var(--font);
  color: #525252;
}
[data-theme="dark"] .hc-lang { color: #C6C6C6; }
.hc-lang a { color: inherit; text-decoration: none; padding: 4px; }
.hc-lang a[aria-current="true"] { color: #0062FF; font-weight: 600; }
.hc-lang a:hover { color: #0062FF; }

.hc-theme {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid #E0E0E0;
  border-radius: 0;
  cursor: pointer;
  color: #161616;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .hc-theme { color: #F4F4F4; border-color: #393939; }
.hc-theme:hover { background: #F4F4F4; }
[data-theme="dark"] .hc-theme:hover { background: #262626; }
.hc-theme .icon { width: 18px; height: 18px; }

/* ---- Mega-menu (full-width drop-down) ----------------------------- */
.hc-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  width: 100%;
  background: #FFFFFF;
  border-bottom: 2px solid #161616;
  box-shadow: none;
}
[data-theme="dark"] .hc-mega {
  background: #161616;
  border-bottom-color: #F4F4F4;
}
.hc-mega__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 20px 36px;
}
@media (max-width: 700px) {
  .hc-mega__inner { padding: 20px 12px 24px; }
}
.hc-mega__head { margin: 0 0 20px; }
.hc-mega__title {
  font: 600 22px/1.2 var(--font);
  letter-spacing: -0.01em;
  color: #161616;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .hc-mega__title { color: #F4F4F4; }
.hc-mega__title:hover .hc-mega__title-arrow { transform: translateX(3px); }
.hc-mega__title-arrow {
  font-size: 18px;
  color: #0062FF;
  transition: transform 120ms ease;
}
.hc-mega__tagline {
  font: 400 14px/1.5 var(--font);
  color: #525252;
  margin: 6px 0 0;
}
[data-theme="dark"] .hc-mega__tagline { color: #C6C6C6; }

.hc-mega__tools {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .hc-mega__tools { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .hc-mega__tools { grid-template-columns: repeat(3, 1fr); }
}

.hc-mega__tool { margin: 0; }
.hc-mega__tool-link {
  display: block;
  background: #FFFFFF;
  border: 2px solid #161616;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color 80ms ease, background 80ms ease;
}
[data-theme="dark"] .hc-mega__tool-link { background: #161616; border-color: #F4F4F4; }
.hc-mega__tool-link:hover { border-color: #0062FF; }
[data-theme="dark"] .hc-mega__tool-link:hover { border-color: #4589FF; }
.hc-mega__tool-link.is-soon { opacity: .55; cursor: default; }
.hc-mega__tool-link.is-soon:hover { border-color: #161616; }
[data-theme="dark"] .hc-mega__tool-link.is-soon:hover { border-color: #F4F4F4; }

.hc-mega__tool-name {
  display: block;
  font: 600 15px/1.3 var(--font);
  color: #161616;
  margin: 0 0 2px;
}
[data-theme="dark"] .hc-mega__tool-name { color: #F4F4F4; }
.hc-mega__tool-desc {
  display: block;
  font: 400 13px/1.5 var(--font);
  color: #525252;
}
[data-theme="dark"] .hc-mega__tool-desc { color: #C6C6C6; }
.hc-mega__soon {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #525252;
  border: 1px solid #8D8D8D;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}
[data-theme="dark"] .hc-mega__soon { color: #C6C6C6; border-color: #6F6F6F; }

/* ---- Multi-column mega menu (Trades sub-categories) -------------- */
.hc-mega__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 2px solid #161616;
}
[data-theme="dark"] .hc-mega__cols { border-color: #F4F4F4; }
@media (min-width: 600px) {
  .hc-mega__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hc-mega__cols { grid-template-columns: repeat(4, 1fr); }
}

.hc-mega__col {
  padding: 20px;
  border-bottom: 2px solid #161616;
}
[data-theme="dark"] .hc-mega__col { border-bottom-color: #F4F4F4; }
.hc-mega__col:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .hc-mega__col { border-right: 2px solid #161616; border-bottom: 2px solid #161616; }
  [data-theme="dark"] .hc-mega__col { border-right-color: #F4F4F4; border-bottom-color: #F4F4F4; }
  .hc-mega__col:nth-child(2n) { border-right: 0; }
  .hc-mega__col:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 900px) {
  .hc-mega__col { border-right: 2px solid #161616; border-bottom: 0; }
  [data-theme="dark"] .hc-mega__col { border-right-color: #F4F4F4; }
  .hc-mega__col:nth-child(2n) { border-right: 2px solid #161616; }
  [data-theme="dark"] .hc-mega__col:nth-child(2n) { border-right-color: #F4F4F4; }
  .hc-mega__col:last-child { border-right: 0; }
}

.hc-mega__col-h {
  font: 700 11px/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #161616;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #161616;
}
[data-theme="dark"] .hc-mega__col-h { color: #F4F4F4; border-bottom-color: #F4F4F4; }

.hc-mega__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hc-mega__col-link {
  display: block;
  padding: 6px 8px;
  margin: 0 -8px;
  text-decoration: none;
  color: #161616;
  font: 500 14px/1.4 var(--font);
  border: 2px solid transparent;
  transition: border-color 80ms ease, color 80ms ease;
}
[data-theme="dark"] .hc-mega__col-link { color: #F4F4F4; }
.hc-mega__col-link:hover {
  border-color: #0062FF;
  color: #0062FF;
}
[data-theme="dark"] .hc-mega__col-link:hover {
  border-color: #4589FF;
  color: #4589FF;
}
.hc-mega__col-link.is-soon { color: #8D8D8D; cursor: default; }
[data-theme="dark"] .hc-mega__col-link.is-soon { color: #6F6F6F; }
.hc-mega__col-link.is-soon:hover { border-color: transparent; color: #8D8D8D; }
[data-theme="dark"] .hc-mega__col-link.is-soon:hover { color: #6F6F6F; }

/* ---- Mega-menu foot ("Browse all tools" link) -------------------- */
.hc-mega__foot {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #E0E0E0;
  font-size: 13px;
  text-align: right;
}
[data-theme="dark"] .hc-mega__foot { border-top-color: #393939; }
.hc-mega__foot-link {
  color: #0062FF;
  text-decoration: none;
  font-weight: 600;
}
.hc-mega__foot-link:hover { text-decoration: underline; }
[data-theme="dark"] .hc-mega__foot-link { color: #4589FF; }

/* ====================================================================
   BROWSE PAGE (.hc-browse) — left sidebar of filters + card grid.
   ==================================================================== */
.hc-browse {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 24px 0 0;
}
@media (min-width: 900px) {
  .hc-browse { grid-template-columns: 240px 1fr; gap: 40px; }
}

.hc-browse__side {
  border-bottom: 2px solid #161616;
  padding-bottom: 20px;
}
[data-theme="dark"] .hc-browse__side { border-bottom-color: #F4F4F4; }
@media (min-width: 900px) {
  .hc-browse__side {
    border-bottom: 0;
    border-right: 2px solid #161616;
    padding: 0 24px 0 0;
  }
  [data-theme="dark"] .hc-browse__side { border-right-color: #F4F4F4; }
}
.hc-browse__side-sticky {
  position: sticky;
  top: 72px;
}

.hc-browse__filter {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #161616;
}
[data-theme="dark"] .hc-browse__filter { border-bottom-color: #F4F4F4; }
.hc-browse__filter:last-of-type { border-bottom: 0; padding-bottom: 0; }

.hc-browse__lbl {
  display: block;
  font: 700 11px/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #161616;
  margin: 0 0 12px;
}
[data-theme="dark"] .hc-browse__lbl { color: #F4F4F4; }

.hc-browse__input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: #FFFFFF;
  color: #161616;
  border: 2px solid #161616;
  border-radius: 0;
  font: 500 14px/1.4 var(--font);
}
[data-theme="dark"] .hc-browse__input {
  background: #161616; color: #F4F4F4; border-color: #F4F4F4;
}
.hc-browse__input:focus {
  outline: none;
  border-color: #0062FF;
}
.hc-browse__input::placeholder { color: #8D8D8D; }

.hc-browse__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hc-browse__chip {
  background: #FFFFFF;
  border: 2px solid #161616;
  border-radius: 0;
  padding: 6px 12px;
  font: 500 13px/1.2 var(--font);
  color: #161616;
  cursor: pointer;
  transition: border-color 80ms ease, background 80ms ease, color 80ms ease;
}
[data-theme="dark"] .hc-browse__chip { background: #161616; color: #F4F4F4; border-color: #F4F4F4; }
.hc-browse__chip:hover { border-color: #0062FF; color: #0062FF; }
.hc-browse__chip.is-on {
  background: #161616;
  border-color: #161616;
  color: #FFFFFF;
}
[data-theme="dark"] .hc-browse__chip.is-on { background: #F4F4F4; border-color: #F4F4F4; color: #161616; }

.hc-browse__reset {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 4px;
  font: 500 13px/1 var(--font);
  color: #525252;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-theme="dark"] .hc-browse__reset { color: #C6C6C6; }
.hc-browse__reset:hover { color: #0062FF; }

/* ---- Main: card grid --------------------------------------------- */
.hc-browse__main { min-width: 0; }
.hc-browse__count {
  font: 500 13px/1 var(--font);
  color: #525252;
  margin: 0 0 16px;
}
[data-theme="dark"] .hc-browse__count { color: #C6C6C6; }

.hc-browse__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .hc-browse__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .hc-browse__grid { grid-template-columns: repeat(3, 1fr); }
}

.hc-browse__card {
  display: block;
  background: #FFFFFF;
  border: 2px solid #161616;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 80ms ease;
  position: relative;
}
[data-theme="dark"] .hc-browse__card { background: #161616; border-color: #F4F4F4; }
.hc-browse__card:hover { border-color: #0062FF; }
.hc-browse__card:hover .hc-browse__card-name { color: #0062FF; }
[data-theme="dark"] .hc-browse__card:hover { border-color: #4589FF; }
[data-theme="dark"] .hc-browse__card:hover .hc-browse__card-name { color: #4589FF; }
.hc-browse__card.is-soon { opacity: 0.55; cursor: default; }
.hc-browse__card.is-soon:hover { border-color: #161616; }
.hc-browse__card.is-soon:hover .hc-browse__card-name { color: #161616; }
[data-theme="dark"] .hc-browse__card.is-soon:hover { border-color: #F4F4F4; }
[data-theme="dark"] .hc-browse__card.is-soon:hover .hc-browse__card-name { color: #F4F4F4; }

.hc-browse__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid #161616;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="dark"] .hc-browse__card-head { border-bottom-color: #F4F4F4; }
.hc-browse__card-cat { color: #161616; font-weight: 700; }
[data-theme="dark"] .hc-browse__card-cat { color: #F4F4F4; }
.hc-browse__card-st {
  font-weight: 700;
  padding: 2px 6px;
  border: 1.5px solid;
}
.hc-browse__card-st.is-live { color: #0062FF; border-color: #0062FF; }
[data-theme="dark"] .hc-browse__card-st.is-live { color: #4589FF; border-color: #4589FF; }
.hc-browse__card-st.is-soon { color: #8D8D8D; border-color: #8D8D8D; }
[data-theme="dark"] .hc-browse__card-st.is-soon { color: #6F6F6F; border-color: #6F6F6F; }

.hc-browse__card-name {
  display: block;
  font: 600 16px/1.3 var(--font);
  color: #161616;
  margin: 0 0 6px;
  transition: color 80ms ease;
}
[data-theme="dark"] .hc-browse__card-name { color: #F4F4F4; }
.hc-browse__card-desc {
  display: block;
  font: 400 13px/1.55 var(--font);
  color: #525252;
}
[data-theme="dark"] .hc-browse__card-desc { color: #C6C6C6; }

.hc-browse__empty {
  margin: 24px 0;
  padding: 32px;
  background: #FFFFFF;
  border: 2px solid #161616;
  text-align: center;
  color: #525252;
  font-size: 14px;
}
[data-theme="dark"] .hc-browse__empty { background: #161616; border-color: #F4F4F4; color: #C6C6C6; }

.hc-prose h2 {
  font: 600 18px/1.2 var(--font);
  margin: 24px 0 8px;
}
.hc-prose p {
  font: 400 15px/1.7 var(--font);
  color: #525252;
  margin: 0 0 12px;
}
[data-theme="dark"] .hc-prose p { color: #C6C6C6; }
.hc-prose a { color: #0062FF; }
.hc-prose a:hover { text-decoration: underline; }

/* Hide the legacy site-header so only one header renders. */
header.site-header { display: none; }

/* ====================================================================
   V3 PHARMA-LAB DESIGN — global tokens + class library
   Sky-blue accent on white, soft hairline borders, 0px corners,
   IBM Plex Mono numerals. Used by the homepage and any other page
   that adopts the .v3-* class family. The Trades section also uses
   the same tokens (scoped via [data-category="trades"] in trades.css)
   so the look is consistent everywhere.
   ==================================================================== */
:root {
  --v3-bg:            #FFFFFF;
  --v3-tint:          #F0F9FF;   /* sky-50 */
  --v3-border:        #E0F2FE;   /* sky-100 */
  --v3-border-mid:    #BAE6FD;   /* sky-200 */
  --v3-border-strong: #7DD3FC;   /* sky-300 */
  --v3-text:          #0F172A;   /* slate-900 */
  --v3-text-muted:    #475569;   /* slate-600 */
  --v3-text-subtle:   #94A3B8;   /* slate-400 */
  --v3-accent:        #0284C7;   /* sky-600 */
  --v3-accent-strong: #0369A1;   /* sky-700 */
  --v3-accent-soft:   #F0F9FF;   /* sky-50 */
  --v3-on-accent:     #FFFFFF;
  --v3-mono:          'IBM Plex Mono', ui-monospace, SFMono-Regular,
                      'Menlo', 'Consolas', monospace;
}

/* ---- Compact page head (used by v3 pages) ----------------------- */
.v3-head {
  padding: 18px 0 14px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--v3-border);
  text-align: center;
}
.v3-head h1 {
  font: 500 24px/1.2 var(--font);
  letter-spacing: -0.01em;
  color: var(--v3-text);
  margin: 0;
}
.v3-head__sub {
  font: 400 14px/1.4 var(--font);
  color: var(--v3-text-muted);
  margin: 4px 0 0;
}

/* ---- Section label chip (filled sky-blue) ----------------------- */
.v3-label {
  display: inline-block;
  background: var(--v3-accent);
  color: var(--v3-on-accent);
  font: 600 10px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 0 0 12px;
}
.v3-label--ghost {
  background: transparent;
  color: var(--v3-accent);
  border: 1px solid var(--v3-accent);
}

/* ---- Panel: hairline-bordered white card ------------------------ */
.v3-panel {
  background: var(--v3-bg);
  border: 1px solid var(--v3-border);
  border-radius: 0;
  padding: 16px 18px;
}
.v3-panel--tint { background: var(--v3-tint); }

/* ---- Buttons --------------------------------------------------- */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--v3-bg);
  border: 1px solid var(--v3-accent);
  color: var(--v3-accent);
  height: 36px;
  padding: 0 14px;
  font: 600 12px/1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background 80ms ease, color 80ms ease;
}
.v3-btn:hover { background: var(--v3-accent); color: var(--v3-on-accent); }
.v3-btn--primary { background: var(--v3-accent); color: var(--v3-on-accent); }
.v3-btn--primary:hover { background: var(--v3-accent-strong); border-color: var(--v3-accent-strong); }

/* ====================================================================
   V3 INDEX LAYOUT — quick-nav + grouped lists (like a reference book)
   For the all-tools browse page, the trades landing, and any other
   page that needs to organize many entries scannably without cards.
   ==================================================================== */

.v3-index {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

/* ---- Quick navigation (anchor jump menu, top of page) -------------- */
.v3-quicknav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 18px;
  padding: 12px 16px;
  background: var(--v3-tint);
  border: 1px solid var(--v3-border);
  margin: 0 0 28px;
}
.v3-quicknav__title {
  font: 700 11px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
  margin-right: 4px;
}
.v3-quicknav a {
  display: inline-block;
  padding: 4px 0;
  color: var(--v3-accent);
  text-decoration: none;
  font: 500 13.5px/1.2 var(--font);
  border-bottom: 1px solid transparent;
}
.v3-quicknav a:hover {
  color: var(--v3-accent-strong);
  border-bottom-color: var(--v3-accent);
}

/* ---- Search + filter chips inline strip ---------------------------- */
.v3-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.v3-filterbar__search {
  flex: 1 1 240px;
  max-width: 360px;
  height: 38px;
  padding: 0 12px;
  background: var(--v3-bg);
  color: var(--v3-text);
  border: 1px solid var(--v3-border-mid);
  font: 500 14px/1.4 var(--font);
}
.v3-filterbar__search:focus { outline: none; border-color: var(--v3-accent); }
.v3-filterbar__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.v3-filterbar__chip {
  background: var(--v3-bg);
  border: 1px solid var(--v3-border-mid);
  padding: 6px 10px;
  font: 500 12px/1 var(--font);
  color: var(--v3-text-muted);
  cursor: pointer;
}
.v3-filterbar__chip:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
.v3-filterbar__chip.is-on {
  background: var(--v3-accent);
  border-color: var(--v3-accent);
  color: var(--v3-on-accent);
}

/* ---- Section block (one category) --------------------------------- */
.v3-section { margin: 0 0 32px; }
.v3-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--v3-accent);
}
.v3-section__title {
  font: 600 18px/1.2 var(--font);
  letter-spacing: -0.005em;
  color: var(--v3-text);
  margin: 0;
}
.v3-section__count {
  font: 600 10px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-text-subtle);
  white-space: nowrap;
}
.v3-section__desc {
  font: 400 13.5px/1.55 var(--font);
  color: var(--v3-text-muted);
  margin: 0 0 8px;
}

/* ---- Subsection (sub-category) ------------------------------------ */
.v3-subsection { margin: 16px 0 0; }
.v3-subsection__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--v3-border);
}
.v3-subsection__title {
  font: 700 10.5px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-text-muted);
  margin: 0;
}

/* ---- The actual tool list ----------------------------------------- */
.v3-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.v3-list__item {
  border-bottom: 1px solid var(--v3-border);
}
.v3-list__item:last-child { border-bottom: 0; }
.v3-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 10px 0;
  text-decoration: none;
  color: inherit;
  transition: background 60ms ease;
}
.v3-list__link:hover {
  background: var(--v3-tint);
  padding-left: 8px;
  padding-right: 8px;
}
.v3-list__link.is-soon {
  cursor: default;
  opacity: 0.55;
}
.v3-list__link.is-soon:hover {
  background: transparent;
  padding-left: 0;
  padding-right: 4px;
}
.v3-list__body { min-width: 0; }
.v3-list__name {
  display: block;
  font: 600 14.5px/1.3 var(--font);
  color: var(--v3-text);
}
.v3-list__link:hover .v3-list__name { color: var(--v3-accent); }
.v3-list__desc {
  display: block;
  font: 400 12.5px/1.45 var(--font);
  color: var(--v3-text-muted);
  margin-top: 1px;
}
.v3-list__status {
  font: 700 9.5px/1 var(--font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid;
  flex-shrink: 0;
}
.v3-list__status--live {
  color: var(--v3-accent);
  border-color: var(--v3-accent);
}
.v3-list__status--soon {
  color: var(--v3-text-subtle);
  border-color: var(--v3-text-subtle);
}

/* ---- "No matches" empty state for filtered views ------------------ */
.v3-noresults {
  padding: 32px 16px;
  text-align: center;
  border: 1px dashed var(--v3-border-mid);
  color: var(--v3-text-muted);
  font: 400 14px/1.4 var(--font);
}

/* ====================================================================
   V3 HOMEPAGE HERO — converter is the hero, compact
   ==================================================================== */
.v3-hero {
  background: var(--v3-bg);
  border-bottom: 1px solid var(--v3-border);
  padding: 18px 20px 22px;
  margin: 0 0 16px;
}
.v3-hero__inner { max-width: 1100px; margin: 0 auto; }
.v3-hero h1 {
  font: 500 22px/1.2 var(--font);
  letter-spacing: -0.01em;
  color: var(--v3-text);
  margin: 0 0 4px;
  text-align: center;
}
.v3-hero__sub {
  font: 400 13px/1.4 var(--font);
  color: var(--v3-text-muted);
  margin: 0 0 16px;
  text-align: center;
}

/* ====================================================================
   V3 UNIT CONVERTER — single-column flow, no panels, no labels.
   Simplified layout: tabs → chips → input → results, all stacked.
   ==================================================================== */
.v3-conv {
  background: var(--v3-bg);
  border: 1px solid var(--v3-border);
  padding: 16px 18px;
}
.v3-conv__inputs { padding: 0; border: 0; }
.v3-conv__output {
  background: transparent;
  padding: 14px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--v3-border);
}

/* Sector tabs row */
.v3-conv__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--v3-border-mid);
  border-radius: 0;
  margin: 0 0 12px;
}
.v3-conv__tab {
  appearance: none;
  background: var(--v3-bg);
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--v3-border-mid);
  height: 36px;
  padding: 0 12px;
  font: 500 13px/1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-text-muted);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
}
.v3-conv__tab:last-child { border-right: 0; }
.v3-conv__tab[aria-selected="true"] {
  background: var(--v3-accent);
  color: var(--v3-on-accent);
}

/* Category chip row — equal-width, fills the full row width to align
   with the tabs and input row above/below it. */
.v3-conv__chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--v3-border-mid);
  border-top: 0;            /* joins with the tabs above */
  margin: 0 0 12px;
}
.v3-conv__chips .v3-chip {
  border: 0;
  border-right: 1px solid var(--v3-border-mid);
  height: 34px;
  padding: 0 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-conv__chips .v3-chip:last-child { border-right: 0; }
/* On narrower screens the chips may not all fit; wrap them. */
@media (max-width: 540px) {
  .v3-conv__chips {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  .v3-conv__chips .v3-chip {
    border-right: 1px solid var(--v3-border-mid);
    border-bottom: 1px solid var(--v3-border-mid);
  }
}
.v3-chip {
  appearance: none;
  -webkit-appearance: none;
  background: var(--v3-bg);
  border: 1px solid var(--v3-border-mid);
  color: var(--v3-text-muted);
  font: 500 12px/1 var(--font);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 0 !important;   /* override any browser default */
  transition: border-color 80ms ease, color 80ms ease;
}
.v3-chip:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
.v3-chip[aria-pressed="true"] {
  background: var(--v3-accent);
  border-color: var(--v3-accent);
  color: var(--v3-on-accent);
}

/* Value + unit input row */
.v3-conv__input {
  display: grid;
  grid-template-columns: minmax(120px, 35%) 1fr;
  gap: 0;
  border: 1px solid var(--v3-border-strong);
  border-radius: 0;
  margin: 0 0 4px;
  overflow: hidden;   /* clip any browser-default child rounding */
}
.v3-conv__value {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  border: 0;
  border-radius: 0;
  background: var(--v3-bg);
  padding: 0 12px;
  height: 44px;
  width: 100%;
  min-width: 0;
  font: 600 18px/1 var(--v3-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v3-text);
  border-right: 1px solid var(--v3-border-mid);
  box-shadow: none;
}
.v3-conv__value:focus { outline: none; box-shadow: none; }
/* Strip Safari/Chrome number-input arrows so the field stays clean. */
.v3-conv__value::-webkit-outer-spin-button,
.v3-conv__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v3-conv__unit {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-radius: 0;
  background-color: var(--v3-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%230284C7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  padding: 0 36px 0 12px;
  height: 44px;
  width: 100%;
  font: 500 14px/1 var(--font);
  color: var(--v3-text);
  cursor: pointer;
  box-shadow: none;
}
.v3-conv__value:focus,
.v3-conv__unit:focus { outline: none; }
.v3-conv__unit:hover { background-color: var(--v3-accent-soft); }

.v3-conv__hint {
  font: 400 11px/1.4 var(--font);
  color: var(--v3-text-subtle);
  margin: 4px 0 0;
}

/* Results list — readout-style, monospace */
.v3-conv__results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--v3-bg);
  border: 1px solid var(--v3-border-mid);
  border-radius: 0;
}
.v3-conv__results li {
  border-bottom: 1px solid var(--v3-border-mid);   /* visible row divider */
}
.v3-conv__results li:last-child { border-bottom: 0; }
.v3-conv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.v3-conv__row:hover { background: var(--v3-accent-soft); }
.v3-conv__runit {
  font: 500 13px/1 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-text-muted);
  flex: 0 0 auto;
}
.v3-conv__rnum {
  font: 500 18px/1.2 var(--v3-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v3-text);
  flex: 1 1 auto;
  text-align: right;
}

/* System (US / Imperial / Metric) chip row */
.v3-conv__system {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
}

/* ====================================================================
   V3 CATEGORY STRIP — small cards in a row
   ==================================================================== */
.v3-cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 16px 0 0;
}
@media (min-width: 600px) {
  .v3-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .v3-cats { grid-template-columns: repeat(4, 1fr); }
}
.v3-cat {
  display: block;
  background: var(--v3-bg);
  border: 1px solid var(--v3-border);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 80ms ease;
  border-radius: 0;
}
.v3-cat:hover { border-color: var(--v3-accent); }
.v3-cat:hover .v3-cat__name { color: var(--v3-accent); }
.v3-cat__kicker {
  display: block;
  font: 600 9.5px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-text-subtle);
  margin: 0 0 6px;
}
.v3-cat__name {
  display: block;
  font: 600 14.5px/1.2 var(--font);
  color: var(--v3-text);
  margin: 0 0 3px;
  transition: color 80ms ease;
}
.v3-cat__desc {
  display: block;
  font: 400 12px/1.45 var(--font);
  color: var(--v3-text-muted);
}

/* ====================================================================
   HERO QUIZ (.hc-hero / .hc-stage / .hc-step / .hc-choice)
   Modern research-lab feel: airy, white-with-faint-blue-gradient,
   calm typography, sharp corners. A cube-flip transition reveals
   step 2 below step 1.
   ==================================================================== */
.hc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(140% 80% at 50% 0%,
      rgba(0, 98, 255, 0.06) 0%,
      rgba(0, 98, 255, 0.02) 35%,
      rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F6FAFF 0%, #FFFFFF 65%);
  border-bottom: 1px solid #E0E0E0;
  padding: 56px 20px 72px;
}
[data-theme="dark"] .hc-hero {
  background:
    radial-gradient(140% 80% at 50% 0%,
      rgba(69, 137, 255, 0.10) 0%,
      rgba(69, 137, 255, 0.04) 35%,
      rgba(22, 22, 22, 0) 70%),
    linear-gradient(180deg, #1B1F2A 0%, #161616 65%);
  border-bottom-color: #393939;
}
@media (max-width: 700px) {
  .hc-hero { padding: 36px 16px 52px; }
}

/* Faint blueprint-grid wash sitting behind everything. */
.hc-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(0, 98, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 98, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}
[data-theme="dark"] .hc-hero__bg {
  background-image:
    linear-gradient(to right, rgba(69, 137, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(69, 137, 255, 0.06) 1px, transparent 1px);
}

.hc-hero__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* ---- Step indicator (top-right of hero) -------------------------- */
.hc-hero__rail {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 20px;
  min-height: 18px;
}
.hc-hero__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #525252;
}
[data-theme="dark"] .hc-hero__step { color: #C6C6C6; }
.hc-hero__step-dot {
  width: 8px; height: 8px;
  border: 1px solid #B0BEC5;
  background: transparent;
  border-radius: 0;
  transition: background 150ms ease, border-color 150ms ease;
}
.hc-hero__step-dot.is-active {
  background: #0062FF;
  border-color: #0062FF;
}
[data-theme="dark"] .hc-hero__step-dot.is-active {
  background: #4589FF;
  border-color: #4589FF;
}
.hc-hero__step-text { padding-left: 4px; }

/* ---- H1 (smaller, calm) ------------------------------------------ */
.hc-hero__h1 {
  font: 400 26px/1.2 var(--font);
  letter-spacing: -0.01em;
  color: #161616;
  margin: 0 0 10px;
}
[data-theme="dark"] .hc-hero__h1 { color: #F4F4F4; }
@media (max-width: 700px) {
  .hc-hero__h1 { font-size: 22px; }
}

.hc-hero__sub {
  font: 400 14px/1.5 var(--font);
  color: #525252;
  margin: 0 0 28px;
}
[data-theme="dark"] .hc-hero__sub { color: #C6C6C6; }

/* ---- Stage: 3D context for cube-flip ----------------------------- */
.hc-stage {
  position: relative;
  perspective: 1400px;
  min-height: 360px;
}
@media (min-width: 700px) {
  .hc-stage { min-height: 320px; }
}
.hc-step {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.hc-step--mounted { position: relative; inset: auto; }

/* Enter: rise up from below, rotating from a forward tilt to flat */
.hc-flip-enter {
  transition: transform 460ms cubic-bezier(.2,.85,.3,1), opacity 320ms ease;
}
.hc-flip-enter-from {
  transform: perspective(1400px) rotateX(-55deg) translateY(40px);
  transform-origin: top center;
  opacity: 0;
}
.hc-flip-enter-to {
  transform: perspective(1400px) rotateX(0) translateY(0);
  opacity: 1;
}
/* Leave: rotate up and away — top edge stays, bottom tips forward */
.hc-flip-leave {
  transition: transform 380ms cubic-bezier(.4,.1,.6,1), opacity 240ms ease;
}
.hc-flip-leave-from {
  transform: perspective(1400px) rotateX(0) translateY(0);
  opacity: 1;
}
.hc-flip-leave-to {
  transform: perspective(1400px) rotateX(55deg) translateY(-40px);
  transform-origin: bottom center;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hc-flip-enter, .hc-flip-leave { transition-duration: 1ms !important; }
  .hc-flip-enter-from, .hc-flip-leave-to { transform: none !important; }
}

/* ---- Quiz grids -------------------------------------------------- */
.hc-quiz__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .hc-quiz__pair { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.hc-quiz__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .hc-quiz__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.hc-choice--span { grid-column: 1 / -1; }

/* ---- Choice card ------------------------------------------------- */
.hc-choice {
  background: #FFFFFF;
  border: 2px solid #161616;
  border-radius: 0;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font: 500 16px/1.3 var(--font);
  transition: border-color 100ms ease, color 100ms ease;
  position: relative;
}
[data-theme="dark"] .hc-choice {
  background: #161616;
  border-color: #F4F4F4;
}
.hc-choice:hover {
  border-color: #0062FF;
}
.hc-choice:hover .hc-choice__label { color: #0062FF; }
[data-theme="dark"] .hc-choice:hover { border-color: #4589FF; }
[data-theme="dark"] .hc-choice:hover .hc-choice__label { color: #4589FF; }
.hc-choice:focus-visible {
  outline: 2px solid #0062FF;
  outline-offset: 4px;
}

.hc-choice--lg {
  min-height: 180px;
  padding: 36px 28px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFFFF;
}
[data-theme="dark"] .hc-choice--lg { background: #161616; }
/* Decorative corner brackets in blue for the big Convert/Calculate cards */
.hc-choice--lg::before,
.hc-choice--lg::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid #0062FF;
  opacity: 0;
  transition: opacity 120ms ease;
}
.hc-choice--lg::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.hc-choice--lg::after  { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.hc-choice--lg:hover::before,
.hc-choice--lg:hover::after { opacity: 1; }
@media (min-width: 600px) {
  .hc-choice--lg { min-height: 220px; }
}

.hc-choice__label {
  display: block;
  font: 500 28px/1.1 var(--font);
  color: #161616;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .hc-choice__label { color: #F4F4F4; }
.hc-choice--lg .hc-choice__label { font-weight: 500; }
.hc-choice__desc {
  display: block;
  font: 400 13.5px/1.5 var(--font);
  color: #525252;
  max-width: 28ch;
}
[data-theme="dark"] .hc-choice__desc { color: #C6C6C6; }

/* ---- Foot row (Previous bottom-left) ----------------------------- */
.hc-hero__foot {
  margin: 24px auto 0;
  max-width: 720px;
  text-align: left;
}
.hc-quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  font: 500 13px/1 var(--font);
  color: #525252;
  cursor: pointer;
  padding: 8px 12px;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease;
}
[data-theme="dark"] .hc-quiz__back { color: #C6C6C6; }
.hc-quiz__back:hover {
  color: #0062FF;
  background: rgba(0, 98, 255, 0.06);
}

.hc-quiz__skip {
  display: inline-block;
  margin: 28px auto 0;
  background: transparent;
  border: 0;
  font: 500 13px/1 var(--font);
  color: #525252;
  cursor: pointer;
  padding: 8px 12px;
  text-decoration: none;
}
[data-theme="dark"] .hc-quiz__skip { color: #C6C6C6; }
.hc-quiz__skip:hover { color: #0062FF; }

/* ---- Breadcrumb --------------------------------------------------- */
.breadcrumb { background: var(--bg); font-size: 13.5px; }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0; padding: 12px 0 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }
.breadcrumb__sep { color: var(--border-strong); margin-left: 4px; }

/* ---- Page layout -------------------------------------------------- */
main { display: block; padding: 24px 0 40px; flex: 1 0 auto; }
.page-head { margin: 16px 0 24px; }
.page-head .subhead { color: var(--text-muted); font-size: 17px; margin: 0; }
/* Homepage lede heading — a modest H1, not a hero banner. */
.home-h1 { font-size: 22px; margin-bottom: 6px; }

section { margin: 32px 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* ---- Split calculator: sticky result panel beside the inputs ----- */
.calc-split {
  display: grid;
  grid-template-columns: minmax(275px, 352px) 1fr;
  gap: 24px;
  align-items: start;
}
/* Sticky lives on the grid item (not its child) so the grid container is
   its containing block — that gives it room to travel as the taller inputs
   column scrolls, which is what makes the panel "float" alongside. */
.calc-split__result {
  order: 1; min-width: 0;
  position: sticky; top: 16px; align-self: start;
}
.calc-split__inputs { order: 2; min-width: 0; }
.result-sticky {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.result-sticky .result { margin-top: 0; }
.result-sticky .result__hero { font-size: 40px; }
.result-sticky .stat-grid { grid-template-columns: 1fr 1fr; }
.result-sticky .actions { margin-top: 14px; }
/* Stack on phones/tablets: inputs first, then the result, no stickiness. */
@media (max-width: 760px) {
  .calc-split { grid-template-columns: 1fr; gap: 18px; }
  .calc-split__result { order: 2; position: static; }
  .calc-split__inputs { order: 1; }
}
/* The sticky side panel shows the live total on desktop, so the fixed
   mobile mini-bar is only needed on the stacked (mobile) layout. */
@media (min-width: 761px) { .calc-split ~ .sticky-bar { display: none !important; } }
/* The mortgage summary is denser (long dollar figures + balance-curve
   diagram), so its sidebar gets extra width. Desktop only — mobile stacks. */
@media (min-width: 761px) {
  [data-category="finance"] .calc-split { grid-template-columns: minmax(320px, 440px) 1fr; }
}

/* Result panel head — direction label beside a gallons/litres toggle. */
.result__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.unit-toggle { margin: 0; flex: none; }
.unit-toggle .chip { padding: 4px 10px; min-height: 28px; font-size: 13px; }

/* Stepped result breakdown — readable rows instead of one run-on line. */
.calc-breakdown {
  margin: 16px 0 0; padding: 10px 14px;
  background: var(--surface-alt); border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.calc-breakdown .cb-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.calc-breakdown .cb-row:last-child { border-bottom: none; }
.calc-breakdown dt { color: var(--text-muted); }
.calc-breakdown dd { margin: 0; font-weight: 600; white-space: nowrap; }
.calc-breakdown .cb-row--total dt,
.calc-breakdown .cb-row--total dd { color: var(--text); font-weight: 700; }
.calc-breakdown .cb-row--result dd { color: var(--accent-strong); }
.calc-breakdown .cb-row--result .ok { color: var(--ok); }

/* ---- Homepage / category card grids ------------------------------ */
.category-grid, .tool-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.category-card, .tool-card {
  position: relative;
  text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Clickable cards lift toward the cursor — a clear "open me" cue. */
a.category-card:hover, a.tool-card:hover,
a.category-card:focus-visible, a.tool-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(0,0,0,.08), 0 18px 38px rgba(0,0,0,.13);
}
a.category-card:hover .category-card__title,
a.tool-card:hover .tool-card__title { color: var(--accent-strong); }
/* Always-visible arrow affordance (also works on touch — no hover). */
a.category-card::after, a.tool-card::after {
  content: "→";
  position: absolute; top: 14px; right: 16px;
  font-size: 17px; font-weight: 700; line-height: 1;
  color: var(--accent-strong); opacity: .5;
  transition: transform .16s ease, opacity .16s ease;
}
a.category-card:hover::after, a.tool-card:hover::after {
  opacity: 1; transform: translateX(4px);
}
/* Tool card: graphic on the left, text on the right. */
.tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tool-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tool-card__title { font-weight: 600; font-size: 16px; }
.tool-card__desc  { color: var(--text-muted); font-size: 14px; }
.tool-card .card-icon .icon { width: 200px; height: auto; max-width: 100%; }
.tool-card[aria-disabled] .card-icon { color: var(--text-muted); }

/* Category card: graphic on the left, text on the right. */
.category-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.category-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.category-card__title { font-size: 20px; font-weight: 600; }
.category-card__desc  { color: var(--text-muted); font-size: 14.5px; }
/* Homepage tool finder — heading + opt-in toggle, then interest chips. */
.cat-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.cat-head h2 { margin: 0; }
.finder-intro { color: var(--text-muted); margin: 0 0 10px; }
.finder-chips { margin-bottom: 18px; }

/* ---- Form controls ------------------------------------------------ */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field > label, .field-label {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px;
}
.field-label .tooltip { font-weight: 400; }

input[type="number"], input[type="text"], select {
  width: 100%; max-width: 480px; height: 48px;
  padding: 0 12px;
  font: inherit; font-size: 16px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible { border-color: var(--accent); }

/* Currency-prefixed input — a "$" sits inside the left of the field. */
.prefix-input { position: relative; max-width: 480px; }
.prefix-input__sym {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--text-muted); pointer-events: none;
}
.prefix-input input[type="number"] { padding-left: 26px; }

/* Recipe Scaler — one editable row per ingredient. */
.ingredient-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-bottom: 8px;
}
.ingredient-row input { height: 44px; }
.ingredient-row .ing-amt  { width: 88px; }
.ingredient-row .ing-unit { width: 108px; }
.ingredient-row .ing-name { flex: 1 1 160px; min-width: 140px; }
.ingredient-row__scaled {
  min-width: 96px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent-strong);
}
.ingredient-row__rm {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); border-radius: var(--radius-sm);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.ingredient-row__rm:hover { border-color: var(--accent); color: var(--text); }

/* Pan Substitution — a labelled dimension input. */
.pan-dim { display: flex; flex-direction: column; }
.pan-dim .field-label { margin-bottom: 6px; }
.pan-dim input[type="number"] { max-width: 170px; }

/* Collapsible "Advanced options" — progressive disclosure inside a form. */
.advanced { border-top: 1px solid var(--border-strong); margin: 0 0 20px; }
.advanced__summary {
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 15px; color: var(--accent-strong);
  padding: 14px 0 2px; display: flex; align-items: center; gap: 8px;
}
.advanced__summary::-webkit-details-marker { display: none; }
.advanced__summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 14px; line-height: 1;
}
.advanced[open] .advanced__summary::before { content: "\2212"; }
.advanced__body { padding-top: 14px; }
.advanced__body .field:last-child { margin-bottom: 0; }

.result__allin { margin-top: 8px; font-size: 15px; }
.result__allin strong { color: var(--accent-strong); font-size: 17px; margin-left: 4px; }

/* Mortgage comparison — three side-by-side scenario columns. */
.cmp-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-col, .cmp-card {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 14px; background: var(--surface);
}
.cmp-col__field { margin-bottom: 10px; }
.cmp-col__field:last-child { margin-bottom: 0; }
.cmp-col__field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 4px;
}
.cmp-card { position: relative; }
.cmp-card--best { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.cmp-card__name { font-weight: 700; font-size: 16px; }
.cmp-card__meta { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 10px; }
.cmp-card__pay { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-card__pay-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.cmp-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 14px; border-top: 1px solid var(--border);
}
.cmp-row__k { color: var(--text-muted); }
.cmp-row__v { font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-badge {
  display: inline-block; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  padding: 3px 9px; border-radius: 999px;
}
.cmp-legend {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  margin-top: 10px; font-size: 13px;
}
.cmp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-legend svg { display: block; }

/* Step-by-step calculator mode — one field at a time, opt-in. */
.step-mode-toggle { margin-bottom: 18px; justify-content: center; }
.step-progress { margin-bottom: 18px; }
.step-progress__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.step-bar {
  margin-top: 6px; height: 6px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden;
}
.step-bar__fill { height: 100%; background: var(--accent); transition: width .2s ease; }
.step-nav { display: flex; gap: 10px; margin-top: 18px; }
.step-nav .btn { min-width: 116px; justify-content: center; }
/* Advanced disclosure rendered as a <button> (step-mode-capable pages). */
button.advanced__summary {
  width: 100%; text-align: left;
  background: none; border: 0; font-family: inherit;
}
.advanced__summary[aria-expanded="true"]::before { content: "\2212"; }

/* Option-card grids flow to fit any width — no fixed column counts. */
.option-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.option-card {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px;
  font: inherit; color: var(--text);
}
.option-card:hover { border-color: var(--accent); }
.option-card[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.option-card__title { font-weight: 600; font-size: 15px; }
.option-card__note  { font-size: 12.5px; color: var(--text-muted); }
.option-card svg { margin-top: 6px; }

.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 48px; height: 48px; flex: none;
  font-size: 24px; line-height: 1;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); border-radius: var(--radius-sm); cursor: pointer;
}
.stepper button:hover:not(:disabled) { border-color: var(--accent); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper input { text-align: center; max-width: 90px; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  font: inherit; font-size: 14px;
  padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); border-radius: 999px; cursor: pointer;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent); color: var(--on-accent);
}
/* Touch devices get larger tap targets for chips (platform guidelines ~44px);
   pointer/mouse devices keep the compact size. */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
  .unit-toggle .chip { min-height: 38px; }
}

.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-text { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.warn-text { font-size: 14px; color: var(--accent-strong); font-weight: 500; }

/* ---- Result display ---------------------------------------------- */
.result { margin-top: 8px; }
.result__layout + .result__layout {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
}
.result__dir-label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px;
}
.result__hero {
  font-size: 44px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.result__hero .x { color: var(--text-muted); font-size: .7em; padding: 0 .12em; }
.result__mm { font-size: 17px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.result__decimal { font-size: 14px; color: var(--text-muted); }

.verify {
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface-alt); border-radius: var(--radius-sm);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.verify .ok { color: var(--ok); font-weight: 700; }

/* ---- Stat grid (multi-output results) ---------------------------- */
.stat-grid {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
  background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px;
}
.stat__label {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.stat__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Code-check list --------------------------------------------- */
.checks { margin-top: 16px; }
.check {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--border);
}
.check:last-child { border-bottom: none; }
.check__icon { font-weight: 700; flex: none; line-height: 1.5; }
.check--ok   .check__icon { color: var(--ok); }
.check--warn .check__icon { color: var(--accent-strong); }

/* ---- SVG cut diagram --------------------------------------------- */
.diagram { margin-top: 16px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ---- Result action buttons --------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  min-height: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--accent); }
.btn--primary {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); min-height: 48px;
}
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* ---- Toast -------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; z-index: 80;
  box-shadow: var(--shadow);
}

/* ---- Tooltip ------------------------------------------------------ */
.tooltip { position: relative; display: inline-block; }
.tooltip-trigger {
  border: none; background: none; cursor: pointer; padding: 2px;
  color: var(--accent-strong); font-size: 15px; line-height: 1;
}
.tooltip-card {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  width: 250px; max-width: 78vw;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5;
  font-weight: 400; box-shadow: var(--shadow);
}

/* ---- Scenario & FAQ ---------------------------------------------- */
.scenario-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.scenario {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  text-decoration: none; color: var(--text);
}
.scenario:hover { border-color: var(--accent); }
.scenario__label { font-weight: 500; font-size: 14.5px; }
.scenario__value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 8px; padding: 0 14px;
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--accent-strong); font-size: 20px; }
.faq details[open] summary::after { content: '\2212'; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq details p { padding: 12px 0; margin: 0; }

dl.glossary dt { font-weight: 600; }
dl.glossary dd { margin: 4px 0 14px; color: var(--text-muted); }

/* ---- Related tools ----------------------------------------------- */
.related-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.related-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
}
.related-card:hover { border-color: var(--accent); }
.related-card__title { font-weight: 600; }
.soon {
  display: inline-block;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  background: var(--surface-alt); color: var(--text-muted);
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: .03em;
  vertical-align: middle;
}
.related-card__desc { font-size: 13.5px; color: var(--text-muted); margin: 2px 0 0; }

/* ---- Ad slots (reserve space to avoid layout shift) -------------- */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  margin: 28px 0; background: var(--surface-alt);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 12px;
}
.ad-slot-top, .ad-slot-mid, .ad-slot-bottom { min-height: 100px; }
/* Live AdSense banner — space reserved up front to avoid layout shift. */
.ad-leaderboard { min-height: 100px; margin: 0 0 18px; text-align: center; }
.ad-leaderboard ins { display: block; }

/* ---- Language switcher ------------------------------------------- */
.lang-switch { display: flex; gap: 2px; flex: none; }
.lang-switch a {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-muted); padding: 6px 8px; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: .03em;
}
.lang-switch a:hover { background: var(--surface-alt); color: var(--text); }
.lang-switch a[aria-current="true"] { color: var(--accent-strong); }

/* ---- Cookie consent banner (Law 25) ------------------------------ */
.hc-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--surface); border-top: 2px solid var(--accent);
  box-shadow: 0 -4px 24px rgba(0,0,0,.18);
}
.hc-consent__inner {
  width: 100%; max-width: 880px; margin: 0 auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
}
.hc-consent__intro h2 { font-size: 18px; margin: 0 0 6px; }
.hc-consent__intro p  { font-size: 14px; margin: 0 0 14px; }
.hc-consent__panel { margin: 4px 0 14px; }
.hc-consent__cat {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px;
}
.hc-consent__cat-head {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px;
}
.hc-consent__cat-head input { width: auto; height: auto; }
.hc-consent__cat-head .always {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ok);
  text-transform: uppercase; letter-spacing: .03em;
}
.hc-consent__cat p { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }
.hc-consent__actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hc-consent__btn {
  font: inherit; font-weight: 600; cursor: pointer; flex: 1 1 auto;
  min-height: 46px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--text);
}
.hc-consent__btn:hover { background: var(--accent-soft); }
/* Accept and Refuse get equal visual weight — Law 25 requires refusing
   to be as easy and prominent as accepting. */
.hc-consent__btn--solid {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.hc-consent__btn--solid:hover { background: var(--accent-strong); }
.hc-consent__btn--ghost {
  border-color: var(--border-strong); color: var(--text-muted); flex: 0 1 auto;
}
.hc-consent__btn--ghost:hover { background: var(--surface-alt); }
@media (min-width: 560px) {
  .hc-consent__btn { flex: 0 1 auto; }
}
@media print { .hc-consent { display: none !important; } }

/* ---- Homepage unit converter ------------------------------------- */
.uconv__title { font-size: 18px; margin-bottom: 14px; }
/* Sector switcher — a segmented control: a tray holding the 5 sectors,
   the active one a raised pill so it clearly reads as a control. */
.uconv__sectors {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-bottom: 16px; padding: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.uconv__tab {
  flex: 1 1 auto; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  background: transparent; border: none; color: var(--text-muted);
  padding: 9px 12px; border-radius: 7px;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.uconv__tab:hover { color: var(--text); }
.uconv__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,.13);
}
.uconv__system { display: flex; gap: 6px; margin-bottom: 14px; }
.uconv__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.uconv__input { display: flex; gap: 10px; margin-bottom: 16px; }
/* Selectors are specific enough to beat the base input[type=...] rule,
   so the value field and the unit dropdown are exactly the same height. */
.uconv__input .uconv__value {
  flex: 1; min-width: 0; max-width: none;
  height: 52px; font-size: 22px; font-weight: 600;
}
.uconv__input .uconv__from {
  flex: 0 0 auto; width: auto; min-width: 108px;
  height: 52px; font-size: 16px; font-weight: 600;
}
/* Results as a single vertical column — a clean conversion table. */
.uconv__list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.uconv__row {
  width: 100%; display: flex; align-items: baseline;
  justify-content: space-between; gap: 14px;
  padding: 11px 14px; cursor: pointer;
  font: inherit; color: var(--text); background: none;
  border: none; border-top: 1px solid var(--border);
}
.uconv__list li:first-child .uconv__row { border-top: none; }
.uconv__row:hover { background: var(--accent-soft); }
.uconv__runit { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.uconv__rnum  {
  font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* ---- Site footer -------------------------------------------------- */
.site-footer {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 28px 0; margin-top: 40px;
}
.site-footer__brand { font-weight: 600; margin: 0 0 8px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.site-footer__companion {
  font-size: 14px;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.site-footer__companion a {
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
}
.site-footer__companion a:hover { text-decoration: underline; }
.site-footer__nav a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
.site-footer__nav a:hover { color: var(--accent-strong); }
.linklike {
  font: inherit; font-size: 14px; cursor: pointer;
  background: none; border: none; padding: 0;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--accent-strong); }
.site-footer__legal { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ---- Sticky mobile mini-bar -------------------------------------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.sticky-bar__text { font-size: 14px; font-variant-numeric: tabular-nums; flex: 1; }
.sticky-bar__text strong { color: var(--accent-strong); }
.sticky-bar__close {
  border: none; background: none; cursor: pointer;
  font-size: 20px; color: var(--text-muted); width: 32px; height: 32px;
}

/* ---- Responsive -------------------------------------------------- */
/* Gutter grows with the viewport: 20px phones, 32px tablets, 50px desktop. */
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 900px) { :root { --gutter: 50px; } }

@media (min-width: 640px) {
  .result__hero { font-size: 56px; }
  input[type="number"], input[type="text"], select { height: 44px; }
}

/* Phones: the category nav drops to its own row below the logo so the
   longer French labels never overflow the header. */
@media (max-width: 620px) {
  .site-nav {
    order: 5; flex-basis: 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .lang-switch { margin-left: auto; }
}

/* ---- Ingredient density converter -------------------------------- */
.ing-textarea {
  width: 100%; min-height: 132px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.7;
  padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.ing-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.calc-breakdown dt { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.calc-breakdown dd .ing-sub  { color: var(--text-muted); font-weight: 500; }
.calc-breakdown dd .ing-note { color: var(--text-muted); font-weight: 500; white-space: normal; }

/* ---- Reference table (densities, brackets, etc.) ----------------- */
.ref-table-wrap { overflow-x: auto; }
.ref-table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.ref-table th, .ref-table td {
  padding: 8px 10px; text-align: right;
  border-bottom: 1px solid var(--border);
}
.ref-table th:first-child, .ref-table td:first-child { text-align: left; }
.ref-table thead th {
  color: var(--text-muted); font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--border-strong);
}
.ref-table tbody tr:hover { background: var(--accent-soft); }
.ref-table .ref-group td {
  font-weight: 700; color: var(--accent-strong);
  background: var(--surface-alt); text-align: left;
}
.ref-table tbody tr.is-sel { background: var(--accent-soft); }
.ref-table tbody tr.is-sel td { font-weight: 600; }
.rank-tag { color: var(--accent-strong); font-weight: 600; }

/* ---- Cocktail batch scaler --------------------------------------- */
.cocktail-head { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.ingredient-row .ing-abv { width: 72px; height: 44px; }
.ingredient-row select.ing-unit { height: 44px; padding: 0 8px; }
.inline-min { display: inline-flex; align-items: center; gap: 8px; }
.inline-min input[type="number"] { width: 110px; max-width: 110px; }
.unit-suffix { color: var(--text-muted); font-weight: 600; }

/* ---- RenoSheets cross-promotion callout -------------------------- */
.reno-moved {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.reno-moved h2 { margin-top: 0; }
.reno-moved p { margin: 8px 0; }
.reno-list-h { margin-top: 14px !important; }
.reno-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.reno-list li {
  display: inline-block;
}
.reno-list a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-decoration: none;
  color: var(--text);
}
.reno-list a:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Homepage external recommendation card (RenoSheets). */
.category-card--ext {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, transform .15s;
}
.category-card--ext:hover {
  border-color: var(--accent);
  transform: translateY(-5px);
}
.category-card--ext .ext-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-strong);
}

/* ---- Print: tool, diagram and math only -------------------------- */
@media print {
  .site-header, .breadcrumb, .site-footer, .ad-slot,
  .faq, .related, .sticky-bar, .actions, .theme-toggle,
  .tooltip-trigger, .scenarios { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #999; }
  main { padding: 0; }
  a { color: #000; text-decoration: none; }
  .verify { background: #f0f0f0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}