/* [HWR] heywillray.com Blue Night inner pages. Shared page system plus
   /playbook, /playbook-thanks, /first-client-playbook and the checkout overlay.
   Loads after hwr-v3.css (tokens and shell live there, scoped to .bn).
   Contract: vault 02-Brands/HWR/site-scrollcraft/art-direction.md. Every rule
   is scoped under html.bn. Grounds change by hard cut, never a gradient. */

/* ------------------------------------------------------ chapter sections */
html.bn .pg-sec { padding-block: clamp(var(--s-10), 9vw, var(--s-16)); background: var(--room); }
html.bn .pg-hero { padding-top: calc(var(--head-h) + clamp(var(--s-5), 9vh, 112px)); padding-bottom: clamp(var(--s-10), 9vw, var(--s-16)); }
html.bn .g-room { background: var(--room); }
html.bn .g-room-2 { background: var(--room-2); }
html.bn .g-room-3 { background: var(--room-3); }
html.bn .pg-in { max-width: 1200px; margin: 0 auto; padding-inline: var(--sc-gutter); }
/* Narrow is a reading measure, not a centered column: the copy keeps the same
   left edge as the hero and the header wordmark (lead-left, art-direction 8). */
html.bn .pg-in--narrow > * { max-width: 720px; }
#get, #book, #apply, #watch, #waitlist, #receipts { scroll-margin-top: calc(var(--head-h) + var(--s-2)); }

/* ------------------------------------------------------------- type */
html.bn .pg-kicker, html.bn .pb-tag { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); margin-bottom: var(--s-2); text-transform: none; letter-spacing: 0; }
html.bn .pg-h1, html.bn .pb-doc-hero h1 {
  font-family: var(--font-display); font-weight: var(--wght-display);
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); line-height: 1.0;
  letter-spacing: var(--track-display); font-variation-settings: "wdth" var(--wdth-display);
  max-width: 14ch;
}
html.bn .pg-h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 3rem); font-weight: 700; max-width: 18ch; margin-bottom: var(--s-2); }
html.bn .pg-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 40ch; margin-top: var(--s-3); }
html.bn .pg-body { max-width: var(--measure-body); margin-top: var(--s-2); }
html.bn .fine { font-size: var(--fs-small); color: var(--dim); max-width: 52ch; margin-top: var(--s-2); }
html.bn .alert { background: var(--room-3); color: var(--ink); font-weight: 600; padding: var(--s-2) var(--s-3); border-radius: var(--r-media); max-width: 52ch; margin-top: var(--s-3); }

/* ---------------------------------------------------------- buttons */
html.bn .btn--ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--dim);
  min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-button);
  font: 600 1rem/1 var(--font-body); cursor: pointer;
}
html.bn .btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--screen); filter: none; }
html.bn .pg-act { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 559px) {
  html.bn .pg-act .btn, html.bn .pg-act .btn--ghost { width: 100%; }
}

/* ------------------------------------------------------------ forms */
html.bn .pg-form { display: grid; gap: var(--s-2); max-width: 480px; margin-top: var(--s-4); }
html.bn .pg-form__row { display: grid; gap: var(--s-1); }
html.bn .pg-form label { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--ink); }
html.bn .pg-form input[type="text"], html.bn .pg-form input[type="email"] {
  display: block; width: 100%; min-height: var(--tap); margin: 0; padding: 0 var(--s-2);
  background: var(--room); border: 1px solid var(--line); border-radius: var(--r-field);
  color: var(--ink); font: 400 1rem/1.4 var(--font-body);
}
html.bn .pg-form input::placeholder { color: var(--dim); opacity: 1; }
html.bn .pg-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.bn .pg-form .btn { width: 100%; }
html.bn .pg-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----------------------------------------------- quotes and reader lines */
html.bn .pg-says { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); max-width: 34ch; }
html.bn .pg-says li { font: 600 var(--fs-lead)/1.35 var(--font-body); color: var(--ink); }
html.bn .pg-quote, html.bn .pb-quote { margin: 0; }
html.bn .pg-quote blockquote, html.bn .pb-quote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.15;
  letter-spacing: var(--track-heading); max-width: 24ch;
}
html.bn .pg-quote figcaption, html.bn .pb-quote figcaption { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--dim); }

/* ----------------------------------------------------------- reveal */
html.bn.rv [data-rv]:not(.is-in) { opacity: 0; transform: translateY(var(--rise)); }
html.bn.rv [data-rv] { transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.bn [data-rv], html.bn.rv [data-rv]:not(.is-in) { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------ /playbook opt-in page */
html.bn .pb-opt__grid { display: block; }
/* Phones: the hero ends on the form chapter, so the form's room-2 meets the
   proof's room-3 with no strip of room between them. */
@media (max-width: 999px) { html.bn .pb-opt { padding-bottom: 0; } }
html.bn .pb-opt__copy > * + .pg-says { margin-top: var(--s-4); }
html.bn .pb-get { margin-top: var(--s-10); margin-inline: calc(-1 * var(--sc-gutter)); padding: var(--s-10) var(--sc-gutter); background: var(--room-2); border-radius: 0; }
html.bn .pb-get .pg-h2 { max-width: 20ch; }
@media (min-width: 1000px) {
  html.bn .pb-opt__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: clamp(var(--s-6), 6vw, var(--s-12)); align-items: start; }
  /* Not sticky: on a short desktop a stuck panel is taller than the room
     under the header and cuts off the opt-out line under the button. */
  html.bn .pb-get { margin: 0; padding: clamp(var(--s-4), 3vw, var(--s-6)); border-radius: var(--r-media); }
  html.bn .pb-get .pg-h2 { font-size: var(--fs-h3); max-width: none; }
}

/* ------------------------------------- /first-client-playbook document */
html.bn .pb-wrap { max-width: calc(720px + 2 * var(--sc-gutter)); margin: 0 auto; padding-inline: var(--sc-gutter); }
html.bn .pb-stack { display: grid; gap: var(--s-3); justify-items: start; }
html.bn .pb-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; color: var(--ink); }
html.bn .pb-sec { background: var(--room); padding-block: clamp(var(--s-8), 7vw, var(--s-12)); }
html.bn .pb-prose h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); font-weight: 700; max-width: 20ch; margin-top: var(--s-8); }
html.bn .pb-prose h2:first-child { margin-top: 0; }
html.bn .pb-prose h3 { font-weight: 650; font-size: var(--fs-h3); margin-top: var(--s-5); }
html.bn .pb-prose p, html.bn .pb-prose li { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-body); margin-top: var(--s-2); }
html.bn .pb-prose ul { padding-left: 1.25em; margin: 0; }
html.bn .pb-prose li::marker { color: var(--dim); }
html.bn .pb-prose strong { font-weight: 600; color: var(--ink); }
html.bn .pb-quote { margin: var(--s-4) 0; }
html.bn .pb-quote blockquote { font-size: var(--fs-h3); max-width: 30ch; }
html.bn .pb-quote blockquote p { margin: 0; }
html.bn .pb-thread { margin: var(--s-3) 0; padding-left: var(--s-3); border-left: 1px solid var(--line); display: grid; gap: var(--s-1); }
html.bn .pb-thread p { font-size: var(--fs-body); color: var(--ink); margin: 0; }
html.bn .pb-thread strong { font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); }
html.bn .pb-tool { background: var(--room-3); border-radius: var(--r-media); padding: clamp(var(--s-3), 3vw, var(--s-5)); margin-block: var(--s-6); display: grid; gap: var(--s-2); }
html.bn .pb-tool h3 { font-weight: 650; font-size: var(--fs-h3); margin-top: 0; }
html.bn .pb-tool p, html.bn .pb-tool li { max-width: var(--measure-body); margin-top: 0; }
html.bn .pb-tool ul { padding-left: 1.25em; margin: 0; }
html.bn .pb-blank { border-bottom: 1px solid var(--dim); height: 30px; }
html.bn .pb-inline { display: inline-block; min-width: 120px; border-bottom: 1px solid var(--dim); height: 1.1em; vertical-align: bottom; }

/* Tables scroll inside their own box so the page never overflows. */
html.bn .pb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
html.bn .pb-scrollhint { display: none; font-size: var(--fs-small); color: var(--dim); margin: 0; }
@media (max-width: 699px) { html.bn .pb-scrollhint { display: block; } }
html.bn .pb-table { border-collapse: collapse; width: 100%; min-width: 560px; font: 400 var(--fs-small)/1.45 var(--font-body); }
html.bn .pb-table th, html.bn .pb-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
html.bn .pb-table thead th { color: var(--dim); font-weight: 600; }
html.bn .pb-table tbody th { color: var(--ink); font-weight: 600; width: 1%; white-space: nowrap; }
html.bn .pb-table tbody td { height: 34px; }
html.bn .pb-yn { white-space: nowrap; }
html.bn .pb-boxes { font-size: 17px; letter-spacing: 0.18em; line-height: 1.6; }

/* Hard-cut offer blocks between document sections. */
html.bn .pb-cta { background: var(--room-2); padding-block: var(--s-10); }
html.bn .pb-cta--offer { background: var(--room-3); }
html.bn .pb-cta__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.1; max-width: 22ch; color: var(--ink); }
html.bn .pb-cta p { margin-top: var(--s-2); max-width: var(--measure-body); }
html.bn .pb-cta__how { display: block; font-size: var(--fs-small); color: var(--dim); }
html.bn .pb-cta .btn { margin-top: var(--s-2); }
html.bn .pb-print { cursor: pointer; font: inherit; font-weight: 600; }
html.bn .pb-noprint { background: var(--room); padding-block: var(--s-6); }

/* -------------------------------------------- checkout overlay (Blue Night) */
html.bn .hwr-embed-overlay { background: var(--scrim, rgba(12, 14, 18, 0.82)); }
html.bn .hwr-embed-panel { background: var(--room-2); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
/* The close button sits in its own strip above the white Stripe mount. An ink
   x over the mount would be warm white on white, and a phone has no Escape. */
html.bn .hwr-embed-panel { padding-top: 44px; }
html.bn .hwr-embed-close { color: var(--ink); background: var(--room-2); border-radius: var(--r-button); min-width: 36px; min-height: 36px; }
html.bn .hwr-embed-loading { color: var(--ink); }
html.bn .hwr-embed-panel button.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--tap); padding: 0 var(--s-3); background: var(--screen); color: var(--room);
  font: 600 1rem/1 var(--font-body); border: 0; border-radius: var(--r-button); cursor: pointer;
}
html.bn .hwr-embed-panel button.v3-btn:hover { filter: brightness(1.08); }
html.bn .hwr-embed-panel .v3-fine { color: var(--dim); font-size: var(--fs-small); }
html.bn .hwr-embed-mount { background: #fff; border-radius: 8px; }


/* ============================================ sales pages (Phase 5 b) ======
   /build-first and /whole-machine. Lead-left, hard-cut grounds, no cards. */

/* hero: copy left, cover right from 900px; phones put a small cover under the copy */
html.bn .sp-hero { display: grid; gap: var(--s-6); }
html.bn .sp-hero__copy { min-width: 0; }
html.bn .sp-hero__art img { display: block; width: 100%; max-width: 260px; height: auto; border-radius: var(--r-media); }
@media (min-width: 900px) {
  html.bn .sp-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--s-6), 6vw, var(--s-12)); align-items: center; }
  html.bn .sp-hero__art img { max-width: 420px; margin-left: auto; }
}

/* ghost links sit level with the solid button: same box model as .btn, no link underline */
html.bn :is(.sp-ghost, .sp-duo .btn--ghost, .pg-act .btn--ghost) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* stat row: three items, wraps at 320 */
html.bn .sp-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 0; padding: 0; }
html.bn .sp-stats > div { min-width: 0; }
html.bn .sp-stats dt { font: 700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1 var(--font-display); letter-spacing: var(--track-heading); color: var(--ink); }
html.bn .sp-stats dd { margin: var(--s-half) 0 0; font-size: var(--fs-small); color: var(--dim); }

/* sale flag, only while a sale runs */
html.bn .sp-saleflag { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--dim); }
html.bn .sp-saleflag__tag { display: inline-block; background: var(--room-3); color: var(--ink); font-weight: 600; padding: 2px var(--s-1); border-radius: var(--r-media); margin-right: var(--s-1); }
html.bn .sp-saleflag s { color: var(--dim); }
html.bn .sp-saleflag b { color: var(--ink); font-weight: 600; }

/* quotes: plain text, a row of smaller quotes on desktop, stacked on phones */
/* Lengths run from one line to twenty, so two balanced text columns, not a grid
   of equal cells. Long reader quotes read in the body face, not display. */
html.bn .qcards { margin-top: var(--s-5); max-width: 1040px; }
html.bn .qcards .qcard { margin: 0 0 var(--s-4); }
html.bn .qcards--one { max-width: 560px; }
html.bn .pg-quote__stars { margin: 0; font-size: var(--fs-small); letter-spacing: 0.15em; color: var(--ink); }
@media (min-width: 800px) { html.bn .qcards:not(.qcards--one) { columns: 2; column-gap: var(--s-4); } }

/* receipts: two comment screenshots, shown small on purpose */
html.bn .sp-receipts { display: grid; gap: var(--s-2); margin-top: var(--s-6); max-width: 760px; }
html.bn .sp-receipts img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-media); }
html.bn .sp-receipts .sp-receipts__short { width: 71%; }

/* prose column, and the old message (quiet, a quote, not a bubble) */
html.bn .sp-prose p { max-width: var(--measure-body); margin-top: var(--s-2); }
html.bn .sp-prose h2 + p { margin-top: var(--s-3); }
html.bn .sp-prose a { text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; }
html.bn .sp-prose a:hover { text-decoration-color: var(--screen); }
html.bn .sp-old { margin: var(--s-3) 0 0; padding-left: var(--s-3); border-left: 1px solid var(--line); max-width: 52ch; color: var(--dim); font-size: var(--fs-body); }
html.bn code { font-family: var(--font-body); font-weight: 600; font-size: inherit; color: var(--ink); background: none; border: 0; padding: 0; border-radius: 0; }

/* three tools: plain list, hairlines */
html.bn .sp-items { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: 0; }
html.bn .sp-items li { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
html.bn .sp-items h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.1; letter-spacing: var(--track-heading); max-width: 20ch; }
html.bn .sp-items p { margin-top: var(--s-1); max-width: 44ch; color: var(--dim); }
@media (min-width: 900px) {
  html.bn .sp-items { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
}

/* six parts: no counters, the label is the book's own "Part N" */
html.bn .sp-parts { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; column-gap: var(--s-6); }
html.bn .sp-parts li { padding: var(--s-3) 0; border-top: 1px solid var(--line); min-width: 0; }
html.bn .sp-parts__n { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--dim); }
html.bn .sp-parts h3 { margin-top: var(--s-half); font-size: 1.375rem; font-weight: 650; line-height: 1.15; letter-spacing: var(--track-heading); }
html.bn .sp-parts p { margin-top: var(--s-1); color: var(--dim); max-width: 40ch; }
@media (min-width: 700px) { html.bn .sp-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html.bn .sp-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the sent message: fixed size, right-aligned. No light spill: the homepage's
   send (act 4) is the only one on the site (art 9). */
html.bn .sp-sent { margin: var(--s-4) 0; padding: var(--s-3) 0; display: grid; justify-items: end; gap: var(--s-2); isolation: isolate; }
html.bn .sp-sent figcaption { justify-self: start; font-size: var(--fs-small); color: var(--dim); }
html.bn .sp-sent__bubble {
  position: relative; margin: 0; max-width: min(34ch, 100%); padding: var(--s-2) var(--s-3);
  background: var(--screen-deep); color: var(--ink); font: 400 var(--fs-message)/1.45 var(--font-body);
  border-radius: var(--r-bubble) var(--r-bubble) var(--r-bubble-tail) var(--r-bubble);
}

/* Bubbles inside a prose column keep their own size (2026-10-19, /playbook). */
html.bn .sp-prose .sp-sent__bubble { margin: 0; max-width: min(34ch, 100%); }
html.bn .sp-prose h3 { margin-top: var(--s-4); font-size: 1.375rem; font-weight: 650; line-height: 1.2; letter-spacing: var(--track-heading); }

/* The kicker: a buyer's own words above a section. Same look as the
   homepage's (hwr-home.css), 2026-10-19. */
html.bn .kick { margin: 0; padding-left: var(--s-2); border-left: 2px solid var(--screen); }
html.bn .kick p { margin: 0; font: 600 var(--fs-lead)/var(--lh-lead) var(--font-body); max-width: 36ch; }
html.bn .kick__cap, html.bn .sp-prose .kick__cap { margin: var(--s-1) 0 var(--s-5); padding-left: calc(var(--s-2) + 2px); font-size: var(--fs-small); color: var(--dim); }
@media (max-width: 860px) {
  html.bn .kick p { font-size: var(--fs-body); line-height: 1.5; }
  html.bn .kick__cap, html.bn .sp-prose .kick__cap { margin-bottom: var(--s-4); }
}

/* M4 / M5 clip: static by default, the stage only exists once JS says the video loaded */
html.bn .sp-clip { margin-top: var(--s-5); }
html.bn .sp-clip__stage, html.bn .sp-clip__cap--clip { display: none; }
html.bn .sp-clip.is-clip .sp-clip__stage { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--room); border-radius: var(--r-media); }
html.bn .sp-clip.is-clip .sp-clip__stage video { display: block; width: 100%; height: auto; background: var(--room); border-radius: var(--r-media); }
html.bn .sp-clip.is-clip .sp-clip__cap--clip { display: block; }
html.bn .sp-clip.is-clip .sp-clip__static { display: none; }
@media (max-width: 699px) { html.bn .sp-clip.is-clip .sp-clip__stage { aspect-ratio: 4 / 5; } }
html.bn .sp-clip__static picture img { display: block; width: 100%; height: auto; border-radius: var(--r-media); }
html.bn .sp-compare { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { html.bn .sp-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
html.bn .sp-shot { margin: 0; min-width: 0; }
html.bn .sp-shot figcaption { display: flex; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-1); margin-bottom: var(--s-1); border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--dim); }
html.bn .sp-shot figcaption b { font-weight: 600; text-align: right; }
html.bn .sp-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-media); }

/* author */
html.bn .sp-author h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--track-heading); max-width: 20ch; }
html.bn .sp-author .pg-kicker { margin-bottom: var(--s-1); }

/* for you / not for you */
html.bn .sp-two { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
html.bn .sp-two h3, html.bn .sp-two__label { font: 600 1rem/1.4 var(--font-body); color: var(--ink); letter-spacing: 0; margin-bottom: var(--s-2); }
@media (min-width: 800px) { html.bn .sp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
html.bn .sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
html.bn .sp-list li { position: relative; padding-left: var(--s-3); max-width: var(--measure-body); }
html.bn .sp-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 2px; background: var(--dim); }
html.bn .sp-list--no li { color: var(--dim); }
html.bn .sp-list--no li::before { width: 8px; height: 1px; transform: rotate(-45deg); }

/* FAQ: hairline rows, real button-like summary */
html.bn .sp-faq { margin-top: var(--s-5); border-bottom: 1px solid var(--line); }
html.bn .sp-faq details { border-top: 1px solid var(--line); }
html.bn .sp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--tap);
  padding: var(--s-2) 0; cursor: pointer; list-style: none; font: 600 1.0625rem/1.35 var(--font-body); color: var(--ink);
}
html.bn .sp-faq summary::-webkit-details-marker { display: none; }
html.bn .sp-faq summary::after { content: "+"; flex: none; width: 1.25em; text-align: center; font-size: 1.5rem; line-height: 1; font-weight: 400; color: var(--dim); }
html.bn .sp-faq details[open] > summary::after { content: "\2212"; }
html.bn .sp-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.bn .sp-faq details > p { max-width: var(--measure-body); margin: 0 0 var(--s-2); }
html.bn .sp-faq details > p:last-child { margin-bottom: var(--s-3); }

/* buy row: buy panel and duo side by side from 1000px */
html.bn .sp-buyrow { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1000px) { html.bn .sp-buyrow { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(var(--s-6), 6vw, var(--s-12)); } }
html.bn .sp-buy { background: var(--room-2); border-radius: var(--r-media); padding: clamp(var(--s-3), 4vw, var(--s-6)); max-width: 560px; min-width: 0; }
html.bn .g-room-2 .sp-buy { background: var(--room-3); }
html.bn .g-room-3 .sp-buy { background: var(--room-2); }
html.bn .sp-buy .pg-h2 { max-width: none; }
html.bn .sp-buy__amount { margin-top: var(--s-2); font: 700 clamp(3rem, 2rem + 4vw, 4.5rem)/1 var(--font-display); letter-spacing: var(--track-display); color: var(--ink); font-variant-numeric: tabular-nums; }
html.bn .sp-buy__was { font-size: 0.5em; font-weight: 600; color: var(--dim); margin-right: var(--s-1); }
html.bn .sp-buy__badge { display: inline-block; margin-bottom: var(--s-2); padding: 2px var(--s-1); background: var(--room); color: var(--ink); font-size: var(--fs-small); font-weight: 600; border-radius: var(--r-media); }
html.bn .sp-buy .sp-list { margin-top: var(--s-3); }
html.bn .sp-buy--closed { opacity: 0.8; }
html.bn .sp-buy--closed .sp-buy__amount { color: var(--dim); }
html.bn .sp-duo { border: 1px solid var(--line); border-radius: var(--r-media); padding: clamp(var(--s-3), 3vw, var(--s-5)); max-width: 560px; min-width: 0; }
html.bn .sp-duo h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.1; letter-spacing: var(--track-heading); max-width: 18ch; }

/* six labels beside the M5 clip */
html.bn .sp-six { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: 0 var(--s-6); }
html.bn .sp-six li { padding: var(--s-2) 0; border-top: 1px solid var(--line); color: var(--dim); }
html.bn .sp-six strong { display: block; color: var(--ink); font-weight: 600; }
@media (min-width: 800px) { html.bn .sp-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html.bn .sp-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the first hour, drawn as a window in the page fonts */
html.bn .sp-term { margin-top: var(--s-5); max-width: 720px; background: var(--room-3); border-radius: var(--r-media); overflow: hidden; }
html.bn .sp-term__bar { padding: var(--s-1) var(--s-2); border-bottom: 1px solid var(--line); font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); overflow-wrap: anywhere; }
html.bn .sp-term__body { padding: var(--s-2); }
html.bn .sp-term__body p { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.bn .sp-term__body .ok { color: var(--ink); font-weight: 600; }
html.bn .sp-term__body .dim { color: var(--dim); }
html.bn .sp-term__plain { margin: 0; padding: var(--s-2); border-top: 1px solid var(--line); color: var(--dim); font-size: var(--fs-small); }

/* what runs by itself: stacked on phones, label column on desktop */
html.bn .sp-tablewrap { margin-top: var(--s-5); max-width: 960px; }
html.bn .sp-table { width: 100%; border-collapse: collapse; }
html.bn .sp-table :is(tbody, tr, th, td) { display: block; }
html.bn .sp-table tr { padding: var(--s-2) 0; border-top: 1px solid var(--line); }
html.bn .sp-table tr:last-child { border-bottom: 1px solid var(--line); }
html.bn .sp-table th { color: var(--ink); font-weight: 600; text-align: left; }
html.bn .sp-table td { margin-top: var(--s-half); color: var(--dim); }
@media (min-width: 800px) {
  html.bn .sp-table tr { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-4); }
  html.bn .sp-table td { margin-top: 0; }
}

/* what's in the box */
html.bn .sp-box { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; column-gap: var(--s-6); }
html.bn .sp-box li { padding: var(--s-2) 0; border-top: 1px solid var(--line); color: var(--dim); }
html.bn .sp-box strong { color: var(--ink); font-weight: 600; }
html.bn .sp-box__more { display: block; margin-top: var(--s-1); font-size: var(--fs-small); line-height: 1.55; max-width: var(--measure-body); }
html.bn .sp-buy__norefund strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { html.bn .sp-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.bn .sp-more { margin-top: var(--s-6); }
html.bn .sp-more__cols { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 900px) { html.bn .sp-more__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }

/* the value ledger */
html.bn .sp-ledger { max-width: 620px; margin-top: var(--s-5); border-bottom: 1px solid var(--line); }
html.bn .sp-ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
html.bn .sp-ledger__row span { min-width: 0; color: var(--dim); }
html.bn .sp-ledger__row b { flex: none; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
html.bn .sp-ledger__row--sum { border-top: 2px solid var(--dim); }
html.bn .sp-ledger__row--sum :is(span, b) { font-weight: 700; color: var(--ink); }
html.bn .sp-ledger__row--you span { color: var(--ink); font-weight: 600; }
html.bn .sp-ledger__row--you b { font: 700 var(--fs-h3)/1 var(--font-display); }

/* the free route, deliberately dull; the closing lead */
html.bn .sp-plain { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); max-width: var(--measure-body); color: var(--dim); }
html.bn .sp-plain strong { color: var(--ink); font-weight: 600; }
html.bn .sp-close { font: 700 var(--fs-h3)/1.1 var(--font-display); letter-spacing: var(--track-heading); max-width: 22ch; color: var(--ink); }

/* fine print under the buy box */
html.bn .sp-fineprint { display: grid; gap: var(--s-5); margin-top: var(--s-8); font-size: var(--fs-small); color: var(--dim); }
html.bn .sp-fineprint > div { min-width: 0; }
html.bn .sp-fineprint .sp-two__label { font-size: var(--fs-small); margin-bottom: var(--s-1); }
html.bn .sp-fineprint .sp-list li { max-width: none; }
html.bn .sp-fineprint .sp-list + .sp-two__label { margin-top: var(--s-4); }
@media (min-width: 1000px) { html.bn .sp-fineprint { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
html.bn .sp-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
html.bn .sp-rungs li { display: flex; flex-wrap: wrap; gap: var(--s-half) var(--s-1); padding: var(--s-1) 0; border-top: 1px solid var(--line); }
html.bn .sp-rungs b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
html.bn .sp-rungs span { margin-left: auto; color: var(--dim); }
/* the one marked row: ink and weight only. A colored side edge is a banned side-tab. */
html.bn .sp-rungs__you { color: var(--ink); font-weight: 600; }
html.bn .sp-rungs__you span { color: var(--ink); }

/* buy dock: the one fixed bar on the site, carries the $197 button */
html.bn .sp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 64px; padding: var(--s-1) var(--sc-gutter) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
  background: var(--room-2); border-top: 1px solid var(--line);
}
html.bn .sp-dock__l { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
html.bn .sp-dock__p { font: 700 1.5rem/1 var(--font-display); color: var(--ink); }
html.bn .sp-dock__s { font-size: var(--fs-small); color: var(--dim); }
html.bn .sp-dock .btn { flex: none; }
/* The spacer sits above the footer in the markup, so it cannot clear the last line. The footer takes the dock height instead. */
html.bn .sp-dock-pad { height: 0; }
html.bn:has(.sp-dock) .site-foot { padding-bottom: calc(var(--s-6) + 66px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 479px) { html.bn .sp-dock__s { display: none; } }

/* ------------------------------------------------------------ print */
@media print {
  html.bn, html.bn .bn { --room: #fff; --room-2: #fff; --room-3: #fff; --ink: #000; --dim: #333; --line: #999; --screen: #000; }
  html.bn body { background: #fff; color: #000; }
  html.bn :is(.site-head, .sheet, .site-foot, .grain, .skip, .pb-noprint, .pb-print, .pb-scrollhint, .v3-sale, .v3-flag) { display: none !important; }
  html.bn :is(.pg-hero, .pg-sec, .pb-sec) { padding: 12px 0; }
  html.bn .pg-hero { padding-top: 0; }
  html.bn :is(.pb-wrap, .pg-in) { max-width: none; padding: 0; }
  html.bn :is(.pb-cta, .pb-cta--offer) { background: #fff; border: 1px solid #000; padding: 14px; margin: 14px 0; }
  html.bn .pb-tool { background: #fff; border: 1px solid #000; break-inside: avoid; }
  html.bn :is(.pb-table, .pb-thread, .pb-quote) { break-inside: avoid; }
  html.bn :is(h1, h2, h3) { break-after: avoid; }
  html.bn .pb-scroll { overflow: visible; }
  html.bn .pb-table { min-width: 0; width: 100%; font-size: 10.5px; }
  html.bn .pb-table :is(th, td) { padding: 5px 6px; }
  html.bn .pb-boxes { font-size: 13px; letter-spacing: 0.1em; }
  html.bn a { color: #000; text-decoration: underline; }
  html.bn :is(.btn, .btn--ghost) { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
  html.bn [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.bn :is(.pb-blank, .pb-inline) { border-bottom-color: #000; }
  html.bn :is(.sp-dock, .sp-dock-pad, .sp-clip__stage) { display: none !important; }
  html.bn .sp-clip__static { display: block !important; }
  html.bn :is(.sp-buy, .sp-term, .sp-saleflag__tag, .sp-buy__badge) { background: #fff; border: 1px solid #000; }
  html.bn :is(.sp-sent__bubble) { background: #fff; color: #000; border: 1px solid #000; }
  html.bn :is(.sp-parts li, .sp-items li, .sp-ledger__row, .sp-faq details) { break-inside: avoid; }
}

/* -------------------------------- group (c): /apply, /masterclass, /numbers, /tools, /links */

/* video: 16:9 on room-3, the iframe fills it (its own inline style positions it) */
html.bn .pg-video { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin-top: var(--s-4); background: var(--room-3); border-radius: var(--r-media); overflow: hidden; }
html.bn .pg-video iframe { display: block; }
html.bn .g-room-3 .pg-video { background: var(--room); }
html.bn .pg-video + .pg-body { margin-top: var(--s-3); }

/* /apply form: wide variant, textareas like text inputs, radios as tap rows */
html.bn .pg-form--wide { max-width: 640px; gap: var(--s-3); }
html.bn .pg-form textarea {
  display: block; width: 100%; min-height: calc(var(--tap) * 2); margin: 0; padding: var(--s-1) var(--s-2);
  background: var(--room); border: 1px solid var(--line); border-radius: var(--r-field);
  color: var(--ink); font: 400 1rem/1.5 var(--font-body); resize: vertical;
}
html.bn .pg-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.bn .pg-form textarea::placeholder { color: var(--dim); opacity: 1; }
html.bn .pg-form fieldset { min-width: 0; }
html.bn .pg-form legend { padding: 0; font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--ink); }
html.bn .pg-form__group { display: block; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); }
html.bn .pg-choice { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); margin-top: var(--s-half); }
html.bn .pg-choice label { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); font: 400 1rem/1.4 var(--font-body); color: var(--ink); cursor: pointer; }
html.bn .pg-choice input[type="radio"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--screen); }
html.bn .pg-choice input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* /tools: hairline rows, no cards */
html.bn .tl-row { display: grid; gap: var(--s-3); padding-block: var(--s-6); border-top: 1px solid var(--line); }
html.bn .tl-row:first-child { border-top: 0; padding-top: 0; }
html.bn .tl-row:last-child { padding-bottom: 0; }
html.bn .tl-row__head, html.bn .tl-row__body { min-width: 0; }
html.bn .tl-row__k { display: block; font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); }
html.bn .tl-row__head h2 { margin-top: var(--s-half); font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-heading); }
html.bn .tl-row__for { display: block; margin-top: var(--s-1); max-width: 30ch; color: var(--dim); }
html.bn .tl-row__text p { max-width: var(--measure-body); margin-top: var(--s-2); }
html.bn .tl-row__text p:first-child { margin-top: 0; }
html.bn .tl-row__text strong { font-weight: 600; color: var(--ink); }
html.bn .tl-row__body > .btn { margin-top: var(--s-3); }
@media (max-width: 559px) { html.bn .tl-row__body > .btn { width: 100%; } }
@media (min-width: 900px) {
  html.bn .tl-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--s-8); align-items: start; }
}

/* /links: a bio page, one lead-left column, hairline rows */
html.bn .ln-in > * { max-width: 560px; }
html.bn .ln-avatar { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
html.bn .ln-h1 { margin-top: var(--s-2); font: 700 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1.05 var(--font-display); letter-spacing: var(--track-display); font-variation-settings: "wdth" var(--wdth-display); }
html.bn .ln-lead { margin-top: var(--s-2); font-size: var(--fs-lead); line-height: var(--lh-lead); }
html.bn .ln-story p { margin-top: var(--s-3); max-width: var(--measure-body); }
html.bn .ln-links { margin-top: var(--s-5); border-bottom: 1px solid var(--line); }
html.bn .ln-row {
  display: flex; align-items: flex-start; gap: var(--s-2); min-height: var(--tap);
  margin-inline: calc(-1 * var(--s-2)); padding: var(--s-3) var(--s-2); border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
html.bn .ln-row--free { background: var(--room-3); }
html.bn .ln-row img { flex: none; display: block; width: 80px; height: auto; border-radius: var(--r-media); }
html.bn .ln-row__body { flex: 1; min-width: 0; }
html.bn .ln-row__k { display: block; font: 600 var(--fs-small)/1.4 var(--font-body); color: var(--dim); }
html.bn .ln-row__t { display: block; margin-top: var(--s-half); font: 700 var(--fs-h3)/1.1 var(--font-display); letter-spacing: var(--track-heading); }
html.bn .ln-row__d { display: block; margin-top: var(--s-1); color: var(--dim); }
html.bn .ln-row__d strong { font-weight: 600; color: var(--ink); }
html.bn .ln-row__arrow { flex: none; align-self: center; width: 10px; height: 10px; margin-right: var(--s-half); border-top: 2px solid var(--dim); border-right: 2px solid var(--dim); transform: rotate(45deg); }
html.bn .ln-row:hover .ln-row__t { text-decoration: underline; text-decoration-color: var(--dim); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
html.bn .ln-row:hover .ln-row__arrow { border-color: var(--ink); }
html.bn .ln-post { margin-top: var(--s-6); }
html.bn .ln-social a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---- group (d): /thank-you, /review, /unsubscribe, /privacy, /terms, 404 */
/* checkboxes share the radio sizing in .pg-choice */
html.bn .pg-choice input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--screen); }
html.bn .pg-choice input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html.bn .pg-form label .fine { display: inline; margin: 0; font-weight: 400; }

/* review: star rating, five radios in DOM order 5..1, row-reverse puts them back in reading order */
html.bn .pg-stars { display: inline-flex; flex-direction: row-reverse; align-self: flex-start; justify-self: start; width: max-content; gap: 2px; margin-top: var(--s-half); }
html.bn .pg-stars input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.bn .pg-stars label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; font-size: 32px; line-height: 1;
  color: var(--dim); cursor: pointer; transition: color 0.1s;
}
html.bn .pg-stars input:checked ~ label,
html.bn .pg-stars label:hover,
html.bn .pg-stars label:hover ~ label { color: var(--ink); }
html.bn .pg-stars input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-field); }
html.bn .pg-form textarea.pg-textarea--short { min-height: var(--tap); }

/* thank-you: downloads, lead-left, buttons stacked */
html.bn .pg-dl__list { list-style: none; margin: 0; padding: 0; }
html.bn .pg-dl__list li { color: var(--ink); font-weight: 600; margin-top: var(--s-1); }
html.bn .pg-dl__list li:first-child { margin-top: 0; }
html.bn .pg-dl__btns { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-3); }

@media (max-width: 559px) { html.bn .pg-dl__btns { align-items: stretch; } html.bn .pg-dl__btns .btn { width: 100%; } }
html.bn .pg-dl .pg-lead { margin-top: 0; }

/* legal and short prose */
html.bn .pg-prose p, html.bn .pg-prose ul { max-width: var(--measure-body); margin-top: var(--s-2); }
html.bn .pg-prose > :first-child { margin-top: 0; }
html.bn .pg-prose h2 { margin-top: var(--s-6); font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-heading); }
html.bn .pg-prose h2 + p, html.bn .pg-prose h2 + ul { margin-top: var(--s-2); }
html.bn .pg-prose ul { padding-left: 1.25em; }
html.bn .pg-prose li { margin-top: var(--s-1); }
html.bn .pg-prose strong { font-weight: 600; color: var(--ink); }
html.bn .pg-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--dim); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.bn .pg-prose a:hover { text-decoration-color: var(--screen); }
html.bn .pg-prose .pg-form { margin-top: var(--s-3); }

/* 404 numeral */
html.bn .nf-code { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 20vw, 10rem); line-height: 0.9; color: var(--ink); letter-spacing: var(--track-display); font-variation-settings: "wdth" var(--wdth-display); }