/* kitchen-cabinet-design-system — client presentation (W11 fidelity rework, R-24)
   Persian-first RTL 6-route hash-FSM shell. Zero external requests; all fonts self-hosted.

   W11 TYPE LAW (FA-7, intake §4-E — supersedes FA-3's whole-project scope):
   - Vazirmatn (Regular/Medium/Bold woff2, OFL) is THE presentation face — body, nav,
     pills, gallery/specs/3D chrome, buttons; its own Latin is the Latin face.
   - Far.Shafigh (Far_Shafigh.ttf, Regular) is RESTRICTED to the identity cards
     (Scene One) + the contact-card identity text — via --font-display ONLY.
   - Octanis Sans REMOVED from active use (@font-face removed; the file stays in
     source assets + the central font library; NOT shipped to dist).
   - font-synthesis: none stays — no faux weights, ever.
   - Letter-spacing BANNED on Persian (breaks joining); legal only inside .ltr/.en runs.

   W11 TOKEN LAW (intake §4-D): the UI chrome tokens are single-sourced in
   presentation/build/palette.json ("ui" block) -> embedded in data.js (D.ui) ->
   applied by app.js as CSS custom properties. The :root values below are the
   IDENTICAL static fallbacks (used until data.js loads). The GLB material
   variants are NOT touched — gold is UI chrome, never cabinet materials. */

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Far.Shafigh";
  src: url("assets/fonts/Far_Shafigh.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C;
}
/* Metric-adjusted Tahoma fallback for the Arabic ranges (measured W10-3:
   size-adjust 109% — font-witness delta −0.05%; ascent/descent pre-divided). */
@font-face {
  font-family: "Fa-Fallback-Adj";
  src: local("Tahoma");
  size-adjust: 109%;
  ascent-override: 60.9%; descent-override: 30.8%; line-gap-override: 0%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C;
}

:root {
  /* ---- W11 UI tokens (palette.json "ui" — app.js overrides with identical values) ---- */
  --ui-primary: #D4AF37;
  --ui-primary-hover: #F4D03F;
  --ui-surface: #1A1A1A;
  --ui-glass: rgba(26, 26, 26, 0.45);
  --ui-glass-strong: rgba(26, 26, 26, 0.6);
  --ui-border-gold: rgba(212, 175, 55, 0.25);
  --ui-border-gold-strong: rgba(212, 175, 55, 0.3);
  --ui-text: #FFFFFF;
  --ui-text-dim: #D1D5DB;
  --ui-card-blur: 12px;
  --ui-radius: 16px;
  --ui-radius-card: 20px;
  --ui-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  --ui-divider: rgba(212, 175, 55, 0.3);
  /* ---- fonts ---- */
  --font-body: "Vazirmatn", "Tahoma", sans-serif;
  --font-display: "Far.Shafigh", "Fa-Fallback-Adj", "Tahoma", "Vazirmatn", sans-serif;
  /* ---- background config fallbacks (background.json values; app.js re-sets them).
     W11-8 (F-26-2 DISCLOSED DEVIATION, recorded in R-27): the §4-B ~1.5-2px band was a
     mis-derivation; the brief's visible-glassmorphism row + reference 1 govern — 5px. */
  --bg-blur: 5px;
  --wash-1: 0.82;  /* scene-one image brightness wash */
  --wash-2: 0.93;  /* scene-two image brightness wash */
  /* W11-8 (F-26-5 INTERIM art-direction default, disclosed in R-27): the warm grade for
     the SCENE BACKGROUNDS ONLY (backdrop layers; never the gallery/specs images). */
  --grade-sat: 1.16;
  --grade-warm: 0.13;
  /* ---- structure + motion (opacity/transform only; disabled under reduced motion) ---- */
  --pad: clamp(18px, 3.5vw, 44px);
  --touch-min: 44px;
  --dur-fast: 150ms;
  --dur-scene: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100dvh; overflow: hidden; } /* the FSM law: the PAGE never scrolls; pages scroll internally */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--ui-surface);
  color: var(--ui-text);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body, button, input { font-synthesis: none; } /* no faux weights, ever */
img, svg, video { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.45; margin: 0 0 .4em; font-weight: 500; }
h2 { font-size: clamp(19px, 2.4vw, 24px); color: var(--ui-text); }
h3 { font-size: clamp(17px, 2vw, 21px); color: var(--ui-text); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.scene-focus:focus, .page-scene:focus { outline: none; } /* programmatic focus targets */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ltr, .en { direction: ltr; unicode-bidi: isolate; } /* Latin = Vazirmatn's own Latin (FA-7) */

main { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* never intercepts — the shared backdrop's slices stay hoverable beneath the overlay scenes */
.page-scene { position: absolute; inset: 0; }
.page-scene:not([hidden]) { animation: scene-in var(--dur-scene) var(--ease) both; }
@keyframes scene-in { from { opacity: 0; } to { opacity: 1; } } /* opacity-only */
.page-dark { pointer-events: auto; } /* the functional pages own their whole surface */
.scene-one, .scene-hub { overflow: hidden; pointer-events: none; } /* hover passes to the slices; interactive children re-enable */
.scene-one > *, .scene-hub > * { pointer-events: auto; }

/* ================================================================
   THE SHARED TORN-PAPER BACKGROUND (#backdrop — routes #/s/1 + #/s/2)
   Four real-render panels (natural-scale windows) + three interlocking
   tear boundaries (ONE shared path per boundary -> complementary
   clip-paths + the visible torn-edge SVG line from the same points).
   ================================================================ */
.backdrop {
  position: fixed; inset: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #121212;
  transition: filter 480ms var(--ease), transform 480ms var(--ease);
}
body[data-scene="1"] .backdrop {
  filter: blur(var(--bg-blur)) saturate(var(--grade-sat));
  transform: scale(1.015); /* hides blur edge fringing */
}
body[data-scene="2"] .backdrop { filter: saturate(var(--grade-sat)); transform: none; }
/* W12 §2 (FA-9): the PRE-ENTRY interaction gate. The single source of truth is the
   FSM — applyRoute sets backdrop.inert (unfocusable, no handlers) + body[data-scene].
   This rule mirrors the same scene state for pointer hit-testing (belt-and-braces
   with the UA's inert behavior): on Scene One no slice can scale, glow, show its
   pop card or a pointer cursor. NOT a broad CSS-only disable: the state lives in
   the FSM, and on the hub scene the panels stay fully interactive. */
body[data-scene="1"] .backdrop,
body[data-scene="1"] .backdrop * { pointer-events: none; }
/* W11-8 (F-26-5): the interim warm grade — a translucent gradient overlay on the
   backdrop ONLY (scenes 1+2; the backdrop is [hidden] on #/s/3..6, so the gallery/
   specs images always show the true files). Config-driven via --grade-warm. */
.backdrop::after {
  content: "";
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(214, 178, 96, var(--grade-warm)),
    rgba(112, 84, 40, var(--grade-warm)));
}

.slice { position: relative; min-width: 0; }
.slice-clip { position: absolute; inset: 0; } /* clip-path set inline by app.js (complementary polygons) */
.slice-img {
  position: absolute; /* left/top/width/height set by app.js: the natural-scale window */
  max-width: none; /* the window is WIDER than its panel by design — the global img reset must not clamp it */
  filter: brightness(var(--wash, 0.95));
  transition: filter 260ms var(--ease), opacity 260ms var(--ease);
  user-select: none; -webkit-user-drag: none;
}
body[data-scene="1"] .backdrop .slice-img { --wash: var(--wash-1); }
body[data-scene="2"] .backdrop .slice-img { --wash: var(--wash-2); }
/* W12 §5 (FA-10): the MOBILE presentation surface (≤720px, the app's established
   mobile breakpoint) gets the REDUCED background treatment from background.json's
   optional "mobile" block (app.js exposes it as the *-mobile vars; the desktop
   values above are the var() fallbacks, so a config without the block = desktop
   treatment everywhere). Purely VISUAL: interaction stays owned by the FSM scene
   state (§2) — a clearer background can never re-enable pre-entry interaction.
   CASCADE LAW (W12-7 repair of QA FINDING-G1-1): this block MUST stay AFTER the
   desktop .backdrop / .backdrop::after / --wash declarations above — the cascade
   is same-specificity order-based, so mobile overrides placed before them are
   dead code. */
@media (max-width: 720px) {
  body[data-scene="1"] .backdrop { filter: blur(var(--bg-blur-mobile, var(--bg-blur))) saturate(var(--grade-sat)); }
  body[data-scene="1"] .backdrop .slice-img { --wash: var(--wash-1-mobile, var(--wash-1)); }
  body[data-scene="2"] .backdrop .slice-img { --wash: var(--wash-2-mobile, var(--wash-2)); }
  .backdrop::after {
    background: linear-gradient(180deg,
      rgba(214, 178, 96, var(--grade-warm-mobile, var(--grade-warm))),
      rgba(112, 84, 40, var(--grade-warm-mobile, var(--grade-warm))));
  }
}

/* Interactive panels (intake §4-C — BOTH scenes): the hovered paper piece
   highlights + grows slightly (overlapping its divider), the tear edge glows
   (drop-shadow follows the torn clip shape), the rest de-emphasizes slightly. */
.slice { transition: transform 220ms var(--ease); }
.slice:hover, .slice:focus-within {
  z-index: 8; /* W11-8 (F-26-10): the growing slice rides ABOVE the tear SVGs (z 7) */
  transform: scale(1.04); /* visible growth, still restrained */
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.5)); /* tear-edge glow, slightly stronger */
}
.backdrop:has(.slice:hover) .slice:not(:hover) .slice-img,
.backdrop:has(.slice:focus-within) .slice:not(:focus-within) .slice-img {
  filter: brightness(0.66) blur(2px); /* slight — not heavy */
}
.backdrop:has(.slice:hover) .slice:hover .slice-img,
.backdrop:has(.slice:focus-within) .slice:focus-within .slice-img {
  filter: brightness(1.02) saturate(1.03);
}
body:has(.slice:hover) .id-cards, body:has(.slice:focus-within) .id-cards { opacity: 0.72; }
.id-cards { transition: opacity 260ms var(--ease); }

.slice-trigger {
  position: absolute; inset: 0; z-index: 2; width: 100%;
  background: transparent; border: 0; color: transparent; padding: 0;
}
.slice-trigger:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: -3px; }

.slice-broken {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ui-text-dim); font-size: 12px; background: #171512; padding: 8px; text-align: center;
}

/* the small glass CTA card ON the slice (a button-sized card, not a big modal) */
.slice-pop {
  position: absolute; z-index: 8; top: clamp(64px, 14%, 150px); left: 50%;
  transform: translate(-50%, 8px) scale(0.97);
  width: max-content; max-width: min(240px, 78vw);
  padding: 10px 12px; text-align: center;
  background: var(--ui-glass-strong); backdrop-filter: blur(var(--ui-card-blur)); -webkit-backdrop-filter: blur(var(--ui-card-blur));
  border: 1px solid var(--ui-border-gold-strong); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.slice:hover .slice-pop, .slice:focus-within .slice-pop { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.slice-pop strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; color: var(--ui-text); }
.slice-pop-btn {
  background: rgba(212, 175, 55, 0.14); border: 1px solid var(--ui-border-gold-strong);
  color: var(--ui-primary-hover); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 500;
  min-height: 32px;
}
.slice-pop-btn:hover { background: rgba(212, 175, 55, 0.26); border-color: var(--ui-primary); }

/* the visible torn-paper edge line (same points as the clip polygons) —
   height:100% is load-bearing: an SVG is a replaced element and ignores the
   top/bottom stretch, falling back to its intrinsic viewBox ratio.
   W11-8 (F-26-1): the strokes restyled to the REFERENCES — a THIN LIGHT
   torn-paper separator (soft warm shadow + light-gold + pale edge), never the
   near-black rifts; every stroke keeps vector-effect:non-scaling-stroke, so
   the seam width is viewport-stable (320 → 1920). */
.tear { position: absolute; top: 0; bottom: 0; height: 100%; z-index: 7; pointer-events: none; }
.tear path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tear .t-shadow { stroke: rgba(96, 74, 34, 0.28); stroke-width: 2px; opacity: 0.7; }
.tear .t-gold { stroke: rgba(212, 175, 55, 0.5); stroke-width: 1.3px; }
.tear .t-edge { stroke: rgba(243, 232, 205, 0.9); stroke-width: 0.8px; }

/* ================================================================
   SCENE ONE — the two approved identity cards + the ~5 s CTA. NOTHING else.
   ================================================================ */
.id-cards {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(40px, 11.5vw, 200px); /* the reference gap: ~11–12% of viewport width */
  padding: 0 4vw;
  pointer-events: none; /* the container spans the viewport — it must never block the slice hovers */
}
.id-card {
  pointer-events: auto;
  width: clamp(300px, 33vw, 540px); aspect-ratio: 1.7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: clamp(16px, 2vw, 28px);
  background: var(--ui-glass);
  backdrop-filter: blur(var(--ui-card-blur)); -webkit-backdrop-filter: blur(var(--ui-card-blur));
  border: 1px solid var(--ui-border-gold-strong);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(232, 210, 150, 0.18);
}
.card-icon { width: 64px; height: 64px; color: var(--ui-primary); flex: none; }
.card-icon svg { width: 100%; height: 100%; }
.card-title {
  font-family: var(--font-display); /* Far.Shafigh — identity cards ONLY (FA-7) */
  font-weight: 400; /* Shafigh Regular — hierarchy via size/colour */
  font-size: clamp(19px, 1.9vw, 24px);
  color: var(--ui-text); margin: 0; line-height: 1.5;
}
.card-sub { margin: 0; font-size: clamp(14px, 1.15vw, 16px); color: var(--ui-text-dim); line-height: 1.9; }
.card-sub + .card-sub { margin-top: -4px; }
.card-sub .ph { color: rgba(209, 213, 219, 0.72); }

.cta-pill {
  position: fixed; left: 50%; bottom: calc(clamp(22px, 5vh, 44px) + var(--sab, 0px)); z-index: 30;
  transform: translateX(-50%) translateY(10px);
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 0.85em 2.1em; min-height: clamp(54px, 7.2vh, 80px);
  min-width: clamp(230px, 22.5vw, 460px); /* W11-8 (F-26-8): reference-proportional (≈21-22% of the viewport at 1440-1920), still collision-free at 320 */
  border-radius: 999px;
  background: linear-gradient(135deg, #ECD07C, #C09832);
  color: #241C0C; font-weight: 500; font-size: clamp(16px, 0.55vw + 10px, 21px); text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 26px rgba(212, 175, 55, 0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.cta-pill.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cta-pill:hover { filter: brightness(1.06); }
.cta-arrow { width: clamp(22px, 1.4vw, 27px); height: clamp(22px, 1.4vw, 27px); flex: none; }

/* ================================================================
   SCENE TWO — the hub: glass pill nav per reference 2 (bottom area).
   ================================================================ */
.hub-pills {
  position: absolute; bottom: calc(clamp(26px, 7vh, 60px) + var(--sab, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  max-width: calc(100vw - 24px); padding: 0 12px; margin: 0;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; min-height: 44px; border-radius: 999px;
  background: var(--ui-glass-strong);
  backdrop-filter: blur(var(--ui-card-blur)); -webkit-backdrop-filter: blur(var(--ui-card-blur));
  border: 1px solid var(--ui-border-gold);
  color: var(--ui-text); text-decoration: none;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--ui-shadow);
  transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}
.pill svg { width: 24px; height: 24px; flex: none; color: var(--ui-primary); } /* W11-8 (F-26-9): icons gold #D4AF37, 24px stroke 1.5 */
.pill:hover, .pill:focus-visible {
  border-color: var(--ui-primary);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.35), var(--ui-shadow); /* gold fill glow */
  background: rgba(212, 175, 55, 0.12);
  color: var(--ui-primary-hover);
}
.pill:active { background: var(--ui-primary); color: #241C0C; }
.pill:active svg { color: #241C0C; } /* keep the icon legible on the pressed gold fill */

/* ================================================================
   PAGES 3–6 — dark glass surfaces, shared chrome.
   ================================================================ */
.page-dark {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(212, 175, 55, 0.07), transparent 60%),
    var(--ui-surface);
  overflow-y: auto;
  padding: clamp(18px, 4vh, 40px) var(--pad) clamp(64px, 9vh, 110px);
}
.page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(18px, 3.5vh, 34px); }
.page-head-text { max-width: 72ch; }
.kicker { font-size: 13px; color: var(--ui-primary); margin: 0 0 2px; }
.lede { color: var(--ui-text-dim); font-size: clamp(14px, 1.1vw, 16px); margin: 0; }
.back-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-height: 40px; border-radius: 999px;
  background: var(--ui-glass); border: 1px solid var(--ui-border-gold);
  color: var(--ui-text-dim); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.back-pill svg { width: 18px; height: 18px; }
.back-pill:hover, .back-pill:focus-visible { border-color: var(--ui-primary); color: var(--ui-primary-hover); box-shadow: 0 0 16px rgba(212, 175, 55, 0.25); }
.footnote { font-size: 13px; color: var(--ui-text-dim); }
.caveat {
  font-size: 13.5px; color: var(--ui-text-dim);
  border-inline-start: 3px solid var(--ui-primary);
  padding: 8px 14px; background: var(--ui-glass-strong); border-radius: 8px;
}
.caveat-strong { border-inline-start-color: #C97B4A; color: #E8C9B0; margin-bottom: 14px; }
.chip {
  display: inline-block; font-size: 11.5px; padding: 1px 9px; border-radius: 999px;
  background: rgba(212, 175, 55, 0.12); color: var(--ui-primary-hover);
  border: 1px solid var(--ui-border-gold);
}

/* ---------- #/s/3 — the 3D viewer (carried) ---------- */
.viewer-wrap {
  position: relative; border-radius: var(--ui-radius); overflow: hidden;
  border: 1px solid var(--ui-border-gold); background: #101010;
  touch-action: none; /* the camera gestures are owned by app.js — no scroll hijack */
}
.viewer-wrap model-viewer { width: 100%; display: block; } /* height: see the W12 §8 rule below */
.viewer-controls {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 16px;
  background: rgba(16, 16, 16, 0.9);
  border-top: 1px solid var(--ui-border-gold);
  backdrop-filter: blur(8px);
}
.viewer-hint { text-align: center; color: var(--ui-text-dim); font-size: 13.5px; margin: 12px 0 0; }
/* viewer height: the ELEMENT height is the responsible layer (container, canvas
   and camera aspect all follow it); the width is untouched. Short viewports
   (mobile landscape) get their own band so the controls + hint stay reachable
   without an oversized scroll. */
.viewer-wrap model-viewer { height: clamp(360px, 64vh, 720px); }
@media (max-height: 480px) {
  .viewer-wrap model-viewer { height: clamp(240px, 58vh, 420px); }
}
.btn {
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
  background: rgba(212, 175, 55, 0.12); color: var(--ui-text);
  border: 1px solid var(--ui-border-gold-strong);
  border-radius: 999px; padding: 8px 20px; min-height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.btn:hover { border-color: var(--ui-primary); color: var(--ui-primary-hover); background: rgba(212, 175, 55, 0.2); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-palette.is-active { background: var(--ui-primary); border-color: var(--ui-primary); color: #241C0C; }
.palette-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.palette-label { color: var(--ui-text-dim); font-size: 13.5px; }

/* ---------- #/s/4 — the swap gallery ----------
   W11-8 (F-26-11): the big frame hugs the RENDER's true aspect (--gar is set at
   runtime from the loaded image's natural size) — the big side letterbox bands
   are gone; object-fit: contain stays (never stretched, never cropped). The
   thumbnail row is centered (balanced), no longer start-aligned. */
.g-main figure {
  margin: 0 auto; width: fit-content; max-width: 100%;
  background: var(--ui-glass-strong); border: 1px solid var(--ui-border-gold);
  border-radius: var(--ui-radius); padding: 12px;
}
.g-main img {
  width: min(100%, calc(54vh * var(--gar, 1.7778))); height: auto; max-height: 54vh;
  object-fit: contain; /* aspect preserved — never cropped */
  border-radius: 10px; background: #0d0d0d; display: block;
}
.g-main figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-top: 10px; font-size: 15px; color: var(--ui-text); font-weight: 500; }
.g-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.thumb {
  flex: 0 0 auto; width: 128px; padding: 0; overflow: hidden;
  border: 1px solid var(--ui-border-gold); border-radius: 10px;
  background: var(--ui-glass); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.thumb img { width: 100%; height: 72px; object-fit: cover; display: block; }
.thumb:hover, .thumb:focus-visible { border-color: var(--ui-primary); box-shadow: 0 0 14px rgba(212, 175, 55, 0.3); }
.g-empty { color: var(--ui-text-dim); font-size: 14px; }

/* ---------- #/s/5 — specs + re-homed downloads ---------- */
.spec-section { margin-bottom: clamp(24px, 4.5vh, 40px); }
.spec-section > h3 { margin-top: 0; }
.spec-section p { color: var(--ui-text-dim); }
.qty-table-wrap, .parts-table-wrap { overflow-x: auto; }
.qty-table, .parts-table, .bom-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--ui-glass-strong); border: 1px solid var(--ui-border-gold); border-radius: 12px; overflow: hidden;
  color: var(--ui-text);
}
.qty-table { min-width: max-content; } /* the header cells keep their natural single-line width; the WRAP scrolls */
.qty-table th, .qty-table td, .parts-table th, .parts-table td, .bom-table th, .bom-table td {
  padding: 9px 13px; text-align: start; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap;
}
.qty-table thead th, .parts-table thead th, .bom-table thead th { white-space: normal; background: rgba(212, 175, 55, 0.08); color: var(--ui-text-dim); font-weight: 500; font-size: 13px; }
.qty-table tbody tr:last-child td, .parts-table tbody tr:last-child td, .bom-table tbody tr:last-child td { border-bottom: none; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.acct-card { background: var(--ui-glass-strong); border: 1px solid var(--ui-border-gold); border-radius: 14px; padding: 16px 18px; }
.acct-card h4 { margin: 0 0 8px; font-size: 14.5px; color: var(--ui-primary-hover); }
.acct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; color: var(--ui-text-dim); }
.acct-row b { color: var(--ui-text); }
.acct-row.waste b { color: #E0906B; }
.sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sheets figure { margin: 0; background: #f8f6f1; border: 1px solid var(--ui-border-gold); border-radius: 12px; padding: 12px; }
.sheets svg, .sheets img { width: 100%; height: auto; }
.sheets figcaption { font-size: 13px; color: #4c4636; padding-top: 8px; }
.parts-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.parts-gallery figure { margin: 0; background: var(--ui-glass-strong); border: 1px solid var(--ui-border-gold); border-radius: 10px; padding: 8px; text-align: center; }
.parts-gallery img { width: 100%; height: auto; min-height: 96px; object-fit: contain; }
.parts-gallery figcaption { font-size: 12px; color: var(--ui-text-dim); line-height: 1.6; overflow-wrap: break-word; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager-info { font-size: 13.5px; color: var(--ui-text-dim); }
.sign-off { margin-top: clamp(24px, 4vh, 38px); border-top: 1px solid var(--ui-border-gold); padding-top: 16px; }
.sign-off .brand-line { color: var(--ui-text-dim); margin: 0 0 4px; }
.sign-off .sig-line { color: var(--ui-text-dim); margin: 0; font-size: 14px; }
.dl-section { margin-top: clamp(26px, 4vh, 44px); border-top: 1px solid var(--ui-border-gold); padding-top: clamp(18px, 3vh, 30px); }
.dl-set-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; min-height: var(--touch-min); border-radius: 999px;
  background: rgba(212, 175, 55, 0.12); border: 1px solid var(--ui-border-gold-strong);
  color: var(--ui-text); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.pill-btn:hover, .pill-btn:focus-visible { border-color: var(--ui-primary); color: var(--ui-primary-hover); box-shadow: 0 0 18px rgba(212, 175, 55, 0.3); }
.dl-group { margin-bottom: clamp(20px, 3.5vh, 32px); }
.dl-group > h3 { margin-bottom: 10px; font-size: 16px; }
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-item {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between;
  background: var(--ui-glass-strong); border: 1px solid var(--ui-border-gold); border-radius: 12px; padding: 10px 14px;
}
.dl-item-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dl-file { font-size: 12.5px; color: var(--ui-text-dim); overflow-wrap: anywhere; }
.dl-meta { display: flex; align-items: center; gap: 10px; }
.dl-size { font-size: 12.5px; color: var(--ui-text-dim); }
.dl-group-note { font-size: 13px; color: var(--ui-text-dim); margin: 6px 0 0; }

/* ---------- #/s/6 — contact flip cards ----------
   W11-8 (F-26-12): the scene is vertically balanced (the card grid centers in
   the leftover space instead of stacking top-heavy) and the cards are a touch
   fuller; the honest null back-copy gained a second dim line (.contact-missing-more). */
#s-6.page-dark { display: flex; flex-direction: column; }
#s-6 .contact-grid { margin-block: auto; }
/* W12 §4.1: deliberate spacing + balance — the grid is horizontally centered,
   the two cards breathe with a viewport-proportional gap (28→72px), and the
   max-width rises so the pair fills the desktop width without stretching.
   width:100% is load-bearing: #s-6 is a flex COLUMN container, and auto inline
   margins alone would drop the flex stretch and collapse the grid to its
   (zero) content width; the definite cross size keeps the stretch while the
   max-width + auto margins center the box. Narrow screens keep the 1fr stack. */
.contact-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px); width: 100%; max-width: 1080px; margin-inline: auto;
}
.flip-card { perspective: 1200px; cursor: pointer; min-height: clamp(300px, 46vh, 420px); }
.flip-inner {
  position: relative; width: 100%; height: 100%; min-height: clamp(300px, 46vh, 420px);
  transition: transform 600ms var(--ease); transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 24px;
  /* the stable state carries NO hidden filter/opacity/overlay (measured);
     the --ui-glass-strong fill (0.6) keeps the card boundary and its text
     separated from the near-black page (glass: blur + translucency preserved) */
  background: var(--ui-glass-strong);
  backdrop-filter: blur(var(--ui-card-blur)); -webkit-backdrop-filter: blur(var(--ui-card-blur));
  border: 1px solid var(--ui-border-gold); border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow);
}
.flip-face.back { transform: rotateY(180deg); background: var(--ui-glass-strong); }
.flip-face .card-sub { margin: 0; }
.contact-line { font-size: 15px; color: var(--ui-text); margin: 0; line-height: 2; }
.contact-missing { font-size: 13.5px; color: var(--ui-text-dim); margin: 0; }
.contact-missing-more { font-size: 12.5px; color: rgba(209, 213, 219, 0.66); margin-top: 4px; }
a.maker-tel {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  background: rgba(212, 175, 55, 0.14); border: 1px solid var(--ui-border-gold-strong);
  color: var(--ui-primary-hover); font-size: 14px; font-weight: 500;
}
a.maker-tel:hover { border-color: var(--ui-primary); box-shadow: 0 0 16px rgba(212, 175, 55, 0.3); }
.tap-cue {
  position: absolute; bottom: 14px; inset-inline-start: 16px;
  display: inline-flex; gap: 7px; align-items: center;
  color: var(--ui-primary); font-size: 12px;
}
.tap-cue svg { width: 20px; height: 20px; animation: tap 1.4s ease-in-out infinite; }
@keyframes tap {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(3px) scale(0.9); }
}

/* ---------- honest runtime-config error state ---------- */
.bg-error {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: rgba(10, 10, 10, 0.92);
}
.bg-error-card {
  max-width: 480px; background: var(--ui-glass-strong); border: 1px solid rgba(220, 130, 95, 0.45);
  border-radius: var(--ui-radius-card); padding: 26px; text-align: center;
}
.bg-error-card p { color: var(--ui-text-dim); font-size: 14px; }
.bg-error h2 { color: #E8A87E; }

/* ================================================================
   FLOATING NAV (<1024px) — the Motamed FloatingNav port (intake §4-F).
   Handle-first DOM: column flex -> handle ABOVE the items; row flex ->
   handle BESIDE them (inline-start = RIGHT in RTL). Physical left/top
   position model (set by app.js) — the RTL drag-mirror is structurally
   impossible. Both orientations always reachable (wrap law). Glass shell.
   ================================================================ */
.fnav {
  position: fixed; z-index: 60;
  display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ui-border-gold-strong); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: left 220ms var(--ease), top 220ms var(--ease); /* the transitioned props match the JS-written left/top pair */
  touch-action: manipulation;
}
.fnav.is-vertical { flex-direction: column; }
.fnav-items {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 6px;
  max-inline-size: calc(100dvw - 48px); max-block-size: calc(100dvh - 48px); /* the wrap law */
}
.fnav.is-vertical .fnav-items { flex-direction: column; }
.fnav.is-collapsed .fnav-items { display: none; } /* hidden, not removed — focus order stable */
.fnav-handle, .fnav-item {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(var(--ui-card-blur)); -webkit-backdrop-filter: blur(var(--ui-card-blur));
  border: 1px solid var(--ui-border-gold-strong);
  border-radius: 999px; color: var(--ui-text);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.fnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-inline-size: var(--touch-min); min-block-size: var(--touch-min);
  padding: 5px 10px; text-decoration: none; font-size: 11.5px; font-weight: 500;
}
.fnav-item svg { width: 20px; height: 20px; }
.fnav-item:hover, .fnav-item:focus-visible { background: rgba(212, 175, 55, 0.16); color: var(--ui-primary-hover); border-color: var(--ui-primary); }
.fnav-item[aria-current="page"] { background: var(--ui-primary); border-color: var(--ui-primary); color: #241C0C; }
.fnav-label { line-height: 1.25; white-space: nowrap; }
.fnav-handle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--touch-min); block-size: var(--touch-min); flex-shrink: 0;
  cursor: grab; touch-action: none; color: var(--ui-primary);
}
.fnav-handle svg { width: 18px; height: 18px; }
.fnav-handle:hover, .fnav-handle:focus-visible { background: rgba(212, 175, 55, 0.16); border-color: var(--ui-primary); }
.fnav.is-dragging .fnav-handle { cursor: grabbing; background: rgba(212, 175, 55, 0.18); border-color: var(--ui-primary); transform: scale(1.06); }
.fnav.is-dragging-active { transition: none; } /* no glide while a drag is active */
.fnav-handle:focus-visible, .fnav-item:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
@media (min-width: 1024px) { .fnav { display: none; } } /* desktop never shows the launcher */
/* W12 §6.2: exactly ONE nav system per state. The hub pills are the DESKTOP
   (≥1024px) navigation; below 1024 the FloatingNav is primary. display:none
   removes the pills from hit-testing, tab order and the AT tree — no invisible
   focusable duplicates, no competing handlers. The 1024 breakpoint mirrors the
   JS law in app.js (__fnavSync hides the launcher at innerWidth >= 1024): one
   viewport boundary, two symmetrical rules. */
@media (max-width: 1023.98px) { .hub-pills { display: none; } }
@media (max-height: 640px) {
  .fnav-items { gap: 2px; }
  .fnav-item { min-block-size: 36px; padding-block: 2px; }
  .fnav-item svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-transparency: reduce) {
  .fnav, .fnav-handle, .fnav-item { background: #141414; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ================================================================
   Responsive
   ================================================================ */
/* W13-UI1 (Founder addendum 2026-11-01, correspondence/2026-11-01-w13-founder-addendum.txt;
   documented spec records/w13-addendum-2026-11-01-governance-and-ui.md §4): MOBILE + TABLET
   ONLY — final boundary max-width: 1024px (both tablet orientations incl. 1024x768 landscape
   + every mobile class; desktop >1024 keeps the base rules byte-untouched). The four-image
   background switches from four vertical side-by-side columns to four horizontally oriented
   images stacked vertically, edge-to-edge, one continuous background:
   - .backdrop: the 4-column grid becomes 4 full-width rows (DOM order = top-to-bottom, the
     same panel reading order as the desktop RTL row; no image, focus or asset change).
   - .slice-clip: the tear clip-paths are set INLINE by app.js (buildBackdrop) as COMPLEMENTARY
     COLUMN polygons; on full-width rows they would clip every row to a partial-width band and
     let the backdrop fill bleed through, so they are neutralized here (an !important
     declaration beats the inline style). Desktop polygons are untouched — this rule only
     exists inside this media query.
   - overflow:hidden on .slice-clip replaces the overflow containment the clip-path provided
     (the natural-scale windows are intentionally larger than their boxes; without containment
     a row's window would paint over the neighbouring rows — zero-gap continuity requires it).
   - .tear: the three torn-edge SVG lines are COLUMN dividers (vertical lines at 25/50/75% of
     the width); over stacked rows they would read as three stray vertical seams across all
     four images. The addendum requires the rows "joined seamlessly as one background" with
     "no visible seams/gaps", so the dividers are not rendered in this band — the strictly
     necessary disposition of the no-divider-change constraint (nothing else about them moves).
   The image windows keep refitting through the existing ResizeObserver + fitSliceImage (they
   adapt to any box shape); interactions, pop cards, grade/blur overlays and the ≤720px visual
   treatment are untouched. CASCADE LAW (W12-7): this block sits AFTER the desktop
   .backdrop/.slice-clip/.tear declarations it overrides.
   ================================================================ */
@media (max-width: 1024px) {
  .backdrop { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .slice-clip { clip-path: none !important; -webkit-clip-path: none !important; overflow: hidden; }
  .tear { display: none; }
}
@media (max-width: 720px) {
  .id-cards { flex-direction: column; gap: 18px; padding: 14px; justify-content: center; }
  .id-card { width: min(88vw, 420px); aspect-ratio: auto; min-height: 168px; }
  .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .flip-card, .flip-inner { min-height: 270px; }
  .page-dark { padding-inline: 16px; }
  .hub-pills { gap: 9px; bottom: clamp(18px, 4vh, 40px); }
  .pill { padding: 10px 16px; font-size: 13px; }
  .g-main img { max-height: 40vh; }
  .thumb { width: 104px; }
  .thumb img { height: 60px; }
  .qty-table, .parts-table, .bom-table { font-size: 13px; }
  .cta-pill { width: min(86vw, 320px); justify-content: center; }
}
@media (max-width: 380px) {
  .hub-pills { gap: 7px; }
  .pill { padding: 9px 12px; gap: 7px; }
  .pill svg { width: 20px; height: 20px; }
}

/* W11-8 (F-26-6): SHORT + narrow viewports (incl. the 720x450@DPR2 zoom-200
   simulation) — the bottom-anchored CTA row gets RESERVED space: the card
   column shrinks + lifts above the CTA zone, so the pill can never overlap
   the maker card (verified by the probe's rect-intersection check). */
@media (max-width: 720px) and (max-height: 620px) {
  .id-cards { padding: 10px 14px 96px; gap: 12px; }
  .id-card { width: min(80vw, 340px); min-height: 0; padding: 10px 14px; gap: 6px; }
  .card-icon { width: 44px; height: 44px; }
  .card-title { font-size: 17px; }
  .card-sub { font-size: 13px; line-height: 1.8; }
}

/* ================================================================
   Reduced motion (WCAG 2.3.3): NO non-opacity animation survives —
   page-entry (opacity-only) is removed, every transition/transform/
   keyframe below is disabled; the CTA appears without transition.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 200ms; --dur-scene: 200ms; }
  .page-scene:not([hidden]) { animation: none; }
  .backdrop { transition: none; }
  .slice, .slice-img, .slice-pop, .id-cards, .id-card, .pill, .back-pill,
  .thumb, .btn, .pill-btn, .g-main img, .tear { transition: none !important; }
  .slice:hover, .slice:focus-within { transform: none; }
  .cta-pill { transition: none; transform: translateX(-50%); }
  .cta-pill.is-visible { transform: translateX(-50%); }
  .tap-cue svg { animation: none; }
  .flip-inner { transition: none; }
  .fnav { transition: none; }
  .fnav.is-dragging .fnav-handle { transform: none; }
  .fnav-handle, .fnav-item { transition: none; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 8px; }
::-webkit-scrollbar-track { background: #141414; }

/* ================================================================
   W14 PHASE D (ADDITIVE) — the featured Golden Case presentation block
   (#gc-presentation, scene 5). Rendered by app.js ONLY when the data
   layer carries D.golden_case; the block is hidden otherwise and no
   existing rule above is touched. Reuses the page's UI tokens.
   ================================================================ */
.gc-section {
  margin-top: clamp(18px, 3vh, 30px);
  border: 1px solid var(--ui-border-gold);
  border-radius: var(--ui-radius-card);
  background: var(--ui-glass);
  backdrop-filter: blur(var(--ui-card-blur));
  -webkit-backdrop-filter: blur(var(--ui-card-blur));
  box-shadow: var(--ui-shadow);
  padding: clamp(16px, 2.5vw, 30px);
}
.gc-section[hidden] { display: none; }
.gc-head { position: relative; margin-bottom: clamp(10px, 1.6vh, 18px); }
.gc-title { font-family: var(--font-body); font-size: clamp(20px, 2.2vw, 30px); margin: 0 0 6px; color: var(--ui-text); }
.gc-subtitle { color: var(--ui-text-dim); font-size: clamp(13px, 1.1vw, 16px); margin: 0 0 10px; }
.gc-chip { border-color: var(--ui-primary); color: var(--ui-primary); }
.gc-hero { margin: 0 0 clamp(14px, 2vh, 22px); }
.gc-hero img {
  display: block; width: 100%; max-height: 52vh; object-fit: contain;
  border-radius: var(--ui-radius); border: 1px solid var(--ui-border-gold);
  background: var(--ui-surface);
}
.gc-hero figcaption { color: var(--ui-text-dim); font-size: clamp(12px, 1vw, 14px); margin-top: 8px; }
.gc-hero.is-missing img { display: none; }
.gc-views { margin-bottom: clamp(14px, 2vh, 22px); }
.gc-view-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px;
}
.gc-view-item { margin: 0; cursor: pointer; }
.gc-view-item img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--ui-border-gold);
  background: var(--ui-surface); transition: border-color var(--dur-fast) var(--ease);
}
.gc-view-item img:hover { border-color: var(--ui-primary); }
.gc-view-item figcaption { color: var(--ui-text-dim); font-size: 12px; margin-top: 5px; text-align: center; }
.gc-view-item.is-missing img { display: none; }
.gc-view-item.is-missing { display: none; }
.gc-block { border-top: 1px solid var(--ui-border-gold); padding-top: clamp(12px, 1.8vh, 20px); margin-top: clamp(12px, 1.8vh, 20px); }
.gc-h3 { font-size: clamp(16px, 1.5vw, 20px); color: var(--ui-primary); margin: 0 0 10px; }
.gc-h4 { font-size: clamp(14px, 1.2vw, 17px); color: var(--ui-text); margin: 0 0 4px; }
.gc-p { color: var(--ui-text-dim); font-size: clamp(13px, 1.1vw, 15.5px); line-height: 1.9; margin: 0 0 10px; }
.gc-note { color: var(--ui-text-dim); font-size: clamp(12px, 1vw, 14px); margin: 0 0 10px; }
.gc-banner {
  border: 1px solid var(--ui-primary); border-radius: var(--ui-radius);
  background: rgba(212, 175, 55, 0.08);
  padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.6vw, 20px);
  margin: clamp(12px, 1.8vh, 20px) 0;
}
.gc-banner-label { margin: 0; color: var(--ui-text); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.9; }
.gc-assumed {
  border-right: 3px solid var(--ui-primary);
  background: rgba(212, 175, 55, 0.08);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 12px;
  color: var(--ui-text); font-size: clamp(12px, 1vw, 14px); line-height: 1.9;
}
.gc-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.gc-table th, .gc-table td {
  border: 1px solid var(--ui-border-gold); padding: 8px 10px;
  font-size: clamp(12px, 1vw, 14px); text-align: right; color: var(--ui-text-dim);
}
.gc-table th { color: var(--ui-primary); background: rgba(212, 175, 55, 0.06); font-weight: 600; }
.gc-table td.ltr { text-align: left; direction: ltr; }
.gc-appliance { margin-bottom: 14px; }
.gc-model { color: var(--ui-text-dim); font-size: 12px; margin: 0 0 6px; }
.gc-matlist { margin: 0; padding-right: 20px; color: var(--ui-text-dim); font-size: clamp(13px, 1.1vw, 15px); line-height: 2; }
.gc-matlist strong { color: var(--ui-text); }
.gc-doclinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gc-doclink { font-size: clamp(11px, 0.95vw, 13px); padding: 8px 14px; }
.gc-limits { margin: 0; padding-right: 22px; color: var(--ui-text-dim); font-size: clamp(12.5px, 1.05vw, 14.5px); line-height: 2; }
.gc-limits li { margin-bottom: 8px; }
@media (max-width: 720px) {
  .gc-view-strip { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .gc-table th, .gc-table td { padding: 6px 7px; font-size: 11.5px; }
  .gc-hero img { max-height: 40vh; }
}