/* ==========================================================================
   MyCabin Warranty — Page Pack CSS
   Scoped entirely under .pp-warranty (Page Pack Spec §5). Every selector is
   nested under that root class — no bare element or utility selectors.
   Trimmed from the Claude Design export's shared styles.css: only rules
   this one page's own markup actually uses.

   01  Tokens (scoped custom properties, not :root)
   02  Base resets (scoped)
   03  Flow-layout margin neutralization
   04  Hero + "Important" notice card
   05  Legal layout — "On this page" nav + numbered sections
   06  Warranty-specific components (stats, chips, x-list, steps, table)
   07  Image band (route)
   08  FAQ
   09  Dark closing CTA
   10  Buttons
   11  Scroll reveal (io-fade)
   12  Desktop layer (min-width: 900px)
   13  Reduced motion
   14  Global Header — Warranty on-hero contrast state
   ========================================================================== */


/* ==========================================================================
   01  TOKENS — scoped to .pp-warranty, never :root, so nothing leaks to the
   rest of the WordPress site (Page Pack Spec §5, layer 2).
   ========================================================================== */

.pp-warranty {
  --pp-ink:    #27272C;
  --pp-bone:   #FFFFFF;
  --pp-accent: #917EBC;
  --pp-tint:   #E6E6FF;
  --pp-wood:   #EDCFB7;
  --pp-sun:    #FFD797;
  --pp-surface: #FBF6F3;
  --pp-scrim:  var(--pp-ink);

  --pp-stone:    color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone));
  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-tint-line:        color-mix(in oklab, var(--pp-accent) 18%, var(--pp-tint));
  --pp-tint-line-strong: color-mix(in oklab, var(--pp-accent) 34%, var(--pp-tint));

  --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent);
  --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent);
  --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent);
  --pp-bone-80: color-mix(in oklab, var(--pp-bone) 80%, transparent);
  --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent);

  --pp-maxw:   1280px;
  --pp-gutter: clamp(18px, 4vw, 40px);

  /* Header clearance. The site's fixed global header is supplied by the
     WordPress theme, not this Page Pack, so its real height can't be read
     here — this reproduces the source design's own --hdr-h token
     (clamp(58px, 7vw, 74px)) as a best-effort estimate. If the live theme's
     header renders a meaningfully different height, the hero's top padding
     and the "On this page" nav's sticky offset below need a one-line
     adjustment — flagged in the handoff doc for staging verification. */
  --pp-hdr-h: clamp(58px, 7vw, 74px);

  --pp-r-pill: 999px;
  --pp-r-card: 11px;
  --pp-r-lg:   10px;
  --pp-r-md:   9px;
  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;
  --pp-t-slow: .35s;

  position: relative;
  background: var(--pp-bone);
  color: var(--pp-ink);
  overflow-x: clip;
}


/* ==========================================================================
   02  BASE RESETS (scoped)
   ========================================================================== */

.pp-warranty, .pp-warranty *, .pp-warranty *::before, .pp-warranty *::after {
  box-sizing: border-box;
}
.pp-warranty h1, .pp-warranty h2, .pp-warranty h3, .pp-warranty p, .pp-warranty ul, .pp-warranty ol {
  margin: 0;
  padding: 0;
}
.pp-warranty a { color: var(--pp-ink); text-decoration: none; }
.pp-warranty a:hover { color: var(--pp-accent); }
.pp-warranty button { font: inherit; color: inherit; }
.pp-warranty img { max-width: 100%; display: block; }

/* Fine paper grain over the whole page, matching the source's own
   body::after exactly (scoped to this pack's own root instead of
   literally touching <body>, which Page Packs never do — Page Pack Spec
   §5), matching the identical established pattern already used on every
   other MyCabin Page Pack (About, Contact, Homepage, Milla 47, etc.) —
   genuinely missing from this pack's v1.0.0 build, not a new invention.
   Very low opacity — it stops large flat areas of bone/tint from looking
   like a flat screen; most noticeable against the "Important" notice card
   and the lavender FAQ band. position:fixed (matching source) so it
   covers the whole viewport regardless of scroll position, not just this
   element's own box. */
.pp-warranty::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: radial-gradient(color-mix(in oklab, var(--pp-ink) 55%, transparent) .5px, transparent .5px);
  background-size: 3px 3px;
}


/* ==========================================================================
   03  FLOW-LAYOUT MARGIN NEUTRALIZATION
   --------------------------------------------------------------------------
   Every repeated-item / custom-row component below is a plain core/group
   (or core/columns) with no explicit `layout` attribute in content.html —
   left that way on purpose so each stays a normal, fully flexible Gutenberg
   container. WordPress's default "Flow" layout generates
   `<selector> > * + *` { margin-block-start: <blockGap> }, sizing that gap
   from the active theme's own spacing.blockGap global style regardless of
   whether this Page Pack ever asked for one — silently shifting/shrinking
   siblings against a shared edge or doubling up with a component's own
   authored `gap` (confirmed mechanism, see
   docs/MYCABIN-GUTENBERG-REFERENCE-IMPLEMENTATION.md §5). Scoped narrowly to
   just these components' own direct children — never a sitewide reset.
   `!important` matches WordPress's own generated rule, which carries normal
   specificity with no `:where()`.
   ========================================================================== */

.pp-warranty > *,
.pp-warranty .pp-hero__text > *,
.pp-warranty .pp-hero__headline > *,
.pp-warranty .pp-legal-notice > *,
.pp-warranty .pp-legal-layout > *,
.pp-warranty .pp-legal-content > .pp-legal-section,
.pp-warranty .pp-wty-stats > *,
.pp-warranty .pp-wty-stat > *,
.pp-warranty .pp-wty-chip-row > *,
.pp-warranty .pp-wty-chip > *,
.pp-warranty .pp-wty-steps > *,
.pp-warranty .pp-wty-step > *,
.pp-warranty .pp-wty-step__title > *,
.pp-warranty .pp-route > *,
.pp-warranty .pp-wty-quality-badge > *,
.pp-warranty .pp-faq-cols > *,
.pp-warranty .pp-faq-col > .pp-faq,
.pp-warranty .pp-dark-cta > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
/* .pp-warranty > * (the four top-level sections: hero, legal-section-wrap,
   faq-section, dark-cta-section) was the one container this rule missed in
   v1.0.0 — its own root is a plain core/group with no explicit layout
   attribute, so WordPress's default Flow-layout still generates a
   margin-block-start on each of these siblings, confirmed root cause of
   the white gap that was appearing between the lavender FAQ band and the
   dark closing CTA (there is no spacer/margin in this pack's own markup
   between them; the gap was WordPress-injected space pushing the CTA
   section down from its own flat #27272C background, revealing the page's
   white background above it). .pp-hero__headline > * and .pp-wty-step > *
   were the other two Flow-layout gaps found this round: both are plain
   flex columns that already carry their own authored `gap`, so an
   unneutralized WordPress margin on their second child was silently
   doubling up with that gap (extra space between the hero h1/intro
   paragraph, and between each claim-card's title row and its body text). */


/* ==========================================================================
   04  HERO + "IMPORTANT" NOTICE CARD
   --------------------------------------------------------------------------
   Fidelity note: the source's h1 carries a "h1" utility class, but it sits
   nested inside ".page-hero", and the source's own ".page-hero h1" rule
   (class+type, higher specificity) sets font-size/line-height/letter-
   spacing/max-width for every hero on the site, overriding that utility's
   own smaller clamp on every shared property. The rendered result is
   therefore the SAME large hero-heading scale used by About/How It Works,
   not the smaller generic ".h1" utility — reproduced here directly rather
   than via a misleading utility class.
   ========================================================================== */

.pp-warranty .pp-hero {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: clamp(420px, 46vw, 480px);
}
.pp-warranty .pp-hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.pp-warranty .pp-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.pp-warranty .pp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--pp-ink) 82%, transparent) 88%);
}
.pp-warranty .pp-hero__inner {
  position: relative;
  z-index: 3;
  height: auto;
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding: calc(var(--pp-hdr-h) + clamp(40px, 14vw, 64px)) var(--pp-gutter) clamp(28px, 8vw, 64px);
}
.pp-warranty .pp-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
}
.pp-warranty .pp-hero__headline {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
}
/* !important on every shared property below: these values already match
   the source's own resolved cascade exactly (clamp(32px, 9vw, 76px),
   max-width 16ch — see the fidelity note at the top of this section), but
   `max-width` is expressed in `ch` units, which resolve against the
   element's OWN computed font-size — if a WordPress theme's global styles
   win on font-size alone (the exact, already-documented defect class that
   forced every h2 on this page into its own inline style.typography.
   fontSize attribute, see content.html), the max-width would still read
   "16ch" but resolve to a completely different physical width, changing
   where the line wraps even though the authored value never moved. This
   forces the whole shared block to win outright rather than leaving any
   one property exposed to that failure mode. */
.pp-warranty .pp-hero__headline h1 {
  font-size: clamp(32px, 9vw, 76px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
  font-weight: 500 !important;
  max-width: 16ch !important;
  color: var(--pp-bone);
}
.pp-warranty .pp-hero__headline > p {
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.65;
  font-weight: 300;
  max-width: 60ch;
  color: var(--pp-bone-80);
}

.pp-warranty .pp-legal-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 640px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 20px);
  background: color-mix(in oklab, var(--pp-wood) 30%, var(--pp-bone));
  border: 1px solid color-mix(in oklab, var(--pp-wood) 55%, var(--pp-bone));
  border-radius: var(--pp-r-card);
}
.pp-warranty .pp-legal-notice__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-wood) 65%, var(--pp-bone));
  color: color-mix(in oklab, var(--pp-ink) 60%, var(--pp-wood));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-warranty .pp-legal-notice__body { display: flex; flex-direction: column; }
.pp-warranty .pp-legal-notice__body > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.pp-warranty .pp-legal-notice__label {
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in oklab, var(--pp-ink) 60%, var(--pp-wood));
}
/* Source: .legal-notice p { margin-top: 4px; ... } is a plain tag+class
   selector applying to EVERY <p> in the card, including the "Important"
   label itself — the more specific .legal-notice p.legal-notice__label
   rule overrides font-size/weight/color but never touches margin-top, so
   the label keeps that same 4px top margin in the real cascade too. A
   `p + p` selector here (v1.0.0) only matched the second paragraph,
   leaving the label flush against the card's own top edge instead of
   source's small 4px offset. Split into its own margin-only rule (rather
   than folding into the p+p rule below) so it can't out-specificity the
   label's own distinct font-weight/color rule above. */
.pp-warranty .pp-legal-notice__body > p { margin-top: 4px !important; }
.pp-warranty .pp-legal-notice__body > p + p {
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--pp-ink-72);
}


/* ==========================================================================
   05  LEGAL LAYOUT — "ON THIS PAGE" NAV + NUMBERED SECTIONS
   ========================================================================== */

.pp-warranty .pp-legal-layout {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
}

.pp-warranty .pp-legal-nav { display: none; }
.pp-warranty .pp-legal-nav__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
  margin-bottom: 12px;
}
.pp-warranty .pp-legal-nav__list {
  list-style: none;
  counter-reset: pp-legal-nav;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-warranty .pp-legal-nav__list li { counter-increment: pp-legal-nav; }
.pp-warranty .pp-legal-nav__list a {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pp-ink-72);
}
.pp-warranty .pp-legal-nav__list a::before { content: counter(pp-legal-nav) "."; flex: none; color: var(--pp-ink-56); }
.pp-warranty .pp-legal-nav__list a:hover { color: var(--pp-ink); }
.pp-warranty .pp-legal-nav__list a.pp-is-active { color: var(--pp-ink); font-weight: 500; }
.pp-warranty .pp-legal-nav__extra { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--pp-ink-hair); }
.pp-warranty .pp-legal-nav__extra a { font-size: 13px; color: var(--pp-ink-72); }
.pp-warranty .pp-legal-nav__extra a:hover { color: var(--pp-ink); }

.pp-warranty .pp-legal-content { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 44px); min-width: 0; }
/* More air between the seven numbered sections than a plain-paragraph legal
   page needs — this page's sections carry heavier internal content (stat
   cards, tables, step grids) that reads as cramped at a tighter rhythm. */
.pp-warranty .pp-wty-legal-content { gap: clamp(48px, 7vw, 72px); }

.pp-warranty .pp-legal-section { scroll-margin-top: 90px; }
.pp-warranty .pp-legal-section__head { display: flex; align-items: center; gap: 14px; }
/* Source: .legal-section__head h2 { font-size:18px; letter-spacing:-.015em;
   font-weight:500; }. This pack already sets the 18px via a native
   style.typography.fontSize block attribute in content.html (the same
   fix every h2 on this page needed against the WordPress theme's own
   heading defaults), but never reproduced the other two shared
   properties — left to fall back to the theme's own default h2 weight/
   letter-spacing (usually much heavier, no negative tracking), which
   reads as visually heavier/wider than source and throws off the sense
   of proportion for every numbered section. */
.pp-warranty .pp-legal-section__head h2 { letter-spacing: -.015em !important; font-weight: 500 !important; }
.pp-warranty .pp-legal-section__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  color: var(--pp-accent);
  font-size: 13px;
  font-weight: 500;
}
.pp-warranty .pp-legal-section > p,
.pp-warranty .pp-legal-section > ul li {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--pp-ink-72);
}
.pp-warranty .pp-legal-section > p:first-of-type { margin-top: 16px; }
.pp-warranty .pp-legal-section strong { font-weight: 500; color: var(--pp-ink); }
.pp-warranty .pp-legal-section > ul { margin-top: 12px; padding-left: 18px; list-style: disc; }
.pp-warranty .pp-legal-section a:hover { color: var(--pp-accent); }
/* Sub-heading inside a numbered section — one step down from the section's
   own h2 ("Response times" in section 2 is the only user). */
.pp-warranty .pp-legal-section > h3 {
  margin-top: 22px;
  margin-bottom: 2px;
  font-size: 15.5px;
  letter-spacing: -.01em;
  font-weight: 500;
  color: var(--pp-ink);
}

.pp-warranty .pp-legal-table-wrap { margin-top: 16px; overflow-x: auto; }
.pp-warranty .pp-legal-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* border/border-bottom !important on both cell rules below: core/table's
   own block-library CSS and/or the active theme's global-styles table
   defaults ship their own border-color on <table>/<th>/<td> (the exact
   "leaked default beats an equal-or-lower-specificity author rule" defect
   class already found and fixed on this project's buttons/headings) —
   these two rules already carry the correct source border colors
   (ink-line under the header row, the lighter ink-hair between body
   rows), matching source exactly, but were not shielded against that
   default in v1.0.0, which is what the Gutenberg default table look.
   v1.0.1's shielding used a plain (non-important) `border: 0` to clear
   the other three edges before layering the important border-bottom on
   top — not defensive enough: with border-collapse:collapse, a leaked
   default on the TD's own border-TOP (untouched by that fix, since it
   only touched border-bottom) collapses against the TH's border-bottom
   at the header/body seam, and border-collapse lets the wider/heavier of
   the two edges win regardless of which cell declared it — this is the
   confirmed mechanism behind the still-heavy rule directly under
   SITUATION/RESPONSE. `border: 0 !important` now clears every edge on
   both th and td unconditionally first; `border-bottom` immediately
   after, in the same rule, still wins for that one edge specifically
   (same-rule declaration order breaks the tie between the shorthand and
   the more specific longhand, independent of importance). */
/* v1.0.5's th/td-level `border: 0 !important` shielding was reported still
   not enough — the heavy rule persisted under SITUATION/RESPONSE. Two
   further gaps identified and closed this round, neither addressed by a
   th/td-scoped rule alone:
   (1) THEAD-LEVEL, NOT CELL-LEVEL: WordPress core's block-library CSS
   and/or the active theme's global styles can style <thead> or
   <thead>/<tr> itself (not just its <th> cells) with a heavier bottom
   border or box-shadow, specifically to visually separate a table's
   header row — a common deliberate WP/theme table-UX default that no
   th/td-scoped rule can reach, since thead is a different element in the
   selector chain entirely. Added explicit resets on thead and thead tr.
   (2) BOX-SHADOW, NOT BORDER: some table defaults draw the header
   divider as a crisp `box-shadow` hairline rather than a `border` —
   invisible to any border-only shielding. Added `box-shadow: none
   !important` to thead/th/td defensively; source's own divider is a
   plain 1px border, never a shadow, so this can only remove an
   unintended extra line, never the intended one.
   Also verified: this pack's editor.css (loaded after frontend.css,
   editor-canvas only) had zero table rules of its own — if the reported
   screenshots are taken from a WordPress admin/editor preview context
   rather than the pure public frontend, the editor canvas's own
   block-library styles can differ from the frontend's and would need
   their own defense; the identical reset is now mirrored there too (see
   editor.css) purely as a defensive belt-and-braces measure — it changes
   nothing on the real frontend either way. */
.pp-warranty .pp-legal-table thead,
.pp-warranty .pp-legal-table thead tr {
  border: 0 !important;
  box-shadow: none !important;
}
.pp-warranty .pp-legal-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
  border: 0 !important;
  border-bottom: 1px solid var(--pp-ink-line) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.pp-warranty .pp-legal-table td {
  padding: 12px 14px;
  font-weight: 300;
  color: var(--pp-ink-72);
  border: 0 !important;
  border-bottom: 1px solid var(--pp-ink-hair) !important;
  box-shadow: none !important;
  vertical-align: top;
}


/* ==========================================================================
   06  WARRANTY-SPECIFIC COMPONENTS
   ========================================================================== */

/* --- Two-up stat cards, "Warranty period" section. padding/border below
   already matched source exactly — shielded with !important against the
   same leaked WordPress/theme card-padding default already found and
   fixed on the claim-step cards and the table borders elsewhere on this
   page, not a new value. ---------------------------------------------- */
.pp-warranty .pp-wty-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.pp-warranty .pp-wty-stat {
  flex: 1 1 220px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px !important;
  background: var(--pp-bone);
  border: 1px solid var(--pp-stone);
  border-radius: var(--pp-r-card);
}
.pp-warranty .pp-wty-stat__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--pp-r-pill);
  background: color-mix(in oklab, var(--pp-sun) 55%, var(--pp-bone));
  color: color-mix(in oklab, var(--pp-ink) 65%, var(--pp-sun));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-warranty .pp-wty-stat__body { display: flex; flex-direction: column; }
.pp-warranty .pp-wty-stat__body > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.pp-warranty .pp-wty-stat__num { font: 500 clamp(22px, 2.6vw, 26px) "Poppins", sans-serif; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-warranty .pp-wty-stat__label { margin-top: 3px !important; font-size: 12.5px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); }

/* --- Icon chips — response-time / visual-quality / inspection callouts.
   padding already matched source exactly — shielded for the same reason
   as the stat cards above. ---------------------------------------------- */
.pp-warranty .pp-wty-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.pp-warranty .pp-wty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  background: var(--pp-surface);
  border: 1px solid var(--pp-stone);
  border-radius: var(--pp-r-pill);
}
.pp-warranty .pp-wty-chip svg { flex: none; color: var(--pp-ink-56); }
.pp-warranty .pp-wty-chip p { font-size: 12.5px; font-weight: 500; color: var(--pp-ink-72); }

/* --- "What the warranty doesn't cover" — plain list, muted "x" marker
   standing in for the source's per-item SVG icon (kept as CSS-generated
   content rather than embedding non-text content inside a core/list-item,
   which cannot round-trip through Gutenberg's block validation).
   `list-style` on the <ul> alone was not enough to remove the native
   marker in practice: this is a core/list block, and the active WordPress
   theme's own global styles commonly set `list-style-type` directly on
   `li` (not just `ul`) — a plain, non-important type selector that a
   non-important `list-style: none` on the parent list can lose to,
   producing exactly the reported "bullet + circled-x" double-marker.
   `!important` + explicit list-style-type/position on both the <ul> AND
   each <li>, plus `display: block` overriding li's own default
   `display: list-item` outright, removes any path back to a native
   marker regardless of which element the theme's default targets.
   --------------------------------------------------------------------
   MARKER SHAPE — a bare "✕" character (v1.0.2) was still not the source
   marker: source's own SVG (warranty.html line 274 etc.) is
   <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
   stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/>
   <path d="M9.5 9.5l5 5M14.5 9.5l-5 5"/></svg> — a thin circle OUTLINE
   with a small × inscribed inside it, not a standalone glyph. A
   core/list-item's content is plain RichText and cannot hold nested HTML
   (the exact reason this project already uses CSS-generated content here
   instead of a literal per-item <svg> — see the note above), so the
   pseudo-element reproduces this SAME source SVG pixel-for-pixel via a
   CSS mask: the data-URI below is the identical markup, geometry and
   stroke-width as source, letting `background-color` (var(--pp-ink-56),
   the exact source marker color) paint through the mask's alpha shape
   instead of approximating the circle+× with CSS borders and rotated
   bars (which drift from the true stroke geometry/anti-aliasing).
   Source's own layout is a flex row (li: display:flex; gap:10px;
   align-items:flex-start) with the 13x13 marker as its own flex:none
   item, margin-top:5px, and the text as a second flex item — wrapped
   lines naturally align under the TEXT because it is a separate flex box
   starting after the marker+gap, not because of manual indentation. This
   pack keeps its existing absolute-position/padding-left mechanism
   (equally valid for the same visual result, and already established
   here) but now sized to source's own real numbers: marker width 13px +
   gap 10px = 23px reserved (was 22px), and top:5px (was 2px) matching
   source's own margin-top on the marker exactly, rather than an
   approximate offset. ---------------------------------------------- */
.pp-warranty .pp-wty-x-list {
  list-style: none !important;
  list-style-type: none !important;
  margin-top: 16px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-warranty .pp-wty-x-list li {
  display: block;
  list-style: none !important;
  list-style-type: none !important;
  position: relative;
  margin-top: 0 !important;
  padding-left: 23px;
}
.pp-warranty .pp-wty-x-list li::marker { content: ""; }
.pp-warranty .pp-wty-x-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  background-color: var(--pp-ink-56);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5l5 5M14.5 9.5l-5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5l5 5M14.5 9.5l-5 5'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* --- Response-times table — mobile restacks into cards; a plain table
   again at 900px+ (§12). Column labels are static CSS-generated content,
   not a data-label attribute (Page Pack Spec §6 forbids hand-added data-*
   attributes on a native block's own cells — they don't survive Gutenberg's
   save()/re-serialize round trip). --------------------------------------- */
.pp-warranty .pp-wty-table thead { display: none; }
.pp-warranty .pp-wty-table table { display: block; width: 100%; }
.pp-warranty .pp-wty-table tbody { display: block; width: 100%; }
.pp-warranty .pp-wty-table tr { display: block; width: 100%; border: 1px solid var(--pp-ink-line) !important; border-radius: var(--pp-r-md); margin-bottom: 10px; overflow: hidden; }
.pp-warranty .pp-wty-table td { display: block; width: 100%; border-bottom: 1px solid var(--pp-ink-hair) !important; }
.pp-warranty .pp-wty-table tr td:last-child { border-bottom: 0 !important; }
.pp-warranty .pp-wty-table td::before {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-ink-56);
}
.pp-warranty .pp-wty-table td:first-child::before { content: "Situation"; }
.pp-warranty .pp-wty-table td:last-child::before { content: "Response"; }
.pp-warranty .pp-wty-table td:last-child { font-weight: 500; color: var(--pp-ink); }

/* --- Claim steps — one column on mobile, 2x2 grid on desktop (§12).
   padding/margin-bottom below already matched source exactly (18px 20px
   card padding, 18px icon-to-title gap) but were reported still reading
   compressed after v1.0.1 — the same class of leaked WordPress/theme
   default (a `.wp-block-group` global-styles padding preset, or a
   default `margin` on the icon's own wrapper) that this project has
   repeatedly found beating non-important author rules elsewhere on this
   page (table borders, hero h1). Shielded with !important rather than
   invented new values, since these already are the source's own numbers. */
.pp-warranty .pp-legal-section--steps { margin-top: 24px; }
.pp-warranty .pp-wty-steps { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.pp-warranty .pp-wty-step {
  padding: 18px 20px !important;
  background: var(--pp-bone);
  border: 1px solid var(--pp-stone);
  border-radius: var(--pp-r-card);
}
.pp-warranty .pp-wty-step__icon {
  width: 26px;
  height: 26px;
  border-radius: var(--pp-r-pill);
  background: var(--pp-tint);
  color: var(--pp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px !important;
}
.pp-warranty .pp-wty-step__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pp-warranty .pp-wty-step__title h3 { font-size: 15.5px; letter-spacing: -.01em; font-weight: 500; color: var(--pp-ink); }
.pp-warranty .pp-wty-step__num { font-size: 13px; font-weight: 500; color: var(--pp-accent); }
.pp-warranty .pp-wty-step > p { margin-top: 6px !important; font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   07  IMAGE BAND ("route") — same visual recipe as the hero: absolute
   photo, dark scrim, bottom-anchored text. Sits as the last block inside
   section 7, not a separate full-bleed section, so it stays in the 1fr
   content column on desktop, aligned under the "On this page" sidebar.
   ========================================================================== */

.pp-warranty .pp-route {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: clamp(220px, 30vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--pp-ink);
}
.pp-warranty .pp-route--in-section { margin-top: 24px; }
.pp-warranty .pp-route__photo { position: absolute; inset: 0; margin: 0; }
.pp-warranty .pp-route__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-warranty .pp-route::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--pp-scrim) 8%, transparent) 38%,
    color-mix(in oklab, var(--pp-scrim) 55%, transparent) 66%,
    color-mix(in oklab, var(--pp-scrim) 82%, transparent) 100%);
}
.pp-warranty .pp-route__body {
  position: relative;
  z-index: 3;
  padding: clamp(20px, 3vw, 30px);
}
.pp-warranty .pp-route__body h3 {
  color: var(--pp-bone);
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 500;
}
.pp-warranty .pp-route__body > p {
  margin-top: 10px;
  color: var(--pp-bone-80);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
}
.pp-warranty .pp-wty-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: var(--pp-tint);
  border: 1px solid var(--pp-tint-line-strong);
  border-radius: var(--pp-r-pill);
}
.pp-warranty .pp-wty-quality-badge svg { flex: none; color: var(--pp-accent); }
.pp-warranty .pp-wty-quality-badge p { color: var(--pp-accent); font-size: 11.5px; font-weight: 500; }


/* ==========================================================================
   08  FAQ — full-width lavender band, own accordion (single-open within
   this section only — see frontend.js).
   ========================================================================== */

/* padding already matched source's own clamp(56px, 8vw, 100px) exactly,
   but was reported still reading tight against the top of the lavender
   band after v1.0.1 — shielded with !important against the same class of
   leaked theme section-padding default already found elsewhere on this
   page, rather than guessing a new, larger value not present in source. */
.pp-warranty .pp-faq-section {
  padding: clamp(56px, 8vw, 100px) 0 !important;
  background: var(--pp-tint);
  border-block: 1px solid var(--pp-tint-line);
}
.pp-warranty .pp-faq-section .pp-legal-section__num { background: var(--pp-bone); }
.pp-warranty .pp-faq-inner { max-width: var(--pp-maxw); margin: 0 auto; padding-inline: var(--pp-gutter); }

.pp-warranty .pp-faq-cols {
  margin-top: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(28px, 5vw, 64px);
  align-items: start;
  border-bottom: 1px solid var(--pp-tint-line-strong);
}
.pp-warranty .pp-faq-col { display: flex; flex-direction: column; }

.pp-warranty .pp-faq { border-top: 1px solid var(--pp-tint-line-strong); }
.pp-warranty .pp-faq h3.pp-faq__q { margin: 0; }

.pp-warranty .pp-faq__q {
  position: relative;
  display: block;
  width: 100%;
  /* Source reserves 16px gap + a 22px-wide .faq__sign flex box = 38px of
     right-side space between the question text and the +/− glyph (a real
     flex row there, vs. this pack's absolutely-positioned ::after glyph
     below) — 30px under-reserved that space by 8px. */
  padding: 12px 38px 12px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.015em;
  /* Explicit resting-state color — investigated the reported single
     purple closed question (root-cause note below); this file has no
     selector capable of producing a PERSISTENT purple state on a closed
     question (no :visited applies, since this is a <h3> with role="button"
     added by frontend.js at runtime, never a real <a>; no .pp-is-open-
     linked color rule exists; frontend.js never sets an inline color).
     The only rule anywhere in this file that turns this element's text
     var(--pp-accent) is the :hover rule directly below — which cannot
     persist once the pointer moves away. Declaring color explicitly here
     (rather than leaving it to inherit from .pp-warranty's own color:
     var(--pp-ink)) closes the one remaining gap: a WordPress theme global-
     style heading-color rule winning over inheritance specifically for
     this h3 the way it already had to be defended against for h1/h2
     elsewhere on this page. If the live page still shows one question
     purple at rest after this round, it was very likely the screenshot
     catching a live :hover/:focus state (cursor resting on that exact
     row) rather than a standing CSS defect — worth a fresh, non-
     interacting screenshot to confirm. */
  color: var(--pp-ink) !important;
  cursor: pointer;
  transition: color .2s;
}
.pp-warranty .pp-faq__q:hover { color: var(--pp-accent) !important; }
/* Source's own global :focus-visible rule (outline only, no text-color
   change — hover and focus are deliberately distinct states in source)
   was never reproduced for this element, since frontend.js only adds
   role="button"/tabindex to the <h3> at runtime — it was never focusable
   markup in the original static HTML for this file's own CSS to have
   already covered. Scoped to just this control, matching the brief's own
   instruction not to touch focus styling site-wide. */
.pp-warranty .pp-faq__q:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.pp-warranty .pp-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 17px;
  line-height: 1;
  font-weight: 300;
  text-align: right;
}
.pp-warranty .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; }
.pp-warranty .pp-faq__a {
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pp-ink-72);
  font-weight: 300;
  max-width: 52ch;
  transition: max-height var(--pp-t-slow) var(--pp-ease), padding var(--pp-t-slow) var(--pp-ease);
}
.pp-warranty .pp-faq.pp-is-open .pp-faq__a { max-height: 220px; padding-bottom: 14px; }


/* ==========================================================================
   09  DARK CLOSING CTA
   ========================================================================== */

/* Whole layout system hardened together this round, not as independent
   offsets — the reported symptoms (heading measure too narrow, button
   group sitting too far right, outer wrapper reading too wide) are one
   single mechanism, not three separate bugs: source's .dark-cta__copy
   {flex: 1 1 300px} is what makes the copy column grow to fill its fair
   share of the row before .dark-cta__btns settles into place via
   justify-content:space-between. Every value below already matches
   source exactly (verified against styles.css lines 2847-2860 and the
   900px+ desktop layer at line 4597 fresh this round — .wrap's own
   max-width/margin/padding-inline architecture, .dark-cta's flex/gap,
   .dark-cta__copy's flex-basis, .dark-cta__btns' desktop 1fr 1fr grid).
   None of the numbers below are new/guessed. What's new is !important on
   every property in this chain: a WordPress core/group block with no
   explicit "layout" attribute can have its own flex-basis/width silently
   constrained by the active theme's default block-layout behavior (the
   same "leaked non-important WP default beats an equal-or-lower-
   specificity author rule" defect class already found and fixed for
   this page's table borders, list markers, and card padding) — if
   .pp-dark-cta__copy's flex-grow doesn't actually win, it never expands
   past its own 300px basis, .pp-dark-cta__btns is then pushed toward the
   row's far edge by justify-content:space-between, and the heading
   column is left with far less width to wrap in than source intends —
   a single root cause producing all three reported symptoms at once. */
/* HORIZONTAL WRAPPER ALIGNMENT vs the FAQ section above it — root cause
   found by comparing this pack's own two wrapper mechanisms against each
   other and against source: source uses ONE shared .wrap class
   (max-width + margin:0 auto + padding-inline, all three on the SAME
   element) for BOTH the FAQ section's inner div (<div class="wrap"> at
   warranty.html line 359) and the dark CTA's inner div (<div class="wrap
   dark-cta"> at line 396) — literally zero divergence between them in
   source. This pack's own .pp-faq-inner already reproduces that single-
   element pattern correctly (max-width/margin/padding-inline all on one
   rule, see above). The dark CTA did NOT: padding-inline lived on the
   OUTER .pp-dark-cta-section, while max-width+margin:auto lived on a
   SEPARATE INNER .pp-dark-cta element. Those two decompositions are NOT
   equivalent — applying max-width:1280px to a box whose available width
   has ALREADY been reduced by the section's own gutter padding yields a
   wider, further-left-starting content box than applying max-width to
   the full section width and THEN subtracting the gutter via the inner
   element's own padding-inline (verified by hand: on a 1440px viewport,
   the old dark-CTA math put its content edge 40px further left and its
   content 80px wider than the FAQ's own .wrap-based math). Fixed by
   moving padding-inline onto .pp-dark-cta itself, alongside max-width
   and margin — the exact same single-element decomposition as
   .pp-faq-inner and as source's own .wrap. No child (heading/buttons)
   was touched; the fix is entirely in this one shared wrapper rule. */
.pp-warranty .pp-dark-cta {
  max-width: var(--pp-maxw) !important;
  width: 100%;
  margin: 0 auto !important;
  padding-inline: var(--pp-gutter) !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.pp-warranty .pp-dark-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 300px !important;
  min-width: 0 !important;
  max-width: none !important;
}
.pp-warranty .pp-dark-cta__copy > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.pp-warranty .pp-dark-cta__copy h2 { max-width: none !important; font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-warranty .pp-dark-cta__copy p { max-width: none !important; font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-warranty .pp-dark-cta__btns.wp-block-buttons { flex-direction: column; gap: 10px; width: 100%; flex: 0 0 auto !important; }
.pp-warranty .pp-dark-cta__btns .wp-block-button,
.pp-warranty .pp-dark-cta__btns .wp-block-button__link { width: 100%; }


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

.pp-warranty .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 21px;
  border-radius: var(--pp-r-pill);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-warranty .pp-btn--48 .wp-block-button__link { height: 38px; padding-inline: 19px; }

.pp-warranty .pp-btn-light .wp-block-button__link:hover { background: #CDCBFF !important; color: var(--pp-ink) !important; }

.pp-warranty .pp-btn-ghost .wp-block-button__link {
  background: color-mix(in oklab, var(--pp-scrim) 30%, transparent);
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-line);
}
.pp-warranty .pp-btn-ghost .wp-block-button__link:hover {
  background: color-mix(in oklab, var(--pp-bone) 14%, transparent);
  border-color: var(--pp-bone);
  color: var(--pp-bone);
}


/* ==========================================================================
   11  SCROLL REVEAL (io-fade)
   ========================================================================== */

.pp-warranty .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-warranty .pp-io-fade.pp-in-view { opacity: 1; transform: none; }


/* ==========================================================================
   12  DESKTOP LAYER (min-width: 900px) — the source's own single breakpoint
   ========================================================================== */

@media (min-width: 900px) {
  .pp-warranty .pp-legal-layout { grid-template-columns: 220px 1fr; }
  .pp-warranty .pp-legal-nav {
    display: block;
    position: sticky;
    top: calc(var(--pp-hdr-h) + 24px);
  }

  /* Reverts the extra mobile-only top clearance — the side-by-side row
     below already spreads the headline and notice card apart, so the
     taller mobile padding isn't needed here. */
  .pp-warranty .pp-hero__inner { padding-top: calc(var(--pp-hdr-h) + clamp(24px, 4vw, 40px)); }

  /* The notice card moves from under the headline to beside it, headline
     flexing to fill the space the fixed-width card leaves behind. */
  .pp-warranty .pp-hero__text {
    flex-direction: row;
    align-items: flex-end;
    gap: clamp(32px, 5vw, 56px);
  }
  .pp-warranty .pp-hero__headline { flex: 1 1 auto; }
  .pp-warranty .pp-legal-notice { flex: 0 0 clamp(300px, 30vw, 380px); margin-top: 0; }

  .pp-warranty .pp-route--in-section { margin-top: 40px; }

  .pp-warranty .pp-wty-steps { grid-template-columns: repeat(2, 1fr); }

  /* Response-times table restacks back into a plain table. table-layout:
     fixed plus explicit column widths replace the browser's own
     auto-layout guess, which — with a long unbroken Situation sentence
     next to a short Response phrase — hands Response a narrow, ragged
     column far from where Situation's own text ends. */
  .pp-warranty .pp-wty-table thead { display: table-header-group; }
  .pp-warranty .pp-wty-table table { display: table; table-layout: fixed; }
  .pp-warranty .pp-wty-table tbody { display: table-row-group; }
  /* !important on this breakpoint's own border values too — the mobile
     rules above apply at every width (no media query of their own), so at
     900px+ this layer has to actively out-rank them (same selector, same
     specificity: the later declaration in source order — this one — only
     wins if it's important too), not just state a plain contradicting
     value. */
  .pp-warranty .pp-wty-table tr { display: table-row; border: 0 !important; margin-bottom: 0; border-radius: 0; }
  .pp-warranty .pp-wty-table th:first-child, .pp-warranty .pp-wty-table td:first-child { width: 62%; }
  .pp-warranty .pp-wty-table th:last-child, .pp-warranty .pp-wty-table td:last-child { width: 38%; }
  .pp-warranty .pp-wty-table td { display: table-cell; border-bottom: 1px solid var(--pp-ink-hair) !important; }
  .pp-warranty .pp-wty-table tr td:last-child { border-bottom: 1px solid var(--pp-ink-hair) !important; }
  .pp-warranty .pp-wty-table td:first-child::before,
  .pp-warranty .pp-wty-table td:last-child::before { content: none; display: none; }

  /* Source: .dark-cta__btns { display: grid; grid-template-columns: 1fr 1fr;
     width: auto; } at 900px+ — an equal-width 2-column grid, not a
     content-sized flex row. A flex row let "File a warranty claim" size to
     its own shorter text while "Aftercare & maintenance guide" claimed the
     rest, reading as visibly unbalanced against source's own deliberate
     equal split; it also left .dark-cta__copy (flex:1 1 300px, grow:1)
     free to claim whatever width the undersized button row wasn't using,
     which is what was making the heading wrap wider than source's own
     grid-constrained layout. gap:10px carries over unchanged from the
     mobile rule above (this layer never redeclares it, matching source,
     which doesn't either). */
  .pp-warranty .pp-dark-cta__btns.wp-block-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; width: auto; flex: 0 0 auto !important; }
  .pp-warranty .pp-dark-cta__btns .wp-block-button { width: auto; }
  .pp-warranty .pp-dark-cta__btns .wp-block-button__link { width: 100%; }
}


/* ==========================================================================
   13  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pp-warranty * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   14  GLOBAL HEADER — WARRANTY ON-HERO CONTRAST STATE
   --------------------------------------------------------------------------
   Source drives the header's light/dark contrast with a modifier class on
   the header's own element (header--on-hero), chosen per-page in the
   static HTML. The MyCabin Header Site Part's markup is identical on every
   page it renders on (Site Parts render the same saved content everywhere,
   never per-page markup), so it cannot carry a per-page modifier class the
   way source does — the established, already-shipped mechanism (see the
   Header Site Part's own frontend.css, "HEADER STATE ARCHITECTURE" section,
   already registering About/Contact/Ready Houses/How It Works) instead
   derives the state from each page's own, already-unique Page Pack root
   class via the CSS :has() relational selector: "if <body> contains this
   page's own root class anywhere, style the header accordingly."
   Warranty's own hero (a full dark photo, like About/Contact/Ready Houses'
   own heroes — not the narrower "how-hero" exception used by How It
   Works) was never registered into that list, so it was stuck on the
   header's plain default (dark-ink) state despite sitting over a dark
   photo that needs the light state — the reported mismatch.
   Written here, inside this Page Pack's own frontend.css, rather than
   inside the Header Site Part's file: this pack must not modify global
   Header content (Page Pack Spec §1.4 / this round's own explicit
   ownership rule), and a CSS selector is not confined to the file that
   declares it — a rule scoped by `body:has(.pp-warranty)` only ever
   matches while this page's own root class is present in the DOM, so it
   changes nothing for any other page, without touching the Header Site
   Part's own file at all. Every property/selector pair below is copied
   verbatim from that file's own on-hero + is-solid (scrolled) groups,
   substituting only the :has() target — .pp-warranty in place of e.g.
   .pp-about-clean — so Warranty's header behaves identically to those
   already-approved pages, not a new, independently-invented treatment.
   ========================================================================== */

body:has(.pp-warranty) .pp-header .pp-nav__pill {
  background: color-mix(in oklab, var(--pp-bone) 22%, transparent);
}
body:has(.pp-warranty) .pp-header .pp-header__logo svg {
  color: var(--pp-bone);
}
body:has(.pp-warranty) .pp-header .pp-burger {
  border-color: var(--pp-bone-line);
}
body:has(.pp-warranty) .pp-header .pp-burger span {
  background: var(--pp-bone);
}
body:has(.pp-warranty) .pp-header .pp-nav__link .wp-block-button__link {
  color: var(--pp-bone) !important;
}

/* Past 40px of scroll the header goes solid and always reverts to ink,
   regardless of page — same as every other on-hero page. */
body:has(.pp-warranty) .pp-header.pp-is-solid .pp-header__logo svg {
  color: var(--pp-ink);
}
body:has(.pp-warranty) .pp-header.pp-is-solid .pp-burger {
  border-color: var(--pp-ink-28);
}
body:has(.pp-warranty) .pp-header.pp-is-solid .pp-burger span {
  background: var(--pp-ink);
}
body:has(.pp-warranty) .pp-header.pp-is-solid .pp-nav__link .wp-block-button__link {
  color: var(--pp-ink) !important;
}
body:has(.pp-warranty) .pp-header.pp-is-solid .pp-nav__pill {
  background: color-mix(in oklab, var(--pp-ink) 8%, transparent);
}