/* Homepage "product page" (owner brief 2026-10-18): a near-black stage, white headlines, one grey, the brand purple as the
   only accent, General Sans, liquid glass for the nav / frames / cards. Every rule is scoped to body.pp so it wins over
   ds.css. Storyboard (step 1): every chapter is its FINAL state; the motion layer (step 2) will only animate towards it.
   Rhythm: 80 px padding each side of a section (160 px between two sections' content, the layout gate's limit), 48 px on
   phones. Grid: 1200 px, 24 px sides (16 px on phones). */
@font-face { font-family: "General Sans"; src: url(/revenue/assets/fonts/GeneralSans-Variable.49d3fbd2f1.woff2) format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }

.pp { --pp-bg: #000; --pp-bg-2: #0a0a0f; --pp-ink: #fff; --pp-grey: #a3a3b2; --pp-grey-2: #c9c9d4; --pp-accent: #8b5cf6; --pp-accent-2: #a78bfa; --pp-accent-soft: rgba(139,92,246,.16);
  --pp-font: "General Sans", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --pp-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pp-ease: cubic-bezier(.16, 1, .3, 1); --pp-pad: 80px; --pp-side: 24px; --pp-max: 1200px; --pp-r: 20px;
  --pp-glass: rgba(255,255,255,.06); --pp-glass-line: rgba(255,255,255,.12);
  background: var(--pp-bg); color: var(--pp-ink); }
@media (max-width: 640px) { .pp { --pp-pad: 48px; --pp-side: 16px; } }
.pp, .pp main, .pp .mr-header { font-family: var(--pp-font); }
.pp main { background: linear-gradient(180deg, var(--pp-bg) 0%, var(--pp-bg-2) 100%); padding-top: 0; }
.pp .num { font-variant-numeric: tabular-nums; }
.pp main > section { position: relative; padding-block: var(--pp-pad); border: 0; background: transparent; margin: 0; }
.pp main > section::before { content: none; }
.pp main > section:first-child { padding-top: calc(64px + var(--pp-pad)); }
.pp .pp-wrap { max-width: calc(var(--pp-max) + 2 * var(--pp-side)); margin-inline: auto; padding-inline: var(--pp-side); position: relative; }

/* ── type ── */
.pp .pp-h1 { margin: 0; font: 600 clamp(44px, 7.6vw, 112px)/1.02 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); max-width: none; text-wrap: balance; }
.pp .pp-h2 { margin: 0; font: 600 clamp(34px, 4.6vw, 64px)/1.06 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); max-width: 18ch; text-wrap: balance; }
.pp .pp-h3 { margin: 0; font: 600 24px/30px var(--pp-font); letter-spacing: -0.015em; color: var(--pp-ink); }
.pp .pp-lede { margin: 20px 0 0; font: 400 20px/30px var(--pp-font); color: var(--pp-grey); max-width: 36em; }
.pp .pp-body { margin: 12px 0 0; font: 400 18px/28px var(--pp-font); color: var(--pp-grey); }
.pp .pp-lede a, .pp .pp-cap a, .pp .pp-promise a, .pp .pp-micro a { color: var(--pp-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pp-accent); }
.pp .pp-head { display: grid; gap: 0; max-width: 820px; margin: 0 auto 56px; text-align: center; justify-items: center; }
.pp .pp-head .pp-h2 { max-width: 16ch; }
.pp .pp-head .pp-lede { margin-inline: auto; }
.pp .pp-cap { margin: 32px auto 0; text-align: center; color: var(--pp-grey); font-size: 14px; line-height: 22px; }
.pp .pp-micro { margin: 24px auto 0; text-align: center; color: var(--pp-grey); font-size: 14px; line-height: 22px; }
.pp .pp-micro b { color: var(--pp-grey-2); font-weight: 500; font-family: var(--ui-sans); font-size: 13px; }
@media (max-width: 640px) { .pp .pp-lede { font-size: 19px; line-height: 28px; margin-top: 16px; } .pp .pp-body { font-size: 17px; line-height: 26px; } .pp .pp-head { margin-bottom: 36px; } .pp .pp-h3 { font-size: 21px; line-height: 27px; } }

/* ── buttons: the site's buttons, purple primary, glass secondary ── */
.pp .pp-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 36px 0 0; }
.pp .btn { font-family: var(--pp-font); font-weight: 500; border-radius: 12px; min-height: 52px; padding: 0 26px; }
.pp .btn:not(.btn-primary) { background: var(--pp-glass); border: 1px solid var(--pp-glass-line); color: var(--pp-ink); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.pp .btn:not(.btn-primary):hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.pp .btn-primary { background: linear-gradient(180deg, #9a7bff 0%, var(--pp-accent) 55%, #7c4dff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 32px -12px rgba(139,92,246,.7); color: #fff; border: 0; }
.pp .btn-primary:hover { background: linear-gradient(180deg, #a78bff 0%, #9466ff 55%, #8456ff 100%); }
@media (max-width: 640px) { .pp .pp-btns { gap: 10px; } .pp .pp-btns .btn { width: 100%; } }

/* ── liquid glass ── */
.pp .pp-glass { position: relative; background: var(--pp-glass); border: 1px solid var(--pp-glass-line); border-radius: var(--pp-r);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 80px rgba(139,92,246,.07), 0 30px 80px -40px rgba(0,0,0,.9); min-width: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pp .pp-glass, .pp .btn:not(.btn-primary) { background: #14141b; } }
.pp .pp-sample { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,.22); background: transparent; font: 500 12px/1 var(--ui-sans);  color: rgba(255,255,255,.78); white-space: nowrap; }   /* also .sample-badge (the trust gates look for it); the amber site look is overridden here: purple is the only accent */
.pp .pp-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font: 500 12px/1 var(--pp-font); color: var(--pp-grey-2); white-space: nowrap; }
.pp .pp-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-accent-2); }
.pp .pp-chip.warn::before { background: rgba(255,255,255,.45); }

/* ── the site header as a glass bar ── */
.pp .mr-header { background: rgba(0,0,0,.42); border-bottom: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.pp .mr-header.is-scrolled { background: rgba(0,0,0,.6); }
.pp .mr-header .mr-word { font-family: var(--pp-font); letter-spacing: -0.02em; }
.pp .mr-header .ds-links a { color: var(--pp-grey-2); } .pp .mr-header .ds-links a:hover, .pp .mr-header .ds-links a[aria-current="page"] { color: #fff; }
.pp .mr-header .btn { min-height: 44px; padding: 0 16px; border-radius: 10px; }
.pp .mr-header .btn:not(.btn-primary) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── the product frame (dashboard, drawn) ── */
.pp .pp-frame { overflow: hidden; text-align: left; }
.pp .pp-sheet, .pp .pp-zoom, .pp .pp-finding, .pp .pp-tile, .pp .pp-ttile, .pp .pp-price, .pp .pp-step { text-align: left; }
.pp .pp-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); font: 400 13px/1 var(--pp-font); color: var(--pp-grey); }
.pp .pp-dots { display: flex; gap: 6px; } .pp .pp-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pp .pp-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; } .pp .pp-crumb b { color: var(--pp-ink); font-weight: 500; }
.pp .pp-bar .pp-sample { margin-left: auto; }
.pp .pp-screen { padding: 24px; display: grid; gap: 16px; }
.pp .pp-tots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp .pp-tot { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.pp .pp-tot-k { font: 400 14px/18px var(--pp-font); color: var(--pp-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .pp-tot-v { font: 600 24px/30px var(--pp-font); letter-spacing: -0.02em; color: var(--pp-ink); }
.pp .pp-tot-n { font: 400 12px/16px var(--pp-font); color: var(--pp-grey); }
.pp .pp-cov { font: 400 13px/18px var(--pp-font); color: var(--pp-grey); margin: 0; }
.pp .pp-rows { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.pp .pp-row { display: grid; grid-template-columns: 1.1fr 2.6fr .9fr 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); font: 400 14px/20px var(--pp-font); color: var(--pp-grey); }
.pp .pp-row:first-child { border-top: 0; }
.pp .pp-row-h { font: 500 12px/16px var(--ui-sans);   color: var(--pp-grey); background: rgba(255,255,255,.03); }
.pp .pp-row-t { color: var(--pp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .pp-row-a { text-align: right; font-weight: 500; color: var(--pp-ink); font-size: 15px; }
.pp .pp-row.is-hot { background: linear-gradient(90deg, var(--pp-accent-soft), transparent 70%); box-shadow: inset 2px 0 0 var(--pp-accent); }
@media (max-width: 760px) { .pp .pp-tots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp .pp-row { grid-template-columns: 1fr auto; } .pp .pp-row-p, .pp .pp-row-e { display: none; } .pp .pp-rows > .pp-row:nth-child(n+4) { display: none; }   /* phones: the top two findings */ .pp .pp-screen { padding: 16px; } .pp .pp-row-t { white-space: normal; } }

/* ── 1 · hero ── */
.pp .pp-hero { text-align: center; }
.pp .pp-hero-copy { max-width: 980px; margin-inline: auto; display: grid; justify-items: center; }
.pp .pp-hero .pp-h1 { max-width: 20ch; }
.pp .pp-hero .pp-lede { max-width: 32em; }
.pp .pp-stage { position: relative; margin: 72px auto 0; max-width: 1100px; perspective: 1800px; }
.pp .pp-glow { position: absolute; left: 50%; top: 40%; width: 70%; height: 70%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(139,92,246,.38), rgba(139,92,246,.1) 55%, transparent 100%); filter: blur(40px); pointer-events: none; }
.pp .pp-lid { position: relative; transform-origin: 50% 100%; transform: none; }   /* step 2: rotateX(20deg) → 0 as the page scrolls; this is the settled state */
.pp .pp-dash { border-radius: 22px; }
@media (max-width: 640px) { .pp .pp-stage { margin-top: 40px; } }

/* ── 2 · the problem: four sheets ── */
.pp .pp-sheets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pp .pp-sheet { padding: 16px; }
.pp .pp-sh-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; height: 20px; font: 500 13px/20px var(--pp-font); color: var(--pp-ink); min-width: 0; }
.pp .pp-sh-f { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .pp-sh { list-style: none; margin: 0; padding: 0; }
.pp .pp-sh li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; height: 36px; padding: 0 8px; border-top: 1px solid rgba(255,255,255,.07); font: 400 13px/18px var(--pp-font); color: var(--pp-grey); border-radius: 6px; }
.pp .pp-sh li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .pp-sh li span:last-child { text-align: right; color: var(--pp-ink); }
.pp .pp-sh li.pp-sh-h { height: 32px; border-top: 0; font: 500 12px/16px var(--ui-sans);   color: var(--pp-grey); }
.pp .pp-sh li.pp-sh-h span:last-child { color: var(--pp-grey); }
.pp .pp-sh li.is-hit { background: var(--pp-accent-soft); box-shadow: inset 2px 0 0 var(--pp-accent); color: var(--pp-ink); }
.pp .pp-sh li.is-ghost { grid-template-columns: minmax(0, 1fr); border: 1px dashed rgba(167,139,250,.6); border-radius: 8px; color: var(--pp-accent-2); }
.pp .pp-sh li.is-ghost .pp-sh-g { text-align: center; color: var(--pp-accent-2); }
.pp .pp-sh li.is-ghost + li { border-top-color: transparent; }
.pp .pp-sh li.is-ghost span:last-child { color: var(--pp-accent-2); }
@media (max-width: 1023px) { .pp .pp-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pp .pp-sheets { grid-template-columns: minmax(0, 1fr); } }

/* ── 3 · the match: the line and the finding ── */
.pp .pp-trace { position: relative; }
.pp .pp-trace .pp-sheets { position: relative; z-index: 0; }
/* the line underlines the CO-09 row (and the gap where it should be) across all four sheets: row bottom = 16 pad + 32 title + 32 head + 4 rows × 36 */
.pp .pp-trace-line { position: absolute; left: 0; right: 0; top: 220px; width: 100%; height: 8px; pointer-events: none; z-index: 2; overflow: visible; filter: drop-shadow(0 0 6px rgba(139,92,246,.8)); }   /* 16 pad + 32 title + 32 head + 3.5 rows × 36 */
.pp .pp-trace-line line { stroke: var(--pp-accent); stroke-width: 2.5; stroke-linecap: round; }
.pp .pp-trace-line line.is-broken { stroke-dasharray: 2 10; stroke-width: 2; opacity: .9; }
@media (max-width: 1023px) { .pp .pp-trace-line { display: none; } }
.pp .pp-finding { max-width: 560px; margin: 56px auto 0; padding: 28px 32px; border-color: rgba(167,139,250,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 80px rgba(139,92,246,.12), 0 0 0 1px rgba(139,92,246,.15), 0 40px 100px -40px rgba(139,92,246,.55); }
.pp .pp-finding::before { content: ''; position: absolute; left: 50%; top: -56px; width: 2px; height: 56px; background: linear-gradient(180deg, transparent, var(--pp-accent)); }
@media (max-width: 1023px) { .pp .pp-finding::before { content: none; } .pp .pp-finding { margin-top: 24px; } }
.pp .pp-fd-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font: 500 15px/20px var(--pp-font); color: var(--pp-grey-2); }
.pp .pp-fd-amt { margin: 10px 0 0; font: 600 56px/1 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); }
.pp .pp-fd-t { margin: 14px 0 0; font: 400 16px/24px var(--pp-font); color: var(--pp-grey); }
.pp .pp-fd-src { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); font: 400 13px/18px var(--cite); color: var(--pp-grey); }
.pp .pp-fd-src b { color: var(--pp-ink); font-weight: 500; }
@media (max-width: 640px) { .pp .pp-fd-amt { font-size: 40px; } .pp .pp-finding { padding: 22px 20px; } }

/* ── 4 · the proof: the CSV cell ── */
.pp .pp-zoom { padding: 20px; max-width: 1040px; margin-inline: auto; }
.pp .pp-zoom-t { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font: 500 14px/20px var(--pp-font); color: var(--pp-ink); }
.pp .pp-zoom-t span:nth-child(2) { color: var(--pp-accent-2); } .pp .pp-zoom-t .pp-sample { margin-left: auto; }
.pp .pp-csv { display: grid; gap: 0; overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(0,0,0,.25); }
.pp .pp-csv-r { display: grid; grid-template-columns: 44px .55fr .5fr .62fr 2fr .6fr 1fr 1fr 1fr; min-width: 900px; border-top: 1px solid rgba(255,255,255,.07); }
.pp .pp-csv-r:first-child { border-top: 0; }
.pp .pp-csv-h { background: rgba(255,255,255,.03); }
.pp .pp-cell { padding: 0 12px; height: 40px; display: flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--pp-font); color: var(--pp-grey); border-left: 1px solid rgba(255,255,255,.06); }
.pp .pp-csv-h .pp-cell { font: 500 12px/16px var(--cite); letter-spacing: .05em; text-transform: uppercase; }
.pp .pp-cell-n { color: rgba(255,255,255,.4); justify-content: flex-end; border-left: 0; font-family: var(--cite); }
.pp .pp-csv-r.is-hit .pp-cell { color: var(--pp-ink); background: rgba(255,255,255,.03); }
.pp .pp-cell.is-hit { position: relative; color: var(--pp-ink); font-weight: 600; z-index: 1; }
.pp .pp-cell-hl { position: absolute; inset: 0; background: var(--pp-accent-soft); box-shadow: inset 0 0 0 2px var(--pp-accent), 0 0 24px rgba(139,92,246,.45); pointer-events: none; }   /* the highlight is its own layer so motion can fade it in; static = visible */

/* ── 5 · floor by floor: the one illustration ── */
.pp .pp-building { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; }
.pp .pp-floor { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); grid-template-areas: "k art v"; gap: 24px; align-items: center; }
.pp .pp-floor-art { grid-area: art; } .pp .pp-floor-k { grid-area: k; } .pp .pp-floor-v { grid-area: v; }
.pp .pp-floor-art { display: block; width: 100%; height: 72px; }
.pp .pp-floor-art .pp-slab { fill: transparent; stroke: var(--pp-accent); stroke-width: 1.5; }
.pp .pp-floor-art .pp-win { fill: transparent; stroke: var(--pp-accent); stroke-width: 1; opacity: .7; }
.pp .pp-floor-art .pp-roof { fill: none; stroke: var(--pp-accent); stroke-width: 1.5; }
.pp .pp-floor-art .pp-door { fill: transparent; stroke: var(--pp-accent); stroke-width: 1.5; }
.pp .pp-floor-art .pp-slab-lit { fill: rgba(139,92,246,.1); stroke: none; }
.pp .pp-floor-art .pp-win-lit { fill: rgba(167,139,250,.55); stroke: none; }   /* the lit layer: motion fades it in floor by floor; static = lit */
.pp .pp-floor-k { text-align: right; display: grid; gap: 2px; }
.pp .pp-floor-v { display: grid; gap: 2px; }
.pp .pp-floor-n, .pp .pp-floor-v .num { font: 500 17px/22px var(--pp-font); color: var(--pp-ink); }
.pp .pp-floor-v .num { font-weight: 600; letter-spacing: -0.01em; }
.pp .pp-floor-s { font: 400 13px/18px var(--pp-font); color: var(--pp-grey); }
.pp .pp-ground { grid-column: 1 / -1; height: 2px; margin: 0 auto; width: 300px; background: var(--pp-accent); box-shadow: 0 0 24px rgba(139,92,246,.7), 0 0 60px rgba(139,92,246,.35); border-radius: 2px; }
@media (max-width: 760px) { .pp .pp-floor { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "art k" "art v"; gap: 2px 16px; padding: 6px 0; }
  .pp .pp-floor-art { grid-area: art; height: 56px; } .pp .pp-floor-k { grid-area: k; text-align: left; } .pp .pp-floor-v { grid-area: v; } .pp .pp-ground { width: 120px; margin: 0; } }

/* ── 6 · what it finds: bento ── */
.pp .pp-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pp .pp-tile { padding: 28px; grid-column: span 2; display: grid; align-content: start; gap: 6px; }
.pp .pp-tile:nth-child(1), .pp .pp-tile:nth-child(2) { grid-column: span 3; }
.pp .pp-tile-k { margin: 0; font: 500 12px/16px var(--ui-sans);   color: var(--pp-accent-2); }
.pp .pp-tile-v { margin: 6px 0 0; font: 600 44px/1 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); }
.pp .pp-tile-t { margin: 10px 0 0; font: 400 16px/24px var(--pp-font); color: var(--pp-grey); }
.pp .pp-tile-s { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 400 13px/18px var(--pp-font); color: var(--pp-grey); }
@media (max-width: 900px) { .pp .pp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp .pp-tile, .pp .pp-tile:nth-child(1), .pp .pp-tile:nth-child(2) { grid-column: span 1; } .pp .pp-tile:last-child { grid-column: span 2; } .pp .pp-tile-v { font-size: 36px; } }
@media (max-width: 560px) { .pp .pp-bento { grid-template-columns: minmax(0, 1fr); } .pp .pp-tile:last-child { grid-column: span 1; } .pp .pp-tile { padding: 22px; } }

/* ── 7 · how it works ── */
.pp .pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.pp .pp-step { display: grid; align-content: start; gap: 0; }
.pp .pp-step-n { font: 500 13px/18px var(--ui-sans);  color: var(--pp-accent-2); margin-bottom: 14px; }
.pp .pp-step-ui { margin-top: 24px; padding: 18px; }
.pp .pp-up { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp .pp-up li { display: flex; justify-content: space-between; gap: 12px; height: 36px; align-items: center; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.04); font: 400 13px/18px var(--pp-font); color: var(--pp-ink); }
.pp .pp-up li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .pp-up-ok { color: var(--pp-accent-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pp .pp-rev-k { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font: 500 14px/20px var(--pp-font); color: var(--pp-grey-2); }
.pp .pp-rev-v { margin: 8px 0 0; font: 600 36px/1 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); }
.pp .pp-rev-s { margin: 12px 0 0; font: 400 13px/18px var(--pp-font); color: var(--pp-grey); }
.pp .pp-draft-s { margin: 0; font: 500 14px/20px var(--pp-font); color: var(--pp-ink); }
.pp .pp-draft-b { margin: 8px 0 0; font: 400 13px/20px var(--pp-font); color: var(--pp-grey); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pp .pp-draft-a { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font: 500 13px/18px var(--pp-font); color: var(--pp-accent-2); }
@media (max-width: 900px) { .pp .pp-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ── 8 · trust ── */
.pp .pp-trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pp .pp-ttile { padding: 28px; }
.pp .pp-ttile .pp-body { font-size: 16px; line-height: 24px; }
@media (max-width: 900px) { .pp .pp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp .pp-trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 9 · pricing ── */
.pp .pp-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pp .pp-price { padding: 32px; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 0; }
.pp .pp-price.is-hot { border-color: rgba(167,139,250,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 90px rgba(139,92,246,.14), 0 0 0 1px rgba(139,92,246,.18), 0 40px 100px -40px rgba(139,92,246,.5); }
.pp .pp-price-n { margin: 0; font: 500 15px/20px var(--pp-font); color: var(--pp-grey-2); }
.pp .pp-price-v { margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; font: 600 52px/1 var(--pp-font); letter-spacing: -0.03em; color: var(--pp-ink); }
.pp .pp-price-u { font: 400 16px/20px var(--pp-font); color: var(--pp-grey); letter-spacing: 0; }
.pp .pp-price .pp-body { font-size: 16px; line-height: 24px; margin-top: 16px; }
.pp .pp-price-cta { margin: 24px 0 0; align-self: end; }
.pp .pp-price-cta .btn { width: 100%; }
.pp .pp-promise { max-width: 62ch; margin: 40px auto 0; margin-inline: auto; text-align: center; font: 400 17px/27px var(--pp-font); color: var(--pp-grey); }
.pp .pp-promise strong { color: var(--pp-ink); font-weight: 500; }
@media (max-width: 900px) { .pp .pp-prices { grid-template-columns: minmax(0, 1fr); } .pp .pp-price-v { font-size: 44px; } }

/* ── 10 · close ── */
.pp .pp-close { text-align: center; overflow: hidden; }
.pp .pp-close .pp-wrap { display: grid; justify-items: center; }
.pp .pp-glow-close { top: 50%; width: 60%; height: 90%; opacity: .7; }
.pp .pp-close-h { position: relative; max-width: 22ch; font-size: clamp(38px, 6vw, 88px); }
.pp .pp-close .pp-btns { position: relative; }
.pp .pp-close .pp-cap { position: relative; margin-top: 20px; } .pp .pp-close .pp-fit { margin-top: 10px; color: rgba(255,255,255,.62); }

/* ── the footer on the black stage ── */
.pp .mr-footer { background: var(--pp-bg-2); }

@media (max-width: 760px) { .pp .pp-csv-r { min-width: 0; grid-template-columns: 34px 62px minmax(0, 1fr) 82px 92px; } .pp .pp-cell { padding: 0 8px; font-size: 12px; height: 38px; } .pp .pp-cell-n { padding-right: 6px; }
  .pp .pp-cell:nth-child(2), .pp .pp-cell:nth-child(4), .pp .pp-cell:nth-child(6), .pp .pp-cell:nth-child(7) { display: none; } .pp .pp-zoom { padding: 14px; } .pp .pp-zoom-t { flex-wrap: wrap; gap: 8px 12px; } }

/* ── 10 · FAQ ── */
.pp .pp-faq-list { max-width: 820px; margin-inline: auto; padding: 8px 24px; }
.pp .pp-q { border-top: 1px solid rgba(255,255,255,.08); }
.pp .pp-q:first-child { border-top: 0; }
.pp .pp-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font: 500 18px/26px var(--pp-font); color: var(--pp-ink); }
.pp .pp-q > summary::-webkit-details-marker { display: none; }
.pp .pp-q-i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); position: relative; }
.pp .pp-q-i::before, .pp .pp-q-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--pp-accent-2); transform: translate(-50%, -50%); transition: transform var(--d-t, .2s) var(--pp-ease); }
.pp .pp-q-i::after { transform: translate(-50%, -50%) rotate(90deg); }
.pp .pp-q[open] .pp-q-i::after { transform: translate(-50%, -50%) rotate(0); }
.pp .pp-q-a { padding: 0 0 20px; max-width: 64ch; }
.pp .pp-q-a p { margin: 0 0 10px; font: 400 17px/27px var(--pp-font); color: var(--pp-grey); }
.pp .pp-q-a p:last-child { margin-bottom: 0; }
.pp .pp-q-a a { color: var(--pp-ink); text-decoration: underline; text-decoration-color: var(--pp-accent); text-underline-offset: 3px; }
@media (max-width: 640px) { .pp .pp-faq-list { padding: 4px 16px; } .pp .pp-q > summary { font-size: 17px; line-height: 24px; } }

/* ── motion layer (step 2): pins and from-states. Pins are CSS sticky inside a tall chapter, ONLY under html.pp-pins, which
   motion.js sets at boot on a desktop viewport (≥ 1024 × 860, fine pointer) outside prefers-reduced-motion. Without JS,
   under reduced motion (what the layout gate runs) and on phones every chapter is its settled layout. From-states are set
   by GSAP after load (elements below the fold) or by the data-d-in reveal under html.ds-motion; nothing here hides content. */
html.pp-pins .pp .pp-pin { height: calc(100vh + var(--pp-pin-extra, 100vh)); }
html.pp-pins .pp .pp-pin-in { position: sticky; top: 0; min-height: 100vh; display: grid; align-content: center; }
html.pp-pins .pp .pp-pin-problem { --pp-pin-extra: 100vh; } html.pp-pins .pp .pp-pin-match { --pp-pin-extra: 150vh; } html.pp-pins .pp .pp-pin-floors { --pp-pin-extra: 120vh; }
html.pp-pins .pp .pp-pin .pp-head { margin-bottom: 40px; } html.pp-pins .pp .pp-finding { margin-top: 44px; } html.pp-pins .pp .pp-finding::before { top: -44px; height: 44px; }
html.pp-pins .pp .pp-lid { transform: rotateX(20deg); will-change: transform; }   /* the lid at rest before the first scroll; GSAP drives it to 0 */
html.pp-pins .pp .pp-trace-line { transform-origin: 0 50%; }
.ds-motion .pp [data-d-in] { transition-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { html.pp-pins .pp .pp-pin { height: auto; } html.pp-pins .pp .pp-pin-in { position: static; min-height: 0; } html.pp-pins .pp .pp-lid { transform: none; } }