/* =============================================================================
   PRODUCERPOINT PUBLIC WEBSITE — Gate 5G (founder revision: art direction)
   -----------------------------------------------------------------------------
   Marketing-page styles only, namespaced `.pw-`. The page loads styles.css,
   design.css and producerpoint.css first: the approved tokens and the reused
   product classes (.script, .answer, .journey, .qa, .chip, .mf, .wordmark,
   .eyebrow, .rail-label) come from there, so the hero's product composition IS
   the approved system. No inline styles anywhere — CSP style-src 'self'.

   THE SIGNATURE SYSTEM — "the through-line":
   The product's core truth is a deterministic, traceable path through a call,
   and the page is built on that idea rather than on cards.
   · A hairline SPINE runs down the page connecting numbered chapters (01-09).
   · BRANCHING-PATH linework (SVG, drawn on reveal) is the recurring motif.
   · DOCUMENT/PROVENANCE motifs — ruled ledgers, dotted leaders, layered
     sheets, stamps — carry the traceability story.
   · The palette stays navy/ink/electric, gains the Gate 4 workspace's warm
     PARCHMENT tone for alternate chapters, and a sparing BRONZE accent for
     numbers, ticks and rules — never for surfaces.
   · Layouts are editorial and asymmetric: numbered ledger lists, split
     compositions, edge-to-edge bands. No three-card grids, no SaaS table.
   ============================================================================= */

/* PAGE-SCOPED TYPE TOKENS.
   This stylesheet loads only on the public page, so these overrides cannot
   reach the authenticated app.

   `--font` deliberately keeps the metric-similar system stack. When this page
   was written the licensed woff2 binaries were still an unmet deployment
   prerequisite (docs/gate5/12) and the stack was the way to render cleanly
   without them; Gate 6 has since added the real files, so the reason is gone
   but the RESULT IS NOT — this is the body typography the founder reviewed and
   approved on this page. Adopting Inter here would change how the approved page
   looks, which is a founder decision and not a tidy-up. Left as it renders. */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Space Grotesk for the brand lockup. SIL Open Font License 1.1; the licence
   text ships beside the binary as LICENSE-SpaceGrotesk.txt.

   This points at the SAME file the authenticated app uses. The landing page
   originally carried its own byte-identical copy under a public-scoped name,
   because at that time the app's own binary was not in the repository and a
   shared reference would have 404'd. Gate 6 added it, so the copy became two
   identical files that could only drift apart — one canonical binary, verified
   identical by sha256 before the duplicate was dropped. Same-origin under
   font-src 'self': no CDN, no dependency, no CSP change. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/brand/SpaceGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* The brand lockup — standing founder requirement: PRODUCERPOINT, all
   uppercase, Space Grotesk Bold, refined (not wide) tracking. The DOM keeps
   the official capitalization; the display is uppercase. One weight, one
   word, no styling tricks — presence comes from the face and the setting.
   Identical in header and footer. The demo's Call Companion mark and the
   chaos plate keep the product's own .wordmark treatment: they depict app
   surfaces, not the site brand. */
.pw-lockup {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: .042em;
  line-height: 1;
  text-transform: uppercase;
}

/* Page vocabulary. Bronze is the one warm accent and it is rationed: chapter
   numerals, ticks, frame corners, one rule — never a surface, never a fill. */
:root {
  --pw-settle: cubic-bezier(.22, .61, .36, 1);
  --pw-spring: cubic-bezier(.32, 1.28, .44, 1);
  --pw-parchment: #f7f5f0;
  --pw-parchment-2: #efece4;
  --pw-bronze: #a87b3e;        /* large text / linework on light */
  --pw-bronze-deep: #8a6332;   /* small text on light, 4.5:1+ */
  --pw-bronze-lift: #d8b184;   /* numerals / accents on dark */
  --pw-inkplate: #0d2145;      /* solid dark plate (no gradient) */
  --pw-navy-glow: 0 30px 80px -24px rgba(13, 33, 69, .55);
}

html { scroll-behavior: smooth; }

body.pw {
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  overflow-x: clip;
}
/* Type+class outranks the single-class button colors, so this rule must not
   set color — every anchor on the page carries its own. */
.pw a { text-decoration: none; }

/* Clears the floating command bar (14px inset + 62px tall) plus breathing
   room, so an anchored heading is never tucked underneath it. */
.pw [id] { scroll-margin-top: 100px; }

/* The global :focus-visible outline uses --accent (navy) — invisible on the
   dark chrome. Same override idiom the product uses inside .cm. */
.pw-header :focus-visible,
.pw-menu__panel :focus-visible,
.pw-footer :focus-visible { outline-color: #7fa3d7; }

/* ------------------------------------------------------------------ layout -- */
.pw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.pw-wrap--narrow { max-width: 860px; }

.pw-section { padding: clamp(58px, 8vw, 104px) 0; position: relative; }
.pw-section--parchment {
  background: var(--pw-parchment);
  border-top: 1px solid rgba(17, 38, 74, .08);
  border-bottom: 1px solid rgba(17, 38, 74, .08);
}

/* The approved dark surface — the command-briefing gradient, the one
   sanctioned theatrical device in the design system. */
.pw-section--dark {
  position: relative; overflow: hidden; color: #eaf0fb;
  background:
    radial-gradient(120% 110% at 8% -10%, #2b5ba8 0%, rgba(43, 91, 168, 0) 58%),
    linear-gradient(158deg, #16386b 0%, #0d2145 62%, #0a1a38 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.pw-section--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 13px);
  mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
}
.pw-section--dark > * { position: relative; z-index: 1; }
.pw-section--dark :focus-visible { outline-color: #7fa3d7; }

/* ------------------------------------------------------ the through-line ---- */
/* A continuous hairline spine on the left margin of every chapter, passing
   through the chapter numeral. Desktop-only; mobile keeps the numerals. */
@media (min-width: 1024px) {
  .pw-sp::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
    left: calc(max((100% - 1180px) / 2, 0px) + clamp(18px, 4vw, 40px) + 22px);
    background: var(--line-2);
  }
  .pw-sp--ondark::before { background: rgba(255, 255, 255, .16); }
  /* The through-line reads with you: a bronze thread advances down each
     chapter's spine as it scrolls through the viewport. Driven by a CSS
     variable from a rAF scroll handler; never runs under reduced motion,
     where the base hairline simply remains. */
  .pw-sp::after {
    content: ""; position: absolute; top: 0; height: 100%; width: 1px;
    left: calc(max((100% - 1180px) / 2, 0px) + clamp(18px, 4vw, 40px) + 22px);
    background: linear-gradient(rgba(168, 123, 62, .75), rgba(168, 123, 62, .35));
    transform: scaleY(var(--pw-spine-p, 0)); transform-origin: top;
    pointer-events: none;
  }
  .pw-sp--ondark::after { background: linear-gradient(rgba(216, 177, 132, .6), rgba(216, 177, 132, .25)); }
}

.pw-ch { position: relative; display: flex; gap: 22px; align-items: flex-start; }
/* Chapter plates: the brand face on a double-framed plate. The inner ring
   makes the plate read as machined rather than outlined; it warms when the
   chapter is the one being read (.is-here, set on scroll). */
.pw-ch__n {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  font-family: var(--font-brand);
  font-size: 17px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--pw-bronze-deep); border: 1px solid var(--pw-bronze); border-radius: 11px;
  background: var(--canvas); position: relative; z-index: 1;
  transition: border-color 320ms var(--pw-settle), box-shadow 320ms var(--pw-settle), background 320ms var(--pw-settle);
}
.pw-ch__n::after {
  content: ""; position: absolute; inset: 3px; border-radius: 7px;
  border: 1px solid rgba(168, 123, 62, .22);
  transition: border-color 320ms var(--pw-settle);
}
.pw-ch__n.is-here { border-color: var(--pw-bronze-deep); background: rgba(168, 123, 62, .06); box-shadow: 0 2px 10px -4px rgba(138, 99, 50, .35); }
.pw-ch__n.is-here::after { border-color: rgba(168, 123, 62, .45); }
.pw-section--parchment .pw-ch__n { background: var(--pw-parchment); }
.pw-section--parchment .pw-ch__n.is-here { background: rgba(168, 123, 62, .07); }
.pw-ch__n--ondark { color: var(--pw-bronze-lift); border-color: rgba(216, 177, 132, .55); background: #12305c; }
.pw-ch__n--ondark.is-here { border-color: var(--pw-bronze-lift); background: #16385f; box-shadow: 0 2px 12px -4px rgba(216, 177, 132, .3); }
.pw-ch__t { min-width: 0; }
.pw-ch .pw-eyebrow { margin-top: 3px; }
.pw-ch .pw-h2 { margin-top: 10px; }

/* ---------------------------------------------------------------- type ----- */
.pw-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--electric);
}
.pw-eyebrow--ondark { color: #8fb2e8; }

/* The display layer speaks in the brand face: chapter headlines set in
   Space Grotesk with size-specific negative tracking. Body copy stays in
   the interface stack — display is brand voice, reading is reading. */
.pw-h2 {
  font-family: var(--font-brand);
  font-size: clamp(28px, 3.4vw, 41px); font-weight: 650; letter-spacing: -.026em;
  line-height: 1.08; max-width: 22ch; text-wrap: balance;
}
.pw-h2--ondark { color: #f2f6fd; }
.pw-h3 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.pw-h3--ondark { color: #eaf0fb; }
.pw-lede {
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.65; color: var(--ink-2);
  max-width: 60ch; margin-top: 20px; letter-spacing: -.003em;
}
.pw-lede--ondark { color: #b3c8e8; }
.pw-section .pw-ch + .pw-lede { margin-left: 67px; }
.pw-note { font-size: 13px; color: var(--ink-3); margin-top: 20px; max-width: 70ch; line-height: 1.55; }

.pw-tag {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 2.5px 9px;
  background: var(--surface);
}
.pw-tag--now { color: var(--navy); border-color: rgba(18, 48, 92, .45); background: var(--wash); }
.pw-tag--ondark { color: #9fd3b4; border-color: rgba(159, 211, 180, .35); margin-left: 0; background: rgba(121, 169, 139, .12); }
.pw-tag--ondark.pw-tag--future { color: #8fb2e8; border-color: rgba(143, 178, 232, .4); background: rgba(143, 178, 232, .1); }

/* Dotted leader — the ledger motif used across the page. */
.pw-lead-dots { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--line-2); align-self: center; height: 1px; margin: 0 10px; }

/* --------------------------------------------------------------- buttons --- */
.pw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 11px;
  font-size: 14.5px; font-weight: 640; letter-spacing: -.005em; cursor: pointer;
  transition: transform 200ms var(--pw-settle), background 200ms var(--pw-settle), box-shadow 200ms var(--pw-settle);
}
.pw-btn:active { transform: scale(.975); transition-duration: 70ms; }
.pw-btn--sm { min-height: 44px; padding: 0 17px; font-size: 13.5px; border-radius: 10px; }
.pw-btn--primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(11,26,51,.2), 0 8px 20px -10px rgba(18,48,92,.55); }
.pw-btn--primary:hover { background: var(--navy-2); transform: translateY(-1px); }
.pw-btn--onnavy {
  background: #fff; color: #0d2145;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -10px rgba(0,0,0,.55);
}
.pw-btn--onnavy:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -12px rgba(0,0,0,.6); }
.pw-btn--onnavy[disabled] { opacity: .55; pointer-events: none; box-shadow: none; }
.pw-btn--ghostnavy { background: rgba(255,255,255,.09); color: #eaf0fb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.12); }
.pw-btn--ghostnavy:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }

/* ---------------------------------------------------------------- header ---- */
/* THE COMMAND BAR.
   Not an edge-to-edge corporate strip. The <header> is a transparent sticky
   rail; the visible object is `.pw-header__in`, an inset navy card that aligns
   with the page's own 1180px content geometry and floats over it. The page
   scrolls past its left and right edges, which is what makes it read as part
   of the product rather than as site chrome.

   Modest radius (13px, not a pill), one hairline border, a light top edge so
   the surface reads as a physical plate, and a blur that exists to keep the
   text legible over the hero gradient rather than for decoration. */
/* FIXED, not sticky, and deliberately so: the bar is out of the document
   flow, so it floats over the hero (no light strip above it at scroll 0) and
   its compressed state cannot cause layout shift — nothing below it moves
   when its height changes. The hero adds matching top padding, so the
   approved hero composition sits exactly where it did. */
.pw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding: 14px 0 0;
  transition: padding 260ms var(--pw-settle);
}
.pw-header.is-scrolled { padding-top: 8px; }
.pw-header__in {
  max-width: 1180px; margin: 0 auto;
  padding: 0 12px 0 16px;
  height: 62px; display: flex; align-items: center; gap: 22px;
  border-radius: 13px;
  background: rgba(11, 27, 58, .72);
  -webkit-backdrop-filter: blur(20px) saturate(165%); backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 0 0 1px rgba(147, 178, 226, .16),
    0 10px 30px -18px rgba(4, 12, 28, .8);
  transition: height 260ms var(--pw-settle), background 260ms var(--pw-settle), box-shadow 260ms var(--pw-settle);
}
/* Scrolled: tighter, denser, a touch more present against moving content. */
.pw-header.is-scrolled .pw-header__in {
  height: 54px;
  background: rgba(9, 22, 48, .88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 0 1px rgba(147, 178, 226, .22),
    0 16px 40px -20px rgba(4, 12, 28, .95);
}
/* The bar sits inside the wrap's own gutters at wide widths so its edges line
   up with the content column rather than the viewport. */
@media (min-width: 1260px) {
  .pw-header__in { max-width: 1156px; }
}
.pw-header__brand { display: inline-flex; align-items: center; gap: 10px; color: #f2f6fd; }
.pw-header__mark { width: 24px; height: 24px; flex: none; display: grid; }
.pw-header__mark img, .pw-header__mark svg { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
/* Uppercase centers on cap height, so no baseline nudge is needed against
   the 24px tile. */
.pw-header__name { font-size: 14.5px; color: #f2f6fd; }
/* A fine rule separating identity from navigation — the editorial seam. */
.pw-header__brand::after {
  content: ""; width: 1px; height: 20px; margin-left: 20px;
  background: rgba(147, 178, 226, .26);
}

.pw-nav { display: flex; gap: 1px; margin-left: -6px; }
.pw-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 13.5px; font-weight: 560; color: #b3c8e8; border-radius: 8px;
  transition: color 180ms var(--pw-settle), background 180ms var(--pw-settle);
}
.pw-nav__link:hover { color: #f2f6fd; background: rgba(255,255,255,.06); }
.pw-nav__link.is-active { color: #f2f6fd; }
/* Active section: a small bronze editorial marker above the label, not a
   heavy underline. Understated enough to scan past, precise enough to trust. */
.pw-nav__link::after {
  content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--pw-bronze-lift);
  opacity: 0; transform: scale(.4);
  transition: opacity 220ms var(--pw-settle), transform 260ms var(--pw-spring);
}
.pw-nav__link:hover::after { opacity: .4; transform: none; }
.pw-nav__link.is-active::after { opacity: 1; transform: none; }

.pw-header__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pw-signin {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 13.5px; font-weight: 560; color: #b3c8e8; border-radius: 8px;
  transition: color 180ms var(--pw-settle), background 180ms var(--pw-settle);
}
.pw-signin:hover { color: #f2f6fd; background: rgba(255,255,255,.06); }

/* Mobile menu — a <details>, so it works without JavaScript. */
.pw-menu { display: none; position: relative; margin-left: auto; }
.pw-menu__btn {
  list-style: none; cursor: pointer; display: grid; place-content: center; gap: 4px;
  width: 44px; height: 44px; border-radius: 11px; border: 1px solid rgba(255,255,255,.18);
  transition: background 180ms var(--pw-settle);
}
.pw-menu__btn:active { background: rgba(255,255,255,.08); }
.pw-menu__btn::-webkit-details-marker { display: none; }
.pw-menu__bar { width: 16px; height: 2px; border-radius: 2px; background: #eaf0fb; transition: transform 240ms var(--pw-spring), opacity 160ms var(--pw-settle); }
.pw-menu[open] .pw-menu__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pw-menu[open] .pw-menu__bar:nth-child(2) { opacity: 0; }
.pw-menu[open] .pw-menu__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pw-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px;
  background: rgba(13, 33, 69, .94);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 56px -16px rgba(0,0,0,.65);
  padding: 8px; display: flex; flex-direction: column;
  transform-origin: top right;
  animation: pw-menu-in 220ms var(--pw-spring);
}
@keyframes pw-menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
.pw-menu__link {
  display: flex; align-items: center; min-height: 46px; padding: 0 14px;
  font-size: 14.5px; font-weight: 560; color: #dbe6f8; border-radius: 9px;
}
.pw-menu__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.pw-menu__link--cta { background: #fff; color: #0d2145; font-weight: 640; margin-top: 6px; justify-content: center; }
.pw-menu__link--cta:hover { background: #eef2fa; color: #0d2145; }

/* ------------------------------------------------------------------ hero ---- */
/* One cinematic frame: architectural grid, asymmetric copy, and the product
   frame breaking the hero's lower boundary into chapter 01. */
.pw-hero {
  position: relative; color: #eaf0fb; z-index: 2;
  background:
    radial-gradient(120% 110% at 8% -10%, #2b5ba8 0%, rgba(43, 91, 168, 0) 58%),
    linear-gradient(158deg, #16386b 0%, #0d2145 62%, #0a1a38 100%);
  /* + 76px clears the fixed command bar (14px inset + 62px tall), so the hero
     content lands exactly where it did before the bar left the flow. */
  padding: calc(clamp(38px, 4.6vw, 54px) + 76px) 0 0;
}
.pw-hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 148px),
    linear-gradient(rgba(255,255,255,.07) 0 1px, transparent 1px 100%);
  background-size: auto, 100% 1px;
  background-repeat: repeat, no-repeat;
  mask-image: linear-gradient(#000 65%, transparent);
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
}
.pw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 13px);
  mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(90% 80% at 85% 110%, #000 0%, transparent 72%);
}
.pw-hero > * { position: relative; z-index: 1; }
.pw-hero :focus-visible { outline-color: #7fa3d7; }

.pw-hero__wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8.4fr);
  gap: clamp(20px, 2.4vw, 32px); align-items: center;
}

.pw-tick { width: 26px; height: 2px; background: var(--pw-bronze-lift); flex: none; }
.pw-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #b3c8e8;
}
.pw-hero__h {
  font-family: var(--font-brand);
  font-size: clamp(36px, 4.6vw, 57px); font-weight: 650; letter-spacing: -.03em;
  line-height: 1.04; margin-top: 18px; color: #f6f9ff; text-wrap: balance;
}
.pw-hero__sub { font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.62; color: #b3c8e8; margin-top: 18px; max-width: 44ch; }
.pw-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pw-hero__avail { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 12.5px; color: #b3c8e8; letter-spacing: .01em; }
.pw-dot { width: 7px; height: 7px; border-radius: 50%; background: #79a98b; flex: none; box-shadow: 0 0 0 3px rgba(121, 169, 139, .18); }
.pw-hero__meta {
  display: flex; align-items: center; gap: 14px; margin-top: 34px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; color: #b3c8e8;
}
.pw-hero__metasep { width: 22px; height: 1px; background: rgba(216, 177, 132, .5); }

/* Staged hero entrance; the frame arrives last with a touch of spring.
   The hidden initial state exists only when JavaScript is present (.pw-js),
   so a no-JS visit renders the hero fully and immediately. */
.pw-js .pw-hi { opacity: 0; transform: translateY(14px); }
.pw-js .pw-hi.is-live { opacity: 1; transform: none; transition: opacity 600ms var(--pw-settle), transform 600ms var(--pw-settle); }
.pw-js .pw-hi--frame { opacity: 0; transform: translateY(22px) scale(.985); }
.pw-js .pw-hi--frame.is-live { opacity: 1; transform: none; transition: opacity 700ms var(--pw-settle), transform 700ms var(--pw-spring); }

/* ------------------------------------------------- hero demo composition ---- */
/* The frame runs wider than the text column by bleeding toward the right
   edge — a deliberate crop that gives the product room without narrowing
   the headline. Never comes closer than 16px to the viewport edge, and
   collapses to 0 below the wrap's max width. */
.pw-demo {
  min-width: 0; position: relative; margin-bottom: -84px;
  margin-right: calc(-1 * max(0px, min(96px, (100vw - 1180px) / 2 - 16px)));
}
.pw-demo__tag { font-size: 11.5px; color: #b3c8e8; margin-bottom: 12px; letter-spacing: .01em; }

/* Layered tonal planes + viewfinder corners: the frame reads as a captured,
   annotated object — architectural, not a floating card. */
.pw-frame { position: relative; transform: translateY(var(--pw-frame-y, 0px)); }
.pw-frame::before {
  content: ""; position: absolute; inset: 18px -14px -14px 18px; border-radius: var(--r-lg);
  background: rgba(13, 33, 69, .55); box-shadow: inset 0 0 0 1px rgba(141, 155, 181, .25);
}
.pw-frame__corner { position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none; }
.pw-frame__corner--tl { top: -9px; left: -9px; border-top: 2px solid var(--pw-bronze-lift); border-left: 2px solid var(--pw-bronze-lift); }
.pw-frame__corner--br { bottom: -9px; right: -9px; border-bottom: 2px solid var(--pw-bronze-lift); border-right: 2px solid var(--pw-bronze-lift); }

/* The Call Companion frame, rebuilt at card scale from the same --cm-* tokens
   the product uses; the interior is the approved CSS itself. The call shell is
   always soft-dark in the product and stays so here. */
.pw-cm {
  position: relative;
  background: var(--cm-bg); color: var(--cm-text);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 4px rgba(4, 10, 22, .4),
    0 36px 90px -22px rgba(4, 10, 22, .8),
    var(--pw-navy-glow);
}
.pw-cm :focus-visible { outline-color: var(--cm-accent); }

/* CONTRAST, page-scoped: this composition renders the call-mode chrome at
   card scale (9.5-12px), below any large-text exemption, so the faint-tier
   tokens are raised here to clear 4.5:1 on the rail surfaces. The product's
   shared tokens are untouched — these classes exist only on this page. */
.pw-cm .rail-label { color: #9aa3ae; font-size: 9.5px; padding: 0 12px 9px; }
.pw-cm__progress, .pw-cm .journey__sub, .pw-cm .qa__key { color: #9aa3ae; }
.pw-journey .journey__item.is-upcoming { color: #99a1ac; }
.pw-journey .journey__item.is-done { color: #a4abb5; }
/* A stage the chosen path bypassed: present, honest, visibly not visited. */
.pw-journey .journey__item.is-skipped { color: #8f97a2; }
.pw-journey .is-skipped .journey__mark { border: 1.5px dashed #4a505a; color: #9aa3ae; font-size: 9px; }
.pw-cm__scriptlabel { color: #9aa3ae; }
.pw-cm__lead { color: #8db0e2; }
.pw-cm .qa__pinnedmeta { color: #9aa3ae; }
.pw-cm .cm__privacy { min-height: 44px; color: #9aa3ae; }
.pw-cm .cm__privacy[aria-pressed="true"] { color: #8db0e2; }

.pw-cm__top {
  min-height: 50px; background: var(--cm-rail); border-bottom: 1px solid var(--cm-line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 14px;
}
.pw-cm__brand { display: inline-flex; align-items: center; gap: 8px; }
.pw-cm__brandmark {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #e9ebee;
}
.pw-cm__brandmark svg { width: 13px; height: 13px; }
.pw-cm__mode { font-size: 11.5px; letter-spacing: .12em; color: #e9ebee; }
.pw-cm__script {
  display: inline-flex; align-items: center; gap: 7px; background: #313845;
  border: 1px solid #3f4855; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; color: var(--cm-text);
}
.pw-cm__scriptlabel { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.pw-cm__lead {
  display: inline-flex; align-items: center; background: var(--cm-rail-2);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.pw-cm__demochip {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #e0b567; border: 1px solid rgba(224, 181, 103, .4); border-radius: 999px; padding: 3px 9px;
}

.pw-cm__body { display: grid; grid-template-columns: 150px minmax(0, 1fr) 152px; }
.pw-cm__rail { background: var(--cm-rail); border-right: 1px solid var(--cm-line); padding: 13px 0 15px; min-width: 0; }
.pw-cm__rail--right { border-right: none; border-left: 1px solid var(--cm-line); padding: 13px 0 15px; }
.pw-cm__rail--right .qa { padding: 0 9px; gap: 4px; }
.pw-cm__rail--right .qa__item { padding: 8px 10px; font-size: 12px; }
.pw-cm__rail--right .qa__pinned { margin: 14px 9px 0; }
.pw-cm__rail--right .qa__pinnedcard { margin: 0; padding: 9px 10px; }
.pw-cm__rail--right .qa__pinnedtitle { display: block; font-size: 11.5px; line-height: 1.35; }
.pw-cm__rail--right .qa__pinnedmeta { display: block; font-size: 10px; margin-top: 3px; }

.pw-journey { margin: 0; padding: 0; list-style: none; }
.pw-journey .journey__item { padding: 6px 12px; font-size: 11.5px; gap: 8px; }
.pw-journey .journey__item:hover { background: none; }
.pw-journey .journey__item.is-current:hover { background: #39404b; }
.pw-journey .journey__mark { width: 13px; height: 13px; margin-top: 1px; transition: background 200ms var(--pw-settle), transform 240ms var(--pw-spring); }
.pw-journey .is-current .journey__mark { transform: scale(1.12); }
.pw-cm__progress { margin: 11px 12px 0; padding-top: 11px; font-size: 10.5px; }
.pw-cm__progress .cm__bar span { transition: width 420ms var(--pw-spring); }

.pw-cm__center { padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: center; min-width: 0; }
@media (min-width: 1280px) { .pw-cm__center { min-height: 392px; } }
.pw-cm__progress-compact { display: none; }
@media (max-width: 767px) {
  .pw-cm__progress-compact {
    display: block; align-self: stretch; margin-top: 12px; font-size: 11px;
    color: #9aa3ae; text-align: center;
  }
}
.pw-cm__kicker { max-width: none; margin-bottom: 8px; align-self: stretch; }
.pw-script { max-width: none; padding: 20px 22px 18px; border-radius: 12px; }
.pw-script .script__stage { font-size: 17px; }
.pw-script .script__provenance { font-size: 11.5px; }
.pw-script .script__text { font-size: 15px; line-height: 1.58; margin: 14px 0 4px; }
.pw-script .script__srcline { font-size: 11.5px; margin-top: 12px; }
.pw-script .script__answers { margin-top: 14px; gap: 10px; }
/* Wide frame: the two answers sit side by side, as they do in the product
   when the script surface has room — shorter card, same interaction. */
@media (min-width: 1100px) {
  .pw-script .answer { flex: 1 1 0; min-width: 0; }
}
.pw-script .answer {
  min-height: 52px; padding: 10px 16px; font-size: 14px;
  transition: background 180ms var(--pw-settle), box-shadow 180ms var(--pw-settle), transform 180ms var(--pw-settle);
}
.pw-script .answer:active { transform: scale(.98); transition-duration: 60ms; }
.pw-script .answer__dest { font-size: 11px; }
.pw-optlabel { margin-top: 16px; }
.pw-demo__nav { margin-top: 18px; padding-top: 14px; }
.pw-demo__reset { min-height: 44px; font-size: 13px; }
.pw-demo__reset[disabled] { opacity: .45; pointer-events: none; }
.pw-demo__noscript { font-size: 13px; color: var(--cm-text-faint); margin-top: 14px; max-width: 52ch; }

/* Demo state transitions; reduced motion zeroes them. */
.pw-script { transition: opacity 180ms var(--pw-settle), transform 320ms var(--pw-spring); }
.pw-script.is-swapping { opacity: 0; transform: translateY(6px) scale(.995); }
.pw-script.pw-script--branch { border-left: 4px solid var(--navy); }
.pw-script.pw-script--end { border-left: 4px solid var(--emerald); }
.pw-bar-w25 { width: 25%; }
.pw-bar-w50 { width: 50%; }
.pw-bar-w75 { width: 75%; }
.pw-bar-w100 { width: 100%; }

/* Chapter 01 clears the straddling hero frame. */
#product { padding-top: 150px; }

/* -------------------------------------------------- drawn linework (SVG) ---- */
/* Paths draw themselves when their chapter reveals. Without JavaScript the
   pw-js class is never added and every line is simply visible; under reduced
   motion the hidden state never applies at all, so the lines are static. */
@media (prefers-reduced-motion: no-preference) {
  .pw-js .pw-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* Base timing; welcome.js staggers sibling paths so a diagram draws
     trunk-first, branches after — a hand tracing the route, not a flash. */
  .pw-js .is-in .pw-draw, .pw-js .is-live .pw-draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 760ms var(--pw-settle) 160ms;
  }
}

/* --------------------------------------------------------------- problem ---- */
.pw-chaos {
  margin-top: 52px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 0; align-items: center;
}
.pw-chaos__stack { position: relative; height: 320px; }
.pw-sheet {
  position: absolute; width: 150px; padding: 12px 14px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: var(--e2);
}
.pw-sheet__t { display: block; font-size: 11.5px; font-weight: 640; color: var(--ink-2); letter-spacing: -.005em; }
.pw-sheet__lines {
  display: block; height: 34px; margin-top: 9px;
  background: repeating-linear-gradient(var(--line) 0 1px, transparent 1px 8px);
  opacity: .9;
}
.pw-sheet--a { left: 4%; top: 6px; transform: rotate(-5deg); }
.pw-sheet--b { left: 38%; top: 0; transform: rotate(3deg); }
.pw-sheet--c { left: 16%; top: 96px; transform: rotate(1.5deg); }
.pw-sheet--d { left: 52%; top: 118px; transform: rotate(-2.5deg); z-index: 1; }
.pw-sheet--e { left: 6%; top: 200px; transform: rotate(4deg); }
.pw-sheet--f { left: 42%; top: 226px; transform: rotate(-1.5deg); }
.pw-chaos:hover .pw-sheet { transform: rotate(0); transition: transform 380ms var(--pw-spring); }

.pw-chaos__paths { width: 100%; height: 300px; display: block; }
.pw-chaos__paths path { stroke: var(--line-2); stroke-width: 1.5; }

.pw-chaos__order {
  background: var(--pw-inkplate); color: #eaf0fb; border-radius: var(--r-lg);
  padding: 26px 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--pw-navy-glow);
  display: flex; flex-direction: column;
}
.pw-chaos__ordermark { font-size: 13px; color: #f2f6fd; }
.pw-chaos__ordersub { font-size: 11px; color: #8fb2e8; letter-spacing: .04em; padding: 4px 0 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pw-chaos__orderrow { display: flex; align-items: baseline; font-size: 13.5px; color: #b3c8e8; padding: 9px 0; }
.pw-chaos__orderrow > span:last-child { color: #eaf0fb; font-weight: 600; }
.pw-chaos__orderrow .pw-lead-dots { border-color: rgba(179, 200, 232, .35); }

/* ---------------------------------------------------------- guided calls ---- */
.pw-guided { margin-top: 48px; margin-left: 67px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.pw-branch { margin: 0; }
.pw-branch__svg { width: 100%; max-width: 320px; height: auto; display: block; }
.pw-branch__line { stroke: var(--ink-2); stroke-width: 1.5; }
.pw-branch__line--faint { stroke: var(--ink-3); stroke-dasharray: 3 5; }
.pw-branch__node { fill: var(--navy); }
.pw-branch__node--fork { fill: var(--electric); }
.pw-branch__reply { fill: var(--wash); stroke: rgba(37, 99, 235, .45); stroke-width: 1; }
.pw-branch__end { fill: var(--emerald-w); stroke: var(--emerald); stroke-width: 1.2; }
.pw-branch__label { font-size: 13px; font-weight: 620; fill: var(--ink); letter-spacing: -.01em; }
.pw-branch__label--q { fill: var(--ink-2); font-weight: 560; font-style: italic; }
.pw-branch__label--r { font-size: 10.5px; fill: var(--electric-2); font-weight: 700; letter-spacing: .02em; }
.pw-branch__key { font-size: 10px; font-weight: 700; fill: var(--ink-3); letter-spacing: .08em; }
.pw-branch__cap { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin-top: 10px; max-width: 30ch; }

/* The ledger — the page's list form. Numbered rows on hairlines; no cards. */
.pw-ledger { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pw-ledger__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 6px;
  padding: 17px 0 16px; border-top: 1px solid var(--line-2);
}
.pw-ledger__n { font-size: 12px; font-weight: 650; color: var(--pw-bronze-deep); font-variant-numeric: tabular-nums; padding-top: 3px; letter-spacing: .05em; }
.pw-ledger__t { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -.014em; }
.pw-ledger__d { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-top: 5px; max-width: 52ch; }
.pw-ledger--tight .pw-ledger__row { padding: 14px 0 13px; }

/* Full-bleed emphasis band — the held statement. */
.pw-band { margin-top: 64px; background: var(--pw-inkplate); position: relative; }
.pw-band::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 54px; height: 2px; background: var(--pw-bronze-lift); }
.pw-emph {
  max-width: 40ch; margin: 0 auto; text-align: center;
  font-family: var(--font-brand);
  font-size: clamp(20px, 2.3vw, 26px); font-weight: 600; letter-spacing: -.018em;
  color: #f2f6fd; line-height: 1.42; text-wrap: balance;
  padding: clamp(40px, 5vw, 62px) 20px;
}

/* ------------------------------------------------------------- objections --- */
.pw-obj { margin-top: 44px; margin-left: 67px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.pw-obj__list { display: flex; flex-direction: column; }
.pw-obj__listlabel { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; }
.pw-obj__btn {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px 0 18px;
  text-align: left; font-size: 15px; font-weight: 590; color: var(--ink); letter-spacing: -.01em;
  background: none; border: none; border-top: 1px solid var(--line-2); cursor: pointer;
  transition: background 200ms var(--pw-settle), color 200ms var(--pw-settle), padding-left 200ms var(--pw-settle);
}
.pw-obj__btn:last-child { border-bottom: 1px solid var(--line-2); }
.pw-obj__btn::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
  background: var(--navy); transform: scaleY(0); transition: transform 220ms var(--pw-spring);
}
.pw-obj__btn:hover { background: var(--wash); padding-left: 24px; }
.pw-obj__btn:active { background: rgba(37, 99, 235, .14); }
.pw-obj__btn[aria-expanded="true"] { background: var(--wash); color: var(--navy); padding-left: 24px; }
.pw-obj__btn[aria-expanded="true"]::before { transform: none; }
.pw-obj__k { font-size: 11px; font-weight: 650; color: var(--pw-bronze-deep); font-variant-numeric: tabular-nums; letter-spacing: .05em; flex: none; }
.pw-obj__btn:hover .pw-obj__k, .pw-obj__btn[aria-expanded="true"] .pw-obj__k { color: #7d5a2d; }
.pw-obj__cat { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); flex: none; padding-left: 10px; }

.pw-obj__panel {
  background: var(--pw-parchment); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--e2); padding: 28px 30px; min-height: 340px;
}
.pw-obj__ph { display: grid; place-content: center; min-height: 280px; }
.pw-obj__phline { font-size: 14px; color: var(--ink-3); max-width: 30ch; text-align: center; line-height: 1.55; }
.pw-obj__detail { animation: pwfade 260ms var(--pw-spring); }
@keyframes pwfade { from { opacity: 0; transform: translateY(6px) scale(.995); } to { opacity: 1; transform: none; } }
.pw-obj__rule span { display: block; width: 44px; height: 3px; background: var(--navy); margin-bottom: 18px; }
.pw-obj__label { font-size: 21px; font-weight: 670; letter-spacing: -.022em; }
.pw-obj__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
/* The tour label — this panel is marketing copy and says so, in the page's
   own eyebrow idiom rather than as a warning box. */
.pw-obj__tour {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--pw-bronze-deep); margin-bottom: 12px;
}
.pw-obj__tourdot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.pw-obj__body { font-size: 15.5px; line-height: 1.62; margin-top: 9px; color: var(--ink); font-style: italic; }
.pw-obj__provledger { margin: 22px 0 0; border-top: 1px solid var(--line-2); }
.pw-obj__provrow { display: flex; align-items: baseline; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.pw-obj__provrow dt { color: var(--ink-3); font-weight: 600; }
.pw-obj__provrow dd { margin: 0; font-weight: 590; }
.pw-hidden { display: none; }

/* -------------------------------------------------------------- knowledge --- */
.pw-know { margin-top: 44px; margin-left: 67px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pw-know__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pw-know__list li {
  display: flex; align-items: baseline; padding: 13px 0; font-size: 15.5px; font-weight: 570;
  letter-spacing: -.008em; border-top: 1px solid var(--line-2);
}
.pw-know__list li:first-child { border-top: none; }
.pw-know__list li .pw-lead-dots { order: 2; margin-left: 16px; margin-right: 0; }

.pw-docstack { position: relative; }
.pw-docstack__back {
  position: absolute; inset: 0; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--e1);
  transition: transform 420ms var(--pw-spring);
}
.pw-docstack__back--1 { transform: rotate(1.6deg) translate(10px, 8px); opacity: .8; }
.pw-docstack__back--2 { transform: rotate(-1.8deg) translate(-8px, 14px); opacity: .55; }
/* The stack breathes when handled — sheets fan a few degrees further. */
.pw-docstack:hover .pw-docstack__back--1 { transform: rotate(2.3deg) translate(13px, 10px); }
.pw-docstack:hover .pw-docstack__back--2 { transform: rotate(-2.6deg) translate(-11px, 17px); }
.pw-know__card {
  position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 28px 30px; box-shadow: var(--e3); overflow: hidden;
}
.pw-know__fold {
  position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-left: 26px solid var(--pw-parchment-2); border-top: 26px solid var(--canvas);
  filter: drop-shadow(-1px 1px 1px rgba(11, 26, 51, .12));
}
.pw-know__stamp {
  position: absolute; top: 34px; right: -26px; transform: rotate(32deg);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pw-bronze-deep); border: 1px solid rgba(168, 123, 62, .6); padding: 3px 30px;
}
.pw-know__cardtitle { font-size: 17px; font-weight: 660; letter-spacing: -.016em; max-width: 20ch; }
.pw-know__prov { margin: 18px 0 0; display: flex; flex-direction: column; }
.pw-know__provrow { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.pw-know__provrow dt { color: var(--ink-3); font-weight: 560; }
.pw-know__provrow dd { margin: 0; font-weight: 590; font-variant-numeric: tabular-nums; }
.pw-know__cardnote { font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-top: 18px; max-width: 44ch; }

/* --------------------------------------------------------------- training --- */
.pw-train { margin-top: 44px; margin-left: 67px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pw-ai {
  position: sticky; top: 100px;
  background: var(--pw-inkplate); color: #eaf0fb; border-radius: var(--r-lg);
  padding: 30px 32px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--pw-navy-glow);
}
.pw-ai__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #8fb2e8; margin-bottom: 14px; }
.pw-ai p { font-size: 17.5px; line-height: 1.55; font-weight: 570; letter-spacing: -.012em; color: #eaf0fb; }

/* -------------------------------------------------- the transformation ------ */
.pw-tf { margin-top: 44px; margin-left: 67px; }
.pw-tf__heads {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0 18px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 12px;
}
.pw-tf__headspp { color: var(--navy); }
.pw-tf__rows { list-style: none; margin: 0; padding: 0; }
.pw-tf__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0 18px;
  align-items: center; padding: 15px 0; border-top: 1px solid var(--line-2);
}
.pw-tf__row:last-child { border-bottom: 1px solid var(--line-2); }
.pw-tf__from { font-size: 14.5px; color: var(--ink-3); letter-spacing: -.005em; }
.pw-tf__arrow svg { width: 44px; height: 13px; display: block; }
.pw-tf__arrow path { stroke: var(--pw-bronze); stroke-width: 1.5; }
.pw-tf__to { font-size: 15.5px; font-weight: 620; color: var(--ink); letter-spacing: -.012em; padding-left: 14px; border-left: 2px solid var(--electric); }

/* --------------------------------------------------------------- security ---- */
.pw-sec { margin-top: 48px; margin-left: 67px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pw-bound { margin: 0; }
.pw-bound__svg { width: 100%; max-width: 340px; height: auto; display: block; }
.pw-bound__ring { stroke: rgba(234, 240, 251, .5); stroke-width: 1.2; }
/* The outer ring is not part of the drawn-line set, so its dash pattern
   renders as authored and its contrast clears the 3:1 non-text minimum. */
.pw-bound__ring--outer { stroke: rgba(234, 240, 251, .45); stroke-dasharray: 5 7; }
.pw-bound__core { fill: rgba(255, 255, 255, .1); stroke: rgba(234, 240, 251, .6); stroke-width: 1; }
.pw-bound__label { font-size: 10.5px; fill: #b3c8e8; text-anchor: middle; letter-spacing: .04em; }
.pw-bound__label--outer { fill: #8fb2e8; }
.pw-bound__label--core { font-size: 12.5px; font-weight: 650; fill: #f2f6fd; }
.pw-bound__cap { font-size: 12.5px; color: #8fb2e8; line-height: 1.55; margin-top: 12px; max-width: 34ch; }

.pw-trust { list-style: none; margin: 0; padding: 0; }
.pw-trust__item {
  position: relative; display: flex; gap: 16px; align-items: baseline;
  padding: 16px 0; font-size: 16.5px; font-weight: 570; letter-spacing: -.01em;
  border-top: 1px solid rgba(255,255,255,.14); color: #eaf0fb; line-height: 1.45;
}
.pw-trust__item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.pw-trust__n { font-size: 11px; font-weight: 650; color: var(--pw-bronze-lift); font-variant-numeric: tabular-nums; letter-spacing: .05em; flex: none; width: 20px; }

/* The foundation ledger — same list language as the rest of the page:
   item, dotted leader, status annotation. No chips, no cards. */
.pw-foundation { margin-top: 56px; margin-left: 67px; max-width: 560px; }
.pw-foundation__lede { font-size: 14px; line-height: 1.6; color: #b3c8e8; margin-top: 10px; max-width: 52ch; }
.pw-foundation__grid { list-style: none; margin: 18px 0 0; padding: 0; }
.pw-fitem {
  display: flex; align-items: baseline; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.pw-fitem:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.pw-fitem__t { font-size: 14.5px; font-weight: 570; color: #dbe6f8; letter-spacing: -.008em; }
.pw-fitem .pw-lead-dots { border-color: rgba(179, 200, 232, .3); }
.pw-fitem .pw-tag--ondark { border: none; background: none; padding: 0; font-size: 10.5px; letter-spacing: .11em; }

/* ---------------------------------------------------------------- founder ---- */
.pw-founder__lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.6; max-width: 56ch; color: var(--ink); font-weight: 520; margin-left: 67px; }
.pw-founder__rule { display: block; width: 54px; height: 2px; background: var(--pw-bronze); margin: 34px 0 0 67px; }

/* ------------------------------------------------------- vision: the rings --- */
.pw-arch { margin-top: 48px; margin-left: 67px; }
.pw-arch__ring { border-radius: 16px; padding: 20px 22px 22px; }
.pw-arch__ring--agency { border: 1.5px dashed rgba(17, 38, 74, .3); }
.pw-arch__ring--team { border: 1.5px dashed rgba(17, 38, 74, .38); margin-top: 16px; }
.pw-arch__ring--producer { border: 1.5px solid var(--navy); background: var(--wash); margin-top: 16px; box-shadow: var(--e1); }
.pw-arch__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.pw-arch__t { font-size: 16.5px; font-weight: 660; letter-spacing: -.016em; }
.pw-arch__d { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; max-width: 60ch; }

/* -------------------------------------------------------------- final CTA ---- */
.pw-final__wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.pw-final__end {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pw-bronze-lift); margin-bottom: 18px;
}
.pw-final__end::before { content: ""; width: 26px; height: 2px; background: var(--pw-bronze-lift); }
.pw-access {
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px -24px rgba(0,0,0,.5);
  padding: 30px 32px;
}
.pw-access__note { font-size: 13.5px; line-height: 1.6; color: #b3c8e8; margin-top: 11px; }
.pw-access__form { margin-top: 22px; }
.pw-access__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fb2e8; margin-bottom: 9px; }
.pw-access__row { display: flex; gap: 10px; }
.pw-access__input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 15px; font-size: 14.5px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 11px;
  color: #eaf0fb;
}
.pw-access__input[disabled] { opacity: .55; }
.pw-access__status { font-size: 12.5px; color: #f7dfae; margin-top: 13px; }
.pw-access__agencies { font-size: 12.5px; color: #8fb2e8; line-height: 1.6; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }

/* ----------------------------------------------------------------- footer ---- */
.pw-footer { background: #0a1a38; color: #b3c8e8; border-top: 1px solid rgba(255,255,255,.08); padding: 44px 0 52px; }
.pw-footer__in { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; justify-content: space-between; }
.pw-footer__brand { display: flex; flex-direction: column; gap: 4px; }
.pw-footer__lockup { display: inline-flex; align-items: center; gap: 9px; color: #f2f6fd; }
.pw-footer__mark { width: 20px; height: 20px; flex: none; display: grid; }
.pw-footer__mark img, .pw-footer__mark svg { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.pw-footer__name { font-size: 13.5px; color: #f2f6fd; }
.pw-footer__by { font-size: 12px; color: #8fb2e8; }
.pw-footer__legal { font-size: 12px; color: #8fb2e8; margin-top: 10px; }
.pw-footer__nav { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.pw-footer__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 13px; color: #b3c8e8; border-radius: 8px; transition: color 180ms var(--pw-settle);
}
.pw-footer__link:hover { color: #f2f6fd; }

/* -------------------------------------------------- scroll reveal (JS-add) -- */
.pw-reveal { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--pw-settle), transform 640ms var(--pw-settle); }
.pw-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- responsive --- */
@media (max-width: 1279px) {
  .pw-hero__wrap { grid-template-columns: minmax(0, 1fr); }
  .pw-hero__sub { max-width: 60ch; }
  .pw-cm__body { grid-template-columns: 148px minmax(0, 1fr) 150px; }
}

@media (max-width: 1023px) {
  .pw-guided, .pw-know, .pw-train, .pw-sec, .pw-final__wrap { grid-template-columns: 1fr; }
  .pw-guided, .pw-obj, .pw-know, .pw-train, .pw-tf, .pw-arch, .pw-foundation { margin-left: 0; }
  .pw-section .pw-ch + .pw-lede { margin-left: 0; }
  .pw-founder__lede, .pw-founder__rule { margin-left: 0; }
  .pw-branch__svg { max-width: 280px; }
  .pw-bound__svg { max-width: 300px; margin: 0 auto; }
  .pw-bound__cap { max-width: none; text-align: center; margin-left: auto; margin-right: auto; }
  .pw-ai { position: static; }
  .pw-demo { margin-bottom: -56px; }
  #product { padding-top: 120px; }
}

@media (max-width: 899px) {
  .pw-nav, .pw-header__actions { display: none; }
  .pw-menu { display: block; }
  /* The floating bar keeps a visible margin from the viewport edges on
     small screens so it still reads as an inset object, not a strip. */
  .pw-header { padding: 10px 12px 0; }
  .pw-header.is-scrolled { padding-top: 6px; }
  .pw-header__in { height: 56px; padding: 0 10px 0 14px; gap: 12px; }
  .pw-header.is-scrolled .pw-header__in { height: 52px; }
  /* Identity alone on the left; the seam belongs to the desktop layout. */
  .pw-header__brand::after { display: none; }
  .pw-menu__panel { max-width: calc(100vw - 40px); }
  .pw-obj { grid-template-columns: 1fr; }
  .pw-obj__panel { min-height: 0; }
  .pw-obj__ph { min-height: 140px; }
  .pw-chaos { grid-template-columns: 1fr; }
  .pw-chaos__stack { height: 250px; max-width: 420px; margin: 0 auto; width: 100%; }
  .pw-sheet { width: 132px; }
  .pw-chaos__paths { height: 70px; max-width: 200px; margin: 4px auto; transform: rotate(90deg); }
  .pw-chaos__order { max-width: 420px; margin: 26px auto 0; width: 100%; }
}

@media (max-width: 767px) {
  .pw-cm__body { grid-template-columns: minmax(0, 1fr); }
  .pw-cm__rail { display: none; }
  .pw-cm__center { padding: 14px 12px 18px; }
  .pw-frame__corner--tl { top: -6px; left: -6px; }
  .pw-frame__corner--br { bottom: -6px; right: -6px; }
  .pw-ch { gap: 14px; }
  .pw-ch__n { width: 38px; height: 38px; font-size: 14.5px; border-radius: 9px; }
  .pw-tf__heads { display: none; }
  .pw-tf__row { grid-template-columns: 1fr; gap: 8px; padding: 17px 0; }
  .pw-tf__arrow { display: none; }
  .pw-tf__from { font-size: 13px; }
  .pw-tf__to { padding-left: 12px; }
  /* The stacked layout keeps its direction cue. */
  .pw-tf__to::before { content: "→ "; color: var(--pw-bronze-deep); font-weight: 700; }
  .pw-access__row { flex-direction: column; }
  .pw-footer__in { flex-direction: column; }
  .pw-demo { margin-bottom: -40px; }
  #product { padding-top: 100px; }
  .pw-frame::before { inset: 12px -8px -8px 12px; }
  .pw-know__stamp { display: none; }
  .pw-docstack__back--2 { display: none; }
}