/* ==========================================================================
   MyCabin How It Works Page Pack — frontend.css
   Clean-room build from source-design/how-it-works-original.zip. Every rule
   is scoped under .pp-how-it-works-clean (Page Pack Spec §5). Single
   breakpoint, min-width: 900px, matching the source exactly (styles.css §15).
   ========================================================================== */

.pp-how-it-works-clean {
  --pp-ink:          #27272C;
  --pp-bone:         #FFFFFF;
  --pp-beige:        #FBF6F3;
  --pp-accent:       #917EBC;
  --pp-accent-soft:  #CDCBFF;
  --pp-tint:         #E6E6FF;
  --pp-surface:      var(--pp-beige);

  --pp-ink-hair: color-mix(in oklab, var(--pp-ink) 7%,  var(--pp-bone));
  --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, 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-line: color-mix(in oklab, var(--pp-bone) 22%, transparent);
  --pp-scrim: var(--pp-ink);

  --pp-maxw:    1280px;
  --pp-gutter:  clamp(18px, 4vw, 40px);
  --pp-sec-y-p: clamp(48px, 7vw, 104px);

  --pp-r-pill: 999px;
  --pp-r-xs:   7px;

  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;
  --pp-t-slow: .35s;

  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  color: var(--pp-ink);
  background: var(--pp-bone);
  /* The source clips horizontal overflow with `overflow-x:hidden` on
     <body> itself — safe there only because <body> is the document's own
     root scroller. This root is an ordinary nested <div> in WordPress's
     real template, so the same single-axis `overflow-x:hidden` would
     trigger the CSS overflow-axis-pairing quirk: the unset `overflow-y`
     would silently resolve to `auto`, turning this element into an
     unwanted vertical scroll container once a real WordPress theme's
     template CSS constrains its ancestor's height — invisible locally,
     confirmed and fixed on About Clean 1.0.0→1.0.1 (Master Workflow §28).
     `overflow: clip` clips the same horizontal overflow without ever
     participating in that visible/auto pairing rule. */
  overflow-x: clip;
}

.pp-how-it-works-clean, .pp-how-it-works-clean *, .pp-how-it-works-clean ::before, .pp-how-it-works-clean ::after {
  box-sizing: border-box;
}

/* Fine paper grain over the whole page, matching the source's own
   body::after exactly (confirmed present in styles.css §02 BASE/RESET —
   a shared, global, site-wide effect, not page-specific) — scoped to
   this pack's own root instead of literally touching <body>, which Page
   Packs never do (Page Pack Spec §5). position:fixed (matching source)
   so it covers the whole viewport regardless of scroll position. */
.pp-how-it-works-clean::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;
}

.pp-how-it-works-clean h1, .pp-how-it-works-clean h2, .pp-how-it-works-clean h3, .pp-how-it-works-clean h4,
.pp-how-it-works-clean p, .pp-how-it-works-clean figure {
  margin: 0;
}
/* Real WordPress staging confirmed (this correction round): the active
   theme's own generated global-styles inline block declares
   `h1,h2,h3,h4,h5,h6 { font-family: var(--wp--preset--font-family--inter) }`
   and `:root :where(.wp-element-button, .wp-block-button__link) {
   font-family: var(--wp--preset--font-family--inter) }` — both are direct
   rules on the element itself, so they win over this pack's own
   inherited Poppins (set once, above, on the root) regardless of that
   rule's specificity: an inherited value never competes with an explicit
   rule on the same element, no matter how weak that rule is. The
   source's own styles.css sets font-family exactly once, on <body>
   (§02), with no separate heading or button override anywhere — every
   heading and every button should render Poppins, matching ordinary
   text. Restated explicitly here, on every element the theme's own CSS
   directly targets, rather than relying on inheritance to win a contest
   it structurally cannot win. */
.pp-how-it-works-clean h1, .pp-how-it-works-clean h2, .pp-how-it-works-clean h3, .pp-how-it-works-clean h4,
.pp-how-it-works-clean .wp-block-button__link, .pp-how-it-works-clean .wp-element-button {
  font-family: inherit;
}
.pp-how-it-works-clean a { color: var(--pp-ink); text-decoration: none; }
.pp-how-it-works-clean a:hover { color: var(--pp-accent); }
.pp-how-it-works-clean img { max-width: 100%; }
.pp-how-it-works-clean button { font: inherit; color: inherit; }


/* ==========================================================================
   WordPress block-gap / flow-margin protection
   --------------------------------------------------------------------------
   Every container below owns its own child spacing entirely through flex
   `gap` (or, where noted, its own explicit margin/padding) — a stray
   WordPress-injected margin-block-start on any non-first child here is
   never legitimate design spacing, so it is safe and correct to zero it
   unconditionally. Verified against a local WordPress Flow/blockGap
   simulation harness before this pack's first staging ZIP (Master
   Workflow §17).
   ========================================================================== */
.pp-how-it-works-clean > *,
.pp-how-it-works-clean .pp-page-hero > *,
.pp-how-it-works-clean .pp-tab-panel > *,
.pp-how-it-works-clean .pp-journey-tabs-section > *,
.pp-how-it-works-clean .pp-page-hero__text > *,
.pp-how-it-works-clean .pp-phase__row > *,
.pp-how-it-works-clean .pp-phase__col-text > *,
.pp-how-it-works-clean .pp-phase__head > *,
.pp-how-it-works-clean .pp-phase__step > *,
.pp-how-it-works-clean .pp-phase__step > div:last-child > *,
.pp-how-it-works-clean .pp-compare-inner > *,
.pp-how-it-works-clean .pp-compare-block__head > *,
.pp-how-it-works-clean .pp-compare-rows > *,
.pp-how-it-works-clean .pp-compare-row > *,
.pp-how-it-works-clean .pp-faq-section > *,
.pp-how-it-works-clean .pp-faq-cols > *,
.pp-how-it-works-clean .pp-faq-col > *,
.pp-how-it-works-clean .pp-faq > *,
.pp-how-it-works-clean .pp-dark-cta > *,
.pp-how-it-works-clean .pp-dark-cta__copy > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.pp-how-it-works-clean .wp-block-buttons > .wp-block-button {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ==========================================================================
   Layout helpers
   ========================================================================== */
.pp-how-it-works-clean .pp-wrap {
  max-width: var(--pp-maxw);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}

.pp-how-it-works-clean .pp-h2 { font-size: clamp(30px, 6.4vw, 58px); line-height: 1.04; letter-spacing: -.022em; font-weight: 500; }
.pp-how-it-works-clean .pp-h2--p { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; }
.pp-how-it-works-clean .pp-mw-16 { max-width: 16ch; }


/* ==========================================================================
   Scroll reveal — fade up once, the first time a block is scrolled into
   view. Toggled by IntersectionObserver in frontend.js; .pp-in-view is the
   only state it ever adds, never removed, so a reveal never re-triggers.
   ========================================================================== */
.pp-how-it-works-clean .pp-io-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease);
}
.pp-how-it-works-clean .pp-io-fade.pp-in-view { opacity: 1; transform: none; }


/* ==========================================================================
   Buttons — reproduces .btn / .btn--light / .btn--ghost / .btn--48 from
   the source (this page only ever uses the 48-height variant, so its
   38px height is folded into the base rule, matching the established
   About Clean precedent for a page with a single button size).
   ========================================================================== */
.pp-how-it-works-clean .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  padding: 0 19px;
  border: 0;
  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-how-it-works-clean .pp-btn-light .wp-block-button__link { background: var(--pp-bone); color: var(--pp-ink); }
.pp-how-it-works-clean .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-how-it-works-clean .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-60);
}
.pp-how-it-works-clean .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);
}


/* ==========================================================================
   Page hero — full-bleed photo, gradient scrim, heading anchored to the
   bottom edge. Width-based clamp() height (NOT viewport-height-based),
   confirmed via direct source audit — see the WordPress admin-bar audit
   in docs/HOW-IT-WORKS-CLEAN-PAGE-PACK-HANDOFF.md: this hero needed no
   admin-bar correction of any kind.
   ========================================================================== */
.pp-how-it-works-clean .pp-page-hero {
  position: relative;
  overflow: hidden;
  height: clamp(360px, 50vw, 420px);
}
.pp-how-it-works-clean .pp-hero-photo {
  position: absolute;
  inset: 0;
  margin: 0;
}
.pp-how-it-works-clean .pp-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Shifted well down from centre — the source crane-lift photo has more
     sky than house, so pushing the visible slice lower keeps the house
     (not just the rigging) in frame. */
  object-position: 50% 85%;
  display: block;
}
.pp-how-it-works-clean .pp-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Both hero photos on this site are bright, so the dark-scrim/light-text
     pairing is the robust choice here, matching the source exactly. */
  background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--pp-ink) 82%, transparent) 88%);
}
.pp-how-it-works-clean .pp-page-hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--pp-maxw);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 8vw, 64px) var(--pp-gutter);
  /* Proactively applied: an invisible full-height wrapper sized to the
     entire hero (not just its own visible content) silently intercepts
     clicks meant for the core/image photo beneath it, anywhere the
     wrapper's own box extends past the visible text — confirmed and
     fixed on About Clean 1.0.5→1.0.6 (Master Workflow §34) for the
     structurally identical .pp-page-hero__inner/.pp-page-hero__text
     pattern; applied here from the start rather than waiting for a
     staging report to rediscover the same bug. */
  pointer-events: none;
}
.pp-how-it-works-clean .pp-page-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 24px);
  pointer-events: auto;
}
.pp-how-it-works-clean .pp-page-hero__title {
  font-size: clamp(32px, 9vw, 76px);
  line-height: 1.06;
  letter-spacing: -.04em;
  font-weight: 500;
  max-width: 16ch;
  color: var(--pp-bone);
}
.pp-how-it-works-clean .pp-page-hero__text p {
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.65;
  font-weight: 300;
  max-width: 480px;
  color: var(--pp-bone-60);
}


/* ==========================================================================
   Journey tabs
   Reuses the .tab pill component, scoped smaller and non-wrapping so all
   three always fit on one line, even at 360px. overflow-x is a safety
   net, not the primary fix (the source's own comment) — the pills should
   never actually need to scroll. Both axes declared explicitly to avoid
   the overflow-axis-pairing quirk (Master Workflow §28).
   ========================================================================== */
.pp-how-it-works-clean .pp-journey-tabs-section { padding: clamp(20px, 5vw, 28px) 0; background: var(--pp-bone); }
.pp-how-it-works-clean .pp-journey-tabs {
  display: flex;
  gap: clamp(4px, 2vw, 10px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
}
.pp-how-it-works-clean .pp-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 30px;
  padding: 0 clamp(7px, 2.6vw, 18px);
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-ink-line);
  background: transparent;
  color: var(--pp-ink);
  font-size: clamp(10.5px, 2.6vw, 14px);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med);
}
.pp-how-it-works-clean .pp-tab[aria-selected="true"],
.pp-how-it-works-clean .pp-tab.pp-is-active {
  background: var(--pp-ink);
  border-color: var(--pp-ink);
  color: var(--pp-bone);
}
.pp-how-it-works-clean .pp-journey-tabs__rule {
  border: none;
  border-top: 1px solid var(--pp-ink-hair);
  height: 0;
  margin: 0 !important;
}

/* Tab panels — only the active one is visible, matching the source's own
   [hidden]/generic show-hide mechanism (re-implemented via a className,
   never a custom data-* attribute on a native block's own wrapper — Page
   Pack Spec §6). Panel A ships pp-is-active by default, matching the
   source's own tab A (aria-selected="true", no [hidden]). */
.pp-how-it-works-clean .pp-tab-panel { display: none; }
.pp-how-it-works-clean .pp-tab-panel.pp-is-active { display: block; }


/* ==========================================================================
   Journey phases (Tab A)
   .pp-phase--a / .pp-phase--b alternate the two backgrounds explicitly —
   only background changes; the image always sits after the text column
   (right on desktop, below on mobile) for all four phases, confirmed
   directly from the source (no row-reverse rule exists for this page).
   ========================================================================== */
.pp-how-it-works-clean .pp-phase { padding: clamp(48px, 7vw, 88px) 0; position: relative; }
.pp-how-it-works-clean .pp-phase--a { background: var(--pp-bone); }
.pp-how-it-works-clean .pp-phase--b { background: var(--pp-surface); }
.pp-how-it-works-clean .pp-phase__rule {
  border: none;
  border-top: 1px solid var(--pp-ink-hair);
  height: 0;
  margin: 0 !important;
}
.pp-how-it-works-clean .pp-phase__row { display: flex; flex-wrap: wrap; gap: clamp(20px, 8vw, 40px); }
.pp-how-it-works-clean .pp-phase__col-text { flex: 1 1 300px; min-width: 0; }
.pp-how-it-works-clean .pp-phase__head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 5vw, 32px) !important; }
.pp-how-it-works-clean .pp-phase__dot {
  width: clamp(22px, 5vw, 30px);
  height: clamp(22px, 5vw, 30px);
  flex: none;
  border-radius: var(--pp-r-pill);
  border: 1px solid var(--pp-ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 400;
  color: var(--pp-ink-56);
  background: transparent;
  transition: background var(--pp-t-slow) var(--pp-ease), border-color var(--pp-t-slow) var(--pp-ease), color var(--pp-t-slow) var(--pp-ease);
}
/* Whichever phase is centred in the viewport gets its dot filled in — see
   the scroll-linked IntersectionObserver in frontend.js. Runs at every
   width (unlike About's timeline reveal, which is mobile-only there
   because desktop uses :hover instead — this page has no hover
   equivalent, so the observer here is never disconnected). */
.pp-how-it-works-clean .pp-phase.pp-is-active .pp-phase__dot { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-bone); }
.pp-how-it-works-clean .pp-phase__title { font-size: clamp(22px, 6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; color: var(--pp-ink); }
.pp-how-it-works-clean .pp-phase__step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: clamp(18px, 4vw, 26px) !important; }
.pp-how-it-works-clean .pp-phase__step:last-child { margin-bottom: 0 !important; }
.pp-how-it-works-clean .pp-phase__step-icon { width: clamp(22px, 5vw, 30px); height: clamp(22px, 5vw, 30px); flex: none; display: flex; align-items: center; justify-content: center; color: var(--pp-accent); }
.pp-how-it-works-clean .pp-phase__step h4 { font-size: clamp(14px, 3vw, 15.5px); font-weight: 500; color: var(--pp-ink); }
.pp-how-it-works-clean .pp-phase__step p { margin-top: 4px !important; font-size: clamp(12.5px, 2.6vw, 14px); line-height: 1.55; font-weight: 300; color: var(--pp-ink-72); max-width: 40ch; }
.pp-how-it-works-clean .pp-phase__col-img { position: relative; overflow: hidden; flex: 1 1 300px; height: 220px; border-radius: var(--pp-r-xs); margin: 0; }
.pp-how-it-works-clean .pp-phase__photo { position: absolute; inset: 0; margin: 0; }
.pp-how-it-works-clean .pp-phase__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   Comparison blocks (Tabs B / C)
   ========================================================================== */
.pp-how-it-works-clean .pp-compare-block { padding: clamp(48px, 7vw, 80px) 0; background: var(--pp-surface); }
.pp-how-it-works-clean .pp-compare-inner { display: flex; flex-wrap: wrap; gap: clamp(28px, 8vw, 56px); }
.pp-how-it-works-clean .pp-compare-block__head { flex: 1 1 280px; }
.pp-how-it-works-clean .pp-compare-block__head h2 { font-size: clamp(24px, 6vw, 38px); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; color: var(--pp-ink); }
.pp-how-it-works-clean .pp-compare-block__head p { margin-top: 14px !important; font-size: clamp(13px, 2.8vw, 15px); line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); max-width: 40ch; }
.pp-how-it-works-clean .pp-compare-rows { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; }
/* No padding-top on .pp-compare-row itself — the source's own
   padding-top:16px sits INSIDE the border-top (border-box edge, before
   any padding), so putting the equivalent padding on this group would
   push the nested-first-child separator 16px away from the row's own
   true top edge (staging correction 1.0.1: this was confirmed a real,
   visible bug — a "floating"/redundant-looking separator). Reproduces
   the source's own 16px gap via the separator's own margin-bottom
   instead, matching the established VMV-card pattern (About Clean). */
.pp-how-it-works-clean .pp-compare-row__rule {
  border: none;
  border-top: 1px solid var(--pp-ink-hair);
  height: 0;
  margin: 0 0 16px 0 !important;
}
.pp-how-it-works-clean .pp-compare-row h4 { font-size: 14px; font-weight: 500; color: var(--pp-ink); }
.pp-how-it-works-clean .pp-compare-row p { margin-top: 4px !important; font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   FAQ — on the lavender (tint) band, product-page sizing (.faq--p),
   exclusive accordion (matching the source's own [data-faq-exclusive]).
   ========================================================================== */
.pp-how-it-works-clean .pp-faq-section { padding: clamp(56px, 8vw, 100px) 0; background: var(--pp-tint); }
.pp-how-it-works-clean .pp-faq-section__rule {
  border: none;
  border-top: 1px solid var(--pp-tint-line);
  height: 0;
  margin: 0 !important;
}
.pp-how-it-works-clean .pp-faq-cols {
  margin-top: clamp(24px, 3.5vw, 36px) !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(28px, 5vw, 64px);
  align-items: start;
}
.pp-how-it-works-clean .pp-faq-col { display: flex; flex-direction: column; }
.pp-how-it-works-clean .pp-faq__rule {
  border: none;
  border-top: 1px solid var(--pp-tint-line-strong);
  height: 0;
  margin: 0 !important;
}
.pp-how-it-works-clean .pp-faq-cols__rule {
  border: none;
  border-top: 1px solid var(--pp-tint-line-strong);
  height: 0;
  margin: 0 !important;
}
.pp-how-it-works-clean .pp-faq__q {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 44px 20px 0;
  margin: 0 !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: color .2s;
}
.pp-how-it-works-clean .pp-faq__q:hover { color: var(--pp-accent); }
.pp-how-it-works-clean .pp-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  color: var(--pp-ink-56);
  text-align: right;
}
.pp-how-it-works-clean .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; }
.pp-how-it-works-clean .pp-faq__a {
  padding: 0 0 22px;
  margin: 0 !important;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pp-ink-72);
  font-weight: 300;
  max-width: 52ch;
  display: none;
}
.pp-how-it-works-clean .pp-faq.pp-is-open .pp-faq__a { display: block; }


/* ==========================================================================
   Dark CTA band — shared exact layout with About Clean's own closing
   section (same source rule, .dark-cta-section, confirmed identical in
   both pages' shared styles.css); only this page's own copy/hrefs differ.
   ========================================================================== */
.pp-how-it-works-clean .pp-dark-cta-section { padding: var(--pp-sec-y-p) 0; background: var(--pp-ink); }
.pp-how-it-works-clean .pp-dark-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pp-how-it-works-clean .pp-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; }
.pp-how-it-works-clean .pp-dark-cta__copy h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-how-it-works-clean .pp-dark-cta__copy p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-how-it-works-clean .pp-dark-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.pp-how-it-works-clean .pp-dark-cta__btns .wp-block-button { width: 100%; margin: 0 !important; }
.pp-how-it-works-clean .pp-dark-cta__btns .wp-block-button__link { width: 100%; }


/* ==========================================================================
   Desktop layer — the source's single breakpoint (styles.css §15,
   @media (min-width: 900px))
   ========================================================================== */
@media (min-width: 900px) {
  /* v1.0.2: min 400 -> 480px (source: clamp(400px, 30vw, 560px)). The hero text block is
     anchored to the bottom and is a fixed ~370px tall at every desktop width (76px two-line
     title + 4-line paragraph + the 64px top/bottom padding -- the title is capped at 76px
     from 844px up, so it does NOT shrink with the viewport), but the width-based height
     falls to its 400px minimum below ~1333px wide: there the title started ABOVE the bottom
     of the fixed 74px global header (heading 32px under it at 1366, 10px at 1440). 480px
     gives the heading the same ~38px clearance below the header that this hero already has
     at 1600px (30vw = 480), for every width from 900px up to 1600px; from 1600px up the
     rule is exactly the source clamp (30vw .. 560px) again, so large desktops are
     unchanged. Not viewport-height based: the offset is identical at any viewport height. */
  .pp-how-it-works-clean .pp-page-hero { height: clamp(480px, 30vw, 560px); }
  .pp-how-it-works-clean .pp-phase__col-img { height: auto; min-height: 360px; }
  .pp-how-it-works-clean .pp-faq-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 clamp(30px, 5vw, 72px); }
  .pp-how-it-works-clean .pp-dark-cta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: auto; }
  .pp-how-it-works-clean .pp-dark-cta__btns .wp-block-button { width: auto; }
  .pp-how-it-works-clean .pp-dark-cta__btns .wp-block-button__link { width: auto; }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pp-how-it-works-clean, .pp-how-it-works-clean *, .pp-how-it-works-clean ::before, .pp-how-it-works-clean ::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}