/**
 * Blade Boss: the pricing page, relaunch layout (pass 19, D-298). Pairs with templates/pricing-v2.php.
 * The bench pass 17.2 stylesheet on the P4 token contract (design-tokens.css v2): every color is a contract
 * token or a themed pair (--pvN: light on .pv2, dark under html[data-theme="dark"] .pv2). Light and dark.
 * Every rule is scoped under .pv2, so nothing leaks into the site nav, footer or modals.
 */

/* ═══ SHELL OVERRIDES ═══
   1. The shell's <main class="bb-main"> pads for the fixed nav; this hero bleeds to the top and pads itself.
   2. base.css v1 sizes headings and styles .btn; reset inside .pv2 so the bench's own rules decide.
   3. .pv2 is its own stacking context: the faint section words (z-index -1) sit above the page ground, and the
      fixed ambient tint and grain are clipped to the pricing area (never over the site footer). */
body.bb-page-pricing .bb-main { padding-top: 0; }
.pv2 { position: relative; isolation: isolate; clip-path: inset(0); --pv-navh: calc(var(--nav-height, 72px) + 10px); }
@media (max-width: 768px) { .pv2 { --pv-navh: calc(var(--nav-height-mobile, 60px) + env(safe-area-inset-top, 0px) + 8px); } }
.pv2 h1, .pv2 h2, .pv2 h3, .pv2 h4 { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; color: inherit; text-wrap: wrap; }
.pv2 .btn { overflow: visible; white-space: normal; min-width: 0; line-height: 1.2; }
.pv2 p + p { margin-top: 0; }
.pv2 *, .pv2 *::before, .pv2 *::after { box-sizing: border-box; }
.pv2 svg { display: inline-block; }
.pv2 .cc-pick button, .pv2 .cmp-pick button { font: inherit; }

/* PRICING pass 13: shared sections from the home head (tokens, chrome, nav, buttons, sections, footer, floating, math, motion) + pricing.css */
/* Headline highlight: GREEN (D-211, the live site's green-bright glow); orange stays for the action buttons.
   The orange alt stays on the toggle until Chris has seen green on his phone. */
.pv2 .hl { color: var(--brand-ink); text-shadow: var(--site-hl-glow); }
html[data-theme="light"] .pv2 .hero .hl, html[data-theme="light"] .pv2 .sec .hl { color: var(--brand); text-shadow: none; } /* 7.7:1 on the light surface */
/* D-211: the site keeps Montserrat + Open Sans; Barlow Semi Condensed numbers are shared with the app.
   At build: self-hosted, subset, only the display weight preloaded, font-display swap. */

.pv2 * { box-sizing: border-box; margin: 0; }
.pv2 { scroll-behavior: auto; overflow-anchor: none; background: var(--bg); }   /* no scroll anchoring: Chrome moved the page 12 to 24 px on its own around the sticky stage (pass 15 bench) */
.pv2 { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--site-font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.pv2 .wrap { max-width: var(--site-max); margin: 0 auto; padding-left: var(--site-gut-l); padding-right: var(--site-gut-r); }
.pv2 h1, .pv2 h2, .pv2 h3 { font-family: var(--site-font-disp); }
.pv2 img { max-width: 100%; display: block; }
.pv2 a { color: inherit; }
.pv2 button, .pv2 input { font: inherit; color: inherit; }

.pv2 .ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--pv1); }
.pv2 .ambient::after { content: ''; position: absolute; inset: 0;
  background-image: var(--pv2);
  background-size: 72px 72px; mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 85%); -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 85%); }

.pv2 #grain { position: fixed; inset: -60%; z-index: 95; pointer-events: none; opacity: var(--pv3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px; animation: grain 9s steps(10) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-4%, -6%); } 20% { transform: translate(-10%, 4%); } 30% { transform: translate(6%, -8%); } 40% { transform: translate(-4%, 10%); } 50% { transform: translate(-10%, 6%); } 60% { transform: translate(10%, 0); } 70% { transform: translate(0, 8%); } 80% { transform: translate(3%, 12%); } 90% { transform: translate(-7%, 4%); } }

.pv2 #curRing { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(91, 212, 147, 0.65); opacity: 0; mix-blend-mode: var(--pv4);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s ease, opacity 0.3s ease; }
.pv2 #curRing.on { opacity: 1; }
.pv2 #curRing.hot { width: 58px; height: 58px; border-color: var(--pv5); }
html[data-theme="light"] .pv2 #curRing { border-color: rgba(30, 94, 52, 0.55); }
@media (pointer: coarse) { .pv2 #curRing { display: none; } }


/* ════════ EXPLORER CHROME (not part of the site design) ════════ */
@media (min-width: 900px) { }


/* ════════ NAV (fixed: the Descent runs behind it) ════════ */
@media (min-width: 860px) { }
@media (max-height: 520px) { }


/* ════════ BUTTONS ════════ */
.pv2 .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 14px;
  font: 800 0.92rem/1 var(--site-font-disp); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none; overflow: hidden; white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, background 0.25s ease; }
.pv2 .btn .bicon { width: 17px; height: 17px; flex: none; transition: transform 0.3s var(--ease-out); }
.pv2 .btn:hover .bicon { transform: translateX(4px); }
.pv2 .btn-orange { color: var(--warm-fg); background: linear-gradient(135deg, var(--warm) 0%, var(--site-warm-press) 100%); box-shadow: 0 10px 30px rgba(245, 120, 66, 0.35), inset 0 1px 0 rgba(255,255,255,0.22); }
.pv2 .btn-orange::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-18deg); transition: left 0.56s ease; }
.pv2 .btn-orange:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(245, 120, 66, 0.48), inset 0 1px 0 rgba(255,255,255,0.3); }
.pv2 .btn-orange:hover::after { left: 160%; }
.pv2 .btn-orange:active { transform: translateY(0); }
.pv2 .btn-ghost { color: var(--ink-2); background: var(--pv6); border: 1px solid var(--line-2); box-shadow: none; }
.pv2 .btn-ghost:hover { color: var(--ink); background: var(--pv7); }
.pv2 .btn:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
@media (max-width: 479px) { }


/* ════════ SECTIONS ════════ */
.pv2 .sec { position: relative; padding: clamp(56px, 10vh, 110px) 0 0; }
.pv2 .sec-head { position: relative; max-width: 760px; margin-bottom: clamp(28px, 5vh, 48px); }
.pv2 .sec-k { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 700 0.68rem/1 var(--site-font-disp); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-ink); }
.pv2 .sec-k::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-ink), transparent); }
.pv2 .sec h2 { font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-weight: var(--site-w-disp); letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.pv2 .sec-sub { margin-top: 12px; color: var(--ink-2); font-size: 1.02rem; max-width: 56ch; }
.pv2 .ghost { position: absolute; z-index: -1; top: -0.28em; left: -0.04em; font: var(--site-w-disp) clamp(4.2rem, 16vw, 11.5rem)/1 var(--site-font-disp); letter-spacing: -0.04em; color: var(--pv8); -webkit-text-stroke: var(--pv9); pointer-events: none; user-select: none; white-space: nowrap; }
.pv2 .gcard { position: relative; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--pv10); transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease; }
.pv2 .gcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: var(--pv11); }
@media (hover: hover) and (pointer: fine) { .pv2 .gcard:hover::after { opacity: 1; } }
.pv2 a.gcard { text-decoration: none; color: inherit; display: block; }
.pv2 a.gcard:hover { transform: translateY(-5px); border-color: rgba(47, 191, 113,0.35); box-shadow: var(--pv12); }
.pv2 .quote { padding: 26px; display: grid; gap: 16px; }
.pv2 .qhead { display: flex; align-items: center; gap: 13px; }
.pv2 .qav { width: 50px; height: 50px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; font: 800 1rem/1 var(--site-font-disp); color: #FFF; box-shadow: 0 8px 20px rgba(30,94,52,0.4); }
.pv2 .qname { font: 800 1rem/1.25 var(--site-font-disp); }
.pv2 .qmeta { font: 500 0.82rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .qreal { margin-left: auto; white-space: nowrap; font: 700 0.64rem/1 var(--site-font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-ink); background: rgba(47, 191, 113,0.1); border: 1px solid rgba(47, 191, 113,0.35); border-radius: 999px; padding: 7px 11px; }
.pv2 .qbody { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); font-style: italic; }
.pv2 .qbody.pending { font-style: normal; font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 14px; }
.pv2 .qreal.past { color: var(--ink-2); background: var(--pv13); border-color: var(--line-2); }
.pv2 .qbody .qtag { font-style: normal; }
.pv2 .qtag { display: block; margin-bottom: 6px; font: 700 0.62rem/1.3 var(--font-num); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.pv2 .cost { display: grid; gap: 14px; }
.pv2 .ctile { padding: 20px 22px; display: grid; gap: 4px; }
.pv2 .ctile .what { font: 600 0.86rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .ctile .range { font: 700 clamp(1.4rem, 3vw, 1.8rem)/1.15 var(--font-num); font-variant-numeric: tabular-nums; }
.pv2 .ctile .src { font: 500 0.75rem/1.4 var(--site-font-body); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .pv2 .flip:hover .after { opacity: 1; } }
.pv2 .band { position: relative; margin-top: clamp(64px, 11vh, 120px); padding: clamp(64px, 12vh, 130px) 0; overflow: hidden; }
.pv2 .band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pv14); }
.pv2 .band .ghost { top: 4%; left: 50%; z-index: 0; font-size: clamp(4.6rem, 19vw, 14rem); }
@media (max-width: 700px) { .pv2 .band .ghost { white-space: normal; width: min-content; text-align: center; line-height: 0.86; top: 2%; } }
.pv2 .band-in { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 22px; }
.pv2 .band h2 { font-size: clamp(2.1rem, 6.4vw, 4rem); font-weight: var(--site-w-disp); letter-spacing: var(--site-track-disp); line-height: 1.02; text-wrap: balance; }
.pv2 .band p { color: var(--ink-2); max-width: 54ch; font-size: 1.05rem; }
.pv2 .band .btn { min-height: 58px; padding: 0 34px; font-size: 1rem; }

/* ════════ FOOTER (the live footer's structure: brand, Platform, Resources, Legal, bottom bar) ════════ */
@media (max-width: 859px) { } /* room for the floating buttons */
@media (min-width: 860px) { }
@media (min-width: 860px) { }


/* ════════ FLOATING: back to top + the Scan on phones (the nav CTA hides under 480px) ════════ */
.pv2 .fab { position: fixed; z-index: 58; right: var(--site-gut-r); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line-2); color: var(--ink); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
.pv2 .fab.on { opacity: 1; transform: none; pointer-events: auto; }
.pv2 .fab svg { width: 18px; height: 18px; }
.pv2 .fab:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
.pv2 .fabcta { position: fixed; z-index: 58; left: var(--site-gut-l); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); min-height: 46px; padding: 0 18px 0 16px; border-radius: 999px; display: none; align-items: center; gap: 9px;
  font: 800 0.8rem/1 var(--site-font-disp); letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-fg); text-decoration: none;
  background: linear-gradient(135deg, var(--warm), var(--site-warm-press)); box-shadow: 0 12px 30px rgba(245,120,66,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-out); }
.pv2 .fabcta svg { width: 15px; height: 15px; }
.pv2 .fabcta.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 479px) { .pv2 .fabcta { display: inline-flex; } }
@media (min-width: 860px) { }


/* ════════ THE MATH: two from-zero bars on one dollar axis. Solid = the low end, stripes = the spread to the high end. ════════ */
.pv2 .math-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .pv2 .math-grid { grid-template-columns: 1.3fr 0.7fr; align-items: start; } }
.pv2 .costchart { padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px; align-content: start; }
.pv2 .cc-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.pv2 .cc-head .k { font: 700 0.68rem/1.3 var(--site-font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.pv2 .cc-plan { font: 500 0.9rem/1.6 var(--site-font-body); color: var(--ink-2); }
.pv2 .cc-plan-k { display: inline-block; margin-right: 6px; font: 700 0.68rem/1 var(--site-font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.pv2 .cc-plan-line b { font: 700 1rem/1 var(--font-num); color: var(--ink); }
.pv2 .cc-plan-line .nm { font-weight: 700; color: var(--ink); }
.pv2 .cc-all { display: inline-flex; align-items: center; min-height: 32px; margin-left: 4px; padding: 0 2px; color: var(--pv15); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(47, 191, 113,0.4); }
.pv2 .cc-all:hover, .pv2 .cc-all:focus-visible { border-bottom-color: var(--brand-ink); outline: none; }
html[data-theme="light"] .pv2 .cc-all { border-bottom-color: rgba(30,94,52,0.4); }
.pv2 .cc-rows { position: relative; display: grid; gap: 18px; padding: 22px 8px 0 0; }
.pv2 .cc-row { display: grid; gap: 8px; }
@media (min-width: 640px) { .pv2 .cc-row { grid-template-columns: 220px 1fr; gap: 16px; align-items: center; } }
.pv2 .cc-name { font: 600 0.92rem/1.35 var(--site-font-body); color: var(--ink); }
.pv2 .cc-name small { display: block; margin-top: 3px; font: 500 0.74rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .cc-name small .cc-plan-name { color: var(--ink-2); font-weight: 700; }
.pv2 .cc-track { position: relative; height: 38px; }
.pv2 .cc-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.pv2 .cc-bar { position: absolute; top: 7px; left: 0; right: 0; height: 24px; cursor: default; outline: none; }
.pv2 .cc-bar .segs { position: absolute; inset: 0; clip-path: inset(-2px 100% -2px 0); transition: clip-path 1.1s var(--ease-out); }
.pv2 .cc-bar.in .segs { clip-path: inset(-2px 0 -2px 0); }
.pv2 .seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: max(0px, calc(var(--w) - 2px)); border-radius: 4px; transition: left 0.6s var(--ease-out), width 0.6s var(--ease-out); }
.pv2 .seg.svc.solid { background: var(--site-chart-svc); }
.pv2 .seg.svc.rng { background: repeating-linear-gradient(135deg, var(--site-chart-svc) 0 3px, transparent 3px 8px), var(--site-chart-svc-t); }
.pv2 .seg.bag.solid { background: var(--site-chart-bag); }
.pv2 .seg.bag.rng { background: repeating-linear-gradient(135deg, var(--site-chart-bag) 0 3px, transparent 3px 8px), var(--site-chart-bag-t); }
.pv2 .seg.plan { background: var(--site-chart-plan); }
.pv2 .cc-bar .v { position: absolute; top: 50%; left: calc(var(--hi) + 8px); transform: translateY(-50%); padding: 3px 7px; border-radius: 6px; background: rgba(10,15,21,0.78); color: #FFF; font: 700 0.76rem/1 var(--font-num); white-space: nowrap; opacity: 0; transition: opacity 0.4s ease 0.9s, left 0.6s var(--ease-out), right 0.6s var(--ease-out); }
.pv2 .cc-bar .v.inside { left: auto; right: calc(100% - var(--hi) + 6px); }
.pv2 .cc-bar.in .v { opacity: 1; }
.pv2 .cc-bar:hover .tip, .pv2 .cc-bar:focus-visible .tip { opacity: 1; transform: translate(-50%, -6px); }
.pv2 .cc-bar .tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 0); min-width: 220px; max-width: 320px; padding: 8px 11px; border-radius: 10px; background: rgba(10,15,21,0.94); color: #FFF; font: 500 0.74rem/1.45 var(--site-font-body); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 26px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 3; }
.pv2 .cc-bar .tip b { font-family: var(--font-num); }
.pv2 .cc-axis { position: relative; height: 18px; font: 600 0.68rem/1 var(--font-num); color: var(--ink-2); }
@media (min-width: 640px) { .pv2 .cc-axis { margin-left: 236px; } }
.pv2 .cc-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.pv2 .cc-axis span:first-child { transform: none; }
.pv2 .cc-axis span:last-child { transform: translateX(-100%); }
.pv2 .cc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 600 0.76rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .cc-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pv2 .cc-legend .sw.svc { background: var(--site-chart-svc); }
.pv2 .cc-legend .sw.bag { background: var(--site-chart-bag); }
.pv2 .cc-legend .sw.plan { background: var(--site-chart-plan); }
.pv2 .cc-legend .sw.rng { background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, transparent 2px 5px), rgba(127,127,127,0.2); }
.pv2 .cc-you { position: absolute; top: -4px; bottom: -4px; left: calc(100% * var(--f, 0.5)); width: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease, left 0.6s var(--ease-out); z-index: 2; }
.pv2 .cc-rows.has-you .cc-you { opacity: 1; }
.pv2 .cc-you i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--warm); box-shadow: 0 0 12px rgba(245,120,66,0.6); }
.pv2 .cc-you b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 0.64rem/1 var(--site-font-disp); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-fg); background: linear-gradient(135deg, var(--warm), var(--site-warm-press)); padding: 6px 9px; border-radius: 999px; }
.pv2 .cc-you.edge-r b { left: auto; right: -2px; transform: none; }
.pv2 .cc-you.edge-l b { left: -2px; transform: none; }
.pv2 .cc-form { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.pv2 .cc-form label { font: 700 0.88rem/1.4 var(--site-font-body); }
.pv2 .cc-out { font: 500 0.9rem/1.6 var(--site-font-body); color: var(--ink-2); min-height: 1.5em; }
.pv2 .cc-out b { font-family: var(--font-num); color: var(--ink); }
.pv2 .cc-li { font: 500 0.88rem/1.55 var(--site-font-body); color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line); }
.pv2 .cc-li b { font: 700 1rem/1 var(--font-num); color: var(--ink); }
.pv2 .cc-li small { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--ink-2); }
/* three quote cards: a column beside the chart; a snap row on phones */
.pv2 .quotes { display: grid; gap: 14px; }
@media (min-width: 960px) { .pv2 .quotes { grid-auto-rows: minmax(0, 1fr); } .pv2 .quotes .quote { align-content: start; padding: 20px 22px; } }
@media (max-width: 959px) {
  .pv2 .quotes { grid-auto-flow: column; grid-auto-columns: min(84%, 360px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--site-gut-l); scroll-padding-right: var(--site-gut-r); margin-left: calc(-1 * var(--site-gut-l)); margin-right: calc(-1 * var(--site-gut-r)); padding: 4px var(--site-gut-r) 10px var(--site-gut-l); scrollbar-width: none; }
  .pv2 .quotes::-webkit-scrollbar { display: none; }
  .pv2 .quotes .quote { scroll-snap-align: start; padding: 22px; }
  .pv2 .quotes .qhead { display: grid; grid-template-columns: 50px 1fr; column-gap: 13px; row-gap: 8px; align-items: center; }
  .pv2 .quotes .qreal { grid-column: 2; justify-self: start; margin-left: 0; }
}


/* ════════ MOTION ════════ */
html.pv2-js .pv2 [data-rv] { opacity: 0; transform: translateY(26px); }
/* the hero copy starts hidden only when the script runs, so GSAP brings it in without a flash; no-motion shows it */
/* pass 44 (the speed budget): the hero's entrance is CSS, from the first paint. It used to wait for the page script,
   and on a slow phone the headline (the LCP) appeared 3 to 4 s in. Staggered by order; the script only adds .rv-in. */
@keyframes pv2-hero-in { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
html.pv2-js:not(.no-motion) .pv2 [data-hero] { animation: pv2-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.pv2-js:not(.no-motion) .pv2 [data-hero] ~ [data-hero] { animation-delay: 0.08s; }
html.pv2-js:not(.no-motion) .pv2 [data-hero] ~ [data-hero] ~ [data-hero] { animation-delay: 0.16s; }
html.pv2-js:not(.no-motion) .pv2 [data-hero] ~ [data-hero] ~ [data-hero] ~ [data-hero] { animation-delay: 0.24s; }
html.no-motion .pv2 [data-rv] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pv2 [data-rv] { opacity: 1 !important; transform: none !important; }
  .pv2 .scan-sheen { animation: none; opacity: 0; }
  .pv2 .scan-head .st i { animation: none; }
  .pv2 .scan-chip { opacity: 1; transform: none; }
  .pv2 .tk-ticker div { opacity: 1; transform: none; }
  .pv2 #grain { animation: none; }
  .pv2 #curRing { display: none; }
  .pv2 .btn, .pv2 .gcard, .pv2 .flip { transition: none !important; }
  .pv2 .stage video.film, .pv2 .skip, .pv2 .filmbar { display: none; }
  .pv2 .beat { transition: none; }
  .pv2 .hint { display: none; }
  .pv2 .land video { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   PRICING · pass 14 (Oct 17 night; pass 13 accepted, D-235)
   The conversion page, built on the home page's Glass Cockpit shell
   (same tokens, nav, buttons, cards, chart, quotes, band, footer).
   Order (D-229): hero → plan cards → what each plan knows → the math,
   three tiers → Mark J. + the four quotes → Playbook strip → guarantee
   + FAQ → closing Start free. Four slots (D-232): pricing.lead,
   pricing.cards.cta, pricing.proof.order, pricing.table.order.
   Names and prices never live in this markup: the registry stub fills
   them here; at build the server prints them (D-079).
   ════════════════════════════════════════════════════════════════════ */

/* ════════ AB SLOT SWAP RULES (AB-SPEC v1.2 §3.6, §3.7) · !important both ways ════════ */
html[data-bbx-pricing-lead="b"] .pv2 [data-bb-slot="pricing.lead"] > [data-bb-v="a"] { display: none !important; }
html[data-bbx-pricing-lead="b"] .pv2 [data-bb-slot="pricing.lead"] > [data-bb-v="b"] { display: inline !important; }
html[data-bbx-pricing-cards-cta="b"] .pv2 [data-bb-slot="pricing.cards.cta"] > [data-bb-v="a"] { display: none !important; }
html[data-bbx-pricing-cards-cta="b"] .pv2 [data-bb-slot="pricing.cards.cta"] > [data-bb-v="b"] { display: inline !important; }
html[data-bbx-pricing-proof-order="b"] .pv2 [data-bb-slot="pricing.proof.order"] > [data-bb-v="a"],
html[data-bbx-pricing-table-order="b"] .pv2 [data-bb-slot="pricing.table.order"] > [data-bb-v="a"] { display: none !important; }
html[data-bbx-pricing-proof-order="b"] .pv2 [data-bb-slot="pricing.proof.order"] > [data-bb-v="b"],
html[data-bbx-pricing-table-order="b"] .pv2 [data-bb-slot="pricing.table.order"] > [data-bb-v="b"] { display: block !important; }
/* the quotes section appears once: arm a's copy sits after the math, arm b's copy sits after the hero (AB-SPEC §3.8) */
.pv2 [data-bb-slot="pricing.proof.order"] > [data-bb-v="b"], .pv2 [data-bb-slot="pricing.table.order"] > [data-bb-v="b"] { display: none; }

/* ════════ HERO ════════ */
.pv2 .phero { position: relative; overflow: hidden; padding: calc(var(--pv-navh) + clamp(28px, 6vh, 84px)) 0 clamp(120px, 16vh, 180px); color: var(--ink); }
.pv2 .phero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pv2 .phero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.pv2 .phero-bg canvas.ready { opacity: var(--pv16); }
.pv2 .phero-bg .scrim { position: absolute; inset: 0; background: var(--pv17); }
.pv2 .phero-grid { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
@media (min-width: 980px) { .pv2 .phero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }
.pv2 .phero .chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgba(47, 191, 113, 0.10); border: 1px solid rgba(47, 191, 113, 0.3);
  font: 700 0.7rem/1 var(--site-font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv18); margin-bottom: 22px; }
html[data-theme="light"] .pv2 .phero .chip { border-color: rgba(30,94,52,0.35); }
.pv2 .phero .chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; font-style: normal; }
.pv2 .phero h1 { font-size: clamp(2.2rem, 6.4vw, 4.3rem); font-weight: var(--site-w-disp); line-height: 1.02; letter-spacing: var(--site-track-disp); text-wrap: balance; max-width: 15ch; }
.pv2 .phero-sub { margin: 22px 0 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; color: var(--ink-2); max-width: 54ch; }
.pv2 .phero-sub b { color: var(--ink); font-weight: 700; }
.pv2 .phero-sub-s, .pv2 .pill-line { display: none; }
.pv2 .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pv2 .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 0.82rem/1 var(--site-font-body); color: var(--ink-2); }
.pv2 .pill svg { width: 15px; height: 15px; color: var(--pv19); flex: none; }
.pv2 .phero-cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 26px; }
.pv2 .phero-found { margin-top: 16px; font: 500 0.88rem/1.6 var(--site-font-body); color: var(--ink-2); max-width: 54ch; }
.pv2 .phero-found b { font-family: var(--font-num); font-weight: 700; color: var(--ink); font-size: 1.05em; }

/* the altitude ladder: D-072's "you see it → you have a plan → you have instruments → you have a person" */
.pv2 .ladder { display: none; position: relative; padding-left: 34px; }
@media (min-width: 980px) { .pv2 .ladder { display: grid; gap: 26px; } }
.pv2 .ladder::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--pv20); }
.pv2 .rung { position: relative; display: grid; gap: 3px; opacity: 0; transform: translateX(14px); }
html.no-motion .pv2 .rung, .pv2 .rung.in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.7s var(--ease-out); }
.pv2 .rung::before { content: ''; position: absolute; left: -31px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand-ink); box-shadow: var(--pv21); }
html[data-theme="light"] .pv2 .rung::before { border-color: var(--brand); }
.pv2 .rung.top::before { border-color: var(--warm); box-shadow: 0 0 12px rgba(245,120,66,0.5); }
.pv2 .rung .alt { font: 700 0.66rem/1 var(--font-num); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.pv2 .rung .nm { font: 800 1.15rem/1.2 var(--site-font-disp); letter-spacing: -0.01em; }
.pv2 .rung .ph { font: 500 0.92rem/1.5 var(--site-font-body); color: var(--ink-2); }

/* ════════ PLAN CARDS ════════ */
.pv2 .plans-sec { position: relative; z-index: 2; margin-top: calc(-1 * clamp(84px, 12vh, 132px)); padding-top: 0; }
.pv2 .plans { display: grid; gap: 16px; }
@media (min-width: 700px) { .pv2 .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pv2 .plans { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.pv2 .pcard { position: relative; padding: 26px 24px 24px; display: grid; gap: 0; align-content: start; }
.pv2 .pcard.feat { border-color: var(--pv22); box-shadow: var(--pv23); }
@media (min-width: 1100px) { .pv2 .pcard.feat { transform: translateY(-10px); } }
.pv2 .plan-tag { position: absolute; top: -13px; left: 22px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, var(--warm), var(--site-warm-press)); color: var(--warm-fg); font: 800 0.62rem/1 var(--site-font-disp); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(245,120,66,0.35); }
.pv2 .plan-k { display: inline-flex; align-items: center; gap: 8px; font: 700 0.66rem/1.3 var(--site-font-disp); letter-spacing: 0.18em; text-transform: uppercase; color: var(--pv24); }
.pv2 .plan-k i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pv2 .plan-name { margin-top: 10px; font: 800 1.55rem/1.15 var(--site-font-disp); letter-spacing: -0.02em; }
.pv2 .plan-line { margin-top: 8px; font: 500 0.92rem/1.55 var(--site-font-body); color: var(--ink-2); min-height: 0; }
@media (min-width: 1100px) { .pv2 .plan-line { min-height: 4.65em; } }
.pv2 .plan-tag[hidden] { display: none; }
.pv2 .plan-price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pv2 .plan-price .cur { font: 700 1.3rem/1 var(--font-num); color: var(--ink-2); align-self: start; margin-top: 6px; }
.pv2 .plan-price .num { font: 700 clamp(2.6rem, 4vw, 3.2rem)/1 var(--font-num); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: var(--pv25); }
.pv2 .plan-price .per { font: 600 0.92rem/1 var(--site-font-body); color: var(--ink-2); }
.pv2 .plan-found { margin-top: 8px; font: 500 0.82rem/1.5 var(--site-font-body); color: var(--ink-2); min-height: 0; }
@media (min-width: 1100px) { .pv2 .plan-found { min-height: 4.5em; } }
.pv2 .plan-found b { font-family: var(--font-num); font-weight: 700; color: var(--ink); }
.pv2 .plan-mo { margin-top: 6px; font: 600 0.88rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .plan-mo b { font-family: var(--font-num); color: var(--ink); }
/* Wingman's cap pops (Chris, Oct 29): the home page's orange badge */
.pv2 .plan-cap { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, var(--warm), var(--site-warm-press, #E86A2E)); font: 800 0.7rem/1 var(--site-font-disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-fg); box-shadow: 0 8px 22px rgba(245, 120, 66, 0.35); }
.pv2 .plan-cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-fg); opacity: 0.7; }
.pv2 .plan-cap.is-amber { background: #F5B731; box-shadow: 0 8px 22px rgba(245, 183, 49, 0.35); }
.pv2 .plan-cap.is-red { background: #C62828; color: #FFFFFF; box-shadow: 0 8px 22px rgba(198, 40, 40, 0.4); }
.pv2 .plan-cap.is-red i { background: #FFFFFF; }
.pv2 .plan-rows { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.pv2 .plan-rows li { position: relative; padding-left: 26px; font: 500 0.9rem/1.5 var(--site-font-body); color: var(--ink-2); }
.pv2 .plan-rows li b { color: var(--ink); font-weight: 700; }
.pv2 .plan-rows li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 15px; height: 15px; border-radius: 50%; background: rgba(47, 191, 113,0.14); border: 1px solid rgba(47, 191, 113,0.45); }
.pv2 .plan-rows li::after { content: ''; position: absolute; left: 4px; top: calc(0.42em + 3px); width: 6px; height: 4px; border-left: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: rotate(-45deg); }
html[data-theme="light"] .pv2 .plan-rows li::after { border-color: var(--brand); }
.pv2 .plan-rows li.all { padding-left: 0; font-weight: 700; color: var(--ink); }
.pv2 .plan-rows li.all::before, .pv2 .plan-rows li.all::after { display: none; }
.pv2 .plan-foot { margin-top: 22px; display: grid; gap: 10px; }
.pv2 .pcard .btn { width: 100%; }
.pv2 .plan-micro { font: 500 0.78rem/1.5 var(--site-font-body); color: var(--ink-2); text-align: center; }
.pv2 .plans-note { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font: 500 0.88rem/1.6 var(--site-font-body); color: var(--ink-2); }
.pv2 .plans-note b { color: var(--ink); font-family: var(--font-num); }

/* ════════ WHAT EACH PLAN KNOWS (the matrix) ════════ */
.pv2 .freeline { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 18px; font: 500 0.92rem/1.6 var(--site-font-body); color: var(--ink-2); }
.pv2 .freeline .k { font: 700 0.66rem/1 var(--site-font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv26); margin-right: 4px; }
.pv2 .freeline span.it { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--pv27); font-size: 0.86rem; color: var(--ink); }
.pv2 .cmp-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: 22px; scrollbar-width: thin; }
.pv2 .cmp { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font: 500 0.92rem/1.45 var(--site-font-body); color: var(--ink-2); }
.pv2 .cmp th, .pv2 .cmp td { padding: 14px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.pv2 .cmp th:first-child, .pv2 .cmp td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 190px; max-width: 260px; }
.pv2 .cmp thead th { background: var(--surface); vertical-align: bottom; padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.pv2 .cmp tbody tr:last-child td { border-bottom: 0; }
.pv2 .cmp td:first-child { color: var(--ink); font-weight: 600; }
.pv2 .cmp td:first-child small { display: block; margin-top: 2px; font: 500 0.76rem/1.4 var(--site-font-body); color: var(--ink-2); }
.pv2 .cmp .pn { display: grid; gap: 4px; justify-items: center; }
.pv2 .cmp .pn b { font: 800 0.98rem/1.2 var(--site-font-disp); color: var(--ink); letter-spacing: -0.01em; }
.pv2 .cmp .pn small { font: 600 0.78rem/1.3 var(--font-num); color: var(--ink-2); }
.pv2 .cmp .pn .k { font: 700 0.62rem/1 var(--site-font-disp); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pv28); }
.pv2 .cmp th.feat, .pv2 .cmp td.feat { background: var(--pv29); }
.pv2 .cmp .yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(47, 191, 113,0.14); border: 1px solid rgba(47, 191, 113,0.45); color: var(--pv30); }
.pv2 .cmp .yes svg { width: 13px; height: 13px; }
.pv2 .cmp .no { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pv2 .cmp .val { font: 700 0.9rem/1.3 var(--font-num); color: var(--ink); }
.pv2 .cmp .val small { display: block; font: 500 0.74rem/1.3 var(--site-font-body); color: var(--ink-2); }
.pv2 .cmp tr.more td { position: static; max-width: none; text-align: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.pv2 .cmp-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--pv31); color: var(--ink); font: 700 0.78rem/1 var(--site-font-disp); letter-spacing: 0.08em; text-transform: uppercase; }
.pv2 .cmp-more svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.pv2 .cmp-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pv2 .cmp-more:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.pv2 .cmp tr.insider[hidden] { display: none; }
.pv2 .cmp tfoot td { padding-top: 18px; border-bottom: 0; }
.pv2 .cmp tfoot .btn { min-height: 44px; padding: 0 16px; font-size: 0.78rem; width: 100%; }
.pv2 .cmp-src { margin-top: 12px; font: 500 0.82rem/1.5 var(--site-font-body); color: var(--ink-2); }

/* three plan pills on the pricing chart (the home page shows one plan, D-214; the pricing page carries all three) */
.pv2 .cc-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2 .cc-pick button { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--pv32); color: var(--ink-2); font: 700 0.8rem/1 var(--site-font-disp); letter-spacing: 0.04em; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.pv2 .cc-pick button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pv2 .cc-pick button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* ════════ QUOTES: Mark J. leads, the four follow ════════ */
.pv2 .quote.lead { padding: clamp(26px, 4vw, 40px); gap: 20px; }
.pv2 .quote.lead .qbody { font: italic 500 clamp(1.25rem, 2.6vw, 1.75rem)/1.4 var(--site-font-body); color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.pv2 .quote.lead .qav { width: 56px; height: 56px; font-size: 1.1rem; }
.pv2 .quote.lead .qmark { font: 900 5rem/0.6 var(--site-font-disp); color: var(--pv33); height: 0.5em; }
.pv2 .quotes-4 { margin-top: 14px; }
@media (min-width: 960px) { .pv2 .quotes-4.quotes { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; } }

/* ════════ PLAYBOOK STRIP ════════ */
.pv2 .pb { display: grid; gap: 18px; padding: clamp(22px, 3.5vw, 34px); align-items: center; }
@media (min-width: 860px) { .pv2 .pb { grid-template-columns: auto 1fr auto; gap: 28px; } }
.pv2 .pb-badge { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #FFF; box-shadow: 0 14px 34px rgba(30,94,52,0.45); }
.pv2 .pb-badge svg { width: 34px; height: 34px; }
.pv2 .pb h3 { font: 800 1.35rem/1.2 var(--site-font-disp); letter-spacing: -0.01em; }
.pv2 .pb h3 b { font-family: var(--font-num); color: var(--pv34); }
.pv2 .pb p { margin-top: 6px; font: 500 0.95rem/1.6 var(--site-font-body); color: var(--ink-2); max-width: 60ch; }
.pv2 .pb .btn { white-space: nowrap; }

/* ════════ GUARANTEE + FAQ ════════ */
.pv2 .gf { display: grid; gap: 16px; }
@media (min-width: 960px) { .pv2 .gf { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.pv2 .guar { padding: clamp(24px, 3.5vw, 34px); display: grid; gap: 14px; align-content: start; position: sticky; top: calc(var(--pv-navh) + 12px); }
@media (max-width: 959px) { .pv2 .guar { position: static; } }
.pv2 .guar .gi { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(47, 191, 113,0.12); border: 1px solid rgba(47, 191, 113,0.35); color: var(--pv35); }
.pv2 .guar .gi svg { width: 26px; height: 26px; }
.pv2 .guar h3 { font: 800 1.35rem/1.2 var(--site-font-disp); letter-spacing: -0.01em; }
.pv2 .guar p { font: 500 0.95rem/1.6 var(--site-font-body); color: var(--ink-2); }
.pv2 .guar .veteran { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 0.88rem/1.5 var(--site-font-body); color: var(--ink-2); }
.pv2 .faq { display: grid; gap: 10px; }
.pv2 .faq details { padding: 0 22px; }
.pv2 .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 0; font: 700 1.02rem/1.35 var(--site-font-disp); letter-spacing: -0.01em; color: var(--ink); }
.pv2 .faq summary::-webkit-details-marker { display: none; }
.pv2 .faq summary .pm { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink-2); transition: transform 0.3s var(--ease-out), background 0.2s ease; }
.pv2 .faq summary .pm svg { width: 14px; height: 14px; }
.pv2 .faq details[open] summary .pm { transform: rotate(45deg); background: rgba(47, 191, 113,0.14); color: var(--brand-ink); border-color: rgba(47, 191, 113,0.4); }
.pv2 .faq summary:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; border-radius: 12px; }
.pv2 .faq .ans { padding: 0 0 20px; font: 500 0.95rem/1.65 var(--site-font-body); color: var(--ink-2); max-width: 64ch; }
.pv2 .faq .ans b { color: var(--ink); font-family: var(--font-num); font-weight: 700; }
.pv2 .faq .ans p + p { margin-top: 10px; }
.pv2 .unsrc { display: inline-block; font: 600 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 0.06em; color: var(--est-ink); border: 1px dashed rgba(245,158,11,0.6); border-radius: 6px; padding: 3px 6px; vertical-align: middle; }

/* ════════ THE HANDOFF SHEET (explorer only: shows where a plan button goes; on the live site the link is plain) ════════ */

/* ════════ small things ════════ */
.pv2 .band .sub2 { font: 500 0.9rem/1.6 var(--site-font-body); color: var(--ink-2); }
.pv2 .band .sub2 b { font-family: var(--font-num); color: var(--ink); }
@media (max-height: 560px) and (orientation: landscape) { .pv2 .phero { padding-top: calc(var(--pv-navh) + 14px); padding-bottom: 110px; } .pv2 .phero h1 { font-size: clamp(1.7rem, 7vh, 2.6rem); } .pv2 .ladder { display: none; } }
@media (prefers-reduced-motion: reduce) { .pv2 .rung { opacity: 1; transform: none; } .pv2 .phero-bg canvas { display: none; } }
.pv2 .phero h1 .hw { display: inline-block; }
.pv2 .phero h1 .hw i { display: inline-block; font-style: normal; will-change: transform, opacity; }

/* ════════ PHONES: the four cards as a snap row (the featured plan centered on load), the table as one plan at a time ════════ */
.pv2 .plans-dots { display: none; }
.pv2 .swipe-cue { display: none; }
.pv2 .cmp-pick { display: none; }
@media (max-width: 699px) {
  .pv2 .plans { grid-auto-flow: column; grid-auto-columns: min(86%, 340px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--site-gut-l); scroll-padding-right: var(--site-gut-r);
    margin-left: calc(-1 * var(--site-gut-l)); margin-right: calc(-1 * var(--site-gut-r)); padding: 16px var(--site-gut-r) 40px var(--site-gut-l); margin-bottom: -24px; gap: 12px; scrollbar-width: none; }
  .pv2 .plans::-webkit-scrollbar { display: none; }
  .pv2 .pcard { scroll-snap-align: center; }
  .pv2 .plans-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .pv2 .plans-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background 0.2s ease, transform 0.2s ease; }
  .pv2 .plans-dots i.on { background: var(--pv36); transform: scale(1.25); }
  .pv2 .swipe-cue { display: inline; color: var(--ink); font-weight: 700; }
  .pv2 .plans-note { margin-top: 12px; }
  /* D-237: the phone hero is the headline, one sub line, the founding deadline, Start free and one pill line; the ladder,
     Patent Pending, the kicker chip and Compare plans stay at tablet and desktop; the first card peeks on the first screen */
  .pv2 .phero { padding-top: calc(var(--pv-navh) + 18px); padding-bottom: 118px; }
  .pv2 .phero .chip, .pv2 .phero-sub-l, .pv2 .pills, .pv2 #heroCompare { display: none; }
  .pv2 .phero-sub-s { display: block; margin-top: 14px; font-size: 1rem; line-height: 1.55; }
  .pv2 .pill-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 0.7rem/1.3 var(--site-font-disp); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .pv2 .pill-line svg { width: 15px; height: 15px; color: var(--pv37); flex: none; }
  .pv2 .phero-cta { margin-top: 18px; }
  .pv2 .phero-cta .btn { width: 100%; }
  .pv2 .phero-found { margin-top: 12px; }
  .pv2 .plans-sec { margin-top: -84px; }
  .pv2 .quote.lead .qhead { display: grid; grid-template-columns: 56px 1fr; column-gap: 13px; row-gap: 8px; align-items: center; }
  .pv2 .quote.lead .qreal { grid-column: 2; justify-self: start; margin-left: 0; }
  .pv2 .cmp-pick { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pv2 .cmp-pick::-webkit-scrollbar { display: none; }
  .pv2 .cmp-pick button { flex: none; min-height: 40px; padding: 0 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--pv38); color: var(--ink-2); font: 700 0.8rem/1 var(--site-font-disp); letter-spacing: 0.04em; }
  .pv2 .cmp-pick button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .pv2 .cmp-wrap[data-show] .cmp { min-width: 0; }
  .pv2 .cmp-wrap[data-show] .cmp th:first-child, .pv2 .cmp-wrap[data-show] .cmp td:first-child { position: static; min-width: 0; max-width: none; width: 58%; }
  .pv2 .cmp-wrap[data-show] .cmp th, .pv2 .cmp-wrap[data-show] .cmp td { padding: 13px 12px; }
  .pv2 .cmp-wrap[data-show] .cmp tfoot .btn { width: 100%; }
  .pv2 .cmp-wrap[data-show="free"] [data-col]:not([data-col="free"]), .pv2 .cmp-wrap[data-show="t1"] [data-col]:not([data-col="t1"]), .pv2 .cmp-wrap[data-show="t2"] [data-col]:not([data-col="t2"]), .pv2 .cmp-wrap[data-show="t3"] [data-col]:not([data-col="t3"]) { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pv2 .plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(60%, 340px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--site-gut-l); scroll-padding-right: var(--site-gut-r);
    margin-left: calc(-1 * var(--site-gut-l)); margin-right: calc(-1 * var(--site-gut-r)); padding: 16px var(--site-gut-r) 32px var(--site-gut-l); margin-bottom: -16px; gap: 12px; scrollbar-width: none; }
  .pv2 .plans::-webkit-scrollbar { display: none; }
  .pv2 .pcard { scroll-snap-align: center; }
  .pv2 .pcard.feat { transform: none; }
  .pv2 .plan-line, .pv2 .plan-found { min-height: 0; }
  .pv2 .plans-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .pv2 .plans-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
  .pv2 .plans-dots i.on { background: var(--brand-ink); transform: scale(1.25); }
  .pv2 .swipe-cue { display: inline; color: var(--ink); font-weight: 700; }
  .pv2 .phero .chip, .pv2 .phero-sub-l, .pv2 .pills, .pv2 #heroCompare { display: none; }
  .pv2 .phero-sub-s { display: block; margin-top: 12px; font-size: 0.98rem; line-height: 1.5; }
  .pv2 .pill-line { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 0.68rem/1.3 var(--site-font-disp); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .pv2 .pill-line svg { width: 14px; height: 14px; color: var(--brand-ink); flex: none; }
  .pv2 .phero-cta { margin-top: 14px; }
  .pv2 .phero-found { margin-top: 10px; }
}
/* four quote cards in a row: the badge sits under the name at every width */
.pv2 .quotes-4 .qhead { order: -1; display: grid; grid-template-columns: 50px 1fr; column-gap: 13px; row-gap: 8px; align-items: center; }
.pv2 .quotes-4 .qreal { grid-column: 2; justify-self: start; margin-left: 0; }
/* pricing.proof.order arm b: the quotes take the lift into the hero; the cards follow at normal spacing */
html[data-bbx-pricing-proof-order="b"] .pv2 #plans.plans-sec { margin-top: 0; padding-top: clamp(56px, 10vh, 110px); }
.pv2 .phero h1 .hl .pt { color: var(--pv39); text-shadow: none; }
html[data-theme="light"] .pv2 .phero .hl { color: var(--brand); text-shadow: none; }
/* P4 v1.1 (D-235): light --tx-3 is 0.64 alpha, 5.25:1 on white, in the token source; no override here. */

/* ═══ THEMED VALUES: each bench light override paired with its dark rule (light is the contract default) ═══ */

.pv2 {
  --pv1: radial-gradient(90% 60% at 70% -10%, rgba(30, 94, 52, 0.13) 0%, transparent 60%), radial-gradient(60% 50% at 0% 45%, rgba(47, 191, 113, 0.06) 0%, transparent 60%), radial-gradient(70% 60% at 100% 90%, rgba(245, 120, 66, 0.07) 0%, transparent 55%), var(--bg);
  --pv2: linear-gradient(rgba(14,40,22,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,40,22,0.05) 1px, transparent 1px);
  --pv3: 0.028;
  --pv4: normal;
  --pv5: rgba(232, 106, 46, 0.8);
  --pv6: rgba(14,40,22,0.05);
  --pv7: rgba(14,40,22,0.09);
  --pv8: rgba(14, 40, 22, 0.05);
  --pv9: 1px rgba(14, 40, 22, 0.13);
  --pv10: 0 18px 44px rgba(14,40,22,0.1), inset 0 1px 0 rgba(255,255,255,0.85);
  --pv11: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 94, 52, 0.08), transparent 65%);
  --pv12: 0 28px 64px rgba(14,40,22,0.18), 0 0 40px rgba(47, 191, 113,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
  --pv13: rgba(14,40,22,0.05);
  --pv14: radial-gradient(70% 90% at 50% 110%, rgba(30, 94, 52, 0.18) 0%, transparent 65%), radial-gradient(40% 50% at 80% 0%, rgba(245, 120, 66, 0.08) 0%, transparent 60%);
  --pv15: var(--brand);
  --pv16: 0.18;
  --pv17: linear-gradient(180deg, var(--bg) 0%, rgba(243,246,242,0.2) 26%, rgba(243,246,242,0.2) 60%, var(--bg) 100%);
  --pv18: var(--brand);
  --pv19: var(--brand);
  --pv20: linear-gradient(180deg, var(--warm) 0%, var(--brand) 45%, rgba(14,40,22,0.14) 100%);
  --pv21: none;
  --pv22: rgba(30,94,52,0.4);
  --pv23: 0 24px 56px rgba(14,40,22,0.16), 0 0 50px rgba(47, 191, 113,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  --pv24: var(--brand);
  --pv25: none;
  --pv26: var(--brand);
  --pv27: rgba(14,40,22,0.04);
  --pv28: var(--brand);
  --pv29: rgba(30,94,52,0.06);
  --pv30: var(--brand);
  --pv31: rgba(14,40,22,0.04);
  --pv32: rgba(14,40,22,0.04);
  --pv33: rgba(30,94,52,0.18);
  --pv34: var(--brand);
  --pv35: var(--brand);
  --pv39: var(--ink);
}
html[data-theme="dark"] .pv2 {
  --pv1: radial-gradient(90% 60% at 70% -10%, rgba(30, 94, 52, 0.34) 0%, transparent 60%), radial-gradient(60% 50% at 0% 40%, rgba(47, 191, 113, 0.07) 0%, transparent 60%), radial-gradient(70% 60% at 100% 90%, rgba(245, 120, 66, 0.05) 0%, transparent 55%), var(--bg);
  --pv2: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  --pv3: 0.05;
  --pv4: screen;
  --pv5: rgba(245, 120, 66, 0.85);
  --pv6: rgba(255,255,255,0.05);
  --pv7: rgba(255,255,255,0.1);
  --pv8: rgba(255, 255, 255, 0.045);
  --pv9: 1px rgba(255, 255, 255, 0.11);
  --pv10: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  --pv11: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 212, 147, 0.11), transparent 65%);
  --pv12: 0 34px 80px rgba(0,0,0,0.45), 0 0 40px rgba(47, 191, 113,0.12), inset 0 1px 0 rgba(255,255,255,0.07);
  --pv13: rgba(255,255,255,0.06);
  --pv14: radial-gradient(70% 90% at 50% 110%, rgba(30, 94, 52, 0.55) 0%, transparent 65%), radial-gradient(40% 50% at 80% 0%, rgba(245, 120, 66, 0.1) 0%, transparent 60%);
  --pv15: var(--brand-ink);
  --pv16: 0.42;
  --pv17: linear-gradient(180deg, var(--bg) 0%, rgba(12,18,25,0) 26%, rgba(12,18,25,0) 60%, var(--bg) 100%);
  --pv18: var(--brand-ink);
  --pv19: var(--brand-ink);
  --pv20: linear-gradient(180deg, var(--warm) 0%, var(--brand-ink) 45%, rgba(255,255,255,0.12) 100%);
  --pv21: 0 0 12px rgba(47, 191, 113,0.45);
  --pv22: rgba(47, 191, 113,0.42);
  --pv23: 0 30px 70px rgba(0,0,0,0.45), 0 0 60px rgba(47, 191, 113,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
  --pv24: var(--brand-ink);
  --pv25: 0 0 40px rgba(47, 191, 113,0.2);
  --pv26: var(--brand-ink);
  --pv27: rgba(255,255,255,0.04);
  --pv28: var(--brand-ink);
  --pv29: rgba(47, 191, 113,0.06);
  --pv30: var(--brand-ink);
  --pv31: rgba(255,255,255,0.04);
  --pv32: rgba(255,255,255,0.04);
  --pv33: rgba(47, 191, 113,0.22);
  --pv34: var(--brand-ink);
  --pv35: var(--brand-ink);
  --pv39: var(--ink);
}
@media (max-width: 699px) {
.pv2 {
  --pv36: var(--brand);
  --pv37: var(--brand);
  --pv38: rgba(14,40,22,0.04);
}
html[data-theme="dark"] .pv2 {
  --pv36: var(--brand-ink);
  --pv37: var(--brand-ink);
  --pv38: rgba(255,255,255,0.04);
} }


/* ═══ THE HERO SCENE (the stutter fix, kept): nothing redraws per frame on the main thread.
   The canvas holds a still picture; the sweep is a veil the compositor slides (transform only);
   the zone outlines are SVG strokes drawn by CSS. ═══ */
.pv2 .phero-bg .scene { position: absolute; inset: 0; overflow: hidden; contain: strict; opacity: 0; transition: opacity 0.6s ease; }
.pv2 .phero-bg .scene.run { opacity: var(--pv16); }   /* the bench's canvas opacity, light and dark */
.pv2 .phero-bg .scene canvas { opacity: 1; transition: none; }
.pv2 .phero-bg .zones { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.pv2 .zones .line, .pv2 .zones .glow { fill: none; stroke: var(--zc); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pv2 .zones .line { stroke-width: 2; }
.pv2 .zones .glow { stroke-width: 7; opacity: 0.28; }
.pv2 .zones .fill, .pv2 .zones .dot { fill: var(--zc); opacity: 0; }
.pv2 .scene.run .zones .line, .pv2 .scene.run .zones .glow { animation: pv2-trace 1.4s linear var(--zd) forwards; }
.pv2 .scene.run .zones .fill { animation: pv2-fill 0.5s ease calc(var(--zd) + 1.4s) forwards; }
.pv2 .scene.run .zones .dot { animation: pv2-dot 0.3s ease calc(var(--zd) + 1.4s) forwards; }
.pv2 .phero-bg .veil { position: absolute; top: 0; bottom: 0; left: -90px; width: calc(100% + 240px);
  background: linear-gradient(90deg, rgba(47,191,113,0) 0, rgba(47,191,113,0.22) 90px, rgba(5,9,13,0.62) 90px);
  transform: translate3d(var(--from, -30px), 0, 0); will-change: transform; backface-visibility: hidden; }
html[data-theme="light"] .pv2 .phero-bg .veil { background: linear-gradient(90deg, rgba(47,191,113,0) 0, rgba(35,165,94,0.2) 90px, rgba(238,242,238,0.66) 90px); }
.pv2 .scene.run .veil { animation: pv2-sweep var(--dur, 3600ms) linear forwards; }
@keyframes pv2-trace { to { stroke-dashoffset: 0; } }
@keyframes pv2-fill { to { opacity: 0.07; } }
@keyframes pv2-dot { to { opacity: 1; } }
@keyframes pv2-sweep { from { transform: translate3d(var(--from, -30px), 0, 0); } to { transform: translate3d(var(--to, 2000px), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pv2 .phero-bg .scene { display: none; } }

/* phones: the floating buttons sit above the site's tab bar */
@media (max-width: 767px) {
}

/* ═══ Lenis (desktop, fine pointer only; the class is on <html> only while it runs) ═══ */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }

/* D-306: the arrival tag on every M2-only line until bb_m2_live */
.pv2 .m2tag { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--warm-soft); color: var(--warm-ink); font: 600 0.56rem/1 var(--font-num); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transform: translateY(-1px); }

/* D-339: the real list price struck through beside the founding price, the founding countdown, the live counters */
.pv2 .plan-list { flex-basis: 100%; margin-top: 4px; font: 600 0.84rem/1.3 var(--site-font-body); color: var(--ink-2); }
.pv2 .plan-list s { font-family: var(--font-num); font-weight: 700; color: var(--ink-2); text-decoration-thickness: 2px; }
.pv2 .phero-live { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.pv2 .phero-live:empty { display: none; }
.pv2 .pcount, .pv2 .pseats { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font: 600 0.82rem/1 var(--site-font-body); color: var(--ink-2); }
.pv2 .pcount b, .pv2 .pseats b { font: 700 1rem/1 var(--font-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.pv2 .plan-cap b { font-family: var(--font-num); color: inherit; }
/* low counts: amber, then red (Chris, Oct 29) */
.pv2 .pseats.is-amber { border-color: rgba(245, 183, 49, 0.55); background: rgba(245, 183, 49, 0.12); color: var(--est-ink); }
.pv2 .pseats.is-amber b { color: var(--est-ink); }
.pv2 .pseats.is-red { border-color: rgba(220, 60, 50, 0.6); background: rgba(220, 60, 50, 0.12); color: var(--danger); }
.pv2 .pseats.is-red b { color: var(--danger); }

/* pass 43 (REF §1.6): P-2 ships b, the trust line directly under the cards, its terms one line below */
.pv2 .trust-line, .trust-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; font: 700 0.92rem/1.4 var(--site-font-body, inherit); color: var(--ink); text-align: center; }
.trust-line svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand-ink); }
.trust-terms { margin: 6px auto 0; max-width: 64ch; font-size: 0.86rem; color: var(--ink-2); text-align: center; }

/* pass 45: the countdown under each founding price (a quiet line, not the hero's pill) */
.pv2 .plan-count { flex-basis: 100%; margin-top: 6px; }
.pv2 .pcount--card { padding: 0; border: 0; background: none; font: 600 0.84rem/1.3 var(--site-font-body); color: var(--brand-ink); }
.pv2 .pcount--card b { font: 700 0.95rem/1 var(--font-num); color: var(--brand-ink); }

/* pass 46: P-10 b, one member's before-and-after with its context line */
.pv2 .member-ba { margin: 18px 0 0; }
.pv2 .member-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.pv2 .member-ba-ph { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #0A0F15; aspect-ratio: 5 / 7; }
.pv2 .member-ba-ph picture { display: contents; }
.pv2 .member-ba-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv2 .member-ba-tag { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(10, 15, 21, 0.78); color: #FFFFFF; font: 700 0.66rem/1 var(--font-num); letter-spacing: 0.12em; text-transform: uppercase; }
.pv2 .member-ba figcaption { margin-top: 10px; max-width: 640px; color: var(--ink-2); font: 500 0.9rem/1.5 var(--site-font-body); }
/* pass 47: the cost chart's math, under the legend (LMP 182000) */
.pv2 .cc-math { margin: 10px 0 0; color: var(--ink-2); font: 500 0.74rem/1.5 var(--site-font-body); }