/* ==========================================================================
   UnitCalConv — Unit Converter & Calculator Hub
   Design system: daylight confetti. Warm cream paper, white cards, one
   violet-to-pink-to-amber gradient, and a different colour for every
   category so the two big grids read as a spectrum rather than a wall.
   Palette: paper #FFFBF4 · ink #241C33 · violet #7C3AED · pink #EC4899
            amber #F59E0B · teal #0D9488 · coral #EF4444
   ========================================================================== */

/* ---------- 0. Self-hosted variable fonts (Latin subset, SIL OFL) ----------
   One variable file per family replaces nine static Google Fonts requests and
   the three connections to fonts.googleapis.com / fonts.gstatic.com. Every
   weight between the stated range is available, so no weight is synthesised.
   font-display: swap paints text immediately; glyphs outside the Latin subset
   fall through to the system stack defined in :root. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/baloo2-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink is now the text and "device" colour: deep plum for the calculator
     shell, the footer and the labels that sit on bright fills. */
  --ink-950: #1b1130;
  --ink-900: #241740;
  --ink-800: #2f1f52;
  --ink-700: #3b2866;
  --ink-600: #4a3579;

  /* Legacy names kept so older markup and inline styles still resolve. */
  --purple-900: var(--ink-950);
  --purple-800: var(--ink-800);
  --purple: var(--ink-900);
  --purple-600: var(--ink-700);
  --purple-500: var(--ink-600);

  /* Text: deep plum on warm cream paper. */
  --paper: #241c33;
  --muted: rgba(36, 28, 51, 0.72);
  --faint: rgba(36, 28, 51, 0.68);

  /* Vivid fills. --accent / --accent-2 are the readable text pair. */
  --amber: #f59e0b;
  --amber-bright: #fbbf24;
  --amber-dim: #b45309;
  --coral: #ef4444;
  --coral-dark: #dc2626;
  --sage: #10b981;
  --sky: #3b82f6;
  --violet: #7c3aed;
  --pink: #ec4899;
  --teal: #0d9488;
  --accent: #6d28d9;
  --accent-2: #db2777;

  --line: rgba(36, 28, 51, 0.10);
  --line-strong: rgba(36, 28, 51, 0.20);
  --line-amber: rgba(124, 58, 237, 0.32);

  --surface: #ffffff;
  --surface-2: #fbf6ff;
  --surface-3: rgba(124, 58, 237, 0.12);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --grad: linear-gradient(135deg, var(--violet) 0%, var(--pink) 56%, var(--amber) 100%);
  --grad-rev: linear-gradient(135deg, var(--amber) 0%, var(--pink) 44%, var(--violet) 100%);
  --grad-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(236, 72, 153, 0.08) 58%, rgba(245, 158, 11, 0.10));
  --shadow: 0 22px 50px -34px rgba(58, 30, 90, 0.42);
  --shadow-soft: 0 12px 30px -22px rgba(58, 30, 90, 0.32);
  --ring: 0 0 0 3px rgba(124, 58, 237, 0.18);

  --maxw: 1180px;
  --header-h: 70px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Fluid type scale — slightly smaller and tighter than the arcade version. */
  --step--1: clamp(0.76rem, 0.74rem + 0.08vw, 0.82rem);
  --step-0: clamp(0.94rem, 0.92rem + 0.10vw, 1rem);
  --step-1: clamp(1.02rem, 0.98rem + 0.20vw, 1.12rem);
  --step-2: clamp(1.24rem, 1.16rem + 0.38vw, 1.45rem);
  --step-3: clamp(1.5rem, 1.35rem + 0.7vw, 1.95rem);
  --step-4: clamp(1.85rem, 1.58rem + 1.15vw, 2.55rem);
  --step-5: clamp(2.35rem, 1.85rem + 2.1vw, 3.35rem);
  --measure: 68ch;

  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Category accents. The default keeps uncategorised content violet. */
  --cat: #7c3aed;
  --cat-strong: #6d28d9;
  --cat-soft: rgba(124, 58, 237, 0.12);
  --cat-line: rgba(124, 58, 237, 0.38);
}

/* ---------- 1b. Category palette ---------- */
[data-category="money"] {
  --cat: #059669;
  --cat-strong: #047857;
  --cat-soft: rgba(5, 150, 105, 0.13);
  --cat-line: rgba(5, 150, 105, 0.40);
}
[data-category="health"] {
  --cat: #e11d48;
  --cat-strong: #be123c;
  --cat-soft: rgba(225, 29, 72, 0.12);
  --cat-line: rgba(225, 29, 72, 0.38);
}
[data-category="science"] {
  --cat: #2563eb;
  --cat-strong: #1d4ed8;
  --cat-soft: rgba(37, 99, 235, 0.11);
  --cat-line: rgba(37, 99, 235, 0.36);
}
[data-category="build"] {
  --cat: #ea580c;
  --cat-strong: #c2410c;
  --cat-soft: rgba(234, 88, 12, 0.12);
  --cat-line: rgba(234, 88, 12, 0.38);
}
[data-category="kitchen"] {
  --cat: #65a30d;
  --cat-strong: #4d7c0f;
  --cat-soft: rgba(101, 163, 13, 0.14);
  --cat-line: rgba(101, 163, 13, 0.40);
}
[data-category="style"] {
  --cat: #db2777;
  --cat-strong: #be185d;
  --cat-soft: rgba(219, 39, 119, 0.12);
  --cat-line: rgba(219, 39, 119, 0.36);
}
[data-category="tech"] {
  --cat: #0891b2;
  --cat-strong: #0e7490;
  --cat-soft: rgba(8, 145, 178, 0.12);
  --cat-line: rgba(8, 145, 178, 0.36);
}
[data-category="time"] {
  --cat: #7c3aed;
  --cat-strong: #6d28d9;
  --cat-soft: rgba(124, 58, 237, 0.12);
  --cat-line: rgba(124, 58, 237, 0.36);
}
[data-category="study"] {
  --cat: #4f46e5;
  --cat-strong: #4338ca;
  --cat-soft: rgba(79, 70, 229, 0.12);
  --cat-line: rgba(79, 70, 229, 0.36);
}
[data-category="hobby"] {
  --cat: #c026d3;
  --cat-strong: #a21caf;
  --cat-soft: rgba(192, 38, 211, 0.12);
  --cat-line: rgba(192, 38, 211, 0.36);
}

/* ---------- 2. Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 58, 237, 0.36) transparent;
  color-scheme: light;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(36, 28, 51, 0.05); }
::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.30);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.55); background-clip: content-box; }

body {
  font-family: var(--font-body);
  background: #fffbf4;
  color: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep bold text at a real weight instead of letting the browser synthesise
   900 from an already-bold parent (the variable font covers 100–900). */
strong, b { font-weight: 700; }

/* One fixed backdrop, painted once: warm cream with four pastel washes so
   every section sits on a slightly different colour without any extra markup. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(760px 520px at 6% -8%, rgba(236, 72, 153, 0.13), transparent 62%),
    radial-gradient(720px 520px at 96% 0%, rgba(124, 58, 237, 0.13), transparent 64%),
    radial-gradient(680px 480px at 88% 58%, rgba(13, 148, 136, 0.10), transparent 66%),
    radial-gradient(640px 460px at 12% 82%, rgba(245, 158, 11, 0.12), transparent 64%),
    linear-gradient(180deg, #fffaf2 0%, #fffbf6 46%, #fdf7ff 100%);
}

.blob {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.20;
  pointer-events: none;
}
.blob--1 { width: 360px; height: 360px; top: -140px; left: -120px; background: var(--coral); }
.blob--2 { width: 320px; height: 320px; top: 24%; right: -140px; background: var(--amber); }
.blob--3 { width: 280px; height: 280px; bottom: -140px; left: 30%; background: var(--sage); }

/* Slow ambient drift, home page only. Transform-only, so the blurred blobs
   stay on the compositor instead of repainting the page. */
.home .blob--1 { animation: blob-drift-a 26s ease-in-out infinite alternate; }
.home .blob--2 { animation: blob-drift-b 32s ease-in-out infinite alternate; }
.home .blob--3 { animation: blob-drift-c 29s ease-in-out infinite alternate; }
@keyframes blob-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(46px, 34px, 0) scale(1.08); }
}
@keyframes blob-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to { transform: translate3d(-52px, 24px, 0) scale(0.96); }
}
@keyframes blob-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.97); }
  to { transform: translate3d(30px, -40px, 0) scale(1.07); }
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { accent-color: var(--accent); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
/* Inline links inside running text are underlined so they stay
   distinguishable without relying on colour alone (WCAG 1.4.1). */
main p a:not(.btn),
main li a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(109, 40, 217, 0.40);
}
main p a:not(.btn):hover,
main li a:not(.btn):hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.16;
  letter-spacing: -0.018em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }

p { text-wrap: pretty; }

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

::selection { background: var(--accent); color: #fff; }

/* anchored links shouldn't hide under the sticky header */
:target { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- 3. Layout helpers ---------- */
.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }

.section { padding: clamp(2.8rem, 5.6vw, 4.4rem) 0; }
.section--tight { padding-top: clamp(0.8rem, 2.5vw, 1.4rem); }

/* Left-aligned editorial header with the description sitting in the second
   column. Still degrades to one column on tablets. */
.section-head {
  text-align: left;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 0.35rem 2.6rem;
  align-items: start;
  position: relative;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
}
/* A three-colour rule under every section title instead of a flat hairline. */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--pink) 34%, var(--amber) 62%, transparent 100%);
  opacity: 0.85;
}
.section-head .eyebrow { grid-column: 1 / -1; justify-self: start; margin-bottom: 0.15rem; }
.section-head h2 {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  margin: 0;
}
.section-head > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
  max-width: 48ch;
  justify-self: end;
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0.85rem;
  box-shadow: none;
}

.gradient-text {
  background: linear-gradient(100deg, var(--violet) 0%, var(--pink) 46%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* A slow sheen across the hero headline. Only the home page uses this class. */
.hero .gradient-text {
  background-size: 220% 100%;
  animation: text-sheen 14s ease-in-out infinite alternate;
}
@keyframes text-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 4. Header / Navbar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 244, 0.86);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
}

.nav {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--paper);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--paper); }
.brand__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--grad);
  background-color: var(--amber);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand__mark svg { width: 20px; height: 20px; }
.brand__name span { color: var(--accent); }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-link {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--paper);
  background: var(--surface);
}
.nav-link.is-active {
  color: var(--paper);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  place-items: center;
  align-content: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--paper);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.68rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: pointer;
}
.btn-primary {
  /* Solid colour under the gradient: keeps the label readable when background
     images are unavailable (forced-colors mode, very old engines) and gives
     contrast checkers a real colour to measure. */
  background-color: var(--accent);
  background-image: var(--grad);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(124, 58, 237, 0.75);
}
.btn-primary:hover {
  background-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 16px 32px -16px rgba(219, 39, 119, 0.55);
  filter: saturate(112%) brightness(1.04);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--paper);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--paper); }
/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(2rem, 4vw, 3rem);
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -35%;
  height: 140%;
  background: radial-gradient(ellipse 58% 50% at 44% 40%, rgba(124, 58, 237, 0.13), rgba(236, 72, 153, 0.07) 52%, transparent 74%);
  z-index: -1;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--step-5);
  margin-bottom: 1.1rem;
}
.hero p.lead {
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.6rem; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem; margin-bottom: 1.4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}
.chip::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
  flex: 0 0 4px;
}
.hero__badges .chip:nth-child(2)::before { background: var(--pink); }
.hero__badges .chip:nth-child(3)::before { background: var(--teal); }
.hero__badges .chip:nth-child(4)::before { background: var(--amber); }
.chip strong { color: var(--paper); font-weight: 700; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  width: fit-content;
  margin: 0;
  padding: 0.85rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  overflow: visible;
}
.hero__stats li {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0 1.25rem;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}
.hero__stats li:first-child { padding-left: 0; }
.hero__stats li:last-child { border-right: 0; }
.hero__stats b { color: var(--accent); font-family: var(--font-display); font-size: 1.02rem; line-height: 1; }

.animate-in { animation: rise 0.55s var(--ease) both; }
.animate-in--2 { animation-delay: 0.07s; }
.animate-in--3 { animation-delay: 0.14s; }
.animate-in--4 { animation-delay: 0.21s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Home-page scroll reveals. main.js adds [data-reveal] only when the visitor
   allows motion, so the content is fully visible without JavaScript. The
   converter tag grid and calculator card grid are deliberately excluded and
   stay completely static. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
/* The dense grids travel less, so 128 small items do not look busy. */
[data-reveal].tag { transform: translate3d(0, 10px, 0); transition-duration: 0.45s; }
[data-reveal].card-tile { transform: translate3d(0, 12px, 0); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* The three-colour rule under a revealed section head draws itself in. */
[data-reveal].section-head::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--ease) 0.15s;
}
[data-reveal].section-head.is-revealed::after { transform: scaleX(1); }

/* ---------- 7. Calculator widget (hero + page) ---------- */
.calc {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  /* Local token overrides: the calculator stays a dark "device" on the light
     page, so its children keep cream text and light hairlines. */
  --paper: #f8f4ff;
  --muted: rgba(248, 244, 255, 0.72);
  --faint: rgba(248, 244, 255, 0.55);
  --line: rgba(248, 244, 255, 0.12);
  --line-strong: rgba(248, 244, 255, 0.22);
  --line-amber: rgba(196, 181, 253, 0.45);
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, #2c1b4f 0%, #1b1130 72%);
  border: 1px solid rgba(124, 58, 237, 0.38);
  border-radius: var(--r-lg);
  padding: clamp(0.85rem, 2vw, 1.15rem);
  box-shadow: 0 30px 70px -42px rgba(58, 22, 100, 0.65), 0 0 0 6px rgba(124, 58, 237, 0.06);
}

/* Motion is limited to the hero: the calculator rises with the hero copy. */
.hero .calc { animation: rise 0.7s var(--ease) both 0.1s; }
.calc__tabs {
  display: flex;
  gap: 0.2rem;
  background: rgba(0, 0, 0, 0.26);
  border-radius: var(--r-sm);
  padding: 0.22rem;
  margin-bottom: 0.8rem;
}
.calc__tab {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}
.calc__tab:hover { color: var(--paper); }
.calc__tab[aria-selected="true"] {
  background-color: var(--accent);
  background-image: var(--grad);
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(124, 58, 237, 0.9);
}

.calc__screen {
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.65rem 0.85rem 0.75rem;
  margin-bottom: 0.8rem;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.calc__history {
  min-height: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  text-align: right;
  word-break: break-all;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.calc__history::-webkit-scrollbar { display: none; }
.calc__output {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 4vw, 1.95rem);
  font-weight: 600;
  text-align: right;
  color: var(--paper);
  word-break: break-all;
  min-height: 2.3rem;
  line-height: 1.2;
}
.calc__output.is-error { color: var(--coral); font-size: 1rem; }

.keys { display: grid; gap: 0.38rem; }
.keys--basic { grid-template-columns: repeat(4, 1fr); }
.keys--sci { grid-template-columns: repeat(5, 1fr); }
.keys--sci .key--fn { font-size: 0.72rem; }

.key {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--ink-700);
  color: var(--paper);
  min-height: 45px;
  padding: 0.55rem 0.15rem;
  font-size: 0.96rem;
  font-weight: 500;
  font-family: var(--font-mono);
  cursor: pointer;
  user-select: none;
}
.key:hover { background: var(--ink-600); color: #fff; border-color: var(--line-strong); }
.key--op { color: var(--amber); background: rgba(243, 198, 119, 0.08); border-color: rgba(243, 198, 119, 0.16); }
.key--fn { color: var(--sage); background: rgba(147, 216, 191, 0.06); border-color: rgba(147, 216, 191, 0.14); font-size: 0.82rem; }
.key--warn { color: var(--coral); background: rgba(239, 129, 116, 0.08); border-color: rgba(239, 129, 116, 0.18); }
.key--eq {
  background-color: var(--accent);
  background-image: var(--grad);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 8px 18px -12px rgba(124, 58, 237, 0.9);
}
.key--eq:hover { background-color: var(--accent-2); color: #fff; filter: brightness(1.06); }
.calc__mode { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.calc__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.65rem; }
.calc__foot-right { display: flex; align-items: center; gap: 0.45rem; }
.calc__mode-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 0.26rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.calc__mode-btn:hover { border-color: var(--line-amber); color: var(--amber); }
.calc__mode-btn.is-on { background: var(--accent); color: #fff; border-color: transparent; }

[hidden] { display: none !important; }

/* ---------- 8. Tag grids (converters + calculators) ---------- */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 58px;
  padding: 0.62rem 0.8rem;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper);
  font-weight: 500;
  font-size: 0.89rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(36, 28, 51, 0.04);
}
.tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
}
.tag::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--amber);
  border-top: 1.5px solid var(--amber);
  border-radius: 1px;
  transform: translate(-5px, -50%) rotate(45deg);
  opacity: 0;
}
.tag:hover,
.tag:focus-visible {
  color: var(--paper);
  border-color: var(--line-amber);
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}
.tag:hover::before,
.tag:focus-visible::before { opacity: 0.55; }
.tag:hover::after,
.tag:focus-visible::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.tag > * { position: relative; z-index: 1; }
.tag__ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1;
}
.tag:hover .tag__ico { background: var(--surface-3); }
.tag__label {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 1rem;
  /* Operation labels are longer than the old topic names. Wrapping keeps every
     word readable when the grid drops to three columns; at full width the
     labels still sit on one line. */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.card-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.15rem 1.05rem 1.2rem;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper);
  min-height: 100%;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(36, 28, 51, 0.04);
}
.card-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
}
.card-tile:hover,
.card-tile:focus-visible {
  color: var(--paper);
  border-color: var(--line-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-soft);
}
.card-tile:hover::before,
.card-tile:focus-visible::before { transform: scaleX(1); }
.card-tile__ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 1.05rem;
}
.card-tile:hover .card-tile__ico { background: var(--surface-3); }
.card-tile__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3; padding-right: 0.5rem; }
.card-tile__meta { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

/* Category accents: tint the icon tile and accent line while keeping the
   dark surfaces and amber controls unchanged. */
.tag[data-category] { box-shadow: inset 4px 0 0 var(--cat), 0 1px 2px rgba(36, 28, 51, 0.04); }
.tag[data-category]::before { background: var(--cat-soft); }
.tag[data-category]::after { border-color: var(--cat); }
.tag[data-category]:hover,
.tag[data-category]:focus-visible { border-color: var(--cat-line); }
.tag[data-category] .tag__ico {
  background: var(--cat-soft);
  border-color: var(--cat-line);
}
.tag[data-category]:hover .tag__ico,
.tag[data-category]:focus-visible .tag__ico {
  background: var(--cat-soft);
  border-color: var(--cat);
}

.card-tile[data-category]::before {
  background: var(--cat);
  height: 3px;
  transform: scaleX(1);
  opacity: 0.8;
}
.card-tile[data-category]:hover::before,
.card-tile[data-category]:focus-visible::before { opacity: 1; }
.card-tile[data-category]:hover,
.card-tile[data-category]:focus-visible { border-color: var(--cat-line); }
.card-tile[data-category] .card-tile__ico {
  background: var(--cat-soft);
  border-color: var(--cat-line);
}
.card-tile[data-category]:hover .card-tile__ico,
.card-tile[data-category]:focus-visible .card-tile__ico {
  background: var(--cat-soft);
  border-color: var(--cat);
}

/* The page eyebrow doubles as the category badge on tool and guide pages. */
body[data-category] .page-intro .eyebrow {
  color: var(--cat-strong);
  background: var(--cat-soft);
  border: 1px solid var(--cat-line);
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-pill);
}
body[data-category] .breadcrumb a:hover { color: var(--cat-strong); }
body[data-category] .related a:hover {
  border-color: var(--cat-line);
  color: var(--cat-strong);
}

/* ---------- 9. FAQ ---------- */
.faq {
  max-width: auto;
  margin-inline: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq__item {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.faq__item.is-open { background: transparent; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1rem 0.15rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
  cursor: pointer;
}
.faq__q:hover { color: var(--accent); }
.faq__plus {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}
.faq__q:hover .faq__plus { border-color: var(--line-amber); background: rgba(124, 58, 237, 0.08); }
.faq__item.is-open .faq__plus { transform: rotate(135deg); background-color: var(--accent); background-image: var(--grad); border-color: transparent; color: #fff; }
.faq__a {
  max-height: 0;
  overflow: hidden;
}
.faq__a-inner { padding: 0 2.4rem 1.05rem 0.15rem; color: var(--muted); font-size: 0.93rem; line-height: 1.7; }
.faq__a-inner a { text-decoration: underline; }

/* ---------- 10. Footer ---------- */
.site-footer {
  position: relative;
  margin-top: clamp(2.6rem, 5.5vw, 4.2rem);
  border-top: 0;
  background: linear-gradient(135deg, #1b1130 0%, #2a1a4a 52%, #3a1c55 100%);
  padding: 1.5rem 0;
  /* Cream-on-plum scope: every footer child keeps its original contrast. */
  --paper: #faf6ff;
  --muted: rgba(250, 246, 255, 0.74);
  --faint: rgba(250, 246, 255, 0.60);
  --line: rgba(250, 246, 255, 0.14);
  --line-strong: rgba(250, 246, 255, 0.24);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad);
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.4rem;
  flex-wrap: wrap;
}
.footer-row p { color: var(--faint); font-size: 0.8rem; }
.footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}
.footer-links a:hover { color: var(--paper); }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--paper);
  font-size: 0.98rem;
}
.footer-brand i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
}

/* legal / trust row under the footer */
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-top: 1rem;
  padding: 0.8rem 0.2rem 0.1rem;
  border-top: 1px solid var(--line);
}
.footer-legal a,
.footer-legal button {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  background: none;
  border: 0;
  padding: 0.2rem 0.1rem;
  color: var(--faint);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}
.footer-legal a:hover,
.footer-legal button:hover { color: var(--paper); }
.footer-legal a:focus-visible,
.footer-legal button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.footer-legal .dot { color: rgba(247, 242, 233, 0.22); }

/* inline button that reads like a link (used for "Cookie settings" in prose) */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--accent-2); }
.linkish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 11d. Consent banner ---------- */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 90;
  width: min(720px, calc(100% - 1.5rem));
  /* Centring with auto margins keeps the banner inside the viewport at every
     width. */
  margin-inline: auto;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: rgba(255, 253, 249, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -26px rgba(58, 30, 90, 0.45), 0 0 0 1px rgba(124, 58, 237, 0.10);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.7rem;
}
.consent p { margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--muted); }
.consent a { color: var(--accent); text-decoration: underline; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent__actions .btn { min-height: 40px; padding: 0.5rem 0.95rem; font-size: 0.83rem; }
.consent__status { font-weight: 600; color: var(--accent); }

/* ---------- 11. Inner pages ---------- */
.page { padding: clamp(1.5rem, 3.6vw, 2.5rem) 0 0.5rem; }
.page-intro { max-width: 820px; margin-bottom: 0.35rem; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--faint);
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--paper); }
.page h1 { font-size: var(--step-4); letter-spacing: -0.028em; margin-bottom: 0.45rem; }
.page .lead { color: var(--muted); font-size: var(--step-0); max-width: auto; }

/* Long-form guides read as an article column rather than a full-width tool
   page. Centring the intro and prose keeps the measure at ~70 characters and
   stops tables from stretching across 1,180 px. */
.page--article .breadcrumb,
.page--article .page-intro,
.page--article .info-block {
  max-width: 100%;
  margin-inline: auto;
}
.page--article .page-intro { margin-bottom: 0.35rem; }

.panel {
  background: var(--surface);
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.6vw, 1.6rem);
  box-shadow: var(--shadow);
}
.layout-2 {
  display: grid;
  grid-template-columns: 1.17fr 0.83fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.field { display: grid; gap: 0.35rem; margin-bottom: 0.95rem; }
.field label,
.field .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.68rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: #fffdf9;
  color: var(--paper);
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.field select option { background: #fffdf9; color: var(--paper); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: #fff;
}
/* Chrome and Firefox still paint stepper arrows on number inputs even when the
   field itself has appearance:none. Hide them so the field matches the design
   and the decimal keypad remains the only way to adjust a value on touch. */
.field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field .hint { font-size: 0.74rem; color: var(--faint); text-transform: none; letter-spacing: 0; line-height: 1.5; }
.field .hint.is-error { color: var(--coral-dark); font-weight: 600; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--coral);
  background: #fff7f7;
}

/* Submission feedback for the contact form. The element is focusable so a
   keyboard or screen-reader user lands on the message after submitting. */
.form-status {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--paper);
}
.form-status:focus { outline: none; box-shadow: var(--ring); }
.form-status--ok {
  border-left-color: var(--sage);
  background: rgba(16, 185, 129, 0.09);
}
.form-status--error {
  border-left-color: var(--coral);
  background: rgba(239, 68, 68, 0.08);
}
.btn:disabled { opacity: 0.65; cursor: progress; }

/* A textarea dropped inside a result box inherits the bold mono result style,
   which is too heavy to read a long string in. */
.result-value textarea { font-weight: 500; font-size: 0.92rem; line-height: 1.55; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.9rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.swap-btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--accent);
  border-radius: var(--r-sm);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
}
.swap-btn:hover { background: var(--surface-2); border-color: var(--line-amber); color: var(--accent-2); }

.swap-row { display: flex; justify-content: center; margin: -0.2rem 0 0.75rem; }

.result-box {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  border-radius: var(--r);
  border: 1px solid rgba(124, 58, 237, 0.24);
  background: linear-gradient(155deg, rgba(124, 58, 237, 0.07), rgba(236, 72, 153, 0.05) 52%, rgba(245, 158, 11, 0.07)), #fff;
  padding: 1.15rem 1.15rem 1.05rem;
  box-shadow: var(--shadow-soft);
}
.result-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
}
.result-box .result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Was --faint (4.35:1 on this surface); this is 5.9:1. */
  color: var(--muted);
  font-weight: 700;
}
.result-value {
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  font-weight: 600;
  color: var(--accent);
  word-break: break-word;
  line-height: 1.35;
}
.result-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.result-note { color: var(--faint); font-size: 0.77rem; margin-top: 0.5rem; line-height: 1.55; }
.is-error { color: var(--coral) !important; }
.result-value.is-loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--muted);
}
.result-value.is-loading .loader { margin-right: 0; flex: 0 0 auto; }

/* copy-to-clipboard affordance on any result box */
.copy-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.copy-btn:hover { color: var(--paper); background: var(--surface-2); border-color: var(--line-amber); }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-btn.is-done { color: var(--accent); border-color: var(--line-amber); background: rgba(124, 58, 237, 0.10); }
/* inline variant, used in the calculator footer instead of floating over a result box */
.copy-btn--inline { position: static; top: auto; right: auto; z-index: auto; }
.result-box .result-label { padding-right: 4.8rem; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}
.stat {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 0.8rem 0.9rem;
}
.stat:hover { border-color: var(--line-strong); background: var(--surface-2); }
.stat__k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.stat__v { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; color: var(--paper); word-break: break-word; margin-top: 0.15rem; }
.stat__v small { display: block; font-size: 0.73rem; color: var(--muted); font-weight: 400; margin-top: 0.2rem; }

.rows { display: grid; gap: 0.6rem; }
.row-item {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.row-item .field { margin-bottom: 0; }
.row-item .remove {
  width: 40px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(239, 129, 116, 0.28);
  background: rgba(239, 129, 116, 0.08);
  color: var(--coral);
  cursor: pointer;
  font-size: 1rem;
}
.row-item .remove:hover { background: var(--coral); color: #fff; }

/* ---------- 11a. Data tables ---------- */
.table-wrap { overflow-x: auto; }
/* Several converters ship an empty .table-wrap that the script fills in after
   the first conversion. Styling only populated wrappers prevents an empty
   bordered box from flashing before the table exists. */
.table-wrap:has(> table) {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  margin: 0;
}
table.data caption:not(.sr-only) {
  caption-side: top;
  text-align: left;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.75rem 0.85rem 0.15rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: 0.62rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
table.data tbody tr:last-child th,
table.data tbody tr:last-child td { border-bottom: 0; }
table.data thead th {
  color: var(--accent);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(124, 58, 237, 0.06);
  border-bottom-color: rgba(124, 58, 237, 0.24);
  font-weight: 700;
}
/* Row headers are labels, not column headings: sentence case and paper ink. */
table.data tbody th {
  color: var(--paper);
  font-size: 0.87rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  background: transparent;
  border-bottom-color: var(--line);
}
table.data tbody tr:nth-child(even) td { background: rgba(124, 58, 237, 0.03); }
table.data tbody tr:hover td { background: rgba(124, 58, 237, 0.06); }

/* ---------- 11c. Matrix calculator ---------- */
.matrix-block { margin-bottom: 1rem; }
.matrix-label {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.matrix { display: grid; gap: 0.4rem; }
.matrix__cell {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0.5rem 0.4rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: #fffdf9;
  color: var(--paper);
  appearance: textfield;
  -moz-appearance: textfield;
}
.matrix__cell::-webkit-outer-spin-button,
.matrix__cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.matrix__cell:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: #fff;
}

/* matrix results read better centred */
.matrix-out td,
.matrix-out th { text-align: center; }
.matrix-out td { font-family: var(--font-mono); }
.matrix-out tbody th {
  background: transparent;
  color: var(--faint);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- 11b. Empty state ---------- */
.ghost-card {
  margin-top: 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  padding: 1.5rem 1.2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.65;
}
/* The empty result state sits opposite a form, so give it enough height to
   balance the panel and render it as a real surface rather than a dashed box. */
.layout-2 aside .ghost-card {
  margin-top: 0;
  min-height: 190px;
  display: grid;
  place-content: center;
  border-style: solid;
  background: var(--surface);
}
.ghost-card__ico { display: block; font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.8; }
.ghost-card strong { color: var(--paper); }

/* ---------- 11e. Prose blocks ---------- */
.info-block { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.info-block h2 {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.info-block h2:first-child { padding-top: 0; border-top: 0; }
.info-block h3 { font-size: var(--step-1); margin: 1.6rem 0 0.45rem; color: var(--accent); letter-spacing: -0.01em; }
.info-block p, .info-block li { color: var(--muted); font-size: 0.94rem; line-height: 1.75; }
.info-block p { max-width: auto; }
.info-block ul, .info-block ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.info-block li::marker { color: var(--accent); }
.card-note {
  border-left: 2px solid var(--coral);
  background: rgba(239, 129, 116, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}

.related { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }
.related a {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--paper);
}
.related a:hover { background: var(--surface-2); border-color: var(--line-amber); color: var(--accent); }

.loader {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 0.4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

.keys__basic-wrap { grid-column: 1 / -1; margin-top: 0.5rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 13. Tool-page meta line, guide cards ----------
   .tool-meta sits under the page intro on every converter and calculator and
   carries the ownership, freshness and error-reporting signals that a human
   reviewer looks for. Deliberately quiet: it should reassure, not shout. */
.tool-meta {
  margin: 0.9rem 0 1.4rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--faint);
}
.tool-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.tool-meta a:hover { color: var(--accent); }
.tool-meta time { white-space: nowrap; }

/* Guide hub and article teasers reuse .card-tile; these rules only add the
   extra line a longer-form entry needs (reading time, topic label). */
.card-tile__meta + .card-tile__meta { margin-top: -0.1rem; }
.guide-sources { font-size: 0.8rem; color: var(--muted); }
.guide-sources li { margin: 0.25rem 0; }
/* ---------- 14. Long-form prose rhythm ----------
   The global reset removes paragraph margins, which is right for UI copy but
   wrong inside a long article: consecutive paragraphs run together. These
   rules only affect .info-block, the container used for prose. */
.info-block p + p,
.info-block p + ul,
.info-block p + ol,
.info-block p + .table-wrap,
.info-block p + .card-note,
.info-block ul + p,
.info-block ol + p,
.info-block .table-wrap + p,
.info-block .card-note + p { margin-top: 0.85rem; }

/* Three-up card grid for guides, instead of the four-up tool grids. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.8rem;
  margin-top: 1.1rem;
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1080px) {
  .tag-grid, .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { text-align: left; }
  .hero p.lead { margin-inline: 0; }
  .hero__cta, .hero__stats { justify-content: flex-start; }
  .hero__stats { margin-inline: 0; }
  .hero::before { top: -20%; }
  .layout-2 { grid-template-columns: 1fr; }
  .calc { margin: 0.4rem auto 0; max-width: 460px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.7rem 1.2rem 1rem;
    background: rgba(255, 251, 244, 0.98);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-strong);
    transform-origin: top;
    transform: scaleY(0.7);
    opacity: 0;
    visibility: hidden;
  }
  .nav-list.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { display: flex; align-items: center; min-height: 44px; padding: 0.7rem 0.9rem; font-size: 0.98rem; }
  .nav-link.is-active { background: var(--surface); }
  .nav-link.is-active::after { display: none; }
  /* Tablet grids are three-up; one long label still needs to wrap rather than
     truncate. The rule is repeated at 560 px where the grid is two-up. */
  .tag__label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-item { grid-template-columns: 1fr 1fr; }
  .row-item .remove { width: 100%; }
}

@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 0.4rem; align-items: start; }
  .section-head p { justify-self: start; max-width: 56ch; }
  .hero__stats li { padding: 0 1rem; }
  /* Three columns leave too little room for an operation label, so the tag
     grids step down to two columns a little earlier than the card grids. */
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .container { width: min(100% - 1.6rem, var(--maxw)); }
  .tag-grid, .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .tag { min-height: 54px; padding: 0.55rem 0.65rem; gap: 0.5rem; font-size: 0.84rem; }
  .tag::after { display: none; }
  .tag__ico { flex-basis: 26px; width: 26px; height: 26px; font-size: 0.8rem; border-radius: 6px; }
  /* Two columns are only ~110 px wide for the label here. Wrapping is better
     than truncating "Water Hardness" to "Water & ...". */
  .tag__label {
    padding-right: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
  .calc-grid { grid-template-columns: 1fr; }
  .card-tile { padding: 1rem 0.95rem 1.05rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-row { justify-content: center; text-align: center; }
  .footer-links { justify-content: center; }
  .keys { gap: 0.32rem; }
  .key { min-height: 44px; padding: 0.55rem 0.1rem; font-size: 0.9rem; border-radius: 8px; }
  .keys--sci .key--fn { font-size: 0.64rem; }
  .actions .btn { flex: 1 1 auto; }
  /* Stacked hero buttons should share the full column width instead of
     leaving a ragged, unequal gap on narrow phones. */
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__stats li { padding: 0 0.85rem; font-size: 0.76rem; }
  .hero__stats b { font-size: 0.94rem; }
  .page h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .faq__q { font-size: 0.96rem; padding: 0.9rem 0.1rem; }
  .faq__a-inner { padding-right: 0.8rem; }
}

@media (max-width: 380px) {
  .tag-grid { grid-template-columns: 1fr; }
  .hero__stats { width: 100%; }
  .hero__stats li { flex: 1 1 33%; padding: 0 0.5rem; }
  .hero__stats li:first-child { padding-left: 0; }
}

/* Gradient controls keep the dark-on-amber pairing in Windows High Contrast.
   A system-coloured fill would leave the authored dark label unreadable, so
   these controls opt out of forced colours — their contrast is 9.9:1. */
@media (forced-colors: active) {
  .btn-primary,
  .calc__tab[aria-selected="true"],
  .calc__mode-btn.is-on,
  .key--eq,
  .faq__item.is-open .faq__plus {
    forced-color-adjust: none;
    background: var(--amber);
    color: var(--ink-950);
    border-color: var(--amber);
  }

  /* The hamburger bars are painted with a background colour, so Windows High
     Contrast would force them to the same Canvas colour as the button and make
     the menu control look empty. Keep them in the system ButtonText colour. */
  .nav-toggle span {
    forced-color-adjust: none;
    background: ButtonText;
  }
}

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

@media print {
  /* Anything waiting to be scrolled into view must still print. */
  [data-reveal], [data-reveal].section-head::after {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-header, .site-footer, .blob, .hero__cta, .hero__badges, .hero__stats, .related,
  .ghost-card, .nav-toggle, .skip-link, .copy-btn, .consent { display: none !important; }
  body::before { background: #fff; }
  body { color: #111; background: #fff; }
  /* The calculator keeps cream text on its own dark scope, so restate the
     tokens for paper rather than leaving it unreadable. */
  .calc { --paper: #111; --muted: #333; --faint: #555; --line: #ddd; --line-strong: #ccc; }
  .panel, .calc, .result-box, .card-tile, .stat, .faq__item, .table-wrap {
    background: #fff !important;
    border-color: #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .result-value, .stat__v, .section-head h2, .info-block h2, .info-block h3, .page h1 { color: #111 !important; }
  .info-block p, .info-block li, .lead, .page .lead { color: #222 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}

/* ---------- card grids ---------- */
.tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid .card-tile__meta {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* ---------- printables ---------- */
.print-btn { margin: 1rem 0; }
.print-note {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent, #f59e0b);
  background: var(--surface);
  border-radius: 0.5rem;
  font-size: 0.92rem;
}

/* ---------- embeds ---------- */
.code-block {
  background: #1f1b16;
  color: #fdf7ee;
  padding: 1rem 1.1rem;
  border-radius: 0.6rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.55;
}
.code-block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- calculator cards (home #calculators) ----------
   Row-style cards: category-tinted icon, title over a one-line hint, and a
   chevron that nudges on hover. The category accent moves from the top edge
   to the left edge so the shape reads as a list, not a gallery. */
.calc-grid--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }

.calc-grid--sm .card-tile {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 10px;
  align-items: center;
  column-gap: 0.55rem;
  min-height: 58px;
  height: 58px;
  padding: 0.62rem 0.8rem;
  border-radius: var(--r);
  font-size: 0.89rem;
  overflow: visible;
}

/* left accent bar instead of the top rule */
.calc-grid--sm .card-tile[data-category]::before {
  inset: 0 auto 0 0;
  width: 3px;
  height: auto;
  transform: none;
  border-radius: var(--r) 0 0 var(--r);
  opacity: 0.55;
}
.calc-grid--sm .card-tile[data-category]:hover::before,
.calc-grid--sm .card-tile[data-category]:focus-visible::before { opacity: 1; }

.calc-grid--sm .card-tile__ico {
  grid-column: 1;
  grid-row: 1;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 0.9rem;
}

.calc-grid--sm .card-tile__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.89rem;
  line-height: 1.25;
  padding-right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The converter cards carry only an icon and a label; hiding the hint keeps
   the calculator cards the same height. */
.calc-grid--sm .card-tile__meta { display: none; }

/* chevron */
.calc-grid--sm .card-tile::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 6px;
  height: 6px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg) translateX(-1px);
  opacity: 0.3;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.calc-grid--sm .card-tile:hover::after,
.calc-grid--sm .card-tile:focus-visible::after {
  transform: rotate(45deg) translateX(2px);
  opacity: 0.85;
}

@media (max-width: 980px)  { .calc-grid--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .calc-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px)  { .calc-grid--sm { grid-template-columns: 1fr; } }

/* ---------- body.topic reading rhythm ----------
   Prose emitted as bare <h2>/<p> inherits margin:0 and runs the full 1180px
   container (~148 characters per line). These rules give it the same measure
   and spacing as the tool pages. */
body.topic .info-block { max-width: 74ch; }
body.topic .info-block h2 {
  margin: 2rem 0 0.55rem;
  font-size: 1.35rem;
  line-height: 1.25;
}
body.topic .info-block h2:first-child { margin-top: 0; }
body.topic .info-block p { margin: 0 0 0.95rem; }
body.topic .info-block p:last-child { margin-bottom: 0; }
body.topic .lead { max-width: 62ch; }
body.topic .tool-meta { margin: 0.9rem 0 1.6rem; }
body.topic h2 { scroll-margin-top: 90px; }
body.topic .faq { margin-bottom: 1.8rem; }

/* Section headings that sit directly in the container had the same margin:0
   as the old prose, so they clumped against the block above. */
body.topic .container > h2 { margin: 2.4rem 0 0.7rem; }
body.topic .container > h2:first-of-type { margin-top: 0; }
body.topic .related { margin-top: 0.35rem; }
body.topic .faq__item + .faq__item { margin-top: 0.35rem; }

/* body.topic pages run the full container width like every other page. The
   prose is split into two columns so each line lands near 70-75 characters at
   1180 px instead of running 148 across the screen; a heading never ends a
   column alone. */
/* .container is sized by width: min(100% - 2.4rem, var(--maxw)), so a
   max-width override does nothing: the page has to widen the width itself to
   use the screen. 1440 px keeps lines sane on a 1920 display. */
body.topic .page .container,
body.topic .site-header .container,
body.topic .site-footer .container { width: min(100% - 2.4rem, 1440px); }
body.topic .info-block {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 2.4rem 3.4rem;
  align-items: start;
}
body.topic .lead { max-width: 82ch; }
body.topic h2 { font-size: 1.42rem; line-height: 1.3; }

@media (max-width: 999px) {
  body.topic .info-block { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  body.topic .lead { max-width: none; }
  /* Match the narrower gutter the base .container uses on small screens, so
     the header does not sit inset further than the content beneath it. */
  body.topic .page .container,
  body.topic .site-header .container,
  body.topic .site-footer .container { width: min(100% - 1.6rem, 1440px); }
}