/* =============================================================
   PK-LAYOUT — V38 Stage K polish-kit. Shared desktop grid system
   fixing the "off-kilter" finding in POLISH-SPEC.md §SHARED: ten
   different content left-edges across one page because every
   trust-kit component and every page-owned section set its own
   max-width independently.

   This file is additive — it does not touch tk-*.css or any
   page-owned CSS. Pages adopt `.shc-wrap` / `.shc-split` in a
   later integration pass; this stage only builds the kit.

   Contents:
     1. Tokens — one max-width scale, one gutter scale, one
        spacing scale (8/16/24/48/96, per DESIGN LAW).
     2. .shc-wrap — the single content-column utility that should
        replace `.wrap`, `.v39b-wrap`, and every `.tk-*-inner` /
        `.tk-*-grid` / `.tk-*-head` re-centering itself.
     3. .pk-prose — reading-column cap (72ch) for use *inside* a
        `.shc-wrap`, per the spec's inner/outer split rule (narrow
        content should narrow via an inner element, not by
        re-centering the whole section).
     4. .shc-split — the two-column composition slot (asymmetric
        7/5, and a mirrored 5/7) prescribed for every "why-cheaper"
        / hero / receipt dead-zone in the audit.
     5. .pk-section / ground-alternation utilities — section
        padding scale + the "no more than two consecutive sections
        share a ground color" cross-page rhythm rule.
     6. .pk-h2-a / .pk-h2-b — the two H2 tiers from the global
        finish-list (page-owned H2s currently run 26-42px against
        the trust-kit's own 44-64px scale on the same page).
     7. .pk-focus-ring — the missing `:focus-visible` treatment
        (finding #1) as a reusable utility for any CTA pill that
        doesn't yet define its own.
   ============================================================= */

:root {
  /* -- max-width scale -------------------------------------- */
  --pk-narrow: 680px;   /* prose / single reading column */
  --pk-wide: 1080px;    /* wide compositions inside a wrap (e.g. tk-how style split) */
  --pk-maxw: 1200px;    /* the one shared page content-wrap width (SHARED rule) */

  /* -- gutter scale -------------------------------------------- */
  --pk-gutter-sm: 24px;  /* < 780px */
  --pk-gutter-lg: 48px;  /* >= 780px */

  /* -- spacing scale (8/16/24/48/96 per DESIGN LAW) ------------- */
  --pk-space-1: 8px;
  --pk-space-2: 16px;
  --pk-space-3: 24px;
  --pk-space-4: 48px;
  --pk-space-5: 96px;
}

/* =============================================================
   SHARED CONTENT WRAP
   ============================================================= */
.shc-wrap {
  max-width: var(--pk-maxw);
  margin: 0 auto;
  padding: 0 var(--pk-gutter-sm);
}
@media (min-width: 780px) {
  .shc-wrap { padding: 0 var(--pk-gutter-lg); }
}

/* Narrower reading column, used *inside* an already-centered
   .shc-wrap (e.g. an FAQ accordion body, a closing-CTA column) —
   never re-centers on its own, so its left/right edge tracks
   whatever ancestor wrap it sits in. */
.pk-prose {
  max-width: 72ch;
}
.pk-prose--narrow { max-width: var(--pk-narrow); }
.pk-prose--wide { max-width: var(--pk-wide); }

/* =============================================================
   TWO-COLUMN COMPOSITION SLOT — where illustrations go
   Verbatim from POLISH-SPEC.md §SHARED for the base 7/5 split;
   .pk-mirror flips it to a 5/7 split (graphic-first) for cases
   like a "browse, don't fill out a form" hero where the graphic
   should lead. Breakpoint standardized to 900px across every
   composition utility in this file (the spec's inline snippet
   used 860px; Stage K aligns all pk-* utilities on one number).
   ============================================================= */
.shc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 56px;
  align-items: start;
}
.shc-split.pk-split--tight { gap: 40px; }
.shc-split.pk-split--center { align-items: center; }

/* 5/7 mirror — graphic column first and wider, content column
   narrower and second. Use when the graphic *is* the argument
   (e.g. 38c's "browse the shop" hero) rather than a supporting
   illustration next to prose. */
.shc-split.pk-mirror {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
}
.shc-split.pk-mirror > :first-child { order: 1; }
.shc-split.pk-mirror > :last-child { order: 2; }

@media (max-width: 900px) {
  /* V38 Fix Agent 3 — this collapsed the two-column split to a bare
     `1fr` for the mobile breakpoint, dropping the `minmax(0, ...)`
     safety the desktop rules above use. A bare `1fr` track resolves as
     `minmax(auto, 1fr)`, so its automatic minimum reverts to the
     content-based size of whichever child is widest (e.g. 38b's
     compare-step table/stacked-diff, walkthrough-evidence 38b D5 —
     1445px of content rendered inside a 375px viewport with the
     column stretched to match, 385% overflow). Keeping `minmax(0, ...)`
     at every breakpoint is what the desktop rule already relies on;
     mobile needs the same containment, not less of it. */
  .shc-split,
  .shc-split.pk-mirror {
    grid-template-columns: minmax(0, 1fr);
  }
  .shc-split.pk-mirror > :first-child { order: 2; }
  .shc-split.pk-mirror > :last-child { order: 1; }
}

/* =============================================================
   SECTION RHYTHM — padding scale + ground alternation
   Rule from POLISH-SPEC.md: no more than two consecutive
   sections may share a ground color. Apply one of the three
   ground classes per section instead of leaving every section on
   the page's default background.
   ============================================================= */
.pk-section {
  padding: clamp(48px, 6vw, var(--pk-space-5)) 0;
}
.pk-section--tight { padding: var(--pk-space-4) 0; }
.pk-section--loose { padding: var(--pk-space-5) 0; }

.pk-ground-cream { background: var(--cream); }
.pk-ground-tint   { background: var(--blush-2); }
.pk-ground-navy   { background: var(--ink); color: var(--cream); }
.pk-ground-navy .pk-h2-a,
.pk-ground-navy .pk-h2-b { color: var(--cream); }

/* =============================================================
   H2 TIERS — global finish-list §2. Page-owned sections should
   pick one of these two instead of inventing their own H2 size.
   Tier A = primary section (why-cheaper, quiz, receipt).
   Tier B = secondary/transitional (loading, honest-path, facts).
   ============================================================= */
.pk-h2-a {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.pk-h2-b {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 14px;
}
.pk-h2-a em, .pk-h2-b em { font-style: italic; color: var(--pink); font-weight: 500; }

/* =============================================================
   FOCUS RING — global finish-list §1. `.hero-night .cta`,
   `.terminal-cta`, `.tier-cta`, `.sheet-cta`, `.v39b-hero-cta`,
   `.honest-path .cta`, `.btn` all lack :focus-visible. Attach
   this utility class to any of them (or `@extend`-style compose
   it into their own selector) rather than inventing new motion —
   matches the ring already used on `.tk-p-card:focus-visible`.
   ============================================================= */
.pk-focus-ring:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .shc-split, .pk-section { scroll-behavior: auto; }
}