/* ==========================================================================
   KitchenCompare — design system v3 (mockup-driven).
   Warm ground · white cards · deep-green CTAs · accent on inverse ·
   photography-led heroes on inverse panels · thin line iconography.
   No frameworks, no external assets.

   Contents:
     1. tokens + reset            8. list pages (hero band, filters, bars)
     2. buttons + primitives      9. product page (3-col, buybox, tabs, offers)
     3. header + navigation      10. dealer public pages
     4. footer + dark strip      11. legacy compatibility layer
     5. type + shared blocks     12. responsive
     6. homepage
     7. product cards + rails
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */
:root {
  /* ── V3 primitive scales ─────────────────────────────────────────────── */
  /* Green ramp */
  --kc-green-900: #051A0F;
  --kc-green-800: #0C2A1B;
  --kc-green-700: #0B6E3F;
  --kc-green-600: #15934F;
  --kc-green-500: #2FB073;
  --kc-green-400: #56D98A;
  --kc-green-300: #8FEBB5;
  --kc-green-200: #B8F0CD;
  --kc-green-100: #E8F4EC;
  --kc-green-50:  #EFF6F1;

  /* Stone / ink ramp (warm near-black, not blue-grey) */
  --kc-stone-900: #16211C;
  --kc-stone-800: #3F4A44;
  --kc-stone-700: #4A554F;
  --kc-stone-600: #5A655F;
  --kc-stone-500: #6E7A74;
  --kc-stone-400: #8E9994;
  --kc-stone-300: #9AA39E;
  --kc-stone-200: #B8BFBA;
  --kc-stone-100: #EAEAE6;
  --kc-stone-50:  #F8F8F6;

  /* Warm-white surfaces */
  --kc-tint-0:    #F8F8F6;
  --kc-tint-1:    #F4F4F1;
  --kc-tint-2:    #F1F1EC;
  --kc-tint-cool: #F4F7F5;   /* mock-specific cool tint — mega/hover states */

  /* Header-scoped values with no existing token match (mock-driven) */
  --kc-input-border:      #DDE3DF;  /* boxed search border */
  --kc-brand-soft-border: #D3E9DC;  /* mega promo border */
  --kc-field-border:      #E0E0DA;  /* sign-in panel fields + secondary buttons */

  /* ── V3 semantic tokens ──────────────────────────────────────────────── */
  /* Typography — AA floor: primary/secondary/tertiary ≥4.5:1 on page ground.
     --kc-text-quiet fails AA and is decorative-only (placeholders, disabled). */
  --kc-text-primary:    #16211C;   /* stone-900 · headings + body */
  --kc-text-secondary:  #4A554F;   /* stone-700 · supporting paragraphs */
  --kc-text-tertiary:   #64706A;   /* stone-450 · captions/meta · ~4.9:1 */
  /* ~2.8:1 — fails AA, so it may only ever style text a screen reader and a
     sighted reader can both afford to lose: input placeholders and the search
     icon. It had drifted onto real content (home stat labels, struck-through
     was-prices, directory row meta, PDP stat labels, supplier meta); those now
     use --kc-text-tertiary, which clears 4.5:1. Do not widen this list. */
  --kc-text-quiet:      #8E9994;
  --kc-text-on-dark:    #ffffff;
  --kc-text-link:       #0B6E3F;

  /* Surfaces */
  --kc-surface-page:    #F8F8F6;   /* 60% — warm ground */
  --kc-surface-card:    #ffffff;   /* 25% — card faces */
  --kc-surface-tint:    #F4F4F1;   /* alt bands */
  --kc-surface-inverse: #0C2A1B;   /* 10% — header dark, footer */

  /* Borders (border-first; shadow is an accent, not a separator) */
  --kc-border-default:  #EAEAE6;
  --kc-border-subtle:   #F1F1EC;
  --kc-border-strong:   #B8BFBA;

  /* Brand */
  --kc-brand-deep:      #0B6E3F;   /* deep anchor CTA */
  --kc-brand-hover:     #095B34;
  --kc-brand-accent:    #56D98A;   /* 5% — on-dark highlights */
  --kc-brand-soft:      #E8F4EC;
  --kc-brand-xsoft:     #EFF6F1;

  /* Deal / info */
  --kc-deal-fg:    #B4690E;   /* on --kc-deal-bg this is 4.03:1 — fills/badges */
  /* Text usage needs 4.5:1. The freight and refurbished-condition notices
     on a product page are trust copy and must clear AA. */
  --kc-deal-fg-text: #8F5308;
  --kc-deal-bg:    #FDF9F2;
  --kc-deal-border:#F2E6D2;

  /* Sponsored. A single deliberately non-brand hue: paid placement must never
     read as the green the comparison itself uses. Was three copies of a bare
     #c9a53f. */
  --kc-sponsor:    #C9A53F;

  /* Danger */
  --kc-danger:     #C4342E;
  --kc-danger-bg:  #FBF0EF;

  /* ── Legacy aliases (kept during rollout — do not add new usages) ────── */
  --ink:          #16211C;
  --ink-2:        #4A554F;   /* = text-secondary */
  --ink-3:        #64706A;   /* = text-tertiary (was quiet #8E9994 — failed AA) */
  --paper:        #ffffff;
  --tint:         #F8F8F6;
  --tint-warm:    #F4F4F1;
  --panel:        #0C2A1B;
  --panel-2:      #122616;
  --line:         #EAEAE6;
  --line-2:       #F1F1EC;
  --accent:       #0B6E3F;
  --accent-deep:  #095B34;
  --accent-soft:  #E8F4EC;
  --accent-soft-border: #DCEBE2;   /* hairline companion to --accent-soft */
  /* Caution ramp from DESIGN.md; the public site had no token for it. */
  --kc-caution: #B58225;
  --kc-caution-soft: #FFFBF2;
  --accent-ink:   #0B6E3F;
  --accent-bright:#56D98A;
  --deal:         #B4690E;
  --deal-soft:    #FDF9F2;
  --danger:       #C4342E;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  /* Single source of truth for the centred content column. Full-bleed
     backgrounds stretch edge-to-edge; their inner box is capped by one of the
     canonical wrappers below (.wrap / .container / .page / band inners). */
  --content-max-width: 1600px;
  /* One gutter, taken from the approved mock: every one of its 48 centred
     wrappers uses clamp(24px, 2.5vw, 48px) and none has a zero gutter.
     A `.wrap` child must never set `padding: <v> 0` — the horizontal 0 silently
     wipes this. Use `padding-block` for vertical-only padding. */
  --gutter:    clamp(24px, 2.5vw, 48px);
  --gutter-sm: 14px;                       /* ≤680px */

  /* Height of the sticky .hdr stack: utility bar + .hdr-row + .hdr-nav. Every
     `position: sticky` offset and every `scroll-margin-top` on the site derives
     from this — before it existed the file carried nine different offsets
     (0/22/84/88/96/132/140), all of them shorter than the header, so sticky
     rails and anchor targets sat underneath it.
     MEASURED 2026-08-27 against the current condensed header via
     getBoundingClientRect(): 164.8px after restoring a small readable utility
     strip on scroll. The previous 151px measurement belonged to the crushed
     utility state and would put sticky rails inside the header. Do not estimate
     this value — measure it, or the bug returns.
     See the ≤980px breakpoint for the mobile measurement. */
  --header-h:   165px;
  --sticky-top:    calc(var(--header-h) + 12px);
  --scroll-offset: calc(var(--header-h) + 12px);

  /* ── Vertical rhythm ──────────────────────────────────────────────────── */
  /* Three roles, replacing seventeen ad-hoc paddings.
       band  — a full-bleed section between other bands
       page  — the standard `.page` content box
       shell — a two-column body shell that follows its own hero band */
  --band-y:      48px;
  --page-y:      52px;
  --page-y-end:  40px;
  --shell-y:     36px;
  --shell-y-end: 64px;

  /* ── Measure ──────────────────────────────────────────────────────────── */
  /* In ch, not px, so both track the ≥1800px font step-up. */
  --measure-prose: 68ch;   /* body copy, articles, legal, descriptions */
  /* Resolved reading measure for long-form article prose. NOT `ch`: that unit
     resolves against each element's own font-size, so a single `68ch` cap
     produced a different pixel width per element and left headings uncapped
     while paragraphs were inset. Measured against the shipped article face,
     37rem is ~73 real characters — inside the 65-75 band. */
  --measure-article: 37rem;
  --measure-article-title: 58rem;  /* display headline cap, resolved not `ch` */
  --measure-lede:  58ch;   /* hero subtitles, section leads */

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-xl: 18px;
  --r-lg: 16px;
  /* 14px, not 12px. This step is used as the card radius by ~38 selectors
     across the site (tiles, list rows, panels, callouts). The approved design
     specifies "white cards, 14–16px radii", so 12px sat below the range and
     made those surfaces disagree with every card built on --r-card. Aligning
     the step brings them all into the approved range at once. */
  --r-md: 14px;
  --r-sm: 9px;
  --r-xs: 7px;
  --r:    12px;   /* legacy alias */

  /* Semantic shape — use these, not the raw steps above.
     Values come from the approved v3 design notes: "white cards, 14–16px
     radii, soft ambient shadows". Cards sit at the bottom of that range and
     panels at the top; controls are tighter so a button never looks like a
     card. */
  --r-card:    14px;          /* the default card, list row, tile */
  --r-panel:   var(--r-lg);   /* 16 — large panels, drawers, popovers */
  --r-feature: var(--r-xl);   /* 18 — full-width feature blocks */
  --r-control: 10px;          /* buttons, inputs, selects, segmented items */
  --r-pill:    999px;         /* chips, tags, avatarless pills */

  /* ── Avatar / logo tiles ──────────────────────────────────────────────── */
  --avatar-sm: 36px;
  --avatar-md: 44px;   /* default — business rows, retailer cards, offers */
  --avatar-lg: 56px;
  --avatar-xl: 92px;   /* profile identity tiles */

  /* ── Elevation (warm-toned, wide, not dark and tight) ─────────────────── */
  --shadow-1: 0 1px 3px rgba(22,33,28,.05);
  --shadow-2: 0 8px 30px rgba(22,33,28,.08);
  --shadow-3: 0 20px 60px rgba(22,33,28,.14);
  /* Deepest step — a card lifted off a dark ground (finance form, popovers
     over the inverse header). Added so the five hand-written box-shadows that
     had accumulated could stop inventing their own falloff. */
  --shadow-4: 0 24px 56px rgba(22,33,28,.24);
  --shadow-focus: 0 0 0 3px rgba(86,217,138,.30);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: .14s;
  --dur-base: .18s;
  --dur-slow: .26s;

  /* ── Typography ───────────────────────────────────────────────────────── */
  /* The Two-Voice Rule (DESIGN.md): Poppins speaks, Inter explains. Poppins is
     limited to the wordmark and headings; Inter owns body copy, UI, labels,
     tables, prices and data. This matches dealer.css and supplier, which
     already ship the signed-off pairing. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
          Arial, sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;

  /* Page-title scale. Three roles, replacing fifteen separate clamps that
     ranged from 1.5rem to 3.25rem with no rule for which page got which:
       hero   — the home front door, once per site
       page   — every landing, collection, index and utility page
       record — a single named thing (product, retailer, supplier, article)
     Pick by what the page IS, never by which template wave built it. */
  --h1-hero:   clamp(2rem,    4.6vw, 3.1rem);
  --h1-page:   clamp(1.85rem, 3.6vw, 2.75rem);
  --h1-record: clamp(1.5rem,  2.8vw, 2.1rem);
  --h1-tracking: -.035em;
  --h1-leading:  1.08;

  /* ---- Motion, continued ------------------------------------------------
     --ease and --dur-fast/base/slow above are the incumbent set and stay as
     they are; 83 declarations already depend on them. These fill the gaps the
     set never had a name for, in the same family, so there is one vocabulary
     and not two.

     The steps ARE the DESIGN.md ruling, not a reinterpretation: "restrained
     motion to confirm state, 100-180ms for controls and 240ms for drawers".
     --dur-focal is the one exception the system allows itself, spent once, in
     one place: the offer list resolving into rank order.

     Anything that repeats animates transform and opacity only. Blur and
     backdrop stay on the sticky header and drawers, which already have their
     own layer. */
  --dur-tap:   .12s;   /* pressed / active. Contact, not lag */
  --dur-view:  .32s;   /* overlay and layout change, where distance is real */
  --dur-focal: .56s;   /* the rank settle. Once per page load */

  /* --ease is the incumbent arrival curve and is deliberately unchanged.
     These two are roles it never covered. */
  --ease-in:   cubic-bezier(.4, 0, 1, 1);   /* exits leave faster than entries */
  --ease-move: cubic-bezier(.2, 0, 0, 1);   /* spatial continuity, no ease-in */

  /* Stagger is for a list that genuinely arrives as a list. The cap matters
     more than the step: past ~240ms total the last item reads as broken. */
  --stagger-step: 34ms;
  --stagger-cap: 240ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html, .subcat-scroll-track { scroll-behavior: auto; }
  /* Collapse to 1ms rather than `none`. Removing transitions outright also
     removes the state change they were carrying: a control that snaps between
     hover and rest with no interpolation still reads, but a JS transitionend
     handler never fires and the element can be left mid-state. 1ms ends the
     movement while keeping the event. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  /* The one exception. A loading spinner is not decoration — it is the only
     signal that work is still happening, and freezing it tells the user the
     page has hung. It keeps turning, more slowly. */
  /* `ac-spin` is the KEYFRAME name, not a class — there is no .ac-spin
     element. These are the four selectors that actually run it. */
  .btn-spin,
  .kc-async-loading::before,
  .chart-loading::before,
  .ac-note.ac-loading::before,
  [data-spinner] {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
  /* Nothing travels. Entrances resolve to their resting state immediately. */
  .kc-rank-settle > * { opacity: 1 !important; transform: none !important; }
}
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55;
  color: var(--ink); background: var(--tint);  /* V3: warm ground #F8F8F6 */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, li a, .prose a, .desc-body a { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15;
  margin: 0 0 .5rem; letter-spacing: -.02em; }
table { border-collapse: collapse; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.ic { vertical-align: -3px; flex: none; }
/* Drawn category artwork (icons.html dept_icon/subtype_icon). Sits in the same
   fixed glyph boxes as `.ic`, so it needs the same no-shrink behaviour. It is a
   fixed brand green and cannot follow the container's hover colour. */
.cat-icon { display: block; flex: none; object-fit: contain; }
.mega-panel-grid .cat-icon { opacity: .8; }

/* Canonical centred content column. `.container` is a legacy alias for `.wrap`
   (§11) — kept so existing markup keeps working, defined here so the two can
   never drift apart. `padding-inline` (not the `padding` shorthand) is
   deliberate: these compose with `.page`, which owns the vertical padding, and
   a shorthand here would silently reset it. */
.wrap, .container { max-width: var(--content-max-width); margin-inline: auto;
  padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  background: var(--ink); color: #fff; z-index: 200;
}
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; left: 0; top: 0; width: auto; height: auto; margin: 0;
  clip: auto; overflow: visible; padding: 10px 16px; border-radius: 0 0 8px 0;
  outline: 2px solid var(--accent-bright); outline-offset: 2px;
}

/* --------------------------------------------------------- 2. primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-control);
  padding: 11px 20px; font: inherit; font-size: .92rem; font-weight: 700;
  letter-spacing: -.01em; cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { opacity: .9; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-2); }
.btn-deal { background: var(--accent); color: #fff; }
.btn-deal:hover { background: var(--accent-deep); box-shadow: var(--shadow-2); }
.btn-dark { background: var(--panel); color: #fff; }
.btn-dark:hover { background: var(--panel-2); box-shadow: var(--shadow-2); }
.btn-outline { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--kc-stone-300); }
.btn.is-loading { pointer-events: none; opacity: .82; }
.btn-spin { flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .9;
  animation: ac-spin .6s linear infinite; }
.btn-small, .btn-sm { padding: 7px 13px; font-size: .82rem; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block, .btn-wide { width: 100%; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink);
  border-radius: 10px; cursor: pointer; transition: background var(--dur-fast);
}
.iconbtn:hover { background: var(--tint); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  padding: 7px 15px; font-size: .87rem; font-weight: 600; color: var(--kc-text-secondary);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.pill:hover { border-color: var(--accent); color: var(--accent-ink); }
.pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-n { font-size: .74rem; color: var(--ink-3); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.pill.is-active .pill-n { color: rgba(255,255,255,.65); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 5px 12px; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}
.tag-deal { background: var(--kc-deal-bg); color: var(--kc-deal-fg);
  border: 1px solid var(--kc-deal-border); }
.tag-ok { background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid #DCEBE2; }
.tag-muted { background: var(--kc-tint-1); color: var(--kc-text-secondary);
  border: 1px solid var(--line); }
.tag-drop { background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid #DCEBE2; }
.tag-best { background: var(--accent); color: #fff; }

/* icon chips (trust rows, stat rows) */
.glyph {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--kc-brand-xsoft); color: var(--accent-ink);
}
.glyph-square { border-radius: var(--r-card); background: var(--kc-tint-1);
  border: 1px solid var(--line); color: var(--kc-stone-700); }
.glyph-dark { background: rgba(86,217,138,.14); border: 1px solid rgba(86,217,138,.22);
  color: var(--accent-bright); }

/* ------------------------------------------------------------- 3. header */
.hdr { position: sticky; top: 0; z-index: 90; background: var(--paper); }
.hdr.is-scrolled { box-shadow: var(--shadow-2); }
.hdr-top { border-bottom: 1px solid var(--kc-border-subtle); }
.hdr-row { display: flex; align-items: center; gap: 18px;
  padding: 14px var(--gutter); }
.hdr-menu { display: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-word { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700;
  letter-spacing: -.035em; color: var(--ink); }
.brand-word em { font-style: normal; color: var(--accent); }
.brand-word-inv { color: #fff; }
/* Brand lockup. These are the approved vector files from the KitchenCompare
   media pack, not a CSS approximation, so the artwork carries its own colour:
   the colour lockup on light ground, the white lockup in the dark footer.
   Intrinsic width/height are on the <img> so the header does not reflow while
   the SVG loads. */
.brand-logo { display: block; height: 26px; width: auto; }
/* Icon-only fallback, shown by the header media query where the full lockup
   would crowd the search field. */
.brand-logo-mark { display: none; height: 26px; width: auto; }
/* header-scoped brand sizing (mock px values) — footer/mobile-nav keep the shared .brand-word rule */
.hdr-row .brand { gap: 9px; }
.hdr-row .brand-word { font-size: 18px; letter-spacing: -.02em; line-height: 1; }
.hdr-row .brand-logo, .hdr-row .brand-logo-mark { height: 35px; }

/* V3 boxed search: bordered flex-row box (icon → input → button as normal flex items).
   .hdr-search is the outer wrapper (position:relative — anchors .ac-panel);
   .hdr-search-box is the bordered inner row. See 980px breakpoint for the mobile reset. */
/* No max-width: the field fills all space left between the logo and the action icons,
   per the mock. */
.hdr-search { position: relative; flex: 1 1 460px; min-width: 420px; }
.hdr-search-box {
  display: flex; align-items: center;
  border: 1.5px solid var(--kc-input-border); border-radius: var(--r-card);
  padding: 3px 3px 3px 4px; background: var(--paper);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.hdr-search-box:focus-within {
  border-color: var(--accent); background: var(--paper); box-shadow: var(--shadow-focus);
}
.hdr-search-icon { color: var(--kc-text-quiet); display: flex; flex: none;
  margin: 0 8px 0 12px; pointer-events: none; }
.hdr-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-size: 14px; font-family: inherit; padding: 10px 0;
}
.hdr-search input::placeholder { color: var(--kc-text-quiet); }
.hdr-search input:focus { outline: none; }
.hdr-search-btn {
  flex: none; padding: 11px 24px; border: 0;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 13.5px;
  font-weight: 700; cursor: pointer; transition: background var(--dur-fast);
}
.hdr-search-btn:hover { background: var(--accent-deep); }
.hdr-search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hdr-utils { display: flex; align-items: center; gap: 4px; flex: none; }
.hdr-util {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-radius: var(--r-control); font-size: .89rem; font-weight: 600; color: var(--kc-text-secondary);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hdr-util:hover { background: var(--kc-tint-0); color: var(--ink); }
.hdr-util-cta { border: 1px solid var(--line); color: var(--ink); }
.hdr-util-cta:hover { border-color: var(--accent); color: var(--accent-ink);
  background: var(--kc-brand-xsoft); }

/* ---- header action group (Saved / Compare / Account) — desktop only,
   see .hdr-actions in the 980px breakpoint. Stacked icon-over-label, unlike
   the older unused .hdr-util (inline icon+label), so this is a new family
   rather than a repurpose of it. ---- */
.hdr-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.hdr-action {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 3px; background: transparent; border: 0; font-family: inherit; cursor: pointer;
  color: var(--kc-stone-800); font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 10px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hdr-action:hover { background: var(--kc-tint-1); color: var(--accent-ink); }
.hdr-action .ic { stroke-width: 1.6; }
.hdr-action-label { line-height: 1; }
.hdr-action-badge {
  position: absolute; top: 2px; right: 6px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hdr-account { position: relative; }
#account-btn[aria-expanded="true"] { background: var(--kc-tint-1); color: var(--accent-ink); }
.hdr-account-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 150; width: 352px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-4); overflow: hidden; text-align: left;
}
.hdr-account-panel[hidden] { display: none; }
.hdr-account-link {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px;
  font-size: .86rem; font-weight: 600; color: var(--ink);
}
.hdr-account-link:hover { background: var(--kc-tint-0); color: var(--accent-ink); }

/* Sign-in panel — wired to real customer authentication (2026-08-21). */
.hdr-signin-head { padding: 20px 22px 6px; }
.hdr-signin-title {
  font-size: 17px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 4px; color: var(--ink);
}
.hdr-signin-sub { font-size: 13px; color: var(--kc-text-tertiary); line-height: 1.5; margin: 0; }
.hdr-signin-body { padding: 16px 22px 4px; display: flex; flex-direction: column; gap: 10px; }
.hdr-signin-field { display: flex; flex-direction: column; gap: 6px; }
.hdr-signin-label { font-size: 12px; font-weight: 700; color: var(--kc-stone-800); }
.hdr-signin-label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.hdr-signin-forgot { font-size: 12px; font-weight: 600; }
.hdr-signin-input {
  background: var(--kc-tint-0); border: 1.5px solid var(--kc-field-border); border-radius: 10px;
  padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--ink);
  outline: none; width: 100%;
}
.hdr-signin-input::placeholder { color: var(--kc-text-quiet); }
.hdr-signin-input:focus { border-color: var(--accent); background: var(--paper); }
.hdr-signin-check {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--kc-text-secondary); cursor: pointer; padding: 2px 0;
}
.hdr-signin-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.hdr-signin-submit {
  background: var(--accent); color: #fff; border: 0; padding: 13px; font-size: 14px;
  font-weight: 700; font-family: inherit; border-radius: 10px; cursor: pointer; width: 100%;
  transition: background var(--dur-fast);
}
.hdr-signin-submit:hover { background: var(--accent-deep); }
.hdr-signin-or {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px 12px;
  color: var(--kc-text-tertiary); font-size: 11.5px; font-weight: 600;
}
.hdr-signin-or span { flex: 1; height: 1px; background: var(--line); }
.hdr-signin-alt { padding: 0 22px; display: flex; flex-direction: column; gap: 8px; }
.hdr-signin-altbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--paper); border: 1.5px solid var(--kc-field-border); color: var(--ink);
  padding: 11px; font-size: 13.5px; font-weight: 600; font-family: inherit;
  border-radius: 10px; cursor: pointer; width: 100%;
  transition: border-color var(--dur-fast);
}
.hdr-signin-altbtn:hover { border-color: var(--accent); }
.hdr-signin-foot {
  margin-top: 18px; padding: 14px 22px; background: var(--kc-tint-0);
  border-top: 1px solid var(--line-2); font-size: 13px; color: var(--kc-text-secondary);
}
.hdr-signin-foot a { font-weight: 700; }

/* `position: relative` belongs here, not in a second .hdr-nav rule further
   down: .has-mega-full is `position: static`, so the full-width mega panel
   positions against this row. */
.hdr-nav { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  position: relative; }
/* The row itself must NOT scroll or carry the fade mask: a mask clips every
   descendant, including the absolutely-positioned mega panel nested in it, which
   collapses the dropdown to the row's height. Per the mock, the overflow + mask
   belong to the inner link strip only (.hdr-nav-strip), which excludes the mega. */
.hdr-nav-row { display: flex; align-items: stretch; gap: 8px; }
.hdr-nav-strip {
  display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.hdr-nav-strip::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 14px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--kc-stone-800); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.nav-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav-link-all { color: var(--ink); font-weight: 700; }
.has-menu { position: relative; }
.mega {
  position: absolute; left: 0; top: 100%; z-index: 95; display: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-3); padding: 26px 30px; gap: 36px; min-width: 720px;
}
.has-menu:hover .mega, .has-menu:focus-within .mega { display: flex; }
.mega-col { min-width: 150px; }
.mega-heading { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--kc-text-tertiary); font-weight: 800; margin-bottom: 10px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0;
  font-size: .88rem; color: var(--kc-text-secondary); border-radius: 6px; }
.mega li a:hover { color: var(--ink); }
.mega-n { color: var(--ink-3); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* mobile slide-over navigation */
.mobile-nav { position: fixed; inset: 0; z-index: 120; visibility: hidden;
  overflow: hidden; }   /* same reason as .filter-drawer above */
.mobile-nav.is-open { visibility: visible; }
.mobile-nav-scrim { position: absolute; inset: 0; background: rgba(12,42,27,.4);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-in); }
.mobile-nav.is-open .mobile-nav-scrim { transition: opacity var(--dur-slow) var(--ease); }
.mobile-nav.is-open .mobile-nav-scrim { opacity: 1; }
.mobile-nav-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--paper); box-shadow: var(--shadow-3);
  transform: translateX(-102%);
  /* exit; the entry override sits on .is-open below */
  transition: transform var(--dur-fast) var(--ease-in);
  display: flex; flex-direction: column;
}
.mobile-nav.is-open .mobile-nav-panel { transform: none;
  transition: transform var(--dur-slow) var(--ease); }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
/* flex:1 so the body actually fills the panel and owns the scroll. Without it
   a drag inside the drawer fell through to the document and scrolled the page
   behind it (measured: 0 -> 554px). overscroll-behavior stops the chain. */
.mobile-nav-body { flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y; padding: 4px 16px 22px; }

/* Drawer search. Its own control, not a clone of .hdr-search: no autocomplete
   panel, no submit button competing with the field for the row. 16px so iOS
   does not force-zoom the viewport on focus (see the mobile control floor). */
.mnav-search { position: relative; display: block; margin: 12px 16px 4px; }
.mnav-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; color: var(--kc-text-tertiary); pointer-events: none; }
.mnav-search input {
  width: 100%; height: 46px; padding: 0 14px 0 42px;
  border: 1px solid var(--kc-input-border); border-radius: var(--r-control);
  background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 500;
}
.mnav-search input::placeholder { color: var(--kc-text-tertiary); font-weight: 400; }
.mnav-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent); }

/* One row shape for every destination in the drawer: art column, name, chevron.
   The columns are fixed so the names align down the whole drawer whether the
   art is a 26px drawn icon or a 20px stroke glyph. */
.mnav-label { margin: 22px 0 2px; font-size: .69rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--kc-text-tertiary); }
.mnav-list { display: block; }
.mobile-nav-body > .mnav-label:first-child { margin-top: 14px; }
/* 30px art column + 14px gap puts every name at x=44. The fold-out list below
   bleeds 12px outward and pads 14px back in, so its names land on 44 too — the
   two levels read as one column, not two ragged ones. */
.mnav-row {
  display: grid; grid-template-columns: 30px 1fr 18px; align-items: center;
  gap: 14px; min-height: 52px; padding: 8px 0; cursor: pointer;
  border-bottom: 1px solid var(--line); color: var(--ink);
  font-size: .95rem; font-weight: 600; list-style: none;
  transition: color var(--dur-fast) var(--ease);
}
.mnav-row::-webkit-details-marker { display: none; }
.mnav-list > :last-child .mnav-row,
.mnav-list > a.mnav-row:last-child { border-bottom: 0; }
.mnav-row-art { display: grid; place-items: center; color: var(--accent); }
.mnav-row-name { min-width: 0; }
.mnav-row-chev { display: grid; place-items: center; color: var(--kc-text-tertiary);
  transition: transform var(--dur-slow) var(--ease), color var(--dur-fast) var(--ease); }
.mnav-row:active { color: var(--accent); }
.mnav-row:active .mnav-row-chev { color: var(--accent); }
.mnav-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
  border-radius: var(--r-xs); }
.mnav-row-quiet { font-weight: 600; color: var(--kc-text-secondary); }

/* Only the four Shop divisions fold. The chevron turns to say so — every other
   row keeps a static right chevron, which means "goes there". */
.mnav-fold[open] > .mnav-row { border-bottom-color: transparent; }
.mnav-fold[open] > .mnav-row .mnav-row-chev { transform: rotate(180deg); }
/* No negative margin: bleeding the tint into the body's padding made the list
   12px wider than its container, which an overflow-y:auto ancestor turns into
   a real horizontal scroll axis. Flush instead — and the art column then lines
   up with the parent row's, so the whole drawer is one column. */
.mnav-sub { list-style: none; margin: 0 0 10px; padding: 6px 0;
  background: var(--kc-tint-0); border-radius: var(--r-card); }
.mnav-sub li a {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center;
  gap: 14px; min-height: 44px; padding: 6px 10px 6px 0;
  font-size: .89rem; font-weight: 500; color: var(--ink-2);
  /* the global `li a` prose rule underlines these — nav items must stay clean */
  text-decoration: none;
}
.mnav-sub-art { display: grid; place-items: center; color: var(--accent); opacity: .85; }
.mnav-sub-name { min-width: 0; }
.mnav-sub-n { color: var(--ink-3); font-size: .76rem; font-variant-numeric: tabular-nums; }
.mnav-sub li a:active { color: var(--accent); }

/* The drawer runs past four sections, so the primary action is pinned instead
   of waiting at the bottom of the scroll. */
.mobile-nav-foot { flex: none; padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--paper); }

/* ---- utility bar ---- */
.hdr-utility {
  background: var(--panel);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
  /* Condenses on scroll without crushing the trust line against its edges.
     The row keeps its content height and sheds only vertical padding; below
     980px the utility strip is not rendered. */
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-view) var(--ease-move),
              border-bottom-color var(--dur-view) var(--ease);
}
.hdr.is-scrolled .hdr-utility {
  grid-template-rows: 28px;
}
.hdr-utility-inner {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px var(--gutter);
  transition: padding-block var(--dur-view) var(--ease-move);
}
.hdr.is-scrolled .hdr-utility-inner { padding-block: 1px; }
.hdr-utility-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hdr-utility-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.hdr-utility-trust .ic { color: var(--accent-bright); flex: none; }
.hdr-utility-dot { opacity: .35; }
.hdr-utility-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.hdr-utility-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hdr-utility-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.hdr-utility-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.16);
  margin: 0 8px;
}
.hdr-utility-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 700;
  color: #fff;
  margin-left: 2px;
  transition: background var(--dur-fast);
}
.hdr-utility-login:hover { background: rgba(255,255,255,.1); color: #fff; }
.hdr-utility-login .ic { color: var(--accent-bright); }

/* ---- dept button ("Shop by department") ---- */
.dept-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  padding: 0 18px;
  margin: 8px 10px 8px 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  flex: none;
  transition: background var(--dur-fast);
}
.dept-btn .ic:last-child { transition: transform var(--dur-fast) var(--ease); }

/* ---- has-mega-full: mega positions relative to hdr-nav (see §3 header) ---- */
.has-mega-full { position: static; }

/* Open/closed state.
   Without JS (no `.js` on <html>) the panel falls back to pure CSS hover/focus so it
   still works. With JS, the `is-open` class is the single source of truth — otherwise
   a click could never close the panel while the pointer was still hovering it. */
.has-mega-full:hover .mega,
.has-mega-full:focus-within .mega { display: flex; }
.has-mega-full:hover .mega.mega-3col,
.has-mega-full:focus-within .mega.mega-3col { display: block; }
.has-mega-full:hover .dept-btn,
.has-mega-full:focus-within .dept-btn { background: var(--accent); }
.has-mega-full:hover .dept-btn .ic:last-child,
.has-mega-full:focus-within .dept-btn .ic:last-child { transform: rotate(180deg); }

.js .has-mega-full:hover .mega,
.js .has-mega-full:focus-within .mega { display: none; }
.js .has-mega-full:hover .dept-btn,
.js .has-mega-full:focus-within .dept-btn { background: var(--ink); }
.js .has-mega-full:hover .dept-btn .ic:last-child,
.js .has-mega-full:focus-within .dept-btn .ic:last-child { transform: none; }

.js .has-mega-full.is-open .mega { display: flex; }
.js .has-mega-full.is-open .mega.mega-3col { display: block; }
.js .has-mega-full.is-open .dept-btn { background: var(--accent); }
.js .has-mega-full.is-open .dept-btn .ic:last-child { transform: rotate(180deg); }

/* ---- 3-column mega ---- */
.mega-3col {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
/* .mega-3col holds a single .wrap child that centers/caps the 3-column row at the same
   max-width as the rest of the page — it must be a block box (not a flex container) so the
   child's .wrap max-width/margin:auto centering isn't fought by flex auto-margin behavior. */
.mega-3col-inner {
  display: grid;
  grid-template-columns: 264px 1fr 292px;
  min-width: 0;
}
/* header-scoped mega count/chevron pins — kept off the shared .mega-n so the mobile
   drawer's counts (.mnav-group li a .mega-n) are unaffected */
.mega-3col .mega-n { color: var(--kc-stone-300); font-size: 12px; font-weight: 600; }
.mega-sidebar-left {
  border-right: 1px solid var(--kc-border-subtle);
  padding: 16px 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--kc-stone-300);
  padding: 6px 12px 10px;
}
.mega-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mega-group-btn:hover { background: var(--kc-tint-cool); }
.mega-group-btn.is-active {
  background: var(--kc-brand-soft);
  color: var(--accent);
  font-weight: 700;
}
.mega-group-btn .ic:last-child { opacity: .5; }
.mega-group-name { flex: 1; text-align: left; }
.mega-center-panels { padding: 16px 30px 24px; min-width: 0; overflow: hidden; }
.mega-panel-meta {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 12px;
  color: var(--ink);
}
.mega-panel-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 18px;
}
/* `li a` (not just `a`) so these win over the legacy `.mega li a` rule above,
   which is the same specificity but appears earlier in the file. */
.mega-panel-grid li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* the global `li a` prose rule underlines these — nav items must stay clean */
  text-decoration: none;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mega-panel-grid li a:hover { background: var(--kc-tint-cool); color: var(--accent); }
.mega-panel-grid .ic { opacity: .65; flex: none; }
.mega-panel-grid a > span:not(.mega-n) { flex: 1; }
.mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}
.mega-view-all:hover { color: var(--accent-deep); }
.mega-sidebar-right {
  background: var(--kc-tint-0);
  border-left: 1px solid var(--kc-border-subtle);
  margin-left: -1px;
  padding: 18px 0 22px 22px;
}
.mega-compared { margin-bottom: 16px; }
.mega-compared-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--kc-stone-300); margin-bottom: 12px;
}
.mega-compared-list { display: flex; flex-direction: column; gap: 6px; }
.mega-compared-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--paper); border: 1px solid var(--kc-border-default); border-radius: 10px;
  padding: 10px 12px; font-size: .8rem; color: var(--ink);
  transition: border-color var(--dur-fast);
}
.mega-compared-item:hover { border-color: var(--accent); }
.mega-compared-name { font-size: 13px; font-weight: 600; }
.mega-compared-meta { font-size: 12px; color: var(--kc-stone-500); font-weight: 600; white-space: nowrap; }
.mega-compared-empty { font-size: .8rem; color: var(--ink-3); margin: 0; }
.mega-promo {
  background: var(--kc-brand-soft);
  border: 1px solid var(--kc-brand-soft-border);
  border-radius: var(--r-card);
  padding: 14px 14px 16px;
  margin-right: var(--gutter);
}
.mega-promo-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  color: var(--ink);
}
.mega-promo p {
  font-size: 12.5px;
  color: var(--kc-stone-800);
  line-height: 1.5;
  margin: 0 0 12px;
}
.mega-promo .btn { padding: 8px 14px; font-size: 12.5px; font-weight: 700; border-radius: 8px; }

/* ---- nav-alert ("Set a price alert") ---- */
.nav-alert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  flex: none;
  padding: 0 4px;
  transition: color var(--dur-fast);
}
.nav-alert:hover { color: var(--accent-deep); }

/* ---- mobile chip row ---- */
.mobile-chips {
  display: none;
  gap: 7px;
  padding: 10px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
}
.mobile-chips::-webkit-scrollbar { display: none; }
.mobile-chip {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .83rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
  min-height: 40px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.mobile-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------- 4. footer + dark strip */
.strip-dark { background: var(--panel); color: rgba(255,255,255,.72); margin-top: 64px; }
.strip-dark-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  padding-block: 22px; }
.strip-item { display: flex; align-items: center; gap: 12px; }
.strip-item strong { display: block; color: #fff; font-size: .93rem; font-weight: 700;
  letter-spacing: -.01em; }
.strip-item span { font-size: .8rem; color: rgba(255,255,255,.72); }
/* .glyph-dark is defined once, with the other glyph variants in §2 — but the
   icon lives inside .strip-item, so `.strip-item span` (0,0,1,1) was beating
   `.glyph-dark` (0,0,1,0) and painting the icon white instead of bright green.
   This selector carries two classes, so it wins. The approved footer also runs
   a smaller badge here than the 46px .glyph used on light sections. */
.strip-item .glyph { width: 32px; height: 32px; flex: none;
  color: var(--accent-bright); }
.strip-item .glyph .ic { width: 17px; height: 17px; }

.ftr { background: var(--panel); color: rgba(255,255,255,.72); font-size: .9rem;
  border-top: 1px solid rgba(255,255,255,.08); }
.ftr .brand-word em { color: var(--accent-bright); }
.ftr .brand-logo { height: 24px; }
.ftr-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 40px;
  padding: 56px 0 40px; }
.ftr-note { margin: 16px 0 0; font-size: .86rem; color: rgba(255,255,255,.72);
  max-width: 340px; }
.ftr-note-sub { font-size: .78rem; color: rgba(255,255,255,.6); }
/* Bright green, not white — the approved footer uses the accent on the four
   column headings as its only colour highlight in that band. */
.ftr-heading { display: block; font-weight: 700; color: var(--accent-bright); margin-bottom: 12px;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
/* The global `p a, li a` prose rule underlines every link inside an <li>,
   which caught the whole footer. The approved footer has plain links. */
.ftr li a { color: rgba(255,255,255,.72); display: inline-block; padding: 4px 0;
  text-decoration: none; transition: color var(--dur-fast); }
.ftr li a:hover { color: #fff; }
.ftr-more { font-weight: 700; color: rgba(255,255,255,.85) !important; }
.ftr-base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 26px;
  font-size: .8rem; color: rgba(255,255,255,.6); }
.ftr-preferences {
  appearance: none; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.72);
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ftr-preferences:hover { color: #fff; }
.ftr-preferences:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* Consent Mode v2 preference surface. It is deliberately compact and uses the
   same action treatment for Accept, Reject and Manage so the visitor is not
   steered towards the most permissive choice. */
.kc-consent {
  position: fixed; z-index: 600; inset-inline: var(--gutter); bottom: 20px;
  width: min(920px, calc(100% - (2 * var(--gutter)))); max-height: calc(100vh - 40px);
  margin-inline: auto; padding: 18px 22px; overflow-y: auto;
  color: var(--kc-text-primary); background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-strong); border-radius: var(--r-card);
  box-shadow: 0 8px 30px rgba(22,33,28,.16);
}
.kc-consent[hidden], .kc-consent-options[hidden] { display: none; }
.kc-consent-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.kc-consent h2 { margin: 0 0 5px; font-size: 1.18rem; line-height: 1.25; }
.kc-consent p { margin: 0; max-width: 58ch; color: var(--kc-text-secondary); font-size: .86rem; }
.kc-consent a { color: var(--kc-text-link); }
.kc-consent-actions { display: grid; grid-template-columns: repeat(3, minmax(104px, 1fr)); gap: 8px; flex: none; }
.kc-consent-action, .kc-consent-save {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--kc-border-strong);
  border-radius: var(--r-control); background: var(--kc-surface-card);
  color: var(--kc-text-primary); font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.kc-consent-action:hover, .kc-consent-save:hover {
  border-color: var(--kc-brand-deep); color: var(--kc-brand-deep); background: var(--kc-brand-xsoft);
}
.kc-consent-action:focus-visible, .kc-consent-save:focus-visible,
.kc-consent-option input:focus-visible {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 2px;
}
.kc-consent-options {
  display: grid; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--kc-border-default);
}
.kc-consent-option {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--kc-surface-tint);
  color: var(--kc-text-primary); cursor: pointer;
}
.kc-consent-option > div, .kc-consent-option > span:first-child { min-width: 0; }
.kc-consent-option strong, .kc-consent-option span { display: block; }
.kc-consent-option span span { color: var(--kc-text-secondary); font-size: .8rem; }
.kc-consent-option input { width: 20px; height: 20px; flex: none; accent-color: var(--kc-brand-deep); }
.kc-consent-required { flex: none; color: var(--kc-text-secondary); font-size: .78rem; font-weight: 700; }
.kc-consent-save { justify-self: end; min-width: 136px; }

@media (prefers-color-scheme: dark) {
  .kc-consent {
    color: #fff; background: var(--kc-surface-inverse); border-color: rgba(255,255,255,.3);
    box-shadow: 0 8px 30px rgba(0,0,0,.36);
  }
  .kc-consent p, .kc-consent-option span span, .kc-consent-required { color: rgba(255,255,255,.78); }
  .kc-consent a { color: var(--kc-brand-accent); }
  .kc-consent-action, .kc-consent-save {
    color: #fff; background: transparent; border-color: rgba(255,255,255,.42);
  }
  .kc-consent-action:hover, .kc-consent-save:hover {
    color: var(--kc-surface-inverse); background: var(--kc-brand-accent);
    border-color: var(--kc-brand-accent);
  }
  .kc-consent-option { color: #fff; background: rgba(255,255,255,.08); }
  .kc-consent-options { border-top-color: rgba(255,255,255,.18); }
  .kc-consent-action:focus-visible, .kc-consent-save:focus-visible,
  .kc-consent-option input:focus-visible { outline-color: var(--kc-brand-accent); }
}

@media (max-width: 680px) {
  .kc-consent {
    inset-inline: var(--gutter-sm); bottom: var(--gutter-sm);
    width: calc(100% - (2 * var(--gutter-sm))); max-height: calc(100vh - (2 * var(--gutter-sm)));
    padding: 16px;
  }
  .kc-consent-summary { align-items: stretch; flex-direction: column; gap: 14px; }
  .kc-consent-actions { grid-template-columns: 1fr; }
  .kc-consent-option { align-items: flex-start; }
  .kc-consent-save { width: 100%; }
}

@media (forced-colors: active) {
  .kc-consent, .kc-consent-action, .kc-consent-save, .kc-consent-option { border: 1px solid CanvasText; }
}

/* -------------------------------------------------- 5. type + shared blocks */
/* Standard page body box, per Shaun 2026-08-01: same max-width, centring and
   padding on every page. `.page` is used together with `.wrap` (or its alias
   `.container`); it restates the cap and gutter from the same tokens so it is
   still correct if ever used alone, and adds the vertical page padding. */
.page {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--page-y) var(--gutter) var(--page-y-end);
}
.page-title { font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); }
.page-sub { color: var(--ink-2); margin: 6px 0 26px; max-width: var(--measure-lede);
  font-size: 1.02rem; }
.page-narrow { max-width: 780px; }

/* /search relax-ladder notice — a spelling correction or dropped word is
   never silent, so it needs to read as an active status, not muted copy. */
.pc-search-notice { color: var(--ink); background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border); border-radius: var(--r-sm);
  padding: 10px 14px; margin: 6px 0 18px; font-size: 0.95rem;
  max-width: var(--measure-lede); }
.pc-search-notice strong { font-weight: 700; }

/* wrap so a long "See all …" link drops to its own line instead of being
   pushed off the right edge at 320px */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap; }
.sec-title { font-size: clamp(1.3rem, 2.3vw, 1.6rem); font-weight: 780; letter-spacing: -.028em; }
.sec-title .ic { color: var(--accent); margin-right: 4px; }
.sec-sub { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; max-width: 640px; }
.sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem;
  font-weight: 650; color: var(--ink); white-space: nowrap; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--line); transition: border-color var(--dur-fast), color var(--dur-fast); }
.sec-link:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.sec { padding: var(--band-y) 0 8px; }
.sec-band { background: var(--paper); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding-bottom: var(--band-y); }
.sec-pad { padding-bottom: var(--band-y); }

.crumbs { font-size: .82rem; margin: 0 0 18px; color: var(--kc-text-tertiary); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--kc-stone-200); }
.crumbs a { color: var(--kc-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fine-print { font-size: .78rem; color: var(--ink-3); margin: 10px 0 0; }

.empty {
  text-align: center; padding: 72px 24px; margin: 26px 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
}
.empty-glyph { width: 58px; height: 58px; border-radius: 50%; background: var(--tint);
  color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px; }
/* The no-results heading echoes the visitor's own query, which can be a long
   unbroken string (a model number, a typo). Without a break opportunity it
   forced the empty state 45px wider than its column and pushed the whole page
   into a sideways scroll. */
.empty h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.empty p { color: var(--ink-2); max-width: 440px; margin: 6px auto 20px;
  overflow-wrap: anywhere; }

/* client-hydrated pages (/saved, /compare): loading state + toast feedback */
.kc-async-loading { display: flex; align-items: center; gap: 10px; padding: 40px 0;
  color: var(--ink-2); font-size: .92rem; }
.kc-async-loading[hidden] { display: none; }
.kc-async-loading::before { content: ""; flex: none; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--kc-border-subtle); border-top-color: var(--accent);
  animation: ac-spin .7s linear infinite; }
.kc-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px);
  background: var(--panel); color: #fff; font-size: .86rem; font-weight: 600;
  padding: 11px 18px; border-radius: var(--r-card); box-shadow: var(--shadow-3);
  max-width: min(360px, calc(100vw - 32px)); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 500;
}
.kc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* numbered pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 36px 0 6px; flex-wrap: wrap; }
.pager-btn { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px;
  padding: 10px 16px; font-size: .88rem; font-weight: 700;
  transition: border-color var(--dur-fast), color var(--dur-fast); }
.pager-btn:first-child .ic { transform: rotate(180deg); }
.pager-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.pager-btn.is-disabled { color: var(--ink-3); pointer-events: none; }
.pager-num { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
  border: 1px solid transparent; font-size: .88rem; font-weight: 700;
  color: var(--kc-text-secondary); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast), color var(--dur-fast); }
.pager-num:hover { border-color: var(--line); color: var(--ink); }
.pager-num.is-current { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager-gap { color: var(--ink-3); padding: 0 2px; }
.pager-status { display: none; }

/* ----------------------------------------------------------- 6. homepage */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center; gap: 40px; min-height: 480px; }
/* min-width:0 so this grid item can shrink below its own min-content width.
   Without it the hero search field's fixed padding pins the page to ~377px. */
.hero-copy { padding: 56px 0 52px; min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem;
  font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 7px 15px; margin-bottom: 22px; }
.hero h1 { font-size: var(--h1-hero); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; margin: 0 0 14px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { color: var(--ink-2); font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 520px;
  margin: 0 0 26px; }
.hero-sub strong { color: var(--ink); }
.hero-search { position: relative; display: flex; align-items: center; max-width: 560px; }
.hero-search-icon { position: absolute; left: 18px; color: var(--ink-3); display: flex;
  pointer-events: none; }
.hero-search input {
  flex: 1; min-width: 0; height: 56px; border: 1px solid var(--line);
  border-radius: 999px; padding: 0 150px 0 48px; font-size: 1rem; font-family: inherit;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-2);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.hero-search input::placeholder { color: var(--kc-text-quiet); }
.hero-search input:focus { outline: none; border-color: var(--accent);
  box-shadow: var(--shadow-2), var(--shadow-focus); }
.hero-search button {
  position: absolute; right: 6px; height: 44px; padding: 0 22px; border: 0;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: .93rem;
  font-weight: 700; cursor: pointer; transition: background var(--dur-fast);
}
.hero-search button:hover { background: var(--accent-deep); }
.hero-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; font-size: .82rem; color: var(--ink-3); }
.hero-quick a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  color: var(--kc-text-secondary); font-weight: 600; background: var(--paper);
  transition: border-color var(--dur-fast), color var(--dur-fast); }
.hero-quick a:hover { border-color: var(--accent); color: var(--accent-ink); }
.hero-proof { display: flex; gap: 18px 40px; flex-wrap: wrap; margin: 34px 0 0; padding: 0;
  list-style: none; }
.hero-proof li { display: flex; align-items: center; gap: 12px; }
.hero-proof .ic { color: var(--accent); }
.hero-proof strong { display: block; font-size: 1.28rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hero-proof span { font-size: .76rem; color: var(--ink-3); font-weight: 550; }

/* hero media: generated kitchen photography on a charcoal panel
   (image loaded desktop-only via media query; AI-generated in-house — never
   competitor photography) */
.hero-media { position: relative; align-self: stretch; min-height: 480px;
  background:
    radial-gradient(560px 420px at 30% 40%, rgba(86,217,138,.12), transparent 65%),
    linear-gradient(120deg, var(--panel-2), var(--panel));
}
@media (min-width: 981px) {
  .hero-media {
    background:
      linear-gradient(90deg, rgba(12,42,27,0) 55%, rgba(12,42,27,.38) 100%),
      url("/static/img/hero-kitchen.webp") center right / cover no-repeat,
      linear-gradient(120deg, var(--panel-2), var(--panel));
  }
  .hero-media .hero-tiles, .hero-media .hero-glyphs { display: none; }
}
.hero-media::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 160px;
  background: linear-gradient(90deg, var(--paper), transparent); z-index: 2; }
.hero-tiles { position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 18px; padding: 48px 44px 48px 84px; z-index: 1; }
.hero-tile { background: #fff; border-radius: var(--r-card); display: flex; align-items: center;
  justify-content: center; padding: 18px; box-shadow: var(--shadow-3); overflow: hidden; }
.hero-tile img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero-tile:nth-child(1) { grid-row: span 2; }
.hero-tile:nth-child(3) { margin-right: 26px; }
.hero-glyphs { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(2, 108px); gap: 22px; place-content: center;
  padding-left: 40px; }
.hero-glyph { display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  color: var(--accent-bright); }
.hero-glyphs .hero-glyph:nth-child(odd) { transform: translateY(-14px); }

/* department icon tiles */
/* 7 across at desktop, per the approved home design (9 departments render as
   7 + 2). The ≤1180 and ≤680 breakpoints below step it down. */
.dept-tiles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.dept-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: 18px 18px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  /* Grid items default to min-width:auto, which refuses to shrink below the
     tile's own min-content width. Two tiles then pin the whole document to
     ~411px and the page scrolls sideways at every width below 430px. */
  min-width: 0;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.dept-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.dept-tile-glyph { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-card); background: var(--kc-tint-0);
  color: var(--ink); transition: background var(--dur-base), color var(--dur-base); }
.dept-tile:hover .dept-tile-glyph { background: var(--accent-soft); color: var(--accent-ink); }
.dept-tile-name { font-weight: 700; font-size: .95rem; letter-spacing: -.015em; }
.dept-tile-meta { font-size: .78rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
/* Single definition — was .78 here and .72 in the departments-index block. */
.dept-tile-empty { opacity: .78; }
.dept-tile-empty .dept-tile-meta { font-style: italic; }
.dept-tile-all { justify-content: center; align-items: center; text-align: center;
  border-style: dashed; color: var(--ink-2); }
.dept-tile-all:hover { color: var(--ink); }

/* verified price drops showcase */
.drops-show { display: grid; grid-template-columns: 1.25fr 2fr; gap: 16px; }
.drop-feat {
  display: flex; flex-direction: column; padding: 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.drop-feat:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.drop-feat-media { height: 190px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; }
.drop-feat-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.drop-feat-brand { font-size: .72rem; font-weight: 750; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); }
.drop-feat-name { font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em;
  margin: 3px 0 10px; }
.drop-feat-price { display: flex; align-items: baseline; gap: 10px; }
.drop-feat-now { font-size: 1.7rem; font-weight: 820; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; }
.drop-feat-was { color: var(--ink-3); text-decoration: line-through; }
.drop-feat-at { margin-top: 8px; font-size: .8rem; color: var(--ink-3); }
.drop-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drop-mini {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.drop-mini:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1);
  transform: translateY(-2px); }
.drop-mini-top { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; }
.drop-mini-media { width: 58px; height: 58px; display: flex; align-items: center;
  justify-content: center; }
.drop-mini-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.drop-mini-name { font-size: .88rem; font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drop-mini-brand { font-size: .7rem; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); }
.drop-mini-foot { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.drop-mini-now { font-weight: 780; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.drop-mini-was { font-size: .78rem; color: var(--ink-3); text-decoration: line-through; }
.drop-mini-n { font-size: .76rem; color: var(--ink-3); margin-left: auto; }

/* trust cards (3-up) */
.trust-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trust-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.trust-card h3 { font-size: .98rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.trust-card p { margin: 0; font-size: .85rem; color: var(--kc-text-secondary); line-height: 1.55; }

/* popular brands */
.brand-marks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.brand-mark {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 88px; padding: 16px 12px; background: var(--paper);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-md); text-align: center;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.brand-mark:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1);
  transform: translateY(-2px); }
.brand-mark-name { font-weight: 800; letter-spacing: -.015em; font-size: 1rem;
  text-transform: uppercase; color: var(--ink); }
.brand-mark-n { font-size: .7rem; color: var(--kc-text-tertiary); }
.brand-mark-all { border-style: dashed; color: var(--kc-text-secondary); font-weight: 700; }

/* editorial guide cards */
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide {
  display: flex; flex-direction: column; gap: 8px; padding: 26px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: background var(--dur-base), border-color var(--dur-base),
              box-shadow var(--dur-base), transform var(--dur-base);
}
.guide:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.guide-media { display: block; height: 150px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.guide-media img { max-height: 100%; width: 100%; object-fit: cover;
  transition: opacity var(--dur-base); }
.guide:hover .guide-media img { opacity: .88; }
.guide-kicker { font-size: .72rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-ink); }
.guide h3 { font-size: 1.12rem; font-weight: 750; letter-spacing: -.02em; margin: 0; }
.guide p { margin: 0; font-size: .89rem; color: var(--ink-2); flex: 1; }
.guide-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem;
  font-weight: 650; color: var(--ink); margin-top: 6px; }
.guide:hover .guide-cta { color: var(--accent-ink); }

/* -------------------------------------------------- 7. product cards + rails */
.pc {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; position: relative;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.pc:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.pc-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.pc-media {
  position: relative; aspect-ratio: 1 / 1; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  border-bottom: 1px solid var(--line-2); overflow: hidden;
}
.pc-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pc-ph, .pc-media-none::before {
  font-size: 2.9rem; font-weight: 800; color: var(--kc-stone-200); letter-spacing: -.04em;
  user-select: none;
}
.pc-media-none::before { content: attr(data-ph); }
.pc-flag { position: absolute; top: 10px; left: 10px; background: var(--kc-brand-soft);
  border: 1px solid #DCEBE2; color: var(--accent-ink); font-size: .66rem; font-weight: 800;
  border-radius: 999px; padding: 4px 10px; letter-spacing: .04em; }
.pc-best { position: absolute; top: 10px; left: 10px; background: var(--accent);
  color: #fff; font-size: .64rem; font-weight: 800; border-radius: 999px;
  padding: 4px 10px; letter-spacing: .07em; text-transform: uppercase; }
.pc-rep { position: absolute; bottom: 8px; left: 8px; background: #fff;
  border: 1px solid var(--line); color: var(--ink-3); font-size: .64rem; font-weight: 650;
  border-radius: 6px; padding: 2px 7px; }
.pc-quick-actions { position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 6px; }
/* 30px is the intended visual chip; the tap area is grown to 44px with a
   transparent ::before so the two adjacent buttons stop mis-firing. */
.pc-save::before, .pc-compare::before { content: ""; position: absolute;
  inset: -7px; border-radius: 50%; }
.pc-save, .pc-compare {
  position: relative;
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--line);
  color: var(--kc-text-secondary); cursor: pointer; padding: 0;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pc-save:hover, .pc-compare:hover { border-color: var(--accent); color: var(--accent-ink); background: #fff; }
.pc-save[aria-pressed="true"] { color: var(--kc-danger); border-color: var(--kc-danger); background: var(--kc-danger-bg); }
.pc-compare[aria-pressed="true"] { color: var(--accent); border-color: var(--accent);
  background: var(--kc-brand-xsoft); }
.pc-grid.is-list .pc-quick-actions { left: 130px; right: auto; }
.pc-info { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; flex: 1; }
.pc-brand { font-size: .69rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-3); min-height: 1em; }
.pc-name { font-size: .94rem; font-weight: 650; line-height: 1.34; margin: 0; color: var(--ink);
  letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.55em; }
/* Soft grey chip, not a code tag — model numbers are data, so they stay in the
   body face (Inter) with no monospace. */
.pc-model { font-size: .74rem; font-weight: 600; color: var(--kc-stone-800);
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-default);
  border-radius: 7px; padding: 2px 7px; display: inline-block; }
.pc-spec { font-size: .78rem; color: var(--ink-2); }
.pc-price { margin-top: auto; padding-top: 12px; }
.pc-price-line { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pc-amount { font-size: 1.22rem; font-weight: 800; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; }
.pc-gst { font-size: .68rem; color: var(--ink-3); font-weight: 550; }
.pc-range { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pc-offers { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  padding-top: 9px; border-top: 1px solid var(--line); font-size: .78rem;
  font-weight: 700; color: var(--accent-ink); width: 100%; }
.pc-offers-one { color: var(--ink-3); font-weight: 550; }
.pc-noprice { font-size: .82rem; color: var(--ink-3); }

.pc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* list view (toggle) */
.pc-grid.is-list { grid-template-columns: 1fr; }
.pc-grid.is-list .pc-link { flex-direction: row; align-items: stretch; }
/* aspect-ratio:auto left list view with nothing reserving vertical space, so
   every late-decoding thumbnail shifted the rows below it. 4/3 matches the
   168px-wide list thumbnail slot. */
.pc-grid.is-list .pc-media { width: 168px; aspect-ratio: 4 / 3; border-bottom: 0;
  border-right: 1px solid var(--line-2); flex: none; }
.pc-grid.is-list .pc-name { min-height: 0; }
.pc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 226px; gap: 14px;
  overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity;
  scrollbar-width: thin; }
.pc-rail .pc { scroll-snap-align: start; }

/* ------------------------------- 8. list pages: hero band, filters, bars */
.lhero { background: linear-gradient(180deg, var(--kc-tint-0), var(--paper));
  border-bottom: 1px solid var(--line); }
.lhero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 40px; align-items: center; padding: 24px 0 26px; }
.lhero h1 { font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); margin: 4px 0 10px; }
.lhero-sub { color: var(--ink-2); max-width: var(--measure-lede); margin: 0; font-size: 1rem; }
/* The photograph is the subject; a card around it only adds furniture. */
.lhero-media { justify-self: end; width: 100%; max-width: 300px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; }
.lhero-media img { max-height: 100%; object-fit: contain; mix-blend-mode: darken; }
.lhero-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 14px 0 0; font-size: .86rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.lhero-facts > span[aria-hidden] { color: var(--ink-3); }
.lhero-action:not(:empty) { margin-top: 18px; }
.lhero-action .btn { min-height: 44px; }
.lhero-stats { display: flex; gap: 16px 44px; flex-wrap: wrap; padding: 18px 0 22px;
  margin: 0; list-style: none; }
.lhero-stats li { display: flex; align-items: center; gap: 11px; }
.lhero-stats .ic { color: var(--accent); }
.lhero-stats strong { display: block; font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lhero-stats span { font-size: .74rem; color: var(--ink-3); font-weight: 550; }

/* subcategory tiles */
.subcat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 8px; }
.subcat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 16px 10px 13px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.subcat-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.subcat-tile .dept-tile-glyph { width: 42px; height: 42px; }
.subcat-name { font-size: .84rem; font-weight: 650; line-height: 1.25; }
.subcat-n { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* active filter bar */
.active-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  padding: 10px 16px; margin-bottom: 18px; }
.active-bar-label { font-size: .82rem; font-weight: 700; color: var(--kc-text-secondary); }
.chip-x {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--kc-tint-0); border-radius: 999px; padding: 6px 12px; font-size: .82rem;
  font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.chip-x:hover { border-color: var(--kc-danger); color: var(--kc-danger); }
/* .chips-clear: see the single definition in the PLP controls block below. It
   was defined twice with different size, weight, colour and underline. */
.active-bar-right { display: flex; align-items: center; gap: 14px; margin-left: auto;
  flex-wrap: wrap; }
.toolbar-count { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.toolbar-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.toolbar-sort { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem;
  color: var(--ink-3); font-weight: 550; white-space: nowrap; }
.sort-select {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: inherit;
  font-size: .86rem; font-weight: 600; background: var(--paper); color: var(--ink);
  cursor: pointer; transition: border-color var(--dur-fast);
}
.sort-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
/* .view-toggle was defined twice — a bordered 36×36 group here and a tinted
   36×32 pill group in the "V3 page polish" block. The later one won on every
   page, so this earlier definition styled nothing while still reading as the
   canonical one. Single definition now lives with the other PLP controls. */
.toolbar-filters { display: none; }
.toolbar-filter-toggle { flex: 0 0 auto; }

/* listing rules, stated once as a caption above the grid */
.trust-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px;
  font-size: .8rem; color: var(--ink-2); }
.trust-line > span { display: inline-flex; align-items: center; gap: 7px; }
.trust-line .ic { color: var(--accent); flex: none; }

/* brand: category shortcuts over this brand's own listing */
.brand-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.brand-cats .pill { min-height: 34px; }

.list-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 30px;
  align-items: start; }
.list-shell.is-filter-hidden { grid-template-columns: minmax(0, 1fr); }
.list-shell.is-filter-hidden .list-rail { display: none; }
/* The rail scrolls with the page: no inner scrollbar, and no sticky clipping
   when the filter list is taller than the viewport (brand pages). */
.list-rail { position: static; max-height: none; overflow: visible; }
.list-main { min-width: 0; }

/* filter form (rail + drawer) */
.fform { font-size: .9rem; }
.list-rail .fform { border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 8px 18px 18px; background: var(--paper); }
.fform-head { display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 0 4px; font-weight: 800; font-size: 1rem; }
.fform-head a { font-size: .78rem; font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 2px; }
.fgroup { border-bottom: 1px solid var(--line-2); padding: 14px 0; margin: 0; }
.fgroup:last-of-type { border-bottom: 0; }
.fheading { display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: .88rem; cursor: pointer; list-style: none;
  letter-spacing: -.01em; }
details.fgroup summary::-webkit-details-marker { display: none; }
details.fgroup[open] .fheading .ic { transform: rotate(180deg); }
.fheading .ic { color: var(--ink-3); transition: transform var(--dur-fast); }
.fprice { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.fprice-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fprice-field span { font-size: .72rem; font-weight: 650; color: var(--ink-3); }
.fprice-field input { width: 100%; min-width: 0; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .88rem; }
.fprice-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.fprice-dash { color: var(--ink-3); padding-bottom: 9px; }
.fsearch { position: relative; margin-top: 10px; }
.fsearch input { width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px 7px 30px; font: inherit; font-size: .84rem; background: var(--tint); }
.fsearch input:focus { outline: none; border-color: var(--accent); background: var(--paper);
  box-shadow: var(--shadow-focus); }
.fsearch .ic { position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); }
/* No inner scroll: Show more / Show fewer is what reveals the rest of a group. */
.foptions { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.fopt { display: flex; align-items: center; gap: 10px; font-size: .87rem;
  color: var(--ink-2); cursor: pointer; padding: 5px 6px; border-radius: 7px; }
/* .fopt sets display:flex, which outranks the UA [hidden] rule — without this
   the Show more / Show fewer and filter-search hiding have no visible effect. */
.fopt[hidden] { display: none; }
.fopt:hover { background: var(--kc-tint-0); color: var(--ink); }
.fopt input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.fopt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt-n { color: var(--ink-3); font-size: .74rem; font-variant-numeric: tabular-nums; }
.fmore { border: 0; background: none; color: var(--ink-2); font-size: .8rem;
  font-weight: 650; cursor: pointer; padding: 6px; text-align: left;
  text-decoration: underline; text-underline-offset: 2px; }
.factions { padding-top: 16px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; position: sticky; bottom: 0; background: var(--paper); }
.fclear { font-size: .82rem; color: var(--ink-2); text-decoration: underline;
  text-underline-offset: 2px; }

/* mobile filter drawer */
/* overflow:hidden clips the off-canvas panel, which parks 300px to the right
   of the viewport while closed. Without it that translated panel inflates the
   document's scrollWidth and the page reports a sideways scroll. The open
   panel sits inside the viewport, so nothing visible is ever clipped. */
.filter-drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden;
  overflow: hidden; }
.filter-drawer.is-open { visibility: visible; }
.filter-drawer-scrim { position: absolute; inset: 0; background: rgba(12,42,27,.4);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-in); }
.filter-drawer.is-open .filter-drawer-scrim { transition: opacity var(--dur-slow) var(--ease); }
.filter-drawer.is-open .filter-drawer-scrim { opacity: 1; }
.filter-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
  background: var(--paper); box-shadow: var(--shadow-3);
  transform: translateX(102%);
  /* exit; the entry override sits on .is-open below */
  transition: transform var(--dur-fast) var(--ease-in);
  display: flex; flex-direction: column;
}
.filter-drawer.is-open .filter-drawer-panel { transform: none;
  transition: transform var(--dur-slow) var(--ease); }
/* The close button is the only child: filter_panel() below renders the
   "Filter products / Clear all" row. flex-end keeps the button on the right
   where it was when a title sat beside it — space-between would push a lone
   child to the left edge. */
.filter-drawer-head { display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 750;
  font-size: 1.02rem; }
.filter-drawer-panel .fform { overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y; padding: 4px 18px 22px; flex: 1; }

.subtype-nav { margin: 22px 0 4px; }
.subtype-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700; margin: 16px 0 8px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.index-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.index-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 18px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.index-line:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.index-name { font-weight: 700; letter-spacing: -.015em; }
.index-meta { font-size: .78rem; color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------ 9. product page */
.pd-top { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 21fr) 350px;
  gap: 36px; align-items: start; margin-bottom: 8px; }

.gal { position: sticky; top: var(--sticky-top); }
.gal-main {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--kc-tint-0); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 28px; overflow: hidden; position: relative;
}
.gal-main img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gal-none { color: var(--ink-3); font-size: .88rem; }
.gal-rep-note { margin: 8px 0 0; font-size: .78rem; color: var(--ink-3); }
.gal-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gal-thumb {
  width: 62px; height: 62px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; padding: 6px; cursor: pointer; transition: border-color var(--dur-fast);
}
.gal-thumb img { max-height: 100%; object-fit: contain; }
.gal-thumb:hover { border-color: var(--ink-3); }
.gal-thumb.is-active { border-color: var(--ink); }
/* gallery.js hides thumbnails whose image failed to load, so the strip never
   shows an empty slot; `hidden` must beat the button's own display. */
.gal-thumb[hidden], .gal-thumbs[hidden] { display: none; }

.pd-head { min-width: 0; }
.pd-tag-row { display: flex; gap: 8px; margin-bottom: 10px; }
.pd-brand-row { display: flex; margin: 0 0 4px; }
.pd-brand { font-size: .8rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-ink); }
.pd-title { font-size: var(--h1-record); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); margin: 6px 0 8px; }
.pd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
  margin-bottom: 16px; font-size: .84rem; color: var(--ink-2); }
.pd-meta a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.pd-meta a:hover { color: var(--ink); }
.pd-meta-model { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 650;
  color: var(--kc-stone-800); padding: 4px 0; font-variant-numeric: tabular-nums; }
.pd-meta-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; }
.pd-meta-label { color: var(--ink); font-weight: 750; text-decoration: none; }
.pd-lede { font-size: .93rem; color: var(--ink-2); max-width: 56ch; margin: 0 0 18px; }

/* key spec chips — 4-across at desktop, 2×2 at ≤680px */
.pd-keyspecs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px;
  padding: 0; }
.pd-keyspecs div { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0;
  border: 1px solid var(--line-2); background: var(--tint); border-radius: var(--r-md);
  padding: 14px 16px; }
.pd-keyspecs dd { margin: 0; font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em;
  line-height: 1.05; grid-row: 1; align-self: start; }
.pd-keyspecs dt { color: var(--ink-3); margin: 6px 0 0; font-size: .72rem; font-weight: 550;
  grid-row: 2; align-self: end; }

/* buy box */
.buybox { border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 22px 24px; background: var(--paper);
  position: sticky; top: var(--sticky-top); }
.buybox-label { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent-ink); }
.buybox-label .ic { color: var(--accent); }
.buybox-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 2px; }
.buybox-price { font-size: 2.35rem; font-weight: 830; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1; }
.buybox-gst { font-size: .8rem; color: var(--ink-3); }
.buybox-sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: .86rem; }
.buybox-rrp { color: var(--ink-3); text-decoration: line-through; }
.buybox-save { font-weight: 700; color: var(--accent-ink); }
.buybox-banner { display: flex; align-items: center; gap: 10px; margin: 16px 0 0;
  background: var(--kc-brand-soft); border: 1px solid #DCEBE2; border-radius: var(--r-md);
  padding: 11px 14px; font-size: .82rem; color: var(--accent-ink); font-weight: 600; }
.buybox-banner .ic { color: var(--accent); }
.buybox-banner small { display: block; font-weight: 500; color: var(--kc-stone-600); }

.range-bar { margin: 18px 0 4px; padding: 0 7px; }
.range-label { font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin-bottom: 12px; display: block; }
.range-track { position: relative; height: 5px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--kc-stone-200) 55%, var(--kc-stone-300) 100%); }
.range-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 3.5px solid var(--accent); transform: translate(-50%, -50%); }
.range-dot-med { border-color: var(--ink-3); width: 11px; height: 11px; border-width: 3px; }
.range-ends { display: flex; justify-content: space-between; margin-top: 10px;
  font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.range-ends strong { display: block; color: var(--ink); font-size: .86rem; }
.range-ends span { display: flex; flex-direction: column; }
.range-ends span:nth-child(2) { text-align: center; }
.range-ends span:last-child { text-align: right; }

.buybox-ctas { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.buybox-ctas .btn { width: 100%; white-space: normal; min-width: 0; }
.buybox-finance-link {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .84rem; font-weight: 650; color: var(--kc-brand-deep);
  text-decoration: none; padding: 8px 0;
}
.buybox-finance-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.buybox-finance-link .ic { color: var(--kc-brand-deep); }
.buybox .fine-print { margin-top: 12px; }

/* anchor tab bar */
.pd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin: 30px 0 0; overflow-x: auto; scrollbar-width: none; }
.pd-tabs::-webkit-scrollbar { display: none; }
/* .pd-tab was defined twice — an underline tab here, a filled pill in the W1
   PDP block. The pill won; product.html renders .pd-tab-rail/.pd-tab-pills, so
   this underline treatment and the .pd-tabs container above it never appeared.
   The container is left in place (unused, not duplicated) and is on the
   dead-class list rather than deleted in this pass. */

/* offers */
.offers { margin-top: 18px; }
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, .5fr) auto auto auto;
  gap: 8px 22px; align-items: center; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  margin-bottom: 10px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.offer:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.offer.is-best { border: 1.5px solid var(--accent);
  background: linear-gradient(0deg, rgba(11, 110, 63, .025), rgba(11, 110, 63, .025)), var(--paper);
  position: relative; }
/* .offer-best-flag was defined twice — an absolutely-positioned tab riding the
   card's top edge here, and an inline grid pill in the W1 PDP block. The pill
   won, which is why .offer.is-best still carries `position: relative` for an
   anchor nothing uses. Single definition sits with the other offer styles. */
.offer.is-flagged { opacity: .62; }
.offer-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Logo tile. Definite tracks for the same reason as .dcard-logo: an `auto`
   track would be sized by the wordmark's max-content, so the image's own
   `max-width: 100%` would resolve against itself and overflow:hidden would clip
   the middle out of every wide logo. Both children share one cell so the logo
   sits over the initials. */
.offer-avatar { display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center; overflow: hidden;
  flex: none; width: 104px; height: 56px; padding: 7px 10px;
  border-radius: var(--r-card); background: var(--tint);
  border: 1px solid var(--line); }
/* Landscape, not square: retailer logos are almost all wide wordmarks, and a
   square tile letterboxed them down to an unreadable strip. */
.offer-avatar > * { grid-area: 1 / 1; }
/* Letterbox: never cropped, never distorted, any aspect ratio. */
.offer-avatar img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
.offer-avatar-ph { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--ink-2); }
/* Initials are the fallback, so they hide only while a logo is actually
   present. The img removes itself on error, which re-reveals them. */
.offer-avatar:has(img) .offer-avatar-ph { visibility: hidden; }
.offer-avatar:has(img) { background: #fff; }
.offer.is-best .offer-avatar { background: var(--accent-soft); border-color: #DCEBE2; }
.offer.is-best .offer-avatar:has(img) { background: #fff; }
.offer.is-best .offer-avatar-ph { color: var(--accent-ink); }
.offer-id { min-width: 0; }
.offer-retailer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-weight: 750; font-size: .98rem; letter-spacing: -.015em; }
.offer-retailer a { color: var(--ink); }
.offer-retailer a:hover { text-decoration: underline; text-underline-offset: 2px; }
.offer-title { display: block; font-size: .79rem; color: var(--ink-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch; }
.offer-meta { display: flex; flex-direction: column; gap: 5px;
  font-size: .8rem; color: var(--ink-2); }
.stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; }
.stock-in { color: var(--accent-ink); }
.stock-out { color: var(--danger); }
.stock-unknown, .stock-stale { color: var(--ink-3); }
.stock-suspect { color: #8A5D12; }  /* same amber ink as .fin-callout-amber */
.offer-pack { color: var(--ink-3); font-size: .76rem; }
/* Last checked is its own column, not a second line under the stock status. */
.offer-checked { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offer-checked-label { font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); }
.offer-checked-date { font-size: .82rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; }
.offer-price { font-size: 1.34rem; font-weight: 820; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.offer-price small { display: block; font-size: .68rem; font-weight: 550; color: var(--ink-3);
  letter-spacing: 0; }
.offers-more { display: flex; justify-content: center; margin: 18px 0 4px; }
.offers-rest[hidden] { display: none; }
.offers-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); }
.offers-divider::before, .offers-divider::after { content: ""; height: 1px; flex: 1;
  background: var(--line); }
/* Standfirst under a divider — why this group is separated from the comparison. */
.offers-note { margin: 0 0 14px; font-size: .84rem; line-height: 1.55;
  color: var(--kc-text-secondary); max-width: var(--measure-prose); }
.offers-empty { margin: 4px 0 0; font-size: .92rem; line-height: 1.6;
  color: var(--kc-text-secondary); }

/* Used / ex-display / clearance rows. Held one step back from the new-stock
   rows — present and readable, but never competing for the eye with a price
   that is actually comparable. Deliberately NOT dimmed like .is-flagged: these
   are live, buyable offers, just not new ones. */
.offer.is-used { background: var(--kc-tint-0); }

/* Prices we hold but do not believe. Dimmed like .is-flagged, because unlike a
   used unit this row is not an offer the buyer can act on until the retailer
   confirms it. */
.offer.is-suspect { opacity: .62; }
.offer-condition {
  display: inline-flex; align-items: center; flex: none;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--kc-deal-bg); border: 1px solid var(--kc-deal-border);
  color: var(--kc-deal-fg); font-size: .62rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

/* 3-col insight band: chart / key specs / at a glance */
.pd-band { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px;
  align-items: stretch; }
.band-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; min-width: 0; }
.band-card > h3 { font-size: 1.02rem; font-weight: 750; margin: 0 0 14px;
  letter-spacing: -.02em; }
.band-specs { width: 100%; font-size: .86rem; }
.band-specs th { text-align: left; font-weight: 550; color: var(--ink-3);
  padding: 8px 10px; }
.band-specs td { padding: 8px 10px; font-weight: 650; text-align: right; }
.band-specs tr:nth-child(odd) { background: var(--tint); }
.band-specs tr th:first-child { border-radius: 7px 0 0 7px; }
.band-specs tr td:last-child { border-radius: 0 7px 7px 0; }
.band-checks { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.band-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .87rem;
  color: var(--ink-2); }
.band-checks .ic { color: var(--accent); margin-top: 2px; }
.band-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: .84rem; font-weight: 650; color: var(--ink); }

/* price history chart card */
.chart-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; }
.band-chart-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.band-chart-head h3 { margin: 0; }
.chart-controls { display: flex; gap: 6px; }
.chart-range {
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  padding: 5px 14px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  color: var(--kc-text-secondary); transition: border-color var(--dur-fast), background var(--dur-fast),
  color var(--dur-fast);
}
.chart-range:hover { border-color: var(--accent); color: var(--accent-ink); }
.chart-range.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.price-chart { width: 100%; min-height: 200px; }
.price-chart svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; gap: 20px; margin-top: 10px; font-size: .8rem;
  color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-item::before { content: ""; display: inline-block; width: 22px; height: 3px;
  border-radius: 2px; }
.legend-low::before { background: var(--accent); }
.legend-med::before { background: linear-gradient(to right, #8aa2b8 0, #8aa2b8 5px, transparent 5px, transparent 9px) repeat-x; background-size: 9px 3px; }
.chart-note { margin: 8px 0 0; font-size: .75rem; color: var(--ink-3); }
.chart-empty { color: var(--ink-3); font-size: .9rem; padding: 46px 0; text-align: center; }
.chart-loading { display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 200px; color: var(--ink-3); font-size: .88rem; }
.chart-loading::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent); animation: ac-spin .62s linear infinite; }

/* description + full specs */
.pd-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px;
  align-items: start; }
.desc-body { font-size: .97rem; color: var(--ink-2); max-width: var(--measure-prose); }
.desc-body h2, .desc-body h3, .desc-body h4 { color: var(--ink); font-size: 1rem;
  font-weight: 750; margin-top: 1.4em; margin-bottom: .5em; }
.desc-body ul { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.desc-body ul li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
.desc-body ul li::before {
  content: "";
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  background-color: var(--accent); border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3 3 7-7'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

.specs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); }
.specs-head { padding: 18px 18px 0; }
.specs-head h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.022em; margin: 0 0 14px; }
.specs-grid { width: 100%; font-size: .89rem; }
.specs-grid th { text-align: left; font-weight: 500; color: var(--kc-text-secondary); width: 46%;
  padding: 10px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.specs-grid td { padding: 10px 18px; border-bottom: 1px solid var(--line-2);
  font-weight: 650; text-align: right; }
.specs-grid tr:nth-child(odd) { background: var(--kc-tint-0); }
.specs-grid tr:last-child th, .specs-grid tr:last-child td { border-bottom: 0; }
.specs-more { display: block; width: 100%; text-align: center; padding: 12px;
  border: 0; border-top: 1px solid var(--line-2); background: var(--paper);
  font-size: .84rem; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.specs-more:hover { color: var(--ink); background: var(--tint); }
.specs-rest[hidden] { display: none; }

.crosslinks { margin-top: 34px; font-size: .88rem; color: var(--ink-3); }
.crosslinks a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* enquiry */
.enquiry-form { max-width: 640px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 26px; }
.enquiry-form label { display: block; font-size: .84rem; font-weight: 650; margin: 14px 0 5px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
  font-size: .92rem; background: var(--paper); transition: border-color var(--dur-fast); }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.enquiry-form textarea { min-height: 110px; resize: vertical; }
.enquiry-row { display: flex; gap: 14px; }
.enquiry-row label { flex: 1; }
.enquiry-form .btn { margin-top: 18px; }
/* Wrappers that already supply the card (background, radius, border/shadow and
   padding) mark themselves .card-form so the nested .enquiry-form drops its own
   box and sits flush inside the one intended card instead of double-boxing.
   Forms used standalone keep the box they get from .enquiry-form above. */
.card-form .enquiry-form { max-width: none; background: none; border: 0;
  border-radius: 0; padding: 0; }
.enquiry-ok { background: var(--accent-soft); border: 1px solid #DCEBE2; color: var(--accent-ink);
  border-radius: var(--r-md); padding: 16px 20px; max-width: 640px; }
.enquiry-err { background: var(--kc-danger-bg); border: 1px solid #E8C4C2; color: var(--kc-danger);
  border-radius: var(--r-md); padding: 12px 18px; margin-bottom: 12px; max-width: 640px; }
.hp-field { position: absolute !important; left: -9999px !important; height: 1px; width: 1px;
  opacity: 0; }

/* autocomplete */
.ac-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 130;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-2); overflow: hidden; text-align: left;
}
.ac-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; border: 0; background: none; font: inherit; font-size: .9rem;
  cursor: pointer; color: var(--ink); }
.ac-item:hover, .ac-item.is-active { background: var(--kc-tint-0); }
.ac-kind { font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--kc-text-tertiary); flex: none; width: 58px; }
/* stone chip style for model number in autocomplete */
.ac-model { font-weight: 600; color: var(--kc-stone-800); font-size: .78rem;
  margin-left: auto;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-default);
  border-radius: 7px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.ac-item[aria-selected="true"] { background: var(--kc-tint-0); }
.ac-note { display: flex; align-items: center; gap: 9px; padding: 13px 16px;
  font-size: .86rem; color: var(--kc-text-tertiary); }
.ac-note.ac-loading::before { content: ""; flex: none; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent);
  animation: ac-spin .62s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* prose (info pages) */
.prose { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 38px;
  background: var(--paper); }
.prose h2 { font-size: 1.18rem; margin-top: 1.5em; }
.prose p, .prose li { color: var(--ink-2); }

/* -------------------------------------------- 10. dealer public pages */
.dlr-hero { background: linear-gradient(180deg, var(--kc-tint-0), var(--paper));
  border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.dlr-hero-inner { display: flex; gap: 26px; align-items: center; padding: 34px 0;
  flex-wrap: wrap; }
.dlr-logo-tile { width: var(--avatar-xl); height: var(--avatar-xl); flex: none;
  display: flex; align-items: center;
  justify-content: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 10px;
  font-size: 2rem; font-weight: 800; color: var(--ink-2); }
.dlr-logo-tile img { max-height: 100%; max-width: 100%; object-fit: contain; }
.dlr-head { flex: 1; min-width: 240px; }
.dlr-head h1 { font-size: var(--h1-record); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading);
  margin: 0 0 4px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.dlr-sub { color: var(--ink-2); margin: 0; max-width: var(--measure-lede); }
.dlr-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.dlr-stats { display: flex; gap: 14px 40px; flex-wrap: wrap; padding: 0 0 26px;
  margin: 0; list-style: none; }
.dlr-stats li { display: flex; align-items: center; gap: 11px; }
.dlr-stats .ic { color: var(--accent); }
.dlr-stats strong { display: block; font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dlr-stats span { font-size: .74rem; color: var(--ink-3); font-weight: 550; }

/* ---------------------------------- 10.2 dealer profile (2026-07-23 redesign) */
.dpr-banner { position: relative; background: var(--panel); min-height: 210px;
  overflow: hidden; }
.dpr-banner-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55; }
.dpr-banner::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,42,27,.55), rgba(12,42,27,.2) 55%,
              rgba(12,42,27,.65)); }
.dpr-banner-inner { z-index: 1; }
.dpr-banner-inner { position: relative; display: flex; justify-content: flex-end;
  align-items: center; min-height: 210px; padding-top: 20px; padding-bottom: 20px; }
.dpr-banner-panel { display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; background: rgba(12, 42, 27, .78); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
  padding: 20px 24px; color: #fff; max-width: 340px; }
.dpr-banner-kicker { font-size: .68rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-bright); }
.dpr-banner-line { font-size: .95rem; color: rgba(255,255,255,.85); }
.dpr-banner-line strong { color: #fff; font-weight: 800;
  font-variant-numeric: tabular-nums; }

.dpr-id { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 22px 26px; margin-top: -46px; position: relative; }
.dpr-logo { width: 104px; height: 104px; margin-top: -60px; background: var(--paper); }
.dpr-id-main { flex: 1; min-width: 250px; }
.dpr-id-main .crumbs { margin-bottom: 8px; }
.dpr-name { font-size: var(--h1-record); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading);
  margin: 0 0 4px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.dpr-sub { color: var(--ink-2); margin: 0; }
/* A company's own tagline, unedited — some run past 180 characters. Clamped
   here, never truncated in the data, so the full sentence stays readable to
   assistive technology and to anyone who copies the text. */
.dpr-sub--tagline { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-width: 62ch; }
.dpr-contact { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.dpr-contact-item { display: inline-flex; align-items: center; gap: 7px;
  font-size: .87rem; font-weight: 600; color: var(--ink-2); }
.dpr-contact-item .ic { color: var(--accent); }
.dpr-contact-item a { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; margin-left: 2px; }
.dpr-ctas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-left: auto; }

.dpr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 18px 0 8px; }
.dpr-stat { display: flex; align-items: flex-start; gap: 13px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.dpr-stat .glyph { width: 42px; height: 42px; }
.dpr-stat strong { display: block; font-size: 1.18rem; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dpr-stat span > span { display: block; font-size: .82rem; font-weight: 650;
  color: var(--ink); margin-top: 1px; }
.dpr-stat em { display: block; font-style: normal; font-size: .73rem;
  color: var(--ink-3); margin-top: 1px; }

.dpr-about { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 30px; margin: 18px 0 8px; }
.dpr-about-copy .sec-title { margin-bottom: 10px; }
.dpr-about-copy p { color: var(--ink-2); line-height: 1.6; margin: 0 0 .8em; }
/* White card, per the approved profile — the fact rows were sitting directly on
   the page ground while every neighbouring block was carded. */
.dpr-about-facts { display: grid; gap: 16px; align-content: start;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px 20px; }
.dpr-fact { display: flex; align-items: flex-start; gap: 12px; }
.dpr-fact .glyph { width: 40px; height: 40px; }
.dpr-fact strong { display: block; font-size: .9rem; font-weight: 750;
  letter-spacing: -.01em; }
.dpr-fact span > span { display: block; font-size: .78rem; color: var(--ink-3); }

.dpr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 26px 0 8px; align-items: start; }
/* The approved profile renders Brands and Categories as two cards. Both were
   bare divs, so the pill rows floated on the page ground while every
   neighbouring block sat on a card. */
.dpr-cols > div { background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  padding: 22px 24px; min-width: 0; }

.dpr-band { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; background: var(--kc-surface-inverse); color: #fff;
  border-radius: var(--r-lg); padding: 30px 34px; margin: 30px 0 8px; }
.dpr-band-copy .tag { margin-bottom: 10px; }
.dpr-band h2 { font-size: 1.35rem; font-weight: 780; letter-spacing: -.024em;
  margin: 0 0 6px; }
.dpr-band p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.72);
  max-width: 560px; }

/* social row in the profile identity card — renders only when a profile has
   social links recorded; shares the dpr-ctas row with the buttons. */
.dpr-social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0;
  flex-basis: 100%; }
.dpr-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-2); background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.dpr-social a:hover { border-color: var(--accent); color: var(--accent); }
/* The social row plus the date the links were last read off the company's own
   site. The wrapper takes the full dpr-ctas row so the date sits under the
   icons rather than beside them. Rendered only when links exist. */
.dpr-social-block { flex-basis: 100%; }
.dpr-social-checked { margin: 7px 0 0; font-size: .74rem; color: var(--ink-3); }
/* 36px reads well beside the buttons under a mouse, but is under the 44px
   touch target. Widened for coarse pointers and for narrow viewports, where a
   company holding all eight networks would otherwise push the row off-screen —
   hence the wrap. */
@media (pointer: coarse), (max-width: 700px) {
  .dpr-social { flex-wrap: wrap; }
  .dpr-social a { width: 44px; height: 44px; }
}
.dpr-social-contact { flex-basis: auto; margin-top: 14px; }
.dpr-social-contact a { width: auto; border-radius: 999px; padding: 0 12px; gap: 7px;
  font-size: .78rem; font-weight: 650; }
.dpr-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.dpr-meta-item { display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; color: var(--ink-2); }
.dpr-meta-item .ic { color: var(--accent); }
/* A masked address inside a facts cell. `.dpr-fact span > span` blocks every
   nested span, which split the mask's prefix, blurred filler and ellipsis onto
   three lines and read as three separate values. The mask is one value. */
.dpr-fact .kc-mask > span { display: inline; }
.dpr-about-facts .dpr-facts-note { grid-column: 1 / -1; margin: 0;
  display: flex; align-items: center; gap: 7px; }
.dpr-facts-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 16px 0; font-size: .88rem; }
.dpr-facts-list dt { color: var(--ink-3); font-weight: 650; }
.dpr-facts-list dd { margin: 0; color: var(--ink-2); }
.dpr-trust { background: var(--tint); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 8px; }
.dpr-trust-title { margin: 0 0 10px; font-size: .78rem; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dpr-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dpr-trust-list li { display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 650; color: var(--ink); }
.dpr-trust-list .ic { color: var(--accent); }
.dpr-locations { margin: 36px 0; }
.dpr-location-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  overflow: hidden; background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
}
.dpr-location-main { min-width: 0; padding: 24px; }
.dpr-location-head { align-items: baseline; margin-bottom: 16px; }
.dpr-location-head .sec-title { margin: 0; }
.dpr-location-count { color: var(--kc-text-tertiary); font-size: .76rem; white-space: nowrap; }
.dpr-location-details { display: grid; gap: 10px; }
.dpr-loc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dpr-loc-row, .dpr-hours-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px 12px; align-items: center; min-height: 62px; padding: 10px 14px;
  background: var(--kc-surface-page); border: 1px solid var(--kc-border-subtle);
  border-radius: var(--r-md);
}
.dpr-loc-glyph { width: 34px; height: 34px; border-radius: var(--r-sm); }
.dpr-loc-copy { display: grid; gap: 2px; min-width: 0; }
.dpr-loc-copy strong { font-size: .87rem; }
.dpr-loc-copy > span { color: var(--kc-text-secondary); font-size: .82rem; line-height: 1.45; }
.dpr-directions {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; padding: 0 2px 0 12px; color: var(--kc-text-link);
  font-size: .78rem; font-weight: 750; text-decoration: none;
}
.dpr-directions:hover { color: var(--kc-brand-hover); text-decoration: underline;
  text-underline-offset: 3px; }
.dpr-directions:focus-visible { outline: 2px solid var(--kc-brand-accent);
  outline-offset: 2px; border-radius: var(--r-sm); }
.dpr-hours-row { grid-template-columns: 34px minmax(0, 1fr); }
.dpr-hours-copy { min-width: 0; }
.dpr-loc-heading {
  margin: 0 0 7px; color: var(--kc-text-tertiary); font-size: .69rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dpr-hours { margin: 0; color: var(--kc-text-secondary); font-size: .82rem;
  line-height: 1.55; white-space: pre-line; }
.dpr-hours-list { display: grid; gap: 4px; margin: 0; }
.dpr-hours-list > div { display: grid; grid-template-columns: minmax(64px, auto) 1fr;
  gap: 10px; color: var(--kc-text-secondary); font-size: .8rem; }
.dpr-hours-list dt { font-weight: 750; }
.dpr-hours-list dd { margin: 0; }
.dpr-service-areas { padding-top: 6px; }
.dpr-service-areas .pill-row { margin: 0; padding: 0; list-style: none; }
.dpr-service-areas .pill { font-size: .75rem; }
.dpr-location-empty {
  display: flex; gap: 12px; align-items: center; min-height: 94px; padding: 16px;
  border: 1px dashed var(--kc-border-strong); border-radius: var(--r-md);
  background: var(--kc-surface-page);
}
.dpr-location-empty .glyph { width: 38px; height: 38px; }
.dpr-location-empty p { display: grid; gap: 2px; margin: 0; }
.dpr-location-empty strong { font-size: .85rem; }
.dpr-location-empty p span { color: var(--kc-text-tertiary); font-size: .78rem; }
.dpr-showroom {
  display: flex; flex-direction: column; min-width: 0; padding: 24px;
  border-left: 1px solid var(--kc-border-default);
}
.dpr-showroom-head { display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; margin-bottom: 10px; }
.dpr-showroom-head h3 {
  margin: 0; color: var(--kc-text-tertiary); font-size: .69rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dpr-showroom-head span { color: var(--kc-text-link); font-size: .72rem; font-weight: 750; }
.dpr-showroom-media { min-height: 210px; overflow: hidden;
  border-radius: var(--r-md); background: var(--kc-surface-page); }
.dpr-showroom-media > img { display: block; width: 100%; height: 100%; min-height: 210px;
  aspect-ratio: 4 / 3; object-fit: cover; }
.dpr-showroom-empty {
  display: grid; place-items: center; align-content: center; gap: 10px; flex: 1;
  min-height: 210px; padding: 20px; border: 1px dashed var(--kc-border-strong);
  border-radius: var(--r-md); background: var(--kc-surface-page); text-align: center;
}
.dpr-showroom-empty .glyph { width: 40px; height: 40px; }
.dpr-showroom-empty p { max-width: 24ch; margin: 0; color: var(--kc-text-tertiary);
  font-size: .78rem; line-height: 1.5; }
.dpr-showroom-note { margin: 9px 0 0; color: var(--kc-text-tertiary);
  font-size: .7rem; line-height: 1.45; }
.dpr-contact-block { margin: 36px 0; padding: 22px 24px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.dpr-contact-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ------------------------------------------ 10.5 dealer plans & pricing */
.plans-hero { text-align: left; padding: 48px 0 36px;
  background: linear-gradient(180deg, var(--kc-tint-0), var(--paper));
  border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.plans-kicker { display: inline-block; font-size: .74rem; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 12px; }
.plans-hero h1 { font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading);
  margin: 0 0 12px; max-width: 18ch; }
.plans-hero h1 em { font-style: normal; color: var(--accent); }
.plans-sub { color: var(--ink-2); max-width: var(--measure-lede); margin: 0; font-size: 1.04rem; }
.plans-sub strong { color: var(--ink); }
.plans-compare { margin: 48px 0 8px; max-width: 100%; overflow-x: auto; }
.plans-compare .sec-title { margin-bottom: 16px; }

.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: stretch; margin-bottom: 14px; }
.plan-card { position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.plan-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.plan-card.is-popular { border: 1.5px solid var(--accent); box-shadow: var(--shadow-2); }
.plan-popular-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .64rem; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 999px;
  padding: 5px 14px; white-space: nowrap; }
.plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.plan-glyph { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 46px; height: 46px; border-radius: var(--r-card); flex: none;
  overflow: hidden; }
.plan-medal { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #fff; }
.plan-glyph-free { background: var(--tint); color: var(--ink-2); }
.plan-glyph-bronze { background: #f7ece2; color: #92531f; }
.plan-glyph-silver { background: #eef1f5; color: #4c5c6d; }
.plan-glyph-gold { background: #f7f0dc; color: #8a6d1d; }
.plan-name { font-size: 1.2rem; font-weight: 780; letter-spacing: -.02em; margin: 0; }
.plan-tag { font-size: .78rem; color: var(--ink-3); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; }
.plan-amount { font-size: 2.1rem; font-weight: 820; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; }
.plan-per { font-size: .78rem; color: var(--ink-3); }
.plan-desc { font-size: .86rem; color: var(--ink-2); margin: 0 0 18px; min-height: 3.4em; }
.plan-feats { list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 9px;
  font-size: .85rem; color: var(--ink-2); }
.plan-feats li { display: flex; gap: 9px; align-items: flex-start; }
.plan-feats .ic { color: var(--accent); margin-top: 2px; }
.plan-feats strong { color: var(--ink); }
.plan-feats-head { font-weight: 700; color: var(--accent-ink); font-size: .8rem; }

.plans-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.plans-table { width: max(100%, 660px); min-width: 660px; font-size: .88rem; }
.plans-table thead th { text-align: left; font-weight: 750; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--tint); }
.plans-table thead th:first-child { width: 26%; }
.plans-table thead .plan-col-bronze { color: #92531f; }
.plans-table thead .plan-col-silver { color: #4c5c6d; }
.plans-table thead .plan-col-gold { color: #8a6d1d; }
.plans-table tbody th { text-align: left; font-weight: 600; color: var(--ink-2);
  padding: 11px 18px; border-bottom: 1px solid var(--line-2); }
.plans-table tbody td { padding: 11px 18px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); }
.plans-table tbody tr:last-child th, .plans-table tbody tr:last-child td { border-bottom: 0; }
.plans-table tbody tr:hover { background: var(--kc-tint-0); }
.plans-yes { color: var(--accent); }

.plans-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 40px 0 10px; padding: 30px 34px;
  background: var(--tint); border: 1px solid var(--line-2); border-radius: var(--r-lg); }

/* ----------------------------------------------- 10.5a account checkout */
.checkout-hero {
  padding: 44px var(--gutter) 86px; text-align: center;
  background: var(--kc-green-50);
}
.checkout-hero-inner { max-width: 670px; margin: 0 auto; }
.checkout-secure {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 17px;
  color: var(--kc-brand-deep); font-size: .74rem; font-weight: 700;
}
.checkout-hero h1 {
  max-width: 18ch; margin: 0 auto 10px; font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 800; letter-spacing: -.035em;
}
.checkout-hero p {
  max-width: 58ch; margin: 0 auto; color: var(--kc-text-secondary); font-size: .96rem;
}
.checkout-steps {
  display: flex; justify-content: center; gap: 10px; list-style: none;
  margin: 24px 0 0; padding: 0;
}
.checkout-steps li {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  padding: 0 12px; color: var(--kc-text-tertiary); font-size: .74rem; font-weight: 700;
}
.checkout-steps span {
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-pill); background: var(--kc-stone-100); font-size: .67rem;
}
.checkout-steps .is-current {
  color: var(--kc-text-primary); background: var(--kc-surface-card); border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}
.checkout-steps .is-current span { color: #fff; background: var(--kc-brand-deep); }
.checkout-wrap {
  position: relative; z-index: 1; width: min(1060px, calc(100% - 2 * var(--gutter)));
  margin: -48px auto 50px;
}
.checkout-shell {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .9fr);
  overflow: hidden; background: var(--kc-surface-card); border-radius: var(--r-panel);
  box-shadow: var(--shadow-3);
}
.checkout-form-side { padding: 34px 36px 38px; }
.checkout-section + .checkout-section { margin-top: 28px; }
.checkout-section h2,
.checkout-summary > h2 {
  margin: 0 0 13px; color: var(--kc-text-tertiary); font-size: .72rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.checkout-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-choice {
  display: flex; align-items: flex-start; gap: 11px; min-height: 76px; padding: 14px 15px;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-control);
  color: var(--kc-text-secondary); transition: border-color var(--dur-base), background var(--dur-base);
}
.checkout-choice:hover { border-color: var(--kc-border-strong); }
.checkout-choice.is-selected {
  border-color: var(--kc-brand-deep); background: var(--kc-brand-xsoft); color: var(--kc-brand-deep);
}
.checkout-choice span { display: grid; gap: 3px; }
.checkout-choice strong { color: var(--kc-text-primary); font-size: .88rem; }
.checkout-choice small { color: var(--kc-text-tertiary); font-size: .72rem; line-height: 1.4; }
.checkout-form { margin-top: 28px; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 12px; }
.checkout-field { display: grid; gap: 6px; color: var(--kc-text-secondary); font-size: .75rem; font-weight: 700; }
.checkout-field--full { grid-column: 1 / -1; }
.checkout-section > .checkout-field { margin-bottom: 13px; }
.checkout-field > span { color: var(--kc-danger); }
.checkout-field input {
  width: 100%; height: 44px; padding: 0 13px; color: var(--kc-text-primary);
  border: 1px solid var(--kc-field-border); border-radius: var(--r-control);
  background: #fff; font: inherit; font-size: .86rem; font-weight: 500;
}
.checkout-field input::placeholder { color: var(--kc-text-quiet); }
.checkout-field input:focus { outline: 0; border-color: var(--kc-brand-deep); box-shadow: var(--shadow-focus); }
.checkout-notice {
  display: flex; gap: 12px; padding: 15px 16px; background: var(--kc-brand-xsoft);
  border-radius: var(--r-control); color: var(--kc-brand-deep); font-size: .82rem;
}
.checkout-notice .ic { margin-top: 1px; }
.checkout-notice p { margin: 3px 0 0; color: var(--kc-text-secondary); font-size: .76rem; }
.checkout-terms {
  display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 14px;
  color: var(--kc-text-secondary); font-size: .74rem;
}
.checkout-terms input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--kc-brand-deep); }
.checkout-terms a, .checkout-encrypted a { color: var(--kc-brand-deep); text-decoration: underline; text-underline-offset: 2px; }
.checkout-submit { min-height: 48px; }
.checkout-encrypted { margin: 10px 0 0; text-align: center; color: var(--kc-text-tertiary); font-size: .7rem; }
.checkout-summary {
  padding: 34px 30px; background: var(--kc-stone-50); border-left: 1px solid var(--kc-border-default);
}
.checkout-plan-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.checkout-plan-flags span {
  padding: 4px 9px; border: 1px solid var(--kc-border-default); border-radius: var(--r-pill);
  background: #fff; color: var(--kc-text-secondary); font-size: .65rem; font-weight: 700;
}
.checkout-plan-flags span:first-child { color: #fff; border-color: var(--kc-brand-deep); background: var(--kc-brand-deep); }
.checkout-billing {
  display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 18px;
  background: var(--kc-stone-100); border-radius: var(--r-control);
}
.checkout-billing a {
  min-height: 32px; display: grid; place-items: center; padding: 0 8px;
  border-radius: 8px; color: var(--kc-text-secondary); font-size: .68rem; font-weight: 700;
}
.checkout-billing a.is-selected { color: var(--kc-brand-deep); background: #fff; box-shadow: var(--shadow-1); }
.checkout-plan-title { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.checkout-plan-title > div { display: grid; gap: 3px; }
.checkout-plan-title strong { font-size: .84rem; }
.checkout-plan-title > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-plan-title span { color: var(--kc-text-tertiary); font-size: .7rem; }
.checkout-features {
  display: grid; gap: 9px; list-style: none; margin: 0; padding: 16px 0;
  border-block: 1px solid var(--kc-border-default); color: var(--kc-text-secondary); font-size: .73rem;
}
.checkout-features li { display: flex; align-items: flex-start; gap: 8px; }
.checkout-features .ic { margin-top: 1px; color: var(--kc-brand-deep); }
.checkout-totals { margin: 14px 0 0; font-size: .75rem; }
.checkout-totals div { display: flex; justify-content: space-between; gap: 18px; margin: 7px 0; }
.checkout-totals dt { color: var(--kc-text-secondary); }
.checkout-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.checkout-totals .checkout-total {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--kc-border-default);
  font-size: 1.02rem; font-weight: 800;
}
.checkout-totals .checkout-total dt { color: var(--kc-text-primary); }
.checkout-rank-note { margin: 14px 0 0; color: var(--kc-text-secondary); font-size: .69rem; }
.checkout-legal { margin: 16px 0 0; text-align: center; color: var(--kc-text-tertiary); font-size: .7rem; }

@media (max-width: 820px) {
  .checkout-hero { padding: 36px var(--gutter-sm) 76px; }
  .checkout-steps { gap: 2px; }
  .checkout-steps li { padding-inline: 8px; }
  .checkout-wrap { width: calc(100% - 2 * var(--gutter-sm)); }
  .checkout-shell { grid-template-columns: 1fr; }
  .checkout-summary { grid-row: 1; border-left: 0; border-bottom: 1px solid var(--kc-border-default); }
}
@media (max-width: 520px) {
  .checkout-hero h1 { font-size: 1.7rem; }
  .checkout-steps li { font-size: 0; }
  .checkout-steps li span { font-size: .67rem; }
  .checkout-choice-grid, .checkout-fields { grid-template-columns: 1fr; }
  .checkout-field--full { grid-column: auto; }
  .checkout-form-side, .checkout-summary { padding: 26px 20px 28px; }
  .checkout-summary { padding-bottom: 24px; }
}

@media (max-width: 1080px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plans-hero { padding: 38px 0 30px; }
  .plans-cta { padding: 22px; }
  .trust-cards[style] { grid-template-columns: 1fr !important; }
}

/* ================================================ 11. legacy compatibility */
/* `.container` is defined with `.wrap` in §1 — one declaration, two names. It
   used to be redeclared here, after `.page`, where its `padding` shorthand
   silently zeroed `.page`'s vertical padding on every `container page` screen. */
.section-tight { margin: 34px 0; }
.h-tight { margin-top: 28px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper); padding: 7px 15px; font-size: .87rem;
  font-weight: 600; color: var(--ink-2); transition: border-color var(--dur-fast), color var(--dur-fast); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip-count { font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.brand-index, .retailer-index { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.brand-line, .retailer-line { display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 18px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.brand-line:hover, .retailer-line:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.brand-name { font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.brand-meta { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.retailer-table-wrap { overflow-x: auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.retailer-table { width: 100%; font-size: .9rem; min-width: 680px; }
.retailer-table th { text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-weight: 700; }
.retailer-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-2);
  vertical-align: middle; }
.retailer-table tr:last-child td { border-bottom: 0; }
.retailer-table .num { white-space: nowrap; }
.retailer-name { font-weight: 700; white-space: nowrap; }
.retailer-title { color: var(--ink-2); max-width: 340px; }
tr.is-best { background: var(--accent-soft); }
tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.is-flagged { color: var(--ink-3); }
.best-badge { display: inline-block; margin-left: 8px; background: var(--accent); color: #fff;
  font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 6px; padding: 3px 8px; }
.spec-table { width: 100%; font-size: .89rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec-table th { text-align: left; font-weight: 550; color: var(--ink-3); width: 44%;
  padding: 10px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec-table td { padding: 10px 18px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.empty-state { text-align: center; padding: 64px 24px; margin: 26px 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.empty-state h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.empty-state p { color: var(--ink-2); max-width: 440px; margin: 6px auto 18px; }

/* sponsored components — clearly separated, always labelled */
.sponsored-block { border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 26px 0; background: var(--paper);
  box-shadow: inset 3px 0 0 var(--kc-sponsor); }
.sponsored-head { display: flex; align-items: center; gap: 10px; }
.sponsored-head h2, .sponsored-head h3 { margin: 0; font-size: 1.05rem; font-weight: 750; }
.sponsored-tag { background: var(--tint); color: var(--ink-2); font-size: .64rem;
  font-weight: 750; letter-spacing: .08em; text-transform: uppercase; border-radius: 5px;
  padding: 3px 8px; border: 1px solid var(--line); }
.sponsored-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-top: 16px; }
.sponsored-card { display: flex; flex-direction: column; gap: 5px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
  font-size: .9rem; color: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sponsored-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.sponsored-card img { max-height: 44px; max-width: 140px; object-fit: contain; }
.sponsored-desc { color: var(--ink-3); font-size: .82rem; }
.sponsored-by { font-size: .78rem; color: var(--ink-3); }
.sponsored-by a { text-decoration: underline; text-underline-offset: 2px; }
.sponsored-banner { display: flex; align-items: center; gap: 18px; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: inset 3px 0 0 var(--kc-sponsor); background: var(--paper);
  padding: 16px 20px; margin: 18px 0; flex-wrap: wrap; }
.sponsored-banner img { max-height: 56px; max-width: 160px; object-fit: contain; }
.sponsored-banner-text { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.sponsored-sidebar { border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: inset 3px 0 0 var(--kc-sponsor); background: var(--paper);
  padding: 16px 20px; margin: 26px 0; max-width: 420px; }
.sponsored-mini { display: block; padding: 8px 0; color: inherit;
  border-bottom: 1px solid var(--line-2); }
.sponsored-mini:last-child { border-bottom: 0; }
.dealer-badge { display: inline-block; background: var(--ink); color: #fff; font-size: .66rem;
  font-weight: 750; border-radius: 5px; padding: 2px 8px; margin-left: 6px;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }

/* ------------------------------------------ 10.6 find a dealer (brand) */
.fd-page { padding-bottom: 48px; }
.fd-search { max-width: none; margin-bottom: 18px; }
.fd-search-row { align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.fd-search-q { flex: 1 1 260px; min-width: 200px; }
.fd-search-radius { flex: 0 0 120px; }
.fd-search-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-bottom: 1px; }
.fd-search-actions .btn { margin-top: 0; }
.fd-search .enquiry-row { margin: 0; }
.fd-search .enquiry-row > label { margin-top: 0; }
.fd-geo-status { margin: 8px 0 0; min-height: 1.2em; }
.fd-geo-status.is-error { color: var(--danger); }
.fd-search-clear { margin: 10px 0 0; font-size: .86rem; }
.fd-search-clear a { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; }
.fd-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.fd-count { margin: 0; font-size: .95rem; color: var(--ink-2); }
.fd-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.fd-truncation { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: .86rem; color: var(--ink-2); margin: 0 0 14px; }
.fd-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--paper); }
.fd-view-btn { border: 0; background: transparent; padding: 8px 16px; font: inherit;
  font-size: .86rem; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.fd-view-btn.is-active { background: var(--ink); color: #fff; }
.fd-view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }

.fd-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  gap: 20px; align-items: start; min-height: 420px; }
.fd-list { display: flex; flex-direction: column; gap: 12px; max-height: min(72vh, 820px);
  overflow: auto; padding-right: 4px; scroll-behavior: smooth; }
.fd-map-pane { position: sticky; top: var(--sticky-top); }
.fd-map { height: min(72vh, 820px); min-height: 360px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--tint); overflow: hidden;
  box-shadow: var(--shadow-1); pointer-events: auto; touch-action: pan-x pan-y; }
.fd-map.is-ready { background: #dfe4e8; }
/* Reinforce B&W look on Carto Positron tiles; keep markers/popups in colour. */
.fd-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.08) brightness(0.98); }
.fd-map .leaflet-container { font: inherit; cursor: grab; }
.fd-map .leaflet-container:active { cursor: grabbing; }
.fd-map .leaflet-control-zoom { pointer-events: auto; }
.fd-map-placeholder { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; height: 100%; margin: 0; padding: 28px;
  text-align: center; color: var(--ink-2); font-size: .92rem; }
.fd-map-placeholder .ic { color: var(--accent); }
.fd-map-error { color: var(--danger); }
.fd-map-note { margin: 10px 0 0; }
.fd-disclaimer { margin-top: 28px; max-width: 720px; }

.fd-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.fd-card.has-pin { cursor: pointer; }
.fd-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.fd-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
  background: #fbfefd; }
.fd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-card-top { display: flex; gap: 14px; align-items: flex-start; }
.fd-card-logo { flex: none; width: 56px; height: 56px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--tint); display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.fd-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fd-card-logo.is-empty::after,
.fd-card-ph { font-weight: 800; font-size: 1.15rem; color: var(--ink-3);
  text-transform: uppercase; }
.fd-card-head { flex: 1; min-width: 0; }
.fd-card-name { font-size: 1.05rem; font-weight: 780; letter-spacing: -.02em;
  margin: 0 0 6px; line-height: 1.25; }
.fd-card-addr { margin: 0; font-size: .88rem; color: var(--ink-2);
  display: flex; gap: 6px; align-items: flex-start; }
.fd-card-addr .ic { flex: none; margin-top: 2px; color: var(--accent); }
.fd-card-addr-missing { color: var(--ink-3); font-style: normal; }
.fd-card-dist { margin: 6px 0 0; font-size: .82rem; font-weight: 650; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; }
.fd-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.fd-map .leaflet-popup-content { font-size: .88rem; line-height: 1.4; margin: 10px 12px; }
.fd-popup-tier { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.fd-popup-links { margin-top: 8px; }
.fd-popup-links a { color: var(--accent-ink); font-weight: 650; }

.marker-cluster-small { background-color: rgba(13, 122, 92, .18); }
.marker-cluster-small div { background-color: rgba(13, 122, 92, .55); color: #fff; }
.marker-cluster-medium { background-color: rgba(13, 122, 92, .22); }
.marker-cluster-medium div { background-color: rgba(10, 97, 74, .7); color: #fff; }
.marker-cluster-large { background-color: rgba(13, 122, 92, .28); }
.marker-cluster-large div { background-color: rgba(11, 90, 68, .85); color: #fff; }
.dealer-profile-link { display: inline-block; margin-left: 8px; font-size: .72rem;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 5px;
  padding: 2px 8px; }
.dealer-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 18px; }
.dealer-logo { max-height: 84px; max-width: 220px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; background: #fff; }
.dealer-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 24px; }

/* Price drops are grouped into one Level 1 category per row. */
.deal-category-list { display: grid; gap: 34px; min-width: 0; }
.deal-category { min-width: 0; }
.deal-category + .deal-category {
  border-top: 1px solid var(--kc-border-default); padding-top: 34px;
}
.deal-category-head {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 14px;
}
.deal-category-head h2 {
  margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.2;
}
.deal-category-head p {
  margin: 5px 0 0; color: var(--kc-text-tertiary); font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.deal-category-link {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--kc-brand-deep); font-size: .84rem; font-weight: 700;
}
.deal-category-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.deal-category-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 1180px) {
  .deal-category-row {
    grid-auto-flow: column; grid-auto-columns: 226px; grid-template-columns: none;
    overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .deal-category-row .pc { scroll-snap-align: start; }
}
@media (max-width: 680px) {
  .deal-category-list { gap: 28px; }
  .deal-category + .deal-category { padding-top: 28px; }
  .deal-category-head { align-items: start; gap: 12px; }
  .deal-category-link { min-height: 40px; text-align: right; }
  .deal-category-row { grid-auto-columns: min(76vw, 246px); }
}
.drop-row {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 20px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.drop-row:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1); }
.drop-row-media { width: 66px; height: 66px; display: flex; align-items: center;
  justify-content: center; }
.drop-row-media img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.drop-row-name { font-size: .89rem; font-weight: 650; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drop-row-meta { font-size: .76rem; color: var(--ink-3); }
.drop-row-price { text-align: right; }
.drop-row-now { display: block; font-weight: 780; font-variant-numeric: tabular-nums; }
.drop-row-was { font-size: .78rem; color: var(--ink-3); text-decoration: line-through; }

/* ---------------------------------- 10.3 dealer sign-up (2026-07-23) */
.drg-hero { background: var(--kc-surface-inverse); color: #fff; overflow: hidden; }
.drg-hero-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px; align-items: center; }
.drg-hero-copy { padding: 52px 0 48px; }
.drg-hero-copy h1 { font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); margin: 14px 0 0; }
.drg-hero-copy > p { color: rgba(255,255,255,.72); margin: 12px 0 0;
  max-width: var(--measure-lede); font-size: 1.02rem; }
.drg-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.drg-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem;
  font-weight: 650; color: rgba(255,255,255,.88); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 15px; }
.drg-chip .ic { color: var(--accent-bright); }
.drg-hero-media { align-self: stretch; min-height: 100%; }
.drg-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .85; }

.drg-trust { background: var(--kc-brand-soft); border-bottom: 1px solid #DCEBE2; }
.drg-trust-inner { display: flex; align-items: center; justify-content: center;
  gap: 14px; padding-block: 16px; text-align: left; }
.drg-trust p { margin: 0; font-size: .95rem; }
.drg-trust strong { color: var(--accent-ink); }
.drg-trust p > span { font-size: .84rem; color: var(--ink-2); }

.drg-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 34px; padding-block: 34px 10px; align-items: start; }
.drg-why { background: var(--tint-warm); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 28px 30px; }
.drg-benefits { display: grid; gap: 18px; margin-top: 20px; }
.drg-benefit { display: flex; align-items: flex-start; gap: 13px; }
.drg-benefit .glyph { width: 42px; height: 42px; }
.drg-benefit strong { display: flex; align-items: center; gap: 8px; font-size: .93rem;
  font-weight: 750; letter-spacing: -.01em; }
.drg-benefit span > span { display: block; font-size: .84rem; color: var(--ink-2);
  margin-top: 2px; }
.drg-steps { margin-top: 26px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 22px; }
.drg-steps h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem;
  font-weight: 750; margin: 0 0 12px; }
.drg-steps h3 .ic { color: var(--accent); }
.drg-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.drg-steps li { font-size: .87rem; color: var(--ink-2); line-height: 1.5; }
.drg-steps li strong { color: var(--ink); }
.drg-steps .fine-print { margin-top: 14px; }

.drg-form-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 28px 30px; }
.drg-form-card .btn-block { margin-top: 20px; }
.drg-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: .86rem; font-weight: 500 !important; }
.drg-terms input { width: auto !important; margin-top: 3px; }
.drg-terms a { color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; }
.drg-form-card > .fine-print { margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-2); }

.drg-stats-band { background: var(--tint); border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2); margin-top: 34px; padding: 36px 0; }
.drg-stats-title { text-align: center; font-size: 1.05rem; font-weight: 750;
  color: var(--ink-2); margin: 0 0 22px; letter-spacing: -.01em; }
.drg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  text-align: center; }
.drg-stat strong { display: block; font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.drg-stat span { font-size: .82rem; color: var(--ink-2); font-weight: 550; }

.drg-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: start; }
.drg-faq details { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0 18px; }
.drg-faq summary { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 0; font-size: .92rem; font-weight: 650; cursor: pointer;
  list-style: none; }
.drg-faq summary::-webkit-details-marker { display: none; }
.drg-faq summary .ic { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease); }
.drg-faq details[open] summary .ic { transform: rotate(180deg); }
.drg-faq details p { margin: 0 0 16px; font-size: .88rem; color: var(--ink-2);
  line-height: 1.6; }

/* ------------------------------------- 10.4 supplier directory + auth */
.sup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sup-card { display: flex; align-items: center; gap: 15px; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.sup-card:hover { border-color: #c7cfd5; box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.sup-card.is-featured { border-color: var(--accent); background: var(--accent-soft); }
.sup-logo { flex: none; width: 52px; height: 52px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--r-card); background: var(--tint);
  border: 1px solid var(--line-2); font-size: 1.35rem; font-weight: 800; color: var(--ink-2); }
.sup-body { flex: 1; min-width: 0; }
.sup-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 1rem; font-weight: 750; letter-spacing: -.015em; }
.sup-meta { display: flex; align-items: center; gap: 6px; font-size: .8rem;
  color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sup-arrow { flex: none; color: var(--ink-3); }
.sup-card:hover .sup-arrow { color: var(--accent-ink); }

.sup-auth { max-width: 460px; margin: 0 auto; }
.sup-auth-wide { max-width: 720px; }
.sup-auth .enquiry-form { max-width: none; margin-top: 18px; }
.sup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sup-claim-search { display: flex; gap: 10px; align-items: center; position: relative;
  margin: 20px 0; }
.sup-claim-search .hdr-search-icon { position: absolute; left: 14px; color: var(--ink-3);
  display: inline-flex; margin: 0; }
.sup-claim-search input { flex: 1; min-width: 0; height: 48px; padding: 0 14px 0 42px;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.sup-claim-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.sup-claim-results { display: grid; gap: 8px; margin-bottom: 26px; }
.sup-claim-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); }
.sup-claim-new { border-top: 1px solid var(--line-2); padding-top: 24px; margin-top: 8px; }

/* ----------------------------------------- 11.7 blog + contact pages */
/* blog hero band */
.bhero { background: #fff; border-bottom: 1px solid var(--line); }
.bhero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(30px,4vw,64px); align-items: center; }
.bhero-copy { padding: 56px 0 52px; }
.bhero-copy h1 { font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); margin: 0 0 16px;
  max-width: 19ch; text-wrap: balance; }
.bhero-sub { color: var(--ink-2); margin: 0; max-width: 560px; font-size: 1.02rem; line-height: 1.6; }
.bhero-search { position: relative; display: flex; align-items: center; gap: 10px;
  margin-top: 22px; max-width: 520px; }
.bhero-search input { flex: 1; min-width: 0; height: 50px; padding: 0 16px 0 44px;
  border: 1px solid var(--line); border-radius: var(--r-card); font: inherit; font-size: .95rem;
  background: var(--paper); transition: border-color var(--dur-fast); }
.bhero-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.bhero-search .hdr-search-icon { position: absolute; left: 14px; color: var(--ink-3);
  display: inline-flex; margin: 0; }
.bhero-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 20px; font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.bhero-stat-sep { color: var(--line); }
.bhero-stat-ind { color: var(--accent-ink); }
.bhero-media { padding: 30px 0; }
.bhero-media-frame { border-radius: var(--r-feature); overflow: hidden; aspect-ratio: 4/3;
  background: var(--tint); box-shadow: 0 18px 42px rgba(12, 42, 27, .13); }
.bhero-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* blog index layout: main column + sidebar */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
  padding-block: var(--shell-y) var(--shell-y-end); align-items: start; }
.sec-blog { padding: 0 0 4px; }
.blog-results-head { display: flex; align-items: end; justify-content: space-between;
  gap: 24px; margin: 30px 0 18px; }
.blog-results-head h2 { margin: 0; font-size: 1.55rem; line-height: 1.2;
  letter-spacing: -.028em; }
.blog-results-head p { margin: 6px 0 0; color: var(--ink-2); font-size: .9rem; }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.retailer-articles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.retailer-article-card .bcard-body { min-height: 230px; }
.retailer-article-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.retailer-article-card h2 { font-size: 1.05rem; margin: 0; line-height: 1.28; }
.article-list-page { padding-top: 34px; padding-bottom: 70px; }
.retailer-articles-head { margin: 24px 0; }
.retailer-article-page { max-width: 920px; padding-top: 34px; padding-bottom: 80px; }
{ max-width: 760px; margin: 28px auto 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.045em; margin: 14px 0 18px; }
.retailer-article-lead { font-size: 1.16rem; color: var(--ink-2); line-height: 1.65; }
.retailer-article-byline { color: var(--ink-3); font-size: .84rem; margin: 18px 0 34px; }
.retailer-article-hero { margin: 0 0 30px; }
.retailer-article-hero img { display: block; width: 100%; max-height: 520px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
> div p { font-size: 1.02rem; line-height: 1.78; margin: 0 0 1.25em; }
.retailer-article-about { max-width: 760px; margin: 34px auto 0; padding: 22px; border: 1px solid var(--kc-border); border-radius: 14px; background: var(--tint); }
@media (max-width: 1000px) { .retailer-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .retailer-articles-grid { grid-template-columns: 1fr; } .retailer-article-card .bcard-body { min-height: 0; } }
.bcard {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.bcard:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.bcard:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.bcard-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--tint); border-bottom: 1px solid var(--line-2); }
.bcard-media img { width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-base); }
.bcard:hover .bcard-media img { opacity: .92; }
.bcard-cat { color: var(--accent-ink); font-weight: 750; }
.bcard-body { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px 20px;
  flex: 1; }
.bcard-body h3 { font-size: 1.05rem; font-weight: 750; letter-spacing: -.02em; margin: 0;
  line-height: 1.3; }
.bcard-body p { margin: 0; font-size: .87rem; color: var(--ink-2); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .75rem; color: var(--ink-3); margin-top: auto;
  border-top: 1px solid var(--line-2); padding-top: 12px; }
.bcard-featured { grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
.bcard-featured .bcard-media { min-height: 320px; aspect-ratio: auto;
  border-right: 1px solid var(--line-2); border-bottom: 0; }
.bcard-featured .bcard-body { justify-content: center; padding: clamp(28px, 3vw, 44px); }
.bcard-featured .bcard-body h3 { max-width: 19ch; font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.14; letter-spacing: -.032em; text-wrap: balance; }
.bcard-featured .bcard-body p { flex: none; max-width: 52ch; font-size: .95rem;
  line-height: 1.6; -webkit-line-clamp: unset; }
.bcard-dot { color: #c6cdd3; }
.bgrid-featured .bcard { background: var(--tint-warm); }

/* sidebar cards (blog + article + contact) */
.bside { display: flex; flex-direction: column; gap: 16px; position: sticky;
  top: var(--sticky-top); }
.bside-card { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px; }
.bside-title { display: flex; align-items: center; gap: 8px; font-size: .95rem;
  font-weight: 750; letter-spacing: -.015em; margin: 0 0 12px; }
.bside-title .ic { color: var(--accent); }
.bside-note { margin: 0 0 12px; font-size: .85rem; color: var(--ink-2); }
.bside-card .btn + .btn { margin-top: 8px; }
.bside-cats { list-style: none; margin: 0; padding: 0; }
.bside-cats li + li { border-top: 1px solid var(--line-2); }
.bside-cats a { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 2px; font-size: .89rem; font-weight: 600; color: var(--ink-2);
  transition: color var(--dur-fast); }
.bside-cats a:hover, .bside-cats a.is-active { color: var(--accent-ink); }
.bside-n { font-size: .74rem; font-weight: 650; color: var(--ink-3); background: var(--tint);
  border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.bside-arts { list-style: none; margin: 0 0 10px; padding: 0; }
.bside-arts li + li { border-top: 1px solid var(--line-2); }
.bside-arts a { display: block; padding: 10px 2px; text-decoration: none; }
.bside-art-title { display: block; font-size: .87rem; font-weight: 650; line-height: 1.35;
  transition: color var(--dur-fast); }
.bside-arts a:hover .bside-art-title { color: var(--accent-ink); }
.bside-art-meta { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 2px; }
.bside-card-dark { background: var(--kc-surface-inverse); border-color: var(--panel-2); color: #fff; }
.bside-card-dark .bside-title { color: #fff; }
.bside-card-dark .bside-title .ic { color: var(--accent-bright); }
.bside-card-dark .bside-note { color: rgba(255,255,255,.72); }
.bside-card-iq { background: var(--accent-soft); border-color: #DCEBE2; }

/* article page */
/* The article shell is deliberately the SAME grid as the blog index
   (`.blog-layout` above): the shared `.wrap` container, a fluid main column and
   a 340px rail with a 40px gap. Keep the two rules identical — a reader moving
   from /blog into an article should see the page furniture stay put.

   Reading measure is handled inside the column by --measure-article (see 11.8),
   never by narrowing this shell. */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
  padding-block: var(--shell-y) var(--shell-y-end); align-items: start; }
/* The main column fills its track. It previously carried
   `max-width: var(--measure-prose)` (~68ch ≈ 640px) inside a ~1140px track,
   which stranded ~500px of dead space to the right of every article and made
   the hero, takeaways card, CTA and prev/next pair all render half-width.
   Measure now lives on the running text as one resolved length — see 11.8. */
.art-main { min-width: 0; }
.art-head { padding-top: 10px; }
/* DESIGN.md display step: Poppins SemiBold, tight tracking.
   The cap is a resolved length, not `ch`: `22ch` scaled with the clamped font
   size, so the title's right edge moved with the viewport (762px at 1920,
   655px at 1440, 466px at 1024) and never lined up with anything. */
.art-title { max-width: var(--measure-article-title);
  font-size: clamp(2rem, 3.2vw, 3.35rem); font-weight: 600;
  letter-spacing: -.032em; line-height: 1.06; text-wrap: balance; }
/* The lede shares the body's reading edge, so the header resolves to two
   edges (title, then lede + body) instead of a three-step stagger. */
.art-lede { max-width: var(--measure-article); color: var(--ink-2); font-size: 1.14rem;
  margin: 18px 0 0; line-height: 1.62; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 22px 0 0; font-size: .82rem; color: var(--ink-3); }
.art-meta .ic { vertical-align: -2.5px; }
.art-meta-category { color: var(--accent-ink); font-weight: 750; }
/* Byline row */
.art-byline { display: inline-flex; align-items: center; gap: 7px; }
/* The byline chip carries `.glyph`, which is a 46px circle sized for trust and
   stat rows. At byline scale that swamps the line, so this override wins on
   source order and pulls it down to an initials chip. */
.art-avatar {
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1; flex: none;
}
/* Author box — the E-E-A-T byline block that closes every article. The name
   here is the same human named in the Article `Person` schema. */
.art-authorbox { display: flex; gap: 16px; align-items: flex-start;
  margin: 36px 0 0; padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--tint); }
.art-avatar-lg { width: 44px; height: 44px; font-size: .92rem; }
.art-author-name { margin: 0; font-weight: 750; color: var(--ink-1); }
.art-author-role { margin: 2px 0 0; font-size: .82rem; color: var(--accent-ink);
  font-weight: 650; }
.art-author-bio { margin: 8px 0 0; font-size: .9rem; color: var(--ink-2);
  line-height: 1.6; max-width: var(--measure-article); }
/* Compact layouts cap the hero height. Wide desktop removes this cap below so
   the 16:9 figure reaches the same right edge as the rest of the article. */
.art-hero { margin: 32px 0 0; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 460px; background: var(--tint); }
.art-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-takeaways { margin: 30px 0 0; border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  border-radius: var(--r-lg); padding: 24px 28px; }
.art-takeaways h2 { display: flex; align-items: center; gap: 8px; font-size: .98rem;
  font-weight: 750; color: var(--accent-ink); margin: 0 0 10px; }
.art-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.art-takeaways li { display: flex; gap: 9px; font-size: .89rem; color: var(--ink);
  line-height: 1.45; }
.art-takeaways li .ic { color: var(--accent); margin-top: 3px; }
.art-toc-mobile { display: none; margin: 24px 0 0; padding: 0;
  border-block: 1px solid var(--line); }
.art-toc-mobile summary { display: flex; align-items: center; gap: 8px;
  min-height: 52px; color: var(--ink); font-size: .9rem; font-weight: 750;
  cursor: pointer; list-style: none; }
.art-toc-mobile summary::-webkit-details-marker { display: none; }
.art-toc-mobile summary::after { content: "+"; margin-left: auto; color: var(--ink-3);
  font-size: 1.2rem; font-weight: 500; }
.art-toc-mobile[open] summary::after { content: "−"; }
.art-toc-mobile ol { margin: 0 0 18px; padding: 0 0 0 24px; }
.art-toc-mobile li { padding: 5px 0; color: var(--ink-3); }
.art-toc-mobile a { color: var(--ink-2); font-size: .88rem; font-weight: 600; }
/* ======================================================================
   11.8 ARTICLE PROSE — the blog style package
   ----------------------------------------------------------------------
   One reading surface for every long-form article on the site. Put
   `kc-prose` on the article body and the whole element vocabulary below
   comes with it — headings, lists, tables, quotes, figures, code and
   callouts — with no per-article classes in the markdown. Writers write
   plain markdown; the package does the rest.

   Opted in today:
     .art-prose   blog articles (templates/blog/article.html)

   To opt another long-form surface in, add `kc-prose` to its container's
   class list. No CSS change is needed. Every rule below is prefixed with
   `:is(.art-prose, .kc-prose)` — one place to extend, and no repeated
   selector lists to fall out of step with each other.

   MEASURE — why this is not `ch`.
   `ch` resolves against each element's OWN font-size, so one `68ch` cap
   produced a different pixel width per element: ~812px on a 16.3px
   paragraph, ~1210px on a 24.3px h2 (wider than the column, so no cap at
   all), and nothing on h3/table, which were never in the rule. Headings
   therefore hung ~54px to the left of their own paragraphs, and real body
   copy ran 79-103 characters against a 65-75 target. The measure is now one
   resolved length (--measure-article) applied to every child, so the text
   column and every heading share a single left edge. Wide elements — tables,
   figures, rules, code blocks — opt out and run the full column from that
   same edge.

   ALIGNMENT RULE: text is left-aligned to the column edge, never centred.
   Centring the running text while leaving tables full-width is exactly what
   produced the original misalignment.
   ====================================================================== */

:is(.art-prose, .kc-prose) {
  border: 0; border-radius: 0; background: transparent;
  padding: 24px 0 0; margin-top: 12px;
}

/* Default reading measure for compact and mobile layouts. Wide desktop
   articles opt into the full main track below. */
:is(.art-prose, .kc-prose) > * { max-width: var(--measure-article); }

/* Wide elements run the full column width from that same left edge. */
:is(.art-prose, .kc-prose) > :is(table, figure, hr, pre, .kc-prose-scroll, .kc-prose-wide) {
  max-width: none;
}

:is(.art-prose, .kc-prose) > :first-child { margin-top: 0; }
:is(.art-prose, .kc-prose) > :last-child { margin-bottom: 0; }

/* --- headings ------------------------------------------------------- */
/* More space above a heading than below it, so a section reads as one group.
   scroll-margin-top clears the sticky header for every deep link, including
   the FAQ h3s that anchor straight from a search result. */
:is(.art-prose, .kc-prose) :is(h2, h3, h4) {
  color: var(--ink); text-wrap: balance;
  scroll-margin-top: var(--scroll-offset);
}
:is(.art-prose, .kc-prose) h2 {
  font-size: 1.52rem; font-weight: 600; letter-spacing: -.028em;
  line-height: 1.18; margin: 2.1em 0 .6em;
}
:is(.art-prose, .kc-prose) h3 {
  font-size: 1.12rem; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.32; margin: 1.9em 0 .5em;
}
:is(.art-prose, .kc-prose) h4 {
  font-size: .95rem; font-weight: 600; letter-spacing: -.015em;
  line-height: 1.4; margin: 1.6em 0 .4em; color: var(--ink-2);
}

/* --- running text --------------------------------------------------- */
:is(.art-prose, .kc-prose) p {
  font-size: 1.02rem; line-height: 1.78; color: var(--ink-2);
  margin: 0 0 1.15em;
}
/* Emphasis steps up to full ink against --ink-2 body copy, so bold reads as
   emphasis rather than as weight alone. */
:is(.art-prose, .kc-prose) strong { font-weight: 700; color: var(--ink); }
:is(.art-prose, .kc-prose) a {
  color: var(--accent-ink); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
:is(.art-prose, .kc-prose) a:hover { text-decoration-thickness: 2px; }

/* --- lists ---------------------------------------------------------- */
:is(.art-prose, .kc-prose) :is(ul, ol) { margin: 0 0 1.15em; padding-left: 1.35em; }
:is(.art-prose, .kc-prose) li {
  font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); margin-bottom: .45em;
}
:is(.art-prose, .kc-prose) li::marker { color: var(--ink-3); }
:is(.art-prose, .kc-prose) li > :is(ul, ol) { margin: .5em 0 0; }
:is(.art-prose, .kc-prose) li:last-child { margin-bottom: 0; }
:is(.art-prose, .kc-prose) li p { margin-bottom: .5em; }

/* --- callout: plain markdown `>` becomes a note --------------------- */
/* A tinted panel with a hairline, matching the flat-by-default material
   rule. Deliberately not a thick coloured left bar. */
:is(.art-prose, .kc-prose) blockquote {
  margin: 1.7em 0; padding: 18px 22px;
  background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  border-radius: var(--r-lg);
}
:is(.art-prose, .kc-prose) blockquote :is(p, li) { color: var(--ink); }
:is(.art-prose, .kc-prose) blockquote > :last-child { margin-bottom: 0; }

/* --- tables --------------------------------------------------------- */
/* The same material language as .kc-table, applied by element so a writer
   never puts a class in the markdown. blog.py wraps each table in
   .kc-prose-scroll, so a wide table scrolls inside its own box and never
   the page. */
.kc-prose-scroll { overflow-x: auto; margin: 1.7em 0; }
.kc-prose-scroll > table { margin: 0; }
/* On a phone a two-column table still wraps comfortably, but three or more
   columns crush into unreadable slivers. Those scroll inside their own box
   instead; two-column tables are left alone so they never scroll needlessly. */
@media (max-width: 560px) {
  .kc-prose-scroll > table:has(thead th:nth-child(3)) { min-width: 480px; }
}

:is(.art-prose, .kc-prose) table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  overflow: hidden; font-size: .875rem; margin: 1.7em 0;
}
:is(.art-prose, .kc-prose) thead th {
  background: var(--kc-tint-1); color: var(--kc-text-tertiary);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-align: left; vertical-align: bottom;
  padding: 11px 16px; border-bottom: 1px solid var(--kc-border-default);
}
:is(.art-prose, .kc-prose) tbody :is(td, th) {
  padding: 12px 16px; border-bottom: 1px solid var(--kc-border-subtle);
  color: var(--ink-2); line-height: 1.55; vertical-align: top; text-align: left;
}
:is(.art-prose, .kc-prose) tbody th { font-weight: 700; color: var(--ink); }
:is(.art-prose, .kc-prose) tbody tr:last-child :is(td, th) { border-bottom: 0; }
/* Numeric columns keep the house tabular treatment. */
:is(.art-prose, .kc-prose) :is(th, td).num {
  text-align: right; font-variant-numeric: tabular-nums;
}
:is(.art-prose, .kc-prose) caption {
  caption-side: top; text-align: left; font-size: .78rem; color: var(--ink-3);
  padding: 0 0 8px;
}

/* --- media ---------------------------------------------------------- */
:is(.art-prose, .kc-prose) figure { margin: 1.8em 0; }
:is(.art-prose, .kc-prose) img {
  display: block; max-width: 100%; height: auto; border-radius: var(--r-lg);
}
:is(.art-prose, .kc-prose) figcaption {
  margin-top: 10px; font-size: .78rem; color: var(--ink-3); line-height: 1.5;
}

/* --- rule ----------------------------------------------------------- */
:is(.art-prose, .kc-prose) hr {
  border: 0; border-top: 1px solid var(--line-2); margin: 2.4em 0;
}

/* --- code: for real code only, never as a "technical" costume ------- */
:is(.art-prose, .kc-prose) code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: .12em .4em;
}
:is(.art-prose, .kc-prose) pre {
  background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; overflow-x: auto; margin: 1.6em 0;
}
:is(.art-prose, .kc-prose) pre code {
  background: none; border: 0; padding: 0; font-size: .86rem;
}

/* --- callouts: `!!! note|tip|warning|safety "Title"` ------------------ */
/* Authored in plain markdown via the admonition extension. A tinted panel
   with a hairline and a coloured title row — never colour alone, the title
   word carries the meaning too. */
:is(.art-prose, .kc-prose) .admonition {
  margin: 1.8em 0; padding: 18px 22px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--tint); max-width: var(--measure-article);
}
:is(.art-prose, .kc-prose) .admonition-title {
  margin: 0 0 8px; font-family: var(--font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
:is(.art-prose, .kc-prose) .admonition > :last-child { margin-bottom: 0; }
:is(.art-prose, .kc-prose) .admonition p { font-size: .97rem; }

:is(.art-prose, .kc-prose) .admonition:is(.note, .tip) {
  background: var(--accent-soft); border-color: var(--accent-soft-border);
}
:is(.art-prose, .kc-prose) .admonition:is(.note, .tip) .admonition-title {
  color: var(--accent-ink);
}
:is(.art-prose, .kc-prose) .admonition:is(.warning, .safety) {
  background: var(--kc-caution-soft);
  border-color: color-mix(in srgb, var(--kc-caution) 30%, var(--kc-caution-soft));
}
:is(.art-prose, .kc-prose) .admonition:is(.warning, .safety) .admonition-title {
  /* Darkened from the caution token so 13px uppercase clears AA on the soft
     tint; the title word carries the meaning too, never colour alone. */
  color: color-mix(in srgb, var(--kc-caution) 62%, var(--ink));
}
:is(.art-prose, .kc-prose) .admonition.danger {
  background: var(--kc-danger-bg);
  border-color: color-mix(in srgb, var(--kc-danger) 25%, var(--kc-danger-bg));
}
:is(.art-prose, .kc-prose) .admonition.danger .admonition-title { color: var(--kc-danger); }

/* --- pull quote: `> line` + `{: .kc-pullquote }` --------------------- */
/* The blockquote wrapper drops its callout skin when it holds a pull quote,
   so the two constructs never stack their panels. */
:is(.art-prose, .kc-prose) blockquote:has(> .kc-pullquote) {
  background: none; border: 0; border-left: 1px solid var(--accent);
  border-radius: 0; padding: 4px 0 4px 24px; margin: 1.9em 0;
  max-width: var(--measure-article);
}
:is(.art-prose, .kc-prose) .kc-pullquote {
  font-family: var(--font-display); font-size: 1.19rem; font-weight: 600;
  line-height: 1.42; letter-spacing: -.02em; color: var(--ink);
}
:is(.art-prose, .kc-prose) .kc-pullquote-by {
  display: block; margin-top: 8px; font-family: var(--font);
  font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3);
}

/* --- at-a-glance spec pairs: a markdown definition list -------------- */
:is(.art-prose, .kc-prose) dl {
  margin: 1.7em 0; padding: 4px 0 0; border-top: 1px solid var(--line);
  max-width: var(--measure-article);
}
:is(.art-prose, .kc-prose) dt {
  margin: 14px 0 0; font-size: .69rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
:is(.art-prose, .kc-prose) dd {
  margin: 4px 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2);
}

/* --- inline compare card: the one commercial moment in the body ------ */
/* Full column width, so it reads as a device rather than a paragraph. */
:is(.art-prose, .kc-prose) .kc-compare-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  justify-content: space-between; max-width: none;
  margin: 2em 0; padding: 20px 24px;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  background: var(--kc-surface-card);
}
:is(.art-prose, .kc-prose) .kc-compare-card p { margin: 0; font-size: .97rem; }
:is(.art-prose, .kc-prose) .kc-compare-card strong {
  display: block; font-family: var(--font-display); font-size: 1.06rem;
  font-weight: 600; letter-spacing: -.02em; margin-bottom: 2px;
}
:is(.art-prose, .kc-prose) .kc-compare-card a {
  flex: none; text-decoration: none; font-weight: 600; font-size: .875rem;
  padding: 10px 16px; border-radius: var(--r-lg);
  background: var(--accent); color: #fff; white-space: nowrap;
}
:is(.art-prose, .kc-prose) .kc-compare-card a:hover { background: var(--accent-deep); }

/* --- supporting figure ------------------------------------------------ */
:is(.art-prose, .kc-prose) figure.kc-figure-wide { max-width: none; }

/* --- sticky table-of-contents current section ----------------------- */
/* Styling hook only; the observer that sets .is-active lives in the article
   template and mirrors the pattern already shipping in finance.js. */
:is(.art-toc, .kc-toc) a.is-active { color: var(--accent-ink); font-weight: 700; }

/* The label comes from article frontmatter and can be long. .btn sets
   white-space:nowrap, which pushed this CTA off-screen at 320px on the guide
   with the longest label. Overridden here only, not on the shared .btn. */
.art-cta .btn { white-space: normal; text-align: center; }
.art-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin: 34px 0 0; background: var(--kc-surface-inverse); color: #fff;
  border-radius: var(--r-lg); padding: 24px 28px; }
.art-cta h2 { font-size: 1.15rem; margin: 0 0 4px; }
.art-cta p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.72); max-width: 420px; }
.art-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2); }
.art-share-label { font-size: .84rem; font-weight: 650; color: var(--ink-2);
  margin-right: 6px; }
.art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.art-pn-card { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.art-pn-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-1); }
.art-pn-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); display: inline-flex; align-items: center;
  gap: 5px; }
.art-pn-card:not(.art-pn-next) .art-pn-label .ic { transform: rotate(180deg); }
.art-pn-next { text-align: right; align-items: flex-end; }
.art-pn-title { font-size: .89rem; font-weight: 650; line-height: 1.35; }
.art-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.art-toc li + li { border-top: 1px solid var(--line-2); }
.art-toc a { text-decoration: none; display: flex; gap: 10px; padding: 8px 2px; font-size: .86rem; font-weight: 600;
  color: var(--ink-2); transition: color var(--dur-fast); }
.art-toc a::before { counter-increment: toc; content: counter(toc) "."; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.art-toc a:hover { color: var(--accent-ink); }
.art-side { min-width: 0; position: static; }

/* The article rail is taller than a normal laptop viewport once the contents,
   related guides and dealer panel are present. Pinning that whole rail below
   the sticky site header traps its lower cards off-screen. Only make it sticky
   when the viewport is genuinely tall enough to hold the complete rail. */
@media (min-width: 1121px) and (min-height: 1250px) {
  .art-side { position: sticky; }
}

/* Desktop articles use the complete fluid main column. The 37rem reading cap
   left roughly 500px unused beside the copy on a 1600px shell, even though the
   hero, takeaways and article grid already occupied that space. Keep the cap
   below this breakpoint for the later compact/mobile optimisation pass. */
@media (min-width: 1121px) {
  .art-lede,
  .art-prose > *,
  .art-prose dl,
  .art-prose .admonition,
  .art-prose blockquote:has(> .kc-pullquote) { max-width: none; }
  .art-hero { max-height: none; }
}

/* contact page */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
  padding: var(--shell-y) 0 var(--shell-y-end); align-items: start; }
.contact-main .sec-sub { margin-bottom: 20px; }
.contact-form { max-width: none; }
.contact-opt { font-weight: 500; color: var(--ink-3); }
.contact-side { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------ 12. responsive */
/* Fluid shell — content shell is 1600px max, no artificial step-up needed */
@media (min-width: 1800px) {
  body { font-size: 16.5px; }
  .hero-split { min-height: 540px; }
  .hero-media { min-height: 540px; }
  .hero h1 { font-size: 3.4rem; }
  .pc-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
  .pc-rail { grid-auto-columns: 246px; }
  .dept-tiles { grid-template-columns: repeat(7, 1fr); }
  .pd-top { grid-template-columns: minmax(0, 22fr) minmax(0, 21fr) 390px; gap: 44px; }
  .list-shell { grid-template-columns: 288px minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 1180px) {
  .pd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-top .buybox-wrap { grid-column: 1 / -1; }
  .buybox { position: static; }
  .pd-band { grid-template-columns: 1fr 1fr; }
  .pd-band .band-chart { grid-column: 1 / -1; }
  .brand-marks { grid-template-columns: repeat(4, 1fr); }
  .dept-tiles { grid-template-columns: repeat(4, 1fr); }
  .trust-cards { grid-template-columns: 1fr 1fr; }
  .strip-dark-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ftr-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (max-width: 1120px) {
  /* A 340px rail plus the 40px gutter leaves the article at only ~580px on a
     1024px viewport. Collapse the article earlier than the generic blog index
     so buying-guide tables, figures and headings keep a useful measure. */
  .art-layout { grid-template-columns: 1fr; gap: 26px; max-width: 920px; }
  .art-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-side .art-toc { display: none; }
  .art-toc-mobile { display: block; }
}
@media (max-width: 980px) {
  /* The header loses its utility bar and nav row here and gains the chip row.
     MEASURED 2026-08-01: a stable 126px at 400 / 760 / 979px. Every sticky
     offset and anchor target follows this automatically. */
  :root { --header-h: 126px; }

  .hdr-row { gap: 12px; height: 62px; padding: 0 var(--gutter); }
  .hdr-menu { display: inline-flex; }
  .hdr-nav { display: none; }
  .hdr-utility { display: none; }
  .mobile-chips { display: flex; }
  .hdr-search { flex: 1 1 auto; min-width: 0; max-width: none; }
  /* Mock's mobile header is icon + input only — the desktop "Compare prices" button
     is fixed-width and would squeeze the field to a few characters at 360px.
     Enter still submits the form. */
  .hdr-search-btn { display: none; }
  /* iOS Safari force-zooms the page whenever a focused input renders below
     16px, and does not reliably zoom back out. Mobile-only so the compact
     desktop control keeps its 14px look. */
  .hdr-search input { font-size: 16px; }
  /* DESIGN.md sets a 44px mobile target; the shared icon button was 40px, so
     the hamburger — the control that opens the whole mobile nav — missed it. */
  .iconbtn { width: 44px; height: 44px; }
  /* .hdr-row is a flex row; without flex:none the hamburger was shrunk to 35px
     wide even after the 44px rule above. */
  .hdr-menu { flex: none; }
  .hdr-search .ac-panel { position: fixed; left: 14px; right: 14px; top: 62px; }
  .hdr-utils .hdr-util:not(.hdr-util-cta) { display: none; }
  /* Saved and Compare stay on the phone header. They used to hide here because
     the mobile drawer carried them; the drawer no longer does, and these are
     the only remaining way into /saved and /compare on a small screen. The
     stacked icon-over-label is too wide at this size, so drop the labels and
     keep the icon plus its count badge at a 44px target. */
  .hdr-actions { gap: 0; }
  .hdr-action-label { display: none; }
  .hdr-action { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .hdr-account .hdr-action { width: auto; min-width: 44px; padding: 0 6px; }
  .brand-word { display: none; }
  /* Header only: swap the full lockup for the icon. The footer and the mobile
     nav panel have the width for the lockup and keep it. */
  .hdr-row .brand-logo { display: none; }
  .hdr-row .brand-logo-mark { display: block; }
  .mobile-nav-panel .brand-word { display: inline; }

  .hero-split { grid-template-columns: 1fr; gap: 0; }
  .hero-media { display: none; }
  .hero-copy { padding: 40px 0 42px; }

  .lhero-inner { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .lhero-media { display: none; }

  .list-shell { grid-template-columns: 1fr; gap: 0; }
  .list-rail { display: none; }
  .toolbar-filters { display: inline-flex; }
  .toolbar-filter-toggle { display: none; }
  .active-bar-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .lhero-facts { margin-top: 12px; }
  .brand-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter-sm) * -1); padding-inline: var(--gutter-sm);
    scroll-snap-type: x proximity; }
  .brand-cats::-webkit-scrollbar { display: none; }
  .brand-cats .pill { flex: none; scroll-snap-align: start; }

  .pd-top { grid-template-columns: 1fr; gap: 26px; }
  .gal { position: static; }
  .pd-cols { grid-template-columns: 1fr; gap: 30px; }
  .pd-band { grid-template-columns: 1fr; }
  .drops-show { grid-template-columns: 1fr; }
  .drop-mini-grid { grid-template-columns: 1fr 1fr; }
  .guides { grid-template-columns: 1fr; }
  .offer { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .offer-meta { display: none; }

  .bhero-inner { grid-template-columns: 1fr; gap: 0; }
  .bhero-media { display: none; }
  .blog-layout, .art-layout, .contact-layout { grid-template-columns: 1fr; gap: 26px; }
  .bside { position: static; }
  .bgrid { grid-template-columns: 1fr 1fr; }
  .bcard-featured { grid-column: 1 / -1; }
  .art-layout { max-width: 920px; }
  .art-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-side .art-toc { display: none; }
  .art-toc-mobile { display: block; }

  .dpr-stats { grid-template-columns: 1fr 1fr; }
  .dpr-about { grid-template-columns: 1fr; gap: 22px; }
  .dpr-cols { grid-template-columns: 1fr; gap: 26px; }
  .dpr-location-panel { grid-template-columns: 1fr; }
  .dpr-showroom { border-top: 1px solid var(--kc-border-default); border-left: 0; }
  .dpr-showroom-media > img { max-height: 320px; aspect-ratio: 16 / 7; }
  .dpr-banner, .dpr-banner-inner { min-height: 150px; }
  .sup-grid { grid-template-columns: 1fr; }

  .fd-shell { grid-template-columns: 1fr; gap: 16px; min-height: 0; }
  .fd-list { max-height: none; overflow: visible; padding-right: 0; }
  .fd-map-pane { position: static; }
  .fd-map { height: 52vh; min-height: 280px; }
  .fd-shell[data-fd-view="list"] .fd-map-pane { display: none; }
  .fd-shell[data-fd-view="map"] .fd-list { display: none; }
  .fd-shell[data-fd-view="map"] .fd-map { height: 65vh; min-height: 360px; }
  .fd-search-actions { width: 100%; }
  .fd-search-actions .btn { flex: 1; }

  .drg-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .drg-hero-media { display: none; }
  /* minmax(0,…) not a bare 1fr: 1fr means minmax(auto,1fr) and the auto floor
     is the card's min-content width, which was 306.5px inside a 292px column. */
  .drg-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .drg-stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .drg-faq { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  html { overflow-x: clip; }
  .wrap, .container { padding-inline: var(--gutter-sm); }
  .page { padding-inline: var(--gutter-sm); }
  .hero-copy { padding: 34px 0 36px; }
  .hero-search input { height: 54px; padding-right: 112px; }
  .hero-search button { height: 42px; padding: 0 14px; }
  .dept-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .brand-marks { grid-template-columns: repeat(2, 1fr); }
  .trust-cards { grid-template-columns: 1fr; }
  .trust-line { gap: 6px 0; flex-direction: column; }
  .strip-dark-inner { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 0 28px; }
  .ftr-grid .ftr-brand { grid-column: 1 / -1; }
  .pc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pc-info { padding: 11px 12px 13px; }
  .pc-media { padding: 14px; }
  .pc-grid.is-list .pc-media { width: 110px; }
  .drop-mini-grid { grid-template-columns: 1fr; }
  .drops-page-grid { grid-template-columns: 1fr; }
  .sec { padding: 42px 0 6px; }
  .sec-band, .sec-pad { padding-bottom: 42px; }

  .buybox { padding: 18px; }
  .buybox-price { font-size: 2rem; }
  .pd-keyspecs { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Phone offer row. Three lines, nothing else:
       1   [logo] Retailer name .................... $1,234
       2   Last checked 14 Aug 2026 ................ inc GST
       3   [           View deal ->             ]
     The price cell spans both text rows so its "inc GST" line sits level with
     the last-checked date instead of pushing a fourth row. */
  .offer { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; gap: 4px 14px; }
  .offer-who { grid-column: 1; grid-row: 1; min-width: 0; }
  .offer-price { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .offer-checked { grid-column: 1; grid-row: 2; flex-direction: row;
    align-items: baseline; gap: 6px; }
  .offer-cta { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .offer-cta .btn { width: 100%; }
  /* The retailer's own listing title restates the product name already in the
     page heading ("Eswood SW500 ..."), and at .79rem in a narrow row it is
     clutter, not information. Desktop keeps it; phones drop it. */
  .offer-title { display: none; }
  /* Stock chip and pack note have no line in the three-row layout above. */
  .offer-meta { display: none; }
  .offer-avatar { width: 62px; height: 40px; border-radius: 9px; padding: 4px 6px; }
  .offer-avatar-ph { font-size: .9rem; }
  .enquiry-row { flex-direction: column; gap: 0; }
  .dealer-head { flex-direction: column; }
  .pager-num { min-width: 36px; height: 36px; }
  .dlr-hero-inner { gap: 16px; padding: 24px 0; }
  .dlr-logo-tile { width: 68px; height: 68px; }

  .bgrid { grid-template-columns: 1fr; }
  .bcard-featured { grid-column: auto; grid-template-columns: 1fr; }
  .bcard-featured .bcard-media { min-height: 0; aspect-ratio: 16 / 10;
    border-right: 0; border-bottom: 1px solid var(--line-2); }
  .bcard-featured .bcard-body { padding: 22px 20px 24px; }
  .bcard-featured .bcard-body h3 { max-width: none; font-size: 1.35rem; }
  .bhero-copy { padding: 32px 0 34px; }
  .bhero-stats { gap: 14px; }
  .art-pn { grid-template-columns: 1fr; }
  .art-cta { padding: 20px; }
  /* The article title is already the next element. Repeating it as a clipped
     final crumb forces the separator onto a line by itself on phones. */
  .art-main > .crumbs li:last-child { display: none; }
  /* Author box stacks once the avatar and bio no longer sit side by side. */
  .art-authorbox { flex-direction: column; gap: 12px; padding: 20px; }
  .sec-blog { padding: 30px 0 4px; }
  .art-title { font-size: 2rem; line-height: 1.08; }
  .art-lede { font-size: 1.04rem; line-height: 1.62; }
  .art-meta { gap: 8px 12px; }
  .art-meta .bcard-dot { display: none; }
  .art-hero { margin-top: 28px; aspect-ratio: 4 / 3; }
  .art-takeaways { padding: 20px; }
  .art-takeaways ul { grid-template-columns: 1fr; gap: 9px; }
  .art-prose { padding-top: 12px; }
  .art-prose h2 { font-size: 1.35rem; margin-top: 1.85em; }
  .art-side { grid-template-columns: 1fr; }

  .dpr-stats { grid-template-columns: 1fr; }
  .dpr-id { padding: 18px; margin-top: 12px; }
  .dpr-logo { width: 76px; height: 76px; margin-top: 0; }
  .dpr-ctas { margin-left: 0; width: 100%; }
  /* One action per line on a phone.
     `flex: 1` shared the row between every button, which on a 390px screen left
     each of the three about 111px of a 354px card - roughly 70px of text once
     padding is taken. "Enquire via KitchenCompare" broke mid-phrase, "Claim
     this profile" ran to three lines, and `align-items: center` then left the
     three at different heights, so the primary action read as debris.
     Stacking is not a fallback here: these three are not peers. Colour already
     ranks them - gold claim, outlined enquiry, grey inert website link - so
     full width lets each label stay on one line and gives every one the same
     honest hit area. Source order is untouched, which keeps focus order intact
     and keeps "Free to claim - Verification required" sitting under the gold
     button it captions. */
  .dpr-ctas-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .dpr-ctas .btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 46px;      /* a floor under the 44px touch target */
    /* Wrapping stays allowed on purpose. At full width every current label fits
       on one line, so nothing breaks mid-phrase; keeping `normal` means a
       longer label wraps instead of overflowing the card. */
  }
  .dpr-band { padding: 22px; }
  .dpr-banner-panel { max-width: 100%; }
  .dpr-location-main, .dpr-showroom { padding: 18px; }
  .dpr-location-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .dpr-loc-row { grid-template-columns: 34px minmax(0, 1fr); }
  .dpr-directions { grid-column: 2; justify-self: start; padding-inline: 0; }
  .dpr-showroom-media > img { max-height: none; aspect-ratio: 4 / 3; }

  .fd-card-actions .btn { flex: 1 1 auto; justify-content: center; }
  .fd-card-logo { width: 48px; height: 48px; }
}

@media (max-width: 380px) {
  /* Measured, not guessed: at 320px the card leaves the buttons 254px, and
     "Enquire via KitchenCompare" needs about 260px at the default 20px side
     padding - six pixels short, so it wrapped to two lines and broke the even
     rhythm the stack exists to create. Trimming the side padding buys those
     pixels back and leaves the 46px hit area alone. */
  .dpr-ctas .btn { padding-left: 12px; padding-right: 12px; }
}

/* ------------------------------------------------------------- V3 Finance */
.fin-hero {
  background: var(--kc-green-800); color: var(--kc-text-on-dark);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fin-hero-inner {
  display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-start;
}
.fin-hero-copy { flex: 3 1 460px; min-width: 0; padding: var(--band-y) 0 56px; }
.fin-hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #A8E6C4;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--r-pill); margin-bottom: 24px;
}
.fin-hero h1 {
  font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading);
  margin: 0 0 20px; max-width: 24ch; text-wrap: balance;
}
.fin-accent { color: var(--kc-brand-accent); }
.fin-hero-sub {
  font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.72);
  margin: 0 0 26px; max-width: var(--measure-lede);
}
.fin-hero-points {
  list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.fin-hero-points li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: rgba(255,255,255,.88);
}
.fin-hero-points svg {
  flex: none; color: var(--kc-brand-accent); stroke-width: 2.6; margin-top: 1px;
  width: 12px; height: 12px; padding: 4px; box-sizing: content-box;
  background: rgba(86,217,138,.16); border-radius: var(--r-pill);
}
.fin-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* One on-dark deal button for the whole finance page. The four contexts (hero,
   quiz, calculator, bottom CTA) were four full redefinitions that differed only
   in padding and font-size — and three of them silently inherited the light
   `.btn-deal:hover` (deep green), so the same button flipped hue in three
   places. The face lives here; each context below overrides size only. */
.fin-hero-actions .btn-deal,
.fin-quiz-actions .btn-deal,
.fin-calc-output .btn-deal,
.fin-cta-actions .btn-deal {
  background: var(--kc-brand-accent); color: var(--kc-surface-inverse); border: 0;
  font-weight: 700; border-radius: var(--r-control);
}
.fin-hero-actions .btn-deal:hover,
.fin-quiz-actions .btn-deal:hover,
.fin-calc-output .btn-deal:hover,
.fin-cta-actions .btn-deal:hover { background: #48c67a; }
.fin-hero-actions .btn-deal { padding: 16px var(--gutter); font-size: 14.5px; }
.fin-hero-actions .btn-outline.btn-inv {
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  color: var(--kc-text-on-dark);
  padding: 15px 24px; font-weight: 700; font-size: 15px; border-radius: var(--r-control);
}
.btn-inv {
  background: transparent; color: var(--kc-text-on-dark);
  border-color: rgba(255,255,255,.28);
}
.btn-inv:hover {
  border-color: var(--kc-text-on-dark); background: rgba(255,255,255,.06);
  color: var(--kc-text-on-dark);
}
.fin-form-card {
  flex: 2 1 330px; min-width: 0; margin: 34px 0 44px;
  background: var(--kc-surface-card); color: var(--kc-text-primary);
  border-radius: var(--r-feature); box-shadow: var(--shadow-4);
  border: 0;
}
.fin-form-card-inner { padding: 22px; }
.fin-form-card h2 {
  margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.025em;
  color: var(--kc-text-primary);
}
.fin-form-lead { margin: 0 0 18px; font-size: 12.5px; color: var(--kc-text-tertiary); }
.fin-form label {
  display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700;
  color: var(--kc-text-secondary);
}
.fin-form input, .fin-form select, .fin-form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 11px;
  border: 1px solid var(--kc-field-border); border-radius: var(--r-control);
  font-size: 13.5px; outline: none; color: var(--kc-text-primary);
  background: var(--kc-surface-card);
}
/* First/last name pair. Collapses to one column on narrow cards — the hero
   form column is already tight before the layout breaks to stacked. */
.fin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fin-form-row label { margin-bottom: 10px; }
@media (max-width: 520px) {
  .fin-form-row { grid-template-columns: 1fr; gap: 0; }
}
/* Fine print is readable content, not decoration — --kc-text-quiet (#8E9994)
   fails AA, so this uses tertiary. */
.fin-form-card .fine-print {
  font-size: 11.5px; color: var(--kc-text-tertiary); margin: 12px 0 0;
  text-align: center; line-height: 1.5;
}
.fin-strip { background: var(--kc-brand-accent); border-bottom: 0; }
.fin-strip-inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
}
.fin-strip-stat { padding: 18px 16px; text-align: center; border-left: 1px solid rgba(12,42,27,.14); }
.fin-strip-stat strong {
  display: block; font-size: 23px; font-weight: 800; letter-spacing: -.03em;
  color: var(--kc-surface-inverse);
}
.fin-strip-stat span { display: block; font-size: 11.5px; font-weight: 700; color: rgba(12,42,27,.66); margin-top: 2px; }
.fin-intro {
  padding: 0; background: var(--kc-surface-card);
  border-bottom: 1px solid var(--kc-border-default);
}
/* `.wrap` child: vertical-only padding via padding-block. The old
   `padding: 34px 24px` shorthand replaced `.wrap`'s padding-inline (the
   canonical --gutter clamp) with a flat 24px, double-guttering the narrow
   measure. See the --gutter comment in :root. */
.fin-intro-inner { max-width: 900px; padding-block: 34px; }
.fin-intro-inner p {
  font-size: 14.5px; line-height: 1.75; color: var(--kc-text-secondary); margin: 0 0 14px;
}
.fin-intro-inner p:last-child { margin-bottom: 0; }
/* Keeps `.wrap`'s horizontal padding — zeroing it made the content column 96px
   wider than the mock (main measured 1264px vs the mock's 1168px at 1996px). */
.fin-layout {
  display: flex; flex-wrap: wrap; gap: clamp(30px, 3.5vw, 56px); align-items: flex-start;
}
.fin-toc {
  flex: 1 1 230px; min-width: 210px; max-width: 280px;
  position: sticky; top: var(--sticky-top); background: transparent; border: 0;
  border-radius: 0; padding-block: var(--shell-y);
}
/* Readable section label, not decoration — uses tertiary, not the AA-failing
   --kc-text-quiet it was hard-coded to. */
.fin-toc-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kc-text-tertiary); margin-bottom: 14px;
}
.fin-toc-nav { display: flex; flex-direction: column; gap: 1px; }
.fin-toc-link {
  display: block; padding: 7px 10px; border-radius: var(--r-control); font-size: .84rem;
  font-weight: 600; color: var(--kc-text-secondary); text-decoration: none;
}
.fin-toc-link:hover, .fin-toc-link.is-active {
  background: var(--kc-brand-xsoft); color: var(--kc-brand-deep);
}
.fin-toc-promo {
  margin-top: 22px; padding: 16px; border-radius: var(--r-card);
  background: var(--kc-brand-xsoft); border: 1px solid #DCEBE2;
}
.fin-toc-promo strong { display: block; font-weight: 800; font-size: 13.5px; margin-bottom: 6px; }
.fin-toc-promo p { font-size: 12.5px; color: var(--kc-text-tertiary); line-height: 1.55; margin: 0 0 12px; }
.fin-toc-promo .btn { padding: 13px; font-size: 13.5px; font-weight: 700; }
.fin-main { flex: 4 1 620px; min-width: 0;
  padding: var(--shell-y) 0 var(--shell-y-end);
  display: flex; flex-direction: column; gap: 44px; }
.fin-section { padding: 0; scroll-margin-top: var(--scroll-offset); }
.fin-eyebrow {
  display: inline-block; background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); margin: 0 0 14px;
}
.fin-h2 {
  font-size: clamp(23px, 2.8vw, 31px); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.12; margin: 0 0 12px;
}
.fin-lead {
  font-size: 14.5px; color: var(--kc-text-tertiary); line-height: 1.7;
  margin: 0 0 22px; max-width: 62ch;
}
/* list-style/padding reset: without it the <ol> keeps its 40px marker indent and every
   step card renders 40px narrower than the mock (1128px vs 1168px). */
.fin-steps {
  display: flex; flex-direction: column; gap: 10px; counter-reset: finstep;
  list-style: none; margin: 0; padding: 0;
}
.fin-step {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px;
}
.fin-step-num {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-pill);
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  display: grid; place-items: center; font-weight: 800; font-size: 14.5px;
}
.fin-step > div { min-width: 0; }
.fin-step h3 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 7px; }
.fin-step > div > p {
  font-size: 13.5px; line-height: 1.65; color: var(--kc-text-tertiary); margin: 0 0 10px;
}
/* scoped so it outranks the `.fin-step > div > p` body-copy rule above */
.fin-step .fin-step-tip {
  margin: 0; background: var(--kc-brand-xsoft);
  border-left: 2px solid var(--kc-brand-accent); border-radius: 0 8px 8px 0;
  padding: 9px 12px; font-size: 12.5px; color: var(--kc-stone-800); line-height: 1.55;
}
.fin-structures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.fin-structure-card {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 20px;
}
.fin-structure-icon {
  width: 38px; height: 38px; border-radius: var(--r-control); background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); display: grid; place-items: center; margin-bottom: 14px;
}
.fin-structure-card h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.fin-structure-card > p {
  font-size: 13px; line-height: 1.6; color: var(--kc-text-tertiary); margin: 0 0 14px;
}
.fin-structure-card ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.fin-structure-card li {
  position: relative; padding-left: 20px; font-size: 12.5px;
  color: var(--kc-text-secondary); line-height: 1.5;
}
.fin-structure-card li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E3F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E");
}
.fin-structure-best {
  display: block; margin-top: 14px; border-top: 1px solid var(--kc-border-subtle); padding-top: 12px;
  font-size: 12px; font-weight: 400; color: var(--kc-text-tertiary);
}
.fin-structure-best strong { color: var(--kc-text-secondary); font-weight: 700; }
.fin-quiz {
  background: var(--kc-green-800); border-radius: var(--r-feature); padding: 28px;
  color: var(--kc-text-on-dark); border: 0;
}
.fin-quiz-head { text-align: center; margin-bottom: 22px; }
.fin-quiz-head h3 { font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.fin-quiz-head p { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
.fin-quiz-progress {
  height: 5px; background: rgba(255,255,255,.14); border-radius: var(--r-pill); overflow: hidden;
  margin-bottom: 24px;
}
.fin-quiz-progress span {
  display: block; height: 100%; background: var(--kc-brand-accent);
  border-radius: var(--r-pill);
  /* The fill is scaled, not widened — see the trust/editorial motion block at
     the end of this file. Animating width drove layout on every frame. */
}
.fin-quiz-step {
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kc-brand-accent); margin: 0 0 10px;
}
.fin-quiz-question { text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
/* Options are an equal-width grid in the mock (4 across at desktop), not a wrapping
   flex row — as flex they sized to their text and looked ragged. */
.fin-quiz-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin: 0 0 18px;
}
.fin-quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.fin-quiz-opt {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
  border-radius: var(--r-control); padding: 12px 18px; font: inherit; font-weight: 600;
  font-size: 13.5px; cursor: pointer; color: rgba(255,255,255,.86); text-align: left;
}
.fin-quiz-opt:hover {
  border-color: var(--kc-brand-accent); color: var(--kc-brand-accent);
  background: rgba(86,217,138,.08);
}
.fin-quiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fin-quiz .btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: var(--kc-text-on-dark);
  padding: 12px 18px; font-size: 13.5px; font-weight: 700; border-radius: var(--r-control);
}
.fin-quiz .btn-ghost:hover {
  border-color: var(--kc-text-on-dark); background: rgba(255,255,255,.06);
  color: var(--kc-text-on-dark);
}
.fin-quiz-step[hidden], .fin-quiz-result[hidden], .fin-split-panel[hidden] { display: none !important; }
.fin-quiz-note { font-size: 12px; color: rgba(255,255,255,.45); }
.fin-quiz-result { text-align: center; }
.fin-quiz-result > .fin-quiz-step { margin-bottom: 10px; }
.fin-quiz-result h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; }
.fin-quiz-result > p:not(.fin-quiz-step) { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.76); margin: 0 auto 20px; max-width: 52ch; }
.fin-quiz-facts {
  list-style: none; margin: 0 0 20px; padding: 0; display: grid; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}
.fin-quiz-facts div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-control); padding: 14px; }
.fin-quiz-facts dt { font-size: 11.5px; color: rgba(255,255,255,.58); margin-bottom: 4px; }
.fin-quiz-facts dd { margin: 0; font-size: 15px; font-weight: 700; }
.fin-quiz-actions { justify-content: center; }
/* .fin-quiz-actions .btn-deal takes its face from the consolidated on-dark rule
   at the top of this block and its size from `.fin-quiz-actions .btn` above. */
.fin-quiz-actions .btn { padding: 12px 18px; font-size: 13.5px; font-weight: 700; border-radius: var(--r-control); }
.fin-eligibility { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; padding: 0; border: 0; background: transparent; }
.fin-elig-card {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-left: 3px solid var(--kc-stone-200); border-radius: var(--r-card); padding: 18px;
}
.fin-elig-card h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 7px; }
.fin-elig-card p { font-size: 13px; line-height: 1.6; color: var(--kc-text-tertiary); margin: 0; }
.fin-elig-yes { border-left-color: var(--kc-brand-deep); background: var(--kc-surface-card); }
.fin-elig-warn { border-left-color: var(--kc-deal-fg); background: var(--kc-surface-card); }
.fin-scenarios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
/* Each scenario card carries its own tint in the mock (green / amber / violet),
   keyed by position rather than a modifier class so the markup stays as-is. */
.fin-scenario-card {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 20px;
}
.fin-scenarios > .fin-scenario-card:nth-child(1) { background: #F1FAF4; border-color: #DCEBE2; }
.fin-scenarios > .fin-scenario-card:nth-child(2) {
  background: var(--kc-deal-bg); border-color: var(--kc-deal-border);
}
.fin-scenarios > .fin-scenario-card:nth-child(3) { background: #F5F2FC; border-color: #E0D8F5; }
.fin-scenario-mid { box-shadow: var(--shadow-1); }
.fin-scenario-tag {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kc-brand-deep); margin-bottom: 12px;
}
.fin-scenario-amount { font-size: 27px; font-weight: 800; letter-spacing: -.035em; margin: 0 0 4px; }
.fin-scenario-what { font-size: 12.5px; color: var(--kc-text-tertiary); margin: 0 0 16px; }
.fin-scenario-rows { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.fin-scenario-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(22,33,28,.07); font-size: 12.5px; }
.fin-scenario-rows dt { color: var(--kc-text-tertiary); font-weight: 400; }
.fin-scenario-rows dd { margin: 0; font-weight: 700; }
.fin-scenario-monthly {
  background: var(--kc-brand-xsoft); border-radius: var(--r-sm); padding: 13px;
  font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--kc-brand-deep);
}
.fin-scenario-monthly span { display: block; font-size: 11.5px; font-weight: 400;
  color: var(--kc-text-tertiary); margin-top: 2px; }
.fin-scenario-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--kc-text-tertiary);
}
.fin-split-tabs {
  display: flex; gap: 6px; background: var(--kc-border-subtle); border-radius: var(--r-card); padding: 5px;
  margin-bottom: 18px; flex-wrap: wrap; width: fit-content; max-width: 100%;
}
.fin-split-tab {
  border: 0; background: transparent; border-radius: var(--r-control); padding: 12px 18px;
  font: inherit; font-weight: 700; font-size: 13.5px; line-height: normal;
  cursor: pointer; color: var(--kc-text-secondary);
}
.fin-split-tab.is-active { background: var(--kc-brand-deep); color: var(--kc-text-on-dark); }
.fin-split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.fin-split-item { background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px; }
.fin-split-item-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px;
}
.fin-split-item h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.fin-split-cost {
  font-size: 12.5px; font-weight: 800; color: var(--kc-brand-deep); white-space: nowrap;
}
.fin-split-item p { font-size: 13px; line-height: 1.6; color: var(--kc-text-tertiary); margin: 0; }
.fin-calc {
  background: var(--kc-green-800); border-radius: var(--r-feature); padding: 26px;
  color: var(--kc-text-on-dark);
  display: flex; flex-wrap: wrap; gap: 28px;
}
.fin-calc-sliders { flex: 3 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 22px; margin-bottom: 0; }
.fin-calc-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.fin-calc-slider-top span:first-child {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.56);
}
.fin-calc-slider-top strong {
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--kc-brand-accent);
}
.fin-calc-slider input[type="range"] { width: 100%; accent-color: var(--kc-brand-accent); }
.fin-calc-range { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.4); margin-top: 6px; }
.fin-calc-freq { display: block; margin-bottom: 0; }
.fin-calc-freq-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.56); margin-bottom: 9px;
}
.fin-calc-freq-btns { display: flex; gap: 6px; background: rgba(255,255,255,.08); border-radius: var(--r-control); padding: 4px; width: fit-content; flex-wrap: wrap; }
.fin-calc-freq-btn {
  border: 0; background: transparent; border-radius: var(--r-control); padding: 8px 14px;
  font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; color: rgba(255,255,255,.6);
}
.fin-calc-freq-btn:hover { color: var(--kc-text-on-dark); }
.fin-calc-freq-btn.is-active { background: rgba(255,255,255,.14); color: var(--kc-text-on-dark); }
.fin-calc-output { flex: 2 1 260px; min-width: 0; display: block; background: none; border-radius: 0; padding: 0; }
.fin-calc-result {
  background: rgba(86,217,138,.1); border: 1px solid rgba(86,217,138,.28); border-radius: var(--r-card);
  padding: 20px; margin-bottom: 12px;
}
.fin-calc-result-label { display: block; font-size: 11px; font-weight: 800; color: var(--kc-brand-accent); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.fin-calc-result-amount { font-size: clamp(34px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0; color: var(--kc-text-on-dark); }
.fin-calc-result-per { font-size: 13px; color: rgba(255,255,255,.62); margin: 4px 0 0; }
.fin-calc-rows { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.fin-calc-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.fin-calc-rows dt { color: rgba(255,255,255,.6); font-weight: 400; }
.fin-calc-rows dd { margin: 0; font-weight: 700; }
.fin-calc-output .btn-deal { width: 100%; padding: 14px; font-size: 14px; }
.fin-calc-disclaimer { margin: 12px 0 0; padding: 0; background: none; border: 0; font-size: 11.5px; color: rgba(255,255,255,.42); line-height: 1.5; }
.fin-callout-amber {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 14px 16px;
  border-radius: var(--r-control); font-size: 13px; line-height: 1.6;
  background: var(--kc-deal-bg); border: 1px solid var(--kc-deal-border); color: #6B5836;
}
.fin-callout-amber strong { color: #8A5D12; font-weight: 700; }
.fin-callout-amber svg {
  flex: none; margin-top: 1px; width: 18px; height: 18px; color: var(--kc-deal-fg);
}
.fin-tax { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fin-tax-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px;
}
.fin-tax-item > span {
  flex: none; width: 34px; font-size: 22px; font-weight: 800; color: #D6E4DB; letter-spacing: -.03em;
}
.fin-tax-item > div { min-width: 0; }
.fin-tax-item h3 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.fin-tax-item p { font-size: 13.5px; line-height: 1.65; color: var(--kc-text-tertiary); margin: 0; }
.fin-apply { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.fin-apply-step {
  display: grid; grid-template-columns: 1fr;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px;
}
.fin-apply-step > span:first-child {
  width: 30px; height: 30px; background: var(--kc-brand-deep);
  color: var(--kc-text-on-dark); border-radius: var(--r-pill);
  display: grid; place-items: center; font-weight: 800; font-size: 13.5px; margin-bottom: 14px;
}
.fin-apply-step h3 { font-size: 14.5px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 7px; }
.fin-apply-step p { font-size: 13px; line-height: 1.6; color: var(--kc-text-tertiary); margin: 0 0 10px; }
.fin-apply-time { font-size: 12px; font-weight: 700; color: var(--kc-brand-deep); }
.fin-faq {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-panel); overflow: hidden;
}
.fin-faq-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--kc-border-subtle);
  border-radius: 0; padding: 0;
}
.fin-faq-item:last-child { border-bottom: 0; }
.fin-faq-item summary {
  position: relative; cursor: pointer; font-weight: 700; padding: 16px 46px 16px 18px; list-style: none;
  font-size: 14.5px; color: var(--kc-text-primary);
}
.fin-faq-item summary::-webkit-details-marker { display: none; }
/* Decorative chevron glyph, duplicated by the summary's own open/closed state —
   the one place in this block where the AA-failing quiet token is correct. */
.fin-faq-item summary svg {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--kc-text-quiet);
}
.fin-faq-item p {
  margin: 0; padding: 0 18px 18px; color: var(--kc-text-tertiary);
  font-size: 13.5px; line-height: 1.7; max-width: 76ch;
}
.fin-cta {
  display: block; background: var(--kc-green-800); color: var(--kc-text-on-dark);
  border-radius: 0; padding: 0; margin: 0;
}
.fin-cta-inner {
  max-width: var(--content-max-width); margin-inline: auto;
  padding: var(--band-y) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.fin-cta .dpr-band-copy { flex: 2 1 380px; min-width: 0; }
.fin-cta .tag-best {
  display: block; background: transparent; padding: 0; border-radius: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kc-brand-accent); margin-bottom: 12px;
}
.fin-cta h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; max-width: 28ch; }
.fin-cta p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; max-width: none; }
.fin-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fin-cta-actions .btn-deal { padding: 15px 24px; font-size: 15px; }
.fin-cta-actions .btn-outline.btn-inv { padding: 15px 24px; font-size: 15px; font-weight: 700; border-radius: var(--r-control); }

/* ------------------------------------------------------------- V3 Combi */
.combi-hero {
  position: relative; background: linear-gradient(135deg, #E8F4EC 0%, #F8F8F6 55%, #fff 100%);
  border-bottom: 1px solid var(--kc-border-default); overflow: hidden;
}
.combi-hero-angle {
  position: absolute; inset: auto -10% -40% 40%; height: 70%;
  background: rgba(86,217,138,.12); transform: rotate(-8deg); pointer-events: none;
}
.combi-hero-inner { position: relative; padding-block: 20px 24px; }
.combi-hero-row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: 12px;
}
.combi-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading); margin: 0 0 12px;
}
.combi-hero-sub {
  font-size: 1.02rem; line-height: 1.6; color: var(--kc-text-secondary);
  margin: 0 0 22px; max-width: var(--measure-lede);
}
.combi-hero-panel {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-2);
}
.combi-hero-panel-main { display: flex; gap: 14px; align-items: flex-start; }
.combi-hero-panel-icon {
  width: 42px; height: 42px; border-radius: var(--r-card); background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); display: grid; place-items: center; flex: none;
}
.combi-hero-panel h2 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; }
.combi-hero-panel p { margin: 0 0 12px; font-size: .88rem; color: var(--kc-text-secondary); line-height: 1.5; }
.combi-hero-benefits {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--kc-border-subtle);
  display: grid; gap: 12px;
}
.combi-hero-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; }
.combi-hero-benefits svg { color: var(--kc-brand-deep); flex: none; margin-top: 2px; }
.combi-hero-benefits strong { display: block; }
.combi-hero-benefits span span { color: var(--kc-text-tertiary); font-size: .8rem; }
.combi-hero-media {
  overflow: hidden; aspect-ratio: 16/10; background: none;
  border: 0; border-radius: 0; box-shadow: none;
}
.combi-hero-media img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken;
}
.combi-trust { background: #fff; border-bottom: 1px solid var(--kc-border-default); }
.combi-trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-block: 22px;
}
.combi-trust-stat { display: flex; gap: 12px; align-items: flex-start; }
.combi-trust-icon {
  width: 40px; height: 40px; border-radius: var(--r-control); background: var(--kc-brand-xsoft);
  color: var(--kc-brand-deep); display: grid; place-items: center; flex: none;
}
.combi-trust-stat strong { display: block; font-size: 1.25rem; font-weight: 800; }
.combi-trust-stat span span { display: block; font-size: .78rem; color: var(--kc-text-tertiary); }
.combi-filter-lock { margin-bottom: 12px; }
.combi-filter-locked {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--kc-brand-xsoft); border-radius: 999px; font-size: .84rem; font-weight: 700;
  color: var(--kc-brand-deep);
}
.combi-gst-note { font-size: .82rem; color: var(--kc-text-tertiary); margin: 0 0 14px; }
.combi-why, .combi-brands, .combi-guide { padding: var(--band-y) 0; }
.combi-why { background: #fff; border-block: 1px solid var(--kc-border-default); }
/* .combi-why-grid and .combi-why-cta were each defined twice — an auto-fit
   grid and a centred flex row here, a stacked list and a column there. The
   later pair won and matches the <ul> the macro actually renders. Single
   definitions live in the "why-compare full-width section" block below. */
.combi-why-meta { font-size: .84rem; color: var(--kc-text-tertiary); }
.combi-brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 16px;
}
.combi-brand-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
}
.combi-brand-card:hover { border-color: var(--kc-brand-deep); box-shadow: var(--shadow-1); }
.combi-brand-name { font-weight: 700; font-size: .92rem; }
.combi-brand-n { font-size: .78rem; color: var(--kc-text-tertiary); }
.combi-guide { background: var(--kc-surface-inverse); color: #fff; }
.combi-guide-inner {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center;
}
.combi-guide-copy h2 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.combi-guide-copy p { margin: 0; color: rgba(255,255,255,.72); max-width: 48ch; }
.combi-guide-links { display: flex; flex-wrap: wrap; gap: 10px; }
/* Closed by default — never leave the scrim intercepting clicks when aria-hidden. */
.combi-modal {
  position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 16px;
}
.combi-modal[hidden] { display: none !important; }
.combi-modal.is-open { display: grid; }
.combi-modal-scrim { position: absolute; inset: 0; background: rgba(12,42,27,.55); }
.combi-modal-panel {
  position: relative; z-index: 1; width: min(480px, 100%); background: #fff;
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-3);
}
.combi-modal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px;
}
.combi-modal-head h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.combi-modal-lead { margin: 0 0 16px; font-size: .9rem; color: var(--kc-text-secondary); line-height: 1.5; }
.combi-quote-context {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px;
  background: var(--kc-brand-xsoft); border-radius: 10px; margin-bottom: 14px;
  font-size: .84rem; color: var(--kc-text-secondary);
}
.combi-quote-context-icon { color: var(--kc-brand-deep); flex: none; }

/* combi: unified filter rail card — category lock + filter form in one white card */
.combi-rail-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.combi-rail-card .combi-filter-lock { padding: 14px 18px 12px; margin-bottom: 0; border-bottom: 1px solid var(--line-2); }
.combi-rail-card .fform { border: none; border-radius: 0; padding: 0 18px 18px; background: transparent; box-shadow: none; }
/* combi: why-compare full-width section layout */
.combi-why-inner { display: flex; align-items: flex-start; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
.combi-why-copy { flex: 1; min-width: 280px; }
.combi-why-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; list-style: none; padding: 0; }
.combi-why-grid li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; }
.combi-why-grid li svg { color: var(--kc-brand-deep); flex: none; margin-top: 2px; }
.combi-why-grid li strong { display: block; font-weight: 700; }
.combi-why-grid li > span > span { display: block; font-size: .82rem; color: var(--kc-text-tertiary); margin-top: 2px; }
.combi-why-cta { flex: none; min-width: 200px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 0; }
.combi-why-cta h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 800; }
.combi-why-cta > p:not(.combi-why-meta) { margin: 0 0 8px; font-size: .88rem; color: var(--kc-text-secondary); line-height: 1.5; max-width: 28ch; }
/* combi: guide links visible on dark green band */
.combi-guide-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.combi-guide-links a { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.82); font-size: .86rem; background: rgba(255,255,255,.1); border-radius: 999px; padding: 6px 14px; text-decoration: none; transition: background var(--dur-fast); }
.combi-guide-links a:hover { background: rgba(255,255,255,.22); color: #fff; }

/* combi-guide: richer 3-column layout (copy / topic rows / photo) */
.combi-guide-rich { display: grid; grid-template-columns: 1fr 1fr auto; gap: 36px; align-items: center; }
.combi-guide-photo { width: 210px; height: 195px; object-fit: cover; border-radius: var(--r-lg); flex: none; }
.combi-guide-topics { display: flex; flex-direction: column; gap: 0; }
.combi-guide-topic { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.82); text-decoration: none; font-size: .88rem; transition: color var(--dur-fast); }
.combi-guide-topic:last-child { border-bottom: none; }
.combi-guide-topic:hover { color: #fff; }
.combi-guide-topic-icon { color: rgba(255,255,255,.55); flex: none; }
.combi-guide-topic-chev { margin-left: auto; color: rgba(255,255,255,.4); flex: none; }

/* PLP: top category retailers panel */
.plp-ret { padding: var(--band-y) 0; }
.plp-ret-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.plp-ret-card { background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-lg); padding: 19px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plp-ret-head { display: flex; gap: 12px; align-items: flex-start; }
.plp-ret-av { width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--r-card);
  background: var(--kc-brand-soft); color: var(--kc-brand-deep); display: grid;
  place-items: center; font-weight: 800; font-size: 1.15rem; flex: none; }
.plp-ret-meta { flex: 1; min-width: 0; }
.plp-ret-name { font-weight: 700; font-size: .93rem; display: block; }
.plp-ret-loc { margin: 3px 0 0; font-size: .79rem; color: var(--kc-text-tertiary); display: flex; align-items: center; gap: 4px; }
.plp-ret-loc svg { flex: none; }
.plp-ret-verified { display: flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--kc-brand-deep); font-weight: 600; margin-top: 3px; }
.plp-ret-verified svg { flex: none; }
.plp-ret-tracked { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--kc-text-tertiary); font-size: .74rem; font-weight: 650; }
.plp-ret-count { display: block; margin-top: 5px; color: var(--kc-text-secondary); font-size: .76rem; font-weight: 650; }
.plp-ret-brands { margin: 0; font-size: .81rem; color: var(--kc-text-secondary); border-top: 1px solid var(--kc-border-subtle); padding-top: 10px; }
.plp-ret-brands strong { color: var(--kc-text-primary); font-weight: 600; }
.plp-ret-title-row { display: flex; align-items: center; gap: 8px; }
.plp-ret-state {
  flex: none; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  font-size: .66rem; font-weight: 800; letter-spacing: .06em;
}
.plp-ret-card > .btn { margin-top: auto; }

/* Collection foot: published buying guide, then the editorial pitch panel. */
.collection-guide-bar { padding: 0 0 34px; }
.collection-guide-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px; align-items: center; padding: 22px 24px;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-panel);
}
.collection-guide-icon {
  width: 44px; height: 44px; border-radius: var(--r-card);
  display: grid; place-items: center; color: var(--kc-brand-deep);
  background: var(--kc-brand-soft);
}
.collection-guide-copy h2 {
  margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.018em;
}
.collection-guide-label {
  display: block; margin-bottom: 5px; color: var(--kc-brand-deep);
  font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.collection-guide-copy p {
  margin: 0; color: var(--kc-text-tertiary); font-size: .86rem; line-height: 1.5;
  max-width: var(--measure-prose);
}
.collection-guide-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--kc-brand-deep); font-size: .86rem; font-weight: 750;
}
.collection-guide-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.collection-pitch { padding: 6px 0 var(--shell-y-end); }
.collection-pitch-panel {
  display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(410px, 1.05fr) minmax(260px, .7fr);
  overflow: hidden; background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
}
.collection-pitch-copy {
  padding: clamp(28px, 2.4vw, 36px); background: var(--kc-brand-xsoft);
}
.collection-pitch-copy h2 {
  margin: 18px 0 14px; font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.15; letter-spacing: -.026em; max-width: none;
}
.collection-pitch-audience {
  display: inline-flex; padding: 6px 10px; border: 1px solid var(--kc-green-200);
  border-radius: var(--r-pill); color: var(--kc-brand-deep); background: var(--kc-brand-soft);
  font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.collection-pitch-copy > p {
  margin: 0; max-width: 46ch; color: var(--kc-text-secondary);
  font-size: .92rem; line-height: 1.65;
}
.collection-pitch-copy ul {
  list-style: none; display: grid; gap: 11px; margin: 24px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--kc-border-default);
}
.collection-pitch-copy li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 8px;
  color: var(--kc-text-secondary); font-size: .84rem; line-height: 1.45;
}
.collection-pitch-copy li svg { color: var(--kc-brand-deep); margin-top: 2px; }
.collection-pitch-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--kc-border-default);
}
.collection-pitch-stats div { min-width: 0; }
.collection-pitch-stats dt {
  margin: 0; color: var(--kc-text-primary); font-size: 1.08rem;
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
}
.collection-pitch-stats dd {
  margin: 4px 0 0; color: var(--kc-text-tertiary); font-size: .68rem; line-height: 1.35;
}
.collection-pitch-form { padding: clamp(26px, 2.3vw, 35px); }
.collection-pitch-form h3 { margin: 0 0 18px; font-size: 1rem; font-weight: 800; }
.collection-pitch-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 12px;
}
.collection-pitch-fields > label {
  display: grid; gap: 6px; min-width: 0; color: var(--kc-text-secondary);
  font-size: .73rem; font-weight: 700;
}
.collection-pitch-fields .is-wide { grid-column: 1 / -1; }
.collection-pitch-fields input[type="text"],
.collection-pitch-fields input[type="email"],
.collection-pitch-fields textarea {
  width: 100%; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-control); background: var(--kc-surface-card);
  padding: 10px 12px; color: var(--kc-text-primary); font: inherit;
  font-size: .84rem; font-weight: 400; line-height: 1.4;
}
.collection-pitch-fields textarea { resize: vertical; min-height: 92px; }
.collection-pitch-fields input::placeholder,
.collection-pitch-fields textarea::placeholder { color: #68736C; opacity: 1; }
.collection-pitch-fields input:focus,
.collection-pitch-fields textarea:focus {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 1px; border-color: transparent;
}
.collection-pitch-types {
  border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px;
}
.collection-pitch-types legend {
  width: 100%; margin-bottom: 7px; color: var(--kc-text-secondary);
  font-size: .73rem; font-weight: 700;
}
.collection-pitch-types label { position: relative; cursor: pointer; }
.collection-pitch-types input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.collection-pitch-types span {
  display: inline-flex; padding: 7px 12px; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-pill); color: var(--kc-text-secondary);
  font-size: .72rem; font-weight: 700;
}
.collection-pitch-types input:checked + span {
  background: var(--kc-brand-deep); border-color: var(--kc-brand-deep); color: var(--kc-text-on-dark);
}
.collection-pitch-types input:focus-visible + span { outline: 2px solid var(--kc-brand-deep); outline-offset: 2px; }
.collection-pitch-submit { width: 100%; justify-content: center; margin-top: 16px; }
.collection-pitch-note {
  margin: 9px 0 0; color: var(--kc-text-tertiary); font-size: .72rem; line-height: 1.45;
}
.collection-pitch-status {
  margin: -4px 0 15px; padding: 10px 12px; border-radius: var(--r-control);
  font-size: .81rem; font-weight: 650; line-height: 1.4;
}
.collection-pitch-status.is-success { background: var(--kc-brand-soft); color: var(--kc-brand-deep); }
.collection-pitch-status.is-error { background: #FFF2EC; color: #8A2C13; }
.collection-pitch-image { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

@media (max-width: 1080px) {
  .collection-pitch-panel { grid-template-columns: minmax(260px, .85fr) minmax(390px, 1.15fr); }
  .collection-pitch-image { grid-column: 1 / -1; height: 260px; min-height: 0; object-position: center 44%; }
}
@media (max-width: 720px) {
  .collection-guide-card { grid-template-columns: auto 1fr; padding: 18px; }
  .collection-guide-link { grid-column: 2; }
  .collection-pitch-panel { grid-template-columns: 1fr; }
  .collection-pitch-copy, .collection-pitch-form { padding: 24px 20px; }
  .collection-pitch-copy h2 { max-width: 22ch; }
  .collection-pitch-image { grid-column: auto; height: 230px; }
}
@media (max-width: 480px) {
  .collection-guide-card { grid-template-columns: 1fr; gap: 12px; }
  .collection-guide-link { grid-column: auto; }
  .collection-pitch-fields { grid-template-columns: 1fr; }
  .collection-pitch-fields .is-wide { grid-column: auto; }
}

/* Directory */
.dir-hero { background: #fff; border-bottom: 1px solid var(--kc-border-default); }
.dir-hero-inner { padding-block: 48px 36px; }
.dir-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  margin: 0 0 12px; max-width: 18ch; line-height: var(--h1-leading);
}
.dir-hero-sub { font-size: 1.02rem; color: var(--kc-text-secondary);
  max-width: var(--measure-lede); margin: 0 0 22px; line-height: 1.6; }
.dir-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dir-search {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; max-width: 420px;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-default);
  border-radius: 999px; padding: 4px 4px 4px 16px;
}
.dir-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: .92rem; padding: 8px 0; color: var(--kc-text-primary);
}
.dir-tabs {
  display: flex; gap: 4px; background: var(--kc-tint-2); border-radius: 999px; padding: 4px;
}
.dir-tab {
  border: 0; background: transparent; border-radius: 999px; padding: 9px 16px;
  font: inherit; font-weight: 700; font-size: .86rem; color: var(--kc-text-secondary);
  text-decoration: none;
}
.dir-tab.is-active { background: #fff; color: var(--kc-text-primary); box-shadow: var(--shadow-1); }
.dir-list-wrap { padding-block: var(--shell-y) var(--shell-y-end); }
.dir-list-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px;
  font-size: .88rem; color: var(--kc-text-secondary);
}
.dir-list {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-lg); overflow: hidden;
}
.dir-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid #F5F5F1; text-decoration: none; color: inherit;
}
.dir-row:last-child { border-bottom: 0; }
.dir-row:hover { background: #FAFAF8; }
.dir-av {
  width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--r-card);
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  flex: none;
}
.dir-row-main { flex: 1; min-width: 0; }
.dir-row-name { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; }
.dir-claimed {
  font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep); padding: 3px 9px; border-radius: 999px;
}
.dir-row-meta { font-size: .8rem; color: var(--kc-text-tertiary); margin-top: 2px; }
.dir-bar {
  width: 190px; flex: none; height: 7px; background: var(--kc-tint-2); border-radius: 999px; overflow: hidden;
}
.dir-bar > span { display: block; height: 100%; background: var(--kc-brand-deep); border-radius: 999px; }
.dir-count { width: 100px; flex: none; text-align: right; font-size: .95rem; font-weight: 800; }
.dir-chev { width: 14px; flex: none; color: #C4C9C5; }
.dir-empty {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-lg);
  padding: 44px; text-align: center; color: var(--kc-text-secondary); margin-top: 14px;
}
.dir-disclaimer { font-size: .8rem; color: var(--kc-text-tertiary); margin: 16px 0 0;
  max-width: var(--measure-prose); }

/* Company / legal chrome helpers */
.v3-hero {
  background: var(--kc-surface-inverse); color: #fff; padding: 48px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.v3-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  margin: 0 0 12px; line-height: var(--h1-leading); max-width: 22ch;
}
.v3-hero-sub { margin: 0; font-size: 1.02rem; color: rgba(255,255,255,.72);
  max-width: var(--measure-lede); line-height: 1.6; }
.v3-mint-stats {
  background: var(--kc-brand-soft); border-bottom: 1px solid var(--kc-border-default);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.v3-mint-stats .wrap { display: contents; }
.v3-mint-stat { padding: 22px var(--gutter); }
.v3-mint-stat:first-child { padding-left: var(--gutter); }
.v3-mint-stat strong { display: block; font-size: 1.4rem; font-weight: 800; }
.v3-mint-stat span { font-size: .8rem; color: var(--kc-text-tertiary); }
.v3-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px; align-items: start;
  padding: var(--shell-y) 0 var(--shell-y-end);
}
.v3-toc {
  position: sticky; top: var(--sticky-top); background: #fff;
  border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 14px;
}
.v3-toc a {
  display: block; padding: 7px 10px; border-radius: 8px; font-size: .84rem; font-weight: 600;
  color: var(--kc-text-secondary); text-decoration: none;
}
.v3-toc a:hover { background: var(--kc-brand-xsoft); color: var(--kc-brand-deep); }
.v3-prose { max-width: 72ch; }
.v3-prose h2 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 32px 0 12px;
  scroll-margin-top: var(--scroll-offset);
}
.v3-prose p, .v3-prose li { color: var(--kc-text-secondary); line-height: 1.65; }
.seg-toggle {
  display: flex; gap: 4px; background: var(--kc-tint-2); border-radius: 999px; padding: 4px; width: fit-content;
}
.seg-toggle a, .seg-toggle button {
  border: 0; background: transparent; border-radius: 999px; padding: 9px 16px;
  font: inherit; font-weight: 700; font-size: .86rem; color: var(--kc-text-secondary);
  text-decoration: none; cursor: pointer;
}
.seg-toggle a.is-active, .seg-toggle button.is-active {
  background: #fff; color: var(--kc-text-primary); box-shadow: var(--shadow-1);
}
.home-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.home-rule-card {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md); padding: 20px;
}
.home-rule-card h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
.home-rule-card p { margin: 0; font-size: .88rem; color: var(--kc-text-secondary); line-height: 1.55; }
/* .home-finance-band was defined twice — flex here, grid in the V3 polish
   block. The grid won. Its h2/p rules are kept below with that definition. */
.home-float-deal {
  position: absolute; left: -8px; bottom: 44px; background: #fff;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card); padding: 14px 16px;
  box-shadow: var(--shadow-2); max-width: 250px;
}
.home-float-deal-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--kc-brand-deep); margin-bottom: 6px;
}
.idx-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.idx-card {
  display: flex; gap: 12px; align-items: center; padding: 16px;
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.idx-card:hover { border-color: var(--kc-brand-deep); box-shadow: var(--shadow-1); }
.idx-card-av {
  width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--r-card);
  display: grid; place-items: center;
  font-weight: 800; background: var(--kc-brand-soft); color: var(--kc-brand-deep); flex: none;
}
.idx-card-bar {
  margin-top: 8px; height: 6px; background: var(--kc-tint-2); border-radius: 999px; overflow: hidden;
}
.idx-card-bar > span { display: block; height: 100%; background: var(--kc-brand-deep); }

@media (max-width: 980px) {
  .fin-hero-inner, .combi-hero-row, .fin-layout, .v3-layout { grid-template-columns: 1fr; }
  .fin-hero-inner, .fin-layout { flex-direction: column; }
  .fin-toc, .v3-toc { position: static; }
  .fin-toc { max-width: none; }
  .fin-strip-inner, .combi-trust-inner, .v3-mint-stats { grid-template-columns: 1fr 1fr; }
  .fin-eligibility { grid-template-columns: 1fr; }
  .dir-bar { display: none; }
  .home-float-deal { position: static; margin-top: 14px; max-width: none; }
  .combi-guide-rich { grid-template-columns: 1fr 1fr; }
  .combi-guide-photo { display: none; }
}
@media (max-width: 680px) {
  .fin-strip-inner, .combi-trust-inner, .v3-mint-stats { grid-template-columns: 1fr; }
  .fin-apply-step { grid-template-columns: 40px 1fr; }
  .fin-apply-time { grid-column: 2; }
  .dir-count { width: auto; }
  .combi-guide-rich { grid-template-columns: 1fr; }
  .plp-ret-grid { grid-template-columns: 1fr 1fr; }
}
/* Two retailer cards do not fit between ~420 and ~680px — measured +47px of
   page overflow at 430px, a width the first audit pass never tested. */
@media (max-width: 560px) {
  .plp-ret-grid { grid-template-columns: 1fr; }
}

/* ============================================================= V3 page polish
   Home / PLP / retailers / company cluster classes from template wave. */

.home-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.home-hero .hero-media { position: relative; }
.home-search-pill { border-radius: 999px !important; }
.home-stat-strip {
  background: #fff; border-bottom: 1px solid var(--kc-border-default);
}
.home-stat-strip-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.home-stat {
  padding: 22px 22px 22px 0; border-left: 1px solid var(--kc-border-subtle);
  padding-left: 22px;
}
.home-stat:first-child { border-left: 0; padding-left: 0; }
.home-stat-n { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.home-stat-l { font-size: .8rem; color: var(--kc-text-tertiary); }
.home-cheapest-card {
  position: absolute; left: -8px; bottom: 28px; background: #fff;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card); padding: 14px 16px;
  box-shadow: var(--shadow-2); max-width: 260px; text-decoration: none; color: inherit;
  display: grid; gap: 6px; z-index: 2;
}
.home-cheapest-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--kc-brand-deep);
}
.home-cheapest-name { font-size: .86rem; font-weight: 700; line-height: 1.35; }
.home-cheapest-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.home-cheapest-now { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.home-cheapest-was { font-size: .8rem; color: var(--kc-text-tertiary); text-decoration: line-through; }
.home-cheapest-pct { font-size: .78rem; font-weight: 700; color: var(--kc-brand-deep); }
/* home department cards — same card language as the drops / comparison grids
   below: even 4-up rows (8 departments = 2 clean rows, no orphan tile) and a
   soft-tint icon badge per department. Scoped to the home page so the
   /equipment index keeps its own 7-up tile grid. */
.home-dept-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-dept-grid .dept-tile {
  flex-direction: row; align-items: center; gap: 14px;
  padding: 18px; border-color: var(--kc-border-default);
  border-radius: var(--r-md); background: #fff;
}
.home-dept-grid .dept-tile-glyph {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
}
.home-dept-grid .dept-tile-name { display: block; font-size: 1rem; }
.home-dept-grid .dept-tile-meta { display: block; margin-top: 3px; }
@media (max-width: 1180px) { .home-dept-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .home-dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .home-dept-grid { gap: 10px; } }
/* The ladder above stopped at 2-up, which cannot fit a 320-390px phone. */
@media (max-width: 480px) { .home-dept-grid { grid-template-columns: 1fr; } }

.home-drops-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.home-drop-card {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md);
  padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
}
.home-drop-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.home-drop-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.home-drop-brand {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kc-text-tertiary);
}
.home-drop-name { font-weight: 700; font-size: .92rem; line-height: 1.4; min-height: 2.6em; }
.home-drop-prices { display: flex; align-items: baseline; gap: 9px; }
.home-drop-now { font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.home-drop-was { font-size: .85rem; color: var(--kc-text-tertiary); text-decoration: line-through; }
.home-drop-at { font-size: .8rem; color: var(--kc-text-tertiary); }
.home-rules-panel .sec-title { margin-bottom: 6px; }
.home-trend-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.home-trend-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md);
  padding: 14px; text-decoration: none; color: inherit;
}
.home-trend-card:hover { box-shadow: var(--shadow-2); }
.home-trend-media {
  aspect-ratio: 1; border-radius: 10px; background: var(--kc-tint-1); overflow: hidden;
  display: grid; place-items: center;
}
.home-trend-media img { width: 100%; height: 100%; object-fit: contain; }
.home-trend-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.home-trend-name { font-weight: 700; font-size: .9rem; line-height: 1.35; }
.home-trend-prices { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.home-trend-low { font-size: 1.15rem; font-weight: 800; }
.home-trend-high { font-size: .8rem; color: var(--kc-text-tertiary); }
.home-spread-bar {
  height: 6px; background: var(--kc-tint-2); border-radius: 999px; overflow: hidden; margin-top: 4px;
}
.home-spread-fill { display: block; height: 100%; background: var(--kc-brand-deep); border-radius: 999px; }
.home-trend-verdict { font-size: .75rem; font-weight: 700; }
.home-trend-verdict.is-tight { color: var(--kc-brand-deep); }
.home-trend-verdict.is-wide { color: var(--kc-deal-fg); }
.home-trend-meta, .home-trend-retailers, .home-trend-foot {
  font-size: .78rem; color: var(--kc-text-tertiary);
}
/* Single definition. */
.home-finance-band {
  background: var(--kc-surface-inverse); color: #fff; border-radius: var(--r-panel);
  padding: 36px 32px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  gap: 28px; align-items: center;
}
.home-finance-band h2 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.home-finance-band p { margin: 0; color: rgba(255,255,255,.72); max-width: 46ch; }
.home-finance-teasers {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
}
.home-finance-teasers li {
  display: flex; gap: 10px; align-items: flex-start; font-size: .88rem;
  color: rgba(255,255,255,.78); line-height: 1.45;
}
.home-finance-teasers strong { display: block; color: #fff; margin-bottom: 2px; }
.home-finance-check {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(86,217,138,.16);
  color: var(--kc-brand-accent); display: grid; place-items: center; flex: none;
}
.home-trend-verdict.is-mid { color: var(--kc-text-secondary); }
.home-finance-ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 11px 18px; font-weight: 700; text-decoration: none;
}
.home-finance-ghost:hover { border-color: #fff; }

/* Departments index */
.dept-page-hero { background: #fff; border-bottom: 1px solid var(--kc-border-default); padding: 28px 0 22px; }
.dept-page-title { margin: 0 0 8px; }
.dept-page-lede { margin: 0; max-width: 58ch; }
.dept-page-body { padding: var(--shell-y) 0 var(--shell-y-end); }
.dept-group { margin-bottom: 36px; }
.dept-group-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  justify-content: space-between; margin-bottom: 14px;
}
.dept-group-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.dept-group-meta { font-size: .85rem; color: var(--kc-text-tertiary); }

/* Departments index — M2 cards with M3 preview rows */
.dept-m2-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px;
}
.dept-m2-card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  /* the min() track floor above is not enough on its own: a grid item still
     defaults to min-width:auto and refuses to shrink below its content */
  min-width: 0;
}
.dept-m2-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.dept-m2-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.dept-m2-head:hover .dept-tile-glyph { background: var(--accent-soft); color: var(--accent-ink); }
.dept-m2-sub { display: flex; flex-direction: column; padding: 4px 8px; }
.dept-m2-sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 0 10px; border-radius: var(--r-card);
  color: var(--ink); transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.dept-m2-sub-row:hover { background: var(--kc-tint-0); color: var(--accent-ink); }
.dept-m2-sub-row:hover .ic { color: var(--accent); }
.dept-m2-sub-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem;
}
.dept-m2-sub-right { display: flex; align-items: center; gap: 6px; flex: none; }
.dept-m2-sub-count { font-size: .78rem; color: var(--kc-text-tertiary); font-variant-numeric: tabular-nums; }
.dept-m2-more {
  display: block; padding: 8px 18px 4px; font-size: .82rem; color: var(--kc-text-tertiary);
}
.dept-m2-more:hover { color: var(--accent-ink); }
.dept-m2-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: .88rem; color: var(--accent-ink);
}
.dept-m2-footer:hover { text-decoration: underline; }
.dept-m2-footer .ic { color: var(--accent); }

@media (max-width: 980px) {
  .dept-m2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .dept-m2-grid { grid-template-columns: 1fr; }
}

/* PLP extras */
.list-page { padding-top: 22px; }
.list-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px;
}
.list-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; flex: 1;
  justify-content: flex-end;
}
/* Single definition (was two — see the note in the PLP filter block). */
.view-toggle {
  display: flex; gap: 2px; background: var(--kc-tint-1);
  border-radius: var(--r-control); padding: 3px;
}
.view-toggle button {
  border: 0; background: transparent; border-radius: 8px; width: 36px; height: 32px;
  display: grid; place-items: center; cursor: pointer; color: var(--kc-text-secondary);
}
.view-toggle button.is-active { background: #fff; color: var(--kc-brand-deep); box-shadow: var(--shadow-1); }
.collection-discovery { padding-block: 30px 34px; }
.subcat-scroll { overflow: hidden; }
.subcat-scroll-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 14px;
}
.subcat-scroll-head h2 {
  margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em;
}
.subcat-scroll-head-actions {
  display: flex; align-items: center; gap: 12px; flex: none;
}
.subcat-scroll-head-actions > span {
  flex: none; font-size: .8rem; color: var(--kc-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.subcat-scroll-expand {
  min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--kc-border-strong); border-radius: var(--r-control);
  padding: 7px 11px; background: var(--kc-surface-card); color: var(--kc-brand-deep);
  font: inherit; font-size: 12.5px; font-weight: 750; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.subcat-scroll-expand:hover {
  background: var(--kc-brand-xsoft); border-color: var(--kc-brand-deep);
}
.subcat-scroll-expand:focus-visible {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 2px;
}
.subcat-scroll-expand .ic { transition: transform var(--dur-slow) var(--ease-move); }
.subcat-scroll-expand[aria-expanded="true"] .ic { transform: rotate(180deg); }
.subcat-scroll-expand[hidden] { display: none; }
.subcat-scroll-viewport { position: relative; }
.subcat-scroll-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 72px) / 7);
  gap: 12px; overflow-x: auto; padding: 2px; scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* The arrows are the control; a raw scrollbar under a row of product images
     reads as an unfinished panel. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.subcat-scroll-track::-webkit-scrollbar { display: none; }
.subcat-scroll.is-expanded { overflow: visible; }
.subcat-scroll.is-expanded .subcat-scroll-track {
  grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-columns: auto; overflow: visible; scroll-snap-type: none;
}
.subcat-scroll.is-expanded .subcat-scroll-btn { display: none; }
.subcat-scroll-track:focus-visible {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 3px; border-radius: var(--r-card);
}
/* Drag state: set by site.js on pointer-drag so the cursor and the suppressed
   click read as one gesture. */
.subcat-scroll-track.is-draggable { cursor: grab; }
.subcat-scroll-track.is-dragging {
  cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none;
}
.subcat-scroll-track.is-dragging .subcat-scroll-item { pointer-events: none; }
.subcat-scroll-btn {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; transform: translateY(-50%);
  border: 1px solid var(--kc-border-default); border-radius: 50%;
  background: var(--kc-surface-card); color: var(--kc-text-primary);
  box-shadow: 0 3px 10px rgba(12, 40, 24, .13); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.subcat-scroll-btn:hover {
  background: var(--kc-brand-deep); border-color: var(--kc-brand-deep);
  color: var(--kc-text-on-dark);
}
.subcat-scroll-btn:focus-visible { outline: 2px solid var(--kc-brand-deep); outline-offset: 2px; }
/* display:grid above outranks the UA [hidden] rule — without this the buttons
   show on a track that does not overflow, and before site.js has wired them. */
.subcat-scroll-btn[hidden] { display: none; }
.subcat-scroll-btn[disabled] {
  opacity: 0; pointer-events: none;
}
/* Inset, not outdented: .subcat-scroll clips overflow, and an outdented control
   would be cut off at the wrap's gutter on narrow desktops. */
.subcat-scroll-prev { left: 6px; }
.subcat-scroll-next { right: 6px; }
.subcat-scroll-item {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  scroll-snap-align: start; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); background: var(--kc-surface-card);
  color: var(--kc-text-primary); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.subcat-scroll-item.is-active, .subcat-scroll-item:hover {
  border-color: var(--kc-brand-deep); box-shadow: var(--shadow-2); transform: translateY(-2px);
}
.subcat-scroll-item:focus-visible { outline: 2px solid var(--kc-brand-deep); outline-offset: 2px; }
.subcat-scroll-media {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1;
  padding: 12px; overflow: hidden; background: #fff;
  color: var(--kc-stone-400);
}
.subcat-scroll-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: darken; }
.subcat-scroll-media.is-empty::after {
  content: attr(data-ph); font-size: 1.9rem; font-weight: 800; color: var(--kc-stone-200);
}
.subcat-scroll-body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.subcat-scroll-name { font-size: .82rem; font-weight: 750; line-height: 1.3; }
.subcat-scroll-n { color: var(--kc-text-tertiary); font-size: .74rem; }

/* The buyers' faces, at a size where they read as people rather than as three
   small ornaments. They live inside the quote bar — see .collection-quote-inner
   for the dark-band treatment. */
.collection-buyer-faces { display: flex; flex: none; }
.collection-buyer-face {
  position: relative; width: 52px; height: 52px; overflow: hidden;
  border: 3px solid var(--paper); border-radius: 50%; background: var(--kc-tint-1);
  box-shadow: 0 2px 6px rgba(12, 40, 24, .14);
}
.collection-buyer-face + .collection-buyer-face { margin-left: -14px; }
.collection-buyer-face img {
  position: absolute; top: 0; height: 100%; width: auto; max-width: none;
}
.collection-buyer-face-1 img { left: 0; }
.collection-buyer-face-2 img { left: 50%; transform: translateX(-50%); }
.collection-buyer-face-3 img { right: 0; }
/* Sticky under the header for the rest of the page: this bar is the collection
   page's one conversion action, so it stays reachable while the buyer scans the
   grid. Sits below .hdr (z-index 90) and above the listing. Thin by design —
   a travelling bar that takes real height becomes a nuisance, not a prompt. */
.collection-quote-bar {
  position: sticky; top: var(--header-h); z-index: 60;
  background: var(--kc-surface-inverse); color: var(--kc-text-on-dark);
  box-shadow: 0 8px 20px rgba(9, 32, 20, .16);
}
.collection-quote-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-block: 11px;
}
/* The sticky bar covers the top of the results, so anchoring to #results — from
   the hero's "See N tracked …" link and from the AJAX filter scroll — has to
   clear the bar as well as the header. */
[data-ajax-product-listing] { scroll-margin-top: calc(var(--scroll-offset) + 58px); }
.collection-quote-copy { min-width: 0; }
/* Faces ride the dark band: the ring is the band's own ground, not white, so
   they read as cut into the surface rather than pasted on it. */
.collection-quote-inner .collection-buyer-face {
  width: 38px; height: 38px; border-width: 2px; border-color: var(--kc-surface-inverse);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.collection-quote-inner .collection-buyer-face + .collection-buyer-face { margin-left: -12px; }
.collection-quote-inner .collection-buyer-faces { margin-right: 4px; }
.collection-quote-titleline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.collection-quote-titleline h2 {
  margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.collection-quote-titleline > span {
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill);
  padding: 3px 9px; color: var(--kc-brand-accent); font-size: .64rem;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.collection-quote-copy p {
  margin: 2px 0 0; color: rgba(255,255,255,.72); font-size: .82rem; line-height: 1.4;
}
.collection-quote-action { display: flex; align-items: center; gap: 12px; flex: none; }
.collection-quote-action .btn { min-height: 42px; padding-inline: 20px; }
.collection-quote-action > span { color: rgba(255,255,255,.62); font-size: .74rem; white-space: nowrap; }

@media (max-width: 980px) {
  .subcat-scroll-track { grid-auto-columns: 168px; }
  .subcat-scroll.is-expanded .subcat-scroll-track {
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto;
  }
}
@media (max-width: 680px) {
  .collection-discovery { padding-block: 24px 28px; }
  .subcat-scroll-head { align-items: center; }
  .subcat-scroll-head-actions > span { display: none; }
  .subcat-scroll-expand { min-height: 44px; padding-inline: 13px; }
  .subcat-scroll-track { grid-auto-columns: min(46vw, 172px); gap: 10px; }
  .subcat-scroll.is-expanded .subcat-scroll-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto;
  }
  /* Stays one row on a phone: a stacked sticky bar would eat a third of the
     viewport. The sub-line and timing note drop; the ask and the faces stay. */
  .collection-quote-inner { gap: 10px; padding-block: 9px; }
  .collection-quote-inner .collection-buyer-face { width: 32px; height: 32px; }
  .collection-quote-inner .collection-buyer-face + .collection-buyer-face { margin-left: -10px; }
  .collection-quote-copy p,
  .collection-quote-titleline > span,
  .collection-quote-action > span { display: none; }
  .collection-quote-titleline h2 { font-size: .92rem; }
  .collection-quote-action .btn { min-height: 40px; padding-inline: 16px; }
  .collection-quote-action { align-items: flex-start; flex-direction: column; gap: 7px; }
  .collection-quote-action .btn { width: 100%; }
}
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--kc-brand-xsoft); color: var(--kc-brand-deep); border-radius: 999px;
  font-size: .8rem; font-weight: 700; text-decoration: none;
}
/* Single definition. It is an <a>, so it keeps the underline the earlier
   duplicate had; it takes the weight and colour the later duplicate had. */
.chips-clear { font-size: .82rem; font-weight: 700; color: var(--kc-text-secondary);
  text-decoration: underline; text-underline-offset: 2px; }

/* PDP sticky tabs */
/* Sits flush under the header rather than behind it — this rail is the one
   sticky element that should touch the header, so it takes --header-h with no
   breathing gap, unlike --sticky-top. */
.pd-tab-rail {
  position: sticky; top: var(--header-h); z-index: 20; background: rgba(248,248,246,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--kc-border-default);
  margin: 18px 0 0; padding: 10px 0;
}
.pd-tab-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pd-tab-pills::-webkit-scrollbar { display: none; }
.pd-tab {
  flex: none; padding: 9px 14px; border-radius: 999px; font-size: .86rem; font-weight: 700;
  color: var(--kc-text-secondary); text-decoration: none; background: #fff;
  border: 1px solid var(--kc-border-default);
}
.pd-tab.is-active, .pd-tab:hover {
  background: var(--kc-brand-deep); color: #fff; border-color: var(--kc-brand-deep);
}
.pd-stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 22px 0; padding: 16px 0; border-block: 1px solid var(--kc-border-default);
}
.pd-stat-label { display: block; font-size: .72rem; font-weight: 700; color: var(--kc-text-tertiary);
  text-transform: uppercase; letter-spacing: .06em; }
.pd-stat-val { font-size: 1.05rem; font-weight: 800; }
.offer-best-flag {
  position: absolute; top: 0; left: 18px; z-index: 1; transform: translateY(-50%);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); padding: 3px 9px; border: 1px solid var(--accent);
  border-radius: 999px;
}

/* Wide comparison rows need room around the identity and action columns. The
   compact tablet/mobile rules remain unchanged; this is the desktop rhythm. */
@media (min-width: 981px) {
  #offers > .sec-head { margin-top: 28px; padding-bottom: 16px; }
  .offer { gap: 12px 28px; padding: 24px 32px; }
  .offer-checked { margin-right: 16px; }
  .offer-best-flag { left: 32px; }
}

/* Retailers index */
.ret-hero { background: #fff; border-bottom: 1px solid var(--kc-border-default); }
.ret-hero-inner { padding-block: 36px 28px; }
.ret-title { margin: 0 0 10px; font-size: var(--h1-page); font-weight: 800;
  letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); }
.ret-intro { margin: 0 0 18px; max-width: var(--measure-lede);
  color: var(--kc-text-secondary); line-height: 1.6; }
.ret-search {
  display: flex; align-items: center; gap: 10px; max-width: 420px;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-default);
  border-radius: 999px; padding: 4px 4px 4px 16px;
}
.ret-search-input {
  flex: 1; border: 0; background: transparent; outline: none; font: inherit;
  padding: 9px 0; color: var(--kc-text-primary);
}
.ret-body { padding-block: var(--shell-y) var(--shell-y-end); }
.ret-list-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .88rem; color: var(--kc-text-secondary);
}
.ret-list-label { font-weight: 700; color: var(--kc-text-primary); }
.ret-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.ret-card {
  display: grid; gap: 10px; padding: 16px; background: #fff;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.ret-card:hover { border-color: var(--kc-brand-deep); box-shadow: var(--shadow-1); }
.ret-card-top { display: flex; gap: 12px; align-items: center; }
.ret-card-avatar {
  width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--r-card);
  display: grid; place-items: center;
  font-weight: 800; background: var(--kc-brand-soft); color: var(--kc-brand-deep); flex: none;
}
.ret-card-name { font-weight: 700; font-size: .95rem; }
.ret-card-bar { height: 6px; background: var(--kc-tint-2); border-radius: 999px; overflow: hidden; }
.ret-card-bar-fill { display: block; height: 100%; background: var(--kc-brand-deep); }
.ret-card-foot { display: flex; justify-content: space-between; font-size: .8rem; color: var(--kc-text-tertiary); }
.ret-card-count { font-weight: 800; color: var(--kc-text-primary); }
.ret-empty {
  padding: 48px; text-align: center; background: #fff; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-lg); color: var(--kc-text-secondary);
}

/* Company cluster */
/* Eyebrow — a pale-mint pill, not bare uppercase text. Same geometry as
   .dh-kicker (V4 directory) so the two read as one component family. */
.co-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  border-radius: var(--r-pill); padding: 7px 15px;
  font-size: .72rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 14px;
}
/* Inverse ground: the mint fill would glare on #0C2A1B, so the pill drops to a
   translucent dark wash and the ink moves to the on-dark accent. */
.co-eyebrow-inv {
  background: rgba(255,255,255,.08); color: var(--kc-brand-accent);
}
.co-btn-inv {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.35);
}
.co-btn-inv:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.co-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.co-mint-stats { background: var(--kc-brand-accent); }
.co-mint-stats-inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.co-mint-stat {
  padding: 20px 16px; text-align: center;
  border-left: 1px solid rgba(12,42,27,.14);
}
.co-mint-stat:first-child { border-left: 0; }
.co-mint-stat strong { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--kc-surface-inverse); }
.co-mint-stat span { font-size: .72rem; font-weight: 700; color: rgba(12,42,27,.66); margin-top: 2px; display: block; }
.co-section { padding-block: var(--band-y); }
.co-section-last { padding-bottom: var(--shell-y-end); }
.co-h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 12px; }
.co-lead { color: var(--kc-text-secondary); line-height: 1.65; max-width: 62ch; }
.co-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 28px; }
.co-panel-dark {
  background: var(--kc-surface-inverse); color: #fff; border-radius: var(--r-lg); padding: 24px;
}
.co-panel-dark-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; }
.co-panel-dark-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kc-brand-accent); margin-bottom: 16px;
}
.co-never-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.co-never-item {
  display: flex; gap: 11px; align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 13px; padding-top: 0;
  margin-bottom: 13px; color: rgba(255,255,255,.86); font-size: .84rem; line-height: 1.55;
}
.co-never-item-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.co-never-icon { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.co-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px;
}
.co-card {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px;
}
.co-card-icon {
  width: 40px; height: 40px; border-radius: var(--r-control); background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); display: grid; place-items: center; margin-bottom: 12px;
}
.co-card-accent { border-color: var(--kc-green-200); background: var(--kc-brand-xsoft); }
.co-card-accent-2 { border-color: var(--kc-deal-border); background: var(--kc-deal-bg); }
.co-card-accent-3 { border-color: var(--kc-border-strong); }
.co-card-cost { font-weight: 800; color: var(--kc-brand-deep); margin-top: 8px; display: block; }
/* principle card "The cost:" separator line */
.co-card-principle { display: flex; flex-direction: column; }
.co-card-principle p { flex: 1; }
.co-card-cost-sep {
  border-top: 1px solid var(--kc-border-subtle); padding-top: 12px;
  font-size: .8rem; color: var(--kc-text-tertiary); margin-top: 10px;
}
.co-card-cost-sep strong { color: var(--kc-brand-deep); font-weight: 700; }
/* revenue cards */
.co-rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; margin-bottom: 14px; }
.co-card-rev { border-radius: var(--r-card); }
.co-card-rev-1 { border-left: 3px solid var(--kc-brand-deep); }
.co-card-rev-2 { border-left: 3px solid var(--kc-deal-fg); }
.co-card-rev-3 { border-left: 3px solid var(--kc-stone-400); }
.co-rev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.co-rev-head h3 { margin: 0; font-size: .94rem; font-weight: 800; letter-spacing: -.01em; }
.co-rev-badge { font-size: .75rem; font-weight: 800; white-space: nowrap; }
.co-rev-badge-1 { color: var(--kc-brand-deep); }
.co-rev-badge-2 { color: var(--kc-deal-fg); }
.co-rev-badge-3 { color: var(--kc-stone-400); }
.co-conflict-box {
  background: #FAFAF8; border-radius: 9px; padding: 11px 12px;
  font-size: .8rem; line-height: 1.55; color: var(--kc-text-secondary); margin-top: 10px;
}
/* callout with leading icon */
.co-callout-flex { display: flex; gap: 10px; align-items: flex-start; }
.co-callout-flex p { margin: 0; font-size: .82rem; }
/* legacy revenue classes kept for any cached views */
.co-revenue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.co-revenue-head { font-weight: 800; margin-bottom: 6px; }
.co-revenue-share { font-size: .85rem; color: var(--kc-text-secondary); }
.co-revenue-control { font-size: .8rem; color: var(--kc-text-tertiary); margin-top: 8px; }
.co-page-hero {
  background: var(--kc-surface-inverse); color: #fff; padding: 48px 0 40px;
}
/* The measure belongs to the TEXT, not to the .wrap. This element carries both
   `.wrap` (max-width 1600 + margin-inline:auto) and this class, so a cap here
   shrank the whole box to 720px and centred it — putting the hero heading at
   x=640 while every body section below started at x=152. Cap the h1 and lead
   instead so the hero stays left-aligned to the container. */
.co-page-hero-inner { max-width: var(--content-max-width); }
.co-page-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  margin: 0 0 12px; line-height: var(--h1-leading); max-width: 22ch;
}
.co-page-lead { margin: 0; color: rgba(255,255,255,.72); line-height: 1.6;
  max-width: var(--measure-lede); }
/* Light modifier. The base .co-page-hero stays dark for the pages that still
   want an inverse front door; this variant puts the same hero on the white
   card surface with normal ink, for document and utility pages. */
.co-page-hero--light {
  background: var(--kc-surface-card); color: var(--kc-text-primary);
  border-bottom: 1px solid var(--kc-border-default);
}
.co-page-hero--light h1 { color: var(--kc-text-primary); }
.co-page-hero--light .co-page-lead { color: var(--kc-text-secondary); }
.co-page-hero--light .co-search-pill {
  background: var(--kc-tint-0); border-color: var(--kc-border-default);
}
.co-page-hero--light .co-search-pill input { color: var(--kc-text-primary); }
.co-page-hero--light .co-search-pill input::placeholder { color: var(--kc-text-quiet); }
.co-search-pill {
  display: flex; align-items: center; gap: 10px; margin-top: 22px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 6px 16px; max-width: 420px;
}
.co-search-pill input {
  flex: 1; border: 0; background: transparent; outline: none; color: #fff; font: inherit; padding: 8px 0;
}
.co-search-pill input::placeholder { color: rgba(255,255,255,.45); }
.co-body, .co-faq-body { padding-block: var(--shell-y) var(--shell-y-end); }
.co-faq-chips { margin-bottom: 18px; }
/* One card, hairline rows. Gapped individual cards made a long FAQ read as
   twenty unrelated objects; the list is one object with internal dividers. */
.co-faq-list {
  display: block; background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
  overflow: hidden;
}
.co-faq-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--kc-border-subtle);
  border-radius: 0; padding: 0 24px;
}
.co-faq-item:last-child { border-bottom: 0; }
.co-faq-item[open] { background: var(--kc-tint-0); }
.co-faq-item summary {
  display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 16px 0; list-style: none;
}
.co-faq-item summary::-webkit-details-marker { display: none; }
.co-faq-q { flex: 1; font-weight: 700; }
/* Plain muted text — the mint pill competed with the question it labelled. */
.co-faq-cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kc-text-tertiary); background: transparent; padding: 0; border-radius: 0;
  white-space: nowrap;
}
.co-faq-a { padding: 0 0 16px; color: var(--kc-text-secondary); line-height: 1.6; }
.co-faq-empty { text-align: center; padding: 40px; color: var(--kc-text-secondary); }
/* Dark CTA — the inverse panel, kept for its existing consumers. */
.co-cta-dark {
  margin-top: 36px; background: var(--kc-surface-inverse); color: #fff;
  border-radius: var(--r-lg); padding: 28px; display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: space-between; align-items: center;
}
/* FAQ "still stuck?" CTA — LIGHT. It was grouped into the rule above, which
   dropped an inverse panel at the foot of the FAQ. Same geometry, white ground,
   hairline border, dark ink; the deep-green button carries the emphasis instead
   of the background. Split into its own rule — neither class is renamed, and
   .co-cta-dark is untouched for the pages that use it. */
.co-faq-cta {
  margin-top: 36px; background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); color: var(--kc-text-primary);
  border-radius: var(--r-lg); padding: 28px; display: flex; flex-wrap: wrap;
  gap: 14px; justify-content: space-between; align-items: center;
}
.co-faq-cta h2 {
  margin: 0 0 4px; font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--kc-text-primary);
}
.co-faq-cta p {
  margin: 0; font-size: .9rem; line-height: 1.6;
  color: var(--kc-text-secondary); max-width: var(--measure-lede);
}
/* Guard: .co-btn-inv is a white-on-dark outline button. If it lands inside the
   light CTA it would be white-on-white, so it resolves to the dark-ink outline
   here rather than disappearing. */
.co-faq-cta .co-btn-inv {
  color: var(--kc-text-primary); border-color: var(--kc-border-strong);
}
.co-faq-cta .co-btn-inv:hover {
  color: var(--kc-brand-deep); border-color: var(--kc-brand-deep);
  background: var(--kc-brand-xsoft);
}
/* A pure modifier: it is applied ON TOP of .co-cta-dark
   (class="co-cta-dark co-cta-stack") and only overrides the axis, alignment and
   padding. It sits after .co-cta-dark in source order, so at equal specificity
   these declarations win while everything else — ground, ink, radius — is
   inherited from the base rule. */
.co-cta-stack {
  flex-direction: column; flex-wrap: nowrap;
  justify-content: flex-start; align-items: flex-start; gap: 18px;
  padding: 32px;
}
.co-cta-stack h2 { margin: 0 0 6px; max-width: var(--measure-lede); }
.co-cta-stack p {
  margin: 0; max-width: var(--measure-lede); line-height: 1.6;
  color: rgba(255,255,255,.72);
}
/* The action drops to its own line rather than sharing the heading's row. */
.co-cta-stack .btn { align-self: flex-start; }
.co-how-hero { background: var(--kc-surface-inverse); color: #fff; }
/* Same fix as .co-page-hero-inner — the cap centred the hero. */
.co-how-hero-inner { padding-block: 48px 40px; max-width: var(--content-max-width); }
/* This h1 sits in .co-how-hero-inner, not .drg-hero-copy, so it was missing the
   page heading scale entirely and fell back to the browser default (33px/700)
   while every other page hero rendered 44px/800. */
.co-how-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  margin: 0 0 12px; line-height: var(--h1-leading); max-width: 22ch;
}
.co-toc {
  position: sticky; top: var(--sticky-top); background: #fff;
  border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 14px; margin-bottom: 24px;
}
.co-toc-label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kc-text-tertiary); margin-bottom: 8px;
}
.co-toc-link {
  display: block; padding: 7px 10px; border-radius: 8px; font-size: .84rem; font-weight: 600;
  color: var(--kc-text-secondary); text-decoration: none;
}
.co-toc-link:hover { background: var(--kc-brand-xsoft); color: var(--kc-brand-deep); }
.co-doc-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px;
  align-items: start; padding-block: var(--shell-y) var(--shell-y-end);
}
.co-doc-section { scroll-margin-top: var(--scroll-offset); margin-bottom: 28px; }
.co-steps { display: grid; gap: 12px; }
.co-step {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md); padding: 16px;
}
/* Circular numeral — the rounded square read as a second card inside the card. */
.co-step-n {
  width: 36px; height: 36px; border-radius: 50%; background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); display: grid; place-items: center; font-weight: 800;
  font-size: .88rem; font-variant-numeric: tabular-nums;
}
/* Tip — a filled inset sub-box with a green rule, not loose grey text that
   floated unattached under the step body. */
.co-step-tip {
  margin: 10px 0 0; padding: 10px 13px; font-size: .82rem; line-height: 1.55;
  color: var(--kc-text-secondary); background: var(--kc-tint-1);
  border-left: 3px solid var(--kc-brand-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.co-match-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-md); overflow: hidden;
  font-size: .88rem;
}
.co-match-table th, .co-match-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--kc-border-subtle); text-align: left;
}
.co-match-table-title { margin: 0 0 10px; font-weight: 800; }
.co-match-rules { margin: 12px 0 0; padding-left: 18px; color: var(--kc-text-secondary); }
.co-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Shared shell; the two panels differ only in ground so "what counts" reads as
   the affirmative side and "what doesn't" as the neutral one. */
.co-rank-in, .co-rank-out {
  border: 1px solid var(--kc-border-default); border-radius: var(--r-md); padding: 16px 18px;
}
.co-rank-in  { background: var(--kc-brand-xsoft); border-color: var(--kc-green-200); }
.co-rank-out { background: var(--kc-tint-1); }
/* Uppercase micro-label — first child of each panel. */
.co-rank-in > :first-child, .co-rank-out > :first-child {
  display: block; margin: 0 0 10px; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.co-rank-in  > :first-child { color: var(--kc-brand-deep); }
.co-rank-out > :first-child { color: var(--kc-text-tertiary); }
.co-limits { display: grid; gap: 10px; }
/* Amber is a caution accent, not a fill. A fully amber card read as an error
   state and dropped the body copy to amber ink, which loses contrast; the rule
   carries the warning and the ink returns to normal. */
.co-limit {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-left: 3px solid var(--kc-deal-fg); border-radius: var(--r-card);
  padding: 14px 16px; color: var(--kc-text-secondary); font-size: .9rem; line-height: 1.55;
}
.co-limit strong { color: var(--kc-text-primary); }
.co-callout-warn {
  background: var(--kc-deal-bg); border: 1px solid var(--kc-deal-border); border-radius: var(--r-card);
  padding: 14px; color: var(--kc-deal-fg); margin: 16px 0;
}
.co-contact-layout {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 28px; padding-block: var(--shell-y) var(--shell-y-end);
}
.co-form-card {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-lg); padding: 24px;
}
.co-form-lead { color: var(--kc-text-secondary); margin: 0 0 16px; }
.co-topic-fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.co-topic-legend { font-weight: 700; margin-bottom: 10px; }
/* Fixed 4-up. auto-fit reflowed to 2 or 3 depending on the form width, so the
   four topics never sat on one line the way the design shows them. */
.co-topic-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.co-topic-tile {
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  position: relative;   /* containing block for the clipped radio below */
  cursor: pointer; font-size: .86rem; background: var(--kc-surface-card);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.co-topic-tile:hover { border-color: var(--kc-border-strong); }
/* Two-line label: bold title, muted subtitle. */
.co-topic-tile > span:first-of-type { font-weight: 700; color: var(--kc-text-primary); }
.co-topic-sub { font-size: .78rem; color: var(--kc-text-tertiary); line-height: 1.4; }
/* The native radio is visually hidden but stays in the accessibility tree and
   in the tab order — clip, never display:none, or keyboard and screen-reader
   users lose the control entirely. */
.co-topic-tile input[type="radio"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.co-topic-tile:has(input:checked) {
  border-color: var(--kc-brand-deep); background: var(--kc-brand-xsoft);
}
/* Focus must still be visible once the input itself is off-screen. */
.co-topic-tile:has(input:focus-visible) {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 2px;
}
.co-info-card {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md);
  padding: 16px; margin-bottom: 12px;
}
.co-info-link { font-weight: 700; color: var(--kc-brand-deep); text-decoration: none; }
/* .co-legal-layout / .co-legal-doc are no longer rendered: /privacy and /terms
   now use the full .lgl-layout two-column shell, which carries the same
   padding-block and whose .lgl-doc already leaves the card uncapped. Kept
   rather than deleted, on the dead-class list, per the convention above. */
.co-legal-layout { padding-block: var(--shell-y) var(--shell-y-end); }
/* The card is wide; the TEXT inside it carries the measure (.lgl-prose).
   Capping the card left ~60% of the container empty on /privacy and /terms. */
.co-legal-doc { max-width: none; }
.co-promo-iq {
  background: var(--kc-surface-inverse); color: #fff; border-radius: var(--r-md); padding: 18px; margin-top: 18px;
}
.co-promo-eyebrow {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kc-brand-accent); margin-bottom: 8px;
}
/* Two empty stubs stood here shadowing the real .dir-claimed (directory block)
   and .dir-badge-claimed (W3 block). Removed — each now has one definition. */

@media (max-width: 980px) {
  .home-stat-strip-inner, .co-mint-stats-inner { grid-template-columns: 1fr 1fr; }
  .home-cheapest-card { position: static; margin-top: 14px; max-width: none; }
  .home-finance-band { grid-template-columns: 1fr; }
  .co-split, .co-doc-layout, .co-contact-layout, .co-rank-grid { grid-template-columns: 1fr; }
  .co-toc { position: static; }
  .home-trend-card { grid-template-columns: 72px 1fr; }
  .co-mint-stat:nth-child(odd) { border-left: 0; }
}
@media (max-width: 680px) {
  .home-stat-strip-inner, .co-mint-stats-inner { grid-template-columns: 1fr; }
  .home-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--kc-border-subtle); }
  .home-stat:first-child { border-top: 0; }
  .co-mint-stat { border-left: 0; border-top: 1px solid rgba(12,42,27,.14); }
  .co-mint-stat:first-child { border-top: 0; }
}

/* ============================================================ V4 DIRECTORY
   One listing pattern for /brands, /retailers and /suppliers.

   The approved designs show a single vertical card in a 5-column grid with a
   logo slot, a centred name, one variant-specific metadata line and a
   full-width secondary CTA. It replaces five divergent live patterns
   (.ret-card, .dir-row, .retailer-line, .index-line, .sup-card), which are
   left in place for now so nothing breaks mid-migration.

   Variants differ ONLY in the metadata slot:
     brands     — dealer count
     retailers  — capability strip   (renders only where real data exists)
     suppliers  — supplier type line (renders only where real data exists)
   ------------------------------------------------------------------------ */

/* Hero — white, above the grey results band */
/* Reviewed against the token contract: the block had drifted onto the legacy
   aliases (--paper, --accent-ink) that §1 marks "do not add new usages", and
   onto --kc-text-quiet for a content meta icon. Values swapped to the semantic
   tokens; no selector renamed. */
.dh { background: var(--kc-surface-card); }
.dh-inner { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 35fr);
  gap: clamp(32px, 4vw, 72px); align-items: start; padding-block: 30px 42px; }
.dh-kicker { display: inline-flex; align-items: center; gap: 7px;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep); border-radius: var(--r-pill);
  padding: 7px 15px; font-size: .72rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 18px; }
.dh h1 { font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading); margin: 0 0 14px; max-width: 20ch; }
.dh-lede { color: var(--kc-text-secondary); font-size: 1.02rem; line-height: 1.6;
  max-width: var(--measure-lede); margin: 0 0 24px; }
.dh-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dh-search { display: flex; align-items: center; gap: 10px; flex: 0 1 320px; min-width: 220px;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-control); padding: 0 14px; }
.dh-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: .92rem; padding: 11px 0; color: var(--kc-text-primary); }
/* iOS force-zooms the page on focus below 16px. Declared here rather than in
   the shared mobile block so it lands after the .92rem rule above — same
   specificity, so source order decides. */
@media (max-width: 980px) { .dh-search input { font-size: 16px; } }
.dh-search .ic { color: var(--kc-text-quiet); flex: none; }
/* Stat rows — mint icon tile + bold title + grey sub */
.dh-stats { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0;
  list-style: none; }
.dh-stat { display: flex; align-items: flex-start; gap: 13px; }
.dh-stat-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-control);
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  display: grid; place-items: center; }
.dh-stat strong { display: block; font-size: .95rem; font-weight: 750; letter-spacing: -.01em;
  color: var(--kc-text-primary); }
.dh-stat span > span { display: block; font-size: .82rem; color: var(--kc-text-tertiary);
  margin-top: 2px; }

/* Photo directory hero — supplier and retailer evidence sits over the same
   commercial-kitchen world as the catalogue it describes. Kept opt-in so the
   brand directory retains its quieter treatment. */
.dh-directory-photo {
  background-color: var(--kc-brand-xsoft);
  background-image:
    linear-gradient(90deg, rgba(247, 252, 249, .98) 0%, rgba(247, 252, 249, .94) 36%,
      rgba(247, 252, 249, .68) 58%, rgba(247, 252, 249, .2) 100%),
    url("/static/img/hero-kitchen.webp");
  background-position: center 56%;
  background-size: cover;
}
.dh-directory-photo .dh-inner {
  grid-template-columns: minmax(0, 1.12fr) minmax(460px, .88fr);
  gap: clamp(44px, 5vw, 86px); align-items: center; padding-block: 32px 38px;
}
.dh-directory-photo .dh-copy { max-width: 680px; }
.dh-directory-photo .dh-lede { max-width: 62ch; }
.dh-directory-photo .dh-controls { flex-wrap: nowrap; }
.dh-directory-photo .dh-search { flex: 1 1 470px; max-width: 520px; }
.dh-directory-photo .dh-controls > .btn { flex: none; min-height: 44px; }
.dh-directory-photo .dh-controls > .btn .ic { margin-left: 2px; }
.dh-directory-photo .dh-stats-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  padding: 22px; background: rgba(255, 255, 255, .96); border-radius: var(--r-card);
  box-shadow: 0 16px 42px rgba(12, 42, 27, .14);
}
.dh-directory-photo .dh-stat { min-width: 0; gap: 14px; padding: 18px 16px; }
.dh-directory-photo .dh-stat:nth-child(even) { border-left: 1px solid var(--kc-border-subtle); }
.dh-directory-photo .dh-stat:nth-child(n + 3) { border-top: 1px solid var(--kc-border-subtle); }
.dh-directory-photo .dh-stat-ic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--kc-brand-soft);
}
.dh-directory-photo .dh-stat strong { font-size: 1rem; line-height: 1.25; }
.dh-directory-photo .dh-stat span > span { margin-top: 5px; line-height: 1.4; }

.az-filter { background: var(--kc-surface-card); border-top: 1px solid var(--kc-border-default);
  border-bottom: 1px solid var(--kc-border-default); }
.az-filter-inner { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.az-filter-label { flex: none; color: var(--kc-text-secondary); font-size: .82rem;
  font-weight: 750; white-space: nowrap; }
.az-filter-track { display: flex; align-items: center; gap: 4px; min-width: 0;
  overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
.az-filter-track::-webkit-scrollbar { display: none; }
.az-filter-link { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px;
  min-height: 36px; border: 1px solid transparent; border-radius: var(--r-control);
  color: var(--kc-text-secondary); font-size: .82rem; font-weight: 700;
  line-height: 1; text-decoration: none; }
.az-filter-link[href]:hover { background: var(--kc-brand-xsoft); color: var(--kc-brand-deep); }
.az-filter-link.is-active { background: var(--kc-brand-deep); border-color: var(--kc-brand-deep);
  color: #fff; }
.az-filter-link.is-disabled { color: var(--kc-text-tertiary); opacity: .62; cursor: not-allowed; }
.az-filter-all { flex-basis: auto; width: auto; min-width: 48px; padding-inline: 12px; }

/* Body band — warm grey, full-bleed, main + sidebar */
.db { background: var(--kc-surface-page); }
.db-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px;
  align-items: start; padding-block: var(--shell-y) var(--shell-y-end); }
.db-main { min-width: 0; }

/* Toolbar — count left, sort right */
/* Left-aligned: every bar now holds either a single label, or a label with a
   badge that belongs beside it. `space-between` dated from the removed
   "N of M" count and pushed the supplier "Sponsored" tag to the far right,
   ~1000px from the words it labels. Anything that genuinely needs pushing
   right can use margin-left:auto. */
.db-bar { display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px; }
/* Separates a featured row from the ordering line beneath it. Set on the grid
   rather than as `.db-grid + .db-bar`, because the supplier directory has a
   visually-hidden <h2> between the two which breaks sibling adjacency. */
.db-grid-featured { margin-bottom: 26px; }
.db-count { font-size: .9rem; color: var(--kc-text-secondary); }
.db-count strong { color: var(--kc-text-primary); font-variant-numeric: tabular-nums; }
.db-sort { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem;
  color: var(--kc-text-tertiary); white-space: nowrap; }

/* The card grid — 5 across */
.db-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dcard { display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease); }
.dcard:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1);
  transform: translateY(-1px); }
/* Logo slot — a real logo when we have one, otherwise initials. Never a fake
   image glyph pretending an asset exists. */
/* `minmax(0, 1fr)` on both tracks is load-bearing. With an `auto` track the
   track is sized by the image's max-content (logos here are up to 1140px wide),
   so the image's own `max-width: 100%` resolved against itself, never
   constrained, and overflow:hidden clipped the middle out of every wide
   wordmark — which read as an empty tile. A definite track breaks that loop. */
.dcard-logo { display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center; height: 100px; border-radius: var(--r-control);
  background: var(--kc-surface-card); overflow: hidden; padding: 8px; }
/* Both children occupy the same grid cell so the logo sits over the initials. */
.dcard-logo > * { grid-area: 1 / 1; }
/* Letterbox inside the tile: never cropped, never distorted, any aspect ratio. */
.dcard-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
/* was --kc-text-quiet: 2.94:1 on white at 16px/800, below the 4.5:1 AA bar
   and the visible identity on most of the 398-brand directory. */
.dcard-logo-ph { font-size: 1rem; font-weight: 800; letter-spacing: .04em;
  color: var(--kc-text-tertiary); text-transform: uppercase; }
/* Initials are the fallback, so they hide only while a logo is actually
   present. The img removes itself on error, which re-reveals them. */
.dcard-logo:has(img) .dcard-logo-ph { visibility: hidden; }
.dcard-name { text-align: center; font-size: .93rem; font-weight: 700; line-height: 1.3;
  color: var(--kc-text-primary); }
.dcard-meta { display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .8rem; color: var(--kc-text-tertiary); }
/* Was --kc-text-quiet, which §1 restricts to placeholders and the search icon.
   This icon sits beside real content, so it takes the AA-passing tertiary. */
.dcard-meta .ic { color: var(--kc-text-tertiary); flex: none; }
/* Retailer capability strip — 3 equal columns */
.dcard-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  border-top: 1px solid var(--kc-border-subtle); padding-top: 10px; }
.dcard-cap { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .68rem; color: var(--kc-text-tertiary); text-align: center; }
.dcard-cap .ic { color: var(--kc-brand-deep); }
.dcard .btn { width: 100%; margin-top: auto; }

/* Featured directories use their own carousel row instead of inheriting the
   five-card catalogue grid. Fixed content rows keep badges, metrics and CTAs
   aligned even when names wrap differently. */
.db-grid-featured-aligned { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.featured-scroll-viewport { position: relative; overflow: hidden; }
.featured-scroll-btn[aria-disabled="true"] {
  opacity: .32; cursor: default; pointer-events: none;
}
.featured-scroll-prev { left: 8px; }
.featured-scroll-next { right: 8px; }
@media (min-width: 681px) {
  .db-grid.db-grid-featured-aligned {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 39%;
    overflow-x: auto; overscroll-behavior-inline: contain;
    padding: 2px 2px 6px; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  }
  .db-grid-featured-aligned::-webkit-scrollbar { display: none; }
  .db-grid-featured-aligned:focus-visible {
    outline: 2px solid var(--kc-brand-deep); outline-offset: -2px;
    border-radius: var(--r-card);
  }
  .db-grid-featured-aligned > .dcard { scroll-snap-align: start; }
  .db-grid-featured-aligned.is-draggable { cursor: grab; }
  .db-grid-featured-aligned.is-dragging {
    cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none;
  }
  .db-grid-featured-aligned.is-dragging > .dcard { pointer-events: none; }
}
@media (min-width: 1121px) {
  .db-grid.db-grid-featured-aligned {
    grid-auto-columns: calc((100% - 42px) / 4);
  }
}
.db-grid-featured-aligned .dcard {
  display: grid; grid-template-rows: 100px minmax(2.6em, auto) 22px 1fr 42px;
  gap: 10px; align-items: center; padding: 16px;
}
.db-grid-featured-aligned .dcard-logo { height: 100px; }
.db-grid-featured-aligned .dcard-name { align-self: start; }
.dcard-badges {
  min-height: 22px; display: flex; justify-content: center; align-items: center;
  gap: 6px; flex-wrap: nowrap;
}
.dcard-badges .dealer-badge { margin-left: 0; }
.dcard-verified {
  min-height: 20px; padding: 2px 8px; border-radius: 5px;
  font-size: .66rem; letter-spacing: .04em;
}
.dcard-verified svg { flex: none; }
.dcard-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; border-top: 1px solid var(--kc-border-subtle);
  padding-top: 10px;
}
.dcard-metric {
  min-width: 0; display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--kc-text-tertiary); white-space: nowrap;
}
.dcard-metric + .dcard-metric { border-left: 1px solid var(--kc-border-subtle); }
.dcard-metric .ic { flex: none; color: var(--kc-brand-deep); }
.db-grid-featured-aligned .dcard .btn {
  margin-top: 0; min-height: 42px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
}

/* Sidebar */
.db-side { display: flex; flex-direction: column; gap: 12px; }
.dside { background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); padding: 18px 20px; }
.dside h2 { font-size: .98rem; font-weight: 750; letter-spacing: -.015em; margin: 0 0 8px; }
.dside p { margin: 0 0 14px; font-size: .85rem; color: var(--kc-text-secondary);
  line-height: 1.55; }
.dside .btn { width: 100%; }
.dside-accent { background: var(--kc-brand-xsoft); border-color: var(--kc-green-200); }
.dside-link { font-size: .87rem; font-weight: 700; color: var(--kc-brand-deep); }
.dside-checks { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.dside-checks li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem;
  color: var(--kc-text-secondary); line-height: 1.45; }
.dside-checks .ic { color: var(--kc-brand-deep); flex: none; margin-top: 2px; }

.db-note { margin: 20px 0 0; font-size: .8rem; color: var(--kc-text-tertiary);
  line-height: 1.55; max-width: var(--measure-prose); }

@media (max-width: 1180px) {
  .db-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-shell { grid-template-columns: 1fr; }
  .dh-inner { grid-template-columns: 1fr; gap: 28px; }
  .dh-directory-photo .dh-inner { grid-template-columns: 1fr; }
  .dh-directory-photo .dh-copy { max-width: 720px; }
  .dh-directory-photo .dh-stats-panel { max-width: 720px; }
}
@media (max-width: 680px) {
  .az-filter-inner { align-items: flex-start; flex-direction: column; gap: 7px;
    padding-block: 10px; }
  .az-filter-track { width: 100%; }
  .az-filter-link { flex-basis: 44px; width: 44px; min-height: 44px; }
  .az-filter-all { flex-basis: auto; width: auto; min-width: 52px; }
  .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-grid-featured-aligned { grid-template-columns: minmax(0, 1fr); }
  .dh-directory-photo .dh-controls { flex-wrap: wrap; }
  .dh-directory-photo .dh-search { flex-basis: 100%; max-width: none; }
  .dh-directory-photo .dh-stats-panel { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .dh-directory-photo .dh-stat:nth-child(even) { border-left: 0; }
  .dh-directory-photo .dh-stat:nth-child(n + 2) { border-top: 1px solid var(--kc-border-subtle); }
}

/* ------------------------------------- V4 profile / plans / auth modifiers
   Additive modifiers used by retailer.html, the supplier profile and the two
   plans pages. Written as modifiers so the base components are unchanged for
   every other consumer. */

/* .dpr-id is ALREADY a white bordered card with a shadow (see §10.2), so this
   modifier only deepens the overlap onto the hero — it must not re-declare the
   card or the borders would double up. */
.dpr-id--card { margin-top: -56px; z-index: 2; }

/* Small mint identity avatar with two-letter initials. Compound selectors
   because it has to beat both .dpr-logo (104px, -60px) and .dlr-logo-tile
   (--avatar-xl), which sit at the same specificity earlier in the file. */
.dpr-logo.dpr-logo--sm,
.dlr-logo-tile.dpr-logo--sm {
  width: 72px; height: 72px; margin-top: 0; padding: 8px;
  border: 0; box-shadow: none;
  border-radius: var(--r-md);
  background: var(--kc-brand-xsoft); color: var(--kc-brand-deep);
  font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
}

/* Retailer profile identity logo, desktop only. Scoped to its own modifier
   because .dpr-logo--sm is shared with the supplier profile, which keeps 72px.
   Triple-compound to beat .dpr-logo.dpr-logo--sm / .dlr-logo-tile.dpr-logo--sm
   above. Mobile keeps the 72px tile — 200px would eat the viewport. */
@media (min-width: 681px) {
  .dlr-logo-tile.dpr-logo--sm.dpr-logo--retailer {
    width: 200px; height: 200px; padding: 16px;
  }
}

/* Live-tracking panel sits top-right of the hero band rather than centred.
   The band is taller in this variant because the identity card is pulled 56px
   up into it: at the base 210px height the panel's lower edge landed ~30px
   inside the card. This gives the panel its own clear space above the card. */
.dpr-banner--toppanel,
.dpr-banner--toppanel .dpr-banner-inner { min-height: 268px; }
.dpr-banner--toppanel .dpr-banner-inner { align-items: flex-start; padding-top: 20px; }

/* Plan card head: name left, MOST POPULAR pill right, on one line. */
.plan-head--split { justify-content: space-between; align-items: flex-start; }
/* Inline variant of the popular flag — inside the card, muted, not the solid
   green tab that straddled the top border. */
.plan-popular-flag--inline {
  position: static; transform: none; top: auto; left: auto; margin-left: auto;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  font-size: .62rem; padding: 4px 10px; flex: none;
}

/* Comparison table header: one neutral colour, uppercase, wide-tracked. */
.plans-table--flat thead th {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .68rem; font-weight: 800; color: var(--kc-text-tertiary);
}

/* Trust card with the icon stacked above the title. */
.trust-card--stack { flex-direction: column; gap: 12px; }

/* ---------------------------------------- V4 collection + PDP additions
   Rules the collection-hero rebuild and the product-page key-spec box depend
   on. Each degrades safely: without them the markup still renders as a plain
   inline row / auto-fill grid / separate cards. */

/* Compact inline trust facts in the collection hero — replaces the large
   white quote panel the v3 hero used. Spans, not a list, so it reads as one
   row rather than bullets. */
.combi-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px; }
.combi-hero-fact { display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: .86rem; color: var(--kc-text-secondary); line-height: 1.45; }
.combi-hero-fact > span[aria-hidden] { color: var(--kc-brand-deep); flex: none;
  margin-top: 1px; display: inline-flex; }
.combi-hero-jump { display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 700; color: var(--kc-brand-deep); }
.combi-hero-jump:hover { color: var(--kc-brand-hover); }

/* Fixed collection grids. The approved category design is 4-up; the product
   page's "Similar models" row is 5-up. Both override the default auto-fill. */
.pc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pc-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1180px) {
  .pc-grid-4, .pc-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .pc-grid-4, .pc-grid-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Key specs as ONE bordered box with internal dividers, not four separate
   tinted cards. The <dl> keeps its semantics; the box carries the border and
   each cell carries a right-hand divider. */
.pd-keyspecs-box { border: 1px solid var(--kc-border-default);
  border-radius: var(--r-card); background: var(--kc-surface-card);
  overflow: hidden; gap: 0; }
.pd-keyspecs-box div { border: 0; background: transparent; border-radius: 0;
  border-right: 1px solid var(--kc-border-default); }
.pd-keyspecs-box div:last-child { border-right: 0; }
@media (max-width: 680px) {
  /* 2x2 at narrow widths — the middle divider would otherwise float. */
  .pd-keyspecs-box div:nth-child(2n) { border-right: 0; }
  .pd-keyspecs-box div:nth-child(-n+2) { border-bottom: 1px solid var(--kc-border-default); }
}

/* The why-compare CTA panel is a filled dark-green card in the approved
   design, not a bare column. */
.combi-why-cta { background: var(--kc-surface-inverse); color: var(--kc-text-on-dark);
  border-radius: var(--r-panel); padding: 24px 26px; }
.combi-why-cta h3 { color: var(--kc-text-on-dark); }
.combi-why-cta > p:not(.combi-why-meta) { color: rgba(255,255,255,.72); }
.combi-why-cta .combi-why-meta { color: rgba(255,255,255,.55); }
.combi-why-cta .btn-primary { background: var(--kc-brand-accent);
  color: var(--kc-surface-inverse); }
.combi-why-cta .btn-primary:hover { background: #48c67a; }

@media (max-width: 680px) {
  .combi-why-copy, .combi-why-cta { width: 100%; min-width: 0; }
  .crumbs span[aria-current] { max-width: calc(100vw - 72px); }
}

/* ---- W1 PDP extras (from product.html wave) ---- */
.pd-main { min-width: 0; }
.pd-main-grid { display: grid; gap: 18px; }
.pd-brand-pill {
  display: inline-flex; align-items: center; font-size: .84rem; font-weight: 700;
  color: var(--kc-brand-deep); text-decoration: none; margin-bottom: 6px;
}
.pd-brand-pill:hover { text-decoration: underline; }
/* Range pill beside the brand pill (product.html). `.prng-` prefix — the
   existing `.range-bar`/`.range-track`/`.range-dot`/`.range-label`/`.range-ends`
   classes (below) are the buybox's unrelated *price* range meter. */
.prng-pill {
  margin-left: 8px; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; color: var(--kc-text-secondary); font-weight: 600;
}
.prng-pill:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }

/* gallery counter chip and nav buttons */
.gal-counter {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(0,0,0,.52); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px; pointer-events: none;
  letter-spacing: .01em;
}
.gal-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--dur-tap), box-shadow var(--dur-tap);
}
.gal-btn:hover { background: #fff; box-shadow: var(--shadow-2); }
.gal-btn-prev { left: 10px; }
.gal-btn-next { right: 10px; }
.gal-btn .ic { color: var(--ink-2); }
.gal-wish {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--dur-tap), box-shadow var(--dur-tap);
}
.gal-wish:hover { background: #fff; box-shadow: var(--shadow-2); }
.gal-wish .ic { color: var(--ink-3); transition: color var(--dur-tap); }
.gal-wish[aria-pressed="true"] .ic { color: var(--kc-danger); }

/* buybox-facts trust list (info column) */
.buybox-facts {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2);
}
.buybox-facts span {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .84rem; color: var(--ink-2); line-height: 1.4;
}
.buybox-facts .ic { color: var(--accent); flex: none; margin-top: 1px; }

/* Product-page quote band. Same dark bar as the collection surfaces, but
   contained in the page column and never sticky — the tab rail below it holds
   the one sticky slot under the header. */
.pd-quote-bar {
  position: static; margin: 22px 0 0; border-radius: var(--r-lg);
  padding-inline: 22px; box-shadow: var(--shadow-2);
}
.pd-quote-bar .collection-quote-inner { padding-block: 12px; }

/* pd-panels / pd-panel wrappers.
   .pd-panel targets sit below the sticky .pd-tab-rail as well as the header,
   so they clear both. */
.pd-panels { }
.pd-panel { scroll-margin-top: calc(var(--header-h) + 64px); }

/* "IS TODAY A REAL DEAL?" dark-green card */
.pd-deal-card {
  background: var(--kc-surface-inverse); color: #fff;
  border-radius: var(--r-lg); padding: 22px 24px;
}
.pd-deal-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kc-brand-accent); margin-bottom: 10px; display: block;
}
.pd-deal-verdict {
  font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin: 0 0 18px;
}
.pd-deal-rows { display: flex; flex-direction: column; }
.pd-deal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .84rem;
}
.pd-deal-row-label { color: rgba(255,255,255,.65); }
.pd-deal-row-val { font-weight: 700; text-align: right; }

/* Why compare card in history aside — light green card */
.pd-why-card {
  background: var(--kc-brand-xsoft); border: 1px solid var(--kc-green-200);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.pd-why-card h3 { font-size: 1rem; font-weight: 750; margin: 0 0 12px; }

/* How we build this card */
.pd-how-card {
  background: var(--paper); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-lg); padding: 18px 22px;
}
.pd-how-card h3 { font-size: .94rem; font-weight: 750; margin: 0 0 8px; }
.pd-how-card p { margin: 0; font-size: .84rem; color: var(--kc-text-secondary); line-height: 1.5; }

/* pd-panel section headings — scoped to be card-appropriate. Sized as a real
   section heading rather than a card label: the panel head is the first thing
   under the sticky tab rail and was reading as body copy at 1.1rem. */
.pd-panel .sec-head { align-items: flex-start; margin: 6px 0 18px; }
.pd-panel .sec-title { font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 800;
  letter-spacing: -.024em; line-height: 1.2; }
.pd-panel .sec-sub { margin-top: 7px; font-size: .88rem; line-height: 1.5;
  color: var(--kc-text-secondary); }

/* Dealer enquiry is one working surface: form on the left, product-specific
   quoting guidance on the right. The image uses the real catalogue asset and
   the form drops its standalone card so there is never a nested box. */
.pd-enquiry-head { margin: 6px 0 18px; }
.pd-enquiry-head h2 {
  margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 800;
  letter-spacing: -.024em; line-height: 1.2;
}
.pd-enquiry-head p {
  max-width: 68ch; margin: 7px 0 0; color: var(--kc-text-secondary);
  font-size: .88rem; line-height: 1.5;
}
.pd-enquiry-form { min-width: 0; padding: 26px 28px 28px; }
.pd-enquiry-form .enquiry-form {
  max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.pd-enquiry-form .enquiry-form > .enquiry-row:first-of-type label { margin-top: 0; }
.pd-enquiry-side { display: flex; flex-direction: column; min-width: 0; }
.pd-enquiry-context {
  display: flex; flex: 1; flex-direction: column; min-width: 0;
  background: var(--kc-brand-xsoft); border-left: 1px solid var(--kc-border-default);
}
.pd-enquiry-media {
  display: grid; grid-template-rows: minmax(190px, 1fr) auto; min-height: 250px;
  margin: 0; padding: 22px 22px 14px; background: var(--paper);
  border-bottom: 1px solid var(--kc-border-default);
}
.pd-enquiry-media img {
  display: block; width: 100%; height: 100%; max-height: 240px; object-fit: contain;
}
.pd-enquiry-media figcaption {
  margin-top: 10px; color: var(--kc-text-tertiary); font-size: .74rem;
  line-height: 1.4; text-align: center;
}
.pd-enquiry-guide { padding: 24px 26px 26px; }
.pd-enquiry-guide h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.pd-enquiry-guide > p {
  margin: 0; color: var(--kc-text-secondary); font-size: .86rem; line-height: 1.55;
}
.pd-enquiry-guide ul {
  display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none;
  color: var(--kc-text-secondary); font-size: .82rem;
}
.pd-enquiry-guide li { display: flex; align-items: flex-start; gap: 8px; }
.pd-enquiry-guide li .ic { flex: none; margin-top: 2px; color: var(--kc-brand-deep); }
.pd-enquiry-sponsored { min-width: 0; margin-top: 14px; }

/* about-this-product card. Single definition — margin-top was set to 0 here
   and then to 8px again further down the same block. */
.pd-about {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 22px 24px; margin-top: 0;
}
.pd-about-heading { font-size: 1.1rem; font-weight: 800; letter-spacing: -.022em; margin: 0 0 14px; }

.buybox-trust {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px;
  align-items: start; margin: 12px 0 0;
  font-size: .78rem; color: var(--kc-text-tertiary); line-height: 1.45;
}
.buybox-trust > .ic { color: var(--kc-text-tertiary); margin-top: 2px; }
.buybox-trust-copy { min-width: 0; }
.buybox-trust-copy strong { color: var(--kc-text-secondary); font-weight: 700; }
.buybox-empty { margin: 0; color: var(--kc-text-secondary); font-size: .9rem; line-height: 1.5; }
.product-issue-entry {
  grid-column: 1 / -1; display: flex; justify-content: flex-start; margin-top: 1px;
}
.product-issue-trigger {
  min-height: 36px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-control); background: transparent; color: var(--kc-text-tertiary);
  font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.product-issue-trigger:hover {
  color: var(--kc-text-secondary); border-color: var(--kc-border-strong);
  background: var(--kc-surface-card);
}
.product-issue-trigger:focus-visible {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 2px;
}

/* Product corrections reuse the established modal shell and focus behaviour,
   but stay visually quieter than the quote flow that remains the page CTA. */
.product-issue-panel { width: min(520px, 100%); max-height: min(760px, calc(100vh - 32px)); overflow-y: auto; }
.product-issue-context {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px;
  padding: 11px 12px; border-radius: var(--r-control); background: var(--kc-surface-tint);
  color: var(--kc-text-secondary); font-size: .78rem; line-height: 1.4;
}
.product-issue-context strong { color: var(--ink); font-size: .84rem; overflow-wrap: anywhere; }
.product-issue-form > label:first-of-type { margin-top: 0; }
.product-issue-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.product-issue-actions .btn { margin-top: 0; }
.product-issue-cancel { background: transparent; border-color: transparent; color: var(--kc-text-secondary); }
.product-issue-cancel:hover { background: var(--kc-surface-tint); color: var(--ink); }
.product-issue-form .fine-print { margin: 12px 0 0; }
.product-issue-success {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px;
  border-radius: var(--r-card); background: var(--kc-brand-xsoft); color: var(--kc-brand-deep);
}
.product-issue-success > .ic { flex: none; margin-top: 2px; }
.product-issue-success strong { display: block; }
.product-issue-success p { margin: 4px 0 0; color: var(--kc-text-secondary); line-height: 1.5; }
.product-issue-done { margin-top: 16px; }

@media (max-width: 680px) {
  .product-issue-trigger { min-height: 44px; }
  .product-issue-panel { padding: 20px 18px; }
  .product-issue-actions { align-items: stretch; flex-direction: column; }
  .product-issue-actions .btn { width: 100%; }
}
/* .offers-card (a white panel wrapping the offer rows) is gone: every .offer is
   already a white bordered card, so the wrapper drew a second box around the
   first. The rows are direct children of #offers now. */
.callout-amber {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--kc-deal-bg); border: 1px solid var(--kc-deal-border);
  color: var(--kc-deal-fg); font-size: .84rem; line-height: 1.5;
}
.pd-history-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .7fr);
  gap: 18px; align-items: start;
}
.pd-history-aside {
  display: flex; flex-direction: column; gap: 14px;
}
.pd-specs-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 22px; align-items: start;
}
.pd-enquiry-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 0; align-items: stretch; overflow: hidden; background: var(--paper);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
}
.pd-supplier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.pd-supplier-card {
  background: #fff; border: 1px solid var(--kc-border-default); border-radius: var(--r-md); padding: 16px;
}
.pd-supplier-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-weight: 700; }
.pd-supplier-meta { margin: 0 0 12px; font-size: .82rem; color: var(--kc-text-tertiary); }

/* PDP customer reviews. Approved content is editorial YAML; the public form
   submits to moderation and never renders its own untrusted input. */
.pd-reviews { position: relative; }
.pd-reviews-head { padding-right: 170px; margin-bottom: 20px; }
.pd-reviews-head h2 {
  margin: 0 0 7px; font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  font-weight: 800; letter-spacing: -.024em; line-height: 1.2;
}
.pd-reviews-head p {
  margin: 0; color: var(--kc-text-secondary); font-size: .88rem; line-height: 1.5;
}
.pd-review-compose { position: relative; height: 0; }
.pd-review-compose[open] { height: auto; margin-bottom: 20px; }
.pd-review-compose > summary {
  position: absolute; right: 0; top: -68px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 9px 16px; list-style: none; cursor: pointer;
  border-radius: var(--r-control); background: var(--kc-brand-deep);
  color: var(--kc-text-on-dark); font-size: .82rem; font-weight: 750;
}
.pd-review-compose > summary::-webkit-details-marker { display: none; }
.pd-review-compose > summary:hover { background: var(--kc-brand-hover); }
.pd-review-compose > summary:focus-visible { outline: 2px solid var(--kc-brand-deep); outline-offset: 3px; }
.pd-review-compose[open] > summary { background: var(--kc-surface-inverse); }
.pd-review-form {
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
  background: var(--kc-surface-card); padding: 24px; margin-top: 8px;
}
.pd-review-form-intro { margin-bottom: 18px; }
.pd-review-form-intro h3 { margin: 0 0 5px; font-size: 1.05rem; font-weight: 800; }
.pd-review-form-intro p { margin: 0; color: var(--kc-text-secondary); font-size: .84rem; line-height: 1.5; max-width: 72ch; }
.pd-review-rating { border: 0; margin: 0 0 17px; padding: 0; }
.pd-review-rating legend { margin-bottom: 8px; color: var(--kc-text-secondary); font-size: .75rem; font-weight: 750; }
.pd-review-rating > div { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-review-rating label { position: relative; cursor: pointer; }
.pd-review-rating input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pd-review-rating span {
  display: inline-flex; min-height: 38px; align-items: center; padding: 8px 13px;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-pill);
  color: var(--kc-text-secondary); font-size: .78rem; font-weight: 700;
}
.pd-review-rating input:checked + span { background: var(--kc-brand-deep); border-color: var(--kc-brand-deep); color: var(--kc-text-on-dark); }
.pd-review-rating input:focus-visible + span { outline: 2px solid var(--kc-brand-deep); outline-offset: 2px; }
.pd-review-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.pd-review-form-grid label {
  display: grid; gap: 6px; min-width: 0; color: var(--kc-text-secondary);
  font-size: .75rem; font-weight: 700;
}
.pd-review-form-grid label > span { color: var(--kc-text-tertiary); font-weight: 500; }
.pd-review-form-grid .is-wide { grid-column: 1 / -1; }
.pd-review-form-grid input,
.pd-review-form-grid select,
.pd-review-form-grid textarea {
  width: 100%; border: 1px solid var(--kc-border-default); border-radius: var(--r-control);
  background: var(--kc-surface-card); padding: 10px 12px; color: var(--kc-text-primary);
  font: inherit; font-size: .84rem; font-weight: 400; line-height: 1.45;
}
.pd-review-form-grid textarea { resize: vertical; }
.pd-review-form-grid input::placeholder,
.pd-review-form-grid textarea::placeholder { color: #68736C; opacity: 1; }
.pd-review-form-grid input:focus,
.pd-review-form-grid select:focus,
.pd-review-form-grid textarea:focus { outline: 2px solid var(--kc-brand-deep); outline-offset: 1px; border-color: transparent; }
.pd-review-consent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start;
  margin-top: 16px; color: var(--kc-text-secondary); font-size: .78rem; line-height: 1.45;
}
.pd-review-consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--kc-brand-deep); }
.pd-review-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pd-review-form-actions p { margin: 0; color: var(--kc-text-tertiary); font-size: .72rem; line-height: 1.4; }
.pd-review-status {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 14px 16px;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep); border-radius: var(--r-card);
  font-size: .84rem; line-height: 1.45;
}
.pd-review-status .ic { flex: none; margin-top: 2px; }
.pd-review-status strong { display: block; }
.pd-review-empty {
  display: flex; align-items: flex-start; gap: 15px; padding: 24px;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
  background: var(--kc-surface-card);
}
.pd-review-empty > span {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: var(--kc-brand-soft); color: var(--kc-brand-deep);
}
.pd-review-empty h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 800; }
.pd-review-empty p { margin: 0; color: var(--kc-text-secondary); font-size: .86rem; line-height: 1.55; max-width: 64ch; }
.pd-review-overview {
  display: grid; grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.2fr);
  gap: 30px; padding: 24px; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-panel); background: var(--kc-surface-card);
}
.pd-review-average > strong { font-size: 2.5rem; font-weight: 830; letter-spacing: -.04em; line-height: 1; }
.pd-review-average > span { color: var(--kc-text-tertiary); font-size: .9rem; font-weight: 700; }
.pd-review-average > p { margin: 8px 0 0; color: var(--kc-text-tertiary); font-size: .78rem; }
.pd-review-stars { display: flex; gap: 3px; color: var(--kc-stone-300); margin-top: 10px; }
.pd-review-stars span { display: inline-flex; }
.pd-review-stars .is-filled { color: #D58A00; }
.pd-review-stars .is-filled svg { fill: currentColor; }
.pd-review-recommend { margin-top: 16px; padding: 11px 12px; border-radius: var(--r-control); background: var(--kc-brand-soft); color: var(--kc-brand-deep); font-size: .78rem; }
.pd-review-distribution h3 { margin: 0 0 10px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kc-text-tertiary); }
.pd-review-distribution > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 10px; align-items: center; min-height: 28px; font-size: .76rem; color: var(--kc-text-secondary); }
.pd-review-distribution > div > strong { text-align: right; color: var(--kc-text-primary); }
.pd-review-bar { height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--kc-tint-2); }
.pd-review-bar i { display: block; height: 100%; border-radius: inherit; background: var(--kc-brand-deep); }
.pd-review-list { display: grid; gap: 14px; margin-top: 16px; }
.pd-review-card {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; padding: 20px;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel); background: var(--kc-surface-card);
}
.pd-review-author { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border-right: 1px solid var(--kc-border-subtle); padding-right: 18px; }
.pd-review-avatar { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 50%; background: var(--kc-brand-soft); color: var(--kc-brand-deep); font-size: .84rem; font-weight: 800; }
.pd-review-author > strong { font-size: .86rem; }
.pd-review-author > span:not(.pd-review-avatar) { display: flex; align-items: center; gap: 5px; color: var(--kc-text-tertiary); font-size: .72rem; }
.pd-review-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pd-review-card-top .pd-review-stars { margin: 0; }
.pd-review-card-top time { color: var(--kc-text-tertiary); font-size: .72rem; }
.pd-review-body h3 { margin: 10px 0 7px; font-size: .98rem; font-weight: 800; }
.pd-review-body > p { margin: 0; max-width: 78ch; color: var(--kc-text-secondary); font-size: .86rem; line-height: 1.6; }
.pd-review-points { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.pd-review-points strong { display: block; margin-bottom: 7px; color: var(--kc-brand-deep); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pd-review-points ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; color: var(--kc-text-secondary); font-size: .78rem; }
.pd-review-points li { display: flex; align-items: flex-start; gap: 6px; }
.pd-review-points li .ic { flex: none; color: var(--kc-brand-deep); margin-top: 2px; }
.pd-review-would { display: flex; align-items: center; gap: 6px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--kc-border-subtle); color: var(--kc-brand-deep); font-size: .78rem; font-weight: 750; }

@media (max-width: 760px) {
  .pd-reviews-head { padding-right: 0; margin-bottom: 14px; }
  .pd-review-compose { height: auto; margin-bottom: 16px; }
  .pd-review-compose > summary { position: static; width: 100%; min-height: 44px; }
  .pd-review-compose[open] { margin-bottom: 16px; }
  .pd-review-form { padding: 18px 16px; margin-top: 12px; }
  .pd-review-form-grid { grid-template-columns: 1fr; }
  .pd-review-form-grid .is-wide { grid-column: auto; }
  .pd-review-form-actions { align-items: stretch; flex-direction: column; }
  .pd-review-form-actions .btn { width: 100%; }
  .pd-review-overview, .pd-review-card { grid-template-columns: 1fr; }
  .pd-review-author { border-right: 0; border-bottom: 1px solid var(--kc-border-subtle); padding: 0 0 14px; }
  .pd-review-points { grid-template-columns: 1fr; }
}

/* ---- W3 retailer detail + supplier profile ---- */
.dpr-trust--dark {
  background: var(--kc-surface-inverse); color: #fff; border-color: transparent;
}
.dpr-trust--dark .dpr-trust-item { color: rgba(255,255,255,.78); }
/* The rendered rows are plain <li> inside .dpr-trust-list — they never carried
   .dpr-trust-item, so the override above matched nothing and the base rule's
   dark ink left the text invisible on the dark green panel. */
.dpr-trust--dark .dpr-trust-title { color: var(--accent-bright); }
.dpr-trust--dark .dpr-trust-list li { color: rgba(255,255,255,.86); }
.dpr-trust--dark .dpr-trust-list .ic { color: var(--accent-bright); }
.dpr-hq { margin-top: 12px; }
.dpr-hq-label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--kc-text-tertiary); margin-bottom: 4px;
}
.dpr-hq-value { font-size: .92rem; color: var(--kc-text-secondary); }
.dpr-claim-band {
  margin: 36px 0 48px; padding: 28px; border-radius: var(--r-lg);
  background: var(--kc-brand-xsoft); border: 1px solid var(--kc-green-200);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
.dpr-claim-copy { max-width: 52ch; }
.dpr-claim-copy h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; }
.dpr-claim-copy p { margin: 0; color: var(--kc-text-secondary); font-size: .9rem; }

/* ================================================================ unclaimed
   retailer profile (2026-08-04)

   An unclaimed profile is a *different page*, not the claimed page with a
   button bolted on: the buyer needs to know the facts here are unverified,
   and the retailer needs one unmissable path to fixing that. The whole state
   speaks in one amber voice so both readings land at a glance.

   Amber, not green. Green is this site's trust colour — price-ordered,
   verified, independent. Borrowing it for "we could not verify this" would
   say the opposite of the truth. Amber reads as incomplete-and-actionable
   and appears nowhere else on the profile, so every amber mark on the page
   belongs to the same story.

   All rules are additive and gated behind the .is-unclaimed markup, so the
   claimed profile renders byte-identically to before. */

:root {
  /* 8.0:1 on the cream, 5.3:1 on the gold. #7A4E0B lands at 4.48:1 on the gold
     — a hair under AA — so the ink darkens rather than the gold, which keeps
     the button as bright as the comp. */
  --kc-claim-ink:    #6B4408;
  /* Secondary ink for the amber surfaces. Warm rather than the page's grey,
     because neutral grey on a tinted ground reads as dirt; and dark enough that
     the locked rows stay AA (5.5:1) instead of being greyed into illegibility
     to signal "disabled" — the lock icon does that job. */
  --kc-claim-ink-2:  #6B5A3E;
  --kc-claim-bg:     #FDF8EC;
  --kc-claim-bg-2:   #FBF1DC;   /* pills, glyph fills — one step deeper */
  --kc-claim-border: #EFDFC0;
  --kc-claim-solid:  #F6C64B;
  --kc-claim-deep:   #E9B52F;
}

/* ---- the gold action. Used for every claim CTA and nowhere else. ---- */
.btn-claim {
  background: var(--kc-claim-solid); color: var(--kc-claim-ink);
  border-color: var(--kc-claim-deep);
}
.btn-claim:hover { background: var(--kc-claim-deep);
  box-shadow: 0 6px 18px rgba(122, 78, 11, .22); }
.btn-claim .ic { color: currentColor; }

/* ---- unclaimed profile: inert actions and masked contact details ----
   An unclaimed retailer has not verified the business, so their own actions
   read as switched off. `.btn-locked` is fully inert; `.btn-locked-action`
   is the one live route — muted to match, but clickable, and it opens the
   enquiry modal. */
.btn.btn-locked {
  background: var(--kc-stone-100, #F1F0EC); color: var(--kc-text-tertiary, #7A776F);
  border-color: var(--line); box-shadow: none; cursor: not-allowed;
  pointer-events: none; user-select: none;
}
.btn.btn-locked .ic { color: currentColor; opacity: .7; }
.btn.btn-locked-action {
  background: var(--kc-stone-100, #F1F0EC); color: var(--ink-2);
  border-color: var(--line);
}
.btn.btn-locked-action:hover { color: var(--accent-ink); border-color: var(--accent);
  background: var(--paper); }

/* Locked contact rows keep the value readable where it is not masked, but
   carry no link affordance. */
.dpr-contact-item--locked { color: var(--kc-text-tertiary, #7A776F); cursor: default; }
.dpr-contact-item--locked .ic { color: var(--kc-text-tertiary, #7A776F); }
.dpr-loc-locked { color: var(--kc-text-tertiary, #7A776F); }

/* The masked value itself: real leading characters, then a blurred filler run
   and an ellipsis. Only the leading characters are ever sent to the page. */
.kc-mask { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.kc-mask-fill {
  filter: blur(3.5px); opacity: .6; user-select: none; letter-spacing: .04em;
}
.kc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Contact section footer on an unclaimed profile. */
.dpr-contact-locked-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px;
  background: var(--kc-claim-bg); border: 1px solid var(--kc-claim-border);
  border-radius: var(--r-md);
}
.dpr-contact-locked-note p {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: .85rem; line-height: 1.45; color: var(--kc-claim-ink-2);
}
.dpr-contact-locked-note .ic { flex: none; margin-top: 1px; color: var(--kc-claim-ink); }

/* ---- identity card: status pill, inline notice, CTA fine print ---- */
.dpr-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--kc-claim-bg-2); color: var(--kc-claim-ink);
  border: 1px solid var(--kc-claim-border); border-radius: 999px;
  padding: 4px 11px; font-size: .72rem; font-weight: 750;
  letter-spacing: .01em; white-space: nowrap;
}
.dpr-unclaimed-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0;
  background: var(--kc-claim-bg); border: 1px solid var(--kc-claim-border);
  border-radius: var(--r-md); padding: 11px 14px;
  font-size: .85rem; line-height: 1.45; color: var(--kc-claim-ink-2);
}
.dpr-unclaimed-note .ic { flex: none; margin-top: 1px; color: var(--kc-claim-ink); }
/* The CTA column stacks its buttons on one row and the reassurance beneath,
   so "Free to claim" reads as a caption on the gold button, not a stray line. */
.dpr-ctas--stacked { flex-direction: column; align-items: flex-end; gap: 7px; }
.dpr-ctas-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; }
.dpr-cta-fine { margin: 0; font-size: .74rem; color: var(--kc-text-tertiary); }

/* ---- the claim panel: a tinted region, not a card ----
   Three columns: the ask, what claiming does, what is still locked. */
/* Three reading columns: the ask, what claiming gets you, what stays locked. */
.rcl {
  margin: 22px 0 8px; padding: 26px 28px; border-radius: var(--r-lg);
  background: var(--kc-claim-bg); border: 1px solid var(--kc-claim-border);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .72fr) minmax(0, 1fr);
  grid-template-areas: "ask gains locked";
  align-content: start; gap: 22px 34px;
}
.rcl-ask    { grid-area: ask; }
.rcl-gains  { grid-area: gains; }
.rcl-locked { grid-area: locked; }
.rcl-ask { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px;
  align-content: start; }
.rcl-glyph {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kc-claim-bg-2); border: 1.5px solid var(--kc-claim-solid);
  color: var(--kc-claim-ink);
}
.rcl-ask h2 { margin: 0 0 10px; font-size: 1.32rem; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; }
.rcl-ask p { margin: 0 0 12px; font-size: .89rem; line-height: 1.55;
  color: var(--kc-claim-ink-2); max-width: 52ch; }
.rcl-ask p strong { color: var(--kc-text-primary); font-weight: 750; }
.rcl-reassure {
  display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 11px 0 0;
  padding: 0; list-style: none;
}
.rcl-reassure li { display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 600; color: var(--kc-claim-ink-2); }
.rcl-reassure .ic { color: var(--accent); flex: none; }

/* Benefits — a plain checked list. Deliberately not cards: six identical
   icon-heading-text boxes would out-shout the one action on this panel. */
.rcl-gains { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px;
  align-content: start; }
.rcl-gains li { display: flex; gap: 10px; align-items: flex-start;
  font-size: .87rem; line-height: 1.42; color: var(--kc-claim-ink-2); }
.rcl-gains .ic { color: var(--accent); flex: none; margin-top: 2px; }

/* ---- locked column ---- */
.rcl-locked h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800;
  letter-spacing: -.01em; }
.rcl-locked > p { margin: 0 0 14px; font-size: .85rem; line-height: 1.5;
  color: var(--kc-claim-ink-2); }
.rcl-locked-grid { display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  gap: 20px; align-items: start; }
.rcl-locked-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rcl-locked-list li {
  display: flex; align-items: center; gap: 9px;
  background: var(--kc-stone-100); border: 1px solid var(--kc-border-subtle);
  border-radius: var(--r-sm); padding: 8px 12px;
  font-size: .82rem; font-weight: 600; color: var(--kc-claim-ink-2);
}
.rcl-locked-list .ic { flex: none; opacity: .8; }

/* Illustration: what the retailer is being handed the key to. Abstract on
   purpose — a real screenshot would be a claim about a dashboard whose
   contents depend on their plan. */
.rcl-shot { display: grid; gap: 12px; }
.rcl-window {
  background: var(--paper); border: 1px solid var(--kc-border-default);
  border-radius: 10px; overflow: hidden; position: relative;
  box-shadow: 0 6px 18px rgba(22, 33, 28, .07);
}
.rcl-window-bar { display: flex; gap: 4px; padding: 7px 9px;
  background: var(--kc-claim-bg-2); border-bottom: 1px solid var(--kc-claim-border); }
.rcl-window-bar i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--kc-claim-solid); }
.rcl-window-body { padding: 14px 14px 18px; display: grid; gap: 10px; }
.rcl-window-body i { display: block; height: 7px; border-radius: 4px;
  background: var(--kc-stone-200); }
.rcl-window-body i:nth-child(1) { width: 62%; }
.rcl-window-body i:nth-child(2) { width: 88%; }
.rcl-window-body i:nth-child(3) { width: 74%; }
.rcl-window-body i:nth-child(4) { width: 45%; }
.rcl-window-body i:nth-child(5) { width: 80%; }
.rcl-window-body i:nth-child(6) { width: 56%; }
/* A margin note, set in the page's own face — not a handwriting costume. */
.rcl-note { display: flex; align-items: flex-start; gap: 8px; }
.rcl-note svg { flex: none; color: var(--kc-claim-solid); margin-top: 2px; }
.rcl-note span { font-size: .78rem; font-style: italic; line-height: 1.45;
  color: var(--kc-claim-ink); }

/* ---- inline strip inside Locations & coverage ---- */
.rcl-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px; margin-top: 16px; padding: 14px 18px;
  background: var(--kc-claim-bg); border: 1px solid var(--kc-claim-border);
  border-radius: var(--r-md);
}
.rcl-strip p { display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: .86rem; color: var(--kc-claim-ink-2); }
.rcl-strip .ic { color: var(--kc-claim-ink); flex: none; }

/* Facts-only variant of the About block for unclaimed profiles: the copy column
   has moved into the claim panel, so the facts run as one row instead of a
   340px sidebar with nothing beside it. Its own card border is dropped — the
   inner .dpr-about-facts already carries one. */
.dpr-about--facts-row { grid-template-columns: minmax(0, 1fr);
  background: none; border: 0; padding: 0; margin-top: 22px; }
.dpr-about--facts-row .dpr-about-facts {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start; gap: 18px 22px;
}
.dpr-about--facts-row .dpr-trust--dark { grid-column: 1 / -1; }

/* Closing band, recoloured into the same amber voice. Base .dpr-claim-band is
   the mint variant and stays untouched for any other consumer. */
.dpr-claim-band--unclaimed {
  background: var(--kc-claim-bg); border-color: var(--kc-claim-border);
}

/* Two columns: the ask keeps the gains beside it, the locked panel runs full
   width beneath — its own list-plus-illustration split fills that width. */
@media (max-width: 1180px) {
  .rcl { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "ask gains" "locked locked"; }
}
@media (max-width: 860px) {
  .rcl { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ask" "gains" "locked"; gap: 22px; }
  .dpr-ctas--stacked { align-items: stretch; }
  /* The stacked row stretches, but its buttons inherit .btn's white-space:nowrap
     and min-width:auto, so a long label held the row 10px wider than its column.
     Let the label wrap on a phone instead. */
  .dpr-ctas-row { justify-content: flex-start; min-width: 0; }
  .dpr-ctas-row .btn { min-width: 0; white-space: normal; }
}
@media (max-width: 640px) {
  .rcl { padding: 20px 18px; }
  .rcl-ask { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rcl-glyph { width: 56px; height: 56px; }
  /* The illustration is a supporting flourish; on a phone the locked list and
     the CTA are what matter, so it drops rather than squeezing them. */
  .rcl-locked-grid { grid-template-columns: minmax(0, 1fr); }
  .rcl-shot { display: none; }
}

/* These breadcrumbs sit on the dark cover image but inherited the page's dark
   greys — roughly 1.5:1, effectively invisible. Light ink, as the cover's other
   overlaid text already uses. The current-page span needs the attribute
   selector to beat .crumbs span[aria-current]'s dark ink. */
.sup-cover-crumbs .crumbs,
.sup-cover-crumbs .crumbs a { color: rgba(255, 255, 255, .88); }
.sup-cover-crumbs .crumbs span[aria-current] { color: #fff; }
.sup-cover-crumbs .crumbs a:hover { color: #fff; }
/* Verified-by facts on an unclaimed supplier profile: the title spans the row,
   the facts flow beneath it. */
.sup-verify-facts .dpr-trust-title { grid-column: 1 / -1; margin: 0; }

.sup-cover-crumbs { padding-block: 18px 0; position: relative; z-index: 1; }
.sup-id-card { margin-top: -48px; }
.sup-website { font-size: .88rem; font-weight: 700; color: var(--kc-brand-deep); }
.sup-stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 22px 0 28px; padding: 18px 0; border-block: 1px solid var(--kc-border-default);
}
.sup-stat-item strong { display: block; font-size: 1.25rem; font-weight: 800; }
.sup-stat-item span { font-size: .78rem; color: var(--kc-text-tertiary); }
.sup-about-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  gap: 22px; margin-bottom: 36px;
}
.sup-verify-panel {
  background: var(--kc-brand-xsoft); border: 1px solid var(--kc-green-200);
  border-radius: var(--r-md); padding: 18px;
}
.sup-verify-title { margin: 0 0 10px; font-size: 1rem; font-weight: 800; }
.sup-verify-list { margin: 0; padding-left: 18px; color: var(--kc-text-secondary); display: grid; gap: 6px; }
.sup-catalog-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 36px;
}
.sup-section-n { font-size: .85rem; color: var(--kc-text-tertiary); font-weight: 600; margin-left: 8px; }
.sup-brands-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.sup-brand-tile {
  display: grid; gap: 5px; padding: 16px; background: #fff;
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
}
.sup-brand-tile:hover { border-color: var(--kc-brand-deep); }
/* Definite tracks, same reason as .dcard-logo: an `auto` track would be sized
   by the logo's own max-content, so `max-width: 100%` would never constrain it
   and wide wordmarks would be clipped. */
/* Full tile width, not a 36px square: the square was sized for two initials and
   reduced a real wordmark logo to an unreadable smudge. Same slot shape as the
   directory .dcard-logo so both read consistently. */
.sup-brand-logo {
  width: 100%; height: 76px; border-radius: 9px; background: var(--kc-surface-card);
  color: var(--kc-brand-deep); font-weight: 800; font-size: .75rem;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center; overflow: hidden; padding: 4px; margin-bottom: 4px;
}
.sup-brand-logo > * { grid-area: 1 / 1; }
.sup-brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
/* Initials are the fallback — hidden only while a logo is actually present. */
.sup-brand-logo:has(img) .sup-brand-ph { visibility: hidden; }
.sup-brand-name { font-weight: 700; font-size: .88rem; }
.sup-brand-n { font-size: .75rem; color: var(--kc-text-tertiary); }
.sup-spotlight { margin-bottom: 48px; }
.sup-spotlight-layout {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px; margin-top: 14px;
}
/* Five equal tracks: the former hero keeps its bespoke markup but shares the
   same dimensions, surface and image treatment as the four standard cards. */
.sup-spotlight-hero {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.sup-spotlight-hero:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-2);
  transform: translateY(-2px); }
.sup-spotlight-hero-media {
  aspect-ratio: 1 / 1; min-height: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-2); padding: 22px;
}
.sup-spotlight-hero-media img { max-width: 100%; }
.sup-spotlight-hero-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.sup-spotlight-meta { font-size: .75rem; color: var(--kc-text-tertiary); font-weight: 700; }
.sup-spotlight-name { display: block; font-weight: 700; margin: 4px 0 8px; }
.sup-spotlight-price { display: grid; gap: 4px; margin-top: auto; font-size: 1.15rem; font-weight: 800; }
.sup-spotlight-price > span { font-size: .7rem; color: var(--kc-text-tertiary); font-weight: 550; }
.sup-spotlight-grid {
  display: contents;
}
.sup-products { margin-bottom: 48px; scroll-margin-top: calc(var(--header-h) + 18px); }
.sup-products .list-rail { max-height: none; overflow: visible; }
#supplier-filter-rail .foptions,
#supplier-filter-drawer .foptions { max-height: none; overflow: visible; }
.supplier-auto-filter[aria-busy="true"] { opacity: .68; pointer-events: none; }
.sup-products[aria-busy="true"] .list-main { opacity: .62; pointer-events: none; }
[data-ajax-filter-form][aria-busy="true"],
[data-ajax-product-listing][aria-busy="true"] .list-main,
[data-ajax-page-filter][aria-busy="true"] { opacity: .62; pointer-events: none; }
.dir-badge-claimed {
  display: inline-flex; align-items: center; font-size: .66rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; background: var(--kc-brand-soft);
  color: var(--kc-brand-deep); padding: 3px 9px; border-radius: 999px; margin-left: 8px;
}

@media (max-width: 980px) {
  .pd-history-grid, .pd-specs-grid, .pd-enquiry-grid,
  .sup-about-row, .sup-catalog-grid { grid-template-columns: 1fr; }
  .pd-enquiry-context { border-left: 0; border-top: 1px solid var(--kc-border-default); }
  .pd-enquiry-media { min-height: 220px; }
  .sup-stats-band { grid-template-columns: 1fr 1fr; }
  .sup-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sup-spotlight-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .sup-stats-band { grid-template-columns: 1fr; }
  .sup-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sup-spotlight-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-meta { grid-template-columns: 1fr; }
  .pd-enquiry-form { padding: 20px 18px 22px; }
  .pd-enquiry-guide { padding: 22px 18px; }
  .pd-enquiry-media { grid-template-rows: minmax(160px, 1fr) auto; padding: 18px 18px 12px; }
  .pd-quote-bar { padding-inline: 14px; }
}

/* ========================================================= V4 LEGAL DOCUMENTS
   Terms, privacy, disclosure and the other single-document pages.

   The shape is: a chip row of document metadata, then a two-column shell whose
   left rail is plain text on the ground (NOT a card — a bordered sidebar next
   to a bordered document reads as two competing documents), and whose right
   side is one wide white card. The card stays wide; the running text inside it
   is what gets capped to a readable measure.
   ------------------------------------------------------------------------ */

/* Metadata chip row — version, effective date, jurisdiction. */
.lgl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 16px 0 0;
}
.lgl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--kc-border-default);
  border-radius: var(--r-pill); padding: 6px 13px;
  font-size: .78rem; font-weight: 600; color: var(--kc-text-secondary);
  white-space: nowrap;
}
.lgl-chip .ic { color: var(--kc-text-tertiary); flex: none; }
/* The one chip that carries state — current version / in force. */
.lgl-chip--on {
  background: var(--kc-brand-deep); border-color: var(--kc-brand-deep);
  color: var(--kc-text-on-dark); font-weight: 700;
}
.lgl-chip--on .ic { color: currentColor; }
/* The summaries chip is a real <button>, so it needs the control reset the
   <span> chips never did. It ships `hidden` and JS unhides it — with no JS the
   summaries are simply always on, rather than showing a switch that does
   nothing. */
button.lgl-chip { font: inherit; font-size: .78rem; cursor: pointer; }
button.lgl-chip:focus-visible {
  outline: 2px solid var(--kc-brand-deep); outline-offset: 2px;
}
/* Pressed-out state: same pill, unfilled, so the row doesn't jump. */
button.lgl-chip[aria-pressed="false"] {
  background: transparent; border-color: var(--kc-border-default);
  color: var(--kc-text-secondary); font-weight: 600;
}
.lgl-doc.is-plain-off .lgl-plain { display: none; }

/* Shell */
.lgl-layout {
  display: grid; grid-template-columns: 258px minmax(0, 1fr);
  gap: 56px; align-items: start;
  padding-block: var(--shell-y) var(--shell-y-end);
}
/* Grid items default to min-width:auto and refuse to shrink below their own
   content. The single-column rule for phones already lives at the ≤980px
   breakpoint further down this file. */
.lgl-layout > * { min-width: 0; }

/* Left rail — no card, no border, no fill. Plain links on the page ground. */
.lgl-side {
  position: sticky; top: var(--sticky-top);
  background: transparent; border: 0; padding: 0;
}
.lgl-side-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kc-text-tertiary);
  margin: 0 0 12px;
}
.lgl-side-label + .lgl-side-label,
.lgl-side > * + .lgl-side-label { margin-top: 26px; }
/* Continuous hairline down the link list — the "SECTIONS" label sits outside
   the nav so it stays outdented against it, as drawn. Measured off the mock:
   2px of --kc-border-default, links inset 13px. */
.lgl-side nav {
  border-left: 2px solid var(--kc-border-default); padding-left: 13px;
}
.lgl-side a {
  display: block; padding: 6px 0; font-size: .87rem; font-weight: 600;
  color: var(--kc-text-secondary); line-height: 1.45;
  transition: color var(--dur-fast) var(--ease);
}
.lgl-side a:hover, .lgl-side a.is-active { color: var(--kc-brand-deep); }

/* The document — one card. */
.lgl-doc {
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-panel); padding: 40px;
}

/* Sections, separated by a hairline rather than by whitespace alone. */
.lgl-sec { scroll-margin-top: var(--scroll-offset); }
.lgl-sec + .lgl-sec {
  border-top: 1px solid var(--kc-border-subtle);
  margin-top: 32px; padding-top: 32px;
}
.lgl-sec h2 {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.022em;
  margin: 0 0 12px;
}
/* Two-digit numeral, inline ahead of the section title. */
.lgl-num {
  color: var(--kc-brand-deep); font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  margin-right: 10px; vertical-align: 2px;
}

/* "In plain English" box — near-white ground, bright green rule.
   Written before the documents existed and guessed at mint on brand-deep; the
   mock samples as #F7FAF8 behind a 2px --kc-green-400 rule, which is much
   quieter. Nine of these stack down a page, so the loud version turned the
   document into a striped wall. Corrected against the mock, which had never
   been rendered against this rule. */
.lgl-plain {
  background: #F7FAF8; border-left: 2px solid var(--kc-green-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 18px; margin: 16px 0;
}
.lgl-plain-label {
  display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kc-brand-deep); margin-bottom: 6px;
}
.lgl-plain p { margin: 0; font-size: .87rem; line-height: 1.6;
  color: var(--kc-text-secondary); }

/* Measure applies to the running text, not to the card. */
.lgl-prose { max-width: var(--measure-prose); }
.lgl-prose p, .lgl-prose li { line-height: 1.7; color: var(--kc-text-secondary); }
.lgl-prose li { margin-bottom: .35em; }
.lgl-prose > :first-child { margin-top: 0; }
.lgl-prose > :last-child { margin-bottom: 0; }

/* Preamble above section 01 — who operates the service and what the document
   covers. Sits on the same rule as a section boundary so it reads as part of
   the document, not as a lead-in card. */
.lgl-intro {
  padding-bottom: 32px; border-bottom: 1px solid var(--kc-border-subtle);
  margin-bottom: 32px;
}

/* Business Member acknowledgement — a closing restatement, not a numbered
   clause, so it carries no .lgl-num and stays out of the sections rail. The
   tint separates it from the clauses above without adding a second card. */
.lgl-ack {
  margin-top: 36px; padding: 24px;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-subtle);
  border-radius: var(--r-panel); scroll-margin-top: var(--scroll-offset);
}
.lgl-ack h2 {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.022em;
  margin: 0 0 12px;
}
.lgl-ack ol { padding-left: 1.2em; }

/* Foot strip — bleeds to the card edges, so it must cancel .lgl-doc's padding. */
.lgl-foot {
  margin: 36px -40px -40px; padding: 20px 40px;
  background: var(--kc-tint-1); border-top: 1px solid var(--kc-border-subtle);
  border-radius: 0 0 calc(var(--r-panel) - 1px) calc(var(--r-panel) - 1px);
  font-size: .82rem; line-height: 1.6; color: var(--kc-text-tertiary);
}
.lgl-foot p { margin: 0; }
.lgl-foot a { color: var(--kc-brand-deep); font-weight: 600; }

@media (max-width: 980px) {
  .lgl-layout { grid-template-columns: 1fr; gap: 28px; }
  .lgl-side { position: static; }
}
@media (max-width: 680px) {
  .lgl-doc { padding: 22px; }
  .lgl-foot { margin: 26px -22px -22px; padding: 18px 22px; }
}

/* ================================================================= V4 DEALS
   The deals page reuses the .pc product card rather than forking a second card
   family; the additions below are the deal-specific slots inside it, plus the
   page's own hero band and control row.
   ------------------------------------------------------------------------ */

/* Discount ribbon, over the media. Sits opposite .pc-quick-actions, and shares
   its top offset with .pc-flag / .pc-best so only one ever shows at a time. */
.pc-ribbon {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--kc-brand-deep); color: var(--kc-text-on-dark);
  border-radius: var(--r-pill); padding: 4px 11px 4px 10px;
  font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-ribbon .ic { width: 12px; height: 12px; flex: none; }

/* Saving line in the card body.
   Deliberately NOT `.pc-save` — that name is taken by the circular quick-action
   save button (§7, `.pc-save, .pc-compare`), which saved-compare.js binds to via
   `.pc-save[data-id]`. Restyling it as text would break the save control on
   every product card on the site, so the deal saving line gets its own name. */
.pc-saveline {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: .82rem; font-weight: 700; color: var(--kc-brand-deep);
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
.pc-saveline .ic { width: 13px; height: 13px; flex: none; }

/* Small icon + text meta row, hairline-separated from the body above it. */
.pc-metarow {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--kc-border-subtle);
  font-size: .74rem; color: var(--kc-text-tertiary); line-height: 1.4;
}
.pc-metarow .ic { width: 13px; height: 13px; flex: none; color: var(--kc-text-tertiary); }
.pc-metarow strong { color: var(--kc-text-secondary); font-weight: 700; }

/* Full-width outlined button slot at the card foot. */
.pc-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 12px; padding: 9px 14px;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-control);
  font-size: .82rem; font-weight: 700; color: var(--kc-text-primary);
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pc-cta:hover { border-color: var(--kc-brand-deep); color: var(--kc-brand-deep); }

/* Deals hero — white full-bleed band above the grey results band. */
.dl-hero {
  background: var(--kc-surface-card);
  border-bottom: 1px solid var(--kc-border-default);
}
.dl-hero-inner {
  display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(32px, 4vw, 72px); align-items: start;
  padding-block: 30px 42px;
}
.dl-hero-copy { min-width: 0; }
.dl-hero h1 {
  font-size: var(--h1-page); font-weight: 800; letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading); margin: 0 0 14px; max-width: 20ch;
}
.dl-hero-lede {
  color: var(--kc-text-secondary); font-size: 1.02rem; line-height: 1.6;
  max-width: var(--measure-lede); margin: 0 0 24px;
}

/* Trust rows — circular mint icon tile + bold title + grey sub. */
.dl-trust {
  display: flex; flex-direction: column; gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.dl-trust li { display: flex; align-items: flex-start; gap: 13px; }
.dl-trust-ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  display: grid; place-items: center;
}
.dl-trust-text { min-width: 0; }
.dl-trust strong {
  display: block; font-size: .95rem; font-weight: 750; letter-spacing: -.01em;
  color: var(--kc-text-primary);
}
.dl-trust-text > span,
.dl-trust span > span,
.dl-trust-sub {
  display: block; font-size: .82rem; line-height: 1.5;
  color: var(--kc-text-tertiary); margin-top: 2px;
}

/* Control row — period pills, result count, sort/filter selects. */
.dl-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.dl-controls-count {
  font-size: .9rem; color: var(--kc-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dl-controls-count strong { color: var(--kc-text-primary); font-weight: 750; }
/* Push the selects to the trailing edge, whatever precedes them. */
.dl-controls select {
  margin-left: auto; font: inherit; font-size: .86rem;
  color: var(--kc-text-secondary); background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-control);
  padding: 8px 12px;
}
.dl-controls select + select { margin-left: 0; }

@media (max-width: 1180px) {
  .dl-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .dl-controls select { margin-left: 0; flex: 1 1 auto; }
}

/* ================================================== V4 SHARED GUIDE COMPONENTS
   Used by the buying guide first, but deliberately generic: any long-form page
   can take a callout, a data table, a numbered checklist or a table of
   contents without inheriting article spacing.
   ------------------------------------------------------------------------ */

/* Callout — coloured left rule plus a leading icon slot. The default is a plain
   white card; the modifiers tint it. */
.kc-callout {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default);
  border-left: 3px solid var(--kc-border-strong);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 15px 18px; margin: 18px 0;
}
.kc-callout-ic { flex: none; width: 20px; height: 20px; margin-top: 1px;
  color: var(--kc-text-tertiary); }
.kc-callout-body { min-width: 0; }
.kc-callout-title {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 5px; color: var(--kc-text-tertiary);
}
.kc-callout p { margin: 0; font-size: .88rem; line-height: 1.6;
  color: var(--kc-text-secondary); }
.kc-callout p + p { margin-top: 8px; }

.kc-callout--amber {
  background: var(--kc-deal-bg); border-color: var(--kc-deal-border);
  border-left-color: var(--kc-deal-fg);
}
.kc-callout--amber .kc-callout-ic,
.kc-callout--amber .kc-callout-title { color: var(--kc-deal-fg); }

.kc-callout--info {
  background: var(--kc-tint-1); border-color: var(--kc-border-default);
  border-left-color: var(--kc-stone-400);
}
.kc-callout--info .kc-callout-ic,
.kc-callout--info .kc-callout-title { color: var(--kc-text-secondary); }

.kc-callout--success {
  background: var(--kc-brand-xsoft); border-color: var(--kc-green-200);
  border-left-color: var(--kc-brand-deep);
}
.kc-callout--success .kc-callout-ic,
.kc-callout--success .kc-callout-title { color: var(--kc-brand-deep); }

/* Data table — bordered, rounded, white. No zebra: the hairline rows already
   separate them, and a striped ground fights the warm card surface. */
.kc-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  overflow: hidden; font-size: .88rem; margin: 18px 0;
}
.kc-table thead th {
  background: var(--kc-tint-1); color: var(--kc-text-tertiary);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; text-align: left;
  padding: 11px 16px; border-bottom: 1px solid var(--kc-border-default);
  white-space: nowrap;
}
.kc-table tbody td {
  padding: 12px 16px; border-bottom: 1px solid var(--kc-border-subtle);
  color: var(--kc-text-secondary); line-height: 1.5; vertical-align: top;
}
.kc-table tbody tr:last-child td { border-bottom: 0; }
.kc-table tbody th {
  padding: 12px 16px; border-bottom: 1px solid var(--kc-border-subtle);
  text-align: left; font-weight: 700; color: var(--kc-text-primary);
}
.kc-table tbody tr:last-child th { border-bottom: 0; }
/* Numeric cells use the existing .num utility (tabular + right-aligned). */
.kc-table th.num, .kc-table td.num { text-align: right; }
/* A wide table must scroll inside its own box, never the page. */
.kc-table-scroll { overflow-x: auto; margin: 18px 0; }
.kc-table-scroll .kc-table { margin: 0; min-width: 560px; }

/* Numbered checklist panel. */
.kc-steps {
  counter-reset: kc-step;
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-panel);
  padding: 6px 22px; margin: 18px 0;
}
.kc-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 16px 0;
  border-bottom: 1px solid var(--kc-border-subtle);
}
.kc-step:last-child { border-bottom: 0; }
.kc-step::before {
  counter-increment: kc-step; content: counter(kc-step);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--kc-brand-deep); color: var(--kc-text-on-dark);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.kc-step-title { display: block; font-weight: 750; letter-spacing: -.012em;
  color: var(--kc-text-primary); margin-bottom: 3px; }
.kc-step p { margin: 0; font-size: .87rem; line-height: 1.6;
  color: var(--kc-text-secondary); }

/* Table of contents — the .art-toc look, on its own selector so a guide can use
   it without inheriting article-page spacing. */
.gd-toc {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  padding: 16px 18px;
}
.gd-toc-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kc-text-tertiary); margin-bottom: 6px;
}
.gd-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: gd-toc; }
.gd-toc li + li { border-top: 1px solid var(--kc-border-subtle); }
.gd-toc a {
  display: flex; gap: 10px; padding: 8px 2px; font-size: .86rem; font-weight: 600;
  color: var(--kc-text-secondary);
  transition: color var(--dur-fast) var(--ease);
}
.gd-toc a::before {
  counter-increment: gd-toc; content: counter(gd-toc) ".";
  color: var(--kc-text-tertiary); font-variant-numeric: tabular-nums; flex: none;
}
.gd-toc a:hover, .gd-toc a.is-active { color: var(--kc-brand-deep); }

/* ========================================================= V4 COMPANY — TEAM
   4-up people grid. Circular initial avatar — never a fake portrait for a
   person whose photo we do not hold.
   ------------------------------------------------------------------------ */
.co-team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px;
}
.co-team-card {
  background: var(--kc-surface-card);
  border: 1px solid var(--kc-border-default); border-radius: var(--r-card);
  padding: 20px 18px;
}
.co-team-avatar {
  width: var(--avatar-lg); height: var(--avatar-lg); border-radius: 50%;
  background: var(--kc-brand-soft); color: var(--kc-brand-deep);
  display: grid; place-items: center; margin-bottom: 14px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase;
}
.co-team-name { display: block; font-size: .98rem; font-weight: 750;
  letter-spacing: -.015em; color: var(--kc-text-primary); }
.co-team-role {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--kc-brand-deep); margin-top: 2px;
}
.co-team-bio {
  margin: 10px 0 0; font-size: .85rem; line-height: 1.6;
  color: var(--kc-text-secondary);
}

@media (max-width: 1180px) {
  .co-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .co-topic-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .co-team-grid, .co-topic-grid { grid-template-columns: 1fr; }
  .co-faq-item { padding: 0 16px; }
  .co-cta-stack { padding: 22px; }
}


/* ================================================ retailer profile, comp match
   (2026-08-19)

   The unclaimed *state* keeps its amber voice: the status pill, the "not yet
   claimed" notice and every locked strip still read unverified-and-actionable.
   What changes is the *ask*. The approved comp puts the claim panel on the
   brand's own quiet green and gives its one primary button the deep green, so
   the action that fixes the unverified state is the strongest mark on the page
   rather than a second amber warning. Amber names the problem; green is the
   way out. Every rule below is scoped to the unclaimed retailer blocks. */

/* ---- hero band: the tracking figure leads, with no eyebrow above it ---- */
.dpr-banner-panel {
  gap: 2px; padding: 14px 18px; border-radius: var(--r-md);
  background: rgba(12, 42, 27, .9); border-color: rgba(255, 255, 255, .14);
  max-width: 252px;
}
.dpr-banner-line { font-size: .87rem; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.dpr-banner-line strong { font-size: 1.08rem; letter-spacing: -.015em; margin-right: 3px; }
.dpr-banner-line--quiet { color: rgba(255, 255, 255, .62); }

/* Beyond the cover photo the band is flat deep green; a fine mint grid gives
   that edge the same texture as the comp without competing with the panel. */
.dpr-banner--toppanel::before {
  content: ""; position: absolute; inset: 0 0 0 auto; z-index: 1;
  width: min(34%, 420px); pointer-events: none;
  background: radial-gradient(rgba(86, 217, 138, .3) 1px, transparent 1.2px)
              0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}

/* ---- inert actions read as paper, not as a grey slab ---- */
.btn.btn-locked {
  background: var(--kc-surface-card); color: var(--kc-text-tertiary);
  border-color: var(--kc-border-default);
}

/* ---- the claim panel on brand green ---- */
.rcl {
  background: var(--kc-brand-xsoft); border-color: #D8E9DE;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .82fr) minmax(0, 1.16fr);
  gap: 22px 30px;
}
/* One hairline separates the ask from what claiming gets you; the locked
   column already reads apart because its rows are carded. */
.rcl-gains { border-left: 1px solid #DCEBE2; padding-left: 30px; }

.rcl-glyph {
  width: 58px; height: 58px; border: 0;
  background: var(--kc-green-800); color: #fff;
}
.rcl-ask { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; }

/* On a green ground the warm claim ink reads as dirt — the panel takes the
   page's own neutral text colours. */
.rcl-ask p, .rcl-reassure li, .rcl-locked > p { color: var(--kc-text-secondary); }

/* The one deep-green action on the page. Every repeat claim CTA stays gold. */
.rcl-ask .btn-claim {
  background: var(--kc-green-800); border-color: var(--kc-green-800); color: #fff;
}
.rcl-ask .btn-claim:hover {
  background: #061A10; border-color: #061A10;
  box-shadow: 0 8px 22px rgba(12, 42, 27, .26);
}
.rcl-ask .btn-claim .ic { color: currentColor; }

.rcl-gains { display: grid; align-content: start; gap: 12px; }
.rcl-gains-title {
  margin: 0; font-size: .95rem; font-weight: 750; letter-spacing: -.015em;
  line-height: 1.3; color: var(--kc-text-primary);
}
.rcl-gains-list {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 11px;
  align-content: start;
}
.rcl-gains-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .87rem; line-height: 1.42; color: var(--kc-text-secondary);
}
.rcl-gains-list .ic { color: var(--accent); flex: none; margin-top: 2px; }

/* Locked rows sit as white cards on the green ground rather than grey on cream. */
.rcl-locked-list li {
  background: var(--kc-surface-card); border-color: var(--kc-border-default);
  color: var(--kc-text-primary);
}
.rcl-locked-list .ic { color: var(--kc-text-tertiary); opacity: 1; }

/* ---- preview: the dashboard being handed over, not another padlock ---- */
.rcl-window-bar {
  background: var(--kc-tint-1); border-bottom-color: var(--kc-border-default);
}
.rcl-window-bar i:nth-child(1) { background: var(--kc-claim-solid); }
.rcl-window-bar i:nth-child(2) { background: var(--accent-bright); }
.rcl-window-bar i:nth-child(3) { background: var(--accent); }
.rcl-window-body { padding: 13px 13px 15px; gap: 12px; }
.rcl-window-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 12px;
  align-items: center;
}
.rcl-window-lines { display: grid; gap: 6px; }
.rcl-window-lines i {
  display: block; height: 5px; border-radius: 3px; background: var(--kc-stone-200);
  opacity: .55;
}
.rcl-window-lines i:nth-child(1) { width: 88%; }
.rcl-window-lines i:nth-child(2) { width: 62%; }
.rcl-window-lines i:nth-child(3) { width: 76%; }
.rcl-window-lines i:nth-child(4) { width: 48%; }
.rcl-window-ring { width: 48px; height: 48px; color: var(--accent); flex: none; }
.rcl-window-bars { display: grid; gap: 6px; }
.rcl-window-bars i { display: block; height: 6px; border-radius: 3px; }
.rcl-window-bars i:nth-child(odd) { background: var(--accent); opacity: .85; }
.rcl-window-bars i:nth-child(even) { background: var(--kc-stone-200); opacity: .5; }
.rcl-window-bars i:nth-child(1) { width: 84%; }
.rcl-window-bars i:nth-child(2) { width: 58%; }
.rcl-window-bars i:nth-child(3) { width: 71%; }
.rcl-window-bars i:nth-child(4) { width: 42%; }

.rcl-note svg { color: var(--kc-text-tertiary); }
.rcl-note span { color: var(--kc-text-secondary); }

/* ---- the three tracking facts read as one row of three, so they are ruled ---- */
.dpr-about--facts-row .dpr-about-facts { padding: 20px 8px; }
.dpr-about--facts-row .dpr-fact { padding: 0 20px; }
.dpr-about--facts-row .dpr-fact + .dpr-fact {
  border-left: 1px solid var(--kc-border-subtle);
}

@media (max-width: 900px) {
  .dpr-about--facts-row .dpr-about-facts { padding: 18px 20px; }
  .dpr-about--facts-row .dpr-fact { padding: 0; }
  .dpr-about--facts-row .dpr-fact + .dpr-fact { border-left: 0; }
}
@media (max-width: 860px) {
  /* Stacked: a left rule on a full-width column reads as a stray bar. */
  .rcl-gains { border-left: 0; padding-left: 0; }
}

/* The base rules above re-declare grid-template-columns, so the panel's
   existing 1180 / 860 / 640 collapse has to be restated after them. */
@media (max-width: 1180px) {
  .rcl { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
@media (max-width: 860px) {
  .rcl { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
  .rcl-ask { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rcl-glyph { width: 52px; height: 52px; }
}

/* =============================================== homepage sections, comp match
   (2026-08-19)

   Three sections move from full-width heading-over-grid to a narrow copy
   column beside the evidence. The heading stops being a banner and becomes the
   first thing you read on a left rail, so the cards start at the top of the
   section instead of half a screen down. */

/* ---------------- 4 · real drops ---------------- */
.home-drops-split {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px;
  align-items: start;
}
.home-drops-intro .sec-sub { margin-top: 10px; max-width: 34ch; }
.home-drops-title { line-height: 1.14; }
/* The clause that carries the claim is the one that gets the brand colour. */
.home-drops-accent, .home-rules-accent { color: var(--kc-brand-deep); }

.home-drops-badge {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-md); padding: 13px 16px;
}
.home-drops-badge-glyph {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--kc-green-800); color: #fff;
}
.home-drops-badge-copy strong {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kc-text-primary);
}
.home-drops-badge-copy em {
  display: block; font-style: normal; font-size: .76rem; margin-top: 2px;
  color: var(--kc-text-tertiary);
}

.home-drops-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The footer rule runs edge to edge, so the card pads its own body instead. */
.home-drop-card { padding: 16px 16px 0; gap: 9px; }
.home-drop-media {
  height: 112px; display: grid; place-items: center; overflow: hidden;
}
/* Absolute caps on both axes. Percentage heights on a centred replaced element
   resolve against an auto area here, so the shot fell back to its intrinsic
   size and ran over the name beneath it. */
.home-drop-media img {
  max-width: 100%; max-height: 112px; width: auto; height: auto;
  object-fit: contain;
}
.home-drop-media .pc-ph { font-size: 1.6rem; color: var(--kc-text-tertiary); }
.home-drop-name { min-height: 2.8em; }
.home-drop-now { font-size: 1.24rem; }
.home-drop-at { padding-bottom: 14px; }
.home-drop-foot {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 11px 16px;
  border-top: 1px solid var(--kc-border-subtle); background: var(--kc-brand-xsoft);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: .78rem; font-weight: 650; color: var(--kc-text-secondary);
}
.home-drop-foot .ic { color: var(--kc-brand-deep); flex: none; }

/* ---------------- 5 · the rules ---------------- */
.home-rules-panel {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px;
  align-items: start;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-subtle);
  border-radius: var(--r-panel, 18px); padding: 30px 34px;
}
.home-rules-panel .sec-title { margin-bottom: 0; }
.home-rules-title { line-height: 1.14; }
.home-rules-intro .sec-sub { margin-top: 12px; max-width: 32ch; }

/* Ruled columns, not cards. Three identical bordered boxes inside a bordered
   panel would be a nested card — the hairline does the same job for nothing. */
.home-rules-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.home-rule { padding: 0 26px; }
.home-rule + .home-rule { border-left: 1px solid var(--kc-border-default); }
.home-rule:first-child { padding-left: 0; }
.home-rule:last-child { padding-right: 0; }
.home-rule .glyph { width: 46px; height: 46px; margin-bottom: 14px; }
.home-rule h3 {
  margin: 0 0 10px; font-size: 1rem; font-weight: 750; line-height: 1.3;
  letter-spacing: -.015em; color: var(--kc-text-primary);
}
.home-rule p {
  margin: 0; font-size: .85rem; line-height: 1.6; color: var(--kc-text-secondary);
}

/* ---------------- 6 · most compared ---------------- */
.home-trend-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Image and identity share the top row; price and spread run full width under
   both, so the money lines up across all five cards. */
.home-trend-card {
  grid-template-columns: 84px minmax(0, 1fr); gap: 12px 12px; padding: 16px;
  align-content: start;
}
.home-trend-body { gap: 5px; }
.home-trend-foot { grid-column: 1 / -1; }
.home-trend-prices { margin-top: 2px; }
.home-trend-low { font-size: 1.2rem; letter-spacing: -.025em; }
.home-trend-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 10px;
}
.home-trend-spread, .home-trend-verdict {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 5px 11px; font-size: .75rem; font-weight: 700; line-height: 1.3;
}
.home-trend-spread { background: var(--kc-brand-xsoft); color: var(--kc-brand-deep); }
.home-trend-verdict.is-wide { background: var(--kc-claim-bg-2); color: var(--kc-claim-ink); }
.home-trend-verdict.is-tight { background: var(--kc-tint-1); color: var(--kc-text-secondary); }
/* The retailer count is context for the spread, not a third chip. */
.home-trend-retailers { flex-basis: 100%; font-size: .76rem; }

/* The section link reads as a control here, beside a grid of cards. */
.home-trending .sec-link {
  border: 1px solid var(--kc-border-default); border-radius: 999px;
  padding: 10px 18px; background: var(--kc-surface-card);
  color: var(--kc-text-primary); font-weight: 700;
}
.home-trending .sec-link:hover { border-color: var(--kc-border-strong); }

@media (max-width: 1180px) {
  .home-drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .home-drops-split, .home-rules-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-drops-intro .sec-sub, .home-rules-intro .sec-sub { max-width: 56ch; }
  .home-drops-title br, .home-rules-title br, .home-rule h3 br { display: none; }
  .home-rules-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .home-rule { padding: 0; }
  .home-rule + .home-rule {
    border-left: 0; border-top: 1px solid var(--kc-border-default); padding-top: 22px;
  }
}
@media (max-width: 860px) {
  .home-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-drops-grid, .home-trend-grid { grid-template-columns: minmax(0, 1fr); }
  .home-rules-panel { padding: 24px 20px; }
}

/* --- homepage comp match, inspection fixes (2026-08-19) --- */

/* The rule reads glyph-then-title on one line, body beneath both, and the
   intro column is ruled off the same way the rules are ruled off each other. */
.home-rule {
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 14px; align-content: start; align-items: center;
  padding: 0 24px;
}
.home-rule .glyph { width: 52px; height: 52px; margin-bottom: 0; }
.home-rule h3 { margin: 0; }
.home-rule p { grid-column: 1 / -1; margin-top: 6px; }
.home-rule:first-child {
  border-left: 1px solid var(--kc-border-default); padding-left: 24px;
}

/* Each chip owns its row, so a two-word wrap never splits mid-phrase. */
.home-trend-meta {
  flex-direction: column; align-items: flex-start; gap: 6px;
}

@media (max-width: 980px) {
  .home-rule, .home-rule:first-child { padding: 0; border-left: 0; }
  .home-rule + .home-rule { padding-top: 22px; }
}

/* ---------------------------------------------- 10.5c plans layout (V5)
   One layout for the three pricing surfaces: /plans, /dealer/plans and
   /supplier/plans. Each page kept its own arrangement before this, so the same
   product was sold three different ways, and inside a single page the four
   cards put their price and their button at four different heights because
   each card was an independent flex column.

   Every rule here is additive and opt-in through a modifier class, so nothing
   else that uses .plan-card, .plans-hero or .trust-cards changes. */

/* --- centred hero ------------------------------------------------------- */
.plans-hero--center { text-align: center; }
.plans-hero--center h1,
.plans-hero--center .plans-sub {
  margin-left: auto; margin-right: auto;
}
.plans-hero--center h1 { max-width: 20ch; }
.plans-hero--center .seg-toggle { margin-left: auto; margin-right: auto; }

/* The independence rule, stated once under the headline instead of buried in
   the middle of the sub-paragraph where nobody read it. */
.plans-pledge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 16px auto 0; color: var(--accent-ink);
  font-size: .82rem; font-weight: 650; line-height: 1.4;
}
.plans-pledge .ic, .plans-pledge svg { flex: none; color: var(--accent); }

/* --- shared card baselines --------------------------------------------- */
/* Five named rows shared by every card in the row, so the price sits on one
   line, the button on another and the feature list on a third no matter how
   long the description or the founding-price note above them runs. Without
   this the buttons drifted over 200px apart on a 1440px viewport.

   Guarded on @supports: a browser without subgrid keeps the previous flex
   column, which is untidy but never broken. */
@supports (grid-template-rows: subgrid) {
  .plans-grid--aligned { grid-template-rows: auto auto 1fr auto auto; }
  .plans-grid--aligned > .plan-card {
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
  }
  /* The card's own children stop being flex items, so the margins that used to
     separate them are restated as row padding. */
  .plans-grid--aligned > .plan-card > * { min-width: 0; }
}

/* Room at the top of EVERY card in an aligned row, so the founding-price
   ribbon on one card cannot push that card's heading below its neighbours'. */
.plans-grid--aligned > .plan-card { padding-top: 30px; }

.plan-body { display: flex; flex-direction: column; gap: 10px; }
.plan-body > :last-child { margin-bottom: 0; }
.plan-action { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 4px; }
.plan-action .plan-tag { margin: 0; }
/* min-height on .plan-desc was reserving 3.4em in every card to fake alignment.
   The shared rows do that properly now, so the reservation only adds a hole. */
.plans-grid--aligned .plan-desc { min-height: 0; margin-bottom: 0; }

/* --- founding-price ribbon ---------------------------------------------- */
/* Replaces the solid tab that straddled the card's top border while the other
   three cards used a muted inline pill — two components for one job. */
.plan-ribbon {
  position: absolute; top: 0; left: 0;
  background: var(--accent); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; padding: 6px 15px;
  border-radius: var(--r-lg) 0 var(--r-lg) 0;
}

/* --- founding-price saving box ------------------------------------------ */
/* The one number on this page a buyer is actually comparing, so it stops being
   another grey paragraph. Reuses the existing deal/amber family. */
.plan-note--save {
  background: var(--kc-deal-bg); border: 1px solid var(--kc-deal-border);
  border-radius: var(--r-md); padding: 11px 13px; color: #6B5836;
}
.plan-note--save strong { color: #8A5D12; }

/* --- free-card artwork --------------------------------------------------- */
/* Sits at the end of the free card's list, where the paid cards have more
   bullets. Decorative only: aria-hidden in the markup, no meaning carried. */
/* margin-top:auto pushes it to the bottom of the body row. The free card has
   the shortest description, so aligning every CTA to one line leaves a gap
   under it; the drawing occupies that space instead of leaving a hole. */
.plan-art {
  display: flex; align-items: flex-end; justify-content: center;
  margin-top: auto; padding-top: 18px; color: var(--accent); opacity: .28;
}
.plan-art svg { width: 100%; max-width: 240px; height: auto; }
.plan-body { flex: 1; }

/* The name labels the price; it does not compete with it. */
.plans-grid--aligned .plan-name {
  font-size: .74rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-2);
}
.plans-grid--aligned .plan-head { margin-bottom: 10px; align-items: center; }
.plans-grid--aligned .plan-head .plan-tag { display: block; margin-top: 3px; }
.plans-grid--aligned .plan-price { margin: 0 0 12px; }
/* One button, one row height. The explanatory note sits in the body above. */
.plans-grid--aligned .plan-action { padding: 12px 0 0; }

/* --- the announced-but-unreleased tier ---------------------------------- */
/* KitchenIQ is not a step on the green ladder — it is not on sale at all.
   A distinct violet says that at a glance, before anyone reads "coming soon",
   and stops a buyer scanning four green cards and assuming all four are
   purchasable. Every green signal on the card is restated in violet; nothing
   is only-colour, the wording still carries the meaning on its own. */
:root {
  --kc-iq:      #5B4BC4;
  --kc-iq-ink:  #453697;
  --kc-iq-soft: #EFEDFB;
  --kc-iq-line: #D8D3F3;
}
.plan-card--iq .plan-popular-flag--inline {
  background: var(--kc-iq-soft); color: var(--kc-iq-ink);
}
.plan-card--iq .plan-feats-head { color: var(--kc-iq-ink); }
.plan-card--iq .plan-feats .ic  { color: var(--kc-iq); }
.plan-card--iq .plan-note--soon { color: var(--kc-iq-ink); }
.plan-card--iq .plan-action .btn {
  border-color: var(--kc-iq-line); color: var(--kc-iq-ink); background: #fff;
}
.plan-card--iq .plan-action .btn:hover {
  background: var(--kc-iq-soft); border-color: var(--kc-iq);
}

/* --- billing toggle ------------------------------------------------------ */
/* Filled, not a white chip on grey: on a pricing page the selected billing
   period changes every number below it, so the state has to be unmissable. */
.plans-hero .seg-toggle a.is-active {
  background: var(--accent); color: #fff;
}

/* --- trust band ---------------------------------------------------------- */


/* --- trust band ---------------------------------------------------------- */
/* One quiet band instead of four white cards competing with the plan cards
   directly above them. */
.trust-cards--band {
  background: var(--kc-tint-0); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 24px 26px; margin-top: 34px;
}
/* Feature-list icons vary per row (profile / enquiries / analytics / …) so a
   scanning eye can find one line again without reading all six. They repeat
   the words beside them and carry nothing on their own. */
.plan-feats .ic { flex: none; }
.trust-cards--band .trust-card {
  background: none; border: 0; padding: 0; box-shadow: none;
}
.trust-cards--band .trust-card:hover { box-shadow: none; transform: none; }

@media (max-width: 640px) {
  .plans-hero--center h1 { max-width: none; }
  .trust-cards--band { padding: 20px; }
  .plans-grid--aligned > .plan-card { padding-top: 26px; }
}

/* The plans trust band is green, not neutral grey. Declared here, after the
   base .trust-cards--band rule: the first attempt sat ABOVE that rule in the
   file, so equal specificity meant the grey below it kept winning. */
.trust-cards--band {
  background: var(--kc-brand-soft); border-color: #D6E8DC;
}
.trust-cards--band .trust-card h3 { color: var(--kc-brand-deep); }
.trust-cards--band .glyph { color: var(--accent); }

/* ==========================================================================
   Guide product comparison (.gp) — the live exact-model block inside a buying
   guide. Server-rendered; see templates/components/guide_products.html.
   Reuses the article surface language rather than introducing a new one.
   ========================================================================== */
.gp { margin: 38px 0 0; padding: 26px 26px 22px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.gp-head h2 { font-size: 1.22rem; margin: 0 0 8px; }
.gp-intro { margin: 0 0 10px; font-size: .95rem; color: var(--ink-2); }
.gp-method { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--ink-3);
  border-left: 2px solid var(--line); padding-left: 12px; }
.gp-group { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.gp-group-title { font-size: 1rem; margin: 0 0 3px; }
.gp-usecase { margin: 0 0 14px; font-size: .86rem; color: var(--ink-3); }
.gp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gp-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 190px; gap: 16px;
  align-items: start; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--kc-surface-card); }
.gp-media { display: flex; align-items: center; justify-content: center; width: 92px;
  height: 92px; border-radius: var(--r-sm, 8px); background: var(--kc-tint-1);
  overflow: hidden; }
.gp-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gp-ph, .gp-media-none::after { font-size: 1.5rem; font-weight: 700; color: var(--ink-3); }
.gp-media-none::after { content: attr(data-ph); }
.gp-brand { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
.gp-name { font-size: .98rem; line-height: 1.35; margin: 3px 0 4px; }
.gp-name a { text-decoration: none; color: inherit; }
.gp-name a:hover { text-decoration: underline; }
.gp-model { font-size: .8rem; color: var(--ink-2); }
.gp-specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 0; }
.gp-specs > div { min-width: 0; }
.gp-specs dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); }
.gp-specs dd { margin: 1px 0 0; font-size: .82rem; font-weight: 600; }
.gp-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-left: 16px; border-left: 1px solid var(--line-2); }
.gp-amount { font-size: 1.18rem; font-weight: 750; letter-spacing: -.01em; }
.gp-gst, .gp-range, .gp-checked { font-size: .74rem; color: var(--ink-3); }
.gp-retailers { font-size: .8rem; font-weight: 600; color: var(--kc-text-link); }
.gp-cta { margin-top: 9px; }
.gp-more { margin: 14px 0 0; font-size: .85rem; }
.gp-foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: .78rem; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 720px) {
  .gp { padding: 20px 18px 18px; }
  /* Three columns become one stack: the price panel's left rule would read as a
     stray vertical line once it is no longer beside anything. */
  .gp-row { grid-template-columns: 64px minmax(0, 1fr); }
  .gp-media { width: 64px; height: 64px; }
  .gp-price { grid-column: 1 / -1; padding-left: 0; padding-top: 12px;
    border-left: 0; border-top: 1px solid var(--line-2); }
  .gp-cta { align-self: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Customer sign-in — "Continue with Google" and the free-account pitch.
   One button style, used in the header panel and on /account/login, so the
   control reads identically wherever a customer meets it.

   Google's Sign-In branding guidelines govern the button: a light surface with
   a visible border, the unaltered "G" mark on the leading edge, the exact
   label "Continue with Google", and enough padding that the mark is never
   crowded or cropped. Roboto is the specified face; the site stack is used as
   the documented fallback rather than pulling a second web font onto every
   page for one control.
--------------------------------------------------------------------------- */
.gsi-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 10px;
  background: var(--paper); border: 1.5px solid var(--kc-field-border);
  color: var(--ink); font-size: 14px; font-weight: 600; font-family: inherit;
  line-height: 1.2; cursor: pointer; text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.gsi-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-1, none); }
.gsi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The mark keeps its own colours and its own box; never let the icon rule that
   forces currentColor reach it. */
.gsi-btn-icon { display: inline-flex; flex: 0 0 auto; }
.ic-google { display: block; }
.gsi-btn-label { white-space: nowrap; }

.gsi-pitch-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em;
  margin: 0 0 8px; color: var(--ink); }
.gsi-pitch-body { font-size: .95rem; line-height: 1.6; color: var(--kc-text-secondary);
  margin: 0 0 6px; }
.gsi-pitch-note { font-size: .82rem; font-weight: 600; color: var(--kc-text-tertiary);
  margin: 0; }

/* /account/login */
.signin-card {
  max-width: 460px; margin: 8px auto 48px; padding: 28px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-panel); box-shadow: var(--shadow-1, none);
}
.signin-actions { margin: 22px 0 14px; }
.signin-error {
  margin: 18px 0 0; padding: 11px 13px; border-radius: 10px;
  background: var(--kc-tint-0); border: 1px solid var(--line);
  font-size: .88rem; line-height: 1.55; color: var(--ink);
}
.signin-fineprint, .signin-alt {
  font-size: .8rem; line-height: 1.6; color: var(--kc-text-tertiary); margin: 0 0 10px;
}
.signin-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); }

/* /account */
.account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.account-avatar { border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.account-signout { margin-top: 28px; }
.hdr-signout-form { margin: 0; }
.hdr-signout-form .hdr-signin-altbtn { width: 100%; }

/* ---------------------------------------------- homepage: equipment-first (2026-08-21)
   The page now leads with commercial equipment and keeps smallwares to one
   labelled band near the foot. These rules cover the parts that band, the
   brand strip and the partner CTA introduced with that reorder. Everything
   reuses the existing token family — no new colours. */

/* Saving in dollars. The percentage tag answers "how much off"; this answers
   "how much do I keep", which is the number that carries an equipment drop. */
.home-drop-save {
  align-self: flex-start; display: inline-flex; align-items: center;
  border-radius: 999px; padding: 4px 11px;
  background: var(--kc-brand-xsoft); color: var(--kc-brand-deep);
  font-size: .76rem; font-weight: 750; letter-spacing: -.005em;
}
.home-drops-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-weight: 700;
}

/* --- equipment brands strip -------------------------------------------- */
.home-brand-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.home-brand-chip {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-md);
}
.home-brand-chip:hover { border-color: var(--kc-border-strong); box-shadow: var(--shadow-1); }
.home-brand-name {
  font-weight: 750; font-size: .9rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-brand-meta { font-size: .76rem; color: var(--kc-text-tertiary); }
@media (max-width: 1180px) { .home-brand-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .home-brand-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .home-brand-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- smallwares band ---------------------------------------------------- */
/* Visibly quieter than the equipment grid above it: a tinted panel, smaller
   tiles and no product imagery. The hierarchy is the message. */
.home-smallwares-band {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px;
  align-items: start;
  background: var(--kc-tint-1); border: 1px solid var(--kc-border-subtle);
  border-radius: var(--r-panel, 18px); padding: 30px 34px;
}
.home-smallwares-band .sec-title { margin-bottom: 0; }
.home-smallwares-title { line-height: 1.15; }
.home-smallwares-band .sec-sub { margin-top: 12px; max-width: 34ch; }
.home-smallwares-band .sec-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700;
}
.home-smallwares-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.home-smallwares-tile {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 12px; align-items: center;
  padding: 13px 15px; text-decoration: none; color: inherit;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-md);
}
.home-smallwares-tile:hover { border-color: var(--kc-border-strong); }
.home-smallwares-glyph {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kc-tint-1); color: var(--kc-text-secondary);
}
.home-smallwares-name {
  font-weight: 700; font-size: .87rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-smallwares-meta { font-size: .75rem; color: var(--kc-text-tertiary); }

/* --- retailer / supplier CTA ------------------------------------------- */
.home-partner-band {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px;
  align-items: center;
  background: var(--kc-surface-card); border: 1px solid var(--kc-border-default);
  border-radius: var(--r-panel, 18px); padding: 28px 32px;
}
.home-partner-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--kc-brand-deep);
}
.home-partner-band h2 {
  margin: 10px 0 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
}
.home-partner-band p {
  margin: 0; max-width: 60ch; font-size: .9rem; line-height: 1.6;
  color: var(--kc-text-secondary);
}
.home-partner-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .home-smallwares-band { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-smallwares-band .sec-sub { max-width: 56ch; }
  .home-partner-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .home-smallwares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-smallwares-band { padding: 24px 20px; }
  .home-partner-band { padding: 24px 20px; }
  .home-partner-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------------------- */
/* Shared scroll affordance                                                   */
/*                                                                            */
/* Every one of these strips hides its scrollbar, so nothing told a touch user */
/* that more content sits off the right edge — the A-Z filter cut off around  */
/* "G", the plans table hid 3 of 5 columns. This is the same mask-image fade   */
/* .hdr-nav-strip already uses; reusing it keeps one technique, not two.       */
/* Scoped to widths where these actually overflow, so desktop is untouched.    */
/* ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .mobile-chips,
  .az-filter-track,
  .brand-cats,
  .kc-prose-scroll,
  .plans-table-wrap,
  .compare-table-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}


/* ------------------------------------------------------------------------- */
/* /compare — genuine side-by-side comparison table                          */
/*                                                                            */
/* Products as columns (max 3, saved-compare.js COMPARE_CAP), attributes as   */
/* rows. .compare-table-wrap is a CONTAINED horizontal scroller — the page    */
/* itself must never scroll sideways at any width (DESIGN.md 360px rule) —    */
/* with the label column pinned via position:sticky so a buyer scrolled to    */
/* the third product column can still read which row they are looking at.    */
/* ------------------------------------------------------------------------- */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--kc-border-default);
  border-radius: var(--r-lg);
  background: var(--kc-surface-card);
}
.compare-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max(100%, 600px);
  font-size: .88rem;
}
.compare-table th,
.compare-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--kc-border-default);
  text-align: left;
  vertical-align: top;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td { background: var(--kc-tint-0); }
/* Sticky label column — both the header corner cell and each row's <th>. A
   higher z-index on the corner cell keeps it above the sticky column body
   cells when both are scrolled under it at once. */
.compare-th-label {
  position: sticky; left: 0; z-index: 1;
  background: var(--kc-tint-0);
  font-weight: 700; color: var(--kc-text-secondary);
  min-width: 132px; max-width: 168px;
  box-shadow: 1px 0 0 var(--kc-border-default);
}
thead .compare-th-label { z-index: 2; }
.compare-th-product {
  min-width: 168px; background: var(--kc-surface-card);
}
.compare-th-media {
  width: 68px; height: 68px; border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 8px;
  display: grid; place-items: center; background: var(--kc-tint-0);
}
.compare-th-media img { width: 100%; height: 100%; object-fit: contain; }
.compare-th-media .pc-ph { font-size: 1.3rem; font-weight: 700; color: var(--kc-text-tertiary); }
.compare-th-name {
  display: block; font-weight: 750; color: var(--kc-text-primary);
  line-height: 1.3; margin-bottom: 2px;
}
.compare-th-brand { display: block; font-size: .78rem; color: var(--kc-text-tertiary); margin-bottom: 10px; }
.compare-th-remove {
  font-size: .76rem; font-weight: 700; color: var(--kc-text-secondary);
  background: none; border: 1px solid var(--kc-border-default); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; min-height: 30px;
}
.compare-th-remove:hover { border-color: var(--kc-border-strong); color: var(--kc-text-primary); }
.compare-td-missing { color: var(--kc-text-tertiary); font-style: italic; }

@media (max-width: 640px) {
  .compare-th-label { min-width: 108px; max-width: 108px; font-size: .82rem; }
  .compare-th-product { min-width: 132px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
}


/* ------------------------------------------------------------------------- */
/* Mobile form-control floor                                                  */
/*                                                                            */
/* iOS Safari force-zooms the viewport whenever a focused control computes     */
/* below 16px, and does not reliably zoom back out. This is a control-only     */
/* floor at mobile widths: body copy and labels keep their designed steps.     */
/* Documented in DESIGN.md under "Mobile form-control floor".                  */
/* ------------------------------------------------------------------------- */
/* !important is deliberate here and is the only such use in this file. This is
   an accessibility floor, not a style preference: dozens of component rules set
   a smaller control size with class-level specificity, and any one of them
   silently reintroduces the iOS zoom bug. A floor that can be overridden by
   accident is not a floor. */
@media (max-width: 980px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select,
  textarea { font-size: 16px !important; }
}

/* This button carries a long fixed label ("Enquire via KitchenCompare") and
   appears in two different containers, so it is fixed on the button itself
   rather than per-container. .btn sets white-space:nowrap globally. */
@media (max-width: 860px) {
  .btn-locked-action { white-space: normal; min-width: 0; }
}

/* Trust copy on the product page must clear AA as text, not just as a badge. */
.offer-condition,
.callout-amber, .callout-amber p, .callout-amber strong { color: var(--kc-deal-fg-text); }


/* ------------------------------------------------------------------------- */
/* PDP mobile action bar                                                      */
/*                                                                            */
/* .buybox goes position:static below 1180px, so the price and CTA scroll away */
/* after roughly 1.5 screens on a 13-screen page. This bar keeps them reachable.*/
/* z-index ladder: .pd-tab-rail 20 < this 40 < header 90 < drawers 120 < ac 130 */
/* ------------------------------------------------------------------------- */
.pdp-actionbar { display: none; }
@media (max-width: 1180px) {
  .pdp-actionbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--kc-surface-card); border-top: 1px solid var(--kc-border-default);
    box-shadow: 0 -6px 20px -12px rgba(22, 30, 26, .35);
    transform: translateY(110%); transition: transform var(--dur-base) var(--ease);
  }
  .pdp-actionbar.is-visible { transform: none; }
  .pdp-actionbar-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .pdp-actionbar-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--kc-text-tertiary); }
  .pdp-actionbar-value { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; }
  .pdp-actionbar-cta { margin-left: auto; flex: none; min-height: 44px;
    display: inline-flex; align-items: center; }
  /* the bar covers the last of the page; give the footer room to clear it */
  body:has(.pdp-actionbar) { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-actionbar { transition: none; }
}

/* ==========================================================================
   MOTION — the vocabulary                                        (2026-08-23)
   ==========================================================================
   One authored moment, and a small set of states everything else reuses.
   Tokens live in :root. Nothing here invents a duration or a curve.

   WHAT IS DELIBERATELY ABSENT: there is no scroll-reveal utility, and pages
   must not add one. An identical fade-and-rise on every section is not a
   motion system, it is the same effect repeated until it means nothing, and
   on a page a buyer is scanning for a price it delays the answer. Sections
   arrive because the page arrived.
   ========================================================================== */

/* --- The focal moment ----------------------------------------------------
   The offer list resolving into rank order.

   This is the only place the site's whole claim — that these prices were
   independently gathered and ranked — is made visible, so it is the only
   place that gets an authored entrance. It runs ONCE, on first paint of a
   product page. It is not a scroll effect and it does not re-run.

   It animates the ROW, never the price. DESIGN.md forbids animating prices
   and it is right to: a number that moves reads as a number being sold to
   you. The figures are already at their final value on the first frame; what
   settles is each row's position in the ranking.

   The default state is VISIBLE. The entrance only exists once JS marks the
   list ready, so a failed script leaves a complete, readable comparison. */
.kc-rank-settle > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .kc-rank-settle[data-settle="ready"] > * {
    opacity: 0;
    transform: translateY(6px);
    animation: kc-rank-settle var(--dur-focal) var(--ease) forwards;
  }
  /* Stagger the first six only. Past that the eye has already read the
     ranking, and a long list would still be arriving after the decision. */
  .kc-rank-settle[data-settle="ready"] > *:nth-child(1) { animation-delay: 0ms; }
  .kc-rank-settle[data-settle="ready"] > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
  .kc-rank-settle[data-settle="ready"] > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
  .kc-rank-settle[data-settle="ready"] > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }
  .kc-rank-settle[data-settle="ready"] > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 4); }
  .kc-rank-settle[data-settle="ready"] > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 5); }
  /* Everything past the sixth arrives together, on the cap. */
  .kc-rank-settle[data-settle="ready"] > *:nth-child(n+7) { animation-delay: var(--stagger-cap); }
}

@keyframes kc-rank-settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* On a phone the list is the page, and a stagger reads as the page still
   loading rather than as a ranking resolving. Shorter travel, no stagger. */
@media (max-width: 640px) {
  .kc-rank-settle[data-settle="ready"] > * {
    transform: translateY(4px);
    animation-duration: var(--dur-view);
    animation-delay: 0ms !important;
  }
}

/* --- Feedback ------------------------------------------------------------
   Contact, not decoration. Never scales a control that carries text —
   DESIGN.md forbids it, and type reflowing under the cursor is unreadable. */
.kc-press { transition: transform var(--dur-tap) var(--ease); }
.kc-press:active { transform: translateY(1px); }
@media (hover: none) { .kc-press:active { transform: none; } }

/* Elevation on hover belongs to things that genuinely lift off the page:
   a whole card that is a link. Hairline borders stay put. */
.kc-lift {
  transition: box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .kc-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.kc-lift:focus-visible { transform: translateY(-2px); }

/* --- Surfaces ------------------------------------------------------------
   Drawers, sheets and filter panels. 240ms in, faster out: a surface you
   asked to close should already be leaving. */
.kc-surface {
  transition: transform var(--dur-slow) var(--ease-move),
              opacity var(--dur-slow) var(--ease-move);
}
.kc-surface[hidden], .kc-surface[aria-hidden="true"] {
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-in);
}

/* --- Disclosure ----------------------------------------------------------
   Height is not animated. grid-template-rows is, which the browser can
   interpolate without reflowing the text inside on every frame. */
.kc-disclose { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-move); }
.kc-disclose > * { overflow: hidden; }
.kc-disclose[data-open="true"] { grid-template-rows: 1fr; }


/* ---- Motion: browse & discovery ------------------------------------------
   Merged from _motion-browse.partial.css, which was a staging file so three
   parallel passes could not collide in this stylesheet. */

/* ==========================================================================
   Motion pass — browse & discovery templates                    (2026-08-23)
   Public UI Engineer / impeccable animate.
   Scope: home.html, departments.html, department.html, category.html,
   brands.html, brand.html, combi_ovens.html.

   Staging file only — not linked from base.html. Merged into site.css by
   public-website-manager. Uses only the incumbent token family already in
   site.css :root (--dur-tap/fast/base/slow/view/focal, --ease/--ease-in/
   --ease-move). No literal duration, no raw cubic-bezier, no new tokens.

   Everything below EXTENDS a hover/active state site.css already declares
   for these cards — it adds the missing `transition`, it does not invent a
   new effect or change the resting/hover values a card already has.
   ========================================================================== */

/* --- Home: equipment-drop cards, trending-comparison cards, brand strip and
   smallwares tiles ----------------------------------------------------------
   Each is "a whole card that is a link" — the same job .kc-lift exists for —
   but site.css gives each of these its own hover amount (drop cards move
   1px, trend cards only gain a shadow, brand/smallwares tiles only recolour
   a border). Applying .kc-lift's fixed -2px/shadow-2 would silently
   overwrite those per-card values, so each keeps its own hover and only
   gains the timing it was missing. Colour and shadow are excluded from the
   "transform/opacity only" repeat rule below because they are one-off state
   changes on a discrete hover/focus, not a repeating effect. */
.home-drop-card,
.home-trend-card,
.home-brand-chip,
.home-smallwares-tile {
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* --- Home: biggest tracked drop card in the hero ---------------------------
   The one hero-media card with no hover state at all yet. It is a whole
   card that is a link — .kc-lift's exact stated case — added in
   home.html rather than duplicated here. */

/* --- Brands directory: A–Z jump bar (brands.html; shared with retailers.html,
   left as-is there) ----------------------------------------------------------
   A genuine "filter control confirming it took": the active letter and the
   hover state on a reachable one both recolour instantly today. Colour-only,
   the field/chip common case --dur-fast is authored for. */
.az-filter-link {
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .home-drop-card,
  .home-trend-card,
  .home-brand-chip,
  .home-smallwares-tile,
  .az-filter-link {
    transition: none;
  }
}


/* ---- Motion: comparison core ---------------------------------------------
   Merged from _motion-compare.partial.css, which was a staging file so three
   parallel passes could not collide in this stylesheet. */

/* ==========================================================================
   MOTION — comparison-core supporting states          (public-ui-engineer)
   ==========================================================================
   Staging file only — not linked from any template. Merged into site.css by
   public-website-manager. Every rule here is feedback or continuity on
   product.html / search.html / compare.html / saved.html / price_drops.html;
   the one authored entrance (the offer list resolving into rank order) is
   already built in site.css/site.js — this file does not repeat it.

   Tokens only: --dur-tap/--dur-fast/--dur-base/--dur-slow/--dur-view/
   --dur-focal and --ease/--ease-in/--ease-move, all declared in :root in
   site.css. No literal duration or curve is written below.

   Utility classes referenced here (.kc-press, .kc-lift, .kc-surface,
   .kc-disclose, .kc-rank-settle) are already defined in site.css — this
   file only supplies the states that vocabulary doesn't already cover.
   ========================================================================== */

/* --- Product gallery: main-image swap -------------------------------------
   Feedback that the frame actually changed, not a slideshow effect. Wired in
   gallery.js: .gal-img-swap is added the instant a new src is set and
   removed on that image's load event, so a slow network dips the frame
   rather than flashing a half-loaded image in at full opacity. Opacity only,
   so nothing here reflows the counter or the thumbnail strip. */
#gallery-img { transition: opacity var(--dur-base) var(--ease); }
#gallery-img.gal-img-swap { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  #gallery-img { transition: none; }
}

/* --- Saved list: a card that leaves visibly goes somewhere -----------------
   Wired in saved-compare.js (removeCardIfShown): unsaving a product shown on
   /saved fades and lifts the card out before it's removed from the DOM,
   instead of the row just vanishing under the cursor. transform + opacity
   only; reduced-motion is also checked in JS so the card is removed
   immediately with no class added at all. */
.kc-card-leave {
  transition: opacity var(--dur-slow) var(--ease-in),
              transform var(--dur-slow) var(--ease-in);
  opacity: 0;
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .kc-card-leave { transition: none; opacity: 1; transform: none; }
}

/* --- Saved / Compare: content arriving after a loading state ---------------
   Wired in saved-compare.js (hydrate/showGrid): both /saved and /compare
   render a "Loading…" state while GET /api/products?ids=… resolves, and this
   is the hand-off once real content replaces it. Also runs when /compare
   rebuilds its whole table after an add/remove, since that IS a genuine
   content replacement, not a re-run of a settled page. One fade, not
   staggered — a list of rows fading in one by one is the rank-settle
   moment's vocabulary and that moment belongs to the offer list alone. */
.kc-hydrate-in {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-view) var(--ease),
              transform var(--dur-view) var(--ease);
}
.kc-hydrate-in.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Breakpoint tuning
   ========================================================================== */

/* Tablet: nothing above needs a different value at this width — the offer
   list's own tone-down lives in site.css and only changes at <=640px, which
   this file does not touch. Verified by live capture at 768px. */

/* Phone: hover-only elevation is already scoped by .kc-lift itself
   (`@media (hover: hover) and (pointer: fine)` in site.css), so touch
   devices never get a stuck lift state — nothing to add here. Card-leave and
   hydrate-in keep their durations at every width; they're single, contained
   moves, not the list-wide settle that gets shortened on phones. */


/* ---- Motion: trust, editorial & utility ----------------------------------
   Merged from _motion-trust.partial.css, which was a staging file so three
   parallel passes could not collide in this stylesheet. */

/* ==========================================================================
   MOTION — trust, editorial & utility pages                    (2026-08-23)
   ==========================================================================
   Staging file for public-ui-engineer's animate pass. NOT linked from
   base.html — the public-website-manager merges this into site.css.

   Pages covered: retailers.html, retailer.html, brand_dealers.html,
   directory.html, retailer_articles.html, retailer_article.html, faq.html,
   plans.html, finance.html, checkout.html, blog/article.html (TOC only).

   Tokens are the incumbent set already declared in site.css :root —
   --dur-tap/fast/base/slow/view/focal and --ease/--ease-in/--ease-move.
   Nothing here invents a duration or a curve. Every repeating effect
   animates transform/opacity only; the two exceptions are grid-template-rows
   (the site's documented disclosure technique) and the finance quiz bar,
   which is corrected below to transform instead of width.

   Deliberately absent: no scroll-reveal, anywhere. retailer_article.html and
   blog/article.html are long-form reads — this file does not touch their
   prose. FAQ answers below animate OPEN only; native <details> already
   closes instantly, and instant is the fastest possible "already leaving".
   No price is animated — plan-amount, checkout totals, fin-scenario-monthly
   and the calculator/quiz outputs are all left alone.
   ========================================================================== */

/* --- Correction: finance quiz progress bar --------------------------------
   Was animating the width property, which drives layout on every frame.
   Track stays full width; the fill scales from the left edge instead. finance.html sets
   --p as a 0–1 fraction (style="--p:.25"); finance.js updates it via
   style.setProperty. aria-valuenow is untouched — it still reports progress
   to a screen reader independently of how the fill is painted. */
.fin-quiz-progress span {
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}

/* --- FAQ disclosure (faq.html) --------------------------------------------
   .kc-disclose is the shared "expand without animating height" tool. Native
   <details>/<summary> stays the accessible, no-JS baseline: a browser with
   no JS shows/hides the answer instantly via the UA stylesheet, and the
   fallback rule below (":not([data-open])") reveals it correctly even then.
   Once JS mirrors the native `toggle` event onto data-open, the same open
   moves from an instant cut to a settle. Close stays native-instant — see
   the file banner above. */
.co-faq-item[open] .kc-disclose:not([data-open]) { grid-template-rows: 1fr; }
.co-faq-item { transition: background-color var(--dur-fast) var(--ease); }
.co-faq-item summary .ic { transition: transform var(--dur-fast) var(--ease); }
.co-faq-item[open] summary .ic { transform: rotate(180deg); }

/* Finance page FAQ (finance.html) uses a second, simpler <details> block
   with no data-open wrapper — chevron rotation only, matching the pattern
   already used for .mnav-group, .drg-faq and details.fgroup elsewhere. */
.fin-faq-item summary .ic { transition: transform var(--dur-fast) var(--ease); }
.fin-faq-item[open] summary .ic { transform: rotate(180deg); }

/* --- Directory / retailer-directory search feedback ------------------------
   [data-ajax-page-filter][aria-busy="true"] already dims the results list
   while an ajax filter request is in flight (retailers.html, directory.html)
   — it just changed opacity instantly. Extending the existing state, not
   inventing a new one. */
[data-ajax-page-filter] { transition: opacity var(--dur-fast) var(--ease); }

/* Directory type tabs (directory.html) and retailer-directory search field
   (retailers.html) — same segmented-control and search-pill families as
   .pill and .enquiry-form, extended to match. */
.dir-tab { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .dir-tab:not(.is-active):hover { color: var(--kc-text-primary); }
}
.dir-row { transition: background-color var(--dur-fast) var(--ease); }
.dh-search, .dir-search, .co-search-pill { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.dh-search:focus-within, .dir-search:focus-within {
  border-color: var(--kc-brand-deep); box-shadow: var(--shadow-focus);
}
.co-search-pill:focus-within { border-color: rgba(255,255,255,.4); }
.co-page-hero--light .co-search-pill:focus-within { border-color: var(--kc-brand-deep); }

/* --- Segmented toggles (plans.html, directory.html cta, checkout.html) ----
   Audience / billing-period pickers are full-page-navigation links, so the
   is-active swap itself happens on load — but hovering the inactive segment
   before you click had no feedback at all. Extending, not inventing. */
.seg-toggle a, .seg-toggle button, .checkout-billing a {
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .seg-toggle a:not(.is-active):hover, .seg-toggle button:not(.is-active):hover { color: var(--kc-text-primary); }
  .checkout-billing a:not(.is-selected):hover { color: var(--kc-text-primary); }
}

/* --- Checkout form fields (checkout.html) ----------------------------------
   Focus already sets border-color + box-shadow; only the box-shadow snapped
   in without a transition. */
.checkout-field input { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

/* Shared enquiry-form fields (finance.html quote form, brand_dealers.html
   location search shares .fd-search, product/dealer enquiry modals) already
   transition border-color on focus; box-shadow snapped in instantly. */
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* --- Brand dealer finder — list/map toggle (brand_dealers.html) ------------
   Same segmented-control pattern as .dir-tab / .seg-toggle, no transition
   previously and no hover cue on the inactive view. */
.fd-view-btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .fd-view-btn:not(.is-active):hover { color: var(--ink); }
}

/* --- Finance page controls (finance.html) ----------------------------------
   BOH/FOH split tabs and calculator frequency buttons swap background on
   click with no transition; the sticky contents list swaps color on
   scroll-spy with no transition either (continuity while reading, not
   decoration — the content itself never moves). */
.fin-split-tab { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.fin-calc-freq-btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.fin-toc-link { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }

/* --- Retailer profile (retailer.html) --------------------------------------
   Directions link changes color on hover with no transition. */
.dpr-directions { transition: color var(--dur-fast) var(--ease); }

/* --- Blog article contents list (blog/article.html) ------------------------
   The scroll-spy already toggles .is-active as headings pass; the color
   change itself just cut instead of settling — continuity while reading,
   never a reveal of the prose itself. */
.art-toc a, .art-toc-mobile a { transition: color var(--dur-fast) var(--ease); }

/* ---- Cross-document continuity -------------------------------------------
   Navigating from a card to the product it names is the most common move on
   this site, and it currently cuts. Under the amended Motion ruling that is a
   change the buyer caused, so it is owed continuity.

   Cross-document view transitions are a progressive enhancement in the truest
   sense: browsers without support ignore the at-rule entirely and navigate
   exactly as they do today. Nothing is polyfilled and no script is involved.

   Kept deliberately quiet — a short crossfade, not a slide or a zoom. The
   point is that the two pages are related, not that a transition happened.
   The header and footer are named so they are treated as the SAME element
   across the navigation and hold still while the content changes; without
   that the sticky header crossfades against itself and appears to flicker. */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: var(--dur-view); }
::view-transition-old(root),
::view-transition-new(root) {
  animation-timing-function: var(--ease);
}

.hdr    { view-transition-name: kc-header; }
.ftr { view-transition-name: kc-footer; }

/* A named element that persists must not also crossfade. */
::view-transition-group(kc-header),
::view-transition-group(kc-footer) { animation-duration: var(--dur-fast); }

@media (prefers-reduced-motion: reduce) {
  /* Turn the transition off rather than speed it up: a cross-document
     crossfade has no state to preserve, so there is nothing to keep. */
  @view-transition { navigation: none; }
}


/* ---- Motion: price chart, range change -----------------------------------
   Merged from _motion-chart.partial.css, which was a staging file so three
   parallel passes could not collide in this stylesheet. */

/* ==========================================================================
   Motion — price-history chart range rescale (staging file, not linked).
   Merge into site.css. DESIGN.md "Motion", amended 2026-08-23: a range
   switch (30D/90D/12M) is a change the buyer caused, so the chart re-scales
   into the new period instead of a hard SVG swap.

   .pc-scale wraps the gridlines, price labels, both series paths, the dots
   and the drop badge. chart.js always writes their true, final values for
   the new range before touching this group — the only thing that eases is
   the group's own transform, from "looks like the previous range" back to
   identity. No price, percentage or axis value is ever mid-flight; only
   the frame around them moves. This also covers the "dots settling to
   their new positions" case for free, since the dots live inside the same
   group and share its transform.

   First paint never animates: a freshly-built .pc-scale group has no prior
   rendered transform for the browser to transition from, so nothing here
   needs to special-case initial load — chart.js only starts the ease on a
   range change, never on first mount.

   Tokens only: --dur-view / --dur-fast / --ease / --ease-move, all from
   site.css :root. Reduced motion is handled globally there too (site.css
   collapses every transition-duration to 1ms under
   prefers-reduced-motion: reduce) — no separate media query needed here. */

.pc-scale {
  transition: transform var(--dur-view) var(--ease-move);
}

/* Interruption guard: chart.js toggles this to jump the group to a start
   position with no visible transition (a FLIP-style snap), then removes it
   on the next frame so the eased release to identity plays cleanly. It is
   also how a second range press mid-animation resolves — chart.js forces
   the group back to rest through this class before starting the next
   fetch, so the chart can never be left half-transitioned. */
.pc-scale.pc-no-anim {
  transition: none !important;
}

/* Date-range ticks sit outside .pc-scale — the plot box width is fixed
   across 30D/90D/12M, so their x position never moves. Only their text
   changes on a range switch, so they crossfade instead of travelling. */
.pc-ticks {
  transition: opacity var(--dur-fast) var(--ease);
}
.pc-ticks.pc-ticks-swap {
  opacity: 0;
}


/* ---- Motion: comparison table, column change -----------------------------
   Merged from _motion-compare2.partial.css, which was a staging file so three
   parallel passes could not collide in this stylesheet. */

/* ==========================================================================
   MOTION — comparison table column reflow          (public-ui-engineer)
   ==========================================================================
   Staging file only — not linked from any template. Merged into site.css by
   public-website-manager. Authorised by DESIGN.md's amended (2026-08-23)
   Motion ruling: "motion may explain a change the buyer caused; it may never
   announce a value." Removing a product from /compare currently rebuilds the
   whole table with no account of which column left or that the rest closed
   up — this is exactly the case the amendment now covers.

   Wired in saved-compare.js (compareFlipBegin / compareFlipPlay /
   spawnLeaveGhosts, called from refreshCompareTable). Same FLIP shape as
   site.js's search-results reflow (reflowCapture/reflowPlay), applied per
   *cell* (data-row + data-col) rather than per card, because a compare
   column is a header cell plus one cell per attribute row, not one DOM node.

   Extends the compare-page motion already in site.css rather than
   duplicating it: .kc-hydrate-in (whole-grid fade) still runs the very first
   time /compare hydrates, since there's no "before" table to FLIP from; it
   is deliberately suppressed (opts.skipHydrateFade) for every add/remove
   rebuild after that, because a whole-grid fade on top of a per-column FLIP
   would be two animations fighting over the same cells. .kc-card-leave and
   .kc-lift/.kc-press are untouched — they cover /saved's single-card removal
   and press/lift feedback, a different surface from the table below.

   No price ever animates: a surviving cell only ever gets an inline
   `transform` from saved-compare.js (position) — this file never gives a
   surviving cell an opacity or content transition. The classes below apply
   only to a whole column arriving or leaving, because the buyer added or
   removed a *product*, not because a figure changed value.

   Tokens only: --dur-view and --ease/--ease-in/--ease-move, all declared in
   :root in site.css. No literal duration or curve is written below.
   ========================================================================== */

/* --- Departing column: floating leave-ghosts --------------------------------
   spawnLeaveGhosts clones the removed column's cells at their exact captured
   position and appends them to <body> (escaping .compare-table-wrap's
   overflow-x clipping) while the real table underneath already reflects the
   removal. transform + opacity only, and .is-out is added a frame later so
   the transition actually runs. Reduced motion is also checked in JS before
   any ghost is ever created — this media block is a defensive backstop, the
   same shape .kc-card-leave already uses. */
.kc-compare-col-leave {
  transition: opacity var(--dur-view) var(--ease-in),
              transform var(--dur-view) var(--ease-in);
  opacity: 1;
  transform: none;
}
.kc-compare-col-leave.is-out {
  opacity: 0;
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .kc-compare-col-leave { transition: none; opacity: 0; }
}

/* --- Arriving column: fades and rises into its resolved position ------------
   compareFlipPlay adds this to every cell of a newly added column at once
   (not staggered row by row — a staggered entrance is the rank-settle
   moment's vocabulary, spent once on the product page). Every cell is at its
   true text value on the first frame; only opacity/transform of the cell as
   a whole move. Same shape as .kc-hydrate-in, scoped to one column instead
   of the whole grid. */
.kc-compare-col-enter {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-view) var(--ease),
              transform var(--dur-view) var(--ease);
}
.kc-compare-col-enter.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kc-compare-col-enter { transition: none; opacity: 1; transform: none; }
}