/* Private AI Capability (/transform). Loaded after the shared Keynote stylesheet and built from the
   same parts as the homepage: its type scale (mega, h2, h3, lede, body), its dark, light and sand
   sections, its tiles, FAQ and glass buttons. Only what the homepage does not have lives here:
   the header, the hero with its planetary system, and the plate that steps through the engagement.
   No decorative type or grain; the only glow is the hero's sun. Everything is prefixed pv- or scoped to body.pv. */

body.pv {
  --nav-h: 64px; --sub-h: 0px;
  --pv-w: 1240px;
  --pv-line: rgba(241, 239, 231, 0.13);
  --pv-line-2: rgba(241, 239, 231, 0.08);
  --pv-dim: rgba(241, 239, 231, 0.66);
  --pv-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --pv-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pv .wrap { max-width: var(--pv-w); }

/* ---------- header: clear at the top, a black bar while the hero scrolls under it, and after the hero a
   white bar floating in the middle, the way the homepage's header does (user request) ---------- */
.pv .pv-nav { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto 0; height: var(--nav-h); background: transparent; border-bottom: 1px solid transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.pv .pv-nav.is-solid, .pv .pv-nav.menu-open { background: rgba(0, 0, 0, 0.8); border-bottom-color: var(--line-dark); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.pv .pv-nav .in { position: relative; max-width: var(--pv-w); margin: 0 auto; padding-inline: 22px; pointer-events: auto;
  border-radius: 0; background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: max-width 520ms var(--ease), height 420ms var(--ease), margin 420ms var(--ease), padding 420ms var(--ease), background-color 360ms var(--ease), box-shadow 360ms var(--ease), border-radius 420ms var(--ease), color 300ms var(--ease); }
.pv .pv-nav { pointer-events: none; }
/* the floating bar after the hero: the same measures and colours as the homepage's. While the phone menu is
   open it goes back to the black bar, so the menu sheet hangs from a full-width edge */
.pv .gnav.pv-nav.nav-float:not(.menu-open) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pv .pv-nav.nav-float:not(.menu-open) .in { max-width: 960px; height: 54px; margin-top: 12px; padding-inline: 22px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 30px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1); }
.pv .pv-nav.nav-float:not(.menu-open) .links { color: rgba(0, 0, 0, 0.78); }
.pv .pv-nav.nav-float:not(.menu-open) .links a:hover { color: #000; }
.pv .pv-nav.nav-float:not(.menu-open) .gcta { background-color: #0b0b0b; color: #fff; border-color: #0b0b0b; box-shadow: none; }
.pv .pv-nav.nav-float:not(.menu-open) .gcta:hover { background-color: #222; }
.pv .pv-nav.nav-float:not(.menu-open) .nav-toggle { color: var(--ink); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pv .pv-nav.nav-float:not(.menu-open) .in { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
@media (max-width: 1000px) { .pv .pv-nav.nav-float:not(.menu-open) .in { max-width: calc(100% - 24px); } }
@media (max-width: 820px) { .pv .pv-nav.nav-float:not(.menu-open) .in { padding-inline: 18px 12px; background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.pv .pv-nav .links { position: absolute; left: 50%; transform: translateX(-50%); gap: 30px; white-space: nowrap; }
@media (max-width: 1040px) { .pv .pv-nav .links { gap: 20px; } }
@media (max-width: 900px) {
  .pv .pv-nav .links, .pv .pv-nav .gcta { display: none; }
  .pv .nav-toggle { display: inline-flex; align-items: center; }
  .pv .mobile-menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 70; background: var(--ink); color: var(--bone); padding: 12px 22px 26px; border-bottom: 1px solid var(--line-dark); display: block; }
  .pv .mobile-menu ul { list-style: none; padding: 0; margin: 0 0 18px; }
  .pv .mobile-menu li a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line-dark); font-family: var(--display); font-size: 22px; font-weight: 600; }
  .pv .mobile-menu .pill { width: 100%; }
}
@media (min-width: 821px) and (max-width: 900px) {
  /* the shared sheet only animates the menu up to 820px; give it the same drop here */
  .pv .mobile-menu { visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity 240ms var(--ease), transform 300ms var(--pv-out), visibility 0s 300ms; }
  .pv .mobile-menu.is-open { visibility: visible; pointer-events: auto; opacity: 1; transform: none; transition: opacity 240ms var(--ease), transform 300ms var(--pv-out), visibility 0s; }
}
@media (max-width: 820px) { .pv .pv-nav.is-solid, .pv .pv-nav.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #000; } }

/* ---------- hero ---------- */
.pv-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 24px) 0 clamp(36px, 5vw, 64px); overflow: hidden; overflow: clip; }
.pv-hero-in { width: 100%; max-width: var(--pv-w); margin: 0 auto; padding-inline: 22px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3.6vw, 56px); align-items: center; }
.pv-h1 { margin-top: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.9vw, 74px); line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
@media (min-width: 1024px) { .pv-h1 .l { display: block; } .pv-h1 { text-wrap: wrap; } }
.pv-hero .lede { margin-top: 22px; max-width: 31em; }
.pv-hero .ctas { margin-top: 30px; }
.pv-meta { margin-top: 18px; font-size: 14px; color: var(--grey-2); }
.pv-meta b { color: var(--sand); font-weight: 600; }

/* the planetary system: ten capabilities in orbit around your work (drawn by private.js).
   On wide screens it fills the hero behind the copy, with the sun on the right. */
.pv-orbit { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pv-orbit canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-orbit::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.86) 24%, rgba(0, 0, 0, 0.35) 44%, rgba(0, 0, 0, 0) 58%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 18%), linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 14%); }
.pv-hero-in { position: relative; z-index: 1; }
.pv-week { position: absolute; z-index: 2; right: max(22px, calc((100% - var(--pv-w)) / 2 + 22px)); bottom: clamp(26px, 5vh, 52px); display: grid; justify-items: end; gap: 9px; margin: 0; }
.pv-week b { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--bone); font-variant-numeric: tabular-nums; }
.pv-week-ticks { display: flex; gap: 5px; }
.pv-week-ticks i { width: 22px; height: 2px; border-radius: 1px; background: var(--sand); transition: background-color 500ms var(--ease); }
.pv-week-ticks i.off { background: rgba(241, 239, 231, 0.2); }
@media (prefers-reduced-motion: no-preference) {
  .js .pv-orbit canvas { opacity: 0; transition: opacity 1400ms linear; }
  .js .pv-orbit.is-run canvas { opacity: 1; }
  /* hero copy arrives line by line */
  .js .pv-hero-copy > * { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .pv-hero.is-in .pv-hero-copy > * { opacity: 1; transform: none; }
  .js .pv-hero.is-in .pv-hero-copy > :nth-child(2) { transition-delay: 80ms; }
  .js .pv-hero.is-in .pv-hero-copy > :nth-child(3) { transition-delay: 200ms; }
  .js .pv-hero.is-in .pv-hero-copy > :nth-child(4) { transition-delay: 300ms; }
  .js .pv-hero.is-in .pv-hero-copy > :nth-child(5) { transition-delay: 400ms; }
}
/* short laptop windows: the whole hero stays on the first screen */
@media (min-width: 901px) and (max-height: 760px) {
  .pv-hero { padding: calc(var(--nav-h) + 8px) 0 20px; }
  .pv-h1 { font-size: clamp(36px, min(4.9vw, 8.4vh), 74px); }
  .pv-hero .lede { margin-top: 16px; font-size: clamp(16px, 2.6vh, 20px); }
  .pv-hero .ctas { margin-top: 22px; }
}
@media (max-width: 900px) {
  .pv-hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
  .pv-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pv-h1 { font-size: clamp(38px, 10.2vw, 62px); }
  /* phones and tablets: the system sits under the copy, sun in the middle */
  .pv-hero { display: flex; flex-direction: column; padding-bottom: 0; }
  .pv-orbit { position: relative; inset: auto; order: 2; width: 100%; height: min(104vw, 560px); margin-top: 18px; }
  .pv-orbit::after { background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, #000 100%); }
  .pv-week { right: 22px; bottom: 26px; }
}

/* ---------- demo B (/transform/orbit/): the orbital component centred, headline and buttons left, byline right ---------- */
.pv-hero--b { display: flex; align-items: stretch; padding: var(--nav-h) 0 0; }
.pv-helix { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.pv-helix::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 9%, rgba(0, 0, 0, 0.5) 18%, rgba(0, 0, 0, 0.28) 28%, rgba(0, 0, 0, 0.1) 38%, rgba(0, 0, 0, 0) 48%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 8%, rgba(0, 0, 0, 0.42) 16%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.06) 33%, rgba(0, 0, 0, 0) 40%),
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 16%), linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 12%); }
.pvb { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 0 max(28px, 4vw) clamp(40px, 7vh, 80px); pointer-events: none; }
.pvb a, .pvb button { pointer-events: auto; }
/* this layout runs edge to edge, so the header lines up with it */
.pv-b .pv-nav .in { max-width: 100%; padding-inline: max(28px, 4vw); }
.pvb-l { max-width: min(36vw, 560px); }
.pv-h1.pvb-h1 { font-size: clamp(34px, 3.3vw, 56px); line-height: 1.05; letter-spacing: -0.03em; max-width: 10.5em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.pvb .ctas { margin-top: 28px; gap: 12px 20px; }
.pvb .pill:not(.pill--sm) { min-height: 46px; font-size: 16px; padding: 0 22px; }
.pvb-r { justify-self: end; max-width: min(24vw, 380px); }
.pvb .lede { margin-top: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; color: rgba(241, 239, 231, 0.86); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.85); }
.pvb .pv-meta { margin-top: 16px; font-size: 13px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
@media (prefers-reduced-motion: no-preference) {
  .js .pv-helix { opacity: 0; transition: opacity 1600ms linear; }
  .js .pv-helix.is-run { opacity: 1; }
  .js .pvb-l > *, .js .pvb-r > * { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js .pv-hero.is-in .pvb-l > *, .js .pv-hero.is-in .pvb-r > * { opacity: 1; transform: none; }
  .js .pv-hero.is-in .pvb-l > :nth-child(2) { transition-delay: 80ms; }
  .js .pv-hero.is-in .pvb-l > :nth-child(3) { transition-delay: 200ms; }
  .js .pv-hero.is-in .pvb-r > * { transition-delay: 320ms; }
  .js .pv-hero.is-in .pvb-r > :nth-child(2) { transition-delay: 400ms; }
}
@media (max-width: 900px) {
  /* phones and tablets: headline and buttons, then the system in a wide space of its own, then the
     byline under it. The drawing is no longer squeezed in behind the words (user request) */
  .pv-hero--b { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; padding: calc(var(--nav-h) + 26px) 0 48px; }
  .pvb { display: contents; }
  .pvb-l, .pvb-r { position: relative; z-index: 1; grid-column: 1; width: 100%; max-width: 34em; justify-self: center; box-sizing: border-box; padding-inline: 22px; text-align: center; }
  .pvb-l { grid-row: 1; }
  .pv-helix { grid-row: 2; grid-column: 1; position: relative; inset: auto; height: clamp(380px, 112vw, 580px); margin-top: -4px; }
  .pvb-r { grid-row: 3; margin-top: -14px; }
  .pv-helix::after { background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0) 87%, #000 100%); }
  .pv-b .pv-nav .in { padding-inline: 22px; }
  .pv-h1.pvb-h1 { font-size: clamp(34px, 8.4vw, 52px); margin-inline: auto; }
  .pvb .ctas { justify-content: center; margin-top: 22px; }
  .pvb .lede { font-size: 16px; }
}

/* ---------- the statement (same look as the homepage's, lit once instead of on a long scroll) ---------- */
.pv-statement { text-align: center; }
.pv-say { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(34px, 5.6vw, 66px); max-width: 17em; margin-inline: auto; text-wrap: balance; }
.pv-say .w { color: #3A3935; transition: color 500ms linear; }
.pv-say.is-lit .w { color: var(--bone); transition-delay: calc(var(--i) * 80ms); }
.pv-say.is-lit .w.a { color: var(--sand); }
.pv-after { margin: 36px auto 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; max-width: 760px; }
.pv-after .lede { max-width: 34em; margin-inline: auto; text-wrap: pretty; }

/* ---------- how the six weeks work: one plate, four parts ---------- */
.pv-inside { padding-bottom: clamp(72px, 9vw, 120px); }
.pv-pin { max-width: var(--pv-w); margin-inline: auto; padding-inline: 22px; }
.pv-plate { position: relative; border: 1px solid var(--line-dark); border-radius: 28px; background: var(--ink-2); overflow: hidden; }
.pv-ch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 22px 30px; border-top: 1px solid var(--line-dark); }
.pv-ch:first-child { border-top: 0; }
.pv-ch-t .label { display: block; margin-bottom: 12px; }
.pv-ch-t .body { margin-top: 16px; max-width: 30em; }
.pv-ch-t .body + .body { margin-top: 12px; }
.pv-prog, .pv-step { display: none; }
@media (min-width: 960px) {
  .pv-ch { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 76px); padding: clamp(32px, 4vw, 56px); }
}

.pv-fig { margin: 0; min-width: 0; border: 1px solid var(--line-dark); border-radius: 20px; background: var(--ink); padding: 18px 22px 16px; }
.pv-fig > header { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--pv-line-2); font: 500 11px/1.3 var(--pv-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.pv-fig > header > span:first-child { color: var(--bone); }
.pv-fig figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pv-line-2); font-size: 13px; color: var(--grey-2); }

/* a plain ledger: the ten capabilities, and the contents of the final report */
.pv-list { --rh: clamp(30px, 4.9vh, 48px); list-style: none; margin: 4px 0 0; padding: 0; }
.pv-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: center; min-height: var(--rh); border-bottom: 1px solid var(--pv-line-2); }
.pv-list li:last-child { border-bottom: 0; }
.pv-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); }
.pv-list b { display: block; font-weight: 500; font-size: clamp(15px, 1.9vh, 17px); color: var(--bone); }
.pv-list small { display: block; margin-top: 3px; font-size: clamp(13px, 1.6vh, 14.5px); color: var(--pv-dim); }
.pv-list--two { --rh: clamp(58px, 9.6vh, 94px); }
.pv-list--two b { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2.1vh, 19px); letter-spacing: -0.012em; }

/* six weeks, each with its focus, its intended output and its rhythm */
.pv-weeks { --rh: clamp(48px, 8.4vh, 86px); list-style: none; margin: 4px 0 0; padding: 0; }
.pv-wk { position: relative; display: grid; grid-template-columns: 56px 12px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: var(--rh); padding-block: 7px; border-bottom: 1px solid var(--pv-line-2); }
.pv-wk:last-child { border-bottom: 0; }
.pv-wk::before { content: ""; position: absolute; left: 75.5px; top: 0; bottom: -1px; width: 1px; background: var(--sand); }
.pv-wk:first-child::before { top: 50%; }
.pv-wk:last-child::before { bottom: 50%; }
.pv-wk-n { font-size: 13px; font-weight: 500; color: var(--grey-2); white-space: nowrap; }
.pv-wk-node { position: relative; z-index: 1; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px var(--ink); }
.pv-wk-t { min-width: 0; }
.pv-wk-t b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(15.5px, 2vh, 18px); line-height: 1.2; letter-spacing: -0.012em; color: var(--bone); }
.pv-wk-t span { display: block; margin-top: 3px; font-size: clamp(13px, 1.6vh, 14.5px); line-height: 1.35; color: var(--pv-dim); }
.pv-wk-cad, .pv-cad-key { display: inline-flex; align-items: center; gap: 7px; }
.pv-wk-cad i, .pv-cad-key i { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(241, 239, 231, 0.7); }
.pv-wk-cad i.s, .pv-cad-key i.s { width: 11px; height: 11px; border: 0; background: var(--sand); }
.pv-cad-key i:not(.s) { margin-left: 10px; }

/* what the workspace holds */
.pv-tiles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-tiles li { min-height: clamp(84px, 13.5vh, 132px); display: grid; align-content: center; gap: 5px; padding: 14px 18px; border: 1px solid var(--line-dark); border-radius: 14px; background: var(--ink-2); }
.pv-tiles b { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2.1vh, 19px); letter-spacing: -0.012em; color: var(--bone); }
.pv-tiles span { font-size: clamp(13px, 1.6vh, 14.5px); line-height: 1.35; color: var(--pv-dim); }

/* ---------- the film (motion allowed): one world, a camera moving through it ----------
   Built like the homepage's film. The world is drawn in fixed pixel units and scaled as a whole by
   private.js: the baseline ring, a rail with six week stations, the workspace under the rail, the
   two profiles and the report at the far end. It plays by itself and loops; it is not tied to the
   page scroll. The drawing is hidden from screen readers; the plain figures above stay in the page
   for them, for reduced motion and for no script. The moving lights carry a soft glow, as on the
   homepage's film (user request).
   Everything that moves here moves by transform or opacity only, so a frame is put together from
   pictures the browser already has instead of being painted again; nothing uses a mask. */
.pv-film { display: none; }
.has-film .pv-film { display: block; position: relative; min-width: 0; }
.has-film .pv-fig { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pv-view { position: relative; overflow: hidden; height: 440px; }
.pv-grid { position: absolute; inset: -40px; pointer-events: none; background-image: radial-gradient(rgba(241, 239, 231, 0.085) 1px, transparent 1.6px); background-size: 28px 28px; will-change: transform; }
/* the dots fade out towards the edges: a still shade laid over them (a mask on a moving layer is costly) */
.pv-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(17, 17, 16, 0) 20%, var(--ink-2) 78%); }
.is-wide .pv-vig { background: radial-gradient(ellipse 75% 65% at 58% 50%, rgba(0, 0, 0, 0) 20%, #000 78%); }
.pv-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; transition: opacity 320ms var(--ease); }
/* while the camera zooms, the world and every moving piece keep the picture they already have; the
   class comes off when the zoom ends and they are drawn once more at the new size (private.js) */
.pv-film.is-zoom .pv-world, .pv-film.is-zoom .pv-world .m { will-change: transform; }
.pv-film.is-cut .pv-world { opacity: 0; transition: none; }
.pv-world > *, .pvw-g > *, .pvw-a > * { position: absolute; }
/* one group per part. A part the camera cannot see is switched off whole (private.js), so only the
   pieces on screen have layers */
.pvw-g { left: 0; top: 0; width: 0; height: 0; }
.pvw-g.off { display: none; }
.pvw-a { width: 0; height: 0; }
.pvw-svg { left: 0; top: 0; overflow: visible; max-width: none; pointer-events: none; }
.pvw-svg path { fill: none; stroke-dasharray: 1.02 2; stroke-dashoffset: calc(1.02 * (1 - var(--draw, 0))); }
.pvw-base { stroke: rgba(241, 239, 231, 0.16); stroke-width: 1.5; }
.pvw-th { stroke: var(--sand); stroke-width: 2; }
.pvw-th.tha { stroke: rgba(184, 163, 126, 0.5); stroke-width: 1.25; }
.pvw-ring { stroke: rgba(241, 239, 231, 0.2); stroke-width: 1; }
.pvw-lk { stroke: rgba(184, 163, 126, 0.42); stroke-width: 1; }
.pvw-ml { stroke: rgba(241, 239, 231, 0.28); stroke-width: 1; }
.pvw-cmp { stroke: rgba(184, 163, 126, 0.6); stroke-width: 1.25; }
.pvw-down, .pvw-sheet, .pvw-fold { stroke: rgba(241, 239, 231, 0.4); stroke-width: 1.25; }
.pvw-90, .pvw-90h { stroke: var(--sand); stroke-width: 1.75; }
.pvw-pool { border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(241, 239, 231, 0.05), rgba(241, 239, 231, 0)); }
.pvw-mono { margin: 0; font: 500 10.5px/1 var(--pv-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-light); white-space: nowrap; }
.pvw-sig { left: 0; top: 0; width: 0; height: 0; opacity: 0; }
.pvw-sig > i, .w-ph > i, .b-sweep > i, .r-sw > i { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff6e2; box-shadow: 0 0 0 3.5px rgba(184, 163, 126, 0.3), 0 0 16px 4px rgba(184, 163, 126, 0.55); }

/* 1 baseline */
.b-sheet > i { left: -31px; top: -40px; width: 62px; height: 80px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 11px; border-radius: 9px; background: #181713; border: 1px solid rgba(241, 239, 231, 0.16); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); }
.b-sheet b { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--sand) calc(var(--h, 0) * 100%), rgba(241, 239, 231, 0.3)); }
.b-sheet b:nth-child(2) { width: 72%; } .b-sheet b:nth-child(4) { width: 48%; }
.b-scan > i { left: -1px; top: -62px; width: 2px; height: 124px; background: linear-gradient(transparent, var(--sand), transparent); box-shadow: 0 0 22px 6px rgba(184, 163, 126, 0.3); }
.b-cap > span, .r-cap > span { left: 0; top: 0; transform: translateX(-50%); }
.b-node > i { left: -6px; top: -6px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--sand) calc(var(--hot, 0) * 100%), rgba(241, 239, 231, 0.5)); background: color-mix(in srgb, var(--sand) calc(var(--hot, 0) * 100%), #000); }
.b-node > span { width: max-content; max-width: 92px; font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--bone); }
.b-node.r > span { left: 14px; top: 0; transform: translateY(-50%); }
.b-node.l > span { right: 14px; top: 0; transform: translateY(-50%); text-align: right; }
.b-node.t > span { left: 0; bottom: 13px; transform: translateX(-50%); text-align: center; max-width: none; white-space: nowrap; }
.b-node.b > span { left: 0; top: 13px; transform: translateX(-50%); text-align: center; }
.b-sweep > i { top: -98.5px; }
.b-core > span { left: 0; top: 0; transform: translate(-50%, -50%); width: 112px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.15; letter-spacing: -0.01em; color: var(--bone); }
.b-plan > span { left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(184, 163, 126, 0.6); background: #0b0b0a; font-size: 12.5px; font-weight: 600; color: var(--bone); white-space: nowrap; }
.b-plan em { display: inline-flex; gap: 4px; }
.b-plan em i { width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }

/* 2 six weeks */
.w-st > .w-dot, .w-st > .w-rip { left: -7px; top: -7px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; }
.w-st > .w-dot { border: 1.5px solid color-mix(in srgb, var(--sand) calc(var(--on, 0) * 100%), rgba(241, 239, 231, 0.5)); background: color-mix(in srgb, var(--sand) calc(var(--on, 0) * 100%), #000); transform: scale(calc(1 + 0.3 * var(--now, 0))); }
.w-st > .w-rip { border: 1.5px solid var(--sand); opacity: 0; }
.w-st > .w-wk { left: 0; bottom: 21px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--bone) calc(var(--now, 0) * 100%), var(--grey-2)); opacity: calc(1 - var(--fin, 0)); }
/* the playhead breathes: a soft halo that grows and fades (transform and opacity only), and only while the six weeks are on camera */
.w-ph > i::after { content: ""; position: absolute; left: -11px; top: -11px; width: 31px; height: 31px; border-radius: 50%; background: radial-gradient(closest-side, rgba(184, 163, 126, 0.5), rgba(184, 163, 126, 0)); opacity: 0.5; }
@keyframes pvBreath { 0%, 100% { transform: scale(0.8); opacity: 0.4; } 50% { transform: scale(1.3); opacity: 0.95; } }
.pv-film.is-live.at-1 .w-ph > i::after { animation: pvBreath 2.2s ease-in-out infinite; }
.w-st { opacity: 0; }
.w-ci > i { left: -4px; top: -4px; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(241, 239, 231, 0.75); background: #000; }
.w-det-in { left: -180px; top: 0; width: 360px; text-align: center; }
.w-stem { display: block; width: 1px; height: 34px; margin: 0 auto 14px; background: linear-gradient(var(--sand), rgba(184, 163, 126, 0.12)); transform-origin: top; transform: scaleY(var(--rv, 0)); }
.w-det .pvw-mono { color: var(--sand); opacity: var(--rv, 0); }
.w-f { margin: 10px 0 0; padding-bottom: 3px; overflow: hidden; font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.14; letter-spacing: -0.02em; color: var(--bone); }
.w-f > span { display: block; transform: translateY(calc((1 - var(--rv, 0)) * 106%)); }
.w-det .w-ol { margin-top: 20px; }
.w-det .w-ol, .w-o { opacity: var(--ro, 0); transform: translateY(calc((1 - var(--ro, 0)) * 10px)); }
.w-o { margin: 9px auto 0; max-width: 312px; font-size: 14.5px; line-height: 1.4; color: var(--pv-dim); }

/* 3 the workspace */
.x-hub > span, .x-rip { left: -52px; top: -52px; width: 104px; height: 104px; box-sizing: border-box; border-radius: 28px; }
.x-hub > span { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #201e19, #0d0d0c); border: 1px solid rgba(184, 163, 126, 0.6); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; color: var(--bone); }
.x-rip { border: 1px solid var(--sand); opacity: 0; }
.pv-film.is-live.at-2 .x-rip { animation: pvRip 3.2s ease-out infinite; }      /* only while the workspace is on camera */
.pv-film.is-live.at-2 .x-rip + .x-rip { animation-delay: -1.6s; }
@keyframes pvRip { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.42); } }
.x-mod > i { left: -23px; top: -23px; width: 46px; height: 46px; box-sizing: border-box; display: grid; place-items: center; border-radius: 14px; background: #181713; border: 1px solid rgba(241, 239, 231, 0.16); color: var(--grey-light); transition: border-color 0.4s, color 0.4s, background-color 0.4s; }
.x-mod > i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.x-mod > span { left: 0; top: 31px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--grey-light); transition: color 0.4s; }
.x-mod.is-on > i { border-color: var(--sand); background: var(--sand); color: var(--ink); }
.x-mod.is-on > span { color: var(--bone); }
.x-desc > span { left: -170px; top: 0; width: 340px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--pv-dim); opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.x-desc > span.is-on { opacity: 1; transform: none; }

/* 4 the final report */
.r-sheet > i { left: -20px; top: -26px; width: 40px; height: 52px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 7px; border-radius: 7px; background: #181713; border: 1px solid rgba(241, 239, 231, 0.16); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); }
.r-sheet b { display: block; height: 2.5px; border-radius: 2px; background: rgba(241, 239, 231, 0.3); }
.r-sheet b:nth-child(2) { width: 70%; } .r-sheet b:nth-child(3) { width: 45%; background: var(--sand); }
.r-dot > i { left: -4.5px; top: -4.5px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; }
.r-a > i { border: 1.5px solid rgba(241, 239, 231, 0.55); background: #000; }
.r-b > i { background: var(--sand); }
.r-sw > i { top: -44.5px; width: 7px; height: 7px; left: -3.5px; }
.r-lab > span { left: 0; top: 0; transform: translate(-50%, -50%); font-size: 8.5px; letter-spacing: 0.1em; }
.r-lab.lb > span { color: var(--sand); }
.r-doc { box-sizing: border-box; padding: 20px 20px 0 24px; }
.r-doc .r-h { color: var(--bone); }
.r-row { position: relative; margin: 0; height: 42px; padding-left: 22px; display: flex; flex-direction: column; justify-content: center; }
.r-h + .r-row { margin-top: 12px; }
.r-row > svg { position: absolute; left: -3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: currentColor; color: var(--sand); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.r-row b { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; color: var(--bone); }
.r-row small { margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--pv-dim); }
.r-90 > span { left: 0; top: 0; color: var(--sand); }

/* things fixed to the screen while the world moves: the week picker, the note, the labels of the wide view */
.pv-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pv-hudb { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.pv-note { margin: 0; padding-inline: 14px; text-align: center; font-size: 13px; line-height: 1.35; color: var(--grey-2); }
.pv-wkbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
.pv-wkpick { display: inline-flex; align-items: center; gap: 5px; }
.pv-wkpick em { margin-right: 5px; font-style: normal; font-size: 12.5px; color: var(--grey-2); }
.pv-wkpick button { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 239, 231, 0.2); background: none; color: var(--grey-light); font: 500 12.5px/1 var(--text); cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.pv-wkpick button i { display: none; }
.pv-hud.is-wk .pv-wkpick button { pointer-events: auto; }
.pv-wkpick button:hover { border-color: rgba(241, 239, 231, 0.55); color: var(--bone); }
.pv-wkpick button.is-done { border-color: rgba(184, 163, 126, 0.6); color: var(--bone); }
.pv-wkpick button.is-now { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.pv-hud .pv-cad-key { font-size: 12.5px; color: var(--grey-light); }
.pv-ovl { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: -0.01em; color: var(--bone); opacity: 0; }

.pv-inside .sec-head { margin-bottom: clamp(12px, 2vw, 28px); }
/* ---- wide screens: the film is a stage one screen wide, the part's text beside the scene. It plays
   by itself; the part names along the bottom show where it is and jump to a part ---- */
.is-wide .pv-pin { position: relative; height: clamp(480px, 78vh, 780px); max-width: none; padding: 0; }
.is-wide .pv-plate { height: 100%; border: 0; border-radius: 0; background: #000; }
.is-wide .pv-film, .is-wide .pv-view { position: absolute; inset: 0; height: auto; }
/* the stage has no frame: its top and bottom edges melt into the page */
.is-wide .pv-view::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, #000); }
.is-wide .pv-view::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #000 0, #000 var(--s1, 0px), rgba(0, 0, 0, 0) var(--s2, 0px)); opacity: var(--veil, 1); }
.is-wide .pv-ch { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; border: 0; pointer-events: none; }
.is-wide .pv-ch-t { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; }
.is-wide .pv-ch-t .h3 { font-size: clamp(28px, 3.1vw, 44px); }
.is-wide .pv-ch-t .body { font-size: clamp(16px, 1.3vw, 19px); }
.is-wide .pv-prog { position: absolute; z-index: 4; left: var(--capx, 60px); bottom: 22px; display: flex; gap: 20px; }
.pv-prog button { position: relative; display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--grey-2); transition: color 300ms var(--ease); }
.pv-prog button:hover { color: var(--bone); }
.pv-prog button i { position: absolute; left: 0; right: 14px; top: -1px; height: 1px; background: var(--sand); transform-origin: left; transform: scaleX(0); }
.pv-prog button[aria-selected="true"] { color: var(--bone); }
.is-wide .pv-prog button { min-width: 58px; padding-top: 12px; font-size: 13px; }
.is-wide .pv-prog button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 1px; background: rgba(241, 239, 231, 0.16); }
.is-wide .pv-prog button i { right: 0; top: 0; height: 2px; border-radius: 1px; }
/* pause and play */
.pv-play { display: none; }
.has-film .pv-play { position: absolute; z-index: 5; right: 14px; top: 66px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(241, 239, 231, 0.2); background: rgba(0, 0, 0, 0.5); color: var(--grey-light); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.pv-play:hover { color: var(--bone); border-color: rgba(241, 239, 231, 0.5); }
.pv-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-play .i-play { fill: currentColor; stroke-width: 1; }
.pv-play[aria-pressed="true"] .i-play, .pv-play[aria-pressed="false"] .i-pause { display: none; }
.has-film.is-wide .pv-play { top: auto; right: 22px; bottom: 18px; }
@media (max-width: 560px) { .has-film .pv-play { top: 58px; right: 12px; } }

/* ---- card mode (phones, tablets, short windows): one card, four parts, tap or swipe.
   Nothing advances on its own; each figure fills in the first time its part is opened ---- */
.is-stepper .pv-plate { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; overflow: clip; }
/* The box is glass (user request), after the homepage's glass panel: soft sand light behind it, a
   frosted body, a pale sheen from the top left, a lit rim and a bright line along the top edge.
   It is painted, not live. The body, the sheen and the light caught in it are one still layer laid
   over the box, so the film underneath keeps its own plain ground and its edge fades still match.
   There is no backdrop blur and nothing here moves: a live blur would have to be worked out again on
   every frame of the film, which is exactly what makes glass lag, and behind the box there is only
   black for it to blur. */
.is-stepper .pv-pin { position: relative; }
.is-stepper .pv-pin::before { content: ""; position: absolute; z-index: 0; inset: -170px 0 -130px; pointer-events: none; background:
    radial-gradient(min(46%, 460px) 160px at 16% 200px, rgba(184, 163, 126, 0.34), rgba(184, 163, 126, 0) 72%),
    radial-gradient(40% 26% at 94% 56%, rgba(233, 227, 211, 0.13), rgba(233, 227, 211, 0) 72%),
    radial-gradient(min(56%, 560px) 120px at 42% calc(100% - 140px), rgba(138, 119, 87, 0.36), rgba(138, 119, 87, 0) 72%); }
.is-stepper .pv-plate { z-index: 1; --ink-2: #070707; background: #070707; border-color: rgba(241, 239, 231, 0.2); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55); }
.is-stepper .pv-plate::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 90%) top / 100% 1px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.045) 13%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(44% 28% at 14% 3%, rgba(184, 163, 126, 0.17), rgba(184, 163, 126, 0) 72%),
    radial-gradient(44% 28% at 96% 58%, rgba(233, 227, 211, 0.055), rgba(233, 227, 211, 0) 72%),
    radial-gradient(56% 20% at 42% 101%, rgba(184, 163, 126, 0.14), rgba(184, 163, 126, 0) 72%),
    linear-gradient(155deg, rgba(241, 239, 231, 0.065), rgba(241, 239, 231, 0.02) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.035), inset 0 0 34px rgba(241, 239, 231, 0.045); }
.is-stepper .pv-prog { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 54px; padding-inline: 10px; border-bottom: 1px solid var(--line-dark); }
.is-stepper .pv-prog button { justify-content: center; font-size: 13px; }
.is-stepper .pv-prog button i { top: auto; bottom: -1px; left: 6px; right: 6px; transform: scaleX(0); transition: transform 400ms var(--pv-out); }
.is-stepper .pv-prog button[aria-selected="true"] i { transform: scaleX(1); }
.is-stepper .pv-ch { grid-area: 2 / 1; border: 0; display: none; }
.is-stepper .pv-ch.is-on { display: grid; }
@media (prefers-reduced-motion: no-preference) { .is-stepper .pv-ch.is-on { animation: pvShow 420ms var(--ease) both; } }
/* card mode with the film: tabs, the part's title, the film, then the part's text */
.is-stepper.has-film .pv-plate { grid-template-rows: auto; }
.is-stepper.has-film .pv-view::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(var(--ink-2), rgba(17, 17, 16, 0) 4%, rgba(17, 17, 16, 0) 96%, var(--ink-2)); }
.is-stepper.has-film .pv-ch, .is-stepper.has-film .pv-ch.is-on { animation: none; }
.is-stepper.has-film .pv-ch.is-on, .is-stepper.has-film .pv-ch-t { display: contents; }
.is-stepper.has-film .pv-prog { grid-area: auto; grid-row: 1; }
/* with the film, private.js sets each bar's length itself; the bar is a layer of its own, so moving it paints nothing */
.has-film .pv-prog button i { transition: none; will-change: transform; }
.is-stepper.has-film .pv-ch-t > * { grid-column: 1; margin: 0; padding-inline: 20px; max-width: none; }
.is-stepper.has-film .pv-ch-t .label { grid-row: 2; padding-top: 22px; }
.is-stepper.has-film .pv-ch-t .h3 { grid-row: 3; padding-top: 8px; }
.is-stepper.has-film .pv-film { grid-row: 4; grid-column: 1; margin-top: 4px; }
.is-stepper.has-film .pv-ch-t .body { grid-row: 5; padding-top: 14px; font-size: 16px; margin-top: 0; }
.is-stepper.has-film .pv-ch-t .body + .body { grid-row: 6; padding-top: 10px; margin-top: 0; }
.is-stepper.has-film .pv-step { grid-area: auto; grid-row: 7; grid-column: 1; margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) { .is-stepper.has-film .pv-ch.is-on .pv-ch-t > * { animation: pvShow 420ms var(--ease) both; } }
@keyframes pvShow { from { opacity: 0; transform: translateY(8px); } }
/* the buttons stay at the bottom of the screen while the card is being read */
.is-stepper .pv-step { grid-area: 3 / 1; position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-dark); background: var(--ink-2); border-radius: 0 0 28px 28px; }
.pv-step button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 980px; border: 1px solid var(--line-dark); background: rgba(241, 239, 231, 0.06); color: var(--bone); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 200ms var(--ease), opacity 200ms var(--ease); }
.pv-step button:hover { background: rgba(241, 239, 231, 0.12); }
.pv-step button svg { width: 16px; height: 16px; flex: none; }
.pv-step-prev { flex: none; width: 46px; padding: 0 !important; }
.pv-step-prev[disabled] { opacity: 0.3; cursor: default; }
.pv-step-n { font-size: 13px; color: var(--grey-2); white-space: nowrap; }
.pv-step-n b { color: var(--bone); font-weight: 500; }
.pv-step-pre[hidden] { display: none; }

@media (max-width: 959px) {
  .pv-plate { border-radius: 22px; }
  .is-stepper .pv-step { border-radius: 0 0 22px 22px; }
  /* phones: title, then the figure, then the lines that explain it */
  .is-stepper .pv-ch { gap: 0; padding: 26px 18px 24px; align-content: start; }
  .is-stepper .pv-ch-t { display: contents; }
  .is-stepper .pv-ch-t .label { order: 1; }
  .is-stepper .pv-ch-t .h3 { order: 2; }
  .is-stepper .pv-fig { order: 3; margin-top: 22px; }
  .is-stepper .pv-ch-t .body { order: 4; margin-top: 20px; font-size: 16px; }
  .is-stepper .pv-ch-t .body + .body { order: 5; margin-top: 10px; }
}
@media (max-width: 560px) {
  .pv-pin { padding-inline: 14px; }
  .is-stepper.has-film .pv-prog { height: 48px; }
  .pv-wkpick button { width: 28px; height: 28px; }
  .pv-hudb { gap: 7px; bottom: 8px; }
  .pv-wkbar { gap: 6px 18px; }
  .pv-note { font-size: 12.5px; }
  .pv-fig { padding: 14px 16px 12px; border-radius: 16px; }
  .pv-fig > header { font-size: 10px; letter-spacing: 0.1em; }
  .pv-list { --rh: 34px; }
  .pv-list--two { --rh: 62px; }
  /* phones: the week number sits above its focus, so the text gets the full width */
  .pv-weeks { --rh: 64px; }
  .pv-wk { grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding-block: 10px; }
  .pv-wk::before { left: 5.5px; }
  .pv-wk-n { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--sand); }
  .pv-wk-node { grid-column: 1; grid-row: 1 / span 2; }
  .pv-wk-t { grid-column: 2; grid-row: 2; }
  .pv-wk-cad { grid-column: 3; grid-row: 1 / span 2; }
  .pv-wk-cad { gap: 5px; }
  .pv-wk-cad i { width: 5px; height: 5px; } .pv-wk-cad i.s { width: 9px; height: 9px; }
  .pv-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pv-tiles li { min-height: 0; padding: 12px 14px; }
}
@media (max-width: 359px) {
  .pv-step-pre { display: none; }
  .pv-step button { padding: 0 14px; font-size: 14px; }
  .is-stepper .pv-prog button { font-size: 12px; }
  .is-stepper .pv-ch { padding-inline: 14px; }
  .pv-wk-cad { display: none; }
}

/* ---------- what you leave with: scrambled characters pass a scanner line and come out as glass cards ----------
   A plain-script version of the "scanner card stream" component the client supplied, run in reverse:
   blocks of scrambled characters come in from the left (from above on phones), cross the line and
   leave it as results, in one unbroken stream that keeps moving slowly and goes round and round
   (user request). The list itself is the real content: with reduced motion or no script it simply
   shows as the same glass cards, and when the animation runs it stays in the page for screen
   readers. The line glows, as the component's does.
   The two rows (.fg-row) are each moved by one endless animation that private.js starts; the
   browser runs it off the main thread. Nothing here uses a mask, and nothing is painted per frame. */
.pv-leave { overflow: hidden; overflow: clip; }
.pv-forge { margin-top: clamp(36px, 5vw, 60px); }
.pv-lv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1040px) { .pv-lv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pv-lv { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.pv-lv li, .fg-glass { box-sizing: border-box; padding: 22px 22px 24px; border-radius: 20px; border: 1px solid rgba(241, 239, 231, 0.16); background: linear-gradient(155deg, rgba(241, 239, 231, 0.095), rgba(241, 239, 231, 0.028) 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 44px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); }
.pv-lv h3, .fg-glass h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; letter-spacing: -0.015em; color: var(--bone); }
.pv-lv p, .fg-glass p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--pv-dim); }
.is-forge .pv-lv { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fg-stage { position: relative; overflow: hidden; }
.fg-stage::after { content: ""; position: absolute; z-index: 4; pointer-events: none; }      /* the edge the blocks come in from fades to black */
.fg-stage.fg-h::after { left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0)); }
.fg-stage.fg-v::after { left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); }
.fg-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.fg-v .fg-cv { display: none; }
.fg-line { position: absolute; z-index: 3; left: 0; top: 0; border-radius: 2px; pointer-events: none; opacity: 0.55; transition: opacity 400ms var(--ease); background: linear-gradient(180deg, transparent, #f3e3bd 18%, #fff6e2 50%, #f3e3bd 82%, transparent); box-shadow: 0 0 10px rgba(214, 190, 140, 0.9), 0 0 22px rgba(184, 163, 126, 0.75), 0 0 46px rgba(184, 163, 126, 0.5); will-change: transform; }
.fg-stage.is-on .fg-line { opacity: 1; }
.fg-stage.is-live .fg-line { animation: fgPulse 1.5s ease-in-out infinite alternate; }
.fg-h .fg-line { transform-origin: 50% 50%; }
.fg-v .fg-line { background: linear-gradient(90deg, transparent, #f3e3bd 14%, #fff6e2 50%, #f3e3bd 86%, transparent); }
@keyframes fgPulse { from { transform: scale(1); } to { transform: scale(1.03); } }
.fg-before, .fg-after { position: absolute; z-index: 2; overflow: hidden; }
.fg-out { position: absolute; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 88%); }      /* where the cards leave */
.fg-v .fg-out { background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 88%); }
.fg-before { pointer-events: none; }
/* the scrambled blocks are dim far from the line and brighten as they reach it: one still shade over
   the whole box does that (a mask on every moving block was costly), and the box as a whole flickers */
.fg-before::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 92%); }
.fg-v .fg-before::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 94%); }
.fg-stage.is-live .fg-before { animation: fgGlitch 0.1s linear infinite alternate-reverse; }
@keyframes fgGlitch { 0%, 16%, 50%, 100% { opacity: 1; } 15%, 99% { opacity: 0.9; } 49% { opacity: 0.8; } }
.fg-row { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.fg-glass, .fg-bits { position: absolute; left: 0; top: 0; }
.fg-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; }
.fg-mark { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
.fg-glass { transition: border-color 300ms var(--ease); }
.fg-glass:hover { border-color: rgba(184, 163, 126, 0.6); }
/* in the stream the cards are fewer and larger than in the plain list */
.fg-h .fg-glass { padding: 26px 26px 28px; }
.fg-h .fg-glass h3 { font-size: clamp(20px, 1.65vw, 24px); }
.fg-h .fg-glass p { margin-top: 11px; font-size: 16.5px; }
.fg-bits { margin: 0; padding: 0; overflow: hidden; border-radius: 20px; white-space: pre; text-align: left; font: 500 11px/13px var(--pv-mono); color: rgba(222, 205, 166, 0.62); }
/* phones: sparks leaving the line, each one a small piece the browser moves and fades by itself */
.fg-fx { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 0; pointer-events: none; display: none; }
.fg-v .fg-fx { display: block; }
.fg-fx i { position: absolute; top: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff3d6; opacity: 0; }
.fg-stage.is-live.is-on .fg-fx i { animation: fgSpark var(--d, 1.4s) linear var(--w, 0s) infinite; }
@keyframes fgSpark { 0% { transform: translate3d(0, 0, 0); opacity: var(--a, 0.8); } 100% { transform: translate3d(var(--dx, 0px), var(--dy, 40px), 0); opacity: 0; } }
@media (max-width: 859px) { .pv-lv li, .fg-glass { padding: 16px 18px 18px; border-radius: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(155deg, #1c1b18, #111110 62%); } .pv-lv p, .fg-glass p { margin-top: 6px; font-size: 15px; } .fg-bits { border-radius: 16px; } }
/* a device that cannot keep up loses the blur behind the glass, nothing else */
.fg-lite .fg-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(155deg, rgba(40, 38, 33, 0.92), rgba(19, 19, 17, 0.92) 62%); }
@media (prefers-reduced-transparency: reduce) { .pv-lv li, .fg-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #171613; } }

/* ---------- who we have trained: three figures over the edge of the sun (user request, after a reference
   the user supplied that had the Earth's horizon there) ----------
   The sun is a picture made for this page by make_sun.py; it is not a photograph. It drifts very
   slowly from side to side (it turned about its own centre until 6 Oct 2026; see pvSunDrift). That
   is one picture moved by one transform; nothing is painted per frame. The fades at the sides and
   the bottom are still shades laid over it. Flares rise from the rim and fall back (further down).
   Reduced motion gets the picture standing still with its flares drawn once, standing. */
.pv-reach { position: relative; padding-bottom: 0; overflow: hidden; overflow: clip; }
.pv-reach .wrap { position: relative; z-index: 1; }
.pv-reach .sec-head { margin-bottom: 0; }
.pv-stats { list-style: none; margin: clamp(44px, 5.4vw, 76px) auto 0; padding: 0; max-width: 1060px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-stats li { position: relative; padding: 2px clamp(12px, 3vw, 44px) 0; text-align: center; }
.pv-stats li + li::before { content: ""; position: absolute; left: 0; top: 18px; height: 62px; border-left: 1px dashed rgba(241, 239, 231, 0.22); }
.pv-stats b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(40px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -0.035em; color: var(--bone); }
/* the figures roll in digit by digit, as the proof numbers on the homepage do (user request). The
   homepage's own script does it (anything marked data-roll); this only keeps the digits one width */
.pv-stats b[data-roll] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-stats li > span { display: block; margin: 14px auto 0; max-width: 15em; font-size: 16px; line-height: 1.4; color: var(--grey-light); text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { .js .pv-stats li:nth-child(2)[data-reveal] { transition-delay: 90ms; } .js .pv-stats li:nth-child(3)[data-reveal] { transition-delay: 180ms; } }
.pv-reach-note { margin: clamp(40px, 4.6vw, 64px) auto 0; max-width: 41em; text-align: center; }
.pv-reach-note .body { max-width: none; font-size: 16px; color: var(--grey-light); text-wrap: pretty; }
.pv-reach-note .small { margin-top: 12px; }
/* the room above the sun (margin-top) is what the tallest flare needs to stay clear of the words above it */
.pv-sun { --sun-s: 4%; position: relative; z-index: 0; height: clamp(250px, 33vw, 600px); margin-top: clamp(0px, 0.6vw, 12px); pointer-events: none; }
.pv-sun-turn { position: absolute; left: -8%; top: 0; width: 116%; }
.pv-sun-turn > picture { display: block; }
.pv-sun-turn > picture img { display: block; width: 100%; height: auto; }
.pv-sun::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.72) 5%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0) 83%, rgba(0, 0, 0, 0.72) 95%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 74%, #000 100%); }
/* the flares (user request, 6 Oct 2026): material that leaves a point on the rim, runs up along an arch
   and lands on the rim again, or is thrown up, arcs over and comes down a little way off. private.js
   draws them; here each one only gets its box: stood on the rim at --x, --y, --w wide (make_private.py
   works these out; phones have their own set, --mx and so on), with its base line --b above the box's
   bottom edge. The box stays upright (the script turns the drawing to lie along the rim instead: a
   browser with no graphics chip is slow at turned layers), so its two canvases, one over the other
   (the threads, and their bright heads), reach a little past it on every side. Each canvas has a
   layer of its own, so a new frame of a flare never makes the browser repaint the sun under it. */
.pv-flare { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--a); transform: translate(-50%, calc(var(--b) - 100%)); }
.pv-flare.m-only { display: none; }
.pv-flare canvas { position: absolute; left: -8%; top: -10%; display: block; width: 116%; height: 130%; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .pv-sun-turn { will-change: transform; animation: pvSunDrift 90s ease-in-out infinite alternate paused; }
  .pv-sun.is-live .pv-sun-turn { animation-play-state: running; }
}
/* the sun drifts very slowly from side to side, by --sun-s of its own width each way. Until 6 Oct 2026 it
   turned about its own middle instead (2 degrees each way), which looks almost the same; but with the
   flares moving on top of it, a browser with no graphics chip then had to redraw one large tilted picture
   and nine small ones on every frame (about 40 frames a second in the test browser). A picture that
   only slides is cheap to redraw (53 to 60 with the flares). */
@keyframes pvSunDrift { from { transform: translateX(calc(var(--sun-s) * -1)); } to { transform: translateX(var(--sun-s)); } }
@media (max-width: 760px) {
  /* phones: a picture of its own, more strongly curved, and the three figures stay side by side */
  .pv-sun { --sun-s: 5%; height: clamp(230px, 62vw, 420px); margin-top: 24px; }
  .pv-sun-turn { left: -15%; width: 130%; }
  .pv-flare { left: var(--mx); top: var(--my); width: var(--mw); }
  .pv-flare.w-only { display: none; }
  .pv-flare.m-only { display: block; }
  .pv-stats { margin-top: 40px; }
  .pv-stats li { padding-inline: 8px; }
  .pv-stats li + li::before { top: 8px; height: 44px; }
  .pv-stats b { font-size: clamp(32px, 9.6vw, 44px); }
  .pv-stats li > span { margin-top: 10px; font-size: 13px; line-height: 1.35; max-width: 9.5em; }
  .pv-reach-note { margin-top: 36px; }
  .pv-reach-note .body { font-size: 15.5px; }
}

/* ---------- who it is for: one card in two halves (user request, after a reference the user supplied) ----------
   Left, what makes a poor fit, dimmed and struck through; right, what makes a strong fit, lit, with
   ticks. The marks are small drawn crosses and ticks; there are no dashes. When the card comes on
   screen the left lines are crossed out one after the other and the ticks on the right land in turn. */
.pv-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; margin-inline: auto; border: 1px solid var(--line-dark); border-radius: 28px; overflow: hidden; background: #050505; }
.pv-fit-col { padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3.4vw, 46px) clamp(30px, 3.8vw, 50px); }
.pv-fit-col.yes { background: #151411; border-left: 1px solid var(--line-dark); }
.pv-fit h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--grey-2); }
.pv-fit-col.yes h3 { color: var(--bone); }
.pv-fit svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-fit ul { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; display: grid; gap: 18px; }
.pv-fit li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 16px; align-items: start; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; }
.pv-fit li svg { margin-top: 0.22em; }
.pv-fit-col.no li { color: var(--grey-2); }
.pv-fit-col.no li svg { color: #5d5b55; width: 18px; height: 18px; margin-left: 1px; }
.pv-fit-col.no li span { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(134, 132, 125, 0.7); }
.pv-fit-col.yes li { color: var(--bone); }
.pv-fit-col.yes li svg { color: var(--sand); stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .js .pv-fit .no li span { color: var(--grey-light); text-decoration-color: rgba(134, 132, 125, 0); transition: color 600ms var(--ease), text-decoration-color 600ms var(--ease); }
  .js .pv-fit .no li svg { opacity: 0; transform: scale(0.5); transition: opacity 400ms var(--ease), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .pv-fit .yes li svg { opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease), transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .pv-fit .yes li span { opacity: 0.35; transition: opacity 600ms var(--ease); }
  .js .pv-fit.is-in .no li span { color: var(--grey-2); text-decoration-color: rgba(134, 132, 125, 0.7); }
  .js .pv-fit.is-in .no li svg, .js .pv-fit.is-in .yes li svg { opacity: 1; transform: none; }
  .js .pv-fit.is-in .yes li span { opacity: 1; }
  .js .pv-fit.is-in .no li:nth-child(1) > * { transition-delay: 500ms; }
  .js .pv-fit.is-in .no li:nth-child(2) > * { transition-delay: 760ms; }
  .js .pv-fit.is-in .yes li:nth-child(1) > * { transition-delay: 1150ms; }
  .js .pv-fit.is-in .yes li:nth-child(2) > * { transition-delay: 1400ms; }
}
@media (max-width: 760px) {
  .pv-fit { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .pv-fit-col.yes { border-left: 0; border-top: 1px solid var(--line-dark); }
  .pv-fit li { gap: 13px; font-size: 16.5px; }
}

/* the black tile sits inside a light section: keep its text light */
.pv .tile.black .body { color: var(--grey-light); }

/* the homepage footer note, on this page */
.pv .foot p { max-width: 60em; }

/* ---------- the closing section: the sun behind the words (user request, after a reference the user supplied) ----------
   The whole ball of the sun stands behind the section (a picture drawn by make_sun.py, like the one
   under "We have trained"), the Zach AI mark sits in a tile in the middle, and under it come the
   approved headline, paragraph and calls to action, unchanged. A band of light crosses the sun from
   the upper left to the lower right: once to light it when the section comes on screen, then again
   every few seconds while it stays on screen.
   How the light is made, so that nothing lags: the picture never changes. Two sheets of black lie
   over it, each a tiny picture stretched to size (the browser keeps 128 pixels square, however large
   they are drawn). The shade rests on the sun at two thirds strength (the sun shows at about a third of its brightness) and has a gap across it; the gap is
   the band of light. The cover is the same sheet with everything below the gap made solid, so it
   also hides the part of the sun the light has not reached yet; it stands in for the shade during
   the first pass only, so one sheet is moving at a time. They stay upright and only slide
   (transform), there is no mask, no blend mode and no script per frame, and between passes nothing
   is moving at all. Outside the ball the sheets are black on black, so they cannot be seen. The
   header's frosted blur is switched off while this section is on screen (it would have to be
   worked out again on every frame the light passes under it); the header turns plain white.
   --D is the width of the ball, --sun-top where its top edge sits. The picture is described in ball
   widths: how wide it is (--pw), how tall (--ph) and how far its top is above the ball's (--pm).
   --p0 and --p1 are where the sheets start and stop their slide, measured from the middle: the
   light starts just off the upper left of the ball and stops once it is past the last of it that
   can be seen. The dark patch behind the words and the fade to black are painted into the picture, and the sheets are cut off at the picture's edge,
   so the light is only worked out where there is sun to see. */
.pv-end { --D: clamp(720px, 92vw, 1480px); --sun-top: clamp(44px, 5vw, 80px); --pw: 1.15476; --ph: 0.71726; --pm: 0.07738; --p0: -0.42; --p1: 0.532; position: relative; overflow: hidden; overflow: clip; padding-top: calc(var(--sun-top) + var(--D) * 0.135); padding-bottom: clamp(100px, 11vw, 150px); }
.pv-end-sun { position: absolute; left: 50%; top: calc(var(--sun-top) - var(--D) * var(--pm)); width: calc(var(--D) * var(--pw)); height: calc(var(--D) * var(--ph)); margin-left: calc(var(--D) * var(--pw) * -0.5); overflow: hidden; pointer-events: none; }
.pv-end-sun picture, .pv-end-sun picture img { display: block; width: 100%; height: 100%; }
.pv-end-shade, .pv-end-cover { position: absolute; display: block; max-width: none; left: 50%; top: 50%; width: calc(var(--D) * 2.4); height: calc(var(--D) * 2.4); margin: calc(var(--D) * -1.2) 0 0 calc(var(--D) * -1.2); transform: translate(calc(var(--D) * var(--p0)), calc(var(--D) * var(--p0))); }
.pv-end-cover { display: none; }
/* the last of the sun never meets the foot of the page as an edge */
.pv-end::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1; pointer-events: none; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.pv-end-in { position: relative; z-index: 2; }
.pv-end-logo { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: linear-gradient(180deg, #201f1b 0%, #0b0b0a 100%); border: 1px solid rgba(241, 239, 231, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.55); color: var(--bone); }
.pv-end-logo svg { display: block; width: 46px; height: 46px; fill: currentColor; }
.pv-end .mega { max-width: 15.5em; margin-inline: auto; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; }
.pv-end .lede { margin-top: 22px; color: rgba(241, 239, 231, 0.88); text-wrap: pretty; }
.pv-end .ctas { margin-top: 32px; }
.pv-end .more { color: var(--bone); }
.pv-end .reassure { color: rgba(241, 239, 231, 0.72); }
/* the button is the homepage's, without the live blur behind it: it would have to be worked out again on every frame the light passes */
.pv-end .pill { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(241, 239, 231, 0.94); }
.pv-end .pill:hover { background-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .pv-end-shade, .js .pv-end-cover { will-change: transform; }
  .js .pv-end-cover { display: block; }
  .js .pv-end:not(.is-lit) .pv-end-shade { visibility: hidden; }
  .js .pv-end.is-lit .pv-end-cover { display: none; }
  /* "is-pass" is one crossing; private.js sets it and takes it off again when the crossing ends. The
     sheet looks the same at both ends of its slide, so jumping back to the start cannot be seen. */
  .js .pv-end.is-pass .pv-end-shade, .js .pv-end.is-pass .pv-end-cover { animation: pvEndPass 2600ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 both; }
  .js .pv-end.is-on .pv-end-sun picture { animation: pvEndFlick 1500ms linear 1 both; }
  /* the mark, then the words, then the calls to action, as the light reaches the middle */
  .js .pv-end-in > * { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .pv-end-in > .pv-end-logo { transform: scale(0.8); transition: opacity 500ms var(--ease), transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1); }
  .js .pv-end.is-on .pv-end-in > * { opacity: 1; transform: none; }
  .js .pv-end.is-on .pv-end-in > .pv-end-logo { transition-delay: 80ms; }
  .js .pv-end.is-on .pv-end-in > .mega { transition-delay: 220ms; }
  .js .pv-end.is-on .pv-end-in > .lede { transition-delay: 340ms; }
  .js .pv-end.is-on .pv-end-in > .ctas { transition-delay: 440ms; }
  .js .pv-end.is-on .pv-end-in > .reassure { transition-delay: 520ms; }
}
@keyframes pvEndPass { from { transform: translate(calc(var(--D) * var(--p0)), calc(var(--D) * var(--p0))); } to { transform: translate(calc(var(--D) * var(--p1)), calc(var(--D) * var(--p1))); } }
/* the light catches, like a lamp coming on */
@keyframes pvEndFlick { 0% { opacity: 0.5; } 7% { opacity: 1; } 12% { opacity: 0.58; } 19% { opacity: 0.94; } 25% { opacity: 0.68; } 33% { opacity: 1; } 46% { opacity: 0.84; } 58%, 100% { opacity: 1; } }
@media (max-width: 760px) {
  /* phones: a larger ball than the screen is wide, so its top stands as a dome over the mark, and a picture of its own */
  .pv-end { --D: 190vw; --sun-top: 40px; --pw: 0.65; --ph: 0.76707; --pm: 0.06707; --p0: -0.432; --p1: 0.473; padding-top: calc(var(--sun-top) + 88px); padding-bottom: 76px; }
  .pv-end-logo { width: 72px; height: 72px; border-radius: 20px; }
  .pv-end-logo svg { width: 40px; height: 40px; }
  .pv-end .mega { font-size: clamp(31px, 8.6vw, 40px); }
}
@media (min-width: 821px) { .pv-end-live .pv-nav.nav-float:not(.menu-open) .in, .pv-ww-live .pv-nav.nav-float:not(.menu-open) .in { background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* the foot of this page is black, so the sun fades into it */
.pv-foot { background: #000; color: var(--grey-2); }
.pv-foot .rule { border-top-color: var(--line-dark); }
.pv-foot a:hover { color: var(--bone); }

/* ---------- demo (/transform/wheel): "What you leave with" as picture cards on a wheel the scroll turns ----------
   Two components the client supplied, ported to plain script in assets/js/wheel.js: on wide screens
   a ring of cards round the heading that opens into a drum seen side on (the "works wheel"); under
   960 px a six-sided drum on an upright axle (the "3D carousel"). In both, the section holds still
   on screen (position: sticky) while the page scrolls through a tall stretch, and the script turns
   the wheel by how far through that stretch the page is. Scrolling is the browser's own throughout.
   Each card is a moving picture of what its line says (assets/js/wheel-art.js draws it on a canvas;
   the still under it is one moment of the same picture) under a pane of painted glass: a rim, a
   line of light along the top, a sheen. Never a live blur, and the header's own blur is switched
   off while the wheel is on screen (body.pv-ww-live), as it is over the closing section.
   Without script, or with reduced motion, none of the classes below is set: nothing is held, and
   the six cards are a plain grid with their picture on top. The script sets is-wheel or
   is-carousel on the section, and --n (how many cards) on .pv-ww. */
.pv-leave--ww { overflow: visible; }                                                 /* a held (sticky) block needs every box round it to leave its overflow alone */
.pv-ww-side .h2 { margin: 0; }
.pv-ww-stage { margin-top: clamp(36px, 5vw, 60px); }
.pv-ww-art { display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 2.1; margin: -22px -22px 18px; border-radius: 19px 19px 0 0; object-fit: cover; }
@media (max-width: 859px) { .pv-ww-art { width: calc(100% + 36px); margin: -16px -18px 14px; border-radius: 15px 15px 0 0; } }
.pv-leave--ww.is-wheel, .pv-leave--ww.is-carousel { padding-block: 0; }
.is-wheel .pv-lv li, .is-carousel .pv-lv li { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.is-wheel .pv-ww-face, .is-carousel .pv-ww-face { position: relative; box-sizing: border-box; overflow: hidden; border-radius: 16px; background: #0b0b0a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 34px 80px -30px rgba(0, 0, 0, 0.95); }
.is-wheel .pv-ww-art, .is-carousel .pv-ww-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }
/* the moving picture, in place of the still one (wheel-art.js) */
.has-art .pv-ww-art { visibility: hidden; }
.pv-ww-cv { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }                         /* on a phone the script makes it only as tall as the part above the words */
/* the pane of glass over the picture */
.is-wheel .pv-ww-face::after, .is-carousel .pv-ww-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 46%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -40px 50px -40px rgba(0, 0, 0, 0.5); }

/* wide: the wheel. The stretch of scroll is 62% of a screen for each card; the block that is held is one screen tall */
.is-wheel .pv-ww { position: relative; height: calc(100vh + var(--n, 6) * 62vh); }
.is-wheel .pv-ww-pin { position: sticky; top: 0; height: 100vh; min-height: 540px; overflow: hidden; }
.is-wheel .pv-ww-side { position: absolute; left: 6%; top: 52.5%; z-index: 3; width: min(24%, 340px); max-width: none; margin: 0; padding: 0; transform: translateY(-50%); pointer-events: none; }
.is-wheel .pv-ww-head { width: -moz-fit-content; width: fit-content; will-change: transform; }
.is-wheel .pv-ww-head .h2 { font-size: clamp(34px, 3.6vw, 54px); }
/* the card at the front, named beside the wheel: the six notes lie on top of one another and only the one in turn shows */
.pv-ww-detail { display: grid; margin-top: clamp(22px, 2.4vw, 34px); opacity: 0; }
.pv-ww-detail > div { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 420ms var(--ease); }
.pv-ww-detail > div.on { opacity: 1; transform: none; transition-delay: 90ms; }
.pv-ww-detail b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.85vw, 27px); line-height: 1.2; letter-spacing: -0.015em; color: var(--bone); }
.pv-ww-detail span { display: block; margin-top: 10px; font-size: clamp(15.5px, 1.3vw, 18.5px); line-height: 1.45; color: var(--pv-dim); }
.is-wheel .pv-ww-stage { position: absolute; inset: 0; margin: 0; overflow: hidden; }
/* the cards above and below dissolve before the frame cuts them: two shallow strips, top and bottom (a shade over the whole stage would have to be laid over every frame) */
.is-wheel .pv-ww-stage::before, .is-wheel .pv-ww-stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 11%; pointer-events: none; }
.is-wheel .pv-ww-stage::before { top: 0; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.is-wheel .pv-ww-stage::after { bottom: 0; background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.is-wheel .pv-ww-hold { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; perspective-origin: 50% 52.5%; }
.is-wheel .pv-lv { position: absolute; left: 50%; top: 52.5%; display: block; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.is-wheel .pv-lv li { position: absolute; left: 0; top: 0; cursor: pointer; will-change: transform, opacity; }
.is-wheel .pv-lv li.is-front { cursor: default; }
.is-wheel .pv-ww-face { width: 100%; height: 100%; will-change: transform; }
/* the words stay in the page for screen readers; beside the wheel they are shown in full size */
.is-wheel .pv-ww-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pv-ww-sheen { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 46%; margin-top: -23%; opacity: 0; pointer-events: none; will-change: transform, opacity; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0) 100%); }
.pv-ww-index { position: absolute; right: 5%; top: 52.5%; z-index: 3; margin: 0; padding: 0; list-style: none; text-align: right; transform: translateY(-50%); }
.pv-ww-index button { padding: 8px 0; border: 0; background: none; font: 500 14.5px/1.25 var(--text); letter-spacing: 0; color: var(--grey-2); cursor: pointer; transition: color 250ms var(--ease); }
.pv-ww-index button:hover { color: var(--grey-light); }
.pv-ww-index button[aria-current="true"] { color: var(--bone); }
@media (max-width: 1180px) { .is-wheel .pv-ww-side { left: 4%; } .pv-ww-index { right: 3%; } .pv-ww-index button { font-size: 13.5px; } }

/* under 960 px: the coverflow carousel (wheel.js, carousel()). Nothing is held: the section is as tall as what is in
   it. --w and --h are a card's width and height. The cards are turned in the list's own perspective and stacked by
   z-index, and slide with the original's easing; the browser runs those slides by itself */
.is-carousel .pv-ww-side { text-align: center; }
.is-carousel .pv-ww-head { margin-inline: auto; }
.is-carousel .pv-ww-pin { position: relative; padding-block: clamp(64px, 14vw, 104px) clamp(56px, 12vw, 88px); }
.is-carousel .pv-ww-stage { position: relative; margin-top: clamp(26px, 6vw, 40px); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
/* the cards furthest out dissolve into the edges of the screen */
.is-carousel .pv-ww-stage::before, .is-carousel .pv-ww-stage::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 35; width: 9%; pointer-events: none; }
.is-carousel .pv-ww-stage::before { left: 0; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.is-carousel .pv-ww-stage::after { right: 0; background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0) 100%); }
.is-carousel .pv-ww-hold { position: relative; max-width: none; height: calc(var(--h, 380px) + 36px); margin: 0; padding: 0; }
.is-carousel .pv-lv { position: absolute; left: 50%; top: 18px; display: block; width: 0; height: var(--h, 380px); margin: 0; padding: 0; }
.is-carousel .pv-lv li { position: absolute; left: calc(var(--w, 280px) / -2); top: 0; width: var(--w, 280px); height: var(--h, 380px); cursor: pointer; will-change: transform, opacity; }
.is-carousel .pv-lv.is-anim li { transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1), opacity 800ms cubic-bezier(0.25, 1, 0.5, 1); }
.is-carousel .pv-lv li.is-front { cursor: default; }
.is-carousel .pv-ww-face { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
/* the words show on the card in the middle only, as in the original */
.is-carousel .pv-ww-txt { position: relative; z-index: 1; padding: 14px 20px 20px; opacity: 0; transform: translateY(14px); transition: opacity 450ms ease, transform 450ms ease; }
.is-carousel .pv-lv li.is-front .pv-ww-txt { opacity: 1; transform: none; transition-delay: 160ms; }
.is-carousel .pv-lv h3 { font-size: 19px; }
.is-carousel .pv-lv p { font-size: 15.5px; color: rgba(241, 239, 231, 0.82); }
@media (min-width: 600px) { .is-carousel .pv-ww-txt { padding: 16px 26px 26px; } .is-carousel .pv-lv h3 { font-size: 22px; } .is-carousel .pv-lv p { font-size: 17px; } }
/* the arrows, level with the middle of the cards; painted, never blurred live (the cards move under them) */
.pv-ww-arrow { position: absolute; z-index: 40; top: calc(18px + var(--h, 380px) / 2); width: 46px; height: 46px; margin-top: -23px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transition: background-color 200ms ease, transform 200ms ease; }
.pv-ww-arrow svg { width: 20px; height: 20px; }
.pv-ww-arrow:active { transform: scale(0.93); }
.pv-ww-arrow:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.pv-ww-arrow.is-prev { left: 12px; }
.pv-ww-arrow.is-next { right: 12px; }
@media (min-width: 600px) { .pv-ww-arrow.is-prev { left: 24px; } .pv-ww-arrow.is-next { right: 24px; } }
/* the dots: the card in the middle is a longer bar */
.pv-ww-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; }
.pv-ww-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: width 300ms ease, background-color 300ms ease; }
.pv-ww-dots button.on { width: 28px; background: var(--sand); }
.pv-ww-dots button:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* ---------- wheel demo (/transform/wheel): "How the six weeks work" ----------
   The heading and its line are centred over the section (user, 8 Oct 2026). The film can be stepped through: on wide
   screens a click on the right half of the stage moves to the next step and on the left half goes back, and two arrows
   beside the pause button do the same, with the next step named beside them; in the card (phones, tablets) the bar under the picture is two arrows and the step's
   name. Made by
   private.js when the stage has data-steps. The arrows are painted, never blurred live: the film moves under them. */
.pv-c .pv-inside .sec-head { text-align: center; }
.pv-c .pv-inside .sec-head .h2, .pv-c .pv-inside .sec-head .lede { margin-inline: auto; }
.pv-adv, .pv-adv-c { display: none; }
/* wide: the film's whole side is the click zone; the arrows join the row of controls along the bottom, just left of the
   pause button and level with it, the next step named to their left */
.has-film.is-wide .pv-adv { display: block; position: absolute; z-index: 4; left: 0; right: 0; top: 0; bottom: 120px; cursor: pointer; }
.has-film.is-wide .pv-adv-c { display: flex; align-items: center; gap: 10px; position: absolute; z-index: 5; right: 70px; bottom: 18px; }
.pv-adv-b { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(241, 239, 231, 0.24); background: rgba(10, 10, 9, 0.6); color: var(--bone); cursor: pointer; transition: border-color 250ms var(--ease), background-color 250ms var(--ease), transform 250ms var(--ease), opacity 250ms var(--ease); }
.pv-adv-b svg { width: 16px; height: 16px; }
.pv-adv-b:hover { border-color: rgba(241, 239, 231, 0.6); background: rgba(24, 23, 21, 0.9); }
.pv-adv-b:active { transform: scale(0.94); }
.pv-adv-b:disabled { opacity: 0.28; cursor: default; }
.pv-adv-b:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.pv-adv-l { margin-right: 6px; white-space: nowrap; font-size: 13px; color: var(--bone); }
.pv-adv-l em { font-style: normal; color: var(--grey-2); }
/* the pointer over the stage: the arrow on its side answers, to show what a click will do */
.pv-adv-c.is-l .pv-adv-prev:not(:disabled), .pv-adv-c.is-r .pv-adv-next { border-color: rgba(241, 239, 231, 0.7); background: rgba(30, 29, 26, 0.95); transform: scale(1.08); }
/* a jump that cannot be a slide (round from the final report to the baseline, or a tab far away) is a short fade, not a cut */
.pv-c .pv-film .pv-world { transition: opacity 320ms ease; }
.pv-c .pv-film.is-cut .pv-world { opacity: 0; transition: opacity 240ms ease; }
/* the card: the arrows are the two buttons of its bar, with the step's name between them (private.js) */
.pv-adv-n { flex: 1; text-align: center; font-size: 15px; font-weight: 500; color: var(--bone); }

/* ---------- no live blur on these pages (user, 8 Oct 2026: a lag from "Built for" to the questions) ----------
   A backdrop blur re-blurs whatever lies behind it on every frame that it moves over the page: the header and its
   button move over the whole page as it scrolls, and every question card and its plus sign carried one too. Measured
   from "Built for" to the questions on a desktop: 26 frames a second with the blurs, 56 without. The buttons, the
   header and the question cards are therefore painted instead: the same
   colours, made a little more solid, which on a black page looks the same (behind the blur there was only black).
   The open menu keeps its blur: nothing scrolls under it. */
.pv .pill, .pv .faq .fq, .pv .faq .pm, .pv .dialog-close { -webkit-backdrop-filter: none; backdrop-filter: none; }      /* the questions had one on every card and on every plus sign: eighteen live blurs on the way in */
.pv .pill--light { background-color: rgba(241, 239, 231, 0.94); }
.pv .faq .fq[open] .fq-a > p { animation-fill-mode: backwards; }                     /* an opened answer's words keep no filter once they are in */
.pv .pill--light:hover { background-color: #fff; }
.pv .pv-nav.is-solid:not(.menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.92); }
.pv .pv-nav.nav-float:not(.menu-open) .in { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.96); }

/* Smoothness (8 Oct): the glass cards over the scanner (and the list cards on the orbit page) lose their live blur on
   every screen, as the slow-device fallback already did: the blur re-drew everything behind them on every frame while
   the scanner moved underneath. They keep the tint they had there (fg-lite). */
.pv-lv li, .fg-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(155deg, rgba(40, 38, 33, 0.92), rgba(19, 19, 17, 0.92) 62%); }
.pv .pv-nav.is-solid, .pv .pv-nav.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pv .pv-nav.menu-open { background: rgba(0, 0, 0, 0.94); }

/* ======================================================================
   Jonathan's page document (8 Oct 2026): the line under the hero's lede, the new section "You probably recognise
   some of this", the list in "By week six", the founder and the way the engagement runs in the proof section,
   and the Apply button. In the page's own type and colours; nothing here moves except the usual reveal.
   ====================================================================== */
.pv-hero .lede.pv-for { margin-top: 14px; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5; font-weight: 400; color: var(--grey-2); max-width: 34em; }
.pvb-r .lede.pv-for { margin-top: 12px; }
@media (max-width: 760px) { .pv-hero .lede.pv-for { margin-top: 12px; font-size: 15px; } }

.pv-pain .sec-head { margin-bottom: clamp(34px, 4vw, 56px); }
.pv-pain-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1060px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.pv-pain-list li { padding: 22px 0 24px; border-top: 1px solid var(--line-dark); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--bone); text-wrap: pretty; }
.pv-pain-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
.pv-pain-why { max-width: 760px; margin: clamp(40px, 4.6vw, 64px) auto 0; text-align: center; display: grid; gap: 18px; }
.pv-pain-why .lede { max-width: none; margin-inline: auto; font-size: clamp(17px, 1.5vw, 20px); text-wrap: pretty; }
@media (max-width: 760px) {
  .pv-pain-list { grid-template-columns: minmax(0, 1fr); }
  .pv-pain-list li { padding: 18px 0 19px; font-size: 17px; }
  .pv-pain-list li:nth-last-child(2) { border-bottom: 0; }
  .pv-pain-why { text-align: left; }
}

.pv-can { list-style: none; margin: 4px auto 10px; padding: 0; width: 100%; max-width: 760px; display: grid; gap: 14px; text-align: left; }
.pv-can li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.45; color: var(--bone); }
.pv-can svg { width: 20px; height: 20px; margin-top: 0.18em; fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.pv-reach-run { max-width: 1000px; margin: clamp(40px, 4.6vw, 64px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); text-align: left; }
.pv-reach-run > div { padding-top: 22px; border-top: 1px solid var(--line-dark); display: grid; gap: 12px; align-content: start; }
.pv-reach-run .body { max-width: none; font-size: 16px; color: var(--grey-light); text-wrap: pretty; }
.pv-reach-run .body b { color: var(--bone); font-weight: 600; }
@media (max-width: 760px) { .pv-reach-run { grid-template-columns: minmax(0, 1fr); margin-top: 36px; } .pv-reach-run .body { font-size: 15.5px; } }

.pv-end .more.pv-apply { font: inherit; font-size: 17px; }

/* ---------- "You probably recognise some of this" as a film (user request, 8 Oct 2026) ----------
   One stage plays the eight situations in turn; the line for each stands beside it (under it on phones). The eight lines
   stay in the page as a list for readers and for reduced motion, where no film is built. */
.has-rec .sec-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.pv-rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 1180px; margin-inline: auto; }
.pv-rec-plate { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--line-dark); border-radius: 24px; background: var(--ink-2); overflow: hidden; touch-action: pan-y; }
.pv-rec-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-rec-zone { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pv-rec-half { position: relative; background: none; border: 0; padding: 0; cursor: pointer; color: var(--bone); -webkit-tap-highlight-color: transparent; }
.pv-rec-half span { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(241, 239, 231, 0.24); background: rgba(10, 10, 9, 0.6); opacity: 0; transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.pv-rec-half.is-l span { left: 14px; } .pv-rec-half.is-r span { right: 14px; }
.pv-rec-half svg { width: 16px; height: 16px; }
@media (hover: hover) { .pv-rec-half:hover span { opacity: 1; } .pv-rec-half:active span { transform: scale(0.94); } }
.pv-rec-half:focus-visible span { opacity: 1; outline: 2px solid var(--sand); outline-offset: 3px; }
.pv-rec-play { position: absolute; z-index: 5; right: 14px; top: 14px; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(241, 239, 231, 0.2); background: rgba(0, 0, 0, 0.5); color: var(--grey-light); cursor: pointer; transition: color 250ms var(--ease), border-color 250ms var(--ease); }
.pv-rec-play:hover { color: var(--bone); border-color: rgba(241, 239, 231, 0.5); }
.pv-rec-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-rec-play .i-play { fill: currentColor; stroke-width: 1; }
.pv-rec-play[aria-pressed="true"] .i-play, .pv-rec-play[aria-pressed="false"] .i-pause { display: none; }
.pv-rec-side { display: grid; align-content: center; gap: 14px; }
.pv-rec-n { margin: 0; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; color: var(--grey-2); }
.pv-rec-n b { color: var(--bone); font-weight: 500; }
.pv-rec-line { margin: 0; max-width: none; min-height: 3.9em; color: var(--bone); text-wrap: pretty; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.pv-rec-line.is-out { opacity: 0; transform: translateY(6px); transition-duration: 180ms; }
.pv-rec-dots { display: flex; align-items: center; gap: 8px; }
.pv-rec-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(241, 239, 231, 0.22); cursor: pointer; transition: width 300ms ease, background-color 300ms ease; }
.pv-rec-dots button.on { width: 28px; background: var(--sand); }
.pv-rec-dots button:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.has-rec .pv-pain-why { margin-top: clamp(44px, 5vw, 72px); }
@media (min-width: 900px) {
  /* wide screens: the film as a wide picture, its line under it like a subtitle */
  .pv-rec { max-width: 1060px; gap: 26px; }
  .pv-rec-plate { aspect-ratio: 16 / 9; border-radius: 28px; }
  .pv-rec-side { justify-items: center; text-align: center; gap: 12px; }
  .pv-rec-line { max-width: 30em; min-height: 2.8em; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.36; }
}
@media (max-width: 899px) {
  .pv-rec-side { text-align: left; }
  .pv-rec-line { font-size: 19px; min-height: 4.2em; }
  .pv-rec-half span { opacity: 1; width: 32px; height: 32px; margin-top: -16px; }
  .pv-rec-half.is-l span { left: 10px; } .pv-rec-half.is-r span { right: 10px; }
}

/* ======================================================================
   Sections 2 and 3 made compact (user, 8 Oct 2026: "too big", "too much copy", "disorganized"). The headings stay.
   Section 2: the closer is the film's ninth frame, a typeset card over the quiet room, with its last paragraph as the
   subtitle; without the film it stands under the list as a lead, four points and a close. Section 3: seven tiles.
   ====================================================================== */
.pv-pain, .pv-statement { padding-block: clamp(72px, 8vw, 112px); }
.pv-pain .sec-head, .has-rec .sec-head { margin-bottom: clamp(26px, 3vw, 40px); }
.pv-pain-why { max-width: 1000px; gap: 0; }
.pv-why-lead { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; color: var(--bone); }
.pv-why { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; text-align: left; }
.pv-why li { position: relative; padding: 16px 0 16px 18px; border-top: 1px solid var(--line-dark); font-size: 16px; line-height: 1.5; color: var(--grey-light); text-wrap: pretty; }
.pv-why li::before { content: ""; position: absolute; left: 1px; top: calc(16px + 0.62em); width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }
.pv-why-close { margin: 24px auto 0; }
@media (max-width: 760px) { .pv-why { grid-template-columns: minmax(0, 1fr); } }

.pv-rec-card { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; padding: clamp(16px, 4.4vw, 60px); text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.pv-rec-card.on { opacity: 1; transform: none; transition: opacity 700ms var(--ease) 260ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms; }
.pv-rec-card .pv-why-lead { font-size: clamp(17px, 2.7vw, 34px); }
.pv-rec-card .pv-why { width: 100%; max-width: 840px; margin-top: clamp(10px, 2.4vw, 32px); column-gap: clamp(14px, 3vw, 44px); }
.pv-rec-card .pv-why li { padding: clamp(7px, 1.3vw, 16px) 0 clamp(7px, 1.3vw, 16px) clamp(12px, 1.4vw, 18px); font-size: clamp(11.5px, 1.4vw, 17px); line-height: 1.45; color: var(--bone); }
.pv-rec-card .pv-why li::before { top: calc(clamp(7px, 1.3vw, 16px) + 0.6em); }
@media (max-width: 760px) { .pv-rec-card .pv-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-rec-zone, .pv-rec-play { z-index: 3; }
.pv-rec-play { z-index: 5; }
@media (min-width: 900px) { .pv-rec-line { min-height: 4.1em; } }
@media (max-width: 899px) { .pv-rec-line { font-size: 18px; min-height: 6.9em; } }

.pv-statement .pv-after { max-width: 1120px; gap: 22px; }
.pv-can { max-width: 1120px; margin: 6px auto 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pv-can li { flex: 0 1 calc((100% - 42px) / 4); display: block; box-sizing: border-box; padding: 20px 20px 22px; border: 1px solid var(--line-dark); border-radius: 18px;
  background: linear-gradient(160deg, rgba(241, 239, 231, 0.055), rgba(241, 239, 231, 0.012)); text-align: left; }
.pv-can li svg { display: block; width: 20px; height: 20px; margin: 0 0 12px; }
.pv-can li b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--bone); }
.pv-can li span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--grey-light); text-wrap: pretty; }
.pv-can-note { max-width: 44em !important; font-size: clamp(16px, 1.4vw, 18px) !important; }
@media (max-width: 1000px) { .pv-can li { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 640px) {
  .pv-can { gap: 10px; }
  .pv-can li { flex-basis: calc((100% - 10px) / 2); padding: 14px 14px 16px; border-radius: 14px; }
  .pv-can li svg { width: 18px; height: 18px; margin-bottom: 8px; }
  .pv-can li b { font-size: 15.5px; }
  .pv-can li span { margin-top: 6px; font-size: 13px; line-height: 1.45; }
}
/* phones: the closer's card fits the small picture (smaller type, the pause button steps aside while it shows) */
@media (max-width: 760px) {
  .pv-rec-card { padding: 12px 14px; }
  .pv-rec-card .pv-why-lead { font-size: 15px; }
  .pv-rec-card .pv-why { margin-top: 6px; column-gap: 12px; }
  .pv-rec-card .pv-why li { padding: 5px 0 5px 10px; font-size: 11px; line-height: 1.38; }
  .pv-rec-card .pv-why li::before { top: calc(5px + 0.55em); width: 4px; height: 4px; }
  .pv-rec-plate.is-card .pv-rec-play, .pv-rec-plate.is-card .pv-rec-half span { opacity: 0; pointer-events: none; }
}
/* phones: the seven outcomes as a row of cards to swipe through, the next one peeking in */
@media (max-width: 640px) {
  .pv-statement .pv-after { margin-inline: -22px; }
  .pv-statement .pv-can { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 22px; padding: 2px 22px 10px; gap: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pv-can::-webkit-scrollbar { display: none; }
  .pv-can li { flex: 0 0 72%; scroll-snap-align: start; }
  .pv-can li span { font-size: 13.5px; }
  .pv-can-note { padding-inline: 22px; }
}
@media (min-width: 900px) { .pv-rec { max-width: 960px; gap: 22px; } }

/* ---------- By week six as the reassessment sheet (user's choice, 8 Oct 2026) ----------
   One row an outcome: a check, its label, Jonathan's line. When the sheet comes into view the checks land one after
   another, each row lit by a pass of light, and a stamp settles at the foot. Only colour, opacity, transform and a
   tiny stroke move. Without script, or with reduced motion, the sheet is simply complete. */
.pv-sheet { width: 100%; max-width: 920px; margin: 4px auto 0; text-align: left; border: 1px solid var(--line-dark); border-radius: 22px; overflow: hidden;
  background: linear-gradient(170deg, #171614, #0d0d0c 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px rgba(0, 0, 0, 0.45); }
.pv-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 26px; border-bottom: 1px solid var(--line-dark); }
.pv-sheet-head span { font-size: 14px; font-weight: 600; color: var(--bone); letter-spacing: 0.005em; }
.pv-sheet-head i { width: 46px; height: 6px; background: radial-gradient(circle, rgba(241, 239, 231, 0.22) 2.4px, transparent 3px) 0 0 / 14px 6px repeat-x; }
.pv-sheet-rows { list-style: none; margin: 0; padding: 0; }
.pv-sheet-rows li { position: relative; display: grid; grid-template-columns: 22px 178px minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 14px 26px; border-top: 1px solid rgba(241, 239, 231, 0.07); overflow: hidden; }
.pv-sheet-rows li:first-child { border-top: 0; }
.pv-sheet-rows b { font-family: var(--display); font-weight: 600; font-size: 16.5px; line-height: 1.3; color: var(--bone); transition: color 500ms var(--ease); }
.pv-sheet-t { font-size: 15px; line-height: 1.5; color: var(--grey-light); text-wrap: pretty; }
.pv-sheet-ck { align-self: start; margin-top: 1px; }
.pv-sheet-ck svg { display: block; width: 20px; height: 20px; overflow: visible; }
.pv-sheet-ck circle { fill: rgba(184, 163, 126, 0.14); stroke: rgba(184, 163, 126, 0.7); stroke-width: 1.2; transition: fill 400ms var(--ease), stroke 400ms var(--ease); }
.pv-sheet-ck path { fill: none; stroke: #E2CEA6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms cubic-bezier(0.65, 0, 0.35, 1); }
.pv-sheet-rows li::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(184, 163, 126, 0), rgba(184, 163, 126, 0.12) 40%, rgba(184, 163, 126, 0) 80%); opacity: 0; transform: translateX(-60%); }
.pv-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 26px 18px; border-top: 1px solid var(--line-dark); background: rgba(241, 239, 231, 0.02); }
.pv-sheet-foot p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--grey-2); }
.pv-stamp { flex: none; display: inline-flex; align-items: center; padding: 7px 14px; border: 1.5px solid rgba(184, 163, 126, 0.75); border-radius: 999px; color: #E2CEA6;
  font: 600 11.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-4deg); }
/* armed: waiting to be filled in */
.pv-sheet.is-armed .pv-sheet-rows b { color: var(--grey-2); }
.pv-sheet.is-armed .pv-sheet-ck circle { fill: rgba(241, 239, 231, 0); stroke: rgba(241, 239, 231, 0.2); }
.pv-sheet.is-armed .pv-sheet-ck path { stroke-dashoffset: 1; }
.pv-sheet.is-armed .pv-stamp { opacity: 0; transform: rotate(-4deg) scale(1.45); }
/* run: one row after another */
.pv-sheet.is-run .pv-sheet-rows b { color: var(--bone); transition-delay: calc(var(--i) * 260ms + 250ms); }
.pv-sheet.is-run .pv-sheet-ck circle { fill: rgba(184, 163, 126, 0.14); stroke: rgba(184, 163, 126, 0.7); transition-delay: calc(var(--i) * 260ms + 200ms); }
.pv-sheet.is-run .pv-sheet-ck path { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 260ms + 250ms); }
.pv-sheet.is-run .pv-sheet-rows li::before { animation: pvSheetPass 1100ms var(--ease) both; animation-delay: calc(var(--i) * 260ms + 150ms); }
.pv-sheet.is-run .pv-stamp { opacity: 1; transform: rotate(-4deg) scale(1); transition: opacity 260ms ease 2250ms, transform 420ms cubic-bezier(0.2, 1.5, 0.4, 1) 2250ms; }
@keyframes pvSheetPass { 0% { opacity: 0; transform: translateX(-60%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
.pv-statement .pv-can-note { margin-top: 6px; }
@media (max-width: 640px) {
  .pv-sheet { border-radius: 18px; }
  .pv-sheet-head, .pv-sheet-foot { padding-inline: 16px; }
  .pv-sheet-rows li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 13px 16px; }
  .pv-sheet-rows b { font-size: 15.5px; }
  .pv-sheet-t { grid-column: 2; font-size: 14px; line-height: 1.45; }
  .pv-sheet-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pv-sheet-foot p { font-size: 13px; }
}

/* phones: the sheet folds. Each row shows its check and label; a tap opens its line (one at a time, the first open), so
   the sheet stays about a screen tall */
@media (max-width: 640px) {
  .pv-sheet.is-fold .pv-sheet-rows li { cursor: pointer; padding-right: 40px; -webkit-tap-highlight-color: transparent; }
  .pv-sheet.is-fold .pv-sheet-rows li::after { content: ""; position: absolute; right: 18px; top: 19px; width: 8px; height: 8px; border-right: 1.5px solid var(--grey-2); border-bottom: 1.5px solid var(--grey-2); transform: rotate(45deg); transition: transform 300ms var(--ease); }
  .pv-sheet.is-fold .pv-sheet-rows li.open::after { transform: translateY(3px) rotate(-135deg); }
  .pv-sheet.is-fold .pv-sheet-t { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 340ms var(--ease), opacity 220ms ease; }
  .pv-sheet.is-fold .pv-sheet-rows li.open .pv-sheet-t { max-height: 120px; opacity: 1; transition: max-height 380ms var(--ease), opacity 300ms ease 80ms; }
  .pv-sheet.is-fold .pv-sheet-rows li:focus-visible { outline: 2px solid var(--sand); outline-offset: -2px; }
  .pv-sheet.is-fold .pv-sheet-rows li { padding-block: 12px; row-gap: 0; }
  .pv-sheet.is-fold .pv-sheet-rows li.open { row-gap: 5px; }
}

/* ---------- less dead space in sections 2 and 3 (user, 8 Oct 2026: "reduce the dead space to a minimum, no need to keep
   it wide unless its absolutely necessary") ---------- */
.pv-pain, .pv-statement { padding-block: clamp(56px, 6vw, 84px); }
.pv-pain .sec-head, .has-rec .sec-head { margin-bottom: clamp(18px, 2.2vw, 28px); }
.pv-statement .pv-after { margin-top: clamp(20px, 2.4vw, 30px); gap: 16px; }
@media (min-width: 900px) { .pv-rec { gap: 16px; } .pv-rec-side { gap: 10px; } .pv-rec-line { min-height: 2.75em; } }
@media (max-width: 899px) { .pv-rec { gap: 16px; } .pv-rec-side { gap: 10px; } .pv-rec-line { min-height: 4.2em; } }
/* the sheet: only as wide as its lines need, with no gap between label and line that is not doing work */
.pv-sheet { max-width: 780px; }
.pv-sheet-head { padding: 12px 22px; }
.pv-sheet-rows li { grid-template-columns: 20px 136px minmax(0, 1fr); column-gap: 14px; padding: 11px 22px; }
.pv-sheet-rows b { font-size: 15.5px; }
.pv-sheet-t { font-size: 14.5px; line-height: 1.45; }
.pv-sheet-foot { padding: 12px 22px 13px; }
.pv-statement .pv-can-note { margin-top: 0; max-width: 36em !important; }
@media (max-width: 640px) {
  .pv-sheet-head, .pv-sheet-foot { padding-inline: 16px; }
  .pv-sheet-rows li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 11px 16px; }
  .pv-sheet.is-fold .pv-sheet-rows li { padding-block: 10px; padding-right: 40px; }
  .pv-sheet.is-fold .pv-sheet-rows li::after { top: 16px; }
}
@media (min-width: 641px) { .pv-sheet-rows li { grid-template-columns: 20px 142px minmax(0, 1fr); } .pv-sheet-rows b { font-size: 15px; } }   /* one label column for every row, so the lines start in line */

/* ---------- no dead gap after "What you leave with" (user, 8 Oct 2026, screenshot of the black gap before the proof) ----------
   The wheel no longer fades in place (wheel.js); the proof section is drawn up under the empty lower part of the wheel's
   held screen (below the last card), and the space either side of that boundary is trimmed on every version. */
.is-wheel .pv-ww { margin-bottom: -24vh; }
.pv-leave--ww + .pv-reach { position: relative; z-index: 1; }
.pv-reach { padding-top: clamp(64px, 7vw, 100px); }
.pv-leave:not(.pv-leave--ww) { padding-bottom: clamp(48px, 5vw, 80px); }

/* ---------- Jonathan, on his own (user, 8 Oct 2026: his paragraph "separate", with his photo cut out) ----------
   The cutout stands on the page's black; its lower edge melts away so the jacket has no hard cut. */
.pv-founder { padding-block: clamp(56px, 6vw, 88px); }
/* (8 Oct 2026, user) the photo is as tall as the words: the words set the row's height, and the picture is fitted
   into a box of that height beside them (it never sets the height itself), its foot and sides melting away */
.pv-founder-in { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 500px); justify-content: center; align-items: stretch; gap: clamp(28px, 4vw, 56px); max-width: 1020px; }
.pv-founder-pic { position: relative; margin: 0; min-height: 0; }
.pv-founder-pic picture { position: absolute; inset: 0; display: block; }
.pv-founder-pic img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 58%, transparent 97%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
.pv-founder-words { display: grid; gap: 18px; align-content: center; }
.pv-founder-words .body { max-width: none; font-size: 20px; line-height: 1.65; color: var(--grey-light); text-wrap: pretty; }
.pv-founder-words .body + .body { color: var(--bone); }
@media (max-width: 1100px) { .pv-founder-in { grid-template-columns: minmax(0, 330px) minmax(0, 440px); } .pv-founder-words .body { font-size: 18px; } }
@media (max-width: 760px) {
  .pv-founder { padding-block: 40px 56px; }
  .pv-founder-in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pv-founder-pic { width: min(72vw, 300px); justify-self: center; }
  .pv-founder-pic picture { position: static; }
  .pv-founder-pic img { height: auto; }
  .pv-founder-words .body { font-size: 15.5px; max-width: none; }
}

/* ---------- the closing sun turns (user, 8 Oct 2026: "make it such that its revolving"; sun-globe.js) ----------
   The canvas covers the ball's face from its top down to the foot of the picture, the picture's full width;
   it comes in over the still picture once its first frame is drawn. The lamp-like flicker now plays on the
   whole sun, so the picture and the canvas catch together (the page behind is black, so it looks the same). */
.pv-end-globe { position: absolute; left: 0; top: calc(var(--D) * var(--pm)); width: 100%; height: calc(var(--D) * (var(--ph) - var(--pm))); display: block; opacity: 0; transition: opacity 1200ms var(--ease); }
.pv-end-globe.is-ready { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .pv-end.is-on .pv-end-sun picture { animation: none; }
  .js .pv-end.is-on .pv-end-sun { animation: pvEndFlick 1500ms linear 1 both; }
}
@media (prefers-reduced-motion: reduce) { .pv-end-globe { display: none; } }

/* touch: the film's pause button and the situation dots answer to a finger-sized area without changing size */
@media (pointer: coarse) {
  .pv-rec-dots button { position: relative; }
  .pv-rec-play::after, .pv-rec-dots button::after { content: ""; position: absolute; inset: -4px; }
  .pv-rec-dots button::after { inset: -18px -4px; }
}