/* ============================================================================
   SLP BOLD — the Sales Landing Page bold tier
   ============================================================================

   WHAT THIS IS
   A toggle. `SalesLandingLayout bold={true}` puts `.sales-landing--bold` on the
   body and loads this sheet. Everything below is scoped inside that class, so a
   page without the toggle never sees a byte of it, and nothing on the website
   proper can pick it up even by accident.

   WHY IT EXISTS
   CSS-ARCHITECTURE.md §13 sets the temperament of the BRAND: "calm confidence,
   not persuasion", "minimal effects", "most backgrounds white/light neutral".
   That is right for cleanmybed.com, which people browse. It is wrong for a page
   that exists only because someone clicked an ad, arrives cold, and has one
   decision to make. This tier is the founder-approved licence to be louder on
   those pages ONLY.

   FOUNDER-APPROVED EXEMPTION — 2026-07-17, Gary Harrod.
   Scope: pages using SalesLandingLayout with bold={true}. Nothing else, ever.
   Recorded in CSS-ARCHITECTURE.md and COMPONENTS.md. Extending the scope is a
   brand decision: founder, dated, recorded. Not a build fix.

   WHAT IT MAY AND MAY NOT DO
   It turns dials that already exist: type scale, weight, tracking, rhythm,
   button shape, and the existing violet and gold. It introduces NO new hue.
   The hard brand rules still bind inside it, and they are not negotiable here:
     - No purple→gold gradient, ever (§2.4). Violet→transparent is not that.
     - No large gold background panels (§5.2). Gold stays a badge/accent.
     - Every value is a token. A raw hex in a consuming page is still a bug.

   HOW TO USE IT
   Consume the tokens. If you need something this library does not have, ADD IT
   HERE as a named token or class so the next bold page reuses it. Do not
   hand-roll it onto a page. That is the whole point of the file.

   Source of the design intent: the founder's v9 draft, allergy_relief_v9.html.
   Deliberately NOT taken from it: the Jost typeface (the brand is Inter, and a
   second font is drift; Inter at 800 with tight tracking carries the same
   punch), and its raw hex values.
   ============================================================================ */

.sales-landing--bold {
  /* ---- Type: fluid, heavier, tighter -------------------------------------
     The single biggest lever. The standard hero headline is a flat 2.5rem.

     WHY 3.5rem AND NOT THE DRAFT'S 4.75rem (76px):
     the v9 draft's hero is 860px of text with NO image, so 76px lands in two
     lines. SalesHero is a two-column grid with a photo, so the headline only gets
     ~600px and 76px wraps to four lines with the em dash left dangling. 76px needs
     the draft's text-only hero. That is a layout decision for the founder, not
     something to fake by shrinking the type until it fits. Raised 2026-07-17.
     If the hero ever goes full-width text-only, raise this to 4.75rem. */
  --slp-h1: clamp(2.5rem, 5vw, 3.5rem);
  --slp-h2: clamp(1.75rem, 4vw, 2.5rem);
  --slp-h3: clamp(1.25rem, 2vw, 1.375rem);
  --slp-stat: clamp(2.125rem, 4.6vw, 3.125rem);
  --slp-lead: clamp(1.0625rem, 1.6vw, 1.25rem);

  --slp-weight-hero: 800;
  --slp-weight-strong: 700;

  /* ---- Heading colour ----------------------------------------------------
     THE dark grey, and it is a named decision, not a value to re-type.
     Measured on white, 2026-07-17:
       --text-primary  #1a1a1a  17.40:1  the soft black. Charlie does not want black.
       --color-gray-700 #404040 10.37:1  dark grey. Reads dark without reading black.
       --text-heading  #6b7280   4.83:1  the site default; washed out at 800 weight.
     So a bold page sits in the middle: dark enough to hit, not black.
     Standard pages are untouched and keep the site's #6b7280. */
  --slp-heading: var(--color-gray-700);

  --slp-tracking-hero: -0.025em;
  --slp-tracking-title: -0.01em;
  --slp-tracking-stat: -0.02em;
  --slp-tracking-eyebrow: 0.14em;

  --slp-leading-hero: 1.02;
  --slp-leading-title: 1.12;

  /* ---- Rhythm ------------------------------------------------------------
     LARGER than the standard page, not smaller. §2.5 treats whitespace as the
     premium signal, and bold does not mean cramped. */
  --slp-section-y: 4.5rem;
  --slp-hero-y-top: 5.25rem;
  --slp-hero-y-bottom: 3.75rem;

  /* ---- Surfaces ----------------------------------------------------------
     A violet glow, violet-tinted shadow, violet panel, dark panel. No new hue:
     every one of these is brand violet or an existing neutral token.

     --slp-tint is the alternating band. The standard page tints with --surface-1,
     a NEUTRAL GREY, which is why the page read flat. The v9 draft tints with a
     violet #f5eefb. Brand violet at 8% over white computes to #f4eefa, the same
     colour to the eye, so the existing alpha token gives the draft's rhythm
     without inventing a hex. */
  --slp-tint: var(--color-brand-primary-alpha-8);
  --slp-hero-glow: radial-gradient(
    ellipse 900px 500px at 85% -10%,
    var(--color-brand-primary-alpha-8),
    transparent
  );
  --slp-shadow-violet: 0 6px 24px var(--color-brand-primary-alpha-10);
  --slp-shadow-violet-lg: 0 10px 34px var(--color-brand-primary-alpha-15);

  /* On-violet chips. The only rgba() in this file, and it is white, not a hue.
     Token definitions are the legitimate home for rgba; a consuming page must
     use the token and never re-type the value. */
  --slp-on-violet-bg: rgba(255, 255, 255, 0.14);
  --slp-on-violet-border: rgba(255, 255, 255, 0.35);

  /* ---- Buttons -----------------------------------------------------------
     Pill, heavier, bigger hit area, a 1px lift on hover, gold focus ring. */
  --slp-btn-radius: var(--radius-full);
  --slp-btn-weight: 700;
  --slp-btn-pad-y: var(--space-4);
  --slp-btn-pad-x: var(--space-8);
  --slp-btn-lift: -1px;
}

/* ============================================================================
   HEADINGS — one colour, not three
   ----------------------------------------------------------------------------
   "Why are some headings black and some grey?" Because there were THREE sources
   on one page: site.css gives every h1..h6 --text-heading (#6b7280 grey), the
   sales sheet overrides four of its own titles to --text-primary (#1a1a1a), and
   the page's own sections used the grey again.

   On a BOLD page they are all --slp-heading, a named DARK GREY (#404040,
   10.37:1 on white). Not the site's #6b7280, which reads washed out at 800
   weight, and not the #1a1a1a soft black, which Charlie does not want. See the
   token block above for the measurements behind the choice.

   Standard pages are untouched and keep the site's grey.
   Panels override this below, because on violet or dark a heading must be white.
   ========================================================================= */

.sales-landing--bold h1,
.sales-landing--bold h2,
.sales-landing--bold h3 {
  color: var(--slp-heading);
}

/* ============================================================================
   LIFTED PANELS (desktop)
   ----------------------------------------------------------------------------
   The heavy bands ran edge to edge and read as stripes painted across the page.
   Inset on desktop with a radius and a violet shadow, they read as panels
   sitting ON the page, which is what gives the scroll its depth. Full-bleed
   below 1024px: an inset panel on a phone is just a narrower page.
   ========================================================================= */

@media (min-width: 1024px) {
  /* The PAGE is the surface the cards sit on. Without this, lifting only the coloured
     bands makes it worse, not better: measured on the founder's 1800px screen, the
     coloured panels were 1280 and rounded while the white sections ran the full 1800
     with a 1120 column adrift in the middle. Three different widths, and the white
     bands read as the page itself rather than as part of the stack.
     A soft neutral page + white cards makes every band the same object. */
  .sales-landing--bold {
    background-color: var(--surface-1);
  }

  .sales-landing--bold .slp-panel,
  .sales-landing--bold .how-it-works--violet {
    max-width: var(--container-wide);
    margin-inline: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--slp-shadow-violet-lg);
  }

  /* The tinted bands lift too, but gently: no shadow, just the containment, so
     they read as a lighter beat between the heavy ones. */
  .sales-landing--bold .sales-section--tinted,
  .sales-landing--bold .medical-endorsement,
  .sales-landing--bold .testimonials,
  .sales-landing--bold .lead-form {
    max-width: var(--container-wide);
    margin-inline: auto;
    border-radius: var(--radius-2xl);
  }

  /* The WHITE bands, which were the actual complaint. Same width, same radius, so the
     stack has one rhythm instead of alternating between card and full-bleed. */
  .sales-landing--bold .sales-hero,
  .sales-landing--bold .sales-section:not(.sales-section--tinted),
  .sales-landing--bold .how-it-works:not(.how-it-works--violet) {
    background-color: var(--surface-0);
    max-width: var(--container-wide);
    margin-inline: auto;
    border-radius: var(--radius-2xl);
  }

  /* The hero keeps its glow, over white, inside the card. */
  .sales-landing--bold .sales-hero {
    background: var(--slp-hero-glow), var(--surface-0);
  }

  /* The trust bar is a free-floating chip row, so it needs no card under it. */
  .sales-landing--bold .trust-bar {
    background-color: transparent;
  }

  /* A hairline of the page between stacked cards, so two whites in a row still read
     as two cards rather than one long one. */
  .sales-landing--bold .sales-main > * {
    margin-block: var(--space-2);
  }
}

/* ============================================================================
   BUTTONS
   ========================================================================= */

.sales-landing--bold .btn {
  border-radius: var(--slp-btn-radius);
  font-weight: var(--slp-btn-weight);
  padding: var(--slp-btn-pad-y) var(--slp-btn-pad-x);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.sales-landing--bold .btn:hover {
  transform: translateY(var(--slp-btn-lift));
}

/* Gold focus ring. Gold as a "highlight line" is exactly what §5.2 permits. */
.sales-landing--bold .btn:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sales-landing--bold .btn,
  .sales-landing--bold .btn:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================================
   RHYTHM
   ========================================================================= */

.sales-landing--bold .sales-section {
  padding-top: var(--slp-section-y);
  padding-bottom: var(--slp-section-y);
}

/* ============================================================================
   HERO
   ========================================================================= */

.sales-landing--bold .sales-hero {
  padding-top: var(--slp-hero-y-top);
  padding-bottom: var(--slp-hero-y-bottom);
  /* Violet glow over the base surface. Violet→transparent, NOT a cross-hue
     gradient, so §2.4 is intact. */
  background: var(--slp-hero-glow), var(--surface-0);
}

.sales-landing--bold .sales-hero__headline {
  font-size: var(--slp-h1);
  font-weight: var(--slp-weight-hero);
  letter-spacing: var(--slp-tracking-hero);
  line-height: var(--slp-leading-hero);
}

.sales-landing--bold .sales-hero__subheadline {
  font-size: var(--slp-lead);
}

/* ============================================================================
   EYEBROWS + SECTION TITLES
   ========================================================================= */

.sales-landing--bold .sales-eyebrow,
.sales-landing--bold .sales-hero__eyebrow {
  letter-spacing: var(--slp-tracking-eyebrow);
  font-weight: var(--slp-weight-strong);
}

.sales-landing--bold .how-it-works__title,
.sales-landing--bold .testimonials__title,
.sales-landing--bold .lead-form__title,
.sales-landing--bold .price-list__title,
.sales-landing--bold .cta-band__title {
  color: var(--slp-heading);
  font-size: var(--slp-h2);
  font-weight: var(--slp-weight-strong);
  letter-spacing: var(--slp-tracking-title);
  line-height: var(--slp-leading-title);
}

/* ============================================================================
   THE ALTERNATING RHYTHM
   ----------------------------------------------------------------------------
   The single reason a bold page reads flat is that every band is white or grey.
   The v9 draft alternates: white, tint, dark, white, violet, white, tint, white,
   dark, tint. Two heavy moments (a dark reframe, a violet mechanism) carry the
   page; the tint bands separate the light ones so they do not merge.

   Here every tinted band on a bold page becomes VIOLET-tinted rather than the
   standard neutral grey. Components that tint themselves are included, so a page
   does not have to know which ones do.
   ========================================================================= */

.sales-landing--bold .sales-section--tinted,
.sales-landing--bold .medical-endorsement,
.sales-landing--bold .testimonials,
.sales-landing--bold .lead-form {
  background-color: var(--slp-tint);
}

/* ============================================================================
   THE LOGO
   ----------------------------------------------------------------------------
   40px is a website nav logo. On a bold page the header is the ONLY chrome, so
   at 40px it floats in a lot of white and reads as lost rather than minimal.
   ========================================================================= */

/* The sticky bottom CTA already covers mobile, and it wins on thumb reach: it sits
   where the thumb rests, the header does not. Two pinned CTAs on a phone is one too
   many and it eats a header's worth of a small viewport. Desktop has no sticky bar,
   so there the header CTA is the only always-there route. */
@media (max-width: 767px) {
  .sales-landing--bold .sales-header__cta {
    display: none;
  }
}

@media (min-width: 768px) {
  .sales-landing--bold .sales-header {
    padding: var(--space-6) var(--space-6);
  }

  .sales-landing--bold .sales-header__logo img {
    height: 72px;
  }
}

/* The footer icon is deliberately faded on a standard page. On a bold page it
   just looks broken, like an asset that failed to load. */
.sales-landing--bold .sales-footer__icon {
  opacity: 1;
}

/* ============================================================================
   THE TRUST BAR — chips, not a run-on line
   ----------------------------------------------------------------------------
   Ticks and text on a grey strip read as a sentence someone ran out of room
   for. As chips each claim is a separate object and can be counted at a glance.
   ========================================================================= */

.sales-landing--bold .trust-bar {
  background-color: transparent;
  border: none;
  padding-block: var(--space-6);
}

.sales-landing--bold .trust-bar__container {
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sales-landing--bold .trust-bar__item {
  background: var(--surface-0);
  border: 1px solid var(--color-brand-primary-alpha-15);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--slp-shadow-violet);
}

/* ============================================================================
   REUSABLE PARTS THE STANDARD SHEET DOES NOT HAVE
   Add to this section rather than hand-rolling onto a page.
   ========================================================================= */

/* ---- .slp-callout — a shout-out block ---------------------------------
   For a single claim that has to stop the eye: a third-party approval, a
   guarantee, a refusal. Violet-tinted field with a gold edge, because gold as a
   "highlight line" is what §5.2 permits and a gold PANEL is what it forbids. */
.slp-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--slp-tint);
  border-left: var(--space-1) solid var(--color-accent-gold);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6) var(--space-8);
  max-width: 860px;
  margin-inline: auto;
}

.slp-callout__text {
  font-size: var(--slp-lead);
  color: var(--text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ---- .slp-figure / .slp-lightbox — an image you can open full-size -----
   A thumbnail that opens the full asset in an overlay. Built for the allergy
   infographic and the debris photo, but reusable for any asset that is worth
   showing and too detailed to read inline.

   Uses the native <dialog> element: it gets focus trapping, Esc-to-close and
   inertness of the page behind it for free, which a hand-rolled div does not.
   NOT a JS alert/confirm, which would freeze the page. */
.slp-figure {
  margin: 0;
}

.slp-figure__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-brand-primary-alpha-15);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  cursor: zoom-in;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.slp-figure__btn:hover {
  transform: translateY(var(--slp-btn-lift));
  box-shadow: var(--slp-shadow-violet-lg);
}

.slp-figure__btn:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
}

.slp-figure__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.slp-figure__cap {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
}

.slp-figure__cap::after {
  content: " \2197";
  color: var(--color-accent-gold);
}

/* margin:auto is LOAD-BEARING and must not be removed.
   A modal <dialog> centres itself via the UA stylesheet's `dialog:modal { margin: auto }`
   inside `inset: 0`. site.css line 241 resets `*, *::before, *::after { margin: 0 }`,
   which beats the UA rule and pins the dialog to the top-left corner. Measured on the
   founder's 1920px browser: left 0, right 900, i.e. hard against the left edge.
   With margin restored: 510px each side, centred. */
.slp-lightbox {
  margin: auto;
  border: none;
  padding: 0;
  background: transparent;
  /* WIDTH, not just max-width. A dialog is sized by its content, and the image inside
     is loaded on demand, so with max-width alone the dialog collapses to the width of
     the close button (measured: 52px) until the image arrives. An explicit width makes
     it the right size before the image exists. */
  width: min(92vw, 900px);
  max-width: min(92vw, 900px);
  max-height: 92vh;
  overflow: auto;
  border-radius: var(--radius-lg);
}

.slp-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.slp-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Sticky, not absolute: the dialog scrolls when the asset is taller than the
   viewport, and an absolute close would scroll off the top. margin-left:auto
   right-aligns it in the normal flow, which the previous left:100% + transform
   was faking. */
.slp-lightbox__close {
  position: sticky;
  top: var(--space-3);
  display: block;
  margin-left: auto;
  margin-right: var(--space-3);
  width: var(--space-10);
  height: var(--space-10);
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-0);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  z-index: 1;
}

.slp-lightbox__close:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .slp-figure__btn,
  .slp-figure__btn:hover {
    transition: none;
    transform: none;
  }
}

/* ---- .slp-openblock — offer an asset without showing it ----------------
   A titled block with one line and a button. For content worth OFFERING but not
   worth showing inline: a dense infographic dropped under a video is a wall of
   unreadable text that stops the scroll and gains nothing. This asks first.
   Pair with ZoomFigure variant="block". */
.slp-openblock {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-8);
  background: var(--slp-tint);
  border: 1px solid var(--color-brand-primary-alpha-15);
  border-radius: var(--radius-lg);
}

.slp-openblock__title {
  font-size: var(--slp-h3);
  font-weight: var(--slp-weight-strong);
  margin: 0 0 var(--space-2);
}

.slp-openblock__desc {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.slp-openblock__btn {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .slp-openblock {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* The seal and the text were fighting over ~150px each and both lost. Stack them:
     seal first, then the claim, centred. */
  .slp-callout {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-6);
    border-left: none;
    border-top: var(--space-1) solid var(--color-accent-gold);
    border-radius: var(--radius-lg);
  }
}

/* ---- .slp-formbox — the quote form in a dialog -------------------------
   ONE form, opened from anywhere. The page is ~10 screens: a CTA that jumps to a
   form at the bottom fires the reader past the whole argument, and someone sold
   at "Do the maths" loses their place. A dialog lets them act where they are and
   close it and keep reading if they are not sold.

   Deliberately ONE instance, moved into the dialog, NOT a second copy.
   LeadCaptureForm carries 12 hardcoded ids (lead-capture-form, suburb-input,
   form-success, the five utm fields...). A second instance would collide and the
   script would wire only the first, so the other form would look fine and
   silently never submit. On a paid page that is invisible lead loss.

   Only ever opens on a deliberate click. Never a timer, never exit intent: that
   is what makes a modal a popup ad instead of a CTA. */
.slp-formbox {
  margin: auto;
  border: none;
  padding: 0;
  background: transparent;
  width: min(94vw, 640px);
  max-width: min(94vw, 640px);
  max-height: 94vh;
  overflow: auto;
  border-radius: var(--radius-2xl);
}

.slp-formbox::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* The form drops its own band inside the dialog: the dialog IS the card. */
.slp-formbox .lead-form {
  background: none;
  padding: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
}

.slp-formbox .lead-form__container {
  background: var(--surface-0);
  border-radius: var(--radius-2xl);
  border: none;
  box-shadow: none;
  padding: var(--space-8);
}

.slp-formbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  width: var(--space-8);
  height: var(--space-8);
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.slp-formbox__close:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
}

/* On a DARK panel the block has to invert. --slp-tint is an ALPHA: over white it is
   #f4eefa, but over --surface-dark it composites to #262942, and the dark-grey title
   on that measures 1.37:1 and the body 2.47:1. Both invisible, which is exactly what
   "barely visible and looks faded out" was. Measured 2026-07-17.
   This is the same alpha-over-dark trap as .slp-note and .slp-em. If you put another
   part inside a dark panel, check it here first. */
.slp-panel--dark .slp-openblock {
  background: var(--slp-on-violet-bg);
  border-color: var(--slp-on-violet-border);
}

.slp-panel--dark .slp-openblock__title {
  color: var(--text-inverse);
}

.slp-panel--dark .slp-openblock__desc {
  color: var(--text-inverse-muted);
}

/* ---- .slp-faq — the questions, at the end ------------------------------
   Native <details>/<summary>: open/close, keyboard, and find-in-page all work
   without JS, and a closed <details> is still searchable by the browser. A
   hand-rolled accordion gives up all three. */
.slp-faq {
  max-width: 760px;
  margin-inline: auto;
}

.slp-faq__item {
  border-bottom: 1px solid var(--border-subtle);
}

.slp-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--slp-lead);
  font-weight: var(--slp-weight-strong);
  color: var(--slp-heading);
  cursor: pointer;
  list-style: none;
}

.slp-faq__q::-webkit-details-marker {
  display: none;
}

.slp-faq__q::after {
  content: "+";
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-brand-primary);
  line-height: 1;
  flex-shrink: 0;
}

.slp-faq__item[open] .slp-faq__q::after {
  content: "\2212";
}

.slp-faq__q:hover {
  color: var(--color-brand-primary);
}

.slp-faq__q:focus-visible {
  outline: 3px solid var(--color-accent-gold);
  outline-offset: 2px;
}

.slp-faq__a {
  padding: 0 var(--space-8) var(--space-5) 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}

.slp-faq__a p {
  margin: 0 0 var(--space-3);
}

.slp-faq__a p:last-child {
  margin-bottom: 0;
}

/* ---- .slp-links — a row of link cards ---------------------------------
   An underlined run of links separated by dots reads as a footnote. As cards
   they read as somewhere to go. */
.slp-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  max-width: var(--container-max);
  margin-inline: auto;
  list-style: none;
  padding: 0;
}

.slp-links__link {
  display: block;
  /* Tinted, NOT white: these sit on a white band, and a white card with a hairline
     border on white is invisible. The tint is what lifts them off the page. */
  background: var(--slp-tint);
  border: 1px solid var(--color-brand-primary-alpha-15);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-primary);
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.slp-links__link:hover {
  transform: translateY(var(--slp-btn-lift));
  box-shadow: var(--slp-shadow-violet);
}

.slp-links__link::after {
  content: " \2192";
  color: var(--color-accent-gold);
}

@media (prefers-reduced-motion: reduce) {
  .slp-links__link,
  .slp-links__link:hover {
    transition: none;
    transform: none;
  }
}

/* ---- .slp-rows — the "X reaches only Y" comparison list ----------------
   A three-column row: the thing, a gold arrow, what it actually reaches. Built
   for the reframe ("the usual fixes treat everything except the mattress") but
   reusable for any claim/reality pairing. The gold arrow is a "small icon",
   which §5.2 permits. Collapses to two stacked lines on a phone, arrow dropped.
   Reads correctly on light OR on .slp-panel--dark; the dark case is handled
   below rather than by a second copy of the rules. */
.slp-rows {
  margin: 0;
}

.slp-row {
  display: grid;
  grid-template-columns: 1fr var(--space-6) 1.3fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-base);
}

.slp-row__try {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.slp-row__arrow {
  color: var(--color-accent-gold);
  font-weight: var(--slp-weight-hero);
  text-align: center;
}

.slp-row__reach {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.slp-panel--dark .slp-row {
  border-bottom-color: var(--border-strong);
}

.slp-panel--dark .slp-row__try {
  color: var(--text-inverse);
}

.slp-panel--dark .slp-row__reach {
  color: var(--text-inverse-muted);
}

/* ---- .slp-em — brand emphasis inside a sentence ------------------------
   Violet on light. GOLD on a dark panel, and that is not a preference:
   measured 2026-07-17 against --surface-dark (#1f2937), brand violet lands at
   2.00:1, which is unreadable, while gold lands at 5.38:1 and white at 14.68:1.
   The v9 draft switches to gold on its dark bands for exactly this reason.

   Use this instead of colouring an <em> by hand. The first attempt at the dark
   reframe left a page-local violet emphasis on a dark background and the closing
   line disappeared, which is the same "a state changed, the colour didn't"
   failure the state-clash audit is about. */
.slp-em {
  font-style: normal;
  color: var(--color-brand-primary);
}

.slp-panel--dark .slp-em {
  color: var(--color-accent-gold);
}

/* ---- .slp-kicker — the line that lands the argument --------------------
   Bigger and heavier than a note, gold on a dark or violet field. For the line
   you want read, not skimmed: "the problem is still in there, just under a
   nicer smell". Gold measures 5.38:1 on --surface-dark and reads clearly on
   violet, where brand violet itself would be 2.00:1 and invisible. */
.slp-kicker {
  font-size: var(--slp-lead);
  font-weight: var(--slp-weight-strong);
  line-height: var(--line-height-relaxed);
  color: var(--color-brand-primary);
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}

.how-it-works--violet .slp-kicker,
.slp-panel--violet .slp-kicker,
.slp-panel--dark .slp-kicker {
  color: var(--color-accent-gold-light);
}

/* ---- .slp-chips — the chip row ----------------------------------------
   The row itself, so a page never has to hand-roll the flex and the gaps, and
   so the gap ABOVE it is not forgotten (which is what let the chips touch the
   step cards above them). */
.slp-chips {
  list-style: none;
  padding: 0;
  margin: var(--space-10) 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---- .slp-note — a small caveat line under a block ---------------------
   Knows what it is sitting on. Measured 2026-07-17: --text-secondary (#666666) on
   brand violet is 1.28:1, i.e. invisible; --text-inverse-muted is 4.98:1. A note
   dropped onto a violet or dark band with the default grey simply vanishes, which
   is what happened to "If a method leaves your mattress damp or scented..." the
   first time the mechanism band went violet. Use this, do not colour it by hand. */
.slp-note {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

.how-it-works--violet .slp-note,
.slp-panel--violet .slp-note,
.slp-panel--dark .slp-note {
  color: var(--text-inverse-muted);
}

/* The closing line of a panel. Inherits the panel's own text colour, so it cannot
   be stranded when a section moves from light to dark. */
.slp-closer {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  text-align: center;
  margin: var(--space-10) 0 0;
}

.slp-panel--dark .slp-closer {
  color: var(--text-inverse);
}

/* ---- .slp-quote-grid — clinician quotes two-up -------------------------
   The standard MedicalEndorsement is one full-width band per quote, so two
   clinicians become two near-identical stripes and neither lands. Side by side
   they read as a panel of opinion, which is the point. Pair with
   MedicalEndorsement bare={true}, which drops its own band so it can sit here. */
.slp-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
}

.sales-landing--bold .medical-endorsement--bare {
  padding: 0;
  background: none;
}

/* bare = the container IS a .slp-quote: a quote block with a big violet quote mark
   instead of an initials disc. */
.sales-landing--bold .medical-endorsement--bare .medical-endorsement__container {
  position: relative;
  display: block;
  max-width: none;
  height: 100%;
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8) var(--space-8);
  box-shadow: var(--slp-shadow-violet);
}

.sales-landing--bold .medical-endorsement--bare .medical-endorsement__container::before {
  content: "\201C";
  position: absolute;
  top: var(--space-1);
  left: var(--space-6);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-brand-primary-alpha-35);
  font-weight: var(--slp-weight-hero);
}

.sales-landing--bold .medical-endorsement--bare blockquote {
  font-size: var(--slp-lead);
  font-style: italic;
  margin: 0 0 var(--space-4);
}

/* ---- .slp-badge — the gold approval pill -------------------------------
   A solid gold badge with a tick. §5.2 explicitly ALLOWS gold for badges and
   small accents; what it forbids is a large gold background panel. This is a
   badge. Use for third-party approval marks (AFSA), not for decoration. */
.slp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent-gold);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

.slp-badge::before {
  content: "✓";
  font-weight: var(--font-weight-bold);
}

/* ---- .slp-panel — a full-bleed brand panel -----------------------------
   Two flavours, both from existing tokens. --violet is a SOLID violet panel,
   which §2.4 permits ("Allowed: Solid purple + solid gold accents"); --dark
   uses the existing --surface-dark. Use them sparingly: two loud panels on a
   page is a rhythm, five is a fairground. */
.slp-panel {
  padding: var(--slp-section-y) var(--space-6);
}

.slp-panel--violet {
  background: var(--color-brand-primary);
}

.slp-panel--dark {
  background: var(--surface-dark);
}

.slp-panel--violet .slp-panel__title,
.slp-panel--dark .slp-panel__title {
  font-size: var(--slp-h2);
  font-weight: var(--slp-weight-strong);
  letter-spacing: var(--slp-tracking-title);
  line-height: var(--slp-leading-title);
  color: var(--text-inverse);
  margin: 0 0 var(--space-4);
}

.slp-panel--violet .slp-panel__eyebrow,
.slp-panel--dark .slp-panel__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--slp-weight-strong);
  letter-spacing: var(--slp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin: 0 0 var(--space-4);
}

.slp-panel--violet .slp-panel__body,
.slp-panel--dark .slp-panel__body {
  font-size: var(--slp-lead);
  color: var(--text-inverse-muted);
  line-height: var(--line-height-relaxed);
}

.slp-panel--violet .slp-panel__body strong,
.slp-panel--dark .slp-panel__body strong {
  color: var(--text-inverse);
}

/* ---- .slp-chip — a chip that sits ON a violet panel --------------------
   White-alpha, so it reads as a consequence of the panel rather than a sticker
   on top of it. Only for use inside .slp-panel--violet. */
.slp-chip {
  background: var(--slp-on-violet-bg);
  border: 1px solid var(--slp-on-violet-border);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ---- .slp-stat — the big number ---------------------------------------
   Violet, heavy, tight, on a violet rule. The rule is a "highlight line". */
.slp-stat {
  border-top: var(--space-1) solid var(--color-brand-primary);
  padding-top: var(--space-4);
}

.slp-stat__n {
  font-size: var(--slp-stat);
  font-weight: var(--slp-weight-hero);
  letter-spacing: var(--slp-tracking-stat);
  line-height: var(--leading-none);
  color: var(--color-brand-primary);
  margin: 0 0 var(--space-2);
}

.slp-stat__l {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  max-width: 26ch;
}

/* ---- .slp-card — a lifted card ----------------------------------------
   The violet-tinted shadow is the one "effect" in the library. It reads as the
   brand casting a shadow rather than a generic drop shadow. */
.slp-card {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--slp-shadow-violet);
}

.slp-card--accent {
  border: 2px solid var(--color-brand-primary);
}

/* A tinted card, for a card that sits on a WHITE band. The white-on-white card is the
   fault that keeps recurring here (the link cards, the form, these receipts): a hairline
   border on white is not an edge. Tint the CARD, not the band, when the band's colour is
   carrying the page's alternating rhythm and cannot be spent. Added 2026-07-17. */
.slp-card--tinted {
  background: var(--slp-tint);
  border-color: var(--color-brand-primary-alpha-15);
}

/* ============================================================================
   HOW IT WORKS — the violet tone
   ----------------------------------------------------------------------------
   HowItWorks tone="violet". Flat steps on white are the dullest band on a bold
   page: the mechanism is the argument, and it was reading like a footnote. The
   draft puts white cards on a solid violet field, which is permitted (§2.4
   allows a SOLID purple panel; what it forbids is blending purple into gold).
   ========================================================================= */

.sales-landing--bold .how-it-works--violet {
  background-color: var(--color-brand-primary);
}

.sales-landing--bold .how-it-works--violet .how-it-works__title {
  color: var(--text-inverse);
}

.sales-landing--bold .how-it-works--violet .how-it-works__intro {
  color: var(--text-inverse-muted);
}

.sales-landing--bold .how-it-works--violet .sales-eyebrow {
  color: var(--color-accent-gold);
}

/* The steps heading on the violet field. White, and it prints at the band's own heading
   weight so it reads as a question being asked, not as a caption on the cards. */
.sales-landing--bold .how-it-works--violet .how-it-works__steps-heading {
  color: var(--text-inverse);
  font-size: var(--font-size-3xl);
}

/* The standard grid is hardcoded to three columns, so a two-step mechanism leaves a
   third of the band empty. Scoped to the bold tier so the three-step pages on this
   component are untouched. auto-fit collapses the empty track, so three steps still
   render as three. */
.sales-landing--bold .how-it-works__steps {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* The steps become cards, lifted off the violet. */
.sales-landing--bold .how-it-works--violet .how-it-works__step {
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: left;
}

/* The card titles carry the step now ("We Extract", "We Sanitise"), so they are sized up
   from the shelf default to lead the card rather than label it. Scoped to the violet
   tone, so the three-step default band on sleep-health is untouched. */
.sales-landing--bold .how-it-works--violet .how-it-works__step-title {
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
}

.sales-landing--bold .how-it-works--violet .how-it-works__step-description {
  color: var(--text-secondary);
}

/* ============================================================================
   THE FORM — a card, not a white void
   ----------------------------------------------------------------------------
   The form band was white and its container was white, so the form had no edges
   and dissolved into the page at the exact moment it needs to look like the
   thing you fill in. The draft floats a white card on the tint with a violet
   shadow. The band's tint comes from the rhythm block above.
   ========================================================================= */

.sales-landing--bold .lead-form__container {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--slp-shadow-violet-lg);
}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 840px) {
  .slp-quote-grid {
    grid-template-columns: 1fr;
  }

  .slp-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .slp-row__arrow {
    display: none;
  }
}

@media (max-width: 840px) {
  .sales-landing--bold {
    --slp-section-y: 3.25rem;
    --slp-hero-y-top: 3.5rem;
    --slp-hero-y-bottom: 2.5rem;
  }
}