/* Configurator, fit engine, materials list and range gate.
   Uses the page's existing oklch tokens from styles.css. No new palette, no
   new type, no second design system. Kept in its own file so the merge never
   edits the original stylesheet. */

/* No internal scrollbars. The panel flows at its natural height in the page;
   the 3D stage is sticky so the model stays in view while the options scroll
   past it. */
.cfg{ display:grid; grid-template-columns:minmax(0,1fr) 20rem; align-items:start;
  background:linear-gradient(to right, #EFEAE1 0, #EFEAE1 calc(100% - 20rem), var(--card) calc(100% - 20rem));
  border:1px solid var(--border); border-radius:var(--radius); }
.cfg-stage{ position:sticky; top:1rem; min-width:0; overflow:hidden;
  background:#EFEAE1; border-radius:var(--radius) 0 0 var(--radius); }
three-d-stage:not(:defined){ visibility:hidden; }
three-d-stage{ display:block; width:100%; height:clamp(24rem,72vh,44rem); }
/* The cue used to be bare text sitting on a render whose colour the visitor
   picks, so it measured 1.4:1 against a charcoal garage. Same opaque pill the
   view controls use, so it holds on any finish. */
.cfg-hint{ position:absolute; left:1.125rem; bottom:.875rem; margin:0; z-index:2;
  padding:.4rem .7rem; border-radius:999px; pointer-events:none;
  background:oklch(1 0 0 / .92); border:1px solid oklch(0.55 0.012 70);
  font-family:var(--font-sans); color:var(--foreground); }
/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, so the
   size ruler's six chips forced this track to 620px inside a 390px viewport and
   took the whole page horizontally off screen. The stage has always had it. */
/* Solid ground, not just the gradient's right half showing through: the
   column-split gradient on .cfg reads as a background-image, which made every
   panel descendant unmeasurable for contrast. Same pixels, honest ground. */
.cfg-panel{ min-width:0; background:var(--card); border-left:1px solid var(--border); padding:1.25rem 1.25rem 1.5rem; }
.cfg-field, .cfg-verdict, .cfg-finishes{ min-width:0; }
.cfg-field{ margin-bottom:1.25rem; }
.cfg-field .label{ margin:0 0 .5rem; }

.cfg-seg{ display:flex; flex-wrap:wrap; gap:.375rem; }
/* Size grid: 3-up for the Castle six; wraps and grows for member libraries with
   longer labels (e.g. "G6 · 24' × 30' + loft + carport"). Never overflows. */
.cfg-seg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr)); }
.cfg-seg button{ font-family:var(--font-sans); font-size:.8125rem; font-weight:500; line-height:1.2;
  min-height:2.75rem; padding:.7rem .625rem; border:1px solid oklch(0.55 0.012 70); border-radius:calc(var(--radius) - 2px);
  background:var(--card); color:var(--foreground); cursor:pointer; white-space:normal; text-align:center; }
.cfg-seg button:hover{ border-color:var(--ring); }
.cfg-seg button[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }

/* Pale swatches on a white card had a 1.5:1 edge, so White and Almond read as
   holes in the row rather than as choices. Two changes: the row sits in a
   tinted well instead of on the white card, and the hairline is dark enough to
   clear 3:1 on its own (alpha black at .32 only reached 2.3:1). */
.cfg-sw{ display:flex; flex-wrap:wrap; gap:.625rem; margin-top:.5rem;
  background:var(--paper, oklch(0.975 0.006 80)); border-radius:calc(var(--radius) - 2px);
  padding:.5rem; }
.cfg-sw .sw{ position:relative; width:2.75rem; height:2.75rem; padding:0; cursor:pointer;
  border:1px solid oklch(0.55 0.012 70); border-radius:calc(var(--radius) - 2px); }
.cfg-sw .sw[aria-pressed="true"]{ outline:2px solid var(--ring); outline-offset:2px; }
/* Selection carries a tick as well as a ring: one 2px outline is not enough to
   read against a swatch of a similar hue. --sw-ink is set per swatch from its
   own luminance, so the tick lands on Cranberry and on White alike. */
/* --sw-ink is chosen per swatch by MEASURED contrast (configurator.js), and the
   halo is the opposite tone so the tick keeps an edge even on a fill that suits
   neither ink. */
.cfg-sw .sw[aria-pressed="true"]::after{ content:''; position:absolute; left:50%; top:48%;
  width:.42rem; height:.78rem; margin:-.45rem 0 0 -.21rem; transform:rotate(42deg);
  border-right:2.5px solid var(--sw-ink,#1A1915); border-bottom:2.5px solid var(--sw-ink,#1A1915);
  filter: drop-shadow(0 0 1px var(--sw-halo, transparent)); }
/* The custom swatch (v1.13.1): a hue ring until a colour is picked, then it
   wears the picked colour like any other swatch. The native color input inside
   is the actual picker; it stays invisible and the button proxies to it. */
.cfg-sw .sw-custom{ background:
  radial-gradient(closest-side, var(--paper, #F8F6F1) 55%, transparent 56%),
  conic-gradient(#C94F42, #C9A542, #6FA05C, #4F7FA8, #7A5AA0, #C94F42); }
.cfg-sw .sw-custom.sw-custom-set{ background-image:none; }
.cfg-sw .sw-custom input{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; border:0; padding:0; }

/* The chosen colour, named in the open. It lived only in aria-label and title,
   so nobody could see it, print it, or tell the yard what they picked. */
.label-pick{ display:inline; margin-left:.45rem; font-family:var(--font-sans); font-size:.9375rem;
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--foreground); }
.label-pick:empty{ display:none; }

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

/* View controls belong on the thing they move. Overlay, bottom right of the
   stage, opposite the drag hint. */
.cfg-viewbar{ position:absolute; right:.875rem; bottom:.75rem; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem; max-width:calc(100% - 2rem); }
.cfg-viewbar button{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; line-height:1;
  min-height:2.75rem; padding:.6rem .85rem; cursor:pointer; color:var(--foreground);
  background:oklch(1 0 0 / .96); border:1px solid oklch(0.45 0.012 70); border-radius:999px;
  box-shadow:0 1px 3px oklch(0 0 0 / .18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.cfg-viewbar button:hover{ background:oklch(1 0 0); }
.cfg-viewbar button[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.cfg-viewbar[hidden]{ display:none; }

.cfg-spec{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.6; margin:0 0 1.25rem;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.7rem 0; color:var(--muted-foreground); }
.cfg-spec div{ display:flex; justify-content:space-between; gap:.75rem; }
.cfg-spec dt{ color:var(--muted-foreground); }
/* The facts the visitor did not choose were louder than the choices still in
   front of them: 16px/600 against 15px/500. */
.cfg-spec dd{ margin:0; font-weight:500; color:var(--foreground); text-align:right; }

.cfg-more{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:1.125rem; }
.cfg-more summary{ font-family:var(--font-sans); font-size:.8125rem; font-weight:600; color:var(--muted-foreground);
  letter-spacing:.09em; text-transform:uppercase;
  padding:.8rem 0; cursor:pointer; list-style:none; display:flex; align-items:center; gap:.45rem; min-height:2.75rem; }
.cfg-more summary:hover{ color:var(--foreground); }
.cfg-more summary::-webkit-details-marker{ display:none; }
.cfg-more summary::before{ content:''; width:.4rem; height:.4rem; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
.cfg-more[open] summary::before{ transform:rotate(-135deg); }

/* ── the guided path: rail + step blocks ────────────────────────────────── */
.steps{ list-style:none; margin:2.5rem auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.75rem;
  font-family:var(--font-sans); font-size:.8125rem; color:var(--muted-foreground); }
.steps li{ display:flex; align-items:center; gap:.5rem; }
.step-num{ display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; font-size:.75rem; font-weight:700;
  border:1px solid var(--border); color:var(--muted-foreground); background:var(--card); font-variant-numeric:tabular-nums; }
.steps li.is-current{ color:var(--foreground); font-weight:600; }
.steps li.is-current .step-num{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.steps li.is-done .step-num{ background:var(--wood); border-color:var(--wood); color:#fff; }
@media (max-width:48rem){
  .steps{ gap:.5rem .9rem; flex-wrap:nowrap; }
  .steps li:not(.is-current) > span:last-child{ display:none; }   /* numbers only, the current step keeps its name */
  .steps li.is-current{ flex:0 1 auto; }
}
.step-block{ margin-top:2rem; }
.sb-head{ margin-bottom:1.25rem; }
.step-tag{ display:block; font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--wood); margin-bottom:.4rem; }
.sb-head .h3{ margin:0; }
.step-lede{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; color:var(--muted-foreground); margin:.5rem 0 0; max-width:48rem; }
.center .step-lede{ margin-inline:auto; }
.step-locked .step-body{ display:none; }
.step-locked{ opacity:.72; }
.step-locked .sb-head{ margin-bottom:0; }
#step2.step-locked, #step3.step-locked{ padding:1.5rem 1.75rem; border:1px dashed var(--border); border-radius:var(--radius); }
.step-skip{ margin:1rem 0 0; font-family:var(--font-sans); text-align:right; }
/* This is a real navigational decision, not chrome, so it sits on the 15px
   reading floor. .textlink in styles.css sizes it at 14px otherwise. */
.step-skip .textlink{ font-size:.9375rem; }
#use .use-group + .use-groups{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.use-card.build-out{ display:block; margin-top:1.25rem; padding-top:1.5rem; }
.cfg{ margin-top:0; }

.build-tag{ opacity:.55; font-variant-numeric:tabular-nums; }
.label-note{ font-weight:400; letter-spacing:.04em; text-transform:none; margin-left:.4rem; opacity:.75; }

/* ── plan cards: best-for line + the yard-supplied "most popular" flag ───── */
.plan-card-best{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; color:var(--foreground); margin:.75rem 0 0;
  padding-top:.75rem; border-top:1px solid var(--border); }
.plan-card-best span{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--wood); margin-bottom:.2rem; }
.plan-card-flag{ display:block; font-family:var(--font-sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--wood); margin-bottom:.35rem; }
.cfg-spec dd.spec-best, .cfg-spec dd.spec-finish{ font-weight:500; text-align:left; }
.cfg-spec div.spec-finish-row{ display:block; }
.cfg-spec div.spec-finish-row dt{ margin-bottom:.15rem; }
.cfg-spec div.spec-best-row{ display:block; }
.cfg-spec div.spec-best-row dt{ margin-bottom:.15rem; }

/* ── step 1: the needs assessment ────────────────────────────────────────────
   Purpose is asked as a grid of cards, not a row of word-chips. The picture is
   the answer and the label confirms it, so the question is scannable at arm's
   length instead of being read word by word.

   Selection is a BORDER-WEIGHT change and nothing else. That matters beyond this
   grid: five controls in this panel each meant something different by "chosen"
   (chip = copper fill, segmented = ink fill, ruler = ink fill, material card =
   ink edge, swatch = copper ring). The edge is the idiom that works everywhere,
   because it never tints the thing underneath it — critical when what is
   underneath is a render or a colour the visitor is trying to judge.

   These selectors are scoped to .pq-grid so they out-specify design.css's later
   .chip rules without editing them; the buttons keep .chip and the container
   keeps #presetChips so season.js, paged.js, check.mjs, floor-audit.mjs and the
   capture harnesses all keep working. */
/* Four cards since the retrofit preset went: a 2×2 on mobile and tablet, one
   clean 4-across row on desktop. The old 3-up left a 3+1 orphan row (Zak,
   2026-08-28). Mobile is the majority of the userbase — 2×2 keeps each card a
   full thumb target with the render legible. */
.pq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:.75rem; }
@media (min-width:64rem){ .pq-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pq-grid .pq-card{ display:block; width:100%; min-height:0; text-align:left; padding:0; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:calc(var(--radius) + 2px);
  cursor:pointer; transition:border-color 140ms ease, box-shadow 140ms ease; }
.pq-grid .pq-art{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 58%;
  background:#EFEAE1; }
/* `interior` is about a building that already stands, so it gets an honest panel
   rather than a picture borrowed from a different preset. */
.pq-grid .pq-art-none{ display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 1rem; font-family:var(--font-sans); font-size:.9375rem; color:var(--muted-foreground); }
.pq-grid .pq-name{ display:block; padding:.7rem .85rem .8rem; font-family:var(--font-sans); font-size:.9375rem;
  font-weight:600; line-height:1.3; color:var(--foreground); }
.pq-grid .pq-card:hover{ border-color:oklch(0.55 0.012 70); }
.pq-grid .pq-card[aria-pressed="true"]{ background:var(--card); border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink); }
.pq-grid .pq-card[aria-pressed="true"] .pq-name{ color:var(--ink); }
.pq-grid .pq-card:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.pq-rule{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; color:var(--muted-foreground); margin:0; }
.pq-q{ font-family:var(--font-display); font-size:1.375rem; font-weight:500; line-height:1.22;
  letter-spacing:-.012em; color:var(--foreground); margin:0 0 .35rem; text-wrap:balance; }
.pq-next{ margin-top:2rem; }
.pq-next .use-groups{ margin-top:1rem; }
/* The rationale, printed rather than hidden in a tooltip. */
.pq-why{ margin:1rem 0 0; padding:.85rem 1rem; border-left:2px solid var(--wood);
  border-radius:0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
  background:oklch(0.973 0.011 84.6); font-family:var(--font-sans); font-size:.9375rem;
  line-height:1.55; color:var(--foreground); }

/* ── the accordion rail ──────────────────────────────────────────────────────
   v1.13.0: pick-list decisions (roof material, build-out options, the spec)
   fold behind one-line summaries so the panel reads as a short list of choices,
   not a wall of prose. One open at a time (configurator.js closes siblings).
   Native <details> so keyboard and AT come free. Colours are deliberately NOT
   this — they stay swatch rows behind the finishes door.
   The summary row is 44px+ (target floor) and carries the current value on the
   right in the same voice as the fin-open door. */
.cfg-acc{ border-top:1px solid var(--border); }
.cfg-acc:last-of-type{ border-bottom:1px solid var(--border); }
.cfg-acc summary{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:2.75rem; padding:.6rem 0; cursor:pointer; list-style:none; }
.cfg-acc summary::-webkit-details-marker{ display:none; }
.cfg-acc summary .label{ margin:0; }
.cfg-acc .acc-val{ font-family:var(--font-sans); font-size:.9375rem; font-weight:500;
  color:var(--foreground); text-align:right; flex:1; }
/* the affordance: a plus that turns minus, same weighted-type restraint as the
   fin tabs — no chevron glyph soup. */
.cfg-acc summary::after{ content:"+"; font-family:var(--font-sans); font-size:1.1rem; font-weight:500;
  color:var(--muted-foreground); line-height:1; }
.cfg-acc[open] summary::after{ content:"–"; }
.cfg-acc[open] summary{ padding-bottom:.35rem; }
.cfg-acc > :not(summary){ margin-bottom:.9rem; }
.cfg-acc .cfg-spec{ margin-bottom:.9rem; }
.cfg-acc .acc-note{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5;
  color:var(--muted-foreground); margin:.5rem 0 .9rem; }
.cfg-acc summary:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }

/* The build summary on #result reuses the .cfg-spec dl, but that dl was sized
   for the step-2 panel; centred and capped here so it reads as a document. */
.result-spec{ max-width:48rem; margin:2.5rem auto; padding:1.5rem 1.75rem; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); }

/* ── fit engine ─────────────────────────────────────────────────────────── */
.use-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.25rem; margin-top:1.25rem; }
.use-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem 1.75rem; }
.use-group .label{ margin:0 0 .5rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{ display:inline-flex; align-items:baseline; gap:.45rem; font-family:var(--font-sans); font-size:.8125rem;
  line-height:1; min-height:2.75rem; padding:.75rem .875rem; border:1px solid var(--border); border-radius:999px;
  background:var(--card); color:var(--foreground); cursor:pointer; }
.chip:hover{ border-color:var(--ring); }
.chip[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.chip-dim{ font-size:.7rem; color:var(--muted-foreground); font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] .chip-dim{ color:oklch(1 0 0 / .62); }
.chip-qty{ font-size:.75rem; font-weight:700; }
.use-out{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border); position:relative; }
.look-inside{ float:right; margin:0 0 .5rem 1rem; min-height:2.75rem; font-size:.9375rem; }
.look-inside[hidden]{ display:none; }
.look-inside[aria-pressed="true"]{ background:var(--wood-deep); }
.build-out{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem 1.75rem; }
.chip-tip{ font-family:var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--copper-deep, var(--wood-deep)); }
/* The tinted selected-chip ground is LIGHT; white-at-72% on it measured 1.08:1. */
.chip[aria-pressed="true"] .chip-tip{ color:var(--copper-deep, var(--wood-deep)); }
.use-verdict{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--wood-deep); margin:0 0 .35rem; }
.use-verdict-no{ color:oklch(.48 .12 35); }
.chip-blocked{ opacity:.45; cursor:not-allowed; }
.chip-blocked:hover{ border-color:var(--border); }
.use-custom{ margin:.9rem 0 0; padding:.9rem 1rem; border:1px solid oklch(.48 .12 35 / .35); border-radius:.75rem;
  background:oklch(.48 .12 35 / .06); font-family:var(--font-sans); font-size:.875rem; line-height:1.55; }
.use-custom p{ margin:0 0 .5rem; font-size:.875rem; }
.use-custom .textlink{ font-size:.875rem; }
.use-reason{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.6; color:var(--muted-foreground); margin:0; }
.use-caveat{ font-family:var(--font-sans); font-size:.75rem; color:var(--muted-foreground); margin:.6rem 0 0; }

/* ── materials list ─────────────────────────────────────────────────────── */
.sections{ list-style:none; margin:2rem 0 0; padding:0; font-family:var(--font-sans); font-size:.875rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:0 2rem; }
.sections li{ display:flex; justify-content:space-between; gap:.875rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.sections .s-val{ color:var(--muted-foreground); font-variant-numeric:tabular-nums; }
.tk-wrap{ margin-top:1.75rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.tk-wrap summary{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; padding:1rem 0;
  cursor:pointer; color:var(--wood-deep); }
.tk-scroll{ overflow-x:auto; padding-bottom:1.125rem; }
.tk{ width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:.9375rem; }
.tk th{ text-align:left; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted-foreground); padding:.6rem .75rem .6rem 0; font-weight:600; }
.tk td{ padding:.55rem .75rem .55rem 0; border-top:1px solid var(--border); color:var(--foreground); vertical-align:top; }
.tk .sec td{ color:var(--wood-deep); font-weight:600; padding-top:1.1rem; border-top:none;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.tk .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tk .note{ color:var(--muted-foreground); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }

/* ── the range gate ─────────────────────────────────────────────────────── */
.range-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.75rem; margin-top:2rem; max-width:36rem; margin-inline:auto; }
.range-form{ display:grid; gap:.875rem; }
.rf label{ display:block; font-family:var(--font-sans); font-size:.8125rem; font-weight:600;
  color:var(--muted-foreground); margin-bottom:.35rem; }
.rf input{ width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--foreground);
  padding:.8rem .875rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:var(--card); }
.rf input:focus{ outline:none; border-color:var(--ring); box-shadow:0 0 0 3px oklch(.55 .07 55 / .16); }
.rf input[aria-invalid="true"]{ border-color:oklch(.5 .15 30); }
/* Actionable text ("fix your email"), not disclaimer fine print. */
.err{ display:none; font-family:var(--font-sans); font-size:.875rem; color:oklch(.5 .15 30); margin-top:.3rem; }
.err.on{ display:block; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.range-figure{ font-family:var(--font-display); font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.15;
  color:var(--wood-deep); margin:.5rem 0 .75rem; }
/* Disclaimer sits ADJACENT to the number, per the placement rule in
   pricing.json. Never a tooltip, never a footer. */
.range-disclaimer{ font-family:var(--font-sans); font-size:.8125rem; line-height:1.6;
  color:var(--muted-foreground); margin:0 0 .6rem; }
.range-excludes,.range-ref{ font-family:var(--font-sans); font-size:.75rem; color:var(--muted-foreground); margin:0 0 .5rem; }
.range-pending{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.65; color:var(--foreground); margin:.5rem 0 .875rem; }
.range-card .btn{ margin-top:.75rem; }

/* ── proof + tap targets ────────────────────────────────────────────────── */
.rating-line{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--wood-deep);
  margin:1.25rem 0 0; }
/* Every link and button is a 44px target — plan-card text links and footer
   links were 16-17 short of that. */
.plan-card a, .textlink, .site-footer a, .viewer-foot a{ display:inline-flex; align-items:center; min-height:2.75rem; }

/* ── financing slot ─────────────────────────────────────────────────────── */
.fin-card{ margin:1.5rem auto 0; max-width:36rem; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem 1.5rem 1.25rem; }
.fin-block{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.fin-line{ font-family:var(--font-display); font-size:clamp(1.35rem,3vw,1.75rem); line-height:1.2;
  color:var(--wood-deep); margin:0 0 .4rem; }
.fin-badge{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--foreground); margin:0 0 .4rem; }
.fin-basis{ font-family:var(--font-sans); font-size:.8125rem; line-height:1.55; color:var(--muted-foreground); margin:0 0 .5rem; }
/* OAC is adjacent to the figure by construction — same block, no toggle. */
.fin-oac{ font-family:var(--font-sans); font-size:.72rem; line-height:1.55; color:var(--muted-foreground); margin:0 0 .6rem; }
.fin-apply{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--wood); text-decoration:underline; }

/* ── voice concierge dock ───────────────────────────────────────────────── */
.voice-dock{ position:fixed; left:1.25rem; bottom:5.5rem; z-index:60; display:flex;
  flex-direction:column; align-items:flex-start; gap:.625rem; }
.voice-launch{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans);
  font-size:.875rem; font-weight:600; min-height:2.75rem; padding:.75rem 1.125rem;
  border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--wood-deep);
  cursor:pointer; box-shadow:0 6px 24px oklch(0 0 0 / .14); }
.voice-launch:hover{ border-color:var(--ring); }
.voice-panel{ width:min(22rem, calc(100vw - 2.5rem)); background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 34px oklch(0 0 0 / .16);
  padding:1rem 1rem 1.125rem; }
/* Disclosure is the header and is not dismissible — it IS the deal. */
.voice-disclosure{ font-family:var(--font-sans); font-size:.78rem; line-height:1.55;
  color:var(--muted-foreground); margin:0 0 .75rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--border); }
.voice-log{ max-height:14rem; overflow-y:auto; display:flex; flex-direction:column; gap:.45rem;
  margin-bottom:.75rem; }
.voice-log:empty{ display:none; }
.voice-line{ font-family:var(--font-sans); font-size:.8125rem; line-height:1.5; margin:0;
  padding:.5rem .7rem; border-radius:calc(var(--radius) - 2px); max-width:92%; }
.voice-user{ background:var(--primary); color:var(--primary-foreground); align-self:flex-end; }
.voice-agent{ background:oklch(0 0 0 / .045); color:var(--foreground); align-self:flex-start; }
.voice-note{ color:var(--muted-foreground); font-size:.75rem; padding:0; align-self:center; }
.voice-controls{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.voice-btn{ font-family:var(--font-sans); font-size:.8125rem; font-weight:600; min-height:2.75rem;
  padding:.7rem 1rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px);
  background:var(--card); color:var(--foreground); cursor:pointer; }
.voice-btn:hover{ border-color:var(--ring); }
#voiceStart{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); flex:1; }
.voice-end{ color:oklch(.48 .12 35); }
.voice-clock{ font-family:var(--font-sans); font-size:.8125rem; font-variant-numeric:tabular-nums;
  color:var(--muted-foreground); margin-left:auto; }
.voice-fallback{ font-family:var(--font-sans); font-size:.78rem; color:var(--muted-foreground);
  margin:.6rem 0 0; }

@media (max-width:60rem){
  .voice-dock{ left:.875rem; bottom:4.75rem; }
  /* Full-bleed on phones: the model is the point, the margin is not. Breaks
     out of .wrap's 1.5rem inline padding; the panel keeps its own padding. */
  .cfg{ grid-template-columns:1fr; background:var(--card); margin-inline:-1.5rem; border-radius:0; border-left:none; border-right:none; }
  .cfg-stage{ position:sticky; top:0; z-index:2; border-radius:0; border-bottom:1px solid var(--border); }
  /* Budget, measured, including the 70px fixed CTA bar that the earlier note
     forgot: at 375x667 the rail gets 667 - 281 - 70 = 316px. The stage stays
     sticky so the visitor watches the model change while the options scroll
     past it. min-height is capped below so it cannot beat the percentage on a
     short screen and take half the viewport back. */
  three-d-stage{ height:42vh; min-height:15rem; }
  .cfg-panel{ border-left:none; }
  /* The hint used to be hidden here, which left the only way to rotate the
     model with no affordance at all on the device where it is hardest to
     guess. Keep it, worded for touch. */
  .cfg-hint{ left:.875rem; top:.625rem; bottom:auto; }
  .cfg-viewbar{ right:.625rem; bottom:.5rem; gap:.2rem; }
  .cfg-viewbar button{ min-height:2.75rem; padding:.6rem .7rem; font-size:.9375rem; }
  .cfg-seg-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── see it on your lot ─────────────────────────────────────────────────── */
.lot-card{ display:block; margin-top:1.25rem; }
.lot-lede{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; color:var(--muted-foreground); margin:.35rem 0 .9rem; max-width:48rem; }
.lot-form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.lot-form input{ flex:1 1 16rem; min-height:2.75rem; padding:.6rem .8rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px);
  font-family:var(--font-sans); font-size:1rem; background:var(--card); color:var(--foreground); }
.lot-form input:focus{ outline:2px solid var(--ring); outline-offset:1px; }
.lot-err{ font-family:var(--font-sans); font-size:.8125rem; color:oklch(.48 .12 35); margin:.4rem 0 0; min-height:1em; }
.lot-stage{ margin-top:1.25rem; }
.lot-frame{ position:relative; width:100%; max-width:640px; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:oklch(.3 .01 80); margin-inline:auto; touch-action:none; }
.lot-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; user-select:none; }
.lot-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
#lotFoot rect{ fill:oklch(.72 .16 55 / .45); stroke:#fff; stroke-width:2; }
#lotFoot .lot-door{ stroke:#fff; stroke-width:4; stroke-dasharray:6 3; }
#lotFoot text{ fill:#fff; font-family:var(--font-sans); font-size:13px; font-weight:600; paint-order:stroke; stroke:oklch(0 0 0 / .55); stroke-width:3px; }
.lot-scale rect{ fill:#fff; }
.lot-scale text{ fill:#fff; font-family:var(--font-sans); font-size:12px; font-weight:600; paint-order:stroke; stroke:oklch(0 0 0 / .55); stroke-width:3px; }
.lot-tools{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; max-width:640px; margin:.75rem auto 0; font-family:var(--font-sans); font-size:.8125rem; color:var(--muted-foreground); }
.lot-btns{ display:flex; gap:.375rem; }
.lot-btns button{ min-width:2.75rem; min-height:2.75rem; padding:0 .75rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:var(--card); color:var(--foreground); font-family:var(--font-sans); font-size:1rem; cursor:pointer; }
.lot-btns button:disabled{ opacity:.4; cursor:default; }
.lot-card .use-caveat{ max-width:640px; margin-inline:auto; }

/* ── the packet block under the range ───────────────────────────────────── */
.pk-share{ margin:1.25rem 0; padding:1rem 1.125rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); }
.pk-share .label{ margin:0 0 .35rem; }
.pk-share-btns{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 .35rem; }
.btn-ghost{ background:transparent; color:var(--foreground); border:1px solid var(--border); }
@media (max-width:48rem){
  .voice-launch{ width:3rem; height:3rem; padding:0; justify-content:center; border-radius:50%; }
  .voice-launch span{ display:none; }   /* mic only on phones: the pill was covering the chips */
}

/* ── variant B: paged ─────────────────────────────────────────────────────── */
html.paged .step-block, html.paged #result{ display:none; }
html.paged .step-block.pg-on, html.paged #result.pg-on{ display:block; opacity:1; transform:none; }
html.paged #step2.pg-on{ border:0; padding:0; }
html.paged #configure .steps{ margin-top:1.5rem; }
html.paged .step-skip{ display:none; }
/* until the range step, the rest of the page waits behind the flow */
html.paged:not(.pg-done) #configure ~ section{ display:none; }
html.paged:not(.pg-done) #stickyCta{ display:none; }
html.paged #configure{ min-height:calc(100vh - 6rem); }
.pg-nav{ position:sticky; bottom:0; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.25rem; padding:.75rem .9rem;
  background:color-mix(in oklab, var(--card) 80%, transparent); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 -6px 24px -18px rgba(0,0,0,.4); }
.pg-count{ font-family:var(--font-sans); font-size:.8125rem; color:var(--muted-foreground); }
html:not(.paged) .pg-nav{ display:none; }
html.paged #result{ margin-top:1.25rem; }
html.paged #result .wrap{ padding-top:0; }

/* ── wayfinding pass: the rail says where you are; labels stop whispering ── */
.steps{ gap:0; margin-top:2.25rem; max-width:64rem; margin-inline:auto; font-size:.9375rem; }
.steps li{ flex:1 1 0; position:relative; padding:0 .5rem .9rem; justify-content:center; text-align:center; gap:.6rem; color:var(--muted-foreground); }
.steps li::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--border); border-radius:2px; transition:background-color var(--t-med, .26s) var(--ease-out, ease); }
.steps li.is-done::after{ background:var(--wood); }
.steps li.is-current::after{ background:var(--primary); height:4px; }
.steps li.is-current{ color:var(--foreground); font-weight:700; }
.step-num{ width:2rem; height:2rem; font-size:.875rem; }
.steps li.is-done .step-num{ font-size:0; }
.steps li.is-done .step-num::before{ content:''; width:.55rem; height:.3rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); display:block; }
@media (max-width:48rem){
  .steps{ flex-wrap:nowrap; }
  .steps li{ padding:0 .25rem .75rem; gap:.35rem; }
  .steps li:not(.is-current) > span:last-child{ display:none; }
}
/* step head: the number carries the weight, the label stops being a whisper */
.step-tag{ font-size:.8125rem; letter-spacing:.14em; }
.sb-head .h3{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); line-height:1.1; }
.step-lede{ font-size:1rem; }
#use .use-group .label, .use-groups .label, .build-out .label, .cfg-field .label, .lot-head .label{ font-size:.8125rem; letter-spacing:.12em; color:var(--foreground); }
.chip{ font-size:.9rem; padding:.8rem 1rem; }
.chip-dim{ font-size:.75rem; }
/* the sticky bar names the step you are on — desktop only. styles.css hides
   this copy under 640px on purpose; an unscoped display:flex here defeated
   that and wrapped the bar onto four lines, eating a fifth of a phone screen. */
@media (min-width:40.0625rem){ .sticky-cta p{ display:flex; align-items:baseline; gap:.75rem; } }
.sticky-cta .sc-step{ font-weight:700; color:#fff; }
.sticky-cta .sc-step:empty{ display:none; }

/* ── see it at your place ───────────────────────────────────────────────────
   The composite happens in the visitor's own browser: their photo is never
   uploaded, which is why the copy can say so. Same drag / size / turn idiom as
   the lot footprint above. */
/* The `hidden` attribute must always win. A UA rule loses every specificity tie
   to an author `display:`, which had already un-hidden the place tools and the
   lot card. */
[hidden]{ display:none !important; }

/* place-it CSS removed 2026-08-27, see PLACE-IT-POSTMORTEM.md */

/* ── the reveal, the ruler, the roof cards and the finishes door ─────────────
   The fit engine always knew the size; it was said once in body copy at the
   foot of step 1 and then contradicted by a six-up grid that read as a menu.
   Now the answer is stated at size, the ruler carries a mark instead of a
   menu, and everything cosmetic sits behind one door. */
.cfg-verdict{ margin:0 0 1.25rem; }

/* ── v1.19.0 the Ideal stage: recommendation cards ──────────────────────────
   Same idiom as the rest of the panel (bordered card, --primary for the commit
   action, textlink for the soft one). Floor: reading text ≥15px, targets ≥44px. */
.rec-stack{ display:flex; flex-direction:column; gap:.75rem; margin:0 0 1.5rem; }
.rec-eyebrow{ margin:0 0 .25rem; }
.rec-added{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; margin:0; padding:.75rem 1rem;
  border:1px dashed var(--border); border-radius:var(--radius); background:var(--card); }
.rec-added strong{ font-weight:700; }
/* The soft actions are <button>s wearing .textlink — strip the UA button chrome
   exactly as .sum-change does, or they render as grey boxed browser buttons. */
.rec-added .textlink, .rec-actions .textlink, .rec-done .textlink{ background:none; border:0; border-bottom:1px solid color-mix(in oklab, var(--wood) 35%, transparent);
  box-shadow:none; cursor:pointer; font-family:var(--font-sans); font-size:.9375rem; min-height:2.75rem; padding:0 .25rem; color:var(--wood); }
.rec-added .textlink:hover, .rec-actions .textlink:hover, .rec-done .textlink:hover{ color:var(--wood-deep); border-bottom-color:currentColor; }
.rec-added .textlink{ margin-left:.25rem; }
.rec-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1rem 1.1rem; }
.rec-title{ font-family:var(--font-sans); font-weight:700; font-size:1rem; line-height:1.35; margin:0 0 .3rem; }
.rec-why{ font-size:.9375rem; line-height:1.55; margin:0 0 .85rem; }
.rec-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; }
.rec-actions .btn{ min-height:2.75rem; }
.rec-dismiss{ min-height:2.75rem; padding:0 .35rem; font-size:.9375rem; }
.rec-card[data-state="accepted"]{ border-style:dashed; }
.rec-card[data-state="accepted"] .rec-actions{ display:none; }
.rec-done{ display:none; font-family:var(--font-sans); font-size:.9375rem; align-items:center; gap:.9rem; flex-wrap:wrap; }
.rec-card[data-state="accepted"] .rec-done{ display:flex; }
.rec-done strong{ font-weight:700; }
.rec-more{ font-family:var(--font-sans); font-size:.9375rem; color:var(--muted-foreground); margin:0; }

/* ── v1.20.0 custom size ──────────────────────────────────────────────────── */
.custom-size{ margin-top:.75rem; }
/* The panel lives in a ~20rem aside on every viewport, so two columns always —
   four made "Wall height (ft)" wrap three lines and clipped "Overhead doors". */
.custom-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem 1rem; margin:.75rem 0; }
.custom-size .acc-val{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.custom-size[open] .acc-val{ display:none; } /* fields show the value; let the heading breathe while open */
.custom-field > span{ white-space:nowrap; }
#verdictSize{ text-wrap:balance; } /* "Custom 40' × 60'" broke as Custom 40' / × 60' in the aside — balance gives Custom / 40' × 60' */
.custom-field{ display:flex; flex-direction:column; gap:.3rem; font-family:var(--font-sans); font-size:.9375rem; }
.custom-field input{ font:inherit; font-size:1rem; min-height:2.75rem; padding:.4rem .7rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:var(--card); color:inherit; width:100%; }
.custom-field input:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.custom-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin:0 0 .5rem; }
.custom-actions .btn{ min-height:2.75rem; }
.custom-err{ font-family:var(--font-sans); font-size:.9375rem; color:var(--destructive, #9a2a1c); }
.custom-err:empty{ display:none; }
.custom-note{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; color:var(--muted-foreground); margin:0; }
@media (max-width:40rem){ .rec-actions .btn{ flex:1 1 auto; } }
.verdict-size{ margin:0; font-family:var(--font-display, var(--font-sans));
  font-size:2.25rem; line-height:1.05; font-weight:600; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums lining-nums; color:var(--foreground); }
.verdict-why{ margin:.35rem 0 0; font-family:var(--font-sans); font-size:.9375rem;
  line-height:1.5; color:var(--muted-foreground); }
.fit-ledger{ margin:.75rem 0 0; padding:0; list-style:none;
  font-family:var(--font-sans); font-size:.9375rem; line-height:1.7; color:var(--foreground); }
.fit-ledger li{ position:relative; padding-left:1rem; }
.fit-ledger li::before{ content:''; position:absolute; left:0; top:.7em;
  width:.35rem; height:.35rem; border-radius:999px; background:var(--muted-foreground); }
.fit-ledger:empty{ display:none; }

/* Smallest to largest, so it reads as a scale. Scrolls in its own container so
   the page never gains a horizontal scrollbar. */
.cfg-ruler{ display:flex; gap:.5rem; overflow-x:auto; padding:.5rem .125rem .25rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cfg-ruler::-webkit-scrollbar{ display:none; }
.cfg-ruler button{ position:relative; flex:0 0 auto; font-family:var(--font-sans);
  font-size:.9375rem; font-weight:500; line-height:1.2; min-height:2.75rem;
  padding:.7rem .8rem; white-space:nowrap; cursor:pointer;
  color:var(--foreground); background:var(--card);
  border:1px solid oklch(0.55 0.012 70); border-radius:999px; }
.cfg-ruler button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* The mark used to be an absolutely-positioned ::before floating above the
   chip. `overflow-x:auto` forces `overflow-y` to compute as auto too, so the
   scroll container clipped it and it rendered as "ECOMMENDED" at 1440. Nothing
   that must be read now lives outside the chip's own box: the recommendation
   is a ring INSIDE the button, and the word sits above the ruler in normal
   flow where no scroller can touch it. */
.cfg-ruler button.is-rec{ box-shadow: inset 0 0 0 2px var(--wood, #8a5a3c); }
.cfg-ruler button.is-rec[aria-pressed="true"]{ box-shadow: inset 0 0 0 2px var(--card); }
.ruler-rec{ margin:0; font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--wood, #8a5a3c); }
.ruler-rec:empty{ display:none; }
.ruler-note{ margin:.5rem 0 0; font-family:var(--font-sans); font-size:.9375rem;
  line-height:1.5; color:var(--muted-foreground); }
.ruler-note:empty{ display:none; }

/* Steel against shingle is a lifespan conversation, so it gets a real surface
   and a sentence rather than a two-up text toggle. */
.cfg-mat{ display:grid; gap:.5rem; margin-top:.5rem; }
.cfg-mat button{ display:grid; grid-template-columns:2.75rem 1fr; gap:.75rem .875rem;
  align-items:center; text-align:left; padding:.75rem; cursor:pointer;
  background:var(--card); border:1px solid oklch(0.55 0.012 70);
  border-radius:calc(var(--radius) - 2px); }
.cfg-mat button[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.mat-swatch{ width:2.75rem; height:2.75rem; border-radius:calc(var(--radius) - 4px);
  border:1px solid oklch(0.45 0.012 70); }
.mat-shingle{ background:
  repeating-linear-gradient(180deg,#4a4d50 0 5px,#3c3f42 5px 10px); }
.mat-metal{ background:
  repeating-linear-gradient(90deg,#5c6570 0 3px,#48505a 3px 6px); }
.mat-name{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--foreground); }
.mat-note{ grid-column:2; font-family:var(--font-sans); font-size:.9375rem;
  line-height:1.5; color:var(--muted-foreground); }

/* The finishes summary line, now standing alone under the verdict — the door
   it used to sit on was replaced by the finish steps (v1.18.0). */
.fin-sum{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5;
  color:var(--foreground); margin:.75rem 0 0; }

/* ── the finish-step nav (v1.18.3) ──────────────────────────────────────────
   Bordered chips, not weighted text. v1.18.0 shipped these as bare-type tabs
   and Zak's first look said it plainly: they read as words, not as things you
   can press, so they wash into the design. The panel already has one idiom for
   "clickable": the segmented-control chip (size ruler, profile, roofing line).
   The step nav now speaks it too — hairline chip, solid-ink current, moss tick
   on visited — and a scrollable row of chips self-evidently scrolls. */
.fs-nav{ display:flex; gap:.375rem; overflow-x:auto; margin-top:1.25rem;
  padding:.25rem .125rem .75rem; scrollbar-width:none; }
.fs-nav::-webkit-scrollbar{ display:none; }
.fs-nav button{ flex:0 0 auto; padding:.6rem .85rem; min-height:2.75rem; cursor:pointer;
  background:var(--card); border:1px solid oklch(0.55 0.012 70);
  border-radius:calc(var(--radius) - 2px);
  font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--foreground);
  white-space:nowrap; }
.fs-nav button:hover{ border-color:var(--ring); }
.fs-nav button[aria-current="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.fs-nav button.fs-done::before{ content:'✓ '; color:var(--moss, #4e7a52); }
.fs-nav button[aria-current="true"].fs-done::before{ color:currentColor; }
.fs-panel{ padding-top:1rem; }
.fs-actions{ margin:1rem 0 0; }
.fs-actions .btn{ width:100%; justify-content:center; }

/* ── the qualifying wizard (v1.18.0) ──────────────────────────────────────── */
.wz{ margin-top:1.5rem; }
.wz-progress{ font-family:var(--font-sans); font-size:.8125rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted-foreground); margin:0 0 .35rem; }
.wz-answers{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.wz-answers .wz-a{ font-size:.9375rem; }
.wz-actions{ display:flex; align-items:center; gap:1.25rem; margin:1.25rem 0 0; }
.wz-back{ background:none; border:0; cursor:pointer; }
.sum-change{ background:none; border:0; cursor:pointer; font-family:var(--font-sans);
  font-size:.9375rem; margin-left:.35rem; padding:.35rem .25rem; min-height:2.75rem; }

/* ── v1.21.0 — the two doors ─────────────────────────────────────────── */
.doors{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:.75rem; }
@media (min-width:48rem){ .doors{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.door{ display:flex; flex-direction:column; gap:.4rem; text-align:left; padding:1.1rem 1.2rem 1.2rem; width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:calc(var(--radius) + 2px);
  cursor:pointer; transition:border-color 140ms ease, box-shadow 140ms ease; font-family:var(--font-sans); color:var(--foreground); }
.door:hover{ border-color:oklch(0.55 0.012 70); }
.door[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.door:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.door-h{ font-family:var(--font-display); font-size:1.375rem; font-weight:500; line-height:1.22; letter-spacing:-.012em; }
.door-p{ font-size:.9375rem; line-height:1.5; color:var(--muted-foreground); }
#wzPurpose{ margin-top:1.5rem; }
#wzPurpose .pq-q{ margin-bottom:.25rem; }
#wzPurpose .wz-actions{ margin-top:1rem; }
.door-plan{ margin-top:1.5rem; }
.door-plan .custom-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:48rem){ .door-plan .custom-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.door-notes{ margin:.25rem 0 .75rem; }
.door-notes textarea{ font:inherit; font-size:1rem; line-height:1.4; min-height:4.5rem; padding:.5rem .7rem; border:1px solid var(--border);
  border-radius:calc(var(--radius) - 2px); background:var(--card); color:inherit; width:100%; resize:vertical; }
.door-notes textarea:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.use-custom .btn{ margin-top:.5rem; }

/* ── v1.22.0-funnel: progressive capture ────────────────────────────────────
   One email keeps the build (rung 1, under the reveal; rung 2, under the lot
   view). The gate is the ?gate=1 campaign variant only. Floor: reading text
   ≥15px, inputs ≥16px, targets ≥44px. */
.save-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1rem 1.1rem; margin:0 0 1.25rem; }
.save-lede{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; margin:.25rem 0 .75rem; }
/* Always stacked: the panel is ~320px wide even on desktop, so a side-by-side
   input + button squeezed the email field to a few characters. */
.save-form{ display:grid; grid-template-columns:1fr; gap:.5rem; }
.save-form .btn{ width:100%; justify-content:center; }
.save-form input, .gate-form input{ min-height:2.75rem; font-size:1rem; padding:.6rem .75rem; border:1px solid var(--border); border-radius:.6rem;
  background:var(--card); color:var(--foreground); font-family:var(--font-sans); min-width:0; width:100%; }
.save-form input:focus-visible, .gate-form input:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.save-form .btn, .gate-form .btn{ white-space:nowrap; }
.save-out{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; color:var(--foreground); margin:.6rem 0 0; }
.save-card .consent-note, .lot-save .consent-note, .gate .consent-note{ margin-top:.6rem; }
.save-err, .gate-err{ font-family:var(--font-sans); font-size:.875rem; margin:.4rem 0 0; }
.share-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin:0 0 1.25rem; font-family:var(--font-sans); }
.share-row .label{ margin:0; width:100%; }
.share-btn{ min-height:2.75rem; padding:.6rem .95rem; border:1px solid var(--border); border-radius:999px; background:var(--card);
  color:var(--foreground); font-family:var(--font-sans); font-size:.9375rem; text-decoration:none; display:inline-flex; align-items:center; cursor:pointer; }
.share-btn:hover{ border-color:var(--ring); }
.share-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.share-out{ font-size:.9375rem; color:var(--muted-foreground); margin:0; width:100%; min-height:0; }
.share-out:empty{ display:none; }
/* ask cards are not .rec-card on purpose: the three-visible cap (and every harness that counts .rec-card) is about suggestions; the two asks sit beside them. */
.ask-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1rem 1.1rem; }
.ask-card .rec-done{ display:none; font-family:var(--font-sans); font-size:.9375rem; align-items:center; gap:.9rem; flex-wrap:wrap; }
.ask-card .rec-done strong{ font-weight:700; }
.rec-ask .ask-opts{ gap:.4rem; }
.rec-ask .chip{ font-size:.9375rem; }
.rec-ask[data-state="answered"]{ border-style:dashed; }
.rec-ask[data-state="answered"] .rec-actions{ display:none; }
.rec-ask[data-state="answered"] .rec-done{ display:flex; }
.lot-save{ max-width:640px; margin:1rem auto 0; padding-top:1rem; border-top:1px solid var(--border); text-align:left; }
.gate{ border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:1.25rem; margin:0 0 1.25rem; }
.gate .pq-q{ margin-top:0; }
.gate-form{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:.5rem; align-items:start; }
@media (max-width:640px){ .gate-form{ grid-template-columns:1fr; } }

/* ── LIQUID GLASS card system (Zak, standing rule, 2026-09-04) ─────────────
   Every card-like surface: translucent light fill, backdrop blur + saturation,
   1px light edge with an inner top highlight, one soft long shadow. The
   configurator section carries a quiet ambient colour field behind it so the
   blur has something to pick up; the 3D stage and lot imagery do the rest.
   Contrast: text sits on ≥60% white over cream — AA holds (floor audit walks it). */
:root{
  --glass-bg: color-mix(in oklab, #ffffff 58%, transparent);
  --glass-panel: color-mix(in oklab, #ffffff 40%, transparent);
  --glass-radius: .9rem;
  --glass-bg-strong: color-mix(in oklab, #ffffff 78%, transparent);
  --glass-edge: color-mix(in oklab, #ffffff 55%, var(--border));
  --glass-hi: inset 0 1px 0 color-mix(in oklab, #ffffff 85%, transparent);
  --glass-shadow: 0 18px 40px -26px oklch(0.25 0.02 70 / .45), 0 1px 2px oklch(0.25 0.02 70 / .06);
}
#configure{ position:relative; isolation:isolate; }
#configure::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40rem 28rem at 10% 16%, color-mix(in oklab, var(--accent, #FECA04) 42%, transparent), transparent 70%),
    radial-gradient(36rem 26rem at 90% 40%, oklch(0.78 0.06 240 / .45), transparent 70%),
    radial-gradient(32rem 24rem at 55% 92%, color-mix(in oklab, var(--wood, #8a6a3a) 26%, transparent), transparent 70%); }
.use-card, .rec-card, .ask-card, .rec-added, .save-card, .range-card, .door, .form-card, .gate, .lot-card, .cfg-panel, .use-custom{
  background:var(--glass-bg); border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:var(--glass-hi), var(--glass-shadow); }
.cfg-panel{ border-left:1px solid var(--glass-edge); background:var(--glass-panel); }
.use-card, .rec-card, .ask-card, .rec-added, .save-card, .range-card, .door, .gate, .lot-card, .use-custom{ border-radius:var(--glass-radius); }
/* cards that sit on the dark closing section stay solid: muted text on translucent white over charcoal fell to 4.24:1 */
.section-dark .form-card{ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; }
.rec-card, .ask-card, .save-card, .rec-added{ background:var(--glass-bg-strong); }
.rec-added{ border-style:dashed; }
.door{ transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.door:hover{ transform:translateY(-2px); background:var(--glass-bg-strong); }
.door[aria-pressed="true"]{ background:var(--glass-bg-strong); border-color:color-mix(in oklab, var(--accent, #FECA04) 60%, var(--glass-edge)); }
.save-form input, .gate-form input, .range-form input{ background:color-mix(in oklab, #ffffff 82%, transparent); }
.share-btn, .chip{ background:color-mix(in oklab, #ffffff 70%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.chip[aria-pressed="true"]{ background:var(--primary); }
@media (prefers-reduced-transparency: reduce){
  .use-card, .rec-card, .ask-card, .rec-added, .save-card, .range-card, .door, .form-card, .gate, .lot-card, .cfg-panel, .use-custom{ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; } }

/* ── V2 funnel: COMPLETE / CAPTURE / QUOTE ──────────────────────────────── */
.viz-area{ margin:1.5rem auto 0; max-width:48rem; }
.viz-still{ display:block; width:100%; height:auto; border-radius:var(--glass-radius, .9rem); border:1px solid var(--glass-edge, var(--border)); box-shadow:var(--glass-shadow, none); background:#EFEAE1; }
.viz-slots{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.viz-slots:empty{ display:none; }
.viz-slot[hidden]{ display:none !important; }
.quote-block{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.pack-card{ margin:0 0 1rem; }
.pack-card .btn{ margin-top:.5rem; }
.rf-optional{ font-weight:400; color:var(--muted-foreground); }

/* ── CRO pass (2026-09-05): reward, property prompt, complete state, quote qualification ── */
.alt-route{ margin:.9rem 0 0; font-family:var(--font-sans); font-size:.9375rem; }
.alt-route .textlink{ font-size:.9375rem; min-height:2.75rem; padding:.5rem .25rem; }
.verdict-eyebrow{ margin:0 0 .35rem; color:var(--wood-deep); }
.verdict-kind{ font-family:var(--font-sans); font-size:1rem; font-weight:600; margin:-.25rem 0 .4rem; }
.rec-choice{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.75rem 0 0; }
.rec-choice .chip{ font-size:.9375rem; }
.rec-choice .chip[aria-pressed="true"] .chip-dim{ color:var(--primary-foreground); }
.lot-prompt .wz-actions{ margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; }
.lot-prompt .textlink{ min-height:2.75rem; font-size:.9375rem; }
.result-size{ font-size:clamp(2.4rem,6vw,3.6rem); }
.result-kind{ font-family:var(--font-sans); font-size:1.125rem; font-weight:600; margin:.25rem 0 0; }
.result-lot{ max-width:48rem; margin:1.25rem auto 0; text-align:center; }
.result-lot .lot-frame{ max-width:420px; margin:.5rem auto 0; }
.qual-form .qual-q{ font-family:var(--font-sans); font-size:.9375rem; font-weight:600; margin:0 0 .4rem; }
.qual-group{ margin-bottom:.35rem; }
.qual-form .chip{ font-size:.9375rem; }
#quoteCta{ margin-top:.25rem; }
/* the three size moves must read as a pressed control whatever the panel glass does */
#recChoice .chip[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
#recChoice .chip[aria-pressed="true"] .chip-dim{ color:oklch(1 0 0 / .78); }
/* text actions rendered as <button> must read as links, not UA buttons */
button.textlink{ background:none; border:0; padding:.5rem .25rem; font:inherit; font-family:var(--font-sans); font-size:.9375rem; color:var(--wood-deep); text-decoration:underline; text-underline-offset:.2em; cursor:pointer; min-height:2.75rem; }
button.textlink:hover{ color:var(--foreground); }
button.textlink:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:.3rem; }

/* ── v2.1 (2026-09-07): the two-column builder, need tiles, live summary ────
   Flow on the left, the garage on the right and sticky through every stage.
   Visual first on phones. The old .cfg two-column grid is retired. */
.builder{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:1.25rem; align-items:start; margin-top:1.5rem; }
.builder-flow{ min-width:0; }
.builder-flow .step-block{ margin-top:1.25rem; }
.builder-flow .step-block:first-child{ margin-top:0; }
.builder .cfg{ display:block; background:none; border:0; }
.builder-visual{ position:sticky; top:4.75rem; min-width:0; }
.builder-visual .cfg-stage{ position:relative; top:auto; border-radius:var(--glass-radius, .9rem); border:1px solid var(--glass-edge, var(--border)); box-shadow:var(--glass-shadow, none); }
.builder-visual three-d-stage{ height:clamp(22rem, 58vh, 36rem); }
.stage-badge{ position:absolute; top:.875rem; left:.875rem; z-index:2; font-family:var(--font-sans); font-size:.9375rem; font-weight:700; letter-spacing:.02em;
  padding:.45rem .75rem; border-radius:999px; background:oklch(1 0 0 / .92); border:1px solid oklch(0.55 0.012 70); color:var(--foreground); }
.builder-visual{ position:sticky; }
.builder-visual .cfg-stage{ overflow:visible; }
.builder-visual .cfg-stage three-d-stage{ border-radius:inherit; overflow:hidden; }
.stage-summary{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin-top:.75rem; padding:.9rem 1rem;
  background:var(--glass-bg-strong, var(--card)); border:1px solid var(--glass-edge, var(--border)); border-radius:var(--glass-radius, .9rem);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-family:var(--font-sans); }
.stage-summary span{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground); }
.stage-summary strong{ display:block; font-size:.9375rem; line-height:1.3; margin-top:.15rem; overflow-wrap:anywhere; }
.result-block{ margin-top:1.25rem; }
.result-block .result-wrap{ padding:0; }
.result-block .result-spec{ margin:1.5rem 0; max-width:none; }
.result-block .range-card{ max-width:none; margin-top:1.5rem; }
.result-block .viz-area{ max-width:none; }
.result-block .center{ text-align:left; margin-inline:0 !important; }
/* need tiles: six line-icon cards */
.pq-needs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.pq-needs .need-card{ display:block; padding:0; min-height:0; }
.pq-needs .need-ico{ display:block; width:3rem; height:2rem; margin:1rem 1rem 0; color:var(--wood-deep); }
.pq-needs .need-ico svg{ width:100%; height:100%; }
.pq-needs .need-card[aria-pressed="true"] .need-ico{ color:var(--ink); }
.pq-needs .pq-name{ padding:.6rem .85rem .7rem; }
/* progressive disclosure inside the finish panels */
details.more-fold{ margin:.75rem 0 0; border-top:1px solid var(--border); padding-top:.5rem; }
details.more-fold > summary{ cursor:pointer; list-style:none; font-family:var(--font-sans); font-size:.9375rem; font-weight:600; color:var(--wood-deep); padding:.5rem 0; min-height:2.75rem; display:flex; align-items:center; gap:.5rem; }
details.more-fold > summary::-webkit-details-marker{ display:none; }
details.more-fold > summary::before{ content:'+'; font-weight:700; width:1rem; }
details.more-fold[open] > summary::before{ content:'−'; }
details.more-fold > .cfg-field, details.more-fold > .cfg-seg, details.more-fold > .chips{ margin-top:.5rem; }
@media (max-width:60rem){
  .builder{ grid-template-columns:1fr; gap:1rem; }
  .builder-visual{ order:-1; position:sticky; top:0; z-index:3; }
  .builder-visual .cfg-stage{ border-radius:var(--glass-radius, .9rem); }
  .builder-visual three-d-stage{ height:40vh; min-height:14rem; }
  .stage-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:.5rem; }
  .pq-needs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* the options fold lives inside #optionChips; the chips row above it stays a row */
#optionChips{ display:flex; flex-wrap:wrap; gap:.4rem; }
#optionChips > details.more-fold{ flex:1 1 100%; }

/* ── v2.2: lifestyle concepts + the size ladder ── */
.concepts{ margin:1rem 0 0; padding-top:.9rem; border-top:1px solid var(--border); }
.concepts .label{ margin:0 0 .5rem; }
.label-note{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted-foreground); }
.concept-chip{ font-size:.9375rem; }
.concepts .use-caveat{ margin-top:.6rem; }

.pq-needs .pq-art{ aspect-ratio:4/3; object-fit:cover; object-position:center 55%; }