/* ==========================================================================
   MyCabin Aftercare — Page Pack CSS
   Scoped entirely under .pp-aftercare (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 the rules
   this one page's markup uses (tokens, type, buttons, the PRIVATE VISITS
   hero/split/media pieces the page reuses, the AFTERCARE rows/steps/form,
   FAQ, closing band and scroll-reveal).

   01  Tokens (scoped custom properties, not :root)
   02  Base resets (scoped)
   03  Flow-layout margin neutralization (generated list — see note)
   04  Layout helpers, type, links, tick marks
   05  Buttons
   06  Hero
   07  Section scaffolding, split layout, intro + note
   08  Eligibility rows
   09  "What the inspection covers"
   10  Image break
   11  How to request (steps)
   12  After the visit (list)
   13  Request form
   14  FAQ
   15  Closing band
   16  Scroll reveal (io-fade)
   17  Desktop layer (min-width: 640px / 900px)
   18  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  TOKENS — scoped to the root, never :root, so nothing leaks to the rest
   of the WordPress site.
   ========================================================================== */

.pp-aftercare {
  --pp-ink:    #27272C;
  --pp-bone:   #FFFFFF;
  --pp-beige:  #FBF6F3;
  --pp-wood:   #EDCFB7;
  --pp-accent: #917EBC;
  --pp-accent-soft: #CDCBFF;
  --pp-tint:   #E6E6FF;
  --pp-surface: var(--pp-beige);

  --pp-stone:    color-mix(in oklab, var(--pp-ink) 11%, var(--pp-bone));
  --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-ink-28: color-mix(in oklab, var(--pp-ink) 28%, transparent);
  --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, 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 (same assumption as
     the other Page Packs). Flagged in the handoff 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-r-xs:   7px;
  --pp-ease:   cubic-bezier(.22, 1, .36, 1);
  --pp-t-med:  .25s;

  position: relative;
  background: var(--pp-bone);
  color: var(--pp-ink);
  font-family: "Poppins", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}


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

.pp-aftercare, .pp-aftercare *, .pp-aftercare *::before, .pp-aftercare *::after { box-sizing: border-box; }
.pp-aftercare h1, .pp-aftercare h2, .pp-aftercare h3, .pp-aftercare p {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.pp-aftercare a { color: var(--pp-ink); text-decoration: none; }
.pp-aftercare a:hover { color: var(--pp-accent); }
.pp-aftercare em { font-style: normal; }
.pp-aftercare img { max-width: 100%; display: block; }
.pp-aftercare figure { margin: 0; }
.pp-aftercare button, .pp-aftercare input, .pp-aftercare select, .pp-aftercare textarea { font: inherit; }
.pp-aftercare :focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; border-radius: 4px; }

/* WordPress core pads every `.wp-block-group.has-background` (1.25em 2.375em); the design's sections and cards set their own padding below. */
.pp-aftercare .has-background { padding: 0; }

/* The site theme balances every heading (text-wrap: balance) and lets text break anywhere (overflow-wrap: break-word, hyphens: none); the design
   inherits `text-wrap: pretty` from the page, so line breaks differ without this. */
.pp-aftercare :is(h1, h2, h3, h4, p, li, .wp-block-heading) { text-wrap: pretty; overflow-wrap: normal; hyphens: manual; }


/* ==========================================================================
   03  FLOW-LAYOUT MARGIN NEUTRALIZATION
   --------------------------------------------------------------------------
   Every container below is a plain core/group (or core/buttons) with no
   explicit `layout` attribute in content.html, so WordPress renders it with
   its default "Flow" layout and generates `margin-block-start:
   <blockGap>` on every child after the first — sized from the ACTIVE
   THEME's spacing.blockGap, whether or not this pack asked for a gap. Each
   container below owns its own child spacing (grid / flex / explicit
   margins further down), so that generated margin is neutralized on
   exactly its own direct children — never a sitewide reset, and never the
   spacing INSIDE a card (each nested container is neutralized separately,
   and every wanted margin is re-declared below with !important at equal
   specificity, later in the file). `!important` mirrors WordPress's own
   generated rule, which has no :where() wrapper.
   No core/columns are used, so no gap/row-gap inheritance applies.
   (Reference: docs/MYCABIN-GUTENBERG-REFERENCE-IMPLEMENTATION.md §5,
   docs/HOMEPAGE-WORDPRESS-FLOW-MARGIN-FIX-HANDOFF.md.)
   ========================================================================== */

.pp-aftercare > *,
.pp-aftercare .pp-wrap > *,
.pp-aftercare .pp-ac-card > *,
.pp-aftercare .pp-ac-row > *,
.pp-aftercare .pp-ac-row__body > *,
.pp-aftercare .pp-ac-rows > *,
.pp-aftercare .pp-after > *,
.pp-aftercare .pp-break > *,
.pp-aftercare .pp-break__body > *,
.pp-aftercare .pp-cta > *,
.pp-aftercare .pp-cta__btns > *,
.pp-aftercare .pp-cta__copy > *,
.pp-aftercare .pp-cta__wrap > *,
.pp-aftercare .pp-expect > *,
.pp-aftercare .pp-expect__body > *,
.pp-aftercare .pp-expect__item > *,
.pp-aftercare .pp-faq > *,
.pp-aftercare .pp-faq-list > *,
.pp-aftercare .pp-faq-sec > *,
.pp-aftercare .pp-faq-split > *,
.pp-aftercare .pp-faq-split__intro > *,
.pp-aftercare .pp-hero > *,
.pp-aftercare .pp-hero__btns > *,
.pp-aftercare .pp-hero__copy > *,
.pp-aftercare .pp-hero__grid > *,
.pp-aftercare .pp-hero__media > *,
.pp-aftercare .pp-house > *,
.pp-aftercare .pp-house__copy > *,
.pp-aftercare .pp-house__media > *,
.pp-aftercare .pp-icon > *,
.pp-aftercare .pp-intro > *,
.pp-aftercare .pp-intro__media > *,
.pp-aftercare .pp-seq > *,
.pp-aftercare .pp-seq-step > *,
.pp-aftercare .pp-seq-step__body > *,
.pp-aftercare .pp-seq-step__rail > *,
.pp-aftercare .pp-split > *,
.pp-aftercare .pp-split__intro > *,
.pp-aftercare .pp-sec > *,
.pp-aftercare .pp-io-fade > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ==========================================================================
   04  LAYOUT HELPERS, TYPE, LINKS, TICK MARKS
   ========================================================================== */

.pp-aftercare .pp-wrap { max-width: var(--pp-maxw); margin-inline: auto; padding-inline: var(--pp-gutter); }

.pp-aftercare .pp-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-56); }
.pp-aftercare .pp-title { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; letter-spacing: -.022em; font-weight: 500; }
.pp-aftercare .pp-title--faq { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; }
.pp-aftercare .pp-mw-16 { max-width: 16ch; }
.pp-aftercare .pp-mw-20 { max-width: 20ch; }
.pp-aftercare .pp-sub { margin-top: 16px !important; max-width: 50ch; font-size: 15.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); }

/* Inline text links on body copy (source .zc-a) */
.pp-aftercare .pp-ac-note a, .pp-aftercare .pp-ac-row__desc a, .pp-aftercare .pp-ac-list a, .pp-aftercare .pp-faq__a a, .pp-aftercare .pp-faq-split__lede a {
  color: var(--pp-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--pp-ink-28);
  text-underline-offset: 3px; transition: color var(--pp-t-med), text-decoration-color var(--pp-t-med);
}
.pp-aftercare .pp-ac-note a:hover, .pp-aftercare .pp-ac-row__desc a:hover, .pp-aftercare .pp-ac-list a:hover, .pp-aftercare .pp-faq__a a:hover, .pp-aftercare .pp-faq-split__lede a:hover {
  color: var(--pp-accent); text-decoration-color: currentColor;
}

/* "link-arrow": the arrow is drawn by CSS so the paragraph holds only the editable link text. */
.pp-aftercare .pp-link-arrow { font-size: 16px; font-weight: 500; line-height: normal; }
.pp-aftercare .pp-link-arrow a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--pp-ink); }
.pp-aftercare .pp-link-arrow a:hover { color: var(--pp-accent); }
.pp-aftercare .pp-link-arrow a::after {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* The hero / form-side "warranty rules" link: 14px, 26px above (source .ac-hero__link on the anchor itself) */
.pp-aftercare .pp-hero__link a { margin-top: 26px; font-size: 14px; }

/* Round icon chip (the "covers" list) */
.pp-aftercare .pp-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--pp-tint); color: var(--pp-accent);
}
.pp-aftercare .pp-icon svg { display: block; flex: none; }

/* Check-tick drawn by CSS (list items hold only text) */
.pp-aftercare .pp-checks { list-style: none; margin: 24px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.pp-aftercare .pp-checks li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 14px; line-height: normal; color: var(--pp-ink-72); }
.pp-aftercare .pp-checks li::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--pp-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


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

.pp-aftercare .wp-block-buttons { margin: 0; }
.pp-aftercare .wp-block-button .wp-block-button__link.wp-element-button {
  position: relative;
  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-family: inherit;
  text-align: start;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transform: scale(1);
  transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med), transform .15s var(--pp-ease);
}
.pp-aftercare .wp-block-button .wp-block-button__link.wp-element-button:active { transform: scale(.96); }
@media (hover: none) and (pointer: coarse) {
  .pp-aftercare .wp-block-button .wp-block-button__link.wp-element-button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* Native ink / light colours are inline (editable in the sidebar); the hover
   states need !important to beat that inline style. */
.pp-aftercare .pp-btn--ink .wp-block-button__link.wp-element-button:hover { background: var(--pp-accent) !important; color: var(--pp-bone) !important; }
.pp-aftercare .pp-btn--light .wp-block-button__link.wp-element-button:hover { background: var(--pp-accent-soft) !important; color: var(--pp-ink) !important; }
.pp-aftercare .pp-btn--outline .wp-block-button__link.wp-element-button { background: transparent; color: var(--pp-ink); border: 1px solid var(--pp-ink); }
.pp-aftercare .pp-btn--outline .wp-block-button__link.wp-element-button:hover { background: var(--pp-surface); color: var(--pp-ink); }
.pp-aftercare .pp-btn--ghost .wp-block-button__link.wp-element-button {
  background: color-mix(in oklab, var(--pp-ink) 30%, transparent);
  color: var(--pp-bone);
  border: 1px solid var(--pp-bone-60);
}
.pp-aftercare .pp-btn--ghost .wp-block-button__link.wp-element-button:hover {
  background: color-mix(in oklab, var(--pp-bone) 14%, transparent);
  border-color: var(--pp-bone);
  color: var(--pp-bone);
}


/* ==========================================================================
   06  HERO
   Background colour (Beige) is a native block attribute.
   ========================================================================== */

.pp-aftercare .pp-hero { padding: calc(var(--pp-hdr-h) + clamp(28px, 6vw, 48px)) 0 clamp(36px, 5vw, 64px); }
.pp-aftercare .pp-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.pp-aftercare .pp-hero__copy { min-width: 0; }
.pp-aftercare .pp-h1 { margin-top: 10px !important; max-width: 16ch; font-size: clamp(34px, 8.6vw, 46px); line-height: 1.06; letter-spacing: -.026em; font-weight: 500; }
.pp-aftercare .pp-h1 em { display: block; margin-top: 2px; color: var(--pp-ink-56); }
/* font-size comes from the native "Body L" preset (clamp(16px, 2vw, 20px) — exact match to the source .lead) */
.pp-aftercare .pp-lead { margin-top: 20px !important; max-width: 48ch; line-height: 1.55; color: var(--pp-ink-72); font-weight: 300; }
.pp-aftercare .pp-hero__btns { margin-top: 26px !important; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.pp-aftercare .pp-hero__btns .wp-block-button, .pp-aftercare .pp-hero__btns .wp-block-button__link { width: 100%; }
.pp-aftercare .pp-hero__media { min-width: 0; }
.pp-aftercare .pp-hero__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pp-r-card); background: var(--pp-wood); }


/* ==========================================================================
   07  SECTION SCAFFOLDING, SPLIT LAYOUT, INTRO + NOTE
   Section backgrounds and vertical padding (Section — Compact preset) are
   native block attributes; only borders and the scroll offset live here.
   ========================================================================== */

/* The source stacks html's scroll-padding-top (hdr + 12px) on each target's own scroll-margin-top (hdr + 8px); the sum is kept so in-page anchors land where the design lands them. */
.pp-aftercare .pp-sec { scroll-margin-top: calc(var(--pp-hdr-h) * 2 + 20px); }
.pp-aftercare .pp-faq-sec { scroll-margin-top: calc(var(--pp-hdr-h) + 12px); }
.pp-aftercare .pp-sec--tint { border-block: 1px solid var(--pp-tint-line); }

.pp-aftercare .pp-split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); }
.pp-aftercare .pp-split__intro { min-width: 0; }
.pp-aftercare .pp-split__intro .pp-sub { max-width: 40ch; }

.pp-aftercare .pp-house { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.pp-aftercare .pp-house__media { min-width: 0; }
.pp-aftercare .pp-house__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pp-r-card); background: var(--pp-wood); }
.pp-aftercare .pp-house__copy { min-width: 0; }
.pp-aftercare .pp-title--house { margin-top: 10px !important; }
/* The intro photo is hidden below 900px, as in the design */
.pp-aftercare .pp-intro__media { display: none; }
.pp-aftercare .pp-ac-note { margin-top: 22px !important; max-width: 50ch; padding: 16px 18px; background: var(--pp-bone); border-radius: var(--pp-r-card); font-size: 13.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   08  ELIGIBILITY ROWS
   ========================================================================== */

.pp-aftercare .pp-ac-rows { min-width: 0; border-top: 1px solid var(--pp-tint-line-strong); }
.pp-aftercare .pp-ac-row { display: grid; grid-template-columns: 56px 1fr; gap: clamp(12px, 2.4vw, 28px); align-items: baseline; padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--pp-tint-line-strong); }
.pp-aftercare .pp-ac-row__num { font-family: Poppins, sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 300; line-height: normal; color: var(--pp-accent); }
.pp-aftercare .pp-ac-row__title { font-size: clamp(18px, 1.8vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: normal; }
.pp-aftercare .pp-ac-row__desc { margin-top: 6px !important; max-width: 56ch; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   09  "WHAT THE INSPECTION COVERS"
   ========================================================================== */

.pp-aftercare .pp-expect { display: grid; grid-template-columns: 1fr; min-width: 0; }
.pp-aftercare .pp-expect__item { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--pp-ink-line); min-width: 0; }
.pp-aftercare .pp-expect__body { min-width: 0; }
.pp-aftercare .pp-expect__h { padding-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.pp-aftercare .pp-expect__p { margin-top: 8px !important; max-width: 40ch; font-size: 14.5px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   10  IMAGE BREAK
   Background colour (Ink) is a native block attribute; the photo is an
   ordinary Image block laid under the copy, the fade is a decorative layer.
   ========================================================================== */

.pp-aftercare .pp-break {
  position: relative; overflow: hidden; border-radius: 0;
  min-height: clamp(280px, 32vw, 380px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pp-aftercare .pp-break__bg { position: absolute; inset: 0; margin: 0; }
.pp-aftercare .pp-break__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-aftercare .pp-break::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--pp-ink) 72%, transparent) 100%);
}
.pp-aftercare .pp-break__body { position: relative; z-index: 3; padding: clamp(20px, 3vw, 30px); }
.pp-aftercare .pp-break__h { max-width: 22ch; color: var(--pp-bone); font-size: clamp(20px, 2.8vw, 30px); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }


/* ==========================================================================
   11  HOW TO REQUEST (numbered steps)
   ========================================================================== */

.pp-aftercare .pp-title--apply { margin-top: 10px !important; }
.pp-aftercare .pp-seq { margin-top: clamp(32px, 3.6vw, 52px) !important; display: grid; grid-template-columns: 1fr; gap: 0; }
.pp-aftercare .pp-seq-step { display: flex; gap: 16px; }
.pp-aftercare .pp-seq-step__rail { flex: none; display: flex; flex-direction: column; align-items: center; }
.pp-aftercare .pp-seq-step__num {
  font-family: Poppins, sans-serif;
  flex: none; width: 38px; height: 38px; border-radius: var(--pp-r-pill); background: var(--pp-ink); color: var(--pp-bone);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; line-height: normal;
}
/* connecting line (decorative); the last step has none */
.pp-aftercare .pp-seq-step__rail::after { content: ""; width: 1px; flex: 1 1 auto; min-height: 24px; margin-top: 6px; background: var(--pp-stone); }
.pp-aftercare .pp-seq-step:last-child .pp-seq-step__rail::after { display: none; }
.pp-aftercare .pp-seq-step__body { min-width: 0; }
.pp-aftercare .pp-seq-step__title { font-size: 16.5px; font-weight: 500; letter-spacing: -.015em; line-height: normal; }
.pp-aftercare .pp-seq-step__desc { margin: 8px 0 24px !important; font-size: 14px; line-height: 1.65; font-weight: 300; color: var(--pp-ink-72); }


/* ==========================================================================
   12  AFTER THE VISIT (list)
   ========================================================================== */

.pp-aftercare .pp-after .pp-house__img img { aspect-ratio: 4 / 3; }
.pp-aftercare .pp-ac-list { list-style: none; margin: 24px 0 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.pp-aftercare .pp-ac-list li { position: relative; margin: 0; padding: 0 0 0 28px; font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }
.pp-aftercare .pp-ac-list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; background: var(--pp-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.5 4.5L19 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


/* ==========================================================================
   13  REQUEST FORM
   The tabbed form is one Custom HTML block (WordPress has no native form
   block); frontend.js drives the tabs, the claim-only fields and the
   thank-you state. Card background (White) is a native block attribute.
   ========================================================================== */

.pp-aftercare .pp-title.pp-ac-title { margin-top: 10px !important; }
.pp-aftercare .pp-ac-card { min-width: 0; border-radius: var(--pp-r-lg); box-shadow: 0 12px 40px color-mix(in oklab, var(--pp-ink) 8%, transparent); padding: clamp(22px, 3vw, 36px); }
.pp-aftercare .pp-ac-widget { min-width: 0; }
.pp-aftercare .pp-ac-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--pp-surface); border: 1px solid var(--pp-stone); border-radius: var(--pp-r-md); }
.pp-aftercare .pp-ac-seg__tab { min-height: 44px; padding: 8px; border: 0; border-radius: var(--pp-r-xs); background: transparent; color: var(--pp-ink-72); font: 500 13.5px "Poppins", sans-serif; cursor: pointer; transition: background var(--pp-t-med), color var(--pp-t-med); }
.pp-aftercare .pp-ac-seg__tab[aria-selected="true"] { background: var(--pp-ink); color: var(--pp-bone); }
.pp-aftercare .pp-ac-seg__tab:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-aftercare .pp-ac-form { margin-top: 22px; }
.pp-aftercare .pp-ac-form[hidden], .pp-aftercare .pp-ac-done[hidden], .pp-aftercare .pp-ac-claim-only[hidden], .pp-aftercare .pp-ac-upload[hidden] { display: none !important; }
.pp-aftercare .pp-ac-form__step { margin: 26px 0 14px; font-size: 15px; font-weight: 500; }
.pp-aftercare .pp-ac-form__step:first-child { margin-top: 0; }
.pp-aftercare .pp-ac-form__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* v1.0.3 — the label-to-control spacing lives on the label, NOT in a flex `gap` on the wrapper. A `gap` is added once per child, so a node that a password manager
   injects next to a focused input on its own (NordPass <nordpass-icon>, 1Password, Dashlane, LastPass…; 0px tall, in normal flow) added a third child and therefore
   a second 6px gap: the field grew 6px on focus and everything below moved down (and back up on blur). With the margin on the label the wrapper's height is
   label + 6px + control however many zero-height nodes a browser extension puts beside them. Default layout is pixel-identical to v1.0.2. */
.pp-aftercare .pp-field { display: flex; flex-direction: column; min-width: 0; }
.pp-aftercare .pp-field > label:not(.pp-sr) { margin-bottom: 6px; }
.pp-aftercare .pp-field label { font-size: 11.5px; color: var(--pp-ink-56); }
.pp-aftercare .pp-field input, .pp-aftercare .pp-field select, .pp-aftercare .pp-field textarea {
  width: 100%; font: 400 14px "Poppins", sans-serif; color: var(--pp-ink); background: var(--pp-surface);
  border: 1px solid var(--pp-ink-hair); border-radius: var(--pp-r-xs); padding: 12px 14px; outline: none; box-shadow: none;
}
.pp-aftercare .pp-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2327272C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; margin-bottom: 10px;
}
.pp-aftercare .pp-field select option { color: var(--pp-ink); }
.pp-aftercare .pp-field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.pp-aftercare .pp-field input:focus-visible, .pp-aftercare .pp-field select:focus-visible, .pp-aftercare .pp-field textarea:focus-visible { outline: 2px solid var(--pp-accent-soft); outline-offset: 2px; }
.pp-aftercare .pp-field input::placeholder, .pp-aftercare .pp-field textarea::placeholder { color: var(--pp-ink-56); }
.pp-aftercare .pp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-aftercare .pp-ac-upload { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px; border: 1px dashed var(--pp-accent-soft); border-radius: var(--pp-r-xs); background: var(--pp-surface); cursor: pointer; font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--pp-ink-72); }
.pp-aftercare .pp-ac-upload svg { flex: none; color: var(--pp-accent); }
.pp-aftercare .pp-ac-upload strong { font-weight: 500; color: var(--pp-ink); }
.pp-aftercare .pp-ac-upload input { display: none; }
.pp-aftercare .pp-consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 20px; font-size: 11.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }
.pp-aftercare .pp-consent input { margin-top: 2px; flex: none; accent-color: var(--pp-accent); }
.pp-aftercare .pp-consent a { color: var(--pp-ink); text-decoration: underline; }
.pp-aftercare .pp-ac-submit {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px; padding: 0 21px;
  border: 0; border-radius: var(--pp-r-pill); background: var(--pp-ink); color: var(--pp-bone);
  font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transform: scale(1);
  transition: background var(--pp-t-med), color var(--pp-t-med), transform .15s var(--pp-ease);
}
.pp-aftercare .pp-ac-submit:hover { background: var(--pp-accent); color: var(--pp-bone); }
.pp-aftercare .pp-ac-submit:active { transform: scale(.96); }
.pp-aftercare .pp-ac-form__foot { margin: 12px 0 0; font-size: 12px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-56); }
/* v1.0.2 — real submission (MyCabin Leads). Both additions are invisible until needed: the honeypot is a spam trap no visitor sees or tabs to; the status line is hidden until the plugin reports an error. */
.pp-aftercare .mcl-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pp-aftercare .pp-ac-form__msg { margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.pp-aftercare .pp-ac-form__msg[hidden] { display: none; }
.pp-aftercare .pp-ac-form__msg[data-mcl-state="error"] { color: #b3261e; }
.pp-aftercare .pp-ac-submit:disabled { opacity: .6; cursor: default; }
.pp-aftercare .pp-ac-done { padding: clamp(28px, 4vw, 56px) 0 12px; }
.pp-aftercare .pp-ac-done__icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pp-tint); color: var(--pp-accent); }
.pp-aftercare .pp-ac-done__title { margin: 16px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.pp-aftercare .pp-ac-done__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.7; font-weight: 300; color: var(--pp-ink-72); max-width: 46ch; }
.pp-aftercare .pp-ac-done__reset { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 0; border: 0; background: none; color: var(--pp-ink); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pp-aftercare .pp-ac-done__reset:hover { color: var(--pp-accent); }


/* ==========================================================================
   14  FAQ (frontend.js: role/aria + single-open within the FAQ section)
   ========================================================================== */

.pp-aftercare .pp-faq-sec { border-top: 1px solid var(--pp-stone); }
.pp-aftercare .pp-faq-split { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); align-items: start; }
.pp-aftercare .pp-faq-split__intro { max-width: 52ch; }
.pp-aftercare .pp-faq-split__lede { margin-top: 14px !important; max-width: 46ch; font-size: 15.5px; line-height: 1.6; font-weight: 300; color: var(--pp-ink-72); }
.pp-aftercare .pp-faq-list { min-width: 0; border-bottom: 1px solid var(--pp-ink-line); }
.pp-aftercare .pp-faq { border-top: 1px solid var(--pp-ink-line); }
.pp-aftercare .pp-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0;
  font-size: 16px; font-weight: 500; letter-spacing: normal; line-height: normal; text-align: left; cursor: pointer; transition: color .2s;
}
.pp-aftercare .pp-faq__q:hover { color: var(--pp-accent); }
.pp-aftercare .pp-faq__q::after { content: "+"; flex: 0 0 22px; font-size: 20px; line-height: 1; font-weight: 300; text-align: right; color: var(--pp-ink-56); }
.pp-aftercare .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; }
.pp-aftercare .pp-faq__a { padding: 0 0 22px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--pp-ink-72); font-weight: 300; }
.pp-aftercare.pp-js .pp-faq:not(.pp-is-open) .pp-faq__a { display: none; }


/* ==========================================================================
   15  CLOSING BAND
   Background colour (Ink) and the section padding (Section — Compact) are
   native block attributes.
   ========================================================================== */

.pp-aftercare .pp-cta__wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pp-aftercare .pp-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; }
.pp-aftercare .pp-cta__h { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-bone); }
.pp-aftercare .pp-cta__p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); }
.pp-aftercare .pp-cta__btns { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%; margin: 0 !important; }
.pp-aftercare .pp-cta__btns .wp-block-button, .pp-aftercare .pp-cta__btns .wp-block-button__link { width: 100%; }


/* ==========================================================================
   16  SCROLL REVEAL (frontend.js adds .pp-in-view; the hidden start state
   applies only once JS has flagged the root with .pp-js)
   ========================================================================== */

.pp-aftercare.pp-js .pp-io-fade { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease); }
.pp-aftercare.pp-js .pp-io-fade.pp-in-view { opacity: 1; transform: none; }
/* v1.0.3 — set by frontend.js when keyboard focus reaches a not-yet-revealed section: show it at once, no entrance animation under the focus ring. */
.pp-aftercare.pp-js .pp-io-fade.pp-in-view.pp-no-motion { transition: none; }


/* ==========================================================================
   17  DESKTOP LAYER — the source's own 640px and 900px breakpoints
   ========================================================================== */

@media (min-width: 640px) {
  .pp-aftercare .pp-hero__btns { flex-direction: row; }
  .pp-aftercare .pp-hero__btns .wp-block-button, .pp-aftercare .pp-hero__btns .wp-block-button__link { width: auto; }
  .pp-aftercare .pp-expect { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 48px); }
  .pp-aftercare .pp-ac-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-aftercare .pp-ac-span { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .pp-aftercare .pp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .pp-aftercare .pp-hero__img img { aspect-ratio: 5 / 5.4; }
  .pp-aftercare .pp-split { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); }
  .pp-aftercare .pp-house { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .pp-aftercare .pp-house__img img { aspect-ratio: 4 / 3.6; }
  .pp-aftercare .pp-after .pp-house__img img { aspect-ratio: 4 / 3; }
  .pp-aftercare .pp-intro__media { display: block; }
  .pp-aftercare .pp-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .pp-aftercare .pp-faq-split { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); }
  .pp-aftercare .pp-cta__btns { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .pp-aftercare .pp-cta__btns .wp-block-button { width: auto; }
  /* grid items stretch to their (equal) cell, as the source's blockified .btn does */
  .pp-aftercare .pp-cta__btns .wp-block-button__link { display: flex; width: 100%; }
}


/* ==========================================================================
   18  REDUCED MOTION
   ========================================================================== */

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