/* =========================================================================
   RenderedbyDesign — Landing Page
   styles-v5.css — tokens, reset, sections, responsive
   ========================================================================= */

/* ---- Fonts ---- */
@font-face {
  font-family: "DM Sans";
  src: url("/_brand/fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/_brand/fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/_brand/fonts/DMSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/_brand/fonts/InterTight-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/_brand/fonts/InterTight-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/_brand/fonts/InterTight-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Brand identity */
  --rbd-navy:        #1A2744;
  --rbd-cream:       #F5E6D3;
  --rbd-gold:        #D4A96A;
  --rbd-charcoal:    #3A3A3C;
  --rbd-off-white:   #FAF8F5;
  --rbd-white:       #FFFFFF;

  /* Palette A — Warm Terracotta */
  --pal-a-primary:   #C75B39;
  --pal-a-bg:        #F5E6D3;
  --pal-a-deep:      #4A2C1A;

  /* Palette B — Cool Blue / Gray */
  --pal-b-primary:   #5B7FA5;
  --pal-b-bg:        #E8EAED;

  /* Palette C — Neutral Beige */
  --pal-c-primary:   #D9CFC1;
  --pal-c-accent:    #7A8B6F;

  /* Palette D — Bold Jewel */
  --pal-d-primary:   #1B5E4B;
  --pal-d-accent:    #C9A84C;
  --pal-d-highlight: #722F37;

  /* Semantic — surface */
  --rbd-bg:          var(--rbd-off-white);
  --rbd-bg-raised:   #FFFFFF;
  --rbd-bg-inverse:  var(--rbd-navy);

  /* Semantic — text */
  --rbd-fg1:         var(--rbd-navy);
  --rbd-fg2:         var(--rbd-charcoal);
  --rbd-fg3:         #6E6E70;                /* muted / meta -- calibrated for off-white */
  --rbd-fg3-on-cream: #5C5C5E;               /* muted / meta on --rbd-cream; see the cream
                                                surface block below. Mirrors the canonical
                                                token in _brand/colors_and_type.css. */
  --rbd-fg-on-dark:  var(--rbd-cream);
  --rbd-fg-accent:   var(--rbd-gold);

  /* Semantic — borders */
  --rbd-border:      #E4DFD4;
  --rbd-hairline:    rgba(26, 39, 68, 0.12);

  /* Fonts */
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-body:    17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(26, 39, 68, 0.06);
  --sh-2: 0 2px 8px rgba(26, 39, 68, 0.08);
  --sh-3: 0 8px 24px rgba(26, 39, 68, 0.10);
  --sh-4: 0 18px 48px rgba(26, 39, 68, 0.14);

  /* Motion */
  --ease-std:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  360ms;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

body {
  font-family: var(--font-body);
  background: var(--rbd-off-white);
  color: var(--rbd-fg2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Sketch background overlay. z-index dropped from 9999 to -1 (2026-07-31,
   operator finding): this is a global watermark texture, and every section
   that's meant to show it already layers its OWN correct copy in front of
   real content correctly (.chapter--cream/--navy::before etc., z-index:0,
   properly contained). At z-index:9999 this one sat ON TOP of the entire
   site instead -- above every card and photo -- which is what was reported
   as "the background bleeding through the image." Content painting normally
   (z-index:auto/0) now sits in front of this without any per-element escape
   hatch needed; fixing 3+ nested stacking-context traps one at a time
   (isolation:isolate, an explicit z-index:1 on every chapter's direct child,
   and even a dead identity `transform` from the tab JS) to make ONE card
   outrank a z-index:9999 global layer was chasing the wrong end of the
   problem. This still renders wherever no section-level ::before already
   covers (rare -- gaps between chapters, if any), just correctly BEHIND
   content there too. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("/_brand/assets/Banner-Sketch-Transition.webp");
  background-size: 1400px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: multiply;
}

::selection { background: var(--rbd-gold); color: var(--rbd-navy); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--rbd-navy); }
::-webkit-scrollbar-thumb { background: var(--rbd-gold); border-radius: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--rbd-navy); color: var(--rbd-cream); padding: 12px 20px; border-radius: var(--r-sm); font-family: var(--font-body); font-weight: 700; }
.skip-link:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rbd-gold); outline-offset: 2px; }

@keyframes drift { from { transform: translateY(100vh); opacity: 0.15; } to { transform: translateY(-20vh); opacity: 0; } }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rbd-fg3);
}
.eyebrow--gold { color: var(--rbd-gold); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-caption);
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  transition: background-color var(--dur-med) var(--ease-std),
              transform var(--dur-fast) var(--ease-std),
              box-shadow var(--dur-med) var(--ease-std);
}
.btn__arrow { font-size: 16px; transition: transform var(--dur-med) var(--ease-std); }
.btn--primary { background: var(--rbd-navy); color: var(--rbd-cream); padding: 16px 28px; box-shadow: var(--sh-2); }
.btn--primary:hover { background: #243456; transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.btn--accent { background: var(--rbd-gold); color: var(--rbd-navy); padding: 16px 28px; box-shadow: 0 5px 15px rgba(212,169,106,0.3); }
.btn--accent:hover { background: #C09858; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(212,169,106,0.4); }
.btn--secondary { background: transparent; color: var(--rbd-navy); border: 1px solid var(--rbd-hairline); padding: 16px 24px; }
.btn--secondary:hover { background: rgba(26,39,68,0.04); border-color: var(--rbd-navy); }
.btn--ghost { background: transparent; color: var(--rbd-cream); border: 1px solid rgba(245,230,211,0.3); padding: 16px 24px; }
.btn--ghost:hover { background: rgba(245,230,211,0.08); border-color: rgba(245,230,211,0.5); }
.btn--ghost-gold { color: var(--rbd-cream); border-color: rgba(212,169,106,0.3); }
.btn--ghost-gold:hover { background: rgba(212,169,106,0.08); border-color: var(--rbd-gold); }
.btn--wide { width: 280px; }

/* ---- Nav ---- */
/* Pill widened 900 -> 1000 and the link gap tightened 26 -> 20 (Plan #249
   Phase 03). Measured min-content of the real lander nav: brand 206 + links 488
   + cta 158 + 2 grid gaps 48 + padding 32 = 932. At 900 the grid had to squeeze
   the `auto` brand track below its own content, so the wordmark overflowed by
   32px onto the first link at EVERY viewport from 900 to 1440 -- a wider screen
   never helped, because the pill is width-capped. The original nav carried four
   short in-page anchors ("FAQ", "Viewers"); a product lander carries five real
   product routes plus About, which simply needs more pill. */
#nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; width: min(1000px, calc(100vw - 32px));
}
.nav__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 10px 14px 10px 18px; border-radius: var(--r-pill);
  background: rgba(250,248,245,0.85);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid var(--rbd-hairline);
  box-shadow: var(--sh-3);
  transition: all 320ms var(--ease-std);
}
#nav.nav--scrolled .nav__inner {
  background: rgba(250,248,245,0.95);
  box-shadow: var(--sh-4);
}
.nav__logo { height: 32px; width: auto; border-radius: 50%; }
.nav__wordmark { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--rbd-navy); line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__links { display: flex; gap: 20px; justify-content: center; }
/* fg3 -> fg2 (Plan #249 Phase 03, closing Phase 04's stated contrast risk).
   The nav is a translucent cream pill over a DARK hero, so the pill composites to
   ~rgb(216,217,218) and fg3 measured 3.6 there -- below AA for 11px uppercase.
   Phase 04's checklist named this exact risk; the earlier contrast sweep missed it
   because it probed section text and not the nav. Same miss class as
   .who__card-text (4.34) and .pcard__eyebrow (4.15). */
.nav__link { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-fg2); transition: color var(--dur-med); }
.nav__link:hover { color: var(--rbd-navy); }
.nav__cta-wrap { display: flex; justify-content: flex-end; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  background: var(--rbd-navy); color: var(--rbd-cream);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase;
  border: none; transition: background var(--dur-med);
}
.nav__cta:hover { background: #243456; }
.nav__cta-arrow { font-size: 14px; line-height: 1; }

/* ---- Mobile menu ----
   Below 1000px .nav__links is display:none and there was NO hamburger, so the six
   routes were unreachable from the header on every lander; the footer's 8 links were
   the only path. Raising the breakpoint is not the fix: at 1024 the pill needs
   932px of content, so the link row genuinely does not fit.
   Every value below is an existing token -- no new brand decisions are introduced. */
.nav__cta-wrap { gap: 8px; }
.nav__toggle {
  display: none;                      /* shown only where the link row is hidden */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--rbd-hairline);
  border-radius: var(--r-pill); cursor: pointer;
  flex-direction: column; gap: 4px;
  transition: background var(--dur-med);
}
.nav__toggle:hover { background: rgba(26, 39, 68, 0.06); }
.nav__toggle:focus-visible { outline: 2px solid var(--rbd-navy); outline-offset: 2px; }
.nav__toggle-bar {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--rbd-navy);
  transition: transform var(--dur-med) var(--ease-std), opacity var(--dur-med);
}
/* Bars fold into an X. transform-origin center keeps the cross centred in the 40px hit area. */
#nav.nav--menu-open .nav__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#nav.nav--menu-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
#nav.nav--menu-open .nav__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  margin-top: 8px;
  border-radius: 22px;
  background: rgba(250,248,245,0.97);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid var(--rbd-hairline);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
/* [hidden] must beat the block display below, or the panel renders while collapsed. */
.nav__mobile[hidden] { display: none; }
.nav__mobile-links { display: flex; flex-direction: column; padding: 6px; }
/* The panel reuses .nav__link, so re-state layout only -- colour, weight, tracking and
   the AA-safe fg2 all inherit from the desktop rule. */
.nav__mobile .nav__link {
  position: relative;
  padding: 13px 16px; border-radius: 14px;
  transition: background var(--dur-med), color var(--dur-med);
}
/* Drawn as an inset pseudo-element, NOT border-top. The link carries border-radius:14px
   for its hover pill, and a border follows that curve -- the rule hooked downward at
   both ends instead of sitting flat. Inset by the padding so it reads as a list
   separator rather than a full-bleed edge. */
.nav__mobile .nav__link + .nav__link::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px;
  height: 1px; background: var(--rbd-hairline);
}
.nav__mobile .nav__link:hover { background: rgba(26, 39, 68, 0.06); color: var(--rbd-navy); }
.nav__mobile .nav__link:focus-visible { outline: 2px solid var(--rbd-navy); outline-offset: -2px; }

/* graphic-design-consult G3/G5: at 768-999 the panel spanned the full pill (~700px) with
   six short links stranded in dead space. A dropdown should read as anchored to the
   control that opened it, so above 600px it becomes a right-aligned 320px menu. Below
   600px full-bleed is correct -- the pill is already only ~358px wide. */
@media (min-width: 600px) {
  .nav__mobile { width: 320px; margin-left: auto; }
}

/* G8: the toggle bars animated into an X while the panel appeared with no transition, so
   one interaction read as two. Keyed off :not([hidden]) because `hidden` is the state
   source of truth and display cannot be transitioned. */
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.nav__mobile:not([hidden]) { animation: navMenuIn 180ms var(--ease-std) both; }

@media (prefers-reduced-motion: reduce) {
  .nav__toggle-bar { transition: none; }
  .nav__mobile:not([hidden]) { animation: none; }
}

/* ---- Hero ---- */
.hero { position: relative; min-height: 700px; height: 100vh; background: var(--rbd-navy); padding-top: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero__layer { position: absolute; inset: 0; pointer-events: none; }
.hero__layer--bg { background: url('/_brand/assets/Banner-Sketch-Transition.webp') center/cover no-repeat; opacity: 0.25; mix-blend-mode: screen; bottom: -30vh; }
.hero__layer--grain { background: radial-gradient(ellipse at center, transparent 40%, rgba(26,39,68,0.7) 100%); bottom: -15vh; }
.hero__content { position: relative; z-index: 1; max-width: 1000px; padding: 0 24px; text-align: center; }
.hero__icon { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto var(--sp-6); opacity: 0.8; }
.hero__headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 7.2vw, 88px); line-height: 1.0; letter-spacing: -0.025em; color: var(--rbd-cream); }
.hero__word { display: inline-block; }
.hero__word--gold { color: var(--rbd-gold); }
.hero__subtitle { font-family: var(--font-body); font-size: 19px; line-height: 1.55; color: rgba(245,230,211,0.8); max-width: 600px; margin: var(--sp-6) auto 0; }
.hero__cta-row { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-7); }
/* alpha 0.6 -> 0.85 (Plan #249 Phase 03): measured 3.36 on navy, below the 4.5
   AA floor for 13px uppercase. Same gold, same recessive role, now legible. */
/* Was color: rgba(212,169,106,0.85) -- brand gold at 85% on the navy hero. Measured
   against the real rendered pixels (gradient + Banner-Sketch-Transition.webp, sampled
   by hiding the node) with the alpha composited: 3.08:1, where AA needs 4.5 at 13px.
   Gold cannot pass on this surface at ANY alpha: at full opacity it reaches only
   3.66:1, so dropping the alpha was never the fix.
   Ruling 2026-08-06: this line is not an accent. It carries delivery-format meta
   ("PDF GUIDE, INSTANT DOWNLOAD"), which is the muted tier's job, while gold is
   already carrying the headline accent run AND the primary CTA on the same screen.
   Promoting it to large-text size to clear the 3.0 threshold was rejected: that
   promotes the hero's lowest-priority line purely to satisfy a metric.
   --rbd-fg-on-dark at 85% measures 5.21:1 and stays visibly dimmer than the
   subtitle's full cream, so the subtitle/tagline hierarchy survives. Same shape as
   the --rbd-fg3-on-cream remap (Plan #249 decision 6): re-point the tier at a token,
   never hardcode a new colour at the call site.
   245,230,211 IS --rbd-cream (= --rbd-fg-on-dark). Stated as an rgba literal rather
   than var() or color-mix, and that is deliberate:
     - `opacity:` collides with GSAP, which animates opacity on the hero children
       (this node computes to opacity 0 before its entrance).
     - `color-mix(in srgb, var(--rbd-fg-on-dark) 85%, transparent)` was tried first and
       REVERTED. It renders correctly, but it computes to
       `color(srgb 0.960784 0.901961 0.827451 / 0.85)`, and BOTH of this repo's contrast
       auditors parse `/rgba?\(([^)]+)\)/` only: lander_contrast_sweep.py:69 and
       hyperframes/scripts/contrast-report.mjs:110. On a parse miss the sweep does
       `out.skipped_invisible++; continue;` (line 97), so the node would be silently
       reclassified as invisible and DROPPED from the audit. The audit would then read
       clean while this line went unmeasured, which buries exactly the defect being
       fixed here. An rgba literal keeps it visible to both tools, and matches the
       convention already used at this call site.
   FOLLOW-UP, deliberately not done here: the systematic version is an
   --rbd-fg3-on-dark token alongside --rbd-fg3-on-cream, plus teaching both auditors
   the `color(srgb ...)` form. Skipped to avoid syncing two copies of
   colors_and_type.css, one of which is already dirty from a sibling plan. */
.hero__tagline { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,230,211,0.85); margin-top: var(--sp-7); }
.hero__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--rbd-gold); opacity: 0; bottom: 0; }
.particle:nth-child(1) { left: 18%; }
.particle:nth-child(2) { left: 42%; }
.particle:nth-child(3) { left: 67%; }
.particle:nth-child(4) { left: 85%; }
.hero--particles-on .particle:nth-child(1) { animation: drift 18s linear infinite 0s; }
.hero--particles-on .particle:nth-child(2) { animation: drift 22s linear infinite 5s; }
.hero--particles-on .particle:nth-child(3) { animation: drift 16s linear infinite 10s; }
.hero--particles-on .particle:nth-child(4) { animation: drift 25s linear infinite 17s; }

/* ---- Cream surfaces: remap the muted text tier (Plan #249 decision 6) ----------------
   --rbd-fg3 (#6E6E70) is calibrated for --rbd-off-white, where it scores 4.80:1 and passes
   AA. On --rbd-cream it is 4.15:1 and FAILS AA's 4.5 for normal text. It is a PAIRING bug,
   so the global token is NOT touched (it is used in 557 files) -- instead every element that
   PAINTS cream re-binds the token for its subtree, and custom-property inheritance carries
   the cream-safe value down to whatever reads var(--rbd-fg3) inside it.

   Scoping to .chapter--cream alone -- which is what this fix was originally recorded as --
   would have missed 10 of the 21 measured failures: .pricing__proof is its own cream-painted
   card and is NOT inside a cream chapter. The list below is every text-bearing selector in
   this file that sets `background: var(--rbd-cream)`. If you add another one, add it here too.

   Remapped to --rbd-fg3-on-cream (#5C5C5E, 5.45:1) rather than to --rbd-fg2 (#3A3A3E,
   9.24:1): fg2 clears AA but collapses the three-tier hierarchy, so eyebrows and meta lines
   would render identically to body copy on exactly the sections that use them most.
   Measured before and after by lander_contrast_sweep.py, with a planted-failure control. */
.chapter--cream,
.vp__visual-budget, .vp__visual-city, .vp__visual-items,
.pcard,
.pricing__proof,
.final-cta { --rbd-fg3: var(--rbd-fg3-on-cream); }

/* ---- Chapter shared ---- */
.chapter { position: relative; padding: 120px 24px; overflow: hidden; }
.chapter--cream   { background: var(--rbd-cream); }
.chapter--navy    { background: var(--rbd-navy); }
.chapter--offwhite { background: var(--rbd-off-white); }

.chapter__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--rbd-navy); }
.chapter__title--light { color: var(--rbd-cream); }
.chapter__header { text-align: center; max-width: 600px; margin: 0 auto var(--sp-9); }
.chapter__subtitle { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--rbd-fg2); margin-top: var(--sp-4); }
.chapter--navy .chapter__subtitle { color: rgba(245,230,211,0.7); }

/* ---- Context Strip (replaces Series Strip) ---- */
.context-strip { padding: 56px 24px; background: var(--rbd-navy); }
.context-strip__inner { max-width: 1240px; margin: 0 auto; }
.context-strip__eyebrow { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-gold); text-align: center; margin-bottom: 28px; }
.context-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(245,230,211,0.1); border-bottom: 1px solid rgba(245,230,211,0.1); }
.context-strip__cell { padding: 24px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 96px; border-right: 1px solid rgba(245,230,211,0.1); border-bottom: 1px solid rgba(245,230,211,0.1); }
.context-strip__cell:nth-child(4n) { border-right: none; }
.context-strip__cell:nth-child(n+5) { border-bottom: none; }
.context-strip__city { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--rbd-cream); line-height: 1.1; }
.context-strip__detail { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); }

/* ---- Value Props ---- */
.vp__inner { max-width: 1240px; margin: 0 auto; }
.vp__header, .who__header, .voices__header, .pricing__header, .tabs__header { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: flex-end; margin-bottom: 48px; }
.vp__heading, .who__heading, .pricing__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--rbd-navy); margin-top: 18px; }
.vp__header-right, .who__header-right, .voices__header-right, .pricing__header-right, .tabs__header-right { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--rbd-fg3); max-width: 440px; }
/* WAS: `.voices__header-right { color: rgba(245,230,211,0.7); }` -- unscoped, so it
   painted cream-at-70% text regardless of the section it was in. #voices is
   `chapter chapter--cream`, so this rendered CREAM ON CREAM: the sentence
   "Delivered by email within 24 hours. Built to order, not an instant download."
   was invisible on the live page. Measured, not eyeballed: that element's own box
   screenshots at 0.05% ink (51 of 95,040 px) where its correctly-styled sibling
   .vp__header-right, same size and same cream background, measures 8.38% (7,961 px).
   Every other section does this correctly by scoping the dark-background colour to
   .chapter--navy (see .chapter__subtitle L302 and .tabs__header-right L467, which is
   the identical rule for the identical element role); this one was missing only the
   prefix. Scoped now, so it inherits --rbd-fg3 from the shared rule above on cream
   and keeps the cream treatment if #voices ever becomes a navy chapter. */
.chapter--navy .voices__header-right { color: rgba(245,230,211,0.7); }

.vp__cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.vp__cards:has(.vp__card--active) { grid-template-columns: 2.2fr 1fr 1fr; }
.vp__cards:has(.vp__card:nth-child(2).vp__card--active) { grid-template-columns: 1fr 2.2fr 1fr; }
.vp__cards:has(.vp__card:nth-child(3).vp__card--active) { grid-template-columns: 1fr 1fr 2.2fr; }
.vp__card {
  position: relative; overflow: hidden; background: var(--rbd-navy);
  border-radius: var(--r-xl); border: 1px solid rgba(245,230,211,0.12); height: 440px;
  cursor: default; transition: box-shadow 600ms, border-color 600ms; outline: none;
}
.vp__card:hover, .vp__card.vp__card--active { box-shadow: var(--sh-4); border-color: rgba(212,169,106,0.4); }

/* Cream sketch watermark, one per card, visible AT REST (Plan #249, 2026-08-02).
   The card is 440px tall but `.vp__card-text` pins the numeral to the top and the
   title+body to the bottom, so the middle band -- measured 238px at 1440, 117px at
   1024, 62px at 390 -- was empty navy until you hovered. `.vp__card-visual` (the
   budget/city/order data card) only appears on `.vp__card--active`, and the 1199px
   breakpoint sets it `display:none`, so below that width the cards carried NO
   imagery at any point.
   Art is the brand sketch library recoloured navy -> cream per the rule in
   `/renderedbydesign-design references/icon-library.md` ("Dark background -> Cream
   --rbd-cream"), built by Scripts/build_vp_sketch_icons.py. Per-card and semantic,
   not a texture: calculator / floor plan / sofa against "your number" / "your city"
   / "an order".
   Layering: z-index 0 keeps it under `.vp__card-text` (z2) and `.vp__card-visual`
   (z1), so it can never cover copy or fight the hover reveal.
   Sized by INSETS + `contain` rather than a fixed width, because `.vp__card` is
   `overflow:hidden` and a fixed size would silently clip at the shorter
   breakpoints (360px card at 1199, `height:auto` at mobile). Insets keep it inside
   the empty band at every width by construction. */
/* Geometry per /graphic-design-consult, 2026-08-02 (81/100 Fix-then-ship):
   - `background-position: left center`, not `center`. The numeral, title and body
     all sit on a left axis at 32px padding; a centred icon gave one card two
     vertical axes (G4, alignment).
   - Size stays `contain`. An attempt to equalise optical mass with `auto 100%`
     (fill the height, let width follow) CLIPPED the sofa: 212px of box height on a
     440x239 source wants 390px of width inside a 341px box, and `.vp__card` is
     `overflow:hidden`, so ~49px of the right arm was silently cut. `contain` is the
     only size keyword that cannot clip, which matters here precisely because the
     three sources have different aspects (358x440, 440x403, 440x239). The residual
     mass difference between the dense calculator and the sparse sofa is accepted;
     a cropped sofa is a worse defect than an uneven one. */
.vp__card::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: 74px; right: 26px; bottom: 152px; left: 32px;
  background-repeat: no-repeat; background-position: left center; background-size: contain;
  opacity: 0.3;
  transition: opacity 480ms var(--ease-out);
}
/* Recede, do not vanish, as the data card slides in over the same band. */
.vp__card--active::before { opacity: 0.08; }
/* Keyed by LANDER + index, never by index alone. The first version used
   `[data-vp="0|1|2"]`, which every lander emits, so /bundles inherited the
   flagship's calculator, floor plan and sofa against cards reading "Named parts,
   no guessing" / "One checkout" / "Zero invented numbers". A sofa there means
   nothing. Each lander names its own set; a lander with no set gets no watermark
   and simply renders as it did before. Sets are built by
   Scripts/build_vp_sketch_icons.py::ICON_SET. */
.vp__card[data-vp-sketch="room-plan-0"]::before { background-image: url("/_brand/assets/vp-sketch-room-plan-0.png"); }
.vp__card[data-vp-sketch="room-plan-1"]::before { background-image: url("/_brand/assets/vp-sketch-room-plan-1.png"); }
.vp__card[data-vp-sketch="room-plan-2"]::before { background-image: url("/_brand/assets/vp-sketch-room-plan-2.png"); }
.vp__card[data-vp-sketch="bundles-0"]::before { background-image: url("/_brand/assets/vp-sketch-bundles-0.png"); }
.vp__card[data-vp-sketch="bundles-1"]::before { background-image: url("/_brand/assets/vp-sketch-bundles-1.png"); }
.vp__card[data-vp-sketch="bundles-2"]::before { background-image: url("/_brand/assets/vp-sketch-bundles-2.png"); }
/* Phase 05 family sets, 2026-08-03. Until now these three landers emitted
   data-vp-sketch with no rule behind it, so they rendered the round-9 defect -- an
   empty navy band -- on three pages instead of one. Five of the nine needed art the
   library did not have (no map, city, calendar, spreadsheet or document); those come
   from the new City-and-Relocation sheet. */
.vp__card[data-vp-sketch="lookbooks-0"]::before { background-image: url("/_brand/assets/vp-sketch-lookbooks-0.png"); }
.vp__card[data-vp-sketch="lookbooks-1"]::before { background-image: url("/_brand/assets/vp-sketch-lookbooks-1.png"); }
.vp__card[data-vp-sketch="lookbooks-2"]::before { background-image: url("/_brand/assets/vp-sketch-lookbooks-2.png"); }
.vp__card[data-vp-sketch="guides-0"]::before { background-image: url("/_brand/assets/vp-sketch-guides-0.png"); }
.vp__card[data-vp-sketch="guides-1"]::before { background-image: url("/_brand/assets/vp-sketch-guides-1.png"); }
.vp__card[data-vp-sketch="guides-2"]::before { background-image: url("/_brand/assets/vp-sketch-guides-2.png"); }
.vp__card[data-vp-sketch="calculators-0"]::before { background-image: url("/_brand/assets/vp-sketch-calculators-0.png"); }
.vp__card[data-vp-sketch="calculators-1"]::before { background-image: url("/_brand/assets/vp-sketch-calculators-1.png"); }
.vp__card[data-vp-sketch="calculators-2"]::before { background-image: url("/_brand/assets/vp-sketch-calculators-2.png"); }
.vp__card-text { position: relative; z-index: 2; padding: 32px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: max-width 720ms var(--ease-out); }
.vp__card--active .vp__card-text { max-width: 50%; }
.vp__card-numeral { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--rbd-cream); opacity: 0.5; }
.vp__card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--rbd-cream); margin: 14px 0; }
.vp__card-body { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(245,230,211,0.7); max-width: 360px; transition: opacity 600ms; }
.vp__card:not(.vp__card--active) .vp__card-body { opacity: 0.78; }
.vp__card .eyebrow { color: var(--rbd-gold); }

.vp__card-visual {
  position: absolute; top: 50%; right: 24px; z-index: 1;
  transform: translateY(-50%) translateX(60px) scale(0.96); opacity: 0;
  transition: opacity 480ms var(--ease-out) 80ms, transform 720ms var(--ease-out);
  pointer-events: none;
}
.vp__card--active .vp__card-visual { transform: translateY(-50%) translateX(0) scale(1); opacity: 1; }

.vp__visual-budget, .vp__visual-city, .vp__visual-items {
  width: 300px; height: 320px; border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--sh-4); border: 1px solid var(--rbd-hairline);
  position: relative; overflow: hidden; transform: rotate(-3deg);
}
/* All three on brand cream, not the rust/green/blue gradients this shipped
   with (operator correction, 2026-07-30 -- those were never brand colors).
   Cream forced dark-on-light text throughout: gold fails contrast on cream
   here (it is a dark-background accent in this system, see .eyebrow-gold's
   sibling .eyebrow default using --rbd-fg3, not gold) so eyebrow/meta/price
   swap to fg3/navy and the dot chip swaps its gold ring for navy. */
.vp__visual-budget, .vp__visual-city, .vp__visual-items { background: var(--rbd-cream); color: var(--rbd-navy); }
.vp__visual-budget { display: flex; flex-direction: column; justify-content: space-between; }
.vp__visual-eyebrow { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-fg3); margin-bottom: 10px; }
.vp__visual-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--rbd-navy); margin-bottom: 14px; }
.vp__visual-quote { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--rbd-fg2); }
.vp__visual-meta { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-fg3); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rbd-hairline); }
.vp__visual-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rbd-hairline); }
.vp__visual-item:last-child { border-bottom: none; }
.vp__item-dot { width: 24px; height: 24px; border-radius: var(--r-sm); background: rgba(26,39,68,0.06); border: 1px solid var(--rbd-navy); font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--rbd-navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vp__item-name { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--rbd-navy); display: block; }
.vp__item-price { font-family: var(--font-body); font-size: 11px; color: var(--rbd-fg3); }

/* ---- Tabs ---- */
.tabs__outer { max-width: 1240px; margin: 0 auto; }
.tabs__header-left .eyebrow { margin-bottom: 18px; }
/* Count-agnostic (Plan #249 Phase 03). Was repeat(6, 1fr), sized to the 6
   fabricated channel tabs Phase 00 cut: a real 5-tab lander left one column
   empty inside the pill, and the template comment claiming "tab count is free"
   was true of initTabs and false of this rule. auto-flow: column fills the pill
   at any count; the media queries below re-wrap to fixed rows on narrow. */
.tabs__bar {
  position: relative; padding: 6px; border-radius: var(--r-pill);
  background: rgba(26,39,68,0.08); border: 1px solid var(--rbd-hairline);
  margin-bottom: 36px; display: grid;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
/* height is set by main-v5.js::moveIndicator now, per row (Plan #249 Phase 03):
   the 100% here was correct only on a single-row bar. Kept as the pre-JS default
   so the indicator is not zero-height before the first measure. */
.tabs__indicator {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--rbd-navy); border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  transition: transform 480ms var(--ease-out), width 480ms var(--ease-out), height 480ms var(--ease-out);
  pointer-events: none; z-index: 1;
}
.tabs__btn {
  position: relative; z-index: 2; background: transparent; border: none; cursor: pointer;
  padding: 14px 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 500;
  color: var(--rbd-fg3); transition: color 320ms; border-radius: var(--r-pill); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabs__btn:hover { color: var(--rbd-navy); }
.tabs__btn--active { color: var(--rbd-cream); }
.tabs__btn--active:hover { color: var(--rbd-cream); }
.tabs__icon { width: 18px; height: 18px; flex-shrink: 0; }

.tabs__panel { display: none; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.tabs__panel--active { display: grid; }
.tabs__panel-frame {
  background: var(--rbd-navy); color: var(--rbd-cream); border-radius: var(--r-xl); padding: 28px;
  border: 1px solid rgba(245,230,211,0.12); box-shadow: var(--sh-4);
  min-height: 460px; position: relative; overflow: hidden;
}
/* Real exported inside-page image inside the navy panel frame (Plan #249
   Phase 03). The frame had no img rule, so an unsized export overflowed its
   min-height: 460px box. contain, not cover: a document page must not crop. */
.tabs__panel-shot { position: absolute; inset: 28px; display: flex; align-items: center; justify-content: center; }
/* Cream mat behind every tab image (Plan #249, 2026-07-30). The other 4 page
   exports are themselves light-background documents, so they already read
   crisp against the navy frame; plan-cover.jpg is a navy-on-navy cover page
   and had nothing to separate it from its own navy frame -- it visually
   dissolved into the backdrop (reported as "a blue overlay on the cover").
   box-sizing: border-box keeps the padding inside max-width/max-height, so
   this cannot overflow the frame the way an outside-the-box padding would. */
.tabs__panel-shot img { box-sizing: border-box; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 16px; background: var(--rbd-cream); border-radius: var(--r-md); box-shadow: var(--sh-3); }
/* The tab images are PORTRAIT document pages (935x1210), so in the 2-column
   desktop layout the frame's HEIGHT is what sizes them, not the column's width.
   At min-height:460px the shot box is 404px tall, which rendered a page 318px
   wide -- a 34% downscale that left its product names and prices illegible --
   while ~550px of column width sat unused beside it. That was tolerable when the
   default tab was the cover (a title page: nothing on it to read) and became the
   whole problem once the default became the buy order, whose entire job is to let
   a buyer READ real pieces at real prices before paying $19.
   768px is not a taste number: it is the height at which the page grows to exactly
   the column width and the two constraints meet. Taller only adds empty navy.
   Scoped to >=1200px because that is where .tabs__panel is still 2-column; below
   it the panel is single-column and already width-bound, so the image is large
   and legible there without help. */
@media (min-width: 1200px) {
  .tabs__panel-frame { min-height: clamp(690px, 59vw, 768px); }
}
.tabs__panel-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 22px; }
.tabs__panel-desc .eyebrow { margin-bottom: 16px; }
.tabs__panel-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -0.02em; color: var(--rbd-navy); margin-bottom: 18px; }
.tabs__panel-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--rbd-fg3); max-width: 520px; margin-bottom: 28px; }

/* ---- Tabs on a DARK chapter (Plan #249 Phase 03) ----
   #inside is `chapter chapter--navy`, but every one of these rules was authored
   for a light panel. Measured on the shipped /room-plan lander:
     .tabs__panel-title   ratio 1.00   navy #1A2744 on navy #1A2744, invisible
     .tabs__panel-body    ratio 2.91   FAIL AA
     .tabs__btn inactive  ratio 2.91   FAIL AA
     .tabs__header-right  ratio 2.91   FAIL AA
   Pre-existing: the ancestor page had the same navy-on-navy panel title inside
   the same navy section. The G7 contrast gate blocks a Ship verdict on this, so
   it is fixed at the stylesheet rather than waived. Light-secondary alpha
   matches the existing .voices__header-right token. The active pill was also
   var(--rbd-navy) on navy (no visible pill at all); it becomes a gold-outlined
   tint, which keeps the cream label at ratio 8.9. */
.chapter--navy .tabs__bar { background: rgba(245,230,211,0.06); border-color: rgba(245,230,211,0.14); }
.chapter--navy .tabs__indicator { background: rgba(212,169,106,0.22); box-shadow: inset 0 0 0 1px rgba(212,169,106,0.55); }
.chapter--navy .tabs__btn { color: rgba(245,230,211,0.62); }
.chapter--navy .tabs__btn:hover { color: var(--rbd-cream); }
.chapter--navy .tabs__btn--active, .chapter--navy .tabs__btn--active:hover { color: var(--rbd-cream); }
.chapter--navy .tabs__panel-title { color: var(--rbd-cream); }
.chapter--navy .tabs__panel-body { color: rgba(245,230,211,0.75); }
.chapter--navy .tabs__header-right { color: rgba(245,230,211,0.75); }
/* SOLID, not translucent (2026-07-30 operator finding). The prior
   rgba(245,230,211,0.05) was ~5% opacity -- effectively transparent -- so
   .chapter--navy::before's decorative sketch-pattern layer (styles-v5.css
   ~line 707, opacity 0.06, mix-blend-mode: screen, position:absolute over
   the WHOLE chapter) showed straight through the "card," reading as a
   literal see-through panel. Matches the solid-navy-card pattern already
   used by .vp__card elsewhere on this same page instead of inventing a new
   translucent-card language. */
.chapter--navy .tabs__panel-frame { background: #212F52; border-color: rgba(245,230,211,0.16); }

/* Tab panel grids */
.tabs__panel-grid--4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tabs__panel-grid--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.tabs__panel-grid--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Room card (inside tabs) */
.room-card {
  aspect-ratio: 2 / 3; border-radius: var(--r-sm); padding: 10px 8px 10px 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-3), inset 3px 0 0 rgba(0,0,0,0.15);
  color: var(--rbd-cream);
}
.room-card--terracotta { background: linear-gradient(160deg, #C75B39, #8A3820); }
.room-card--navy { background: linear-gradient(160deg, #1A2744, #0D1526); }
.room-card--emerald { background: linear-gradient(160deg, #1B5E4B, #0E3029); }
.room-card--gold { background: linear-gradient(160deg, #D4A96A, #9C7E36); color: var(--rbd-navy); }
.room-card--blue { background: linear-gradient(160deg, #5B7FA5, #3A5270); }
.room-card--cream { background: linear-gradient(160deg, #F5E6D3, #D9CFC1); color: var(--rbd-navy); }
.room-card__type { font-family: var(--font-body); font-size: 7px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.room-card__name { font-family: var(--font-display); font-size: 11px; font-weight: 700; line-height: 1.04; }
.room-card__price { font-family: var(--font-body); font-size: 7px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.8; }

/* Pill filters */
.tabs__panel-filters { margin-top: 26px; padding: 16px 18px; background: rgba(212,169,106,0.08); border-radius: var(--r-lg); border: 1px solid rgba(212,169,106,0.22); }
.tabs__panel-filters-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 8px; }
.tabs__panel-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 5px 10px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; color: rgba(245,230,211,0.7); border: 1px solid rgba(245,230,211,0.2); }
.pill--active { background: var(--rbd-gold); color: var(--rbd-navy); border: none; }

/* Tab: City detail */
.tabs__panel-city-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.tabs__panel-display { font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--rbd-cream); margin-top: 8px; line-height: 1; }
.tabs__panel-city-num { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--rbd-gold); line-height: 1; letter-spacing: -0.03em; display: block; }
.tabs__panel-city-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); margin-top: 4px; display: block; }
.tabs__panel-note { padding: 16px 18px; background: rgba(245,230,211,0.04); border-radius: var(--r-lg); border: 1px solid rgba(245,230,211,0.12); margin-bottom: 18px; }
.tabs__panel-note-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 10px; }
.tabs__panel-note-quote { font-family: var(--font-body); font-size: 16px; color: var(--rbd-cream); line-height: 1.5; }
.tabs__panel-meta-cell { padding: 12px 14px; border-radius: var(--r-md); background: rgba(245,230,211,0.04); border: 1px solid rgba(245,230,211,0.1); }
.tabs__panel-meta-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 4px; display: block; }
.tabs__panel-meta-val { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--rbd-cream); }

/* Tab: Item list */
.tabs__panel-itemlist { display: flex; flex-direction: column; margin-top: 22px; }
.tabs__item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(245,230,211,0.1); }
.tabs__item:last-child { border-bottom: none; }
.tabs__item-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--rbd-cream); flex-shrink: 0; border: 2px solid var(--rbd-navy); box-shadow: 0 0 0 1px var(--rbd-gold); }
.tabs__item-av--terracotta { background: var(--pal-a-primary); }
.tabs__item-av--emerald { background: var(--pal-d-primary); }
.tabs__item-av--gold { background: var(--rbd-gold); color: var(--rbd-navy); }
.tabs__item-av--blue { background: var(--pal-b-primary); }
.tabs__item-sq { width: 42px; height: 42px; border-radius: var(--r-sm); background: linear-gradient(160deg, rgba(26,39,68,0.8), rgba(26,39,68,0.4)); border: 1px solid rgba(212,169,106,0.32); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--rbd-gold); flex-shrink: 0; }
.tabs__item div { flex: 1; min-width: 0; }
.tabs__item-name { font-family: var(--font-body); font-size: var(--fs-body); color: var(--rbd-cream); font-weight: 500; display: block; }
.tabs__item-detail { font-family: var(--font-body); font-size: 14px; color: rgba(245,230,211,0.7); margin-top: 2px; display: block; }
.tabs__item-badge { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--rbd-gold); color: var(--rbd-navy); vertical-align: middle; margin-left: 6px; }
.tabs__item-stat { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); flex-shrink: 0; }

/* Tab: Budget breakdown */
.tabs__panel-budget { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.tabs__budget-row { padding: 18px 20px; border-radius: var(--r-lg); background: rgba(245,230,211,0.04); border: 1px solid rgba(245,230,211,0.12); position: relative; display: flex; justify-content: space-between; align-items: center; }
.tabs__budget-name { font-family: var(--font-body); font-size: var(--fs-body); color: var(--rbd-cream); }
.tabs__budget-price { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; color: var(--rbd-gold); }

/* Tab: Style tags */
.tabs__style { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-md); background: rgba(245,230,211,0.04); border: 1px solid rgba(245,230,211,0.1); }
.tabs__style-name { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--rbd-cream); }
.tabs__style-tag { padding: 4px 9px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tabs__style-tag--popular { background: var(--rbd-gold); color: var(--rbd-navy); }
.tabs__style-tag--trending { background: rgba(212,169,106,0.18); color: var(--rbd-gold); }
.tabs__style-tag--new { background: rgba(123,143,111,0.3); color: #7A8B6F; }
.tabs__style-tag--classic { background: transparent; color: rgba(245,230,211,0.7); border: 1px solid rgba(245,230,211,0.18); }

/* ---- Showcase ---- */
.showcase { padding: 120px 24px; }
/* ---- Product grid (Plan #249 Phase 00). One card per SKU in the family, each linking to that
   product's existing PDP. Cards are plain anchors; buying happens on the PDP only. Covers are
   portrait, so the media box is 3/4 and images lazy-load: /lookbooks carries 48 of them. ---- */
.pgrid__inner { max-width: 1240px; margin: 0 auto; }
.pgrid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5) var(--sp-4); }
.pcard { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--r-lg); overflow: hidden; background: var(--rbd-cream); border: 1px solid rgba(212,169,106,0.25); box-shadow: var(--sh-1); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pcard:hover, .pcard:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-3); }
.pcard__media { position: relative; aspect-ratio: 3 / 4; background: var(--rbd-offwhite, #efe7db); overflow: hidden; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* A hero the Phase 01 brand-name pass BLOCKED never becomes an image (Plan #249
   Phase 03). This is the neutral brand texture already served site-wide, not an
   error state and not a claim: the card keeps its shape and the grid stays
   consistent while the cover's root cause is fixed. render_landers.py logs every
   card that lands here, and --strict-brand fails the build instead. */
.pcard__media--pending { background-color: var(--rbd-cream); background-image: url("/_brand/assets/Banner-Sketch-Transition.webp"); background-size: 460px auto; background-repeat: repeat; box-shadow: inset 0 0 0 1px rgba(212,169,106,0.18); }
/* Offset the texture per column so adjacent placeholders do not line up into one
   continuous sheet. With every cover in a family blocked (Bundles: 16 of 16) the
   grid otherwise reads as a rendering fault rather than as 16 distinct products. */
.pcard__media--pending { background-position: 0 0; }
.pcard:nth-child(4n+2) .pcard__media--pending { background-position: -150px -60px; }
.pcard:nth-child(4n+3) .pcard__media--pending { background-position: -300px -120px; }
.pcard:nth-child(4n+4) .pcard__media--pending { background-position: -80px -200px; }
.pcard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* fg3 -> fg2 (Plan #249 Phase 03): the badge measured 4.15 on cream at 10px
   uppercase, missing AA. Same miss class as .who__card-text. */
.pcard__eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-fg2); }
.pcard__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -0.01em; color: var(--rbd-navy); }
.pcard__meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; }
.pcard__price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--rbd-navy); }
.pcard__format { font-family: var(--font-body); font-size: 11px; color: var(--rbd-fg3); }

.showcase__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.showcase__frame { background: var(--rbd-navy); border: 1px solid rgba(212,169,106,0.2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.showcase__chrome { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: rgba(26,39,68,0.6); border-bottom: 1px solid rgba(212,169,106,0.12); }
.showcase__chrome span { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,230,211,0.25); }
.showcase__chrome span:first-child { background: rgba(212,169,106,0.6); }
.showcase__media { position: relative; aspect-ratio: 3 / 2; background: var(--rbd-cream); display: flex; align-items: center; justify-content: center; }
.showcase__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.showcase__placeholder { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-fg3); }
.showcase__caption { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: rgba(245,230,211,0.6); padding: var(--sp-4) var(--sp-4) var(--sp-5); }

/* ---- Stats bar ---- */
.prepop { padding: 0 24px 120px; }
.prepop__inner { max-width: 1240px; margin: 0 auto; }
.prepop__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 8px; background: var(--rbd-navy); border-radius: var(--r-xl); border: 1px solid rgba(245,230,211,0.12); }
.prepop__stat { padding: 22px 14px; text-align: center; border-right: 1px solid rgba(245,230,211,0.1); }
.prepop__stat:last-child { border-right: none; }
.prepop__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); color: var(--rbd-gold); line-height: 1; letter-spacing: -0.03em; display: block; }
.prepop__label { margin-top: 8px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,230,211,0.6); display: block; }

/* ---- Who Section ---- */
.who__inner { max-width: 1240px; margin: 0 auto; }
/* auto-fit (Plan #249 Phase 03): was repeat(3, 1fr) for the 3 fabricated viewer
   cards. Real per-family copy carries 1 or 2, which left a 3-col grid short. */
.who__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
/* auto-fit collapses the empty tracks, which is right -- but it then hands the
   lone survivor the full 1240px, and a card with a 220px gradient band stretched
   to 1240 reads as a banner, not a card. Measured on /room-plan and /bundles,
   which each carry exactly one avatar. Cap the solo case; :has() is already how
   .vp__cards drives its active-card layout in this stylesheet. */
.who__cards:not(:has(.who__card:nth-child(2))) { grid-template-columns: minmax(0, 620px); }
.who__card { background: rgba(245,230,211,0.7); border: 1px solid var(--rbd-hairline); border-radius: var(--r-xl); overflow: hidden; transition: transform 240ms, box-shadow 240ms, border-color 240ms; }
.who__card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: rgba(212,169,106,0.3); }
.who__card-visual { height: 220px; position: relative; overflow: hidden; padding: 26px; display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--rbd-hairline); }
/* The 220px band was sized to hold the $487 / $612 / $734 price chips that were
   removed as fabricated (Plan #249 Phase 00). With nothing in it, it reads as a
   failed image slot rather than a colour accent -- 220px of empty terracotta over
   ~90px of text. :empty targets exactly the no-content case, so a future card
   that DOES carry content keeps the full band. */
.who__card-visual:empty { height: 88px; padding: 0; }
/* WAS three different off-brand gradients: #C75B39 rust, #1B5E4B green, #5B7FA5
   blue. Those are the SAME three hexes the operator rejected on .vp__card-visual
   in review round 2 ("not in colors_and_type.css"), and the ruling applies here
   for the same reason -- the fix back then only reached the .vp__ rules, and this
   sibling kept the palette. It stayed quiet while WHO_CARDS_HTML shipped a single
   card; adding the second and third turned it into a rust/green/blue stripe across
   the section. The renter/firsttime/refresh names are assigned POSITIONALLY by
   render_landers.py (variants[i]), so they never described the card's content and
   carry no meaning worth colour-coding. One brand navy for all three, matching the
   solid-navy card treatment already used by .vp__card and .tabs__panel-frame on
   this page. Selectors kept so the renderer needs no change. */
.who__card-visual--renter,
.who__card-visual--firsttime,
.who__card-visual--refresh { background: linear-gradient(160deg, #212F52, var(--rbd-navy)); }
.who__card-body { padding: 24px 26px 28px; }
.who__card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.who__card-year { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--rbd-fg3); }
.who__card-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.18; letter-spacing: -0.01em; color: var(--rbd-navy); margin-bottom: 14px; }
/* fg3 -> fg2 (Plan #249 Phase 03): fg3 on this card's 0.7-alpha cream measured
   4.34, missing AA by 0.16. fg2 is the existing darker body token. */
.who__card-text { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--rbd-fg2); }

/* ---- Voices ---- */
.voices__inner { max-width: 1240px; margin: 0 auto; }
/* auto-fit (Plan #249 Phase 03): was repeat(3, 1fr) for the 3 fabricated
   testimonials. "What you get" carries 3 to 7 real fact cards per family. */
.voices__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
/* WAS `background: rgba(26,39,68,0.06)` -- 6% navy sitting on a cream chapter, so
   the five "what you get" cards were very nearly invisible: a faint tint on cream,
   with the section's sketch texture reading straight through them. Same defect
   class as the `rgba(...,0.05)` `.tabs__panel-frame` caught in review round 4, and
   the same fix: an opaque brand card, not a translucent tint.
   THE TEXT COLOURS BELOW ARE PART OF THIS CHANGE, NOT A POLISH PASS. `.voices__card-quote`
   and `-name` were `var(--rbd-navy)`, chosen when the card was effectively cream.
   Turning the card navy without moving them reproduces exactly the ratio-1.00
   navy-on-navy invisible-text bug this stylesheet has already shipped twice. Any
   future change to this background must move these four colours with it. */
.voices__card { background: linear-gradient(160deg, #212F52, var(--rbd-navy)); border: 1px solid rgba(245,230,211,0.16); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; }
.voices__card-mark { font-family: var(--font-display); font-size: 44px; color: var(--rbd-gold); opacity: 0.7; line-height: 1; margin-bottom: 6px; }
.voices__card-quote { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--rbd-cream); margin-bottom: 24px; flex: 1; }
.voices__card-author { display: flex; align-items: center; gap: 12px; }
/* .voices__card-av* removed with the fake reviewer avatars it styled (Plan #249 Phase 00).
   Note tabs__item-av--* is a separate, still-used class; do not confuse the two. */
/* Cream, not navy, for the same reason as -quote above: the card is opaque navy now. */
.voices__card-name { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body-sm); color: var(--rbd-cream); display: block; }
.voices__card-loc { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,230,211,0.7); margin-top: 4px; display: block; }

/* ---- Pricing ---- */
.pricing__inner { max-width: 1240px; margin: 0 auto; }
.pricing__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; align-items: stretch; }
.pricing__proof { background: var(--rbd-cream); border: 1px solid rgba(212,169,106,0.25); border-radius: var(--r-xl); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--sh-2); }
.pricing__proof .eyebrow { margin-bottom: 16px; }
/* Trust through specificity (Plan #249 Phase 00). The quote, star-rating and avatar-stack rules
   were deleted with the fabricated testimonial they styled, so no later edit reuses them. */
.pricing__proof-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 18px; }
.pricing__proof-stat { display: flex; flex-direction: column; gap: 4px; }
.pricing__proof-n { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: var(--rbd-navy); }
.pricing__proof-k { font-family: var(--font-body); font-size: 12px; line-height: 1.35; color: var(--rbd-fg3); }
.pricing__proof-honest { margin-top: 26px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--rbd-fg2); }
.pricing__proof-honest strong { color: var(--rbd-navy); font-weight: 700; }

.pricing__card {
  background: var(--rbd-navy); border-radius: var(--r-xl); padding: 40px;
  color: var(--rbd-cream); border: 1px solid rgba(212,169,106,0.3);
  position: relative; overflow: hidden;
}
.pricing__card-glow { position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(212,169,106,0.16), transparent 60%); pointer-events: none; }
.pricing__card-content { position: relative; z-index: 1; }
.pricing__card-content .eyebrow { margin-bottom: 16px; }
.pricing__card-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pricing__card-dollar { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--rbd-gold); align-self: flex-start; margin-top: 14px; }
.pricing__card-amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(72px, 8.5vw, 112px); color: var(--rbd-cream); line-height: 0.9; letter-spacing: -0.04em; }
.pricing__card-term { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 26px; }
.pricing__card-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.pricing__card-features li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--rbd-cream); }
.pricing__card-features li::before { content: '→'; color: var(--rbd-gold); flex-shrink: 0; margin-top: 2px; font-size: 10px; }
.pricing__card-cta { width: 100%; justify-content: center; }
.pricing__card-delivery { text-align: center; margin-top: 14px; font-family: var(--font-body); font-size: 14px; color: rgba(245,230,211,0.6); }

/* ---- FAQ ---- */
.faq { padding: 120px 24px; }
.faq__inner { max-width: 1100px; margin: 0 auto; display: flex; gap: var(--sp-8); align-items: flex-start; }
.faq__left { flex: 0 0 35%; }
.faq__left .eyebrow { margin-bottom: 18px; }
.faq__right { flex: 1; border-top: 1px solid var(--rbd-hairline); }
.faq__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--rbd-navy); }
.faq__body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--rbd-fg3); margin: var(--sp-5) 0 var(--sp-7); }
.faq-item { border-bottom: 1px solid var(--rbd-hairline); transition: background-color var(--dur-fast) ease; }
.faq-item:hover { background: rgba(245,230,211,0.3); }
.faq-item.open { border-bottom-color: rgba(26,39,68,0.2); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 22px 4px;
  font-family: var(--font-body); font-size: 19px; font-weight: 500; line-height: 1.3;
  color: var(--rbd-navy);
}
.faq-item__icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--rbd-hairline); color: var(--rbd-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 22px;
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) ease; line-height: 1;
}
.faq-item:hover .faq-item__icon { border-color: var(--rbd-navy); }
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__a { height: 0; overflow: hidden; }
.faq-item__a p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--rbd-fg3); padding: 0 4px 24px; max-width: 820px; }

/* ---- Final CTA ---- */
.final-cta { padding: 112px 24px; background: var(--rbd-cream); }
.final-cta__inner { max-width: 1240px; margin: 0 auto; }
.final-cta__card { background: var(--rbd-navy); border-radius: var(--r-xl); position: relative; overflow: hidden; color: var(--rbd-cream); border: 1px solid rgba(212,169,106,0.2); }
.final-cta__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 600px at 20% 20%, rgba(212,169,106,0.18), transparent 60%), radial-gradient(circle 600px at 80% 90%, rgba(26,39,68,0.45), transparent 60%); }
.final-cta__content { position: relative; z-index: 1; padding: 72px 56px; text-align: center; }
.final-cta__content .eyebrow { margin-bottom: 22px; }
.final-cta__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 76px); line-height: 1.05; letter-spacing: -0.025em; color: var(--rbd-cream); }
.final-cta__body { margin: 24px auto 0; max-width: 580px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: rgba(245,230,211,0.7); text-align: center; }
.final-cta__content .btn { margin-top: 32px; }
.final-cta__terms { margin-top: 18px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbd-gold); }

/* ---- Footer ---- */
#footer { background: var(--rbd-navy); padding: 80px 24px 40px; }
.footer__grid { max-width: 1240px; margin: 0 auto 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 18px; }
.footer__logo { height: 40px; width: auto; border-radius: 50%; }
.footer__wordmark { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--rbd-cream); display: block; }
.footer__brand-desc { font-family: var(--font-body); font-size: var(--fs-body-sm); color: rgba(245,230,211,0.6); line-height: 1.5; max-width: 320px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col-title { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rbd-gold); margin-bottom: 8px; }
.footer__col a { font-family: var(--font-body); font-size: var(--fs-body); color: var(--rbd-cream); transition: color var(--dur-med); text-decoration: none; }
.footer__col a:hover { color: var(--rbd-gold); }
.footer__newsletter-desc { font-family: var(--font-body); font-size: 14px; color: rgba(245,230,211,0.6); margin-bottom: 16px; }
.footer__newsletter-form { display: flex; gap: 0; border-radius: var(--r-pill); border: 1px solid rgba(245,230,211,0.15); padding: 4px; background: rgba(26,39,68,0.6); }
.footer__newsletter-form input { flex: 1; border: none; background: transparent; outline: none; padding: 10px 16px; font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--rbd-cream); }
.footer__newsletter-form input::placeholder { color: rgba(245,230,211,0.3); }
.footer__newsletter-form button { background: var(--rbd-gold); color: var(--rbd-navy); border: none; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: background var(--dur-med); }
.footer__newsletter-form button:hover { background: #C09858; }
.footer__bottom { max-width: 1240px; margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(245,230,211,0.1); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__tagline { font-family: var(--font-body); font-size: var(--fs-body); color: rgba(245,230,211,0.6); }
.footer__copyright { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,230,211,0.4); }

/* Sketch texture on sections */
.chapter, .showcase, .faq, .final-cta, .context-strip, .prepop, #footer { position: relative; isolation: isolate; }
.chapter--cream::before, .chapter--offwhite::before, .faq::before, .final-cta::before, .prepop::before, .showcase::before { content: ""; position: absolute; inset: 0; background-image: url("/_brand/assets/Banner-Sketch-Transition.webp"); background-size: 1400px auto; background-repeat: repeat; background-position: center; opacity: 0.08; pointer-events: none; z-index: 0; mix-blend-mode: multiply; }
.chapter--navy::before, .context-strip::before, #footer::before { content: ""; position: absolute; inset: 0; background-image: url("/_brand/assets/Banner-Sketch-Transition.webp"); background-size: 1400px auto; background-repeat: repeat; background-position: center; opacity: 0.06; pointer-events: none; z-index: 0; mix-blend-mode: screen; }
.chapter > *, .showcase > *, .faq > *, .final-cta > *, .context-strip > *, .prepop > *, #footer > * { position: relative; z-index: 1; }

/* ---- Responsive ---- */
/* Plan #249 Phase 03: hide the link row below the width where it fits. The
   pill needs 932px of content in a min(1000px, 100vw - 32px) shell, so 964px of
   viewport. Brand + CTA remain, which is the same collapse the 767px breakpoint
   already chose -- applied at the width the measurement actually calls for. */
@media (max-width: 999px) {
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr auto; }
  /* Paired with the line above: the toggle appears at exactly the width the link row
     disappears, so there is never a viewport with neither. */
  .nav__toggle { display: inline-flex; }
}

@media (max-width: 1199px) {
  .chapter { padding: 80px 24px; }
  .faq { padding: 80px 24px; }
  .pgrid__grid { grid-template-columns: repeat(3, 1fr); }
  .vp__header, .who__header, .voices__header, .pricing__header, .tabs__header { grid-template-columns: 1fr; gap: 24px; }
  .vp__cards { grid-template-columns: 1fr 1fr 1fr; }
  .vp__card { height: 360px; }
  .vp__card-visual { display: none; }
  .vp__card--active .vp__card-text { max-width: 100%; }
  .context-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .context-strip__cell:nth-child(2n) { border-right: none; }
  .context-strip__cell:nth-child(4n) { border-right: 1px solid rgba(245,230,211,0.1); }
  .context-strip__cell:nth-child(n+5) { border-bottom: 1px solid rgba(245,230,211,0.1); }
  .vp__cards:has(.vp__card--active) { grid-template-columns: 1fr 1fr 1fr; }
  .vp__cards:has(.vp__card:nth-child(2).vp__card--active) { grid-template-columns: 1fr 1fr 1fr; }
  .vp__cards:has(.vp__card:nth-child(3).vp__card--active) { grid-template-columns: 1fr 1fr 1fr; }
  .context-strip__cell:nth-child(n+7) { border-bottom: none; }
  .tabs__bar { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); }
  /* 3 columns orphans the 4th tab on a row of its own with two thirds of the pill
     empty, which reads as a mistake. /room-plan has exactly 4 tabs since the cover
     was cut (2026-08-02). Scoped by COUNT rather than by lander, because CSS cannot
     see which lander it is on: 5-tab (lookbooks, guides) and 7-tab (bundles) bars
     keep repeat(3, 1fr) and are untouched. Matches what <=767px already does for
     every bar, so a 4-tab bar is now 2+2 at every width below the single-row layout.
     :has() is already relied on in this file (see .vp__cards:has(...)); where it is
     unsupported this degrades to the previous 3+1, which is ugly but not broken.
     NOTE nth-of-TYPE, not nth-child: .tabs__bar's first child is <div
     class="tabs__indicator">, so the buttons are children 2..5 and a :nth-child(4)
     test silently never matches. Counting by type ignores the indicator div. */
  .tabs__bar:has(.tabs__btn:nth-of-type(4)):not(:has(.tabs__btn:nth-of-type(5))) { grid-template-columns: repeat(2, 1fr); }
  .tabs__panel { grid-template-columns: 1fr; gap: 36px; }
  .showcase__grid { grid-template-columns: repeat(2, 1fr); }
  .prepop__stats { grid-template-columns: repeat(3, 1fr); }
  .prepop__stat:nth-child(3) { border-right: none; }
  .pricing__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .final-cta__content { padding: 56px 32px; }
}

@media (max-width: 767px) {
  .chapter { padding: 64px 20px; }
  .faq { padding: 64px 20px; }
  .pgrid__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .pcard__title { font-size: 15px; }
  #nav { top: 10px; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__inner { grid-template-columns: auto 1fr auto; padding: 10px 14px 10px 18px; }
  .hero { padding-top: 80px; }
  .hero__headline { font-size: 48px; }
  .hero__cta-row .btn--ghost { display: none; }
  .hero__cta-row { flex-direction: column; align-items: center; }
  .context-strip__grid { grid-template-columns: 1fr 1fr; }
  .vp__cards { grid-template-columns: 1fr; }
  .vp__card { height: auto; min-height: 280px; }
  .tabs__bar { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
  .showcase__grid { grid-template-columns: 1fr; }
  .prepop__stats { grid-template-columns: repeat(2, 1fr); }
  .who__cards { grid-template-columns: 1fr; }
  .voices__cards { grid-template-columns: 1fr; }
  .faq__inner { flex-direction: column; gap: var(--sp-7); }
  .faq__left { flex-basis: auto; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .btn--primary, .btn--accent { width: 100%; max-width: 320px; }
  .btn--wide { width: 100%; max-width: 320px; }
}

@media (max-width: 375px) {
  .hero__headline { font-size: 40px; }
}

/* Plan #249 Phase 04 graphic-design-consult finding: below ~474px the 767px
   breakpoint's "brand + CTA remain" collapse (line 700) runs out of room --
   logo+wordmark (~192px) + CTA pill (~170px) + 2 grid gaps (48px) + nav
   padding (32px) = 442px of CONTENT needs 474px of viewport (+32px outer
   margin from #nav's calc(100vw - 32px)), so every phone at or below 430px
   (all current iPhones) overlapped the wordmark under the CTA pill at every
   scroll position. Drop the wordmark text at this width; the round logo mark
   plus the CTA pill fit with room to spare (260px of 326px available). */
@media (max-width: 500px) {
  .nav__wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .particle { animation: none !important; }
}