/* ==========================================================================
   Page sections — blocks that belong to one template rather than the
   global component set. Grouped by page, in build order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME
   -------------------------------------------------------------------------- */

/* hero-split-parallax */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #161A13;
  padding: 160px var(--gutter) 84px;
  color: var(--c-paper);
}
.hero__media {
  position: absolute;
  inset: -13% 0;
  height: 126%;
  will-change: transform;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The still only shows when the video cannot: reduced motion, or a browser
   that plays neither source. Both layers are stacked, video on top. */
.hero__still { position: absolute; inset: 0; }
.hero__video { position: relative; z-index: 1; }

/* An image hero keeps the slow Ken Burns push; the film supplies its own. */
.hero__media > img:only-child { animation: lp-kenburns 26s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .62) 0%,
    rgba(15, 18, 13, .18) 34%,
    rgba(15, 18, 13, .28) 62%,
    rgba(15, 18, 13, .78) 100%);
}
/* --- Parallax --------------------------------------------------------------
   A layer marked [data-parallax] is taller than its frame; ui.js slides it
   within that slack. The overscan here *is* the strength of the effect —
   more slack, more travel — and because the JS derives its range from the
   rendered sizes, the layer can never slide far enough to show its edge.
   -------------------------------------------------------------------------- */

.parallax-frame { position: relative; overflow: hidden; }
.parallax-frame > [data-parallax] {
  position: absolute;
  inset: -12% 0;
  height: 124%;
  width: 100%;
  will-change: transform;
}
.parallax-frame > [data-parallax] img,
.parallax-frame > [data-parallax] video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-bleed band: an image that holds still while the copy scrolls over it. */
.parallax-band {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
  isolation: isolate;
}
.parallax-band__media {
  position: absolute;
  inset: -16% 0;
  height: 132%;
  width: 100%;
  will-change: transform;
  z-index: 0;
}
.parallax-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parallax-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .74) 0%,
    rgba(15, 18, 13, .52) 45%,
    rgba(15, 18, 13, .78) 100%);
}
.parallax-band__inner { position: relative; z-index: 2; }
.parallax-band .label { color: var(--c-spectrum); }

/* A quiet full-width quote over photography — the band's usual payload. */
.band-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.18;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.band-quote em { font-style: italic; color: var(--c-spectrum); }

/* --- Hero lens flare -----------------------------------------------------
   --fx/--fy are the light's position inside the hero (written by ui.js, and
   eased toward the cursor a frame at a time so it carries some weight);
   --cx/--cy are the pivot: the logo mark, because in this brand the lockup is
   the light source. Every piece places itself with transform
   only, so the whole thing stays on the compositor.
   ------------------------------------------------------------------------ */
.hero__flare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
  /* screen blending is what stops it looking like pasted-on white shapes */
  mix-blend-mode: screen;
  --fx: 50%; --fy: 40%;
  --cx: 50%; --cy: 50%;
}
.hero__flare.is-lit { opacity: 1; }

.hero__flare > * {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  will-change: transform;
}

/* The ghosts — reflections between lens elements, strung along the axis. */
.hero__flare-ghost {
  width: var(--d);
  height: var(--d);
  background: radial-gradient(circle,
    rgba(var(--c), var(--a)) 0%,
    rgba(var(--c), calc(var(--a) * .55)) 55%,
    rgba(var(--c), 0) 72%);
  filter: blur(1px);
  transform: translate(
    calc(var(--cx) + (var(--fx) - var(--cx)) * var(--t) - 50%),
    calc(var(--cy) + (var(--fy) - var(--cy)) * var(--t) - 50%));
}

/* The iris ring around the source. */
.hero__flare-halo {
  width: 460px; height: 460px;
  background: radial-gradient(circle,
    rgba(var(--flare-warm), 0) 52%,
    rgba(var(--flare-warm), .055) 61%,
    rgba(var(--flare-amber), .035) 66%,
    rgba(var(--flare-warm), 0) 74%);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The anamorphic streak — horizontal, and the widest thing on screen. */
.hero__flare-streak {
  width: 1100px; height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(var(--flare-warm), 0) 0%,
    rgba(var(--flare-warm), .16) 34%,
    rgba(var(--flare-core), .5) 50%,
    rgba(var(--flare-warm), .16) 66%,
    rgba(var(--flare-warm), 0) 100%);
  filter: blur(2.5px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The source itself. */
.hero__flare-core {
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .5) 0%,
    rgba(var(--flare-warm), .18) 22%,
    rgba(var(--flare-amber), .06) 44%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(4px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* An optical effect is exactly the kind of motion to drop on request — and
   there is no cursor to track on touch, so it is not built there either. */
@media (prefers-reduced-motion: reduce) { .hero__flare { display: none; } }
@media (hover: none) { .hero__flare { display: none; } }

.hero__inner { position: relative; z-index: 10; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.hero__title { font-size: var(--t-display-xl); font-weight: 400; line-height: 1; letter-spacing: -.028em; text-shadow: 0 2px 40px rgba(0, 0, 0, .45); }
.hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 253, 248, .88); max-width: 460px; text-shadow: 0 1px 20px rgba(0, 0, 0, .5); }
.hero__cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 12px; }
.hero__scroll {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 253, 248, .62);
}
.hero__scroll::before { content: ''; width: 46px; height: 1px; background: rgba(255, 253, 248, .5); }

/* proof-bars — "not all lights are equal".
   Only the figure gets the figure treatment; the row's name is body copy.
   (It used to be `.proof__row span`, which caught the name too and left the
   first row — marked up with <strong> — inconsistent with the other two.) */
.proof { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.proof__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: 13.5px; margin-bottom: 7px; }
.proof__row strong { font-weight: 600; }
.proof__row b { font-weight: 400; }
.proof__row .proof__value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-stone);
  white-space: nowrap;
}

/* --- Light toggle --------------------------------------------------------
   Two frames of the same corner stacked and cross-faded, with a warm pool of
   light on top. The pool is what actually reads as "the lamp is on" — a
   straight cross-fade between two photographs looks like a photo swap, not
   like a light coming up.
   ------------------------------------------------------------------------ */

.lamp-demo { display: flex; flex-direction: column; gap: 20px; }

.lamp-demo__stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-ink);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.lamp-demo__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lamp-demo__shot--on {
  z-index: 1;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__shot--on { opacity: 0; }

/* The pool sits over the lit frame, centred on the shade. */
.lamp-demo__pool {
  position: absolute;
  z-index: 2;
  left: 46%; top: 26%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .30) 0%,
    rgba(var(--flare-warm), .16) 26%,
    rgba(var(--flare-amber), .07) 48%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(18px);
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__pool { opacity: 0; }
/* The shade sits higher and further left in the finish shot. */
.lamp-demo__pool--high { left: 30%; top: 18%; width: 76%; }

/* The switch itself — a real button, so it is focusable and announces state. */
.lamp-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: inherit;
  text-align: left;
}
.lamp-switch__track {
  position: relative;
  width: 58px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-spectrum);
  flex-shrink: 0;
  transition: background var(--t-control);
}
.lamp-switch__knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 1px 3px rgba(28, 33, 24, .28);
  transition: transform var(--t-control);
}
.lamp-switch[aria-pressed="true"] .lamp-switch__knob { transform: translateX(26px); }
.lamp-switch[aria-pressed="false"] .lamp-switch__track { background: var(--c-line-strong); }

/* While the lamp demonstrates itself, draw the eye to the control that did
   it — otherwise the room just changes and nobody knows why. */
.lamp-demo.is-demoing .lamp-switch__track {
  box-shadow: 0 0 0 0 rgba(232, 163, 61, .55);
  animation: lp-switch-pulse 1.5s ease-out 2;
}
@keyframes lp-switch-pulse {
  from { box-shadow: 0 0 0 0 rgba(232, 163, 61, .5); }
  to   { box-shadow: 0 0 0 14px rgba(232, 163, 61, 0); }
}

.lamp-switch__label { display: flex; flex-direction: column; gap: 2px; }
.lamp-switch__state { font-size: 15.5px; font-weight: 600; }
.lamp-switch__hint { font-size: 13.5px; color: var(--c-ink-quiet); }

/* No cross-fade for reduced motion — it still switches, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .lamp-demo__shot--on, .lamp-demo__pool { transition: none; }
}

/* image-triptych — staggered on desktop, flat on mobile */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.triptych__item { display: flex; flex-direction: column; gap: 20px; }
.triptych__item:nth-child(2) { padding-top: 38px; }
.triptych__media { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-canopy-deep); }
.triptych__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.triptych__item:hover .triptych__media img { transform: scale(1.05); }
.triptych__caption { font-family: var(--f-display); font-size: 26px; line-height: 1.25; }
.triptych__caption em { font-style: italic; color: var(--c-spectrum); }

/* variant-selector-height — the three-position picker */
.height-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: 36px; }
.height-card {
  min-width: 0;
  border: 1px solid var(--c-line);
  background: var(--c-sand);
  border-radius: 12px;
  padding: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  transition: border-color var(--t-control), transform var(--t-control);
}
.height-card:hover { transform: translateY(-4px); }
.height-card[aria-pressed="true"] { border-color: var(--c-canopy); }
.height-card img { max-height: 260px; width: auto; object-fit: contain; }
.height-card__name { font-family: var(--f-display); font-style: italic; font-size: 21px; }
.height-card__for { font-size: 14px; color: var(--c-ink-quiet); }

/* v1's quantity-break tiers and founder countdown pill stood here. Brief B
   holds one price with no time limit, so both are gone. */

/* two-column split — media one side, copy the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.split__media--pad { padding: 36px; display: flex; align-items: center; justify-content: center; }

/* review-cards on dark */
.review-card {
  background: rgba(246, 242, 233, .055);
  border: 1px solid rgba(246, 242, 233, .12);
  border-radius: 12px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--t-control);
}
.review-card:hover { background: rgba(246, 242, 233, .09); }
.review-card__quote { font-family: var(--f-display); font-size: 22px; line-height: 1.42; letter-spacing: -.01em; }
.review-card__who { margin-top: auto; padding-top: 12px; font-size: 14px; color: rgba(246, 242, 233, .55); }

/* final-cta — "TRANSFORM YOUR HOME INTO A LIVING, GREEN SPACE".
   This is v1's waitlist panel with the email capture taken out and the
   deck's closing CTA put in: same canopy panel, same cursor-following glow,
   which was the part worth keeping. */
.final-cta {
  background: var(--c-canopy);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 74px);
  display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: center;
  position: relative; overflow: hidden;
  color: var(--c-cream);
}
.final-cta__glow {
  position: absolute; bottom: -300px; left: -140px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .34) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 7s ease-in-out infinite;
  pointer-events: none;
  /* --gx/--gy are written by ui.js so the light tracks the cursor across the
     panel. They offset from the resting position above, so with no JS the
     glow simply stays where the CSS put it. */
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  transition: transform var(--glow-move);
}
/* Lift the real content above the glow — but never restyle the glow itself,
   which must stay out of flow or it becomes a 640px grid item. */
.final-cta > :not(.final-cta__glow) { position: relative; }
.final-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Following the cursor is quick; drifting home is not. On pointerleave the
   panel gets data-glow-resting and the same transform takes five times as
   long on an ease-in-out — the light settles back rather than snapping. */
[data-glow] { --glow-move: 550ms cubic-bezier(.22, 1, .36, 1); }
[data-glow-follow][data-glow-resting] [data-glow] { --glow-move: 2800ms cubic-bezier(.4, 0, .2, 1); }

/* lifestyle-mosaic */
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; height: 520px; }
.mosaic > div { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.mosaic > div:hover img { transform: scale(1.05); }

/* Kenny teaser on the homepage */
.pendant-teaser { position: relative; overflow: hidden; border-radius: 18px; background: var(--c-sand); }
.pendant-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.pendant-teaser__copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.pendant-teaser__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }


/* --------------------------------------------------------------------------
   COLLECTION / ACCESSORIES
   -------------------------------------------------------------------------- */

.breadcrumb { font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 22px; }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--c-ink); }

.collection-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.collection-head__tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

.filter-chips { display: flex; gap: 9px; margin-bottom: 38px; flex-wrap: wrap; }
.chip {
  font-size: 14px; font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-ink-soft);
  transition: background var(--t-control), color var(--t-control), border-color var(--t-control);
}
.chip:hover { border-color: var(--c-canopy); }
.chip[aria-pressed="true"] { background: var(--c-canopy); color: var(--c-cream); border-color: var(--c-canopy); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.cta-panel {
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
}
.cta-panel h2, .cta-panel h3 { margin-bottom: 10px; }

/* Accessories — "what each one is for" rows */
.detail-rows { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.detail-row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 34px; align-items: center;
  background: var(--c-linen); padding: 34px;
}
.detail-row__img { border-radius: 12px; background: var(--c-sand); aspect-ratio: 1; object-fit: cover; width: 100%; }
.detail-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 8px; }
.detail-row__head h3 { font-family: var(--f-display); font-size: 28px; }
.detail-row p { color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 16px; }


/* --------------------------------------------------------------------------
   PRODUCT (Anthos + Grow Shade share this template)
   -------------------------------------------------------------------------- */

.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.pdp__gallery { position: sticky; top: 132px;   /* clears the sticky header */ }
.pdp__stage { border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3.4; margin-bottom: 14px; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__thumb {
  width: 88px; height: 88px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--c-line);
  background: var(--c-sand);
  padding: 0;
  transition: border-color var(--t-control);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-canopy); }

.pdp__info { display: flex; flex-direction: column; gap: 22px; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp__price-now { font-family: var(--f-display); font-size: 44px; line-height: 1; }
/* No compare-at price and no urgency note in v2 — one price, no time limit. */
.pdp__price-note { font-size: 14.5px; color: var(--c-ink-quiet); }

/* checkbox-upsell — "Add a Smart Timer to automate your light (£9.99)",
   directly under Add to Cart. Brief B's one PDP add-on. */
.checkbox-upsell {
  display: flex; align-items: center; gap: 13px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--t-control);
}
.checkbox-upsell:hover { border-color: var(--c-line-strong); }
.checkbox-upsell:has(input:checked) { border-color: var(--c-canopy); }
.checkbox-upsell input { width: 18px; height: 18px; accent-color: var(--c-canopy); flex-shrink: 0; }
.checkbox-upsell img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--c-sand); }
.checkbox-upsell__text { flex: 1; min-width: 0; }
.checkbox-upsell__price { font-variant-numeric: tabular-nums; font-weight: 600; }

.option-head {
  display: flex; justify-content: space-between;
  font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-stone); margin-bottom: 12px;
}
.option-head strong { color: var(--c-ink); font-weight: 400; }

.atc-row { display: flex; gap: 12px; align-items: stretch; margin-top: 6px; }
.atc-row .btn { flex: 1; padding-block: 17px; font-size: 16px; }

.pdp__assurances { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink-quiet); }

/* stat-band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat { border-top: 1px solid rgba(246, 242, 233, .2); padding-top: 20px; }
.stat__value { font-family: var(--f-display); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.stat__label { font-size: 15px; color: var(--c-cream-60); padding-top: 8px; line-height: 1.55; }
.stat-band--3 { grid-template-columns: repeat(3, 1fr); }
.stat-band--light .stat { border-top-color: var(--c-line); }
.stat-band--light .stat__value { color: var(--c-canopy); }
.stat-band--light .stat__label { color: var(--c-ink-soft); }

/* "Which lamp" — Anthos vs Kenny */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.versus__card { display: flex; flex-direction: column; gap: 14px; }
.versus__card img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sand); width: 100%; }
.versus__list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--c-ink-soft); }
.versus__list li { list-style: none; display: flex; gap: 10px; }
.versus__list li::before { content: '✓'; color: var(--c-moss); }
.versus__list { margin: 0; padding: 0; }


/* --------------------------------------------------------------------------
   BRIEF B SECTIONS
   The selling structure from LaunchBoom's copy deck. v1's bundle builder
   stood here; Brief B does not recommend a bundles page yet, so the builder,
   its add-on tiles and its discount summary panel are gone.

   These blocks carry the argument, so they are deliberately quieter than the
   hero work above them: hairlines, generous space, one figure per idea. The
   restraint is Brief A's; the content is Brief B's.
   -------------------------------------------------------------------------- */

/* promo-bar — "FREE SHIPPING ON EVERY ANTHOS", above the header. */
.promo-bar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--c-canopy);
  color: var(--c-cream);
  text-align: center;
  padding: 10px var(--gutter);
  font-family: var(--f-label); font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
/* The overlay header is absolutely positioned, so on a hero page it would
   otherwise sit at the top of the document and cover the bar. Making its
   mount point the containing block drops it to just below, with no magic
   number to keep in sync. Only on overlay pages: giving the sticky header
   a short relative parent would stop it sticking. */
body[data-header="overlay"] [data-shell="header"] { position: relative; }

/* trust-bar — the deck's four items. Replaces v1's five-item trust strip,
   two of which (delivery over £150, 90-day guarantee) are no longer true. */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.trust-bar__item {
  padding: 22px 20px;
  text-align: center;
  font-family: var(--f-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.trust-bar__item + .trust-bar__item { border-left: 1px solid var(--c-line); }
.trust-bar--on-dark { border-color: var(--c-cream-16); }
.trust-bar--on-dark .trust-bar__item { color: var(--c-cream-72); }
.trust-bar--on-dark .trust-bar__item + .trust-bar__item { border-left-color: var(--c-cream-16); }

/* thematic — the one-line promise, centred, with room around it. */
.thematic { max-width: var(--maxw-prose); margin-inline: auto; text-align: center; }
.thematic p { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: var(--c-ink-soft); margin-top: 22px; }

/* key-features — WHY ANTHOS, three of them. */
.key-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 54px); }
.key-feature { border-top: 1px solid var(--c-line); padding-top: 22px; }
.key-feature__title {
  font-family: var(--f-label); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-canopy); margin-bottom: 14px;
}
.key-feature__body { font-size: 16px; line-height: 1.68; color: var(--c-ink-soft); }

/* fb-block — feature/benefit. Media and copy swap sides down the page. */
.fb-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
}
.fb-block--flip .fb-block__media { order: 2; }
.fb-block__media { border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3; }
.fb-block__media img { width: 100%; height: 100%; object-fit: cover; }
.fb-block__body { display: flex; flex-direction: column; gap: 18px; }
.fb-block__body p { font-size: 16.5px; line-height: 1.7; color: var(--c-ink-soft); }

/* proof-ks — the Kickstarter result. The strongest credibility asset in the
   deck, and absent from v1 entirely. */
.proof-ks {
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(34px, 4.5vw, 66px);
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.proof-ks__figure { font-family: var(--f-display); font-size: clamp(64px, 8vw, 116px); line-height: .92; letter-spacing: -.03em; }
.proof-ks__figure-label {
  font-family: var(--f-label); font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-spectrum); margin-top: 14px;
}
.proof-ks__body { display: flex; flex-direction: column; gap: 20px; }
.proof-ks__body p { font-size: 17px; line-height: 1.65; color: var(--c-cream-72); }
.proof-ks__stats { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.proof-ks__stat { display: flex; flex-direction: column; gap: 5px; }
.proof-ks__stat b { font-family: var(--f-display); font-size: 28px; font-weight: 400; }
.proof-ks__stat span { font-size: 14px; color: var(--c-cream-60); }

/* upsell-panel — "GROW MORE, IN EVERY ROOM". Same shape as the homepage
   pendant teaser, so the two read as one family. */
.upsell-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 18px; overflow: hidden;
  background: var(--c-sand);
  align-items: stretch;
}
.upsell-panel__copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.upsell-panel__copy p { font-size: 16.5px; line-height: 1.7; color: var(--c-ink-soft); }
.upsell-panel__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* reviews-empty — the honest pre-fulfilment state. Brief B holds reviews
   back until they are collected, and this is what stands in the slot. */
.reviews-empty {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  max-width: 620px; margin-inline: auto;
}
.reviews-empty__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.reviews-empty__body { font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); margin-top: 14px; }
.band--ink .reviews-empty { border-color: var(--c-cream-16); }
.band--ink .reviews-empty__body { color: var(--c-cream-72); }


/* --------------------------------------------------------------------------
   QUIZ
   -------------------------------------------------------------------------- */

.quiz {
  min-height: 74vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--gutter);
  background: var(--c-canopy);
  color: var(--c-cream);
}
.quiz__inner { max-width: 720px; width: 100%; }
.quiz__meta { display: flex; justify-content: space-between; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-spectrum); margin-bottom: 12px; }
.quiz__question { margin: 0 0 36px; }
.quiz__options { display: flex; flex-direction: column; gap: 12px; }
.quiz__option {
  border: 1px solid rgba(246, 242, 233, .28);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 18px;
  background: none;
  color: inherit;
  text-align: left;
  transition: background var(--t-control), border-color var(--t-control), transform var(--t-control);
}
.quiz__option:hover { background: rgba(246, 242, 233, .09); border-color: var(--c-spectrum); transform: translateX(5px); }
.quiz__result { text-align: center; animation: lp-in .5s cubic-bezier(.16, 1, .3, 1); }
.quiz__result-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz__restart { background: none; border: 0; color: rgba(246, 242, 233, .55); font-size: 15px; text-decoration: underline; padding: 16px 12px; }


/* --------------------------------------------------------------------------
   CART / CHECKOUT
   -------------------------------------------------------------------------- */

.cart-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 52px; align-items: start; }
.checkout-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }

.order-summary {
  position: sticky; top: 132px;   /* clears the sticky header */
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.order-summary .summary-row { color: var(--c-ink-soft); font-size: 15px; }
.order-summary .summary-row--total span:last-child { font-family: var(--f-display); font-size: 36px; }
.order-summary hr { border: 0; height: 1px; background: #DDD4C4; margin: 8px 0; width: 100%; }
.order-summary__fine { font-size: 13px; color: var(--c-ink-quiet); text-align: center; line-height: 1.6; margin-top: 4px; }

.checkout-steps { display: flex; gap: 14px; align-items: center; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 38px; flex-wrap: wrap; }
.checkout-steps .is-done { color: var(--c-canopy); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid .input--wide { grid-column: span 2; }

.ship-option {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  background: var(--c-paper);
  width: 100%; text-align: left; gap: var(--sp-4);
  transition: border-color var(--t-control);
}
.ship-option[aria-pressed="true"] { border-color: var(--c-canopy); }
/* One delivery method, so it states rather than selects. */
.ship-option--static { border-color: var(--c-canopy); cursor: default; }
.ship-option--static .ship-option__price { font-weight: 600; color: var(--c-canopy); }
.ship-option__name { display: block; font-weight: 600; font-size: 15.5px; }
.ship-option__when { display: block; font-size: 14px; color: var(--c-stone); padding-top: 3px; }
.ship-option__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 15px; }

.mini-line { display: flex; gap: 14px; align-items: center; }
.mini-line img { width: 56px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--c-linen); }
.mini-line__body { flex: 1; min-width: 0; }
.mini-line__name { font-weight: 600; font-size: 14.5px; }
.mini-line__meta { font-size: 13px; color: var(--c-stone); }
.mini-line__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }


/* --------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */

.spec-table { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.spec-table__scroll { overflow-x: auto; }
.spec-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.spec-table thead th {
  background: var(--c-canopy); color: var(--c-cream);
  padding: 24px 20px;
  text-align: left; font-size: 15.5px; font-weight: 600;
  color: var(--c-cream-72);
}
.spec-table thead th:first-child {
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-cream-60); padding-inline: 26px;
  width: 28%;
}
.spec-table thead th.is-hero {
  font-family: var(--f-display); font-size: 22px; font-weight: 400;
  color: var(--c-cream);
  background-color: var(--c-canopy);
  background-image: linear-gradient(rgba(232, 163, 61, .16), rgba(232, 163, 61, .16));
}
.spec-table tbody tr { border-top: 1px solid var(--c-line); background: var(--c-linen); transition: background var(--t-control); }
.spec-table tbody tr:hover { background: #F3EFE6; }
.spec-table td { padding: 20px; font-size: 15.5px; color: var(--c-ink-quiet); }
.spec-table td:first-child { padding-inline: 26px; font-weight: 600; color: var(--c-ink); }
.spec-table td.is-hero { background: rgba(232, 163, 61, .09); font-weight: 600; color: var(--c-canopy); }

/* --- Matrix variant ------------------------------------------------------
   The light-type comparison. Centred columns, ticks and crosses drawn in
   CSS, and a row header column that carries the question.
   ------------------------------------------------------------------------ */
.spec-table--matrix table { min-width: 780px; }
.spec-table--matrix thead th { text-align: center; vertical-align: bottom; }
.spec-table--matrix thead th:first-child { width: 30%; }
.spec-table--matrix thead th.is-hero {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--c-cream);
  background-color: var(--c-canopy);
  background-image: linear-gradient(rgba(232, 163, 61, .2), rgba(232, 163, 61, .2));
}
.spec-table--matrix tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--c-ink);
  padding: 18px 26px;
}
.spec-table--matrix .spec-table__note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--c-stone);
  padding-top: 3px;
}
.spec-table--matrix .spec-table__cell {
  text-align: center;
  padding: 18px 16px;
  font-size: 15px;
  line-height: 1.45;
}

/* Tick and cross, drawn rather than set — a glyph would inherit the body
   font's weight and sit off the optical centre. */
.mark { display: inline-block; width: 19px; height: 19px; position: relative; }
.mark::before, .mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 2px;
}
.mark--yes::before { width: 3px; height: 8px;  background: var(--c-moss); transform: translate(-155%, -10%) rotate(-45deg); transform-origin: bottom; }
.mark--yes::after  { width: 3px; height: 15px; background: var(--c-moss); transform: translate(10%, -58%) rotate(35deg); }
.mark--no::before  { width: 3px; height: 17px; background: var(--c-clay); transform: translate(-50%, -50%) rotate(45deg); }
.mark--no::after   { width: 3px; height: 17px; background: var(--c-clay); transform: translate(-50%, -50%) rotate(-45deg); }

.tone { font-weight: 700; }
.tone--good { color: var(--c-canopy); }
.tone--mid  { color: var(--c-clay-deep); }
.tone--bad  { color: var(--c-clay); }


/* --------------------------------------------------------------------------
   REVIEWS WALL
   -------------------------------------------------------------------------- */

.rating-bars { display: flex; flex-direction: column; gap: 7px; }
.rating-bars__row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--c-ink-quiet); }
.rating-bars__row > span:first-child { width: 26px; }
.rating-bars__row > span:last-child { width: 34px; }
.rating-bars__row .meter { flex: 1; }

.review-wall { columns: 3; column-gap: 22px; }
.review-tile {
  break-inside: avoid;
  background: var(--c-sand);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 22px;
  display: inline-block;
  width: 100%;
}
.review-tile__title { font-family: var(--f-display); font-size: 23px; line-height: 1.3; letter-spacing: -.01em; margin: 12px 0; }
.review-tile__body { font-size: 15.5px; line-height: 1.68; color: var(--c-ink-soft); margin-bottom: 16px; }
.review-tile__who { font-size: 13.5px; color: var(--c-stone); }


/* --------------------------------------------------------------------------
   GUIDE + ARTICLE
   -------------------------------------------------------------------------- */

.article-card { display: flex; flex-direction: column; gap: 14px; }
.article-card__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); aspect-ratio: 16 / 11; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__meta { display: flex; gap: 12px; font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-stone); }
.article-card__meta span:first-child { color: var(--c-clay); }
.article-card__title { font-family: var(--f-display); font-size: 27px; line-height: 1.22; letter-spacing: -.015em; color: var(--c-ink); }

.prose { font-size: 18px; line-height: 1.78; color: var(--c-ink-mid); }
.prose p { margin: 0 0 26px; }
.prose h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-heading); letter-spacing: -.02em; margin: 44px 0 16px; }
.prose ol, .prose ul { margin: 0 0 26px; padding-left: 22px; }
.prose li { margin-bottom: 11px; }
.prose blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  background: var(--c-sand);
  border-radius: 12px;
  font-family: var(--f-display);
  font-size: 24px; line-height: 1.42; font-style: italic;
  color: var(--c-canopy);
}
.article-lede { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.65; color: var(--c-ink-soft); }

.inline-cta {
  margin-top: 52px;
  padding: 34px;
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: var(--r-lg);
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
.inline-cta__title { font-family: var(--f-display); font-size: 29px; letter-spacing: -.02em; margin-bottom: 6px; }
.inline-cta__sub { font-size: 15.5px; color: rgba(246, 242, 233, .66); }


/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
}
/* the image now lives in .parallax-band__media; the scrim does the darkening */
.about-hero__inner { position: relative; width: 100%; padding-bottom: 74px; }

.stat-table { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.stat-table__row { background: var(--c-linen); padding: 26px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.stat-table__row strong { font-size: 16px; font-weight: 600; }
.stat-table__row span { font-family: var(--f-display); font-size: 30px; }


/* --------------------------------------------------------------------------
   SEARCH + ACCOUNT
   -------------------------------------------------------------------------- */

.search-input {
  font-family: var(--f-display);
  width: 100%;
  padding: 22px 28px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 14px;
  font-size: clamp(22px, 3vw, 30px);
  outline: none;
  margin-bottom: 18px;
}
.search-input:focus { border-color: var(--c-spectrum); }
.suggestions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.suggestion {
  font-size: 13.5px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink-soft);
  transition: background var(--t-control);
}
.suggestion:hover { background: var(--c-sand); }

.order-card { border: 1px solid var(--c-line); border-radius: 14px; padding: 30px; background: var(--c-paper); }
.order-card__top { display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: 18px; }
.order-card__id { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-stone); margin-bottom: 6px; }
.order-card__status { font-family: var(--f-display); font-size: 26px; letter-spacing: -.015em; }
.order-card__items { font-size: 15px; color: var(--c-ink-soft); padding-top: 6px; }
.order-card__total { font-family: var(--f-display); font-size: 30px; }
.order-card__stage { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--c-stone); margin-top: 9px; }


/* --------------------------------------------------------------------------
   LANDING PAGE (paid traffic)
   -------------------------------------------------------------------------- */

.lp-hero {
  background: var(--c-ink); color: var(--c-cream);
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 9vw, 110px);
  text-align: center;
}
.lp-hero__media {
  position: absolute; inset: -14% 0; height: 128%; width: 100%;
  opacity: .32; will-change: transform;
}
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero__inner { position: relative; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.lp-hero__flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-spectrum);
  border: 1px solid rgba(232, 163, 61, .4);
  padding: 9px 18px; border-radius: var(--r-pill);
  margin-bottom: 26px;
}
.lp-hero h1 em { font-style: italic; color: var(--c-spectrum); }
.lp-proof { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: 14.5px; color: var(--c-cream-60); margin-top: 30px; }

.lp-close {
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
  position: relative; overflow: hidden;
}
.lp-close__glow {
  position: absolute; top: -200px; left: 50%;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .3) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 6s ease-in-out infinite;
  pointer-events: none;
  transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px));
  transition: transform var(--glow-move);
}
.lp-close > :not(.lp-close__glow) { position: relative; }


/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 66vh;
  display: flex; align-items: center; justify-content: center;
  padding: 96px var(--gutter);
  text-align: center;
}
.notfound__code { font-family: var(--f-display); font-weight: 300; font-size: clamp(80px, 12vw, 120px); line-height: 1; letter-spacing: -.04em; color: var(--c-canopy); margin-bottom: 12px; }
.notfound__title { font-family: var(--f-display); font-size: 32px; font-style: italic; color: var(--c-stone); margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
  .key-features { grid-template-columns: 1fr; gap: 30px; }
  .proof-ks { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; gap: 40px; }
  .order-summary { position: static; }
  .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .review-wall { columns: 2; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic > div:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .mosaic > div { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
  .split, .split--wide-right, .split--wide-left,
  .collection-head, .final-cta, .versus, .pendant-teaser__grid,
  .fb-block, .upsell-panel { grid-template-columns: 1fr; }
  .final-cta { gap: 32px; }
  /* The flip only exists to alternate sides; stacked, media leads again. */
  .fb-block--flip .fb-block__media { order: 0; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .trust-bar__item:nth-child(2n) { border-left: 1px solid var(--c-line); }
  .trust-bar__item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .trust-bar__item:nth-child(2n+1) { border-left: 0; }
  .collection-head { gap: 24px; }
  .collection-head__tools { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .triptych { grid-template-columns: 1fr; }
  .triptych__item:nth-child(2) { padding-top: 0; }
  .hero { padding-top: 140px; min-height: 620px; }
}

@media (max-width: 700px) {
  .height-picker { grid-template-columns: 1fr; }
  .product-grid, .product-grid--4 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .product-card__name { font-size: 19px; }
  .stat-band { grid-template-columns: 1fr; gap: 20px; }
  .review-wall { columns: 1; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .input--wide { grid-column: span 1; }
  .mosaic { grid-template-columns: 1fr; }
  .mosaic > div:first-child { grid-column: span 1; }
  .pdp__thumb { width: 64px; height: 64px; }
  .proof-ks__stats { gap: 20px; }
  .detail-row { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .detail-row__img { max-width: 160px; }
  .quiz { padding-inline: var(--gutter); }
  .quiz__option { padding: 18px 20px; font-size: 16px; }
}


/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal h2 { font-size: 26px; margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 26px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
/* Placeholders and caveats read as editorial notes, not as body copy. */
.legal em { color: var(--c-clay); font-style: italic; }

.legal-note {
  background: var(--c-sand);
  border-left: 3px solid var(--c-moss);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.legal-note strong { display: block; color: var(--c-ink); margin-bottom: 4px; }
.legal-note--review { border-left-color: var(--c-clay); }

.legal__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
}