/*
  Executor's Kit funnel styles — front page only (see functions.php).
  The evidence-led layout uses verified product counts, authored product
  mockups, and the AA-corrected theme.json palette. It keeps the ordered
  ledger visual system while replacing the former CSS book theater with
  content-accurate imagery and a responsive five-position product story.
*/

:root {
  --ek-max: 1240px;
  --ek-header: 74px;
  --ek-shadow-paper: var(--wp--custom--shadow--artifact-lift, 0 24px 58px rgba(23,32,42,.14));
  --ek-shadow-decision: var(--wp--custom--shadow--decision-lift, 0 32px 75px rgba(80,50,12,.18));
  --ek-ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- Global chrome (header, footer, skip link, overlays) ---------- */
/* These load only on the front page (functions.php), so scoping is for
   clarity, not leak prevention — the file itself never reaches interior
   pages sharing the same header/footer parts. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ek-header) + 24px); }
body::selection { background: var(--wp--preset--color--decision-amber); color: var(--wp--preset--color--authority-ink); }

.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px;
  padding: .75rem 1rem;
  background: var(--wp--preset--color--authority-ink);
  color: var(--wp--preset--color--paper-surface);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Reading progress — decorative only, never represents checkout/payment/task status. */
.ek-progress {
  position: fixed; z-index: 901; top: 0; left: 0; width: 100%; height: 3px;
  background: transparent; pointer-events: none;
}
.ek-progress span {
  display: block; width: 100%; height: 100%;
  background: var(--wp--preset--color--decision-amber);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

.ek-buybar {
  position: fixed; z-index: 850; right: 1rem; bottom: 1rem; left: 1rem; min-height: 54px;
  border-radius: var(--wp--custom--radius--control, 6px);
  display: none; align-items: center; justify-content: center;
  background: var(--wp--preset--color--authority-ink);
  color: var(--wp--preset--color--paper-surface);
  box-shadow: 0 16px 36px rgba(23,32,42,.25);
  text-decoration: none; font-size: .82rem; font-weight: 800;
  transform: translateY(calc(100% + 2rem));
  transition: transform .25s var(--ek-ease);
}
.ek-buybar.is-visible { transform: translateY(0); }

/* ---------- Funnel content (inside main.ek-funnel) ---------- */

.ek-funnel { overflow: hidden; }
.ek-funnel .wp-block-post-content > .wp-block-group {
  width: 100%;
  max-width: none !important;
}
.ek-funnel section { position: relative; }
.ek-funnel .section-inner { width: min(calc(100% - 3rem), var(--ek-max)); margin: auto; padding: clamp(5.5rem,10vw,9rem) 0; }
.ek-funnel .section-lead { max-width: 60ch; font-size: clamp(1.05rem,1.5vw,1.25rem); }

.ek-funnel .button {
  display: inline-flex; min-height: 54px; align-items: center; justify-content: center;
  padding: .85rem 1.55rem;
  border-radius: var(--wp--custom--radius--control, 6px);
  border: 1px solid var(--wp--preset--color--authority-ink);
  background: var(--wp--preset--color--authority-ink);
  color: var(--wp--preset--color--paper-surface);
  text-decoration: none; font-size: .84rem; font-weight: 800; letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, transform .2s var(--ek-ease), box-shadow .2s ease;
}
.ek-funnel .button:hover {
  background: var(--wp--preset--color--completion-green);
  border-color: var(--wp--preset--color--completion-green);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(23,32,42,.14);
}
.ek-funnel .button:active { transform: translateY(0); }
.ek-funnel .text-link {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 800;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.ek-funnel .text-link::after {
  content: '→'; font-family: var(--wp--preset--font-family--working-sans);
  transition: transform .2s var(--ek-ease);
}
.ek-funnel .text-link:hover::after { transform: translateX(4px); }

/* Hero */
.ek-funnel .hero { min-height: auto; padding-top: 0; display: flex; align-items: stretch; background: var(--wp--preset--color--paper-ground); }
.ek-funnel .hero-inner {
  width: min(calc(100% - 3rem), var(--ek-max)); margin: auto; padding: clamp(1.5rem,3vw,2.5rem) 0 clamp(3.5rem,6vw,5rem);
  display: grid; grid-template-columns: minmax(0,.93fr) minmax(440px,1.07fr); align-items: center; gap: clamp(2.5rem,5vw,5rem);
}
.ek-funnel .hero-copy { position: relative; z-index: 4; }
.ek-funnel .hero-copy::before { content: ''; display: block; width: 76px; height: 4px; margin-bottom: 1rem; background: var(--wp--preset--color--decision-amber); }
.ek-funnel .hero h1 { max-width: 13ch; margin-bottom: 1.2rem; font-size: clamp(2.5rem,4vw,3.5rem); line-height: 1.03; letter-spacing: -.03em; }
.ek-funnel .hero-copy > p { max-width: 56ch; margin-bottom: 1.8rem; font-size: clamp(1.05rem,1.5vw,1.27rem); }
.ek-funnel .hero-actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.ek-funnel .proof-line { margin: .95rem 0 0 !important; color: var(--wp--preset--color--quiet-ink) !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .02em; }
.ek-funnel .hero-proof { margin: 2.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--wp--preset--color--paper-rule); display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; list-style: none; }
.ek-funnel .hero-proof li { color: var(--wp--preset--color--working-ink); font-size: .75rem; line-height: 1.35; }
.ek-funnel .hero-proof strong { display: block; margin-bottom: .15rem; color: var(--wp--preset--color--authority-ink); font-family: var(--wp--preset--font-family--display-serif); font-size: 1.4rem; letter-spacing: -.03em; }

/* Product evidence uses authored, content-accurate imagery rather than a
   decorative CSS model. Intrinsic dimensions prevent layout shift. */
.ek-funnel .hero-visual { min-width: 0; }
.ek-funnel .ek-product-mockup { display: block; margin: 0; }
.ek-funnel .ek-product-mockup img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(23,32,42,.12);
  border-radius: var(--wp--custom--radius--panel, 10px);
  background: var(--wp--preset--color--paper-surface);
  box-shadow: var(--ek-shadow-paper);
}
/* No 3/2 rule for --hero any more: the hero is the CSS-plane book below, whose
   front is a portrait 8.5x11 cover. A leftover landscape ratio here would crop
   the cover the moment anyone removed the book rules. */
.ek-funnel .ek-mockup--checklist img { aspect-ratio: 5 / 4; object-fit: cover; }
.ek-funnel .ek-mockup--records img,
.ek-funnel .ek-mockup--letters img { aspect-ratio: 4 / 3; object-fit: cover; }
.ek-funnel .ek-mockup--checkout img { aspect-ratio: 1; object-fit: contain; box-shadow: none; }

/* ---------- Product Theater: CSS-plane book ----------
   DESIGN.md specifies this component as "built from CSS planes with a distinct
   front, spine, page block, and back cover", with truthful labels and document
   proportions. So the depth is not a styling choice: the printed interior is
   132 pages, which the cover generator computes as a 0.297in spine against an
   8.5in trim — 3.5% of the width. --ek-book-d holds that ratio. Do not thicken
   it to look more substantial; that would be depicting a book we do not sell.

   The front and spine are real crops of the actual print cover, not artwork
   invented for the web.

   Tilt is progressive enhancement for fine pointers only. Touch and
   reduced-motion get the stable pose, per DESIGN.md. */
/* 430px made the book 556px tall and pushed the hero CTA below the fold on a
   900px-high laptop. A portrait cover is inherently taller than the 3:2 photo
   it replaced, so the width is set from the height it produces, not from the
   column it sits in. */
.ek-funnel .ek-book3d { --ek-book-w: min(100%, 330px); --ek-book-d: calc(var(--ek-book-w) * .035); }
.ek-funnel .ek-book3d-stage {
  perspective: 1900px;
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem) 0;
}
/* Positive rotateY pushes the RIGHT edge away and brings the LEFT edge
   forward, which is the only way a left-hand spine can be visible. The first
   pass used a negative angle and drew a spine on a face that was turned away —
   physically impossible, and it read as a flat sticker. */
.ek-funnel .ek-book3d-book {
  position: relative;
  width: var(--ek-book-w);
  aspect-ratio: 2550 / 3300;   /* the real 8.5x11 trim */
  transform-style: preserve-3d;
  transform: rotateY(24deg) rotateX(2deg);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
/* Specificity note: `.ek-funnel .ek-mockup--hero img` (0,2,1) sets a 3/2 ratio
   and object-fit:cover for the old flat photo, and it would crop the cover.
   The extra class here makes this (0,3,0), which outranks it. */
.ek-funnel .ek-book3d .ek-book3d-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  /* Square, deliberately. A 2px corner here was a third radius value, which
     breaks the Two-Radius Rule in DESIGN.md — and it was wrong anyway: this is
     a perfect-bound KDP paperback, and perfect binding gives square corners.
     Rounded corners are a hardback and card convention. The panel radius does
     not apply either; radius is a finish for UI surfaces, not for a depicted
     physical object. */
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translateZ(calc(var(--ek-book-d) / 2));
}
/* Spine: the real printed spine strip, stood on the left face of the block.
   translateX(-d/2) moves the strip's own centre onto the book's left edge,
   then rotateY(-90deg) turns it to face left. */
.ek-funnel .ek-book3d-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ek-book-d);
  height: 100%;
  transform: translateX(calc(var(--ek-book-d) / -2)) rotateY(-90deg);
  backface-visibility: hidden;
  background: url("mockups/cover-spine.webp") center / 100% 100% no-repeat, #141d2b;
}
/* Page block: the cut edges on the right face. */
.ek-funnel .ek-book3d-pages {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--ek-book-d);
  height: 100%;
  transform: translateX(calc(var(--ek-book-d) / 2)) rotateY(90deg);
  /* With the left edge forward the fore-edge is turned away, so it must not
     draw — otherwise both side faces render at once and the block reads as
     two stickers rather than one solid object. */
  backface-visibility: hidden;
  background: repeating-linear-gradient(
    to right,
    #efeadf 0 1px, #dcd5c6 1px 2px
  );
}
.ek-funnel .ek-book3d-caption {
  max-width: 34ch;
  margin: .4rem auto 0;
  color: var(--wp--preset--color--quiet-ink);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .ek-funnel .ek-book3d-stage:hover .ek-book3d-book { transform: rotateY(14deg) rotateX(1deg); }
}

@media (max-width: 720px) {
  .ek-funnel .ek-book3d { --ek-book-w: min(100%, 300px); }
  .ek-funnel .ek-book3d-book { transform: rotateY(17deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ek-funnel .ek-book3d-book { transition: none; }
  .ek-funnel .ek-book3d-stage:hover .ek-book3d-book { transform: rotateY(24deg) rotateX(2deg); }
}

/* Proof Ledger — pinned to the sans/label role, never Georgia (old-style
   figures render numerals at inconsistent heights; the ledger is all
   numerals and its whole job is to look like checkable fact). */
.ek-funnel .ek-ledger { background: var(--wp--preset--color--authority-ink); color: var(--wp--preset--color--paper-surface); }
.ek-funnel .ek-ledger .section-inner { padding: 0; }
.ek-funnel .ledger-heading { padding: 2rem 0 1.4rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.ek-funnel .ledger-heading h2 { max-width: none; margin: 0; color: var(--wp--preset--color--paper-surface); font-size: clamp(1.7rem,2.7vw,2.7rem); }
.ek-funnel .ledger-heading p { max-width: 42ch; margin: 0; color: var(--wp--preset--color--paper-rule); font-size: .78rem; }
.ek-funnel .ledger-grid { display: grid; grid-template-columns: repeat(5,1fr); }
.ek-funnel .ledger-item { min-height: 170px; padding: 2rem 1.25rem; border-right: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; justify-content: space-between; }
.ek-funnel .ledger-item:last-child { border-right: 0; }
.ek-funnel .ledger-item strong,
.ek-funnel .ledger-item,
.ek-funnel .ledger-item * {
  font-family: var(--wp--preset--font-family--working-sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.ek-funnel .ledger-item strong { display: block; color: var(--wp--preset--color--paper-surface); font-size: clamp(2.4rem,4vw,4.2rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.ek-funnel .ledger-item span { max-width: 15ch; color: var(--wp--preset--color--paper-rule); font-size: .7rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }

/* Legitimacy Band — approved 2026-08-12, placed near the Proof Ledger.
   Ordinary working text on the standard rule; never styled as a warning. */
.ek-funnel .ek-legitimacy { background: var(--wp--preset--color--paper-ground); border-top: 1px solid var(--wp--preset--color--paper-rule); border-bottom: 1px solid var(--wp--preset--color--paper-rule); }
.ek-funnel .ek-legitimacy .section-inner { padding: clamp(2.5rem,5vw,3.5rem) 0; }
.ek-funnel .ek-legitimacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
.ek-funnel .ek-legitimacy h3 { font-size: 1rem; margin-bottom: .75rem; }
.ek-funnel .ek-legitimacy p { font-size: .88rem; color: var(--wp--preset--color--working-ink); }
.ek-funnel .ek-legitimacy ul { margin: 0; padding: 0; list-style: none; }
.ek-funnel .ek-legitimacy li { padding: .5rem 0; border-bottom: 1px solid var(--wp--preset--color--paper-rule); color: var(--wp--preset--color--working-ink); font-size: .88rem; }
.ek-funnel .ek-legitimacy li:last-child { border-bottom: 0; }

/* Mechanism */
.ek-funnel .mechanism { background: var(--wp--preset--color--paper-surface); }
.ek-funnel .mechanism-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(4rem,10vw,9rem); align-items: start; }
.ek-funnel .mechanism h2 { position: sticky; top: calc(var(--ek-header) + 42px); }
.ek-funnel .mechanism-copy { padding-top: .5rem; }
.ek-funnel .mechanism-copy > p { font-size: clamp(1.15rem,1.9vw,1.55rem); line-height: 1.5; }
.ek-funnel .mechanism-list { margin: 3rem 0 0; padding: 0; border-top: 1px solid var(--wp--preset--color--authority-ink); list-style: none; }
.ek-funnel .mechanism-list li { padding: 1.25rem 0; display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; border-bottom: 1px solid var(--wp--preset--color--paper-rule); }
.ek-funnel .mechanism-list strong { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.ek-funnel .mechanism-list span { color: var(--wp--preset--color--working-ink); }

/* Three-phase mechanism */
.ek-funnel .ek-phases { background: var(--wp--preset--color--ordered-sage); color: var(--wp--preset--color--paper-surface); }
.ek-funnel .ek-phases h2 { color: var(--wp--preset--color--paper-surface); }
.ek-funnel .process-head { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 4rem; }
/* Body copy on a colored field inherits the section's paper-surface. It must
   NOT be re-tinted to paper-ground: that token is the page background, and on
   sage it measures 4.26:1 against a 4.5:1 requirement (institutional blue is
   worse, 4.20:1). The 2026-08-12 WCAG audit measured these fields against
   paper-surface/white, which is why the failure survived it — the palette was
   right and five child overrides were undoing it. paper-surface vs
   paper-ground is a ~3% visual difference and a pass/fail accessibility one.
   Hierarchy on these fields comes from size, weight, and the serif, not from
   dimming the text. See DESIGN.md "Contrast (measured, not asserted)". */
.ek-funnel .process-head p { max-width: 46ch; margin: 0; }
.ek-funnel .phase-list { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.55); }
.ek-funnel .phase { padding: 2.2rem 2rem 2.5rem; border-right: 1px solid rgba(255,255,255,.42); }
.ek-funnel .phase:last-child { border-right: 0; }
.ek-funnel .phase-number { display: block; margin-bottom: 4rem; color: var(--wp--preset--color--paper-rule); font-family: var(--wp--preset--font-family--display-serif); font-size: 1.1rem; }
.ek-funnel .phase h3 { max-width: 11ch; color: var(--wp--preset--color--paper-surface); font-size: clamp(1.65rem,2.2vw,2rem); line-height: 1.12; }
.ek-funnel .phase p { margin-bottom: 0; font-size: .92rem; }
.ek-funnel .process-action { margin-top: 2rem; text-align: right; }
.ek-funnel .process-action .text-link { color: var(--wp--preset--color--paper-surface); }

/* Working-page evidence */
.ek-funnel .previews { background: var(--wp--preset--color--paper-ground); }
.ek-funnel .previews-head { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.ek-funnel .previews-head p { margin: 0 0 .5rem; }
.ek-funnel .evidence-stack { display: grid; gap: clamp(4rem,10vw,8rem); }
.ek-funnel .ek-evidence-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2.5rem,5vw,4.5rem);
  align-items: start;
}
.ek-funnel .ek-evidence-row:nth-child(even) .ek-evidence-copy { order: 2; }
.ek-funnel .ek-evidence-copy { max-width: 46ch; padding-top: .35rem; }
.ek-funnel .ek-evidence-copy h3 { margin-bottom: .8rem; font-size: clamp(1.6rem,2.2vw,2rem); line-height: 1.12; }
.ek-funnel .ek-evidence-copy p { color: var(--wp--preset--color--working-ink); }
.ek-funnel .evidence-points { margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--wp--preset--color--authority-ink); list-style: none; }
.ek-funnel .evidence-points li { padding: .72rem 0; border-bottom: 1px solid var(--wp--preset--color--paper-rule); color: var(--wp--preset--color--working-ink); }

/* Offer stack */
.ek-funnel .inside { background: var(--wp--preset--color--paper-surface); }
.ek-funnel .inside-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(4rem,9vw,8rem); align-items: start; }
.ek-funnel .inside-intro { position: sticky; top: calc(var(--ek-header) + 42px); }
.ek-funnel .inside-intro p { margin-bottom: 1.7rem; }
.ek-funnel .offer-list { border-top: 1px solid var(--wp--preset--color--authority-ink); }
.ek-funnel .offer-item { padding: 2rem 0; display: grid; grid-template-columns: 82px 1fr; gap: 1.5rem; border-bottom: 1px solid var(--wp--preset--color--paper-rule); }
/* Amber used AS TEXT at 1.3rem (below the WCAG large-text threshold at
   regular weight) needs the darker decision-amber-text token, not the
   field-only decision-amber. */
.ek-funnel .offer-index { color: var(--wp--preset--color--decision-amber-text); font-family: var(--wp--preset--font-family--display-serif); font-size: 1.3rem; }
.ek-funnel .offer-item h3 { margin-bottom: .65rem; font-size: clamp(1.4rem,2vw,1.85rem); }
.ek-funnel .offer-item p { margin: 0; font-size: .92rem; }
.ek-funnel .offer-meta { display: block; margin-top: .8rem; color: var(--wp--preset--color--completion-green); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Comparison table */
.ek-funnel .comparison { background: var(--wp--preset--color--paper-ground); }
.ek-funnel .comparison-head { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.ek-funnel .comparison-head p { margin: 0 0 .5rem; }
.ek-funnel .comparison-wrap { overflow-x: auto; border-top: 1px solid var(--wp--preset--color--authority-ink); border-radius: var(--wp--custom--radius--panel, 10px) var(--wp--custom--radius--panel, 10px) 0 0; }
.ek-funnel .comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
.ek-funnel .comparison-table th, .ek-funnel .comparison-table td { padding: 1.15rem 1rem; border-bottom: 1px solid var(--wp--preset--color--paper-rule); vertical-align: top; }
.ek-funnel .comparison-table th { color: var(--wp--preset--color--authority-ink); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.ek-funnel .comparison-table td { color: var(--wp--preset--color--working-ink); font-size: .87rem; }
.ek-funnel .comparison-table th:last-child, .ek-funnel .comparison-table td:last-child { background: var(--wp--preset--color--paper-surface); color: var(--wp--preset--color--authority-ink); font-weight: 700; }
.ek-funnel .comparison-note { margin: 1.2rem 0 0; font-size: .75rem; }

/* The five-column table needs 760px and a phone has 390. It scrolled, but the
   two columns that happened to land on screen were the working need and the
   worst alternative — so on a phone this section argued that estate admin is
   hard and never showed the answer. The kit's column, the entire point of the
   comparison, sat 225px past the right edge with nothing to suggest it existed.

   Pinning both ends was tried first and does not fit: two legible columns are
   ~160px each and the content box is 330px, which left the three alternatives
   sharing a 10px slot. Five columns do not belong in a horizontal scroller on
   a phone at all, so below 700px each row becomes its own block: the working
   need as the heading, then the four methods as labelled rows beneath it, with
   the kit's answer keeping the raised surface it has on desktop.

   The method labels are set in CSS because the cells carry no data attribute.
   That means this list and the table's own <thead> have to be changed together
   — if a column is ever added, reordered, or renamed, update both. */
@media (max-width: 700px) {
  .ek-funnel .comparison-wrap {
    overflow-x: visible;
    border-top: 0;
    border-radius: 0;
  }

  .ek-funnel .comparison-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Kept in the document, not removed: it is still the table's real header. */
  .ek-funnel .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ek-funnel .comparison-table tbody,
  .ek-funnel .comparison-table tr,
  .ek-funnel .comparison-table td { display: block; }

  .ek-funnel .comparison-table tr {
    margin-bottom: 1rem;
    padding: 0 1.15rem 1rem;
    border: 1px solid var(--wp--preset--color--paper-rule);
    border-radius: var(--wp--custom--radius--panel, 10px);
    background: var(--wp--preset--color--paper-ground);
  }

  .ek-funnel .comparison-table td {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 0;
  }

  .ek-funnel .comparison-table td::before {
    flex: none;
    color: var(--wp--preset--color--quiet-ink);
    font-size: .75rem;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .ek-funnel .comparison-table td:nth-child(2)::before { content: 'Loose notes'; }
  .ek-funnel .comparison-table td:nth-child(3)::before { content: 'Generic letters'; }
  .ek-funnel .comparison-table td:nth-child(4)::before { content: 'Blank spreadsheet'; }
  .ek-funnel .comparison-table td:nth-child(5)::before { content: 'The Executor\2019s Kit'; }

  /* The need is the card's heading, so it carries no label and no value slot. */
  .ek-funnel .comparison-table td:first-child {
    display: block;
    margin-bottom: .35rem;
    padding: 1rem 0 .75rem;
    border-bottom: 1px solid var(--wp--preset--color--paper-rule);
    color: var(--wp--preset--color--authority-ink);
    font-weight: 700;
  }

  .ek-funnel .comparison-table td:last-child {
    margin: .35rem -1.15rem -1rem;
    padding: .75rem 1.15rem;
    border-radius: 0 0 var(--wp--custom--radius--panel, 10px) var(--wp--custom--radius--panel, 10px);
    text-align: right;
  }
}

/* Procedural risk / record chain */
.ek-funnel .procedural-value { background: var(--wp--preset--color--institutional-blue); color: var(--wp--preset--color--paper-surface); }
.ek-funnel .value-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem,9vw,8rem); align-items: start; }
.ek-funnel .value-layout h2 { color: var(--wp--preset--color--paper-surface); }
.ek-funnel .value-copy > p { font-size: 1.08rem; }
.ek-funnel .record-chain { margin-top: 2.5rem; padding: 0; border-top: 1px solid rgba(255,255,255,.45); list-style: none; }
.ek-funnel .record-chain li { padding: 1.1rem 0; display: grid; grid-template-columns: 42px 1fr; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.3); }
.ek-funnel .record-chain span { color: var(--wp--preset--color--paper-rule); font-family: var(--wp--preset--font-family--display-serif); }

/* Format and ownership */
.ek-funnel .formats { background: var(--wp--preset--color--paper-ground); }
.ek-funnel .formats-layout { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--wp--preset--color--paper-rule); border-radius: var(--wp--custom--radius--panel, 10px); overflow: hidden; background: var(--wp--preset--color--paper-surface); box-shadow: var(--ek-shadow-paper); }
.ek-funnel .format-copy { padding: clamp(2.2rem,5vw,4.8rem); }
.ek-funnel .format-copy h2 { font-size: clamp(2rem,3vw,2.65rem); line-height: 1.08; }
.ek-funnel .format-copy p:last-child { margin-bottom: 0; color: var(--wp--preset--color--quiet-ink); font-size: .76rem; }
.ek-funnel .format-proof { padding: clamp(2.2rem,5vw,4.8rem); background: var(--wp--preset--color--ordered-sage); color: var(--wp--preset--color--paper-surface); }
.ek-funnel .format-item { padding: 1.4rem 0; border-bottom: 1px solid rgba(255,255,255,.4); }
.ek-funnel .format-item:first-child { padding-top: 0; }
.ek-funnel .format-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ek-funnel .format-item strong { display: block; margin-bottom: .35rem; font-family: var(--wp--preset--font-family--display-serif); font-size: 1.3rem; font-weight: 500; }
.ek-funnel .format-item span { display: block; font-size: .82rem; }

/* FAQ — native <details>/<summary>, no JS required */
.ek-funnel .faq { background: var(--wp--preset--color--paper-surface); }
.ek-funnel .faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(4rem,9vw,8rem); align-items: start; }
.ek-funnel .faq-intro { position: sticky; top: calc(var(--ek-header) + 42px); }
.ek-funnel .faq-intro p { max-width: 38ch; }
.ek-funnel .faq-list { border-top: 1px solid var(--wp--preset--color--authority-ink); }
.ek-funnel .faq-list details { border-bottom: 1px solid var(--wp--preset--color--paper-rule); }
.ek-funnel .faq-list summary {
  position: relative; padding: 1.55rem 3rem 1.55rem 0; cursor: pointer;
  color: var(--wp--preset--color--authority-ink);
  font-family: var(--wp--preset--font-family--display-serif);
  font-size: 1.25rem; line-height: 1.25; list-style: none;
}
.ek-funnel .faq-list summary::-webkit-details-marker { display: none; }
.ek-funnel .faq-list summary::after {
  content: '+'; position: absolute; right: .2rem; top: 1.35rem;
  color: var(--wp--preset--color--completion-green);
  font-family: var(--wp--preset--font-family--working-sans);
  font-size: 1.55rem; font-weight: 400; transition: transform .2s var(--ek-ease);
}
.ek-funnel .faq-list details[open] summary::after { transform: rotate(45deg); }
.ek-funnel .faq-list details p { padding: 0 3.5rem 1.55rem 0; margin: 0; font-size: .93rem; }

/* Checkout — outer section is the amber field (a wash, per the Whole-Field
   Rule); the actual card floating on top is white/paper, so body copy does
   not sit directly on amber in this markup. The Large-Text-Only Rule still
   applies to any FUTURE addition that puts text on the amber wash itself
   (e.g. a button): headings only in authority-ink, body text must use
   paper-surface — see theme.json and DESIGN.md. */
.ek-funnel .ek-checkout { padding: clamp(5.5rem,10vw,9rem) 1.5rem; background: var(--wp--preset--color--decision-amber); }
.ek-funnel .checkout-card { width: min(100%,1180px); margin: auto; display: grid; grid-template-columns: .82fr 1fr .78fr; border-radius: var(--wp--custom--radius--panel, 10px); overflow: hidden; background: var(--wp--preset--color--paper-surface); box-shadow: var(--ek-shadow-decision); }
.ek-funnel .checkout-art { display: flex; align-items: center; padding: clamp(1.5rem,3vw,2.5rem); background: var(--wp--preset--color--authority-ink); }
.ek-funnel .checkout-copy { padding: clamp(2.4rem,5vw,5rem); }
.ek-funnel .checkout-copy h2 { max-width: 11ch; font-size: clamp(2rem,3vw,2.65rem); line-height: 1.08; }
.ek-funnel .checkout-price { margin: 2rem 0 .5rem; color: var(--wp--preset--color--authority-ink); font-family: var(--wp--preset--font-family--display-serif); font-size: 4rem; line-height: 1; letter-spacing: -.045em; }
.ek-funnel .checkout-price span { font-family: var(--wp--preset--font-family--working-sans); font-size: .72rem; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }
.ek-funnel .checkout-summary { margin: 1.2rem 0 0; }
.ek-funnel .checkout-reassurance { margin: 1rem 0 0; color: var(--wp--preset--color--quiet-ink); font-size: .76rem; font-weight: 700; }
/* How the buyer receives what they paid for. Sized on the documented
   `secondary` step (0.9375rem) rather than the .76rem fine print around it:
   this card previously said nothing at all about delivery, and the answer to
   "what happens after I pay" is not a legal footnote. Kept deliberately free
   of any claim about email until a real transaction has proved that path —
   see the open delivery gate in PRODUCT.md. */
.ek-funnel .ek-checkout-delivery { margin: 1.1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--wp--preset--color--paper-rule); border-radius: var(--wp--custom--radius--field, 6px); background: var(--wp--preset--color--paper-ground); color: var(--wp--preset--color--authority-ink); font-size: .9375rem; line-height: 1.55; }
.ek-funnel .purchase-policy { margin: 1.6rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--paper-rule); color: var(--wp--preset--color--working-ink); font-size: .76rem; line-height: 1.55; }
.ek-funnel .checkout-widget { min-height: 430px; padding: clamp(2.4rem,5vw,5rem); display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--wp--preset--color--paper-rule); background: var(--wp--preset--color--paper-ground); }
.ek-funnel .payment-label { margin-bottom: 1.3rem; color: var(--wp--preset--color--completion-green); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ek-funnel .payment-status { margin: 1rem 0 0; color: var(--wp--preset--color--quiet-ink); font-size: .75rem; text-align: center; }
.ek-funnel .payment-status.is-error { color: var(--wp--preset--color--warning-brick); font-weight: 700; }

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .ek-funnel .hero-inner { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .ek-funnel .hero-copy { max-width: 760px; }
  .ek-funnel .hero-visual { max-width: 820px; width: 100%; margin: auto; }
  .ek-funnel .ek-evidence-row { grid-template-columns: 1fr; }
  .ek-funnel .ek-evidence-row:nth-child(even) .ek-evidence-copy { order: 0; }
  .ek-funnel .ek-evidence-copy { max-width: 680px; }
  .ek-funnel .ledger-item { padding: 1.6rem .9rem; }
  .ek-funnel .mechanism-grid, .ek-funnel .inside-layout, .ek-funnel .faq-layout { grid-template-columns: 1fr; }
  .ek-funnel .mechanism h2, .ek-funnel .inside-intro, .ek-funnel .faq-intro { position: static; }
  .ek-funnel .inside-intro, .ek-funnel .faq-intro { max-width: 700px; }
}

@media (max-width: 820px) {
  /* Secondary nav links are handled by the core Navigation block's own
     overlayMenu:"mobile" behavior (set in header.html) — an accessible
     collapsing menu, not a hard hide of hand-coded links as in the
     original static markup. No rule needed here. */
  .ek-funnel .ledger-grid { grid-template-columns: repeat(2,1fr); }
  .ek-funnel .ledger-item { border-bottom: 1px solid rgba(255,255,255,.18); }
  .ek-funnel .ledger-item:nth-child(2n) { border-right: 0; }
  .ek-funnel .ledger-item:last-child { grid-column: 1/-1; }
  .ek-funnel .process-head, .ek-funnel .previews-head, .ek-funnel .comparison-head { display: block; }
  .ek-funnel .process-head p, .ek-funnel .previews-head p, .ek-funnel .comparison-head p { margin-top: 1.5rem; }
  .ek-funnel .phase-list { grid-template-columns: 1fr; }
  .ek-funnel .phase { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.4); }
  .ek-funnel .phase:last-child { border-bottom: 0; }
  .ek-funnel .phase-number { margin-bottom: 1.6rem; }
  .ek-funnel .value-layout, .ek-funnel .formats-layout { grid-template-columns: 1fr; }
  .ek-funnel .format-proof { min-height: 0; }
  .ek-funnel .checkout-card { grid-template-columns: 1fr 1fr; }
  .ek-funnel .checkout-art { grid-column: 1 / -1; }
  .ek-funnel .checkout-art .ek-product-mockup { max-width: 420px; margin: auto; }
  .ek-funnel .checkout-widget { min-height: 350px; border-top: 1px solid var(--wp--preset--color--paper-rule); border-left: 0; }
}

@media (max-width: 720px) {
  :root { --ek-header: 62px; }
  .ek-funnel .section-inner { width: min(calc(100% - 2.4rem), var(--ek-max)); padding: 4.8rem 0; }
  /* The header CTA and the buy bar say the same thing; keeping both
     visible on a small viewport is redundant chrome. The buy bar takes
     over once the hero scrolls out (funnel.js), so hide the header CTA
     here — matches header.html's actual markup: .ek-nav > .ek-cta. */
  .ek-nav .ek-cta { display: none; }
  .ek-funnel .hero { min-height: 0; }
  .ek-funnel .hero-inner { width: calc(100% - 2.4rem); padding: 1.5rem 0 2.5rem; }
  .ek-funnel .hero h1 { font-size: clamp(2.25rem,10vw,2.75rem); }
  .ek-funnel .hero-actions { align-items: stretch; flex-direction: column; }
  .ek-funnel .hero-actions .button { width: 100%; }
  .ek-funnel .hero-actions .text-link { text-align: center; justify-content: center; }
  .ek-funnel .hero-proof { grid-template-columns: repeat(3,1fr); gap: .55rem; }
  .ek-funnel .hero-proof strong { font-size: 1.14rem; }
  .ek-funnel .hero-proof li { font-size: .63rem; }
  .ek-funnel .ledger-heading { display: block; padding: 1.7rem 0; }
  .ek-funnel .ledger-heading p { margin-top: .7rem; }
  .ek-funnel .ledger-item { min-height: 145px; }
  .ek-funnel .ek-legitimacy-grid { grid-template-columns: 1fr; }
  .ek-funnel .mechanism-list li { grid-template-columns: 1fr; gap: .5rem; }
  .ek-funnel .offer-item { grid-template-columns: 52px 1fr; }
  .ek-funnel .ek-checkout { padding: 4.5rem 1.2rem; }
  .ek-funnel .checkout-card { grid-template-columns: 1fr; }
  .ek-funnel .checkout-art { grid-column: auto; }
  .ek-funnel .checkout-copy, .ek-funnel .checkout-widget { padding: 2.2rem 1.5rem; }
  .ek-buybar { display: flex; }

  /* Three fixed overlays (header, progress line, buy bar) must not all
     pin at once on a small viewport belonging to an older reader. The
     progress line is the one that carries no essential information, so
     it is the one suppressed. */
  .ek-progress { display: none; }
}

@media (max-width: 460px) {
  .ek-funnel .hero-proof { grid-template-columns: 1fr; }
  .ek-funnel .hero-proof li { display: flex; align-items: baseline; gap: .5rem; }
  .ek-funnel .ledger-grid { grid-template-columns: 1fr; }
  .ek-funnel .ledger-item, .ek-funnel .ledger-item:nth-child(2n) { border-right: 0; }
  .ek-funnel .ledger-item:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ek-funnel *, .ek-funnel *::before, .ek-funnel *::after,
  .ek-header, .ek-buybar { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ek-progress { display: none; }
}

/* ============================================================
   Mobile UX corrections - measured at a real 380px viewport.

   1. box-sizing. The rule above sets .hero-actions .button
      { width: 100% } at <=640px, but nothing in this theme set
      box-sizing, so the content-box default applied:
          320.156px (100% of .hero-actions)
        +  49.60px  (padding .85rem 1.55rem)
        +   2.00px  (1px border each side)
        = 371.76px  in a 320px box -> right edge 402px in a 380px
      viewport. 22px of the primary purchase button was cut off, and
      .ek-funnel { overflow: hidden } clipped it rather than producing
      a scrollbar, so the page measured clean while the CTA was
      truncated.

   2. Body copy measured 12.48 / 14.08 / 14.72px on mobile. The floor
      is 16px, and below that iOS Safari also auto-zooms on focus.
      !important is required rather than preferred: .ek-legitimacy li
      (.88rem), .phase p (.92rem) and .proof-line (.78rem !important)
      out-specify any element-level override, and media queries add no
      specificity. Uppercase micro-labels stay at .75rem on purpose -
      their hierarchy comes from letter-spacing, not from size.

   3. Footer links measured 19px tall; WCAG 2.2 AA (2.5.8) requires
      24px. They carry no class, so they are selected structurally.
   ============================================================ */

.ek-funnel .button,
.ek-funnel .text-link { box-sizing: border-box; }

@media (max-width: 640px) {
  .ek-funnel p,
  .ek-funnel li,
  .ek-funnel td { font-size: 1rem !important; }

  .ek-funnel .proof-line,
  .ek-funnel .comparison-note,
  .ek-funnel .ledger-heading p,
  .ek-funnel .format-copy p:last-child { font-size: .9375rem !important; }

  .ek-funnel .offer-meta,
  .ek-funnel .comparison-table th,
  .ek-funnel .ledger-item span,
  .ek-funnel .mechanism-list strong,
  .ek-funnel .hero-proof li { font-size: .75rem !important; }
}

footer a { display: inline-block; padding-block: .375rem; }
@media (max-width: 640px) {
  /* .5rem left these at 39px measured. Standalone links in a stacked footer
     are thumb targets, not prose, so they get the full 44px. min-width carries
     the short labels — "FAQ" measured 26px wide — and because the box grows
     rightwards the footer's left edge stays aligned. */
  footer a { padding-block: .68rem; min-width: 44px; }

  /* Same reason: these two are section calls to action, not links inside a
     sentence, and they measured 23px tall. */
  .ek-funnel .hero-actions .text-link,
  .ek-funnel .process-action .text-link { min-height: 44px; }
}

/* ---------- Product Theater: fanned artifact stack ----------
   Three further deliverables sit behind the book: the guide's ordered tasks,
   the letter templates, and the trackers. Each leaf is a real interior render,
   and each maps to a count the hero already states in text (60+ tasks, six
   letters, 34 worksheet pages) — so the picture makes no claim the page does
   not already support. The two hero-complete-bundle files are deliberately not
   used here; they carry a cover design that never shipped.

   Deliberately 2.5D. The leaves are siblings of .ek-book3d-book rather than
   children of a shared preserve-3d rotor, because giving the stage a 3D
   context would change how the book itself renders — and the book's pose is
   verified (spine on the near face, depth from a real 132-page trim). Depth
   here is read from the shared yaw, plus scale, offset, and shadow.

   No rule in this block modifies the book. */

.ek-funnel .ek-stack3d {
  /* One knob scales the whole spread. Per-leaf offsets are never edited for
     a breakpoint; this is the only value that moves. */
  --ek-fan: 1;
  /* The fan opens to the right, so the composition is nudged back to optical
     centre rather than letting it drift and push the page wide. */
  --ek-recenter: -12%;
  /* Leaves further back take the shallower documented step rather than an
     invented shadow. DESIGN.md defines three shadow steps and no more; a
     bespoke rgba() per leaf would be a fourth and a fifth. Depth separation
     is carried by scale, offset, and rotation instead, which cost nothing. */
  --ek-shadow-leaf: var(--wp--custom--shadow--state-lift, 0 12px 25px rgba(23,32,42,.15));
}

.ek-funnel .ek-stack3d .ek-book3d-stage {
  position: relative;
  transform: translateX(calc(var(--ek-recenter) * var(--ek-fan)));
}
.ek-funnel .ek-stack3d .ek-book3d-book { position: relative; z-index: 2; }

.ek-funnel .ek-stack3d .ek-stack3d-leaf {
  --leaf-yaw: 24deg;
  /* Defaults so a leaf with no modifier class still renders as a flat sheet
     rather than dropping its whole transform as invalid at computed-value
     time, which is how a missing class would otherwise present: one leaf
     silently unrotated and centred behind the book. */
  --leaf-rot: 0deg;
  --leaf-x: 0%;
  --leaf-y: 0%;
  --leaf-s: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ek-book-w);
  aspect-ratio: 2550 / 3300;   /* the same 8.5x11 page the book is */
  margin: 0;
  overflow: hidden;
  background: var(--wp--preset--color--paper-surface);
  border: 1px solid var(--wp--preset--color--paper-rule);
  /* Square, like the book's front and like a printed page. The shared
     .ek-product-mockup img rule puts a 10px panel radius on every image in
     the hero; a depicted sheet is not a UI surface, and a third radius would
     break the Two-Radius Rule in DESIGN.md. */
  border-radius: 0;
  transform:
    translate(-50%, -50%)
    rotateY(var(--leaf-yaw))
    rotateZ(calc(var(--leaf-rot) * var(--ek-fan)))
    translate(calc(var(--leaf-x) * var(--ek-fan)), calc(var(--leaf-y) * var(--ek-fan)))
    scale(var(--leaf-s));
  transition: transform .5s var(--ek-ease);
}

/* The image fills the sheet. Every declaration here exists to undo the shared
   .ek-funnel .ek-product-mockup img rule, which is written for a standalone
   product photo, not for a plane inside a depicted stack. */
.ek-funnel .ek-stack3d .ek-stack3d-leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Opening values, tuned against rendered screenshots — they cannot be derived
   on paper, because the source renders are landscape and the leaves are
   portrait. */
.ek-funnel .ek-stack3d .ek-stack3d-leaf--guide {
  --leaf-rot: -3deg;  --leaf-x: 18%; --leaf-y: -5%;  --leaf-s: .97;
  box-shadow: var(--ek-shadow-paper);
}
.ek-funnel .ek-stack3d .ek-stack3d-leaf--letters {
  --leaf-rot: -7deg;  --leaf-x: 34%; --leaf-y: -10%; --leaf-s: .94;
  box-shadow: var(--ek-shadow-leaf);
}
.ek-funnel .ek-stack3d .ek-stack3d-leaf--records {
  --leaf-rot: -11deg; --leaf-x: 50%; --leaf-y: -15%; --leaf-s: .91;
  box-shadow: var(--ek-shadow-leaf);
}
/* Every source is a marketing scene — headline and body copy on the left, the
   artifact on the right, over a two-tone floor — not a page texture. Two facts
   set these values. A leaf shows roughly a 60%-wide window of its source; and
   the book occludes the leaf's left side, so only the window's RIGHT edge is
   ever seen. Each value therefore lands the window's right edge on the dense
   part of that scene's artifact: the checklist's phase buttons, the letter's
   body and LETTER 01 rule, the tracker table's right-hand columns. Panning
   fully right instead lands on the floor beyond the artifact, which reads as
   blank paper. */
.ek-funnel .ek-stack3d .ek-stack3d-leaf--guide img   { object-position: 72% center; }
.ek-funnel .ek-stack3d .ek-stack3d-leaf--letters img { object-position: 71% center; }
.ek-funnel .ek-stack3d .ek-stack3d-leaf--records img { object-position: 83% center; }

/* Hover opens the fan alongside the book's own 24deg-to-14deg tilt. Fine
   pointers only, matching the book. */
@media (hover: hover) and (pointer: fine) {
  .ek-funnel .ek-stack3d .ek-book3d-stage:hover .ek-stack3d-leaf { --ek-fan: 1.3; }
}

/* The book narrows and its yaw drops to 17deg here, so the leaves follow it,
   and the spread tightens so the fan stays inside a 360px viewport. The
   explicit .ek-stack3d.ek-book3d selector outranks the base --ek-book-w rule
   rather than relying on source order. */
@media (max-width: 720px) {
  .ek-funnel .ek-stack3d.ek-book3d { --ek-book-w: min(100%, 260px); }
  .ek-funnel .ek-stack3d { --ek-fan: .32; }
  .ek-funnel .ek-stack3d .ek-stack3d-leaf { --leaf-yaw: 17deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ek-funnel .ek-stack3d .ek-stack3d-leaf { transition: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .ek-funnel .ek-stack3d .ek-book3d-stage:hover .ek-stack3d-leaf { --ek-fan: 1; }
}