/* Brandfonts.css */
/*
 * Calcmark brand typography
 *
 * The supplied static Light, Medium and ExtraBold outlines map to three clear
 * roles: 260 for reading/calculation, 600 for utility headings and labels, and
 * 800 for compact display/CTA type. Browsers never invent a weight.
 */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("Fonts/AtkinsonHyperlegibleNext-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 260;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("Fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("Fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --font-brand: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-weight-content: 260;
  --font-weight-heading: 600;
  --font-weight-display: 800;
}

html {
  /* A comfortable default for the site's adult audience; rem-based UI scales with it. */
  font-size: 112.5%;
  font-synthesis: none;
}

body,
button,
input,
select,
textarea,
output {
  font-family: var(--font-brand);
}

body {
  font-weight: var(--font-weight-content);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-heading);
}

input,
output,
table,
.bignum__v,
.plan__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* Calculatortokens.css */
/* Hallmark · Hum · Bubble (guided sourdough app) · Narrative Workflow · N10 floating-on-scroll morph · hum-07
 * theme: Hum (catalog) · paper oklch(97% 0.012 95)
 * lead accent: mint oklch(80% 0.16 150) — carries the primary CTA + most surfaces
 *   + cyan (mix) · pear (prove + the character jar) · coral (the bake climax, the one high-energy moment)
 * display/body/labels: Atkinson Hyperlegible Next
 * axes: light / rounded-sans / multi-accent
 * footer: Ft5 statement · brief: "Bubble — guided sourdough, one stage at a time."
 * v1.0.0
 */

:root, [data-theme="hum"] {
  color-scheme: light;

  /* Multi-accent palette on cream */
  --color-paper:      oklch(97% 0.012 95);
  --color-paper-2:    oklch(94% 0.016 95);
  --color-paper-3:    oklch(91% 0.020 95);
  --color-rule:       oklch(86% 0.014 90);
  --color-rule-2:     oklch(70% 0.018 85);
  --color-muted:      oklch(52% 0.014 90);
  --color-neutral:    oklch(38% 0.014 100);
  --color-ink-2:      oklch(28% 0.014 250);
  --color-ink:        oklch(20% 0.012 250);
  --color-accent:     oklch(86% 0.18 95);
  --color-accent-deep: oklch(76% 0.20 95);
  --color-accent-2:   oklch(66% 0.18 235);
  --color-accent-2-deep: oklch(56% 0.20 235);
  --color-accent-3:   oklch(68% 0.24 18);
  --color-accent-3-deep: oklch(58% 0.26 18);
  --color-mint:       oklch(80% 0.16 150);
  --color-mint-deep:  oklch(70% 0.18 150);
  --color-lavender:   oklch(74% 0.16 305);
  --color-lavender-deep: oklch(64% 0.18 305);
  --color-accent-ink: oklch(20% 0.012 250);
  --color-focus:      oklch(56% 0.20 235);

  /* Per-tile tint surfaces — very low opacity over cream */
  --tint-pear:     oklch(86% 0.18 95 / 0.16);
  --tint-cyan:     oklch(66% 0.18 235 / 0.14);
  --tint-coral:    oklch(68% 0.24 18 / 0.12);
  --tint-mint:     oklch(80% 0.16 150 / 0.18);
  --tint-lavender: oklch(74% 0.16 305 / 0.14);

  /* Type — one accessible brand family for every role */
  --font-display: var(--font-brand);
  --font-body:    var(--font-brand);
  --font-label:   var(--font-brand);
  --font-mono:    var(--font-brand);

  --text-xs:        0.75rem;
  --text-sm:        0.8125rem;
  --text-base:      1rem;
  --text-md:        1.0625rem;
  --text-lg:        1.25rem;
  --text-xl:        1.5rem;
  --text-2xl:       2rem;
  --text-3xl:       2.5rem;
  --text-display:   clamp(2.75rem, 5.5vw + 0.75rem, 5.25rem);
  --text-display-s: clamp(2rem, 3.25vw + 1rem, 3.25rem);

  --tracking-display: -0.025em;
  --tracking-tight:   -0.014em;
  --tracking-normal:   0;
  --tracking-label:    0.10em;
  --tracking-micro:    0.16em;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 10rem;

  --section-gap:      6.5rem;
  --section-head-gap: 1.75rem;

  --page-max:    78rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure:     60ch;

  --radius-card:  20px;
  --radius-pill:  999px;
  --radius-input: 12px;
  --rule-card:    1px;
  --shadow-card:  0 12px 32px -16px oklch(20% 0.012 250 / 0.14),
                  0 1px 2px oklch(20% 0.012 250 / 0.06);
  --shadow-card-hover: 0 24px 56px -20px oklch(20% 0.012 250 / 0.18),
                       0 2px 6px oklch(20% 0.012 250 / 0.08);

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:    120ms;
  --dur-short:    220ms;
  --dur-long:     420ms;
  --dur-wobble:   480ms;
  --dur-burst:    420ms;
  --dur-tick:     1200ms;
}


/* Calculatorstyles.css */
/*
 * LOCKED CANONICAL CALCULATOR FACTORY · approved 26 July 2026
 * Visual/composition changes require an explicit user unlock.
 * Calculator-specific data remains variable. See ../CALCULATOR-FACTORY-LOCK.md.
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--font-weight-content);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 28rem;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 0%, var(--tint-cyan), transparent 32rem),
    linear-gradient(180deg, var(--color-paper-2), transparent);
  pointer-events: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--font-weight-heading); line-height: 1.08; letter-spacing: -0.025em; }
::selection { background: var(--color-mint); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-150%);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: var(--font-weight-heading);
}
.skip-link:focus { transform: none; }

.page-shell { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }

/* Navigation */
.site-nav { position: sticky; top: 0; z-index: 50; padding: 0.8rem var(--page-gutter); }
.site-nav__inner {
  width: min(var(--page-max), 100%);
  min-height: 4rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.65rem 0.8rem 0.65rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-paper) 92%, transparent);
  box-shadow: 0 12px 32px -20px oklch(20% 0.012 250 / 0.28);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: var(--font-weight-heading); white-space: nowrap; }
.brand__mark { position: relative; width: 1.55rem; height: 1.75rem; flex: 0 0 auto; border: 2px solid var(--color-ink); border-radius: 0.45rem 0.45rem 0.65rem 0.65rem; overflow: hidden; }
.brand__mark::before { content: ""; position: absolute; inset: 0.15rem 0.2rem auto; height: 0.22rem; border-radius: 1rem; background: var(--color-accent-deep); }
.brand__mark span { position: absolute; inset: 48% 0 0; background: var(--color-accent); }
.site-nav__links { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }
.site-nav__links a { padding: 0.55rem 0.68rem; border-radius: 0.65rem; color: var(--color-ink-2); font-size: 0.82rem; }
.site-nav__links a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav-cta { padding: 0.65rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-mint); box-shadow: 0 3px 0 var(--color-mint-deep); font-size: 0.82rem; font-weight: var(--font-weight-heading); white-space: nowrap; }
.site-nav__menu { position: relative; display: none; margin-left: auto; }
.site-nav__menu summary { padding: 0.55rem 0.8rem; border-radius: var(--radius-pill); background: var(--color-paper-2); cursor: pointer; font-size: 0.78rem; font-weight: var(--font-weight-heading); list-style: none; }
.site-nav__menu summary::-webkit-details-marker { display: none; }
.site-nav__menu-panel { position: absolute; top: calc(100% + 0.65rem); right: 0; width: min(19rem, calc(100vw - 2rem)); display: grid; overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.site-nav__menu-panel a { padding: 0.8rem 1rem; color: var(--color-ink-2); font-size: 0.8rem; }
.site-nav__menu-panel a + a { border-top: 1px solid var(--color-rule); }
.site-nav__menu-panel a:hover { background: var(--color-paper-2); color: var(--color-ink); }

/* Breadcrumb */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 2.6rem 0 1rem; color: var(--color-muted); font-size: 0.8rem; }
.breadcrumbs a:hover { color: var(--color-accent-2-deep); }

/* Locked split opening: editorial guidance left, Bubble calculation instrument right. */
.split-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(32rem, 1.22fr);
  grid-template-areas:
    "heading calculator"
    "context calculator"
    "trust calculator";
  gap: 1.5rem clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  padding: clamp(1rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 4rem);
}
.split-hero__heading { grid-area: heading; padding-top: clamp(0.5rem, 2vw, 2rem); }
.split-hero__heading h1 { max-width: 12ch; margin: 0; font-size: clamp(2.75rem, 4.4vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; }
.split-hero__context { grid-area: context; max-width: 35rem; }
.split-hero__intro { margin-bottom: 1.5rem; color: var(--color-ink-2); font-size: clamp(1.02rem, 1.5vw, 1.17rem); line-height: 1.65; }
.split-hero__benefits { display: grid; border-top: 1px solid var(--color-rule); }
.split-hero__benefits > div { display: grid; grid-template-columns: minmax(7.5rem, 0.42fr) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-rule); }
.split-hero__benefits b { font-size: 0.88rem; font-weight: var(--font-weight-heading); }
.split-hero__benefits span { color: var(--color-muted); font-size: 0.84rem; line-height: 1.5; }
.split-hero__use-cases { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.35rem 0 0; }
.split-hero__use-cases b { width: 100%; margin-bottom: 0.15rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.split-hero__use-cases span { padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); background: var(--tint-cyan); color: var(--color-ink-2); font-size: 0.76rem; }
.trust-strip { grid-area: trust; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.trust-strip span { display: inline-flex; align-items: center; gap: 0.38rem; color: var(--color-muted); font-size: 0.72rem; }
.trust-strip b { display: grid; width: 1.35rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--tint-mint); color: var(--color-mint-deep); font-size: 0.68rem; }

.split-hero__calculator {
  grid-area: calculator;
  position: sticky;
  top: 6.15rem;
  align-self: start;
  min-width: 0;
}
.calculator-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--color-paper);
  box-shadow: var(--shadow-card);
}
.calculator-card__input { padding: clamp(1.5rem, 2.5vw, 2.2rem); }
.calculator-card__header { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-bottom: 1.1rem; }
.calculator-card__header .eyebrow { margin-bottom: 0.45rem; }
.calculator-card__header h2 { margin: 0; font-size: clamp(1.45rem, 2vw, 1.85rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; color: var(--color-muted); font-size: 0.7rem; font-weight: var(--font-weight-heading); letter-spacing: 0.1em; text-transform: uppercase; }
.eyebrow > span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-accent-2); }
.calculator-card__lede { max-width: 54ch; margin-bottom: 0.65rem; color: var(--color-ink-2); font-size: 0.94rem; }
.updated { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.25rem; color: var(--color-muted); font-size: 0.7rem; white-space: nowrap; }
.updated span { color: var(--color-mint-deep); font-weight: var(--font-weight-heading); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); }
.field { display: grid; gap: 0.2rem; min-width: 0; padding: 0.68rem 0; border-bottom: 1px solid var(--color-rule); transition: background-color var(--dur-short); }
.field[hidden] { display: none; }
.field:nth-child(odd) { padding-right: 0.8rem; }
.field:nth-child(even) { padding-left: 0.8rem; border-left: 1px solid var(--color-rule); }
.field:focus-within { background: color-mix(in oklch, var(--tint-cyan) 52%, transparent); }
.field__label { color: var(--color-muted); font-size: 0.65rem; font-weight: var(--font-weight-content); letter-spacing: 0.055em; text-transform: uppercase; }
.field__label b { color: var(--color-accent-3-deep); }
.control {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 0;
  background: transparent;
}
.control:has(input[aria-invalid="true"]) { box-shadow: inset 0 -2px var(--color-accent-3-deep); }
.control input,
.control select {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0.15rem 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: var(--font-weight-content);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.control select { appearance: none; cursor: pointer; padding-right: 1.4rem; }
.control--select { position: relative; grid-template-columns: minmax(0, 1fr); }
.control--select::after { content: "↓"; position: absolute; right: 0; color: var(--color-muted); font-size: 0.7rem; pointer-events: none; }
.control input::-webkit-inner-spin-button, .control input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.control input[type="number"] { appearance: textfield; }
.control input::placeholder { color: var(--color-muted); opacity: 0.65; }
.control em { color: var(--color-muted); font-size: 0.72rem; font-style: normal; white-space: nowrap; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; }
.auto-update { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--color-muted); font-size: 0.76rem; }
.auto-update span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-mint-deep); box-shadow: 0 0 0 4px var(--tint-mint); }
.button { border: 0; border-radius: var(--radius-pill); cursor: pointer; font-weight: var(--font-weight-heading); }
.button--quiet { padding: 0.7rem; background: transparent; color: var(--color-muted); }
.button--quiet:hover { color: var(--color-ink); }
.form-note { margin: 0.55rem 0 0; color: var(--color-muted); font-size: 0.68rem; }
.field__error { margin: .38rem 0 0; color: var(--color-accent-3-deep); font-size: .72rem; font-weight: var(--font-weight-heading); line-height: 1.35; }

.calculator-card__output {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  min-height: 20rem;
  border-top: 1px solid var(--color-rule);
  background:
    radial-gradient(circle at 50% 35%, var(--tint-cyan), transparent 17rem),
    var(--color-paper-2);
  outline: none;
}

.page-toc {
  position: sticky;
  top: 5.45rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-paper) 94%, transparent);
  box-shadow: 0 12px 28px -24px oklch(20% 0.012 250 / 0.4);
  backdrop-filter: blur(14px);
}
.page-toc > span { flex: 0 0 auto; color: var(--color-muted); font-size: 0.66rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.page-toc > div { display: flex; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.page-toc > div::-webkit-scrollbar { display: none; }
.page-toc a { min-height: 2.35rem; display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0.45rem 0.72rem; border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: 0.75rem; font-weight: var(--font-weight-heading); }
.page-toc a:hover { background: var(--tint-cyan); color: var(--color-ink); }
.waterfall-step[id] { scroll-margin-top: 10rem; }
.calculator-card__output:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -6px; }
.visual-caption { position: absolute; inset: auto 2rem 1.4rem; margin: 0; color: var(--color-muted); font-size: 0.75rem; text-align: center; }

/* Topic-specific initial visual: a measured rectangular pool, no image dependency. */
.pool-visual { position: relative; width: min(25rem, 88%); aspect-ratio: 1.18; filter: drop-shadow(0 18px 22px oklch(20% 0.012 250 / 0.12)); transform: rotateX(58deg) rotateZ(-28deg); transform-style: preserve-3d; }
.pool-visual__deck { position: absolute; inset: 5%; border: 1px solid var(--color-rule-2); border-radius: 1.5rem; background: var(--color-paper); box-shadow: inset 0 0 0 1.2rem var(--color-paper-3); }
.pool-visual__water { position: absolute; inset: 19%; z-index: 2; overflow: hidden; border: 4px solid var(--color-accent-2-deep); border-radius: 0.8rem; background: linear-gradient(135deg, var(--color-accent-2), var(--color-mint)); }
.pool-visual__water::before { content: ""; position: absolute; inset: -20% -40%; background: repeating-linear-gradient(120deg, transparent 0 1.5rem, oklch(98% 0.01 235 / 0.34) 1.6rem 1.75rem); animation: water-drift 8s linear infinite; }
.pool-visual__shine { position: absolute; inset: 18% 16% auto; height: 2px; background: oklch(98% 0.01 235 / 0.8); box-shadow: 0 2.5rem 0 oklch(98% 0.01 235 / 0.48), 0 5rem 0 oklch(98% 0.01 235 / 0.28); }
.pool-visual__measure { position: absolute; z-index: 4; color: var(--color-accent-2-deep); font-size: 0.7rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.pool-visual__measure::before, .pool-visual__measure::after { content: ""; position: absolute; background: currentColor; }
.pool-visual__measure--length { inset: auto 20% 7%; width: 60%; border-bottom: 1px solid currentColor; text-align: center; }
.pool-visual__measure--length::before, .pool-visual__measure--length::after { bottom: -0.2rem; width: 1px; height: 0.4rem; }
.pool-visual__measure--length::before { left: 0; } .pool-visual__measure--length::after { right: 0; }
.pool-visual__measure--width { top: 21%; right: 8%; height: 58%; border-right: 1px solid currentColor; writing-mode: vertical-rl; text-align: center; }
.pool-visual__depth { position: absolute; z-index: 5; padding: 0.3rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-muted); font-size: 0.62rem; text-transform: uppercase; }
.pool-visual__depth--shallow { top: 22%; left: 21%; } .pool-visual__depth--deep { right: 21%; bottom: 21%; }
@keyframes water-drift { to { transform: translateX(3rem); } }

.result-view { width: 100%; max-width: 26rem; }
.result-view__label { margin-bottom: 0.5rem; color: var(--color-muted); font-size: 0.72rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.result-view__primary { margin-bottom: 1.4rem; color: var(--color-ink); font-size: clamp(1.7rem, 2.8vw, 2.45rem); font-weight: var(--font-weight-content); line-height: 1.08; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.result-view__primary span { margin-left: 0.35rem; color: var(--color-muted); font-size: 0.5em; letter-spacing: 0.05em; text-transform: uppercase; }
.result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--color-rule); }
.result-list__item { min-width: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--color-rule); }
.result-list__item:nth-child(odd) { padding-right: 0.7rem; }
.result-list__item:nth-child(even) { padding-left: 0.7rem; border-left: 1px solid var(--color-rule); }
.result-list dt { color: var(--color-muted); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; }
.result-list dd { overflow-wrap: anywhere; margin: 0.2rem 0 0; color: var(--color-ink); font-size: 0.88rem; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.result-list__item.is-pass dd { color: var(--color-mint-deep); font-weight: var(--font-weight-heading); }
.result-list__item.is-fail dd { color: var(--color-accent-3-deep); font-weight: var(--font-weight-heading); }
.result-view__note { margin: 1rem 0 0; color: var(--color-muted); font-size: 0.8rem; }
.result-view__note.is-error { color: var(--color-accent-3-deep); font-weight: var(--font-weight-heading); }
.result-view__note.is-warning { padding: 0.75rem; border-left: 0.3rem solid var(--color-accent-3); background: var(--tint-coral); color: var(--color-ink-2); }
.calculator-card[data-result-mode="dose"] .result-view__primary { color: var(--color-accent-2-deep); }
.calculator-card[data-result-mode="recommendation"] .result-view__primary { color: var(--color-lavender-deep); }
.calculator-card[data-result-mode="cost"] .result-view__primary { color: var(--color-accent-3-deep); }
.calculator-card[data-result-mode="comparison"] .result-view__primary { color: var(--color-lavender-deep); }
.calculator-card[data-result-mode="conversion"] .result-view__primary { color: var(--color-accent-2-deep); }
.calculator-card[data-result-mode="procedure"] .result-view__primary { color: var(--color-accent-deep); }
.calculator-card[data-result-mode="rate"] .result-view__primary { color: var(--color-accent-2-deep); }
.calculator-card[data-result-mode="compliance"] .calculator-card__output[data-outcome="pass"] .result-view__primary { color: var(--color-mint-deep); }
.calculator-card[data-result-mode="compliance"] .calculator-card__output[data-outcome="fail"] .result-view__primary { color: var(--color-accent-3-deep); }
.calculator-card__output[data-state="result"] .pool-visual { display: none; }
.calculator-card__output[data-state="result"] .idle-visual { display: none; }
.calculator-card__output[data-state="result"] .visual-caption { display: none; }

/* Dosage-mode initial visual: one test reading, one target, one measured addition. */
.dose-visual { position: relative; width: min(23rem, 88%); aspect-ratio: 1.15; filter: drop-shadow(0 18px 22px oklch(20% 0.012 250 / 0.12)); }
.dose-visual__pool { position: absolute; inset: 30% 4% 10% 22%; overflow: hidden; border: 3px solid var(--color-accent-2-deep); border-radius: 48% 52% 44% 56% / 55% 44% 56% 45%; background: linear-gradient(145deg, var(--color-accent-2), var(--color-mint)); transform: rotate(-5deg); }
.dose-visual__pool::after { content: ""; position: absolute; inset: 20% -20%; background: repeating-linear-gradient(115deg, transparent 0 1.4rem, oklch(98% 0.01 235 / 0.38) 1.5rem 1.65rem); animation: water-drift 8s linear infinite; }
.dose-visual__vial { position: absolute; top: 5%; left: 9%; z-index: 3; width: 4.6rem; height: 9.5rem; overflow: hidden; border: 3px solid var(--color-ink); border-radius: 1.1rem 1.1rem 1.6rem 1.6rem; background: var(--color-paper); transform: rotate(-8deg); }
.dose-visual__vial::before { content: ""; position: absolute; inset: 48% 0 0; background: var(--color-accent); }
.dose-visual__vial::after { content: "FC"; position: absolute; inset: 0.7rem 0 auto; color: var(--color-ink); font-size: 0.7rem; font-weight: var(--font-weight-heading); letter-spacing: 0.12em; text-align: center; }
.dose-visual__target { position: absolute; top: 16%; right: 1%; z-index: 4; width: 8rem; padding: 0.65rem 0.8rem; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-size: 0.7rem; font-weight: var(--font-weight-heading); text-align: center; text-transform: uppercase; }
.dose-visual__drop { position: absolute; top: 42%; left: 45%; z-index: 5; width: 2rem; height: 2.5rem; border-radius: 60% 40% 65% 35%; background: var(--color-accent); transform: rotate(42deg); box-shadow: 2.7rem 2.3rem 0 -0.45rem var(--color-accent); }

/* Sizing-mode initial visual: pump impeller laid against a flow-at-head curve. */
.pump-visual { position: relative; width: min(24rem, 90%); aspect-ratio: 1.12; filter: drop-shadow(0 18px 22px oklch(20% 0.012 250 / 0.12)); }
.pump-visual__chart { position: absolute; inset: 8% 4% 12% 18%; border-left: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); background: repeating-linear-gradient(to right, transparent 0 3.4rem, var(--color-rule) 3.45rem 3.5rem), repeating-linear-gradient(to bottom, transparent 0 3rem, var(--color-rule) 3.05rem 3.1rem); }
.pump-visual__chart::before { content: "FLOW →"; position: absolute; right: 0; bottom: -1.7rem; color: var(--color-muted); font-size: 0.62rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; }
.pump-visual__chart::after { content: "HEAD"; position: absolute; top: -1.2rem; left: -2.8rem; color: var(--color-muted); font-size: 0.62rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; transform: rotate(-90deg); }
.pump-visual__curve { position: absolute; inset: 16% 10% 24% 25%; z-index: 2; border-top: 5px solid var(--color-lavender-deep); border-radius: 50% 60% 0 0; transform: rotate(20deg); }
.pump-visual__curve::after { content: "BEST FIT"; position: absolute; right: 9%; top: -2rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-lavender); color: var(--color-ink); font-size: 0.62rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; }
.pump-visual__impeller { position: absolute; left: 3%; bottom: 5%; z-index: 4; width: 7.8rem; aspect-ratio: 1; border: 3px solid var(--color-ink); border-radius: 50%; background: var(--color-accent); box-shadow: inset 0 0 0 1rem var(--color-paper), 0 6px 0 var(--color-accent-deep); }
.pump-visual__impeller::before { content: ""; position: absolute; inset: 31%; border: 0.55rem dotted var(--color-accent-2-deep); border-radius: 50%; }
.pump-visual__impeller::after { content: "HP"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-ink); font-size: 0.8rem; font-weight: var(--font-weight-display); }

/* Compliance-mode initial visual: a clipped inspection sheet with five checks. */
.inspection-visual { position: relative; width: min(21rem, 88%); min-height: 18rem; padding: 2.4rem 2rem 1.6rem; border: 2px solid var(--color-ink); border-radius: 1.2rem; background: var(--color-paper); box-shadow: 0 8px 0 var(--color-lavender-deep), var(--shadow-card); transform: rotate(-2deg); }
.inspection-visual::before { content: "WATER CHECK"; display: block; margin-bottom: 1.3rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-ink); color: var(--color-ink); font-size: 0.78rem; font-weight: var(--font-weight-display); letter-spacing: 0.1em; }
.inspection-visual::after { content: ""; position: absolute; top: -0.8rem; left: 50%; width: 7rem; height: 1.7rem; border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-accent); transform: translateX(-50%); }
.inspection-visual__row { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: 0.65rem; align-items: center; padding: 0.56rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: 0.7rem; text-transform: uppercase; }
.inspection-visual__row i { width: 0.8rem; height: 0.8rem; border: 2px solid var(--color-rule-2); border-radius: 50%; background: var(--color-paper-2); }
.inspection-visual__row b { color: var(--color-muted); font-size: 0.62rem; }

/* Remaining universal-pattern proofs: one quiet, subject-specific instrument each. */
.cost-visual, .compare-visual, .convert-visual, .procedure-visual, .rate-visual { position: relative; width: min(23rem, 90%); min-height: 18rem; }
.cost-visual__range { position: absolute; inset: 16% 4%; display: grid; align-content: center; gap: 0.8rem; padding: 2rem; border: 2px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: 0.8rem 0.8rem 0 var(--color-accent-3); transform: rotate(-2deg); }
.cost-visual__range b { font-size: 2.3rem; font-weight: var(--font-weight-content); }
.cost-visual__range span { color: var(--color-muted); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; }
.cost-visual__range i { height: 0.8rem; border-radius: var(--radius-pill); background: linear-gradient(90deg,var(--color-mint),var(--color-accent),var(--color-accent-3)); }
.compare-visual { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.55rem; align-items: end; padding: 2rem 0; }
.compare-visual span { display: grid; place-items: center; min-height: var(--bar); padding: 0.6rem 0.2rem; border: 2px solid var(--color-ink); border-radius: 1rem 1rem 0.5rem 0.5rem; background: var(--fill); box-shadow: 0 5px 0 var(--edge); font-size: 0.62rem; font-weight: var(--font-weight-heading); text-align: center; }
.compare-visual span:nth-child(1){--bar:45%;--fill:var(--color-mint);--edge:var(--color-mint-deep)} .compare-visual span:nth-child(2){--bar:62%;--fill:var(--color-accent);--edge:var(--color-accent-deep)} .compare-visual span:nth-child(3){--bar:78%;--fill:var(--color-lavender);--edge:var(--color-lavender-deep)} .compare-visual span:nth-child(4){--bar:92%;--fill:var(--color-accent-3);--edge:var(--color-accent-3-deep)}
.convert-visual__dial { position: absolute; inset: 8% 12%; display: grid; place-items: center; border: 2px solid var(--color-ink); border-radius: 50%; background: conic-gradient(var(--color-accent) 0 16.6%,var(--color-mint) 0 33.2%,var(--color-lavender) 0 49.8%,var(--color-accent-2) 0 66.4%,var(--color-accent-3) 0 83%,var(--color-paper-3) 0); box-shadow: inset 0 0 0 3.2rem var(--color-paper),0 7px 0 var(--color-accent-2-deep); }
.convert-visual__dial::before { content: "ppm"; display: grid; place-items: center; width: 6.8rem; aspect-ratio: 1; border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-paper); font-size: 1.25rem; font-weight: var(--font-weight-display); }
.convert-visual__dial::after { content: "gpg  ·  °dH  ·  °fH  ·  mmol/L"; position: absolute; bottom: -2rem; color: var(--color-muted); font-size: 0.68rem; letter-spacing: 0.05em; }
.procedure-visual { display: grid; align-content: center; gap: 0.7rem; }
.procedure-visual span { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.7rem; align-items: center; padding: 0.75rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink-2); font-size: 0.72rem; }
.procedure-visual b { width: 2.2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 0.7rem; background: var(--color-accent); box-shadow: 0 3px 0 var(--color-accent-deep); }
.rate-visual__pool { position: absolute; inset: 24% 4% 12%; overflow: hidden; border: 3px solid var(--color-accent-2-deep); border-radius: 46% 54% 42% 58%; background: linear-gradient(var(--color-paper) 0 22%,var(--color-accent-2) 22% 100%); }
.rate-visual__pool::before { content: "WATERLINE"; position: absolute; top: 16%; left: 10%; color: var(--color-accent-2-deep); font-size: 0.62rem; font-weight: var(--font-weight-heading); letter-spacing: 0.08em; }
.rate-visual__drop { position: absolute; top: 5%; left: 46%; width: 3.3rem; height: 4.2rem; border-radius: 60% 40% 65% 35%; background: var(--color-accent); transform: rotate(42deg); box-shadow: 4rem 2.5rem 0 -1rem var(--color-accent),-4rem 3.5rem 0 -1.2rem var(--color-accent); }

.calculator-disclaimer { margin: 1rem 0 0; padding: 0.9rem 1rem; border-left: 0.45rem solid var(--color-accent-2); background: var(--tint-cyan); color: var(--color-ink-2); font-size: 0.82rem; }

/* Inert approval-stage inventory only. No ad script or live ad unit is present. */
.ad-preview {
  min-height: clamp(6rem, 9vw, 8rem);
  display: grid;
  place-content: center;
  gap: 0.25rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
  border: 1px dashed var(--color-rule-2);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--color-paper-2) 72%, transparent);
  color: var(--color-muted);
  text-align: center;
}
.ad-preview span { font-size: 0.66rem; font-weight: var(--font-weight-heading); letter-spacing: 0.12em; text-transform: uppercase; }
.ad-preview small { font-size: 0.72rem; }
.ad-preview--before-related { max-width: 70rem; margin-inline: auto; }
.ad-preview + .content-intro { margin-top: clamp(2.5rem, 5vw, 4rem); }
.waterfall > .ad-preview--in-flow { min-height: 7rem; margin: 0 0 3rem calc(var(--rail) + clamp(1rem, 3vw, 2.5rem)); }

/* Bubble waterfall: content is a guided, calculator-specific sequence. */
.content-intro { max-width: 52rem; margin: clamp(6rem, 10vw, 10rem) 0 4rem; }
.content-intro h2 { margin-bottom: 1rem; font-size: clamp(2.3rem, 5vw, 4.6rem); }
.content-intro > p:last-child { max-width: 58ch; color: var(--color-ink-2); font-size: 1.05rem; }
.waterfall { --rail: 4.6rem; max-width: 70rem; margin-inline: auto; }
.waterfall-step { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.waterfall-step__rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.waterfall-step__rail span { position: sticky; top: 6rem; z-index: 2; width: var(--rail); aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.35rem; background: var(--step-color, var(--color-mint)); box-shadow: 0 5px 0 var(--step-edge, var(--color-mint-deep)), var(--shadow-card); color: var(--color-ink); font-size: 1.2rem; font-weight: var(--font-weight-heading); font-variant-numeric: tabular-nums; }
.waterfall-step__rail i { width: 3px; min-height: 100%; flex: 1; background: linear-gradient(var(--step-color, var(--color-mint)), var(--next-color, var(--color-accent-2))); transform: scaleY(0); transform-origin: top; transition: transform 650ms var(--ease-out); }
.waterfall-step.is-visible .waterfall-step__rail i { transform: scaleY(1); }
article.waterfall-step:nth-of-type(4n+1) { --step-color: var(--color-mint); --step-edge: var(--color-mint-deep); --next-color: var(--color-accent-2); }
article.waterfall-step:nth-of-type(4n+2) { --step-color: var(--color-accent-2); --step-edge: var(--color-accent-2-deep); --next-color: var(--color-accent); }
article.waterfall-step:nth-of-type(4n+3) { --step-color: var(--color-accent); --step-edge: var(--color-accent-deep); --next-color: var(--color-lavender); }
article.waterfall-step:nth-of-type(4n) { --step-color: var(--color-lavender); --step-edge: var(--color-lavender-deep); --next-color: var(--color-mint); }
.waterfall-step__panel { margin-bottom: 2rem; padding: clamp(1.7rem, 4vw, 3.2rem); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); opacity: 0; transform: translateY(1rem); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.waterfall-step.is-visible .waterfall-step__panel { opacity: 1; transform: none; }
.step-kicker { margin-bottom: 0.55rem; color: var(--step-edge, var(--color-mint-deep)); font-size: 0.68rem; font-weight: var(--font-weight-heading); letter-spacing: 0.09em; text-transform: uppercase; }
.waterfall-step h2 { max-width: 25ch; margin-bottom: 1.2rem; font-size: clamp(1.7rem, 3.5vw, 3rem); }
.waterfall-step h3 { margin-bottom: 0.8rem; font-size: 1.12rem; }
.waterfall-step p { max-width: 68ch; color: var(--color-ink-2); }
.waterfall-step p:last-child { margin-bottom: 0; }
.check-list, .benefit-list { display: grid; gap: 0.65rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.check-list li, .benefit-list li { position: relative; padding-left: 1.55rem; color: var(--color-ink-2); }
.check-list li::before, .benefit-list li::before { content: "✓"; position: absolute; left: 0; color: var(--step-edge, var(--color-mint-deep)); font-weight: var(--font-weight-heading); }
.instruction-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 1.4rem 0 0; padding: 0; counter-reset: instruction; list-style: none; }
.instruction-list li { counter-increment: instruction; min-width: 0; padding: 1rem; border-radius: var(--radius-input); background: var(--color-paper-2); }
.instruction-list li::before { content: counter(instruction, decimal-leading-zero); display: block; margin-bottom: 0.6rem; color: var(--step-edge); font-weight: var(--font-weight-heading); }
.instruction-list b, .instruction-list span { display: block; }
.instruction-list span { margin-top: 0.3rem; color: var(--color-ink-2); font-size: 0.9rem; }
.formula-card { margin: 1.4rem 0; padding: 1.2rem; border-radius: var(--radius-input); background: var(--tint-cyan); }
.formula-card p { margin-bottom: 0.25rem; color: var(--color-ink); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: var(--font-weight-heading); }
.formula-card span { color: var(--color-muted); font-size: 0.86rem; }
.worked-example { padding: 1.2rem; border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.worked-example ol { margin-bottom: 0; padding-left: 1.25rem; color: var(--color-ink-2); }
.worked-example li + li { margin-top: 0.45rem; }
.conversion-grid, .use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.4rem; }
.use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conversion-grid > div, .use-case-grid > div { min-width: 0; padding: 1rem; border-radius: var(--radius-input); background: color-mix(in oklch, var(--step-color) 12%, var(--color-paper-2)); }
.conversion-grid b, .conversion-grid span, .conversion-grid em, .use-case-grid b, .use-case-grid span { display: block; }
.conversion-grid span, .use-case-grid span { margin-top: 0.3rem; color: var(--color-ink-2); font-size: 0.86rem; }
.conversion-grid em { margin-top: 0.6rem; color: var(--step-edge); font-size: 0.82rem; font-style: normal; font-variant-numeric: tabular-nums; }
.impact-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.impact-strip span { padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--step-color) 20%, var(--color-paper-2)); font-size: 0.8rem; font-weight: var(--font-weight-heading); }
.interpretation-table { margin-top: 1.4rem; border-top: 1px solid var(--color-rule); }
.interpretation-table > div { display: grid; grid-template-columns: minmax(9rem, 0.35fr) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-rule); }
.interpretation-table span { color: var(--color-ink-2); }
.faq-list { margin-top: 1.3rem; border-top: 1px solid var(--color-rule); }
.faq-list details { border-bottom: 1px solid var(--color-rule); }
.faq-list summary { position: relative; padding: 1.15rem 2.5rem 1.15rem 0; cursor: pointer; font-weight: var(--font-weight-heading); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.4rem; color: var(--step-edge); font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 2rem 1.1rem 0; }

.related { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2rem; align-items: start; margin: 6rem 0; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); }
.related h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.related .eyebrow { color: var(--color-paper-3); }
.related__links { display: grid; gap: 0.6rem; }
.related__links a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid color-mix(in oklch, var(--color-paper) 18%, transparent); }
.related__links a:hover { color: var(--color-mint); }

.site-footer { background: var(--color-paper-2); border-top: 1px solid var(--color-rule); }
.site-footer__inner { padding-block: 4rem; }
.site-footer__statement { max-width: 18ch; margin-bottom: 3rem; font-size: clamp(2rem, 4vw, 4rem); font-weight: var(--font-weight-heading); line-height: 1.05; }
.site-footer__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 0.78rem; }

@media (min-width: 1041px) {
  .calculator-card__output { min-height: 17.5rem; padding: 2rem; }
  .calculator-card .pool-visual { width: min(19rem, 72%); }
  .calculator-card .result-view { max-width: 100%; }
  .calculator-card .result-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calculator-card .result-list__item { padding-inline: 0.65rem; border-left: 1px solid var(--color-rule); }
  .calculator-card .result-list__item:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .calculator-card .result-list__item:nth-child(4n) { padding-right: 0; }
}

@media (max-width: 1040px) {
  .site-nav__links { display: none; }
  .site-nav__menu { display: block; }
  .split-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "calculator" "context" "trust";
    gap: 1.25rem;
    padding-top: 0.4rem;
  }
  .split-hero__heading { padding-top: 0; }
  .split-hero__heading h1 { max-width: 14ch; font-size: clamp(2.35rem, 6.6vw, 3.6rem); }
  .split-hero__context { max-width: 44rem; margin-top: 0.65rem; }
  .split-hero__calculator { position: static; top: auto; }
  .calculator-card__output { min-height: 23rem; border-left: 0; }
}
@media (max-width: 720px) {
  .site-nav { padding-inline: 0.6rem; }
  .nav-cta { display: none; }
  .brand { font-size: 0.9rem; }
  .breadcrumbs { padding-top: 1.5rem; }
  .calculator-card__input { padding: 1.5rem; }
  .calculator-card__header { align-items: start; flex-direction: column; gap: 0.45rem; }
  .updated { margin: 0; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .page-toc { top: 4.3rem; margin-inline: 0; padding-left: 0.65rem; }
  .page-toc > span { display: none; }
  .calculator-disclaimer { margin-top: 1rem; }
  .content-intro { margin-top: 4rem; }
  .waterfall { --rail: 3.4rem; }
  .waterfall-step { gap: 0.8rem; }
  .waterfall-step__rail span { border-radius: 1rem; font-size: 0.9rem; }
  .waterfall-step__panel { padding: 1.35rem; }
  .conversion-grid { grid-template-columns: 1fr; }
  .instruction-list, .use-case-grid { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr; }
  .site-footer__meta { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .page-shell { width: min(100% - 1.2rem, var(--page-max)); }
  .site-nav__inner { min-height: 3.5rem; }
  .field-grid { grid-template-columns: 1fr; }
  .split-hero__heading .eyebrow { margin-bottom: 0.65rem; }
  .split-hero__heading h1 { font-size: clamp(2.15rem, 8.8vw, 2.75rem); }
  .split-hero__intro { margin-bottom: 1.1rem; font-size: 0.98rem; line-height: 1.58; }
  .split-hero__benefits { display: none; }
  .split-hero__use-cases { display: none; }
  .trust-strip { justify-content: space-between; gap: 0.45rem; padding: 0.9rem 0; border-block: 1px solid var(--color-rule); }
  .trust-strip span { flex: 1 1 5.5rem; justify-content: center; text-align: center; }
  .ad-preview { min-height: 5.25rem; margin-block: 2rem; padding: 0.8rem; }
  .waterfall > .ad-preview--in-flow { min-height: 5.25rem; margin: 0 0 2.4rem calc(var(--rail) + 0.8rem); }
  .field:nth-child(odd), .field:nth-child(even) { padding-inline: 0; border-left: 0; }
  .form-footer { align-items: flex-start; flex-direction: column; }
  .button--quiet { padding-inline: 0; }
  .calculator-card__output { min-height: 20rem; padding: 1.3rem; }
  .result-list { grid-template-columns: 1fr; }
  .result-list__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .result-list__item:nth-child(odd) { padding-right: 0; }
  .waterfall { --rail: 2.7rem; }
  .waterfall-step__rail span { border-radius: 0.8rem; }
  .interpretation-table > div { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pool-visual__water::before { animation: none; }
  .dose-visual__pool::after { animation: none; }
  .waterfall-step__panel { opacity: 1; transform: none; transition: none; }
  .waterfall-step__rail i { transform: scaleY(1); transition: none; }
}


/* Factoryshell.css */
/* Generated calculator shell additions.
 * Keeps the locked Bubble page intact while supplying the manifest-driven
 * generic visual, long reference tables, field help and complete directory.
 */
.calculator-card__lede { max-width: 50ch; margin: -.35rem 0 1.1rem; color: var(--color-ink-2); }
.field__help { display: block; margin-top: .38rem; color: var(--color-muted); font-size: .72rem; line-height: 1.35; }
.factory-visual { position: relative; width: min(20rem, 82%); aspect-ratio: 1.15; display: grid; place-content: center; gap: .45rem; overflow: hidden; border: 1px solid color-mix(in oklch, var(--color-paper) 36%, transparent); border-radius: 2.25rem; background: color-mix(in oklch, var(--color-accent-2) 22%, var(--color-ink)); color: var(--color-paper); text-align: center; transform: rotate(-2deg); }
.factory-visual::before, .factory-visual::after { content: ""; position: absolute; border-radius: 999px; background: color-mix(in oklch, var(--color-mint) 78%, transparent); }
.factory-visual::before { width: 11rem; height: 11rem; right: -4rem; top: -5rem; }
.factory-visual::after { width: 7rem; height: 7rem; left: -2rem; bottom: -3rem; background: color-mix(in oklch, var(--color-accent) 78%, transparent); }
.factory-visual span, .factory-visual b { position: relative; z-index: 1; }
.factory-visual span { font-size: .72rem; font-weight: var(--font-weight-heading); letter-spacing: .12em; text-transform: uppercase; }
.factory-visual b { font-size: clamp(3rem, 7vw, 5rem); font-weight: var(--font-weight-display); line-height: .9; }
.factory-visual i { position: absolute; z-index: 1; inset: auto 18% 22%; height: .35rem; border-radius: 1rem; background: var(--color-mint); box-shadow: 0 .9rem 0 var(--color-accent), 0 1.8rem 0 var(--color-lavender); }
.reference-table { max-width: 100%; margin-top: 1.3rem; overflow-x: auto; }
.reference-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .86rem; }
.reference-table caption { padding-bottom: .7rem; color: var(--color-muted); text-align: left; }
.reference-table th, .reference-table td { padding: .75rem; border-bottom: 1px solid var(--color-rule); text-align: left; }
.reference-table th { color: var(--color-ink); font-weight: var(--font-weight-heading); }

.directory-footer { margin-top: clamp(5rem, 9vw, 9rem); background: var(--color-ink); color: var(--color-paper); }
.directory-footer__inner { padding-block: clamp(3.5rem, 7vw, 6.5rem) 1.5rem; }
.directory-footer__eyebrow { margin-bottom: 1rem; color: var(--color-mint); font-size: .68rem; font-weight: var(--font-weight-heading); letter-spacing: .14em; text-transform: uppercase; }
.directory-footer__statement { max-width: 17ch; margin-bottom: clamp(3rem, 6vw, 5rem); font-size: clamp(2.3rem, 5vw, 4.5rem); font-weight: var(--font-weight-display); line-height: .96; letter-spacing: -.035em; }
.directory-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid color-mix(in oklch, var(--color-paper) 16%, transparent); }
.directory-footer__pillar { min-width: 0; padding: 1.5rem; border-right: 1px solid color-mix(in oklch, var(--color-paper) 16%, transparent); }
.directory-footer__pillar:first-child { padding-left: 0; }
.directory-footer__pillar:last-child { padding-right: 0; border-right: 0; }
.directory-footer__pillar summary { min-height: 3rem; color: var(--color-mint); font-size: .72rem; font-weight: var(--font-weight-heading); letter-spacing: .09em; list-style: none; text-transform: uppercase; }
.directory-footer__pillar summary::-webkit-details-marker { display: none; }
.directory-footer__hub { display: inline-block; margin: .55rem 0 1.6rem; font-size: .75rem; font-weight: var(--font-weight-heading); }
.directory-footer__silo + .directory-footer__silo { margin-top: 1.5rem; }
.directory-footer__silo h3 { margin-bottom: .6rem; color: color-mix(in oklch, var(--color-paper) 86%, transparent); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.directory-footer__silo ul { margin: 0; padding: 0; list-style: none; }
.directory-footer__silo li + li { margin-top: .34rem; }
.directory-footer__silo a { color: color-mix(in oklch, var(--color-paper) 66%, transparent); font-size: .74rem; line-height: 1.35; }
.directory-footer a:hover { color: var(--color-mint); }
.directory-footer a:focus-visible, .directory-footer summary:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 3px; }
.directory-footer__utility { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font-size: .72rem; font-weight: var(--font-weight-heading); }
.directory-footer__utility nav { display: flex; flex-wrap: wrap; gap: 1rem; color: color-mix(in oklch, var(--color-paper) 66%, transparent); }
.directory-footer__fine { padding-top: 1rem; border-top: 1px solid color-mix(in oklch, var(--color-paper) 16%, transparent); color: color-mix(in oklch, var(--color-paper) 52%, transparent); font-size: .65rem; }
@media (min-width: 769px) { .directory-footer__pillar summary { pointer-events: none; } }
@media (max-width: 1000px) { .directory-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .directory-footer__pillar:nth-child(2) { border-right: 0; } }
@media (max-width: 620px) {
  .factory-visual { width: min(16rem, 80%); }
  .directory-footer__grid { display: block; }
  .directory-footer__pillar, .directory-footer__pillar:first-child, .directory-footer__pillar:last-child { padding: 1rem 0; border-right: 0; border-bottom: 1px solid color-mix(in oklch, var(--color-paper) 16%, transparent); }
  .directory-footer__pillar summary { display: flex; justify-content: space-between; align-items: center; min-height: 2.5rem; cursor: pointer; }
  .directory-footer__pillar summary::after { content: "−"; }
  .directory-footer__pillar:not([open]) summary::after { content: "+"; }
  .directory-footer__utility { align-items: flex-start; flex-direction: column; }
}


/* SiteThemes.css */
/* Canonical APC color modes.
 * Light: warm editorial system derived from LiteDESIGN.md.
 * Dark: disciplined product-surface system derived from darkDESIGN.md.
 * Bubble remains the site's own taxonomy and interaction signature.
 */

html[data-theme="light"] {
  color-scheme: light;
  --bubble-paper: #faf9f5;
  --bubble-paper-2: #f5f0e8;
  --bubble-ink: #141413;
  --bubble-body: #3d3d3a;
  --bubble-muted: #6c6a64;
  --bubble-rule: #e6dfd8;
  --mode-primary: #cc785c;
  --mode-primary-hover: #a9583e;
  --mode-on-primary: #ffffff;
  --mode-surface-1: #f5f0e8;
  --mode-surface-2: #efe9de;
  --mode-footer: #181715;

  --color-paper: #faf9f5;
  --color-paper-2: #f5f0e8;
  --color-paper-3: #efe9de;
  --color-rule: #e6dfd8;
  --color-rule-2: #cfc6ba;
  --color-muted: #6c6a64;
  --color-neutral: #3d3d3a;
  --color-ink-2: #252523;
  --color-ink: #141413;
  --color-accent: #cc785c;
  --color-accent-deep: #a9583e;
  --color-accent-2: #5db8a6;
  --color-accent-2-deep: #378c7b;
  --color-accent-3: #e8a55a;
  --color-accent-3-deep: #b9732d;
  --color-mint: #5db8a6;
  --color-mint-deep: #378c7b;
  --color-lavender: #bba8ef;
  --color-lavender-deep: #8870cb;
  --color-accent-ink: #141413;
  --color-focus: #cc785c;
  --tint-pear: rgb(232 165 90 / .14);
  --tint-cyan: rgb(93 184 166 / .14);
  --tint-coral: rgb(204 120 92 / .13);
  --tint-mint: rgb(93 184 166 / .16);
  --tint-lavender: rgb(187 168 239 / .14);
  --shadow-card: 0 1px 3px rgb(20 20 19 / .08);
  --shadow-card-hover: 0 8px 24px rgb(20 20 19 / .10);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bubble-paper: #010102;
  --bubble-paper-2: #0f1011;
  --bubble-ink: #f7f8f8;
  --bubble-body: #d0d6e0;
  --bubble-muted: #8a8f98;
  --bubble-rule: #23252a;
  --mode-primary: #5e6ad2;
  --mode-primary-hover: #828fff;
  --mode-on-primary: #ffffff;
  --mode-surface-1: #0f1011;
  --mode-surface-2: #141516;
  --mode-footer: #010102;

  --color-paper: #010102;
  --color-paper-2: #0f1011;
  --color-paper-3: #141516;
  --color-rule: #23252a;
  --color-rule-2: #34343a;
  --color-muted: #8a8f98;
  --color-neutral: #d0d6e0;
  --color-ink-2: #d0d6e0;
  --color-ink: #f7f8f8;
  --color-accent: #5e6ad2;
  --color-accent-deep: #4650aa;
  --color-accent-2: #657483;
  --color-accent-2-deep: #8a9aaa;
  --color-accent-3: #a97a62;
  --color-accent-3-deep: #d09a7d;
  --color-mint: #7a7fad;
  --color-mint-deep: #aab0df;
  --color-lavender: #5e6ad2;
  --color-lavender-deep: #828fff;
  --color-accent-ink: #ffffff;
  --color-focus: #5e69d1;
  --tint-pear: rgb(232 220 103 / .08);
  --tint-cyan: rgb(94 106 210 / .10);
  --tint-coral: rgb(204 120 92 / .09);
  --tint-mint: rgb(94 106 210 / .10);
  --tint-lavender: rgb(94 106 210 / .12);
  --shadow-card: none;
  --shadow-card-hover: none;
}

/* Support, glossary and audience pages use this semantic surface layer. */
html[data-theme-effective="light"] {
  --mode-bg: var(--bubble-paper);
  --mode-ink: var(--bubble-ink);
  --mode-muted: var(--bubble-muted);
  --mode-border: var(--bubble-rule);
  --mode-surface: var(--bubble-paper-2);
}
html[data-theme-effective="dark"] {
  --mode-bg: var(--bubble-paper);
  --mode-ink: var(--bubble-ink);
  --mode-muted: var(--bubble-muted);
  --mode-border: var(--bubble-rule);
  --mode-surface: var(--bubble-paper-2);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bubble-paper: #faf9f5; --bubble-paper-2: #f5f0e8; --bubble-ink: #141413; --bubble-body: #3d3d3a; --bubble-muted: #6c6a64; --bubble-rule: #e6dfd8;
    --mode-primary: #cc785c; --mode-primary-hover: #a9583e; --mode-on-primary: #ffffff; --mode-surface-1: #f5f0e8; --mode-surface-2: #efe9de; --mode-footer: #181715;
    --color-paper: #faf9f5; --color-paper-2: #f5f0e8; --color-paper-3: #efe9de; --color-rule: #e6dfd8; --color-rule-2: #cfc6ba; --color-muted: #6c6a64; --color-neutral: #3d3d3a; --color-ink-2: #252523; --color-ink: #141413;
    --color-accent: #cc785c; --color-accent-deep: #a9583e; --color-accent-2: #5db8a6; --color-accent-2-deep: #378c7b; --color-accent-3: #e8a55a; --color-accent-3-deep: #b9732d; --color-mint: #5db8a6; --color-mint-deep: #378c7b; --color-lavender: #bba8ef; --color-lavender-deep: #8870cb; --color-focus: #cc785c;
    --tint-pear: rgb(232 165 90 / .14); --tint-cyan: rgb(93 184 166 / .14); --tint-coral: rgb(204 120 92 / .13); --tint-mint: rgb(93 184 166 / .16); --tint-lavender: rgb(187 168 239 / .14); --shadow-card: 0 1px 3px rgb(20 20 19 / .08); --shadow-card-hover: 0 8px 24px rgb(20 20 19 / .10);
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bubble-paper: #010102; --bubble-paper-2: #0f1011; --bubble-ink: #f7f8f8; --bubble-body: #d0d6e0; --bubble-muted: #8a8f98; --bubble-rule: #23252a;
    --mode-primary: #5e6ad2; --mode-primary-hover: #828fff; --mode-on-primary: #ffffff; --mode-surface-1: #0f1011; --mode-surface-2: #141516; --mode-footer: #010102;
    --color-paper: #010102; --color-paper-2: #0f1011; --color-paper-3: #141516; --color-rule: #23252a; --color-rule-2: #34343a; --color-muted: #8a8f98; --color-neutral: #d0d6e0; --color-ink-2: #d0d6e0; --color-ink: #f7f8f8;
    --color-accent: #5e6ad2; --color-accent-deep: #4650aa; --color-accent-2: #657483; --color-accent-2-deep: #8a9aaa; --color-accent-3: #a97a62; --color-accent-3-deep: #d09a7d; --color-mint: #7a7fad; --color-mint-deep: #aab0df; --color-lavender: #5e6ad2; --color-lavender-deep: #828fff; --color-focus: #5e69d1;
    --tint-pear: rgb(232 220 103 / .08); --tint-cyan: rgb(94 106 210 / .10); --tint-coral: rgb(204 120 92 / .09); --tint-mint: rgb(94 106 210 / .10); --tint-lavender: rgb(94 106 210 / .12); --shadow-card: none; --shadow-card-hover: none;
  }
}

/* Shared mode control */
.theme-switcher { display: inline-flex; align-items: center; gap: 2px; margin-left: .25rem; padding: 3px; border: 1px solid var(--bubble-rule, var(--color-rule)); border-radius: 10px; background: var(--mode-surface-1); }
.theme-switcher__label { padding: .3rem .38rem; color: var(--bubble-muted, var(--color-muted)); font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.theme-switcher button { min-height: 2rem; border: 0; border-radius: 7px; padding: .38rem .52rem; background: transparent; color: var(--bubble-muted, var(--color-muted)); font: inherit; font-size: .68rem; cursor: pointer; }
.theme-switcher button:hover { color: var(--bubble-ink, var(--color-ink)); }
.theme-switcher button[aria-pressed="true"] { background: var(--mode-primary); color: var(--mode-on-primary); }

/* Light mode: warm editorial restraint. */
html[data-theme-effective="light"] .bubble-nav__cta,
html[data-theme-effective="light"] .bubble-button--primary,
html[data-theme-effective="light"] .nav-cta { border-radius: 8px; background: var(--mode-primary); box-shadow: none; color: var(--mode-on-primary); }
html[data-theme-effective="light"] .planning-lanes,
html[data-theme-effective="light"] .pillar-bubble,
html[data-theme-effective="light"] .silo-panel,
html[data-theme-effective="light"] .terms-panel,
html[data-theme-effective="light"] .calculator-card,
html[data-theme-effective="light"] .waterfall-step__panel { box-shadow: none; }
html[data-theme-effective="light"] .bubble-footer { background: var(--mode-footer); }

/* Dark mode: Linear-inspired surface ladder, scarce lavender and hairlines. */
html[data-theme-effective="dark"] body::before { background: linear-gradient(180deg, #0f1011, transparent 30rem); }
html[data-theme-effective="dark"] body::after { opacity: .08; }
html[data-theme-effective="dark"] .bubble-nav__inner,
html[data-theme-effective="dark"] .site-nav__inner { border-color: #23252a; border-radius: 12px; background: rgb(15 16 17 / .92); box-shadow: none; }
html[data-theme-effective="dark"] .bubble-nav__cta,
html[data-theme-effective="dark"] .bubble-button--primary,
html[data-theme-effective="dark"] .nav-cta { border-radius: 8px; background: var(--mode-primary); box-shadow: none; color: white; }
html[data-theme-effective="dark"] .bubble-button:not(.bubble-button--primary) { border-color: #34343a; border-radius: 8px; background: #0f1011; }
html[data-theme-effective="dark"] .planning-lanes { border-color: #23252a; border-radius: 16px; background: #0f1011; box-shadow: none; }
html[data-theme-effective="dark"] .planning-lane { border-color: #23252a; border-left: 3px solid var(--lane-color); border-radius: 10px; background: #141516; box-shadow: none; color: #f7f8f8; }
html[data-theme-effective="dark"] .planning-lane:hover { border-color: #34343a; box-shadow: none; }
html[data-theme-effective="dark"] .pillar-bubble { border-color: #23252a; border-radius: 12px; background: #0f1011; box-shadow: none; }
html[data-theme-effective="dark"] .pillar-bubble__number { border: 1px solid #34343a; border-radius: 8px; background: #141516; box-shadow: inset 3px 0 0 var(--pillar-color); color: #f7f8f8; }
html[data-theme-effective="dark"] .silo-panel,
html[data-theme-effective="dark"] .pillar-directory .silo-panel,
html[data-theme-effective="dark"] .terms-panel,
html[data-theme-effective="dark"] .calculator-card,
html[data-theme-effective="dark"] .waterfall-step__panel { border-color: #23252a; border-radius: 12px; background: #0f1011; box-shadow: none; }
html[data-theme-effective="dark"] .calculator-card__output { border-color: #23252a; background: #141516; }
html[data-theme-effective="dark"] .bubble-band,
html[data-theme-effective="dark"] .related { border: 1px solid #23252a; border-radius: 12px; background: #0f1011; color: #f7f8f8; }
html[data-theme-effective="dark"] .bubble-footer,
html[data-theme-effective="dark"] .directory-footer { background: #010102; }
html[data-theme-effective="dark"] .directory-footer__grid,
html[data-theme-effective="dark"] .bubble-footer__directory { border-color: #23252a; }

.ad-preview[hidden] { display: none !important; }

/* Keep all five calculator in-page links visible on narrow screens. */
@media (max-width: 420px) {
  .page-toc { padding-inline: .35rem; }
  .page-toc > div {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    gap: .1rem;
    overflow: visible;
  }
  .page-toc a {
    min-width: 0;
    justify-content: center;
    padding-inline: .25rem;
    font-size: .68rem;
    white-space: nowrap;
  }
  .page-toc a:nth-child(-n + 3) { grid-column: span 2; }
  .page-toc a:nth-child(n + 4) { grid-column: span 3; }
}
html[data-theme-effective="dark"] .home-hero h1 { font-weight: 600; letter-spacing: -.04em; }

@media (max-width: 1080px) {
  .theme-switcher { margin-left: auto; }
}
@media (max-width: 760px) {
  .theme-switcher__label { display: none; }
  .theme-switcher button { min-width: 2.25rem; padding-inline: .36rem; font-size: .62rem; }
}
@media (max-width: 430px) {
  .theme-switcher { order: 4; width: 100%; margin: .4rem 0 0; justify-content: center; }
  .bubble-nav__inner, .site-nav__inner { flex-wrap: wrap; border-radius: 18px; }
}


/* SharedShell.css */
/* Locked sitewide navbar and footer, promoted from the final homepage. */
.bubble-nav,.bubble-nav *,.bubble-footer,.bubble-footer * { box-sizing:border-box; }
.bubble-nav { position: sticky; z-index: 50; top: 0; padding: .8rem clamp(1rem,4vw,3.5rem); background: color-mix(in srgb,var(--bubble-paper) 84%,transparent); backdrop-filter: blur(18px); }
.bubble-nav__inner { width: min(82rem,100%); min-height: 4rem; display: flex; align-items: center; gap: 1rem; margin: auto; padding: .55rem .65rem .55rem 1rem; border: 1px solid rgb(31 36 48/.10); border-radius: 999px; background: color-mix(in srgb,var(--bubble-paper) 92%,transparent); box-shadow: 0 14px 35px -25px rgb(31 36 48/.45); }
.bubble-nav .brand,.bubble-footer .brand { display:flex; align-items:center; gap:.7rem; color:var(--bubble-ink); font-size:.92rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.bubble-nav .brand__logo,.bubble-footer .brand__logo { display:block; width:180px; height:auto; }
.bubble-nav__links { display:flex; gap:.1rem; margin-left:auto; padding:0; border:0; }
.bubble-nav__links a { padding:.65rem .72rem; border-radius:999px; color:var(--bubble-body); font-size:.79rem; font-weight:600; text-decoration:none; }
.bubble-nav__links a:hover { background:var(--bubble-paper-2); color:var(--bubble-ink); }
.bubble-nav__inner>.theme-switcher { width:auto; display:inline-flex; align-items:center; gap:2px; margin-left:auto; padding:3px; border:1px solid var(--bubble-rule); border-radius:10px; background:var(--bubble-paper-2); }
.bubble-nav__inner>.theme-switcher button { display:grid; width:2.25rem; min-width:2.25rem; height:2.25rem; min-height:2.25rem; place-items:center; border:0; border-radius:7px; padding:0; background:transparent; color:var(--bubble-muted); font-size:0; cursor:pointer; }
.bubble-nav__inner>.theme-switcher button[aria-pressed="true"] { background:var(--mode-primary); color:var(--mode-on-primary); }
.bubble-nav__inner>.theme-switcher svg { width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bubble-nav__menu { display:none; margin-left:0; }
.bubble-nav__menu summary { padding:.65rem .85rem; border-radius:999px; background:var(--bubble-paper-2); color:var(--bubble-ink); font-size:.78rem; font-weight:600; list-style:none; cursor:pointer; }
.bubble-nav__menu summary::-webkit-details-marker { display:none; }
.bubble-nav__panel { position:absolute; top:calc(100% + .35rem); right:clamp(1rem,4vw,3.5rem); width:min(20rem,calc(100vw - 2rem)); display:grid; padding:.7rem; border:1px solid var(--bubble-rule); border-radius:1.25rem; background:var(--bubble-paper); box-shadow:0 24px 60px -25px rgb(31 36 48/.42); }
.bubble-nav__panel a { padding:.8rem; border-radius:.8rem; color:var(--bubble-ink); font-size:.86rem; font-weight:600; text-decoration:none; }

.bubble-footer { background:var(--bubble-ink); color:#fff; font-family:var(--font-brand); }
.bubble-footer>.page { width:min(82rem,calc(100% - clamp(1rem,4vw,3.5rem) - clamp(1rem,4vw,3.5rem))); margin-inline:auto; }
.bubble-footer__inner { padding-block:clamp(4rem,8vw,7rem) 1.5rem; }
.bubble-footer__eyebrow { margin:0 0 1rem; color:#72dca8; font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.bubble-footer__statement { max-width:15ch; margin:0 0 clamp(3rem,6vw,5rem); font-size:clamp(2.4rem,5vw,4.8rem); font-weight:800; letter-spacing:-.04em; line-height:.94; }
.bubble-footer__directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid rgb(255 255 255/.14); }
.bubble-footer .footer-pillar { min-width:0; padding:1.5rem; border-right:1px solid rgb(255 255 255/.14); }
.bubble-footer .footer-pillar:first-child { padding-left:0; }
.bubble-footer .footer-pillar:last-child { padding-right:0; border-right:0; }
.bubble-footer .footer-pillar__title { min-height:0; margin:0 0 1.7rem; padding-bottom:.65rem; border-bottom:2px solid var(--footer-color,#72dca8); color:var(--footer-color,#72dca8); font-size:.94rem; font-weight:600; letter-spacing:.075em; text-transform:uppercase; }
.bubble-footer .footer-silo+.footer-silo { margin-top:1.5rem; }
.bubble-footer .footer-silo h3 { width:fit-content; margin:0 0 .7rem; padding-bottom:.35rem; border-bottom:1px solid rgb(255 255 255/.45); color:rgb(255 255 255/.9); font-size:.86rem; letter-spacing:.075em; text-transform:uppercase; }
.bubble-footer .footer-silo ul { margin:0; padding:0; list-style:none; }
.bubble-footer .footer-silo li+.footer-silo li,.bubble-footer .footer-silo li+li { margin-top:.3rem; }
.bubble-footer .footer-silo a { color:rgb(255 255 255/.82); font-size:.92rem; line-height:1.5; text-decoration:none; }
.bubble-footer a:hover { color:#72dca8; }
.bubble-footer__utility { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1.5rem 0; color:rgb(255 255 255/.7); font-size:.84rem; }
.bubble-footer__utility nav { display:flex; flex-wrap:wrap; gap:1rem; padding:0; border:0; }
.bubble-footer__utility a { color:inherit; text-decoration:none; }
.bubble-footer__fine-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid rgb(255 255 255/.14); }
.bubble-footer__fine { margin:0; color:rgb(255 255 255/.58); font-size:.78rem; line-height:1.5; }
.bubble-footer__resource-links { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:.65rem; color:rgb(255 255 255/.7); font-size:.84rem; }
.cookie-settings { appearance:none; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.cookie-settings:hover,.cookie-settings:focus-visible { color:#72dca8; text-decoration:underline; }
.consent-banner { position:fixed; z-index:100; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); width:min(31rem,calc(100% - 2rem)); padding:1.25rem; border:1px solid var(--bubble-rule); border-radius:1rem; background:var(--bubble-paper); color:var(--bubble-ink); box-shadow:0 20px 60px rgb(0 0 0/.22); }
.consent-banner h2,.consent-dialog h2 { margin:.15rem 0 .45rem; font-size:1.2rem; }
.consent-banner p { margin:.35rem 0; font-size:.88rem; line-height:1.5; }
.consent-kicker { margin:0; color:var(--bubble-muted); font-size:.7rem!important; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.consent-links { font-size:.82rem!important; }
.consent-links a { color:inherit; font-weight:700; }
.consent-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1rem; }
.consent-actions .button--quiet { padding:.65rem .8rem; border:1px solid var(--bubble-rule); color:var(--bubble-ink); }
.consent-dialog { width:min(38rem,calc(100% - 2rem)); max-height:calc(100% - 2rem); padding:0; border:0; border-radius:1rem; background:var(--bubble-paper); color:var(--bubble-ink); box-shadow:0 24px 80px rgb(0 0 0/.38); }
.consent-dialog::backdrop { background:rgb(0 0 0/.54); }
.consent-dialog__card { padding:clamp(1.25rem,4vw,2rem); }
.consent-dialog__header { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.consent-close { width:2.5rem; height:2.5rem; border:1px solid var(--bubble-rule); border-radius:50%; background:transparent; color:inherit; font-size:1.5rem; cursor:pointer; }
.consent-dialog fieldset { display:grid; gap:.65rem; margin:1.25rem 0 0; padding:.85rem 0 0; border:0; border-top:1px solid var(--bubble-rule); }
.consent-dialog legend { padding:0; font-weight:700; }
.consent-option { display:flex; gap:.75rem; align-items:flex-start; padding:.8rem; border:1px solid var(--bubble-rule); border-radius:.75rem; cursor:pointer; }
.consent-option input { width:1.15rem; height:1.15rem; margin:.1rem 0 0; accent-color:var(--mode-primary); }
.consent-option b,.consent-option small { display:block; }
.consent-option small { margin-top:.18rem; color:var(--bubble-muted); line-height:1.4; }
@media (max-width:600px) { .consent-banner { right:0; bottom:0; width:100%; border-radius:1rem 1rem 0 0; } .consent-actions > * { flex:1 1 auto; } .consent-dialog { width:100%; max-height:88vh; margin:auto 0 0; border-radius:1rem 1rem 0 0; } }
html[data-theme-effective="light"] .bubble-footer { background:#faf9f5; color:#141413; }
html[data-theme-effective="light"] .bubble-footer a,html[data-theme-effective="light"] .bubble-footer a:hover { color:#141413; }
html[data-theme-effective="light"] .bubble-footer__eyebrow { color:#cc785c; }
html[data-theme-effective="light"] .bubble-footer__directory,html[data-theme-effective="light"] .bubble-footer .footer-pillar,html[data-theme-effective="light"] .bubble-footer__fine-row { border-color:rgb(20 20 19/.14); }
html[data-theme-effective="light"] .bubble-footer .footer-silo h3 { border-bottom-color:rgb(20 20 19/.35); color:#3d3d3a; }
html[data-theme-effective="light"] .bubble-footer__utility { color:#3d3d3a; }
html[data-theme-effective="light"] .bubble-footer__resource-links { color:#3d3d3a; }
html[data-theme-effective="light"] .bubble-footer__fine { color:#6c6a64; }
html[data-theme-effective="dark"] .bubble-nav__inner { border-color:#23252a; border-radius:12px; background:rgb(15 16 17/.92); box-shadow:none; }
html[data-theme-effective="dark"] .bubble-footer { background:#010102; }

@media (max-width:1080px) {
  .bubble-nav__links { display:none; }
  .bubble-nav__menu { display:block; }
  .bubble-footer__directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bubble-footer .footer-pillar:nth-child(2) { border-right:0; }
}
@media (max-width:760px) {
  .bubble-footer__directory { display:block; }
  .bubble-footer .footer-pillar,.bubble-footer .footer-pillar:first-child,.bubble-footer .footer-pillar:last-child { padding:1rem 0; border-right:0; border-bottom:1px solid rgb(255 255 255/.14); }
  .bubble-footer__utility { align-items:flex-start; flex-direction:column; }
  .bubble-footer__fine-row { align-items:flex-start; flex-direction:column; }
}
@media (max-width:430px) {
  .bubble-nav { padding-inline:.55rem; }
  .bubble-nav__inner { min-height:3.5rem; flex-wrap:nowrap; gap:.4rem; padding-left:.7rem; }
  .bubble-nav__inner .brand { font-size:.76rem; }
  .bubble-nav__inner .brand__logo { width:150px; }
  .bubble-nav__inner>.theme-switcher { order:initial; width:auto; margin-left:auto; padding:2px; }
  .bubble-nav__inner>.theme-switcher button { width:1.9rem; min-width:1.9rem; height:1.9rem; min-height:1.9rem; }
  .bubble-nav__menu summary { padding:.55rem .62rem; }
}
@media (max-width:360px) {
  .bubble-nav__inner .brand__logo { width:128px; }
}