/* ============================================================
   PLAINSPOKEN — arm C of the couch door
   thecouchcupholder.com · src/_variants/plainspoken/styles/plainspoken.css

   WHAT THIS ARM IS, AND WHY IT LOOKS DIFFERENT FROM THE OTHER TWO
   ------------------------------------------------------------------
   The Terminal Website Mandate specifies its own visual system in §12, and
   on four points that specification and this door's standing Late Light
   world genuinely disagree:

     §12.4  "one highly legible humanist sans-serif ... no unnecessary serif
             brand theater."          Late Light's display face is Fraunces.
     §12.2  primary CTA "dark charcoal / near black with white/cream text."
                                      Late Light's action colour is terracotta.
     §12.6  "comfortable density, not luxury whitespace ... do not build
             1,000px-tall sections around one sentence."
     §12.7  images 16-20px, cards 12-16px, buttons 10-12px.
                                      Late Light buttons are 7px.

   Arm B (terminal-v1) implemented the mandate's ARCHITECTURE inside Late
   Light's visual world. This arm implements the mandate's architecture inside
   the mandate's OWN visual world. That difference is the arm's hypothesis and
   it is the reason the third slot is worth its traffic: the two challengers
   isolate whether the gain the mandate predicts comes from the structure, the
   surface, or only from both together.

   Not anti-constellation drift. Anti-constellation governs what separates one
   DOOR from another; within this door, design is a ratified testable axis
   (CLAUDE.md, Scott 2026-08-13: "design, copy, layout, picker, cart, header,
   hero, navigation, proof placement, offer presentation ... was already fair
   game and remains so").

   PALETTE: the mandate's §12.2 values verbatim, so the arm is testing the
   specification rather than an interpretation of it. Contrast measured, not
   assumed — the two text colours against the two canvases are 15.1:1 and
   5.3:1, both clear of AA.

   NO SHADOWS ANYWHERE (§12.8). Separation is carried by spacing, hairlines
   and the natural shadows already inside the photographs.
   ============================================================ */

/* ---------- fonts: one family, self-hosted, no CDN ----------
   Inter only. Fraunces is not loaded on this arm at all — a whole face fewer
   over the wire on a page whose audience is cold mobile traffic. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* canvases */
  --canvas: #F6F2EA;          /* §12.2 primary canvas, warm cream */
  --canvas-2: #ECE5DA;        /* §12.2 secondary canvas, warm stone */
  --lift: #FCFAF6;            /* raised surfaces — cards, the drawer */

  /* ink */
  --ink: #1E1D1A;             /* §12.2 primary text, soft charcoal */
  --ink-2: #68635C;           /* §12.2 secondary text, warm gray — 5.3:1 on canvas */

  /* structure */
  --line: #D7D0C5;            /* §12.2 borders, soft taupe */
  --line-2: #B9AF9F;          /* the one step stronger, for a selected edge */

  /* action — §12.2: dark charcoal / near black, cream text. Not terracotta. */
  --action: #1E1D1A;
  --action-ink: #F6F2EA;

  /* verdict colours: fit badges only, never decoration */
  --yes: #4F6B45;
  --check: #7A5E23;
  --no: #8C4133;

  /* shape — §12.7 */
  --r-img: 18px;
  --r-card: 14px;
  --r-btn: 11px;

  /* rhythm — §12.6 comfortable density. Deliberately tighter than editorial. */
  --pad: clamp(2.5rem, 7vw, 4.25rem);
  --gutter: clamp(1.125rem, 5vw, 2rem);
  --shell: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

/* THE [hidden] GUARD, and it is not boilerplate.

   The UA's rule for [hidden] is a plain `display:none` at specificity 0-0-1.
   Any class in this file that sets `display` — .hdr-cart, .cart-count,
   .fit-search's results, the review filter's off-topic cards — ties it on
   specificity and then WINS on source order. The cart button shipped visible
   with a "0" badge on this arm for exactly that reason: cart.js had correctly
   set el.hidden = true and the stylesheet painted it anyway.

   Control and arm B both already carry this line. Omitting it here was not a
   new problem, it was an old one re-made, which is the argument for the rule
   being the first thing in the file rather than a patch near the component
   that happened to expose it. */
[hidden], [hidden][hidden][hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* §12.4 mobile body 16-18, desktop 17-19 */
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "cv05" 1, "cv11" 1;   /* single-storey g, straight-tail l */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                          /* §16: the body never scrolls sideways */
}
@media (min-width: 800px) { body { font-size: 18px; } }

img, video { max-width: 100%; height: auto; display: block; }

/* §12.5 sentence case: headings are authored in sentence case; nothing here
   uppercases them. The one uppercase treatment is the functional micro-label. */
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.021em; font-weight: 640; }
h1 {
  /* §12.4 — mobile 38-46px, desktop 56-68px */
  font-size: clamp(2.375rem, 8.4vw, 2.875rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}
@media (min-width: 800px) { h1 { font-size: clamp(3.5rem, 4.6vw, 4.25rem); } }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.375rem); }
@media (min-width: 800px) { h2 { font-size: clamp(2.25rem, 2.9vw, 2.75rem); } }
h3 { font-size: 1.125rem; font-weight: 620; }
p { margin: 0 0 0.95em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* Section rhythm. Alternating canvases carry the divisions, so there is no
   need for a rule between every block. */
section { padding: var(--pad) 0; }
.band { background: var(--canvas-2); }

/* An eyebrow is the one place uppercase is allowed (§12.5, functional label). */
.eyebrow {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.75rem;
}
.lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 46ch; }
@media (min-width: 800px) { .lede { font-size: 1.1875rem; } }
.micro { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--action-ink);
  padding: 0.75rem 1rem; border-radius: 0 0 var(--r-btn) 0;
}
.skip:focus { left: 0; }

/* Focus is visible everywhere and never removed (§18). */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.tracking-pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================
   BUTTONS — §12.7 radius 10-12px, §12.5 sentence case, §12.8 no shadow
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px;                       /* §16 large tap targets */
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-ink { background: var(--action); color: var(--action-ink); }
.btn-ink:hover { background: #33302B; }
.btn-quiet {
  background: transparent; color: var(--ink); border-color: var(--line-2);
}
.btn-quiet:hover { background: var(--canvas-2); }
.btn-full { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* A text link that reads as a next step (§32 EvidenceLink). */
.go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--line-2); padding-bottom: 2px;
}
.go:hover { border-bottom-color: var(--ink); }

/* ============================================================
   SECTION 0 · OFFER STRIP
   ============================================================ */
.strip {
  background: var(--ink); color: var(--action-ink);
  font-size: 0.75rem; letter-spacing: 0.005em;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 0.45rem; padding: 0.55rem var(--gutter); text-align: center;
}
.strip .sep { opacity: 0.4; }
@media (max-width: 420px) { .strip .drop { display: none; } }

/* ============================================================
   SECTION 1 · HEADER
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(2px)) { .hdr { background: var(--canvas); } }
.hdr-in { display: flex; align-items: center; gap: 1rem; min-height: 60px; }

/* The maker's mark: the site name over a small "by Steadi Labs", so nobody
   reads the category as a company. Not a link — the whole lockup is one. */
.mark { text-decoration: none; display: block; margin-right: auto; line-height: 1.05; }
.mark-name { display: block; font-size: 1.0625rem; font-weight: 680; letter-spacing: -0.022em; }
.mark-name em { font-style: normal; font-weight: 500; color: var(--ink-2); }
.mark-by {
  display: block; font-size: 0.5875rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2);
  margin-top: 2px;
}

.nav { display: none; gap: 1.5rem; }
.nav a { text-decoration: none; font-size: 0.9375rem; font-weight: 550; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 720px) { .nav { display: flex; } .burger { display: none; } }

.burger {
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-btn);
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink);
  /* 44px, not 40 — §18's touch-target floor. Measured in the browser rather
     than eyeballed: this and .mixbtn were the only two operable controls on
     the page under it. The inline .go links stay at their text height, which
     is the documented exception for a link inside a sentence. */
  min-height: 44px; padding: 0 0.85rem; cursor: pointer;
}
@media (max-width: 719px) {
  .nav.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--canvas); border-bottom: 1px solid var(--line);
    padding: 0.25rem var(--gutter) 0.75rem;
  }
  .nav.open a { padding: 0.85rem 0; border-top: 1px solid var(--line); }
}

.hdr-cart {
  position: relative; background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--r-btn); width: 42px; height: 42px; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); padding: 0;
}
.hdr-cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--ink); color: var(--action-ink);
  font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}

/* ============================================================
   SECTION 2 · HERO
   Source order IS the mandate's §16 mobile sequence: H1, plain category
   sentence, hero use image, price, rating, shipping + guarantee, CTA,
   maker identity. Desktop re-columns with grid; nothing reorders, so the
   reading order and the DOM order stay the same for a screen reader.
   ============================================================ */
.hero { padding-top: clamp(1.75rem, 5vw, 3rem); padding-bottom: 0; }
.hero-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  /* The image spans both rows, so it sets the column height. With the two
     text cells left to distribute that leftover the CTA drifted ~90px away
     from the sentence that motivates it. `align-content: center` packs the
     pair and centres them against the photograph instead; the row-gap is then
     the only space between them and it is a chosen number. */
  .hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(1.5rem, 3vw, 2.25rem);
    align-items: center;
    align-content: center;
  }
  .hero-say { grid-column: 1; }
  .hero-see { grid-column: 2; grid-row: 1 / span 2; }
  .hero-buy { grid-column: 1; }
}
.hero h1 { margin-bottom: 0.7rem; }
.hero-cat { color: var(--ink-2); font-size: 1.0625rem; max-width: 42ch; margin-bottom: 0; }
@media (min-width: 800px) { .hero-cat { font-size: 1.1875rem; } }

.hero-see { position: relative; }
.hero-see img { width: 100%; border-radius: var(--r-img); background: var(--canvas-2); }

/* The micro-proof rides ON the hero image, which is this arm's answer to
   §16's "screen 1" carrying more than a photograph. It is one line and it
   names what the eye is about to be shown, nothing more. */
.hero-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.25rem 1.125rem 1rem;
  border-radius: 0 0 var(--r-img) var(--r-img);
  background: linear-gradient(to top, rgba(20,18,16,0.78), rgba(20,18,16,0));
  color: #fff;
}
.hero-note b { display: block; font-size: 0.9375rem; font-weight: 640; }
.hero-note span { display: block; font-size: 0.8125rem; opacity: 0.82; }

.hero-buy { display: grid; gap: 0.9rem; }
.hero-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.85rem; }
.hero-price b { font-size: 1.5rem; font-weight: 660; letter-spacing: -0.02em; }
.hero-price .rate { color: var(--ink-2); font-size: 0.9375rem; }
.stars-inline { color: var(--ink); letter-spacing: 0.06em; }

.hero-buy .btn { align-self: start; }
@media (max-width: 899px) { .hero-buy .btn { width: 100%; } }

.hero-assure { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.hero-assure li { list-style: none; }
.hero-assure { margin: 0; padding: 0; font-size: 0.875rem; color: var(--ink-2); }
.hero-assure li::before { content: "·"; margin-right: 0.55rem; color: var(--line-2); }
.hero-assure li:first-child::before { content: none; }

.hero-made { font-size: 0.8125rem; color: var(--ink-2); margin: 0; }

/* ============================================================
   SECTION 3 · PURCHASE MODULE
   §10.4 belongs high. This arm puts it directly after the hero — the
   mandate's own E3 challenger ("hero -> buy -> proof"), where arm B runs
   the E3 thesis ("hero -> proof -> buy").
   ============================================================ */
.buy { background: var(--canvas-2); }
.buy-grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .buy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
  .buy-media { position: sticky; top: 80px; }
}
.buy h2 { margin-bottom: 0.55rem; }
.buy-media img { width: 100%; border-radius: var(--r-img); background: var(--canvas); }
.buy-media figcaption { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.6rem; }
.buy-media figure { margin: 0; }

/* a colour crossfade, the one motion §12.10 explicitly allows */
.buy-media img { transition: opacity 180ms ease; }
.buy-media img.swap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .buy-media img { transition: none; } .buy-media img.swap { opacity: 1; } }

.step { margin-top: 1.5rem; }
.step:first-of-type { margin-top: 0; }
.step-n {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 0.6rem;
}

/* ---- pack ladder ----
   Every rung shows total AND derived unit price. The unit price is COMPUTED
   in plainspoken.js from data-price, never typed — §7.2 names $14.96 / $9.98 /
   $8.75 as errors that shipped from somebody typing a division. */
.packs { display: grid; gap: 0.5rem; margin: 0; padding: 0; }
.cfg-pack {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 0.35rem 0.9rem;
  width: 100%; text-align: left;
  background: var(--lift); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: 0.9rem 1rem; min-height: 62px;
  font: inherit; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
@media (prefers-reduced-motion: reduce) { .cfg-pack { transition: none; } }
.cfg-pack:hover { border-color: var(--line-2); }
/* Selected state is a heavier border AND a filled tick AND aria-checked —
   never colour alone (§18, §16). */
.cfg-pack[aria-checked="true"] { border-color: var(--ink); background: var(--canvas); }
.pk-name { font-weight: 640; font-size: 1.0625rem; }
.pk-each { grid-column: 1; grid-row: 2; font-size: 0.8125rem; color: var(--ink-2); }
.pk-total { font-weight: 640; font-size: 1.0625rem; grid-column: 2; grid-row: 1 / span 2; }
.pk-tick {
  grid-column: 3; grid-row: 1 / span 2;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center;
}
.cfg-pack[aria-checked="true"] .pk-tick { background: var(--ink); border-color: var(--ink); }
.pk-tick svg { width: 12px; height: 12px; fill: none; stroke: var(--action-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cfg-pack[aria-checked="true"] .pk-tick svg { opacity: 1; }
/* §7.3 — the only pack label on this page, and it is arithmetic, not a claim. */
.pk-flag {
  grid-column: 1; grid-row: 3; justify-self: start;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.1rem 0.5rem; margin-top: 0.3rem;
}

/* ---- colour ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.cfg-swatch {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line-2); cursor: pointer; padding: 0;
  background-size: cover; background-position: center;
}
.cfg-swatch[aria-checked="true"] { border-color: var(--ink); border-width: 2.5px; }
/* non-colour selected state: a tick that sits on the swatch (§18) */
.cfg-swatch::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F2EA' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  opacity: 0;
}
.cfg-swatch[aria-checked="true"]::after { opacity: 1; }
.color-name { font-size: 0.875rem; font-weight: 600; margin: 0.6rem 0 0; }
.color-name span { font-weight: 400; color: var(--ink-2); }

.mixline { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.85rem; }
.mixbtn {
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-btn);
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--ink);
  min-height: 44px; padding: 0 0.9rem; cursor: pointer;
}
.mixbtn:hover { background: var(--canvas); }

.mixgrid { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.mixrow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mixrow > b { font-size: 0.8125rem; font-weight: 640; min-width: 5.5rem; }
.mixrow .cfg-swatch { width: 34px; height: 34px; }
.mixrow .cfg-swatch::after { width: 13px; height: 13px; background-size: 9px; }

/* ---- micro-fit, inside purchase mode (§10.4 step 3) ---- */
.microfit {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--lift); padding: 0.9rem 1rem; margin-top: 1.5rem;
}
.microfit p { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.microfit .go { font-size: 0.875rem; }

/* ---- CTA + reassurance ---- */
.buy-cta { margin-top: 1.25rem; }
.cta-note { margin-top: 0.7rem; }
.cta-note li { list-style: none; font-size: 0.8125rem; color: var(--ink-2); }
.cta-note { margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.buy-msg { font-size: 0.875rem; margin-top: 0.6rem; min-height: 0; }
.buy-msg.error { color: var(--no); font-weight: 600; }

/* ============================================================
   SECTION 4 · MOVEMENT PROOF
   §12.3 permits one dark interruption for the proof theatre. This is it,
   and it is the only dark block on the page.
   ============================================================ */
.proof { background: #16150F; color: #F2EDE3; }
.proof h2 { color: #fff; }
.proof .lede { color: #C9C2B4; }
.proof-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
}
.stage {
  position: relative; border-radius: var(--r-img); overflow: hidden;
  background: #0D0C08; aspect-ratio: 16 / 9;
}
.stage img, .stage iframe, .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.94); color: #16150F;
  border: 0; border-radius: 999px; padding: 0.7rem 1.2rem 0.7rem 1rem;
  font: inherit; font-size: 0.9375rem; font-weight: 640; cursor: pointer;
}
.play svg { width: 14px; height: 14px; fill: currentColor; }
.proof-says { margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.proof-says li { list-style: none; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.4rem; font-size: 0.9375rem; }
.proof-says b { color: #8F887A; font-variant-numeric: tabular-nums; font-weight: 600; }
.proof-cap { font-size: 0.8125rem; color: #9A9385; margin-top: 1rem; }
.proof .go { border-bottom-color: #4C483E; color: #F2EDE3; }
.proof .go:hover { border-bottom-color: #F2EDE3; }

/* the secondary, same-origin clip */
.clip { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 700px) { .clip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: 1.5rem; } }
.clip video { width: 100%; border-radius: var(--r-img); background: #0D0C08; }
.clip h3 { color: #fff; margin-bottom: 0.4rem; }
.clip p { font-size: 0.9375rem; color: #C9C2B4; }

/* ============================================================
   SECTION 5 · RECOGNITION
   ============================================================ */
.workarounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .workarounds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wa figure { margin: 0; }
.wa img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); background: var(--canvas-2); }
.wa figcaption { margin-top: 0.55rem; }
.wa b { display: block; font-size: 0.9375rem; font-weight: 640; }
.wa span { display: block; font-size: 0.8125rem; color: var(--ink-2); }
.resolve { margin-top: 1.5rem; font-size: 1.1875rem; font-weight: 620; letter-spacing: -0.015em; }

/* ============================================================
   SECTION 6 · CUSTOMER EVIDENCE (build-injected)
   .rev-grid / .rev / .stars / cite / .rev-shots come from build.mjs's
   injection, so the selectors here match its output exactly.
   ============================================================ */
.rev-grid { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rev {
  background: var(--lift); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.rev .stars { color: var(--ink); letter-spacing: 0.08em; font-size: 0.9375rem; }
.rev p { font-size: 0.9375rem; margin: 0; }
.rev cite { font-style: normal; font-size: 0.8125rem; color: var(--ink-2); margin-top: auto; }
.rev-verified { font-weight: 600; }
.rev-shots { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rev-shots img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; }

/* the /reviews page's toggle, same injection */
.rev-toggle { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; justify-items: start; }
.rev-toggle-label { font-size: 0.9375rem; color: var(--ink-2); margin: 0; max-width: 60ch; }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--canvas-2); }

/* ============================================================
   SECTION 7 · FIT
   ============================================================ */
.fit-lead { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .fit-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; } }
.fit-lead img { width: 100%; border-radius: var(--r-img); background: var(--canvas-2); }
.spec { margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.spec li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; font-size: 0.9375rem; align-items: start; }
.spec .k { font-weight: 640; }

/* the live fit search — DOM contract is /js/fit-search.js's */
.fit-search { margin-top: 1.75rem; }
.fit-search label { display: block; font-weight: 640; font-size: 0.9375rem; margin-bottom: 0.45rem; }
.fit-search input {
  width: 100%; max-width: 30rem; min-height: 50px;
  background: var(--lift); color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-btn);
  font: inherit; font-size: 1rem; padding: 0 0.9rem;
}
.fit-search input::placeholder { color: var(--ink-2); opacity: 0.75; }
.fs-list { margin: 0.6rem 0 0; padding: 0; max-width: 34rem; display: grid; gap: 0.35rem; }
.fs-row {
  list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
  background: var(--lift); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.8rem; cursor: default;
}
.fs-row-name { font-weight: 620; font-size: 0.9375rem; }
.fs-row-note { grid-column: 1; font-size: 0.8125rem; color: var(--ink-2); }
.fs-badge {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 0.75rem; font-weight: 640; white-space: nowrap;
  border-radius: 999px; padding: 0.2rem 0.55rem; border: 1px solid currentColor;
}
.fs-badge.ok { color: var(--yes); }
.fs-badge.check { color: var(--check); }
.fs-badge.no { color: var(--no); }
.fs-more, .fs-empty { list-style: none; font-size: 0.8125rem; color: var(--ink-2); padding: 0.4rem 0.1rem; }
.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;
}

.fit-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
@media (min-width: 760px) { .fit-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fg figure { margin: 0; }
.fg img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-card); background: var(--canvas-2); }
.fg figcaption { margin-top: 0.55rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.fg b { font-size: 0.9375rem; font-weight: 640; }
.fg .verdict { font-size: 0.75rem; font-weight: 640; border: 1px solid currentColor; border-radius: 999px; padding: 0.1rem 0.5rem; }
.fg .verdict.ok { color: var(--yes); }
.fg .verdict.check { color: var(--check); }
.fg .verdict.no { color: var(--no); }
.fg span.note { display: block; width: 100%; font-size: 0.8125rem; color: var(--ink-2); }

/* ============================================================
   SECTION 8 · YOUR COUCH
   ============================================================ */
.scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .scenes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc figure { margin: 0; position: relative; }
.sc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-card); background: var(--canvas-2); }
.sc figcaption { margin-top: 0.55rem; }
.sc b { display: block; font-size: 0.9375rem; font-weight: 640; }
.sc span { display: block; font-size: 0.8125rem; color: var(--ink-2); }

/* ============================================================
   SECTION 9 · SECOND PURCHASE — compact, no re-education (§10.9)
   ============================================================ */
.again { background: var(--ink); color: var(--action-ink); }
.again h2 { color: #fff; }
.again-in { display: grid; gap: 1.1rem; justify-items: start; }
@media (min-width: 800px) { .again-in { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } }
.again p { color: #C9C2B4; font-size: 0.9375rem; margin: 0.5rem 0 0; }
.again .btn-ink { background: var(--action-ink); color: var(--ink); }
.again .btn-ink:hover { background: #fff; }

/* ============================================================
   SECTION 10 · HOW IT WORKS
   ============================================================ */
.mech { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 800px) { .mech { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.mech > div { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.mech h3 { margin-bottom: 0.35rem; }
.mech p { font-size: 0.9375rem; color: var(--ink-2); }
.mech-shot { margin-top: 1.75rem; }
.mech-shot img { width: 100%; border-radius: var(--r-img); background: var(--canvas-2); }
.mech-none { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 620; }

/* ============================================================
   SECTION 11 · COMPARISON — compressed tradeoff (§10.11)
   ============================================================ */
.tradeoff { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 800px) { .tradeoff { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.tradeoff > div {
  background: var(--lift); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 1.125rem 1.25rem;
}
.tradeoff h3 { margin-bottom: 0.7rem; }
.tradeoff ul { margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.tradeoff li { list-style: none; font-size: 0.9375rem; display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.3rem; }
.tradeoff li::before { content: "—"; color: var(--line-2); }

/* ============================================================
   SECTION 13 · MAKER
   ============================================================ */
.maker-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .maker-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; } }
.maker-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.maker-shots img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); background: var(--canvas-2); }
.facts { margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.facts li {
  list-style: none; font-size: 0.8125rem; font-weight: 600;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.28rem 0.7rem;
}

/* ============================================================
   SECTION 14 · GUARANTEE
   ============================================================ */
.gua-in { max-width: 60ch; }
.gua p { font-size: 1.0625rem; }

/* ============================================================
   SECTION 16 · FAQ
   ============================================================ */
.faq-list { margin-top: 1.5rem; max-width: 68ch; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; position: relative;
  font-weight: 620; font-size: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 1.35rem;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform 140ms ease;
}
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }
.faq-list details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq-a { padding: 0 0 1.1rem; font-size: 0.9375rem; color: var(--ink-2); max-width: 62ch; }

/* ============================================================
   SECTION 17 · FOOTER
   ============================================================ */
.foot { background: var(--ink); color: #C9C2B4; padding: var(--pad) 0 2.5rem; }
.foot-in { display: grid; gap: 1.75rem; }
@media (min-width: 800px) { .foot-in { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.foot .mark-name { color: #fff; }
.foot .mark-by { color: #8F887A; }
.foot h2 { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8F887A; margin-bottom: 0.7rem; font-weight: 600; }
.foot ul { margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot li { list-style: none; }
.foot a { color: #C9C2B4; text-decoration: none; font-size: 0.9375rem; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-legal {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #35322B;
  font-size: 0.75rem; color: #8F887A; line-height: 1.6;
}

/* ============================================================
   STICKY COMMERCE — §16's named hypothesis, carried by THIS arm
   Driven by /js/ui.js (#sticky + .hero + #packs); its label is kept in
   sync with the live selection by plainspoken.js.
   ============================================================ */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink); color: var(--action-ink);
  border-top: 1px solid #35322B;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 180ms ease;
}
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }
.sticky.show { transform: translateY(0); }
@media (min-width: 900px) { .sticky { display: none; } }   /* mobile hypothesis only */
.sticky-in { display: flex; align-items: center; gap: 0.75rem; max-width: var(--shell); margin: 0 auto; }
.sticky-lab { flex: 1; min-width: 0; line-height: 1.25; }
.sticky-lab b { display: block; font-size: 0.9375rem; font-weight: 640; }
.sticky-lab span { display: block; font-size: 0.75rem; color: #9A9385; }
.sticky .btn { min-height: 44px; padding: 0.6rem 1.15rem; background: var(--action-ink); color: var(--ink); }

/* ============================================================
   CART DRAWER — markup rendered by /js/cart.js
   ============================================================ */
.cart-scrim { position: fixed; inset: 0; background: rgba(20,18,16,0.5); z-index: 90; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100%); background: var(--lift); color: var(--ink);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 200ms ease;
  border-left: 1px solid var(--line);
}
@media (prefers-reduced-motion: reduce) { .cart-drawer { transition: none; } }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 1.125rem; }
.cart-close { background: transparent; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--ink); padding: 0.15rem 0.4rem; }
.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.cart-empty { display: grid; gap: 1rem; justify-items: start; color: var(--ink-2); font-size: 0.9375rem; }
.cart-err { color: var(--no); font-weight: 600; font-size: 0.875rem; margin-bottom: 0.75rem; }
.cart-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.ci-name { font-weight: 640; font-size: 0.9375rem; }
.ci-variant, .ci-colors { font-size: 0.8125rem; color: var(--ink-2); }
.ci-qty { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.ci-step { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; font: inherit; cursor: pointer; color: var(--ink); }
.ci-count { min-width: 1.4rem; text-align: center; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ci-remove { background: transparent; border: 0; font: inherit; font-size: 0.8125rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-left: 0.3rem; }
.ci-price { font-weight: 640; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.mini-swatches { display: flex; flex-wrap: wrap; gap: 3px; width: 42px; }
.mini-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); background: var(--canvas-2); }
.cart-subtotal { display: flex; justify-content: space-between; font-weight: 640; padding-top: 0.9rem; }
.cart-foot { border-top: 1px solid var(--line); padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: 0.75rem; }
.cart-subtotal-note { display: grid; gap: 0.1rem; font-size: 0.8125rem; color: var(--ink-2); }
.cart-subtotal-note span { display: block; }
.cart-handoff { font-size: 0.75rem; color: var(--ink-2); margin: 0; }
.cart-handoff span { display: block; }

/* colour chips, shared by the swatches and the cart's mini dots */
.c-charcoal { background-color: #3A3A38; }
.c-sage { background-color: #7C8A6E; }
.c-white { background-color: #EFEDE7; }
.c-terracotta { background-color: #B4552F; }
.c-navy { background-color: #2C3E56; }
.c-sky { background-color: #8AA6BE; }
.c-brick-red { background-color: #9B4038; }
.c-sand { background-color: #E4D3B0; }