@layer reset, base, catalogue, components, product, responsive;
@layer catalogue {
/* Correctness only. Palette, type and spacing come from the site.
   Every interactive element here takes its height from the box rather than from
   inline padding: padding on a short nav link makes it paint past its <nav>,
   measured on the live site. */
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(100% - 2rem, 88rem);
  min-block-size: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* 44px minimum, from the box. WCAG 2.5.8 exempts an inline anchor inside a <p>
   or <li> and nothing else. */
.site-header nav a, .site-header .brand, footer a, footer .brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

footer {
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 1.4rem; }
.copyright { grid-column: 1 / -1; }

@media (max-width: 38rem) {
  .site-header { min-block-size: 4.5rem; }
  footer { grid-template-columns: 1fr; }
}

/* The art is sized against its own grid column, never the viewport. `47vw` is
   unrelated to the track it sits in; at 834px and 1280px it grew past the column
   and the hero's overflow clipped it. Firefox reported it, the other two engines
   hid it behind the same clip. */
.hero {
  width: min(100% - 2rem, 88rem);
  min-block-size: min(49rem, calc(100vh - 5.5rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
.hero-art { width: min(100%, 38rem); justify-self: center; }
.hero-art svg { overflow: visible; }

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
    padding-block-end: 2rem;
    text-align: start;
  }
  /* Copy first, art after. Caught by looking at the frame: with the art in row
     one it took the whole first screen of an iPhone and pushed the headline,
     the lead and the call to action below the fold -- the exact anti-pattern
     this block exists to prevent, in the block itself. It is decoration; it
     goes last and it shrinks first. */
  .hero-art { grid-row: 2; width: min(70vw, 26rem); justify-self: start; }
}
@media (max-width: 38rem) {
  /* Measured: a 3rem headline wrapped to three lines at 390px and pushed the
     whole page down with it. */
  .hero h1 { font-size: 2.5rem; }
  .hero-art { width: min(56vw, 15rem); }
}

/* The form is the layout. `form-heading` spans every column so the title reads
   as the form's own header rather than a separate section above it. */
.tool-section {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 9rem) max(1rem, calc((100vw - 88rem) / 2));
  overflow: hidden;
}
.tool-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4rem;
}
.form-heading { grid-column: 1 / -1; max-width: 49rem; margin-block-end: 2.1rem; }
.form-action { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; margin-block-start: 1.2rem; }
/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

fieldset { min-inline-size: 0; }

@media (max-width: 52rem) {
  .tool-form { grid-template-columns: 1fr; }
}

/* The field must work with no spinner affordance: Mobile Safari does not draw
   one. Removing it elsewhere keeps typing, paste and the mobile inputmode as
   the only interaction contract on every engine. */
.numeric-field { min-inline-size: 0; }
.numeric-field-control {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.numeric-field input[type="number"] {
  -moz-appearance: textfield;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.numeric-field input[type="number"]::-webkit-inner-spin-button,
.numeric-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-field-unit {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: .65rem;
  white-space: nowrap;
}
.numeric-field-unit:empty { display: none; }

/* WebKit will not give a <select> the height you ask for while it still owns
   the rendering. Measured on the catalogue proof page: `min-block-size: 3.4rem`
   was honoured in Chromium and Firefox and ignored in WebKit, which kept the
   native control under 44px on all eight phone descriptors -- the same class of
   defect as the date field, on the plainest control there is.
   `appearance: none` hands sizing back to CSS, and then the chevron has to be
   drawn, because removing the appearance removes the native one too. */
.select-field { position: relative; min-inline-size: 0; }
.select-field select {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: 3.4rem;
  padding-inline: .85rem 2.1rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  text-overflow: ellipsis;
  font: inherit;
}
/* The open list is drawn by the OS in the system palette; naming both keeps it
   readable on a dark page. */
.select-field option { background: var(--panel); color: var(--ink); }

/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

/* The card grid uses six tracks so five cards break 3 + 2 rather than leaving a
   hole in the second row. The border rules assume exactly five; adding or
   removing a card means revisiting them. */
.result { overflow: hidden; }
.result-intro { padding: clamp(1.5rem, 5vw, 3.5rem); }
.result-subject { margin-block: 1.4rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.score-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }

.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.result-grid article { grid-column: span 2; min-block-size: 15rem; padding: 2rem; }
.result-grid article:nth-child(4), .result-grid article:nth-child(5) { grid-column: span 3; }

.result-actions { padding: 1.2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 48rem) {
  /* Stacked, the 3 + 2 spans stop meaning anything, and `span 2` against a
     single track would invent columns. Undo both at the same specificity. */
  .result-grid { grid-template-columns: 1fr; }
  .result-grid article,
  .result-grid article:nth-child(4),
  .result-grid article:nth-child(5) { grid-column: auto; min-block-size: auto; }
  .score-wrap { grid-template-columns: 1fr; }
  /* Long subjects wrap: two long names plus a mark between them do not fit a
     phone, and the type is already at its floor. */
  .result-subject { flex-direction: column; align-items: stretch; gap: .5rem; }
  .result-actions { flex-direction: column; }
}

.table-wrap { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
table { inline-size: 100%; border-collapse: collapse; }
caption { text-align: start; color: var(--ink-muted); padding-block-end: .5rem; }
/* Cells WRAP. `white-space: nowrap` used to be set on every cell here, which is
   right for a figure and wrong for a sentence: it clipped a prose column behind
   the wrapper's own scrollbar at 390px AND at 1280px, so widening the window did
   not reveal it. A prose column generally does not belong in a table at all --
   but when one is there, the table must not hide it. */
th, td { padding: .7rem .9rem; text-align: start; border-block-end: 1px solid var(--line); }
/* Figures must not dance as they change, and columns must not resize per row, so
   `nowrap` belongs here: scoped to the cells that carry a measurement. */
td.figure, th.figure, .table-wrap .figure { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

.row-list-panel { display: grid; gap: .4rem; }
.row-list-heading { margin: 0; }
/* Forty rows must not own the page. */
.row-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-block-size: 22rem; overflow-y: auto; }
.row-list li {
  display: flex;
  /* Measured at 320px: a name and a measurement that cannot share a line pushed
     the document 2px wider than the viewport. The measurement takes the next
     line instead. Never `flex: none` on the value -- that is the construction
     that spilled. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .1rem .75rem;
  padding-block: .45rem;
  border-block-end: 1px solid var(--line);
}
.row-list li:last-child { border-block-end: 0; }
/* The name is the part allowed to shrink and to break: file names have no
   spaces in them and a `1fr` track keeps a min-content floor unless told
   otherwise. */
.row-list li > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.row-value {
  margin-inline-start: auto;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* The zero minimum is structural. Without it, a long token in an answer gives
   the grid item an intrinsic minimum wider than its column and the page grows
   beyond a phone viewport. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card, 1.25rem);
}
.faq-item { min-inline-size: 0; }
.faq-item p { overflow-wrap: anywhere; }

@media (max-width: 44rem) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-list li { display: inline-flex; min-inline-size: 0; align-items: center; }
.breadcrumb-list li + li::before { content: "/"; margin-inline-end: .45rem; }
.breadcrumb-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumb-list span { overflow-wrap: anywhere; }

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-section, 2rem);
}
.sitemap-group { min-inline-size: 0; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { min-inline-size: 0; }
.sitemap-group a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  overflow-wrap: anywhere;
}
.sitemap-group p { overflow-wrap: anywhere; }

/* Legal pages are long prose; the only rule that keeps them correct is measure.
   Anything past ~70 characters a line becomes unreadable, and these are the
   pages a reviewer actually reads. */
.legal-page { max-inline-size: 44rem; }
.legal-page h2 { margin-block-start: 2.5rem; }
.legal-page p + p { margin-block-start: 1rem; }

/* Reserved height per breakpoint, before anything loads.
   A slot with no unit wired yet renders nothing at all rather than an empty
   frame -- an ad-shaped hole reads as a broken page. */
.sf-adslot { display: block; margin-block: 2.5rem; }
.sf-adslot[data-ad-unit=""] { display: none; }
.sf-adslot ins { display: block; inline-size: 100%; }

/* Per-vertical schemes. Divergence is the product: a fleet that shares one look
   reads as spam, to people and to reviewers. Pick one set, then let the site
   diverge further.

   Every set defines the same names, so blocks never learn a site's colours. */

/* esoteric -- atmospheric, dark, warm accent against violet */
.palette-esoteric {
  --ink: #f8f0e7; --ink-muted: #bcb1c5;
  --surface: #17131f; --surface-deep: #0e0b14; --panel: #211a2b;
  --line: rgba(248, 240, 231, .14);
  --accent: #ff806a; --accent-bright: #ff9b86; --highlight: #f2d89c;
  --bg-a: rgba(255,128,106,.17); --bg-b: rgba(155,134,255,.16); --bg-c: rgba(242,216,156,.11);
  --bg-line: rgba(255,255,255,.025);
}
/* utilitarian -- converters, upscalers: light, fast, no atmosphere */
.palette-utility {
  --ink: #101418; --ink-muted: #5b6673;
  --surface: #ffffff; --surface-deep: #f4f6f8; --panel: #ffffff;
  --line: rgba(16, 20, 24, .12);
  --accent: #1f6feb; --accent-bright: #3b82f6; --highlight: #0ea5e9;
  --bg-a: rgba(31,111,235,.06); --bg-b: rgba(14,165,233,.05); --bg-c: transparent;
  --bg-line: rgba(16,20,24,.035);
}
/* data-dense -- finance: high contrast, restrained, numbers first */
.palette-data {
  --ink: #0b0f14; --ink-muted: #59636e;
  --surface: #f7f9fb; --surface-deep: #eef2f6; --panel: #ffffff;
  --line: rgba(11, 15, 20, .14);
  --accent: #0f766e; --accent-bright: #14b8a6; --highlight: #b45309;
  --bg-a: rgba(15,118,110,.05); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(11,15,20,.04);
}
/* documents -- invoices, quotes: clean, printable, trustworthy */
.palette-document {
  --ink: #1a1a1a; --ink-muted: #6b6b6b;
  --surface: #fbfaf7; --surface-deep: #f3f1ec; --panel: #ffffff;
  --line: rgba(26, 26, 26, .13);
  --accent: #1d4ed8; --accent-bright: #2563eb; --highlight: #92400e;
  --bg-a: rgba(29,78,216,.04); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(26,26,26,.03);
}

/* Font pairings that survive 320px and need no web font to look deliberate.
   System stacks on purpose: a webfont on a tool page costs the first paint the
   visitor came for, and every one of these renders on iOS and Android already.

   Pick one set. `--display` carries the personality, `--ui` carries the work. */

/* editorial -- esoteric, psychometrics: an old-style serif against a neutral UI */
.type-editorial {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-tracking: -.04em;
}
/* technical -- converters, upscalers: one family, tight, no ornament */
.type-technical {
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-tracking: -.02em;
}
/* ledger -- finance, documents: figures must align, so the numeric face matters */
.type-ledger {
  --display: ui-serif, Georgia, "Times New Roman", serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --numeric: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-tracking: -.01em;
}
/* Figures in tables and results must not dance as they change. */
.type-ledger .figure, .figure { font-variant-numeric: tabular-nums; }

/* 44px is the documented minimum. Inline anchors inside a <p> or <li> are
   exempt (WCAG 2.5.8) because padding them wrecks the surrounding line height. */
.text-button, nav a, footer a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* `[hidden]` LOSES TO AN AUTHOR `display` AT EQUAL SPECIFICITY.
 *
 * The user-agent rule is `[hidden] { display: none }`. An author rule such as
 * `.card { display: grid }` has the SAME specificity (0,1,0) and comes from a
 * later origin, so the element stays on screen with the attribute set. The DOM
 * inspector shows `hidden`. Every unit test that reads the markup passes. It is
 * visible in the browser and nowhere else.
 *
 * That cost one site three separate defects in one build:
 *
 *   1. a page-range field with `display: grid` stayed on screen in "every page"
 *      mode, in all three engines, with `hidden` set;
 *   2. a featured card with `display: grid` stayed on screen in every filtered
 *      view that excluded it -- caught in the first phone screenshot, not by any
 *      test;
 *   3. a group heading with `display: block` re-declared inside
 *      `@media (min-width: 64rem)` stayed on screen under a filter, because the
 *      site-wide guard had EQUAL specificity and appeared EARLIER in the file.
 *
 * Number 3 is the one that makes this a stylesheet rather than a habit: writing
 * the guard once at the top does not survive a media query.
 *
 * This declaration is the whole fix, and `!important` is the point of it -- it
 * is the one place in a stylesheet where a blanket win is the correct answer,
 * because there is no legitimate reading of `hidden` other than "not rendered".
 * A site that prefers per-class guards may do that instead; the block's
 * invariants accept either, and require the LIST OF HIDEABLE CLASSES TO BE
 * ASSERTED BY NAME, because remembering it is what failed three times. */
[hidden] { display: none !important; }

/* FULL BLEED IS A PROPERTY OF THE CONTAINER, NEVER OF THE CHILD.
 *
 * The tempting construction is a child that breaks out of its padded parent:
 *
 *     .page-image { inline-size: 100vw; margin-inline: calc(50% - 50vw); }
 *
 * That child is wider than its parent by construction, and the responsive
 * matrix reports it as a spill on every device in all three engines --
 * correctly, because it is also exactly how a page starts scrolling sideways.
 * `100vw` compounds it: on any platform that reserves a classic scrollbar
 * gutter, 100vw is WIDER THAN THE VIEWPORT, so the page overflows even when the
 * arithmetic looks symmetrical.
 *
 * The answer is the other way round: at the width where an element should reach
 * the edges, THE CONTAINER GIVES UP ITS GUTTERS, and the siblings that still
 * want them take them back. Nothing is ever wider than its parent, so there is
 * nothing for the matrix to report and nothing for a thumb to discover.
 *
 * A negative inline margin is still legitimate where it is paid straight back --
 * `margin-inline: -1rem; padding-inline: 1rem` inside a parent with a 1rem
 * gutter reaches the parent's padding box and no further. The invariants reject
 * the breakout idiom, not every negative margin. */
.bleed { --bleed-gutter: clamp(.85rem, 3vw, 1.5rem); padding-inline: var(--bleed-gutter); }
.bleed > * { max-inline-size: 100%; }

@media (max-width: 30rem) {
  /* The container drops its gutters... */
  .bleed[data-bleed="edge"] { padding-inline: 0; }
  /* ...and everything that is not the bleeding child takes them back. */
  .bleed[data-bleed="edge"] > :not([data-bleed-child]) { padding-inline: var(--bleed-gutter); }
}

}
[hidden] { display: none !important; }

@layer reset, base, components, product, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; }
  body, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
  .palette-cuptune {
    --ink: #17352d;
    --ink-soft: #3e574f;
    --ink-muted: #586d64;
    --surface: #f7f2e9;
    --surface-deep: #e9dfcf;
    --panel: #fffdf8;
    --panel-strong: #f2e8d9;
    --line: rgba(23, 53, 45, .16);
    --line-strong: rgba(23, 53, 45, .34);
    --accent: #b95832;
    --accent-bright: #d8764f;
    --accent-soft: #f4d4bf;
    --highlight: #d49c4b;
    --green: #245447;
    --green-deep: #112d25;
    --cream: #f7f2e9;
    --shadow: 0 22px 70px rgba(54, 43, 27, .11);
    --shadow-tight: 0 10px 28px rgba(54, 43, 27, .10);
    --radius: 1.35rem;
    --radius-small: .8rem;
    --space-card: clamp(1rem, 2.5vw, 1.6rem);
  }
  .type-cuptune {
    --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    --numeric: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  body {
    min-inline-size: 320px;
    min-block-size: 100vh;
    color: var(--ink);
    background:
      radial-gradient(circle at 8% 2%, rgba(212, 156, 75, .18), transparent 25rem),
      radial-gradient(circle at 96% 24rem, rgba(36, 84, 71, .12), transparent 30rem),
      var(--surface);
    font-family: var(--ui);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: clip;
  }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
  h1 { font-size: clamp(2.7rem, 7vw, 6.6rem); }
  h2 { font-size: clamp(2rem, 4.5vw, 3.8rem); }
  h3 { font-size: clamp(1.35rem, 2.5vw, 2rem); }
  p, li, dd { color: var(--ink-soft); }
  a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
  a:hover { color: var(--accent); }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  code, .figure { font-family: var(--numeric); font-variant-numeric: tabular-nums; }
  .eyebrow { color: var(--accent); font-family: var(--numeric); font-size: .75rem; font-weight: 700; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
  .lead { max-inline-size: 52rem; font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.55; }
  .section-wrap { width: min(100% - 2rem, 80rem); margin-inline: auto; padding-block: clamp(4rem, 9vw, 8rem); }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-block-end: 2rem; }
  .section-heading .eyebrow + h2, .page-intro .eyebrow + h1, .recipe-detail .eyebrow + h1 { margin-block-start: 1rem; }
  .button {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .72rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 253, 248, .65);
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
  }
  .button:hover { color: var(--ink); background: var(--panel); border-color: var(--ink); }
  .button-primary { color: #fffaf2; background: var(--accent); border-color: var(--accent); box-shadow: 0 7px 20px rgba(185, 88, 50, .22); }
  .button-primary:hover { color: white; background: #994422; border-color: #994422; }
  .text-button { background: transparent; border-color: transparent; text-decoration: underline; }
  .danger { color: #9a2f2f; }
  label, legend { color: var(--ink); font-weight: 700; }
  input, select, textarea {
    inline-size: 100%; min-block-size: 48px; padding: .75rem .85rem;
    border: 1px solid var(--line-strong); border-radius: .65rem;
    color: var(--ink); background: rgba(255, 253, 248, .82);
  }
  textarea { resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
  .field-hint { margin-block-start: .35rem; color: var(--ink-muted); font-size: .84rem; line-height: 1.35; }
  .form-error { margin-block-start: .55rem; color: #a1392d; font-weight: 650; }
}

@layer components {
  .skip-link { color: white; background: var(--green-deep); border-radius: .5rem; }
  .site-header {
    position: relative; z-index: 10; padding-block: .75rem;
    border-block-end: 1px solid var(--line);
  }
  .brand { gap: .7rem; font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
  .brand-mark { position: relative; inline-size: 2rem; block-size: 2rem; border: 2px solid currentColor; border-radius: 50%; }
  .brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: currentColor; }
  .brand-mark::before { inline-size: .55rem; block-size: .12rem; inset: .35rem auto auto .7rem; transform: rotate(-45deg); transform-origin: 100% 50%; }
  .brand-mark::after { inline-size: .28rem; block-size: .28rem; inset: .74rem auto auto .74rem; border-radius: 50%; }
  .site-header nav a { color: var(--ink-soft); font-size: .9rem; font-weight: 700; text-decoration: none; }
  .site-header nav a:hover { color: var(--accent); }
  footer { padding-block: 4rem calc(2rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line); }
  footer p { max-inline-size: 30rem; }
  .footer-links { max-inline-size: 42rem; justify-content: end; }
  .footer-links a { color: var(--ink-muted); font-size: .88rem; text-decoration: none; }
  .copyright { color: var(--ink-muted); font-size: .8rem; }
  .breadcrumbs { width: min(100% - 2rem, 80rem); margin: 1rem auto 0; gap: .4rem; }
  .breadcrumb-list { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; list-style: none; font-size: .82rem; }
  .breadcrumb-list li:not(:last-child)::after { content: "/"; margin-inline-start: .35rem; color: var(--ink-muted); }
  .breadcrumb-list a { min-block-size: 44px; display: inline-flex; align-items: center; }
  .hero { min-block-size: clamp(35rem, 72vh, 46rem); }
  .hero-copy { padding-block: clamp(3.5rem, 10vh, 7rem); }
  .hero h1 { max-inline-size: 11ch; margin-block: 1rem 1.4rem; }
  .hero-lead { max-inline-size: 43rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }
  .hero .button { margin-block-start: 2rem; }
  .privacy-note { margin-block-start: 1rem; max-inline-size: 37rem; color: var(--ink-muted); font-size: .88rem; }
  .dial-art { overflow: visible; color: var(--green); filter: drop-shadow(0 25px 35px rgba(23, 53, 45, .14)); }
  .dial-art circle:first-child { fill: var(--panel); stroke: var(--green); stroke-width: 3; }
  .dial-art circle:nth-child(2), .dial-art > path:not(.dial-needle) { fill: none; stroke: var(--line-strong); stroke-width: 2; }
  .dial-art .dial-needle { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; }
  .dial-art .dial-center { fill: var(--highlight); stroke: var(--green-deep); stroke-width: 4; }
  .dial-art text { fill: var(--green); font-family: var(--numeric); font-size: 17px; font-weight: 700; letter-spacing: .16em; }
  .page-intro { width: min(100% - 2rem, 80rem); margin-inline: auto; padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem); }
  .page-intro h1 { max-inline-size: 15ch; }
  .page-intro .lead { margin-block-start: 1.5rem; }
  .tool-section { background: var(--green-deep); color: white; }
  .tool-section h2, .tool-section label { color: white; }
  .tool-section p { color: rgba(255, 255, 255, .72); }
  .tool-section .eyebrow { color: #f0b978; }
  .tool-form { width: min(100%, 80rem); margin-inline: auto; }
  .calculator-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .numeric-field, .calculator-fields > div { padding: 1rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 1rem; background: rgba(255, 255, 255, .055); }
  .numeric-field-control { margin-block-start: .45rem; }
  .numeric-field input, .select-field select { color: var(--ink); background-color: #fffdf8; }
  .numeric-field-unit { color: var(--ink); background: #efe2cf; border: 1px solid var(--line-strong); border-inline-start: 0; border-radius: 0 .65rem .65rem 0; }
  .numeric-field input { border-radius: .65rem 0 0 .65rem; }
  .form-action .button-primary { min-inline-size: min(100%, 18rem); }
  .result { width: min(100%, 80rem); margin: clamp(2rem, 5vw, 4rem) auto 0; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: #f7f2e9; color: var(--ink); box-shadow: 0 24px 70px rgba(0,0,0,.22); }
  .result p { color: var(--ink-soft); }
  .result .eyebrow { color: var(--accent); }
  .score-figure { font-family: var(--display); font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -.05em; }
  .result-grid article { border-block-start: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
  .result-grid article:nth-child(3), .result-grid article:nth-child(5) { border-inline-end: 0; }
  .result-grid h3 { margin-block-end: .8rem; font-size: 1.25rem; }
  .result-actions { border-block-start: 1px solid var(--line); align-items: center; }
  .faq { padding-block: 1rem; }
  .faq > h2 { margin-block-end: 2rem; }
  .faq-item { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: rgba(255,253,248,.5); }
  .faq-item h3 { margin-block-end: .7rem; font-size: 1.25rem; }
  .legal-page { margin-inline: auto; }
  .legal-page h1 { margin-block: 1rem 1.5rem; }
  .legal-lead { font-size: 1.25rem; }
  .legal-updated { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
  .support-block { max-inline-size: 44rem; margin-inline: auto; display: grid; gap: .75rem; }
  .support-block h2:not(:first-child) { margin-block-start: 2rem; }
  .html-sitemap h1, .html-sitemap > p { margin-block-end: 1.5rem; }
  .sitemap-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sitemap-group { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-small); }
  .sitemap-group ul { padding-inline-start: 1.2rem; }
  .sitemap-group li { margin-block-start: 1rem; }
  .sf-adslot { width: min(100% - 2rem, 64rem); min-block-size: 280px; margin-inline: auto; contain: layout size paint; border-block: 1px solid var(--line); }
  .sf-adslot[data-ad-unit=""] { min-block-size: 0; border: 0; }
}

@layer product {
  .workflow { padding-block-start: clamp(4rem, 9vw, 7rem); }
  .workflow > h2 { margin-block: 1rem 2.5rem; }
  .workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .workflow-grid li { min-inline-size: 0; padding: 1.4rem; background: var(--panel); }
  .workflow-grid strong { color: var(--accent); font-family: var(--numeric); font-size: .8rem; }
  .workflow-grid h3 { margin-block: 2rem .8rem; }
  .resume-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-block-start: 1rem; padding: 1.5rem; border-radius: var(--radius); color: white; background: var(--green); }
  .resume-card h3, .resume-card p { color: white; }
  .resume-card .eyebrow { color: #f0c287; }
  .resume-card .button { color: white; border-color: rgba(255,255,255,.5); background: transparent; }
  .status-dot { display: inline-block; inline-size: .6rem; block-size: .6rem; margin-inline-end: .4rem; border-radius: 50%; background: #f0c287; box-shadow: 0 0 0 .3rem rgba(240,194,135,.16); }
  .split-story { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(2rem, 8vw, 7rem); }
  .split-story h2 { margin-block: 1rem 1.4rem; }
  .formula-card { display: grid; grid-template-columns: 1fr auto; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: var(--shadow); }
  .formula-card > * { padding: 1.2rem; background: var(--panel); }
  .formula-card span { color: var(--ink-muted); font-family: var(--numeric); font-size: .82rem; }
  .formula-card strong { color: var(--accent); font-family: var(--display); font-size: 1.6rem; }
  .cold-tool { padding-block-start: 2rem; }
  .result-simple { width: min(100%, 80rem); margin: 3rem auto 0; padding: clamp(1.5rem, 4vw, 3rem); }
  .result-simple h2 { margin-block: .8rem 1.5rem; }
  .result-simple dl, .recipe-spec dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-block: 1.5rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-small); overflow: hidden; }
  .result-simple dl div, .recipe-spec dl div { padding: 1rem; background: var(--panel); }
  dt { color: var(--ink-muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  dd { margin-block-start: .25rem; color: var(--ink); font-family: var(--numeric); font-weight: 700; }
  .prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .prose-grid article { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,.5); }
  .prose-grid h2 { margin-block-end: 1rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
  .timer-shell { padding-block-start: 1rem; }
  .timer-setup { max-inline-size: 48rem; margin: 0 auto 1rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .75rem; }
  .timer-setup > label { grid-column: 1 / -1; }
  .timer-stage { position: relative; isolation: isolate; display: grid; justify-items: center; padding: clamp(2rem, 7vw, 5rem); border-radius: 2rem; color: white; background: var(--green-deep); overflow: hidden; text-align: center; }
  .timer-stage p { color: rgba(255,255,255,.72); }
  .timer-stage .eyebrow { color: #f0c287; }
  .timer-orbit { position: absolute; z-index: -1; inline-size: min(80vw, 36rem); aspect-ratio: 1; inset: 50% auto auto 50%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; transform: translate(-50%, -50%); }
  .timer-orbit::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.1); border-radius: inherit; }
  .timer-orbit span { position: absolute; inline-size: .8rem; block-size: .8rem; inset: -.4rem auto auto 50%; border-radius: 50%; background: #efb46b; box-shadow: 0 0 0 .45rem rgba(239,180,107,.15); transform: translateX(-50%) rotate(calc(var(--timer-progress, 0) * 360deg)); transform-origin: 50% calc(min(80vw, 36rem) / 2 + .4rem); }
  .timer-time { margin-block: 1rem; color: white !important; font-size: clamp(4rem, 15vw, 9rem); line-height: 1; letter-spacing: -.07em; }
  .timer-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block: 2rem 1rem; }
  .timer-stage .button:not(.button-primary) { color: white; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
  .timer-notice { min-block-size: 1.6rem; }
  .timer-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-block-start: 1rem; padding: 0; list-style: none; }
  .timer-steps li { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
  .timer-steps li[aria-current="step"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .timer-steps span { color: var(--accent); font-family: var(--numeric); font-size: .76rem; }
  .library-controls { max-inline-size: 38rem; margin-block-end: 2rem; }
  .library-controls input { margin-block: .5rem; }
  .recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .recipe-card { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-tight); }
  .recipe-card h2 { margin-block: .8rem 1rem; font-size: clamp(1.7rem, 3vw, 2.6rem); }
  .recipe-card dl { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin-block: 1.5rem; }
  .recipe-card dd { margin: 0; }
  .recipe-actions, .storage-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
  .local-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; border-block-start: 1px solid var(--line); }
  .local-editor h2 { margin-block: 1rem; }
  .local-editor form { display: grid; align-content: start; gap: .65rem; }
  .recipe-detail header { max-inline-size: 58rem; }
  .recipe-detail .lead { margin-block-start: 1.5rem; }
  .recipe-spec { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; margin-block: 3rem; }
  .recipe-spec dl { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
  .method-steps { max-inline-size: 54rem; margin-block: 2rem 4rem; padding: 0; list-style: none; }
  .method-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.25rem; border-block-end: 1px solid var(--line); }
  .method-steps > li > span { color: var(--accent); font-family: var(--numeric); font-weight: 700; }
  .journal-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .5fr); align-items: start; gap: 1rem; padding-block-start: 1rem; }
  .journal-form, .storage-panel { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .journal-form h2, .storage-panel h2 { margin-block: .8rem 1.5rem; }
  .journal-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; margin-block-end: 1rem; }
  .journal-fields label { display: grid; gap: .35rem; }
  .journal-fields .wide { grid-column: 1 / -1; }
  .storage-panel { position: sticky; inset-block-start: 1rem; }
  .storage-actions { margin-block-start: 1.2rem; }
  .file-button { position: relative; overflow: hidden; }
  .file-button input { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); }
  .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--panel); }
  th { color: var(--ink); font-size: .82rem; }
  .comparison { margin-block-start: 1rem; padding: 1.5rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel); }
  .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .comparison-grid div { padding: .8rem; border-block-end: 1px solid var(--line); }
  .comparison-grid .changed { background: var(--accent-soft); }
  .coach-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block-start: 1rem; }
  .coach-shell > * { padding: clamp(1.3rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .coach-shell fieldset { margin: 0 0 1.2rem; padding: 0; border: 0; }
  .coach-shell legend { margin-block-end: .7rem; }
  .coach-shell fieldset:first-child label { display: inline-flex; min-block-size: 44px; align-items: center; gap: .5rem; margin-inline-end: 1rem; }
  .coach-shell input[type="radio"], .coach-shell input[type="checkbox"] { inline-size: 1.15rem; min-block-size: 1.15rem; }
  .symptom-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
  .symptom-grid label { min-block-size: 48px; display: flex; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; }
  .coach-result h2 { margin-block: .8rem; }
  .coach-direction { color: var(--accent); font-family: var(--numeric); font-weight: 700; }
  .limits { margin-block: 1.5rem; padding: 1rem; border-inline-start: 3px solid var(--highlight); background: var(--panel-strong); }
  .method-page { margin-inline: auto; }
  .method-page h2 { margin-block: 2.5rem 1rem; }
  .method-page li + li { margin-block-start: .6rem; }
  .longform { max-inline-size: 50rem; }
  .longform h2 { margin-block: 3rem 1rem; }
  .longform h2:first-child { margin-block-start: 0; }
  .not-found { min-block-size: 65vh; display: grid; align-content: center; justify-items: start; }
  .not-found h1 { max-inline-size: 13ch; margin-block: 1rem 1.5rem; }
  .not-found > div { display: flex; gap: .7rem; margin-block-start: 2rem; }
}

@layer responsive {
  @media (max-width: 70rem) {
    .workflow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .journal-layout { grid-template-columns: 1fr; }
    .storage-panel { position: static; }
  }
  @media (max-width: 52rem) {
    .hero-art { justify-self: center; }
    .calculator-fields { grid-template-columns: 1fr 1fr; }
    .timer-steps { grid-template-columns: 1fr 1fr; }
    .recipe-spec { grid-template-columns: 1fr; }
    .recipe-spec .button { justify-self: start; }
    .coach-shell, .split-story { grid-template-columns: 1fr; }
  }
  @media (max-width: 44rem) {
    .section-heading, .resume-card { align-items: stretch; flex-direction: column; }
    .calculator-fields, .workflow-grid, .recipe-grid, .local-editor, .prose-grid, .journal-fields, .result-simple dl, .sitemap-groups { grid-template-columns: minmax(0,1fr); }
    .journal-fields .wide { grid-column: auto; }
    .result-grid article { border-inline-end: 0; }
    .timer-setup { grid-template-columns: 1fr; }
    .timer-setup > label { grid-column: auto; }
    .timer-steps { grid-template-columns: 1fr; }
    .recipe-spec dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .symptom-grid { grid-template-columns: 1fr; }
    .comparison-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 38rem) {
    .site-header { gap: .7rem; }
    .site-header nav { gap: .75rem; }
    .site-header nav a:nth-child(2), .site-header nav a:nth-child(4) { display: none; }
    .brand { font-size: 1.25rem; }
    .brand-mark { inline-size: 1.7rem; block-size: 1.7rem; }
    .hero-copy { padding-block: 3.5rem 1rem; }
    .hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
    .hero-art { justify-self: center; }
    .calculator-fields { grid-template-columns: 1fr; }
    .tool-section { padding-inline: 1rem; }
    .recipe-spec dl { grid-template-columns: 1fr; }
    .timer-controls { display: grid; grid-template-columns: 1fr 1fr; inline-size: 100%; }
    .not-found > div { flex-direction: column; inline-size: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  }
  @media (prefers-contrast: more) {
    .palette-cuptune { --line: rgba(23,53,45,.45); --line-strong: rgba(23,53,45,.75); }
  }
}