/* =========================================================
   Park West Digital — shared site chrome
   Extracted from the Marketing Ops reference so every page
   carries identical nav, sunrise, acts, logo bar, CTA band,
   and footer. Page-specific CSS stays in the page.

   Load order: tokens.css, then this, then the page's <style>.
   ========================================================= */

@import url('tokens.css');

  body { background: var(--pw-ink); overflow-x: hidden; }


  /* ---- The sun ----
     One fixed light source the whole page scrolls past. Dark acts are
     transparent so it shows through; paper acts are opaque and occlude
     it, so the sun reads as rising behind the story. */
  /* ---- The sunrise ----
     The mark's own geometry, not a glow: four hard-edged concentric bands
     on one horizon, rising across the scroll. Dark acts are transparent so
     it shows through; light acts are opaque and occlude it, so the paper
     stays clean paper. No blur anywhere — the edge is the point. */
  .sunrise {
    position: fixed; left: 50%; bottom: 0; z-index: 0;
    width: min(150vw, 1680px); height: min(75vw, 840px);
    pointer-events: none;
    transform: translate3d(-50%, var(--sun-y, 40vh), 0);
    will-change: transform;
    /* Fade out toward the base so only the crown of each arc survives.
       The near-vertical lower runs are what collided with section rules. */
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.35) 26%, #000 62%);
    mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.35) 26%, #000 62%);
  }
  .sunrise span {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    display: block;
  }
  /* a hairline on each arc is what makes the geometry read as drawn rather
     than smudged — the fills stay near-invisible, the edges do the work */
  .sunrise .b1 { width: 100%;  height: 100%;  background: rgba(232,163,61,0.040); border: 1px solid rgba(232,163,61,0.11); border-bottom: 0; }
  .sunrise .b2 { width: 75%;   height: 75%;   background: rgba(224,123,57,0.045); border: 1px solid rgba(224,123,57,0.12); border-bottom: 0; }
  .sunrise .b3 { width: 50%;   height: 50%;   background: rgba(184,68,32,0.050);  border: 1px solid rgba(226,100,58,0.14); border-bottom: 0; }
  .sunrise .b4 { width: 25%;   height: 25%;   background: rgba(226,100,58,0.065); border: 1px solid rgba(232,163,61,0.18); border-bottom: 0; }
  /* Convert-register variant: the same arc geometry, pinned. The register
     forbids ambient MOTION, not the brand ground — a static transform costs
     nothing on Core Web Vitals and no JS touches it. Sits slightly higher than
     the parallax start so the crown is in frame at first paint. */
  .sunrise--static {
    transform: translate3d(-50%, 16vh, 0);
    will-change: auto;
  }
  /* no horizon rule — it read as one more hard horizontal colliding with
     the section dividers */
  .wrap { max-width: var(--pw-wrap); margin: 0 auto; padding: 0 var(--pw-gutter); }
  .wrap-w { max-width: var(--pw-wrap-w); margin: 0 auto; padding: 0 var(--pw-gutter); }

  /* ---- Acts ---- */
  .act { position: relative; padding: var(--pw-sect-pad) 0; }
  /* content rides above the warm sun layer (z 2); act backgrounds sit below it */
  .act > .wrap, .act > .wrap-w { position: relative; z-index: 3; }
  .act-tall { min-height: 92svh; display: flex; align-items: center; }
  /* flex items are shrink-to-fit on the main axis — without this the wrap
     collapses to its content width and the whole act drifts off-grid */
  .act-tall > .wrap, .act-tall > .wrap-w { width: 100%; }
  .act.ink   { background: transparent; color: var(--pw-cream); }
  .act.ink-950 { background: transparent; color: var(--pw-cream); }
  .act.paper { background: var(--pw-ink-050); color: var(--pw-body); }
  .act.paper-alt { background: var(--pw-ink-100); color: var(--pw-body); }

  /* ---- Light-ground structure ----
     A blueprint grid, not a texture. It says the same thing the copy does:
     this is architecture. Masked so it's strongest at the section edges and
     clears out behind the type, plus a warm bleed at the top edge so the
     paper reads as lit by the same sun the dark acts sit under. */
  .act.paper::before, .act.paper-alt::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(20,17,14,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(20,17,14,0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 62% 54% at 50% 46%, transparent 28%, #000 100%);
    mask-image: radial-gradient(ellipse 62% 54% at 50% 46%, transparent 28%, #000 100%);
  }
  .act.paper::after, .act.paper-alt::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 220px;
    z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(232,163,61,0.10), transparent);
  }

  /* ---- Nav ---- */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    min-height: var(--pw-nav-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--pw-space-5) var(--pw-gutter);
    background: rgba(20,17,14,0.72);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--pw-line-dark);
  }
  nav .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
  nav .brand img { height: 20px; width: auto; }
  nav .brand span {
    font-family: var(--pw-font-logo); font-weight: 700;
    font-size: 16px; line-height: 1; letter-spacing: -0.005em;
    color: var(--pw-head-dark); white-space: nowrap;
  }
  /* ---- Nav ----
     REGISTER RULE: this full nav belongs to .register-express only (home,
     case studies). Convert pages — the paid landing pages — keep logo + one
     CTA, because every nav link on a paid page is an exit. */
  /* Left-aligned against the brand, matching the convert jump nav — one nav
     geometry across both registers, not just one type treatment. */
  nav .menu { display: flex; align-items: center; gap: var(--pw-space-6); margin-left: var(--pw-space-10); margin-right: auto; }
  nav .menu > * { position: relative; }
  /* the inline duplicates exist only for the collapsed menu */
  nav .menu a.cta-inline { display: none; }
  /* Understated on purpose — the CTA stays the loudest thing in the bar, so
     these take the same quiet mono label voice as the convert jump links
     rather than the gold the link rule would give them. One nav voice across
     both registers. */
  nav .menu a, nav .menu .top {
    color: var(--pw-ink-400); text-decoration: none;
    font-family: var(--pw-font-mono); font-size: 11px; font-weight: 400;
    letter-spacing: var(--pw-tracking-wide); text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--pw-dur-fast) var(--pw-ease);
  }
  nav .menu a:hover, nav .menu .top:hover { color: var(--pw-head-dark); }
  nav .menu { gap: var(--pw-space-7); }

  /* top-level trigger: a rule that draws in from the left on hover */
  /* No font-family here — the mono label voice is set above, and re-declaring
     inherit at equal specificity silently reverted every trigger to body sans. */
  nav .menu .top {
    appearance: none; background: none; border: none; cursor: pointer;
    padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;
  }
  nav .menu .top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--pw-gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--pw-dur-base) var(--pw-ease-emphasis);
  }
  nav .menu .top:hover::after,
  nav .menu .top[aria-expanded="true"]::after { transform: scaleX(1); }
  nav .menu .top .caret {
    width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--pw-dur-base) var(--pw-ease);
  }
  nav .menu .top[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-2px); }

  /* ---- Dropdown panel ---- */
  .panel {
    position: absolute; top: calc(100% + 18px); left: 50%;
    transform: translate(-50%, -6px);
    min-width: 520px; padding: var(--pw-space-6);
    background: var(--pw-ink-soft);
    border: 1px solid var(--pw-line-dark);
    border-radius: var(--pw-radius-card);
    box-shadow: 0 28px 70px -18px rgba(0,0,0,0.7);
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--pw-dur-fast) var(--pw-ease),
                transform var(--pw-dur-base) var(--pw-ease-emphasis),
                visibility 0s linear var(--pw-dur-base);
  }
  .panel.one-col { grid-template-columns: 1fr; min-width: 400px; }
  .menu-item[data-open] .panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  /* The panel is content, not a label — undo the mono label voice the
     top-level links set so descriptions read as prose. */
  nav .panel a {
    display: grid; gap: 3px; padding: 11px 13px;
    border-radius: var(--pw-radius-chip);
    font-family: var(--pw-font-sans); text-transform: none;
    letter-spacing: normal; white-space: normal;
    transition: background var(--pw-dur-fast) var(--pw-ease);
  }
  nav .panel a:hover { background: rgba(242,235,221,0.06); }
  nav .panel a strong {
    font-size: var(--pw-text-sm); font-weight: 600; color: var(--pw-head-dark);
  }
  nav .panel a span {
    font-size: var(--pw-text-xs); color: var(--pw-ink-500); line-height: 1.5;
  }
  nav .panel a:hover span { color: var(--pw-cream-dim); }
  nav .panel .foot {
    grid-column: 1 / -1; margin-top: var(--pw-space-3);
    padding: 11px 13px 3px; border-top: 1px solid var(--pw-line-dark);
    display: flex; justify-content: space-between; align-items: center;
  }
  nav .panel .foot a { padding: 0; font-family: var(--pw-font-mono); font-size: 11px;
    letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-gold); white-space: nowrap; }
  nav .panel .foot a:hover { background: none; color: var(--pw-head-dark); }
  nav .burger {
    display: none; appearance: none; background: transparent;
    border: 1px solid var(--pw-line-dark); border-radius: var(--pw-radius-pill);
    color: var(--pw-cream); cursor: pointer;
    padding: 9px 14px; font-family: var(--pw-font-mono); font-size: 11px;
    letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
    min-height: 44px; align-items: center;
  }
  nav .burger:hover { border-color: var(--pw-verm-lift); }
  nav .right { display: flex; align-items: center; gap: var(--pw-space-4); }
  /* Contact is the quiet second path — outlined, never a second gold button. */
  nav .right .pw-btn-ghost { padding: 10px 18px; font-size: var(--pw-text-sm); }
  @media (max-width: 1100px) { nav .right .pw-btn-ghost { display: none; } }
  @media (max-width: 940px) {
    nav { flex-wrap: wrap; }
    nav .burger { display: inline-flex; }
    nav .menu a.cta-inline { display: inline-flex; }
    nav .menu {
      order: 3; flex-basis: 100%; margin-left: 0; margin-right: 0;
      display: none; flex-direction: column; align-items: flex-start;
      gap: var(--pw-space-5);
      padding: var(--pw-space-6) 0 var(--pw-space-3);
      margin-top: var(--pw-space-5);
      border-top: 1px solid var(--pw-line-dark);
    }
    /* site.js toggles `open` on <nav>; this is the rule that reveals the collapsed
       menu. Applied at runtime, so it is invisible to a static class scan — do not
       remove it as unused. */
    nav.open .menu { display: flex; }

    /* The open menu is the same near-black as the hero behind it, so its
       panel and the page merged and the links appeared to float over the
       content. Two changes give it an edge: the nav becomes an opaque raised
       surface, and the page behind is dimmed. */
    nav.open {
      background: var(--pw-ink-950);
      box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
    }
    nav.open::after {
      content: '';
      position: fixed;
      inset: var(--pw-nav-h) 0 0;
      background: rgba(11, 9, 8, 0.72);
      z-index: -1;
      pointer-events: none;
    }
    nav .menu a { font-size: var(--pw-text-md); }
    nav .menu-item { width: 100%; }
    nav .menu .top { font-size: var(--pw-text-md); width: 100%; justify-content: space-between; }
    .panel {
      position: static; transform: none; min-width: 0; width: 100%;
      grid-template-columns: 1fr; background: transparent; border: none;
      box-shadow: none; padding: var(--pw-space-4) 0 0;
      opacity: 1; visibility: visible; pointer-events: auto;
      display: none;
    }
    .menu-item[data-open] .panel { display: grid; transform: none; }
    nav .panel a { padding: 9px 0 9px 14px; border-left: 1px solid var(--pw-line-dark); border-radius: 0; }
    nav .panel a:hover { background: none; }
  }
  @media (max-width: 560px) {
    nav .pw-btn { display: none; }
    nav.open .menu a.cta-inline { display: inline-flex; }
  }
  nav .pw-btn { padding: 11px 20px; font-size: var(--pw-text-sm); }


  /* ---- LogoBar ----
     Borrowed trust, component 03 in the system. Text-set client names, not
     images: names survive dark grounds, retina, and print, and they never
     turn a hero into a sponsor wall. Deliberately quiet — this is the one
     place on the page that is allowed to be almost invisible. */
  .logobar { border-bottom: 1px solid var(--pw-line-dark); }
  .logobar .inner {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--pw-space-9); align-items: center;
    padding: var(--pw-space-8) 0;
  }
  .logobar .lbl {
    font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
    letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
    color: var(--pw-ink-500); white-space: nowrap; margin: 0;
  }
  .logobar ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--pw-space-6) var(--pw-space-9);
  }
  /* Mixed-format artwork flattened to one cream silhouette so six logos read
     as one row rather than six brands competing. Dim at rest; the hovered
     one comes up while the rest stay back. */
  .logobar li { display: flex; align-items: center; }
  .logobar img {
    height: 26px; width: auto; max-width: 132px; object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.46;
    transition: opacity var(--pw-dur-base) var(--pw-ease);
  }
  .logobar:hover img { opacity: 0.3; }
  .logobar img:hover { opacity: 0.95; }
  /* Optical sizing, not literal. Gap's mark is a hairline serif: at the row's
     26px cap height its strokes fall under a pixel and the silhouette filter
     erases it, so the bar looked like it had five logos and a gap. Sized up
     and lifted until it carries the same weight as the solid wordmarks. */
  .logobar img[alt="Gap"] { height: 38px; opacity: 0.62; }
  .logobar:hover img[alt="Gap"] { opacity: 0.42; }
  .logobar img[alt="Gap"]:hover { opacity: 1; }
  @media (max-width: 860px) {
    .logobar .inner { grid-template-columns: 1fr; gap: var(--pw-space-6); }
    .logobar ul { justify-content: flex-start; gap: var(--pw-space-7); }
    .logobar img { height: 20px; max-width: 96px; }
    .logobar img[alt="Gap"] { height: 29px; }
  }


  /* ---- Shared section head ----
     Headline left, supporting note right. The note is body copy at body
     size — subordinate to the headline, same voice as everything else. */
  .head {
    display: grid; grid-template-columns: 1.15fr 1fr;
    gap: 0 var(--pw-space-11); align-items: end;
    /* The head block owns the space beneath it. Leaving that to the next
       element means every section spaces differently. */
    margin-bottom: var(--pw-space-12);
  }
  .head .pw-eyebrow { grid-column: 1 / -1; align-self: start; }
  .head h2 {
    grid-column: 1;
    font-family: var(--pw-font-display); font-weight: 400;
    /* The floor IS the mobile size — 4.4vw doesn't clear it until ~860px, so
       every phone renders the minimum. It was set at 32px, which reads as body
       copy at a section head's job. 38px is the real mobile size; the vw term
       and the 60px cap are unchanged, so desktop is identical. */
    font-size: clamp(38px, 4.4vw, 60px); line-height: var(--pw-leading-tight);
    letter-spacing: var(--pw-tracking-tight); margin: var(--pw-space-6) 0 0;
    max-width: 19ch; text-wrap: balance;
  }
  .head h2 em { font-style: italic; }
  .head.stack h2, .lead-h { text-wrap: balance; }
  .head .note {
    grid-column: 2; margin: 0;
    padding-top: var(--pw-space-5);
    border-top: 1px solid var(--pw-line-light);
    font-size: var(--pw-text-md);
    line-height: var(--pw-leading-relaxed); max-width: 38ch;
  }
  .dark .head .note { border-top-color: var(--pw-line-dark); }
  .light .head h2 em { color: var(--pw-verm); }
  /* The note is supporting copy doing real work, not a caption — it takes
     body ink, not muted. Muted is for metadata. */
  .light .head .note { color: var(--pw-body); }
  .dark .head h2 em { color: var(--pw-gold); }
  .dark .head .note { color: var(--pw-cream); }
  /* The head owns the space beneath it — but only when something follows.
     A section whose entire content IS the head was stacking that margin on
     top of the section's own bottom padding, leaving a dead half-screen. */
  .head:last-child { margin-bottom: 0; }
  @media (max-width: 900px) {
    .head { grid-template-columns: 1fr; gap: var(--pw-space-5); align-items: start; margin-bottom: var(--pw-space-10); }
    .head h2, .head .note { grid-column: 1; max-width: 44ch; }
    /* The rule above the note separates two COLUMNS. Once they stack it
       reads as a section divider dropped into the middle of a section, and
       the padding under it opens a hole between a headline and its own
       supporting sentence. Both go. */
    .head .note { padding-top: 0; border-top: none; }
    .head:last-child { margin-bottom: 0; }
  }

  /* Stacked variant. The two-column head needs a note substantial enough to
     balance a three-line display headline; when it isn't, the bottom-aligned
     note reads as a footnote stranded in dead space. This stacks it under the
     headline as a proper lede — no rule, larger, full measure. */
  .head.stack { grid-template-columns: 1fr; gap: var(--pw-space-7); align-items: start; }
  .head.stack h2 { grid-column: 1; max-width: 26ch; }
  .head.stack .note {
    grid-column: 1; max-width: 62ch;
    padding-top: 0; border-top: none;
    font-size: var(--pw-text-lg); line-height: var(--pw-leading-relaxed);
  }

  /* Full-width section headline — for sections that lead with a single
     statement instead of the two-column headline/note pattern. Same display
     type as .head h2 so no section heading is ever set in the body sans. */
  .lead-h {
    font-family: var(--pw-font-display); font-weight: 400;
    font-size: clamp(30px, 4vw, 46px); line-height: var(--pw-leading-snug);
    letter-spacing: var(--pw-tracking-tight); margin: var(--pw-space-5) 0 0;
    max-width: 24ch; text-wrap: balance;
  }
  .lead-h em { font-style: italic; }
  .light .lead-h em { color: var(--pw-verm); }
  .dark .lead-h { color: var(--pw-head-dark); }
  .dark .lead-h em { color: var(--pw-gold); }


  /* ---- Act 5: the ask ---- */
  .ask { text-align: center; position: relative; }
  .ask .wrap { position: relative; z-index: 3; }
  .ask h2 {
    font-family: var(--pw-font-display); font-weight: 400;
    font-size: clamp(38px, 6.5vw, 104px); line-height: 0.98;
    letter-spacing: -0.03em; margin: var(--pw-space-7) auto 0;
    color: var(--pw-head-dark); max-width: 18ch;
    text-wrap: balance;
  }
  .ask h2 em { font-style: italic; color: var(--pw-gold); }
  /* :not([class]) so this claims only the lede. A bare `p` here out-specifies
     .pw-eyebrow (0,1,1 beats 0,1,0) and silently reflowed the kicker to 18px lede
     size on every page carrying an ask — the same trap .proof-body documents. */
  .ask p:not([class]) { color: var(--pw-cream-dim); max-width: 48ch; margin: var(--pw-space-8) auto 0; font-size: var(--pw-text-lg); line-height: var(--pw-leading-relaxed); text-wrap: pretty; }
  .ask .actions { display: flex; justify-content: center; gap: var(--pw-space-4); margin-top: var(--pw-space-10); flex-wrap: wrap; }
  .ask .fine { margin-top: var(--pw-space-8); font-family: var(--pw-font-mono); font-size: var(--pw-text-xs); color: var(--pw-cream-dim); letter-spacing: var(--pw-tracking-wide); max-width: 62ch; margin-inline: auto; text-wrap: balance; }
  /* The closing ask is sized for a wide column. On a phone the 18px lede and
     the tracked-out kicker both read a size too large against the headline
     they support. */
  @media (max-width: 700px) {
    .ask .pw-eyebrow { letter-spacing: 0.1em; }
    .ask p { font-size: var(--pw-text-md); margin-top: var(--pw-space-7); max-width: 40ch; }
    .ask .actions { margin-top: var(--pw-space-9); }
    .ask .fine { margin-top: var(--pw-space-7); font-size: 11px; }
  }

  footer {
    position: relative; z-index: 3;
    background: var(--pw-ink-950); color: var(--pw-cream-dim);
    border-top: 1px solid var(--pw-line-dark);
    padding: var(--pw-space-12) 0 var(--pw-space-9);
  }
  /* The brand column carries a paragraph while the others carry short links,
     so it needs meaningfully more width than an even share. */
  /* Track count MUST match the number of .f-col children — a stale count
     leaves a dead column and shoves the whole footer off-centre. */
  .f-top {
    display: grid; grid-template-columns: 1.75fr repeat(3, 1fr);
    gap: var(--pw-space-12) var(--pw-space-10);
    padding-bottom: var(--pw-space-12);
  }
  .f-brand .lockup { display: flex; align-items: center; gap: 8px; margin-bottom: var(--pw-space-5); flex-wrap: nowrap; }
  .f-brand .lockup img { height: 20px; width: auto; }
  .f-brand .lockup span {
    font-family: var(--pw-font-logo); font-weight: 700; font-size: 16px;
    line-height: 1; color: var(--pw-head-dark); letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .f-brand p {
    margin: 0; max-width: 42ch; font-size: var(--pw-text-sm);
    line-height: var(--pw-leading-relaxed); color: var(--pw-ink-500);
  }
  .f-col h2, .f-col h4 {
    margin: 0 0 var(--pw-space-7); font-family: var(--pw-font-mono);
    font-size: 10px; font-weight: 500; text-transform: uppercase;
    letter-spacing: var(--pw-tracking-kicker); color: var(--pw-ink-500);
  }
  .f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pw-space-5); }
  .f-col a {
    color: var(--pw-cream-dim); text-decoration: none; font-size: var(--pw-text-sm);
    line-height: 1.4; display: inline-block;
    transition: color var(--pw-dur-fast) var(--pw-ease);
  }
  .f-col a:hover { color: var(--pw-head-dark); }
  .f-bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--pw-space-8); flex-wrap: wrap;
    padding-top: var(--pw-space-7); border-top: 1px solid var(--pw-line-dark);
    font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
    letter-spacing: var(--pw-tracking-wide); color: var(--pw-ink-500);
  }
  .f-bottom .legal { display: flex; gap: var(--pw-space-7); flex-wrap: wrap; }
  .f-bottom a { color: var(--pw-ink-500); text-decoration: none; }
  .f-bottom a:hover { color: var(--pw-cream-dim); }
  @media (max-width: 1100px) {
    .f-top { grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-11) var(--pw-space-9); }
    .f-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 760px) {
    .f-top { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .f-top { grid-template-columns: 1fr; }
  }

  @media (max-width: 1080px) {
    .view { --cols: minmax(120px,1.8fr) minmax(84px,1fr) minmax(96px,1.3fr) !important; }
    /* drop the descriptive columns, never the ones that carry state or ownership */
    .view[data-view="portfolio"] .rig-row > *:nth-child(2),
    .view[data-view="portfolio"] .rig-row > *:nth-child(3),
    .view[data-view="portfolio"] .rig-row > *:nth-child(5),
    .view[data-view="owner"] .rig-row > *:nth-child(4),
    .view[data-view="owner"] .rig-row > *:nth-child(5),
    .view[data-view="approvals"] .rig-row > *:nth-child(2),
    .view[data-view="approvals"] .rig-row > *:nth-child(4),
    .view[data-view="budget"] .rig-row > *:nth-child(2),
    .view[data-view="budget"] .rig-row > *:nth-child(4),
    .view[data-view="budget"] .rig-row > *:nth-child(5),
    .view[data-view="exec"] .rig-row > *:nth-child(3) { display: none; }
    .rig-stats { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 860px) {
    .rig-body { grid-template-columns: 1fr; }
    .rig-side { border-right: none; border-bottom: 1px solid var(--pw-line-light); }
    .rig-stats { grid-template-columns: repeat(2, 1fr); }
    .view { --cols: minmax(96px,1.6fr) minmax(84px,1fr) !important; }
    .view[data-view="portfolio"] .rig-row > *:nth-child(6),
    .view[data-view="owner"] .rig-row > *:nth-child(3),
    .view[data-view="approvals"] .rig-row > *:nth-child(5),
    .view[data-view="budget"] .rig-row > *:nth-child(6),
    .view[data-view="exec"] .rig-row > *:nth-child(4) { display: none; }
    .fail { grid-template-columns: 1fr; gap: var(--pw-space-3); }
  }



/* =========================================================
   PRODUCT SHOTS
   Real screenshots of systems we've built. These are the proof —
   they get a frame, generous space, and nothing competing.
   ========================================================= */

.shot {
  border-radius: var(--pw-radius-card);
  overflow: hidden;
  background: var(--pw-surface-elev);
  border: 1px solid var(--pw-line-light);
  box-shadow: var(--pw-shadow-lg);
}
.dark .shot {
  border-color: rgba(242,235,221,0.12);
  background: var(--pw-ink-soft);
  box-shadow: 0 48px 100px -40px rgba(0,0,0,0.8);
}
.shot-bar {
  display: flex; align-items: center; gap: var(--pw-space-4);
  padding: 10px var(--pw-space-5);
  border-bottom: 1px solid var(--pw-line-light);
  background: var(--pw-ink-100);
}
.dark .shot-bar { background: rgba(0,0,0,0.28); border-bottom-color: rgba(242,235,221,0.10); }
.shot-bar .dots { display: flex; gap: 6px; flex: none; }
.shot-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pw-ink-300); display: block; }
.dark .shot-bar .dots i { background: rgba(242,235,221,0.22); }
.shot-bar .nm {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dark .shot-bar .nm { color: var(--pw-ink-400); }
.shot img { display: block; width: 100%; height: auto; }
/* Caption under a shot. Was duplicated page-locally on five pages — one of which
   had no <style> block at all — so it lives here now and the copies are gone. */
.shot-cap {
  margin: var(--pw-space-5) 0 0; font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-wide); color: var(--pw-muted);
  line-height: 1.7; max-width: 52ch;
}
/* ink-400 is a light warm grey — right on ink, far too weak on paper. */
.dark .shot-cap { color: var(--pw-ink-400); }

/* Cropped shot — for wide screenshots that would otherwise shrink the UI
   to illegibility. Shows the top of the frame at full scale. */
/* A full 2400px dashboard scaled into a 480px column is unreadable. Render the
   image above container width and clip — you see a slice of a real screen at
   something close to real scale, which is the whole point of showing it. */
.shot.crop { position: relative; }
.shot.crop .win { max-height: var(--shot-h, 470px); overflow: hidden; }
.shot.crop .win img { width: var(--shot-mag, 132%); max-width: none; }
.shot.crop.tight .win img { width: 118%; }
.shot.crop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(transparent, var(--pw-ink-050));
  pointer-events: none;
}
.dark .shot.crop::after { background: linear-gradient(transparent, var(--pw-ink)); }
.paper-alt .shot.crop::after { background: linear-gradient(transparent, var(--pw-ink-100)); }

/* Alternating capability rows — screenshot one side, argument the other.
   Rows were 128px apart with the copy centred against a 470px-tall screenshot,
   which left a dead band beside every one. Copy now aligns to the top of the
   image and the rhythm is tighter. */
.builds { display: grid; gap: var(--pw-space-12); margin-top: var(--pw-space-12); }
.build {
  /* Even halves. The old 0.92fr/1.08fr split was applied in SOURCE order, but
     .build:nth-child(even) reorders the copy — so the image column alternated
     between 46% and 54% down the section, which read as a drifting margin
     rather than a rhythm. */
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--pw-space-11); align-items: start;
}
.build-copy { padding-top: var(--pw-space-6); }
.build:nth-child(even) .build-copy { order: -1; }
.build-copy .tag {
  display: inline-block; font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-verm); margin-bottom: var(--pw-space-5);
}
.dark .build-copy .tag { color: var(--pw-gold); }
.build-copy h3 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); margin: 0 0 var(--pw-space-5);
  max-width: 18ch; text-wrap: balance;
}
.build-copy p { margin: 0; color: var(--pw-body); line-height: var(--pw-leading-relaxed); max-width: 46ch; }
.dark .build-copy p { color: var(--pw-cream); }
.build-copy .spec {
  margin: var(--pw-space-7) 0 0; padding-top: var(--pw-space-5);
  border-top: 1px solid var(--pw-line-light);
  display: flex; flex-wrap: wrap; gap: var(--pw-space-5) var(--pw-space-6);
  font-family: var(--pw-font-mono); font-size: 11px; color: var(--pw-muted);
  letter-spacing: var(--pw-tracking-wide);
}
/* Each spec is one item. Without this a two-word spec broke across lines and the
   8px row gap let it collide with the item beside it. */
.build-copy .spec > * { white-space: nowrap; }
.dark .build-copy .spec { border-top-color: var(--pw-line-dark); color: var(--pw-ink-400); }

@media (max-width: 900px) {
  .build { grid-template-columns: 1fr; gap: var(--pw-space-8); }
  .build-copy { padding-top: 0; }
  .build:nth-child(even) .build-copy { order: 0; }
  .builds { gap: var(--pw-space-11); }
  .shot.crop .win { max-height: var(--shot-h-sm, 300px); }
  .shot.crop .win img, .shot.crop.tight .win img, .shot.crop.wide .win img { width: 150%; }
}

/* =========================================================
   PROSE EMPHASIS
   One rule for <strong> in body copy, everywhere on the site.
   Emphasis is a weight-and-ink lift only — never a color change,
   never a highlight, never gold. Three separate declarations used
   to cover the hero sub, case-study body, and founder bio, which
   left every other paragraph on browser-default bold.
   Component labels that happen to use <strong> (the nav panel)
   opt out by being more specific.
   ========================================================= */
.light p strong, .light li strong { color: var(--pw-ink); font-weight: 600; }
.dark p strong, .dark li strong { color: var(--pw-head-dark); font-weight: 600; }

/* =========================================================
   FOUNDER
   ========================================================= */
.founder--top { margin-top: var(--pw-space-11); }
.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--pw-space-12); align-items: center; }
.founder-photo {
  border-radius: var(--pw-radius-card); overflow: hidden;
  border: 1px solid var(--pw-line-light);
  background: var(--pw-ink);
}
.dark .founder-photo { border-color: rgba(242,235,221,0.14); }
.founder-photo img { display: block; width: 100%; height: auto; }
.founder h2 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 62px); line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight); margin: var(--pw-space-5) 0 0;
}
/* Credential chips. A single ·-separated run wrapped mid-item and read as one
   long string; discrete chips let each credential land on its own. */
.founder .creds {
  margin: var(--pw-space-6) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--pw-space-3);
}
.founder .creds li {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-verm);
  border: 1px solid rgba(184,68,32,0.28);
  border-radius: var(--pw-radius-pill);
  padding: 6px 12px; white-space: nowrap;
}
.founder .creds li:first-child {
  background: var(--pw-verm); color: var(--pw-ink-050); border-color: transparent;
}
.dark .founder .creds li { color: var(--pw-gold); border-color: rgba(232,163,61,0.30); }
.dark .founder .creds li:first-child { background: var(--pw-gold); color: var(--pw-ink); border-color: transparent; }
.founder .bio {
  margin: var(--pw-space-7) 0 0; font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed); max-width: 52ch; color: var(--pw-body);
}
.dark .founder .bio { color: var(--pw-cream); }
/* Collapse and photo cap MUST share a breakpoint — a single-column grid with an
   uncapped photo stretches it to the full wrap width. */
@media (max-width: 1000px) {
  .founder { grid-template-columns: 1fr; gap: var(--pw-space-8); }
  .founder-photo { max-width: 320px; }
}

/* ---------------------------------------------------------------
   FOOTER — CONVERT VARIANT
   Convert pages carry no site navigation, in the footer or the nav.
   Paid traffic arrives with one question; every other link is an exit.
   Brand statement, the single CTA, legal. Nothing else.
   --------------------------------------------------------------- */
/* Convert footer: one line, sized to its content. Earlier versions kept a
   brand paragraph and a second CTA here, which left a dead middle no matter how
   the columns were arranged — the fix was removing the content, not re-laying
   it out. Legal links stay quiet: they are compliance, not navigation. */
/* The footer element carries its own 80/40 vertical padding for the multi-column
   variant; the one-line variant was inheriting that AND adding its own, which
   left the band top-heavy. Convert pages let .f-rule own the padding outright. */
.register-convert footer, .register-funnel footer { padding: 0; }

/* ---------------------------------------------------------------
   CONVERT NAV — jump links
   The register rule bars OUTBOUND nav on a paid landing page; these
   are in-page anchors, so they scroll rather than leak. Kept quiet
   in mono so the CTA is still the only thing that looks clickable,
   and dropped entirely on narrow screens where the CTA must win.
   --------------------------------------------------------------- */
/* Dropped the `nav` ancestor from these six selectors: the jump list is a component,
   not a property of one element, and requiring `nav` meant it could not be rendered
   anywhere else — including the component check. Every existing usage sits inside a nav
   and still matches; this is a strict superset. */
.register-funnel .jump { display: none; }
.register-convert .jump { display: flex; align-items: center; gap: var(--pw-space-7); margin-left: var(--pw-space-10); margin-right: auto; }
.register-convert .jump a {
  font-family: var(--pw-font-mono); font-size: 11px;
  letter-spacing: var(--pw-tracking-wide); text-transform: uppercase;
  color: var(--pw-ink-400); text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color var(--pw-dur-fast) var(--pw-ease), border-color var(--pw-dur-fast) var(--pw-ease);
}
.register-convert .jump a:hover { color: var(--pw-head-dark); border-bottom-color: var(--pw-gold); }
.register-convert .jump a:focus-visible { outline: 3px solid var(--pw-verm-lift); outline-offset: 3px; }
/* Anchored sections must clear the fixed nav — both registers, since the
   express nav is fixed too. Exactly the nav height and not a pixel more:
   any extra leaves a sliver of the PREVIOUS section showing above the
   target, which reads as a gap. Sections carry their own top padding, so
   the breathing room is already there. */
:target, section[id], [data-anchor] { scroll-margin-top: var(--pw-nav-h); }
/* Smooth only when the visitor hasn't asked for less motion. Jump links are
   navigation, so an instant jump is the correct fallback, not a degraded one. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* The jump links do not fit the bar below 1081px, but hiding them outright
   left a paid visitor on a phone with no way to move around the page they
   landed on. Below that width they collapse into the same burger the express
   nav uses — showing the page's own anchors, never the express links, so the
   convert register's one-destination rule still holds. */
@media (max-width: 1080px) {
  .register-convert nav { flex-wrap: wrap; }
  .register-convert nav .burger { display: inline-flex; }
  .register-convert nav .jump {
    display: none;
    order: 3; flex-basis: 100%;
    flex-direction: column; align-items: flex-start;
    gap: var(--pw-space-5);
    margin-left: 0; margin-right: 0;
    padding: var(--pw-space-6) 0 var(--pw-space-3);
    margin-top: var(--pw-space-5);
    border-top: 1px solid var(--pw-line-dark);
  }
  .register-convert nav.open .jump { display: flex; }
  .register-convert nav .jump a { font-size: var(--pw-text-md); border-bottom: 0; }
  /* The jump component outside a nav keeps its original hidden behaviour. */
  .register-convert .jump:not(nav .jump) { display: none; }
}
.f-rule {
  display: flex; align-items: center; gap: var(--pw-space-9);
  flex-wrap: wrap;
  padding: var(--pw-space-10) 0;
}
.f-rule .lockup {
  display: flex; align-items: center; gap: 9px; flex-wrap: nowrap;
  margin-right: auto;
}
.f-rule .lockup img { height: 24px; width: auto; }
.f-rule .lockup span {
  font-family: var(--pw-font-logo); font-weight: 700; font-size: 18px;
  line-height: 1; color: var(--pw-head-dark); letter-spacing: -0.005em;
  white-space: nowrap;
}
.f-links { display: flex; gap: var(--pw-space-7); }
.f-links a {
  color: var(--pw-cream-dim); text-decoration: none;
  font-family: var(--pw-font-mono); font-size: 11px;
  letter-spacing: var(--pw-tracking-wide);
  transition: color var(--pw-dur-fast) var(--pw-ease);
}
.f-links a:hover { color: var(--pw-head-dark); }
.f-cr {
  font-family: var(--pw-font-mono); font-size: 11px;
  letter-spacing: var(--pw-tracking-wide); color: var(--pw-ink-500);
}
@media (max-width: 700px) {
  .f-rule { gap: var(--pw-space-6); }
  .f-rule .lockup { margin-right: 0; flex: 1 0 100%; }
}

/* ---------------------------------------------------------------
   PLAN CHART
   A timeline as a chart, not a list. Bars sit on a shared week grid
   so duration is legible at a glance, and the sunrise builds across
   the stages as heat — barely warm at the audit, fully lit at launch.

   Per page:  .plan--4 / --8 / --12 / --16 / --24   picks the week scale
              .chart-row .bar { --heat: .5 }  sets that stage's heat
              .bar--lit          flips the label to ink on hot bars
   Bars are positioned with grid-column so a stage that spans weeks
   3–6 is literally three columns wide.
   --------------------------------------------------------------- */
.plan { margin-top: var(--pw-space-11); --meta: 190px; }
/* Two hard rules here, both learned the hard way:
   1. repeat() cannot take a custom property as its count — a var() there
      invalidates the whole declaration and the grid collapses to one column.
      So each week scale gets its own class with a literal count.
   2. var(--meta) always carries a fallback. If the custom property fails to
      resolve for any reason the entire grid-template-columns is dropped at
      computed-value time, with the same collapse and no error anywhere. */
.plan-scale, .chart-row {
  display: grid;
  grid-template-columns: var(--meta, 190px) repeat(12, minmax(0, 1fr));
  gap: 0 4px; align-items: center;
}
.plan--4 .plan-scale, .plan--4 .chart-row {
  grid-template-columns: var(--meta, 190px) repeat(4, minmax(0, 1fr));
}
.plan--24 .plan-scale, .plan--24 .chart-row {
  grid-template-columns: var(--meta, 190px) repeat(24, minmax(0, 1fr));
}
.plan-scale { padding-bottom: var(--pw-space-3); border-bottom: 1px solid var(--pw-ink-200); }
.plan-scale b {
  font-family: var(--pw-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: var(--pw-tracking-kicker); color: var(--pw-muted); text-align: center;
}
.chart-row { padding: var(--pw-space-3) 0; }
.chart-row + .chart-row { border-top: 1px solid rgba(20,17,14,0.06); }
.chart-lbl { grid-column: 1; display: grid; gap: 1px; padding-right: var(--pw-space-6); }
.chart-lbl .wk {
  font-family: var(--pw-font-mono); font-size: 10px; color: var(--pw-verm);
  text-transform: uppercase; letter-spacing: var(--pw-tracking-kicker);
}
.chart-lbl .nm { font-size: var(--pw-text-sm); font-weight: 500; color: var(--pw-ink); line-height: 1.35; }

.bar {
  --heat: 0.4;
  height: 44px; border-radius: var(--pw-radius-chip);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--pw-space-5);
  background:
    linear-gradient(100deg,
      rgba(232,163,61,  calc(var(--heat) * 1))    0%,
      rgba(224,123,57,  calc(var(--heat) * 0.82)) 55%,
      rgba(214, 96, 44, calc(var(--heat) * 0.64)) 100%),
    var(--pw-ink-soft);
}
/* A hairline of full-strength ramp on the trailing edge, so even the coolest
   bar reads as part of the sunrise rather than a grey block. */
.bar::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pw-grad-action);
}
.bar .dur {
  font-family: var(--pw-font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-cream-dim); white-space: nowrap; position: relative; z-index: 1;
}
.bar--lit .dur { color: var(--pw-ink); }

.plan-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pw-space-7);
  margin-top: var(--pw-space-10); padding-top: var(--pw-space-9);
  border-top: 1px solid var(--pw-ink-200);
}
.plan-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-card .stg {
  display: block; margin-bottom: var(--pw-space-3);
  font-family: var(--pw-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--pw-tracking-kicker);
  color: var(--pw-verm);
}
.plan-card h3 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: var(--pw-text-xl); margin: 0 0 var(--pw-space-3);
  letter-spacing: var(--pw-tracking-tight); line-height: var(--pw-leading-snug);
  color: var(--pw-ink);
}
.plan-card p { margin: 0 0 var(--pw-space-5); color: var(--pw-muted); font-size: var(--pw-text-sm); line-height: var(--pw-leading-relaxed); }
.plan-card .out {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pw-font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--pw-tracking-kicker); color: var(--pw-ink);
}
.plan-card .out::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--pw-grad-action);
}
@media (max-width: 1000px) {
  .plan-cards, .plan-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-8); }
}
/* ---------------------------------------------------------------
   PLAN CHART — narrow screens
   A proportional gantt cannot survive a phone: a three-week bar in a
   twenty-four-week scale is twenty pixels wide, and the duration label
   inside it clips. So the row stacks — label on its own line, bar
   full-bleed underneath, still proportional — and the duration chip
   is dropped because the label already reads "WEEKS 7–20".
   The stage cards become a divided list so four of them stop reading
   as one block of text.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  /* The gantt does not survive a phone. Its bars are placed by absolute week
     column, so on a 24-week plan at 390px a three-week stage is a 40px sliver
     and a late stage sits jammed against the right edge — the chart stops
     encoding duration and starts looking broken. Rather than shrink it, the
     chart is dropped and the stage cards below carry the process: each one
     already names its stage AND its weeks in words, which is the same
     information the bars were failing to draw. */
  .plan-scale, .chart-row { display: none; }
  .plan { --meta: 0px; margin-top: var(--pw-space-9); }

  .plan-cards, .plan-cards--3 {
    grid-template-columns: 1fr; gap: 0;
    margin-top: var(--pw-space-9); padding-top: 0; border-top: none;
  }
  .plan-card {
    padding: var(--pw-space-8) 0;
    border-top: 1px solid var(--pw-ink-200);
  }
  .plan-card p { max-width: 46ch; }
}

/* An eyebrow directly above a founder block had no breathing room — the label
   read as if it belonged to the photo rather than the section. */
.pw-eyebrow + .founder { margin-top: var(--pw-space-10); }
/* The kicker labels the headline, but sat flush against it — no gap on any hero. */
.pw-eyebrow + h1 { margin-top: var(--pw-space-6); }
/* Form and funnel heroes carry the label closer to the eye than a service hero
   does — one wrapper, no shot beside it — so 20px still read as touching.
   These three page shells get the next step up. */
.fx .pw-eyebrow + h1, .bk .pw-eyebrow + h1, .ct .pw-eyebrow + h1 { margin-top: var(--pw-space-7); }

/* ---------------------------------------------------------------
   FAQ — shared convert-page component
   Real <details> so it works without JS and the content is in the
   DOM for crawlers. Lives here rather than page-local because a
   page-local copy has already been lost twice to CSS surgery.
   --------------------------------------------------------------- */
.faq { margin-top: var(--pw-space-11); }
.faq details { border-top: 1px solid var(--pw-line-light); }
.faq details:last-of-type { border-bottom: 1px solid var(--pw-line-light); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--pw-space-8) 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--pw-space-7); align-items: center;
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(19px, 1.8vw, 26px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-ink);
  transition: color var(--pw-dur-fast) var(--pw-ease);
}
.faq summary:hover { color: var(--pw-verm); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: ""; justify-self: end; width: 11px; height: 11px;
  border-right: 1.5px solid var(--pw-verm); border-bottom: 1.5px solid var(--pw-verm);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--pw-dur-base) var(--pw-ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(2px); }
.faq details p {
  margin: 0 0 var(--pw-space-8); max-width: 72ch;
  color: var(--pw-muted); line-height: var(--pw-leading-relaxed);
}
.faq summary:focus-visible { outline: 3px solid var(--pw-verm); outline-offset: 3px; }

/* ---------------------------------------------------------------
   ACT RULE
   Two consecutive acts on the same ground run together with nothing
   marking the seam. A hairline that fades out at both ends divides
   them without introducing a hard edge the system doesn't otherwise
   use — the same fade logic as the sunrise.
   --------------------------------------------------------------- */
.act-rule { padding: 0; }
.act-rule hr {
  border: none; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--pw-line-dark) 22%, var(--pw-line-dark) 78%, transparent);
}
.light .act-rule hr, .act-rule.on-light hr {
  background: linear-gradient(90deg, transparent, var(--pw-line-light) 22%, var(--pw-line-light) 78%, transparent);
}
/* A single gold point at the centre — the one mark that says the
   sunrise is still running underneath. */
.act-rule.marked { position: relative; }
.act-rule.marked::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--pw-gold); opacity: 0.85;
}

/* ---------------------------------------------------------------
   VOICE CARDS
   Overheard lines from the buyer, not testimonials. Ink cards on a
   paper ground so the trio reads as the focal point of its section.
   --------------------------------------------------------------- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-6); margin-top: var(--pw-space-11); }
.voice {
  background: var(--pw-ink); border-radius: var(--pw-radius-card);
  padding: var(--pw-space-8); box-shadow: var(--pw-shadow-lg);
  display: grid; align-content: start;
}
.voice .ix {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-gold); margin-bottom: var(--pw-space-6);
}
.voice .said {
  margin: 0 0 var(--pw-space-5); font-family: var(--pw-font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2vw, 28px); line-height: 1.16;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark); text-wrap: pretty;
}
.voice p { margin: 0; color: var(--pw-cream-dim); font-size: var(--pw-text-sm); line-height: var(--pw-leading-relaxed); }

@media (max-width: 1000px) {
  .voices { grid-template-columns: 1fr; }
  .leo { grid-template-columns: 1fr; gap: var(--pw-space-10); }
}


/* =========================================================
   HERO — shared across every page
   ---------------------------------------------------------
   Was copy-pasted into 7 files with per-page tuning. The
   tuning is real (measure and scale differ by page), so the
   knobs are custom properties set on .hero, not forked
   selectors. Override variables, never the rules.
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--pw-nav-h) + var(--hero-top, clamp(30px, 4vw, 64px)));
  padding-bottom: var(--hero-bot, clamp(44px, 5vw, 80px));
}
.hero-grid {
  display: grid;
  grid-template-columns: var(--hero-cols, minmax(0, 1.05fr) minmax(0, 0.95fr));
  column-gap: var(--hero-col-gap, var(--pw-space-11)); align-items: var(--hero-align, center);
}
.hero-shot { align-self: stretch; display: grid; align-content: center; }
.hero h1 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: var(--hero-h1, clamp(40px, 4.8vw, 68px));
  line-height: var(--hero-h1-lh, 1.02);
  letter-spacing: var(--hero-h1-ls, var(--pw-tracking-tight));
  /* Service heroes all open eyebrow → h1. A zero default put the headline
     hard against the kicker on any page that forgot to set this, so the gap
     is the default and 0 is the opt-out. */
  margin: var(--hero-h1-mt, var(--pw-space-6)) 0 0;
  color: var(--pw-head-dark); max-width: var(--hero-h1-measure, 20ch);
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--pw-gold); }
.hero .sub {
  margin: var(--hero-sub-mt, var(--pw-space-7)) 0 0;
  max-width: var(--hero-sub-measure, 50ch);
  font-size: var(--hero-sub, clamp(16px, 1.3vw, 18px));
  line-height: var(--pw-leading-relaxed); color: var(--pw-cream-dim);
}
.hero .actions { display: flex; gap: var(--pw-space-4); flex-wrap: wrap; margin-top: var(--hero-actions-mt, var(--pw-space-8)); }
.hero .under {
  margin: var(--pw-space-6) 0 0; max-width: var(--hero-under-measure, 46ch);
  font-family: var(--pw-font-mono); font-size: var(--hero-under-size, 11px); line-height: 1.9;
  letter-spacing: var(--pw-tracking-wide); color: var(--hero-under-color, var(--pw-ink-400));
}
.hero .under b { color: var(--pw-gold); font-weight: 500; }
.hero .creds {
  margin: var(--hero-creds-mt, var(--pw-space-9)) 0 0; padding-top: var(--pw-space-6);
  border-top: 1px solid var(--pw-line-dark);
  font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
  letter-spacing: var(--pw-tracking-wide); text-transform: uppercase;
  color: var(--pw-gold); line-height: 1.6; white-space: nowrap;
}
@media (max-width: 1000px) {
  /* space-9 was set by hand on three of five service pages and forgotten on
     the rest — it is the right stacked gap, so it is the default now. */
  .hero-grid { grid-template-columns: 1fr; row-gap: var(--hero-row-gap, var(--pw-space-9)); }
  .hero .creds { white-space: normal; }
}

/* ---------------------------------------------------------
   BEFORE / AFTER — two columns, cool left, sunrise right.
   .ba--quote is the display-type variant (Airtable): the two
   sides are overheard sentences rather than bullets.
   --------------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pw-space-7); margin-top: var(--pw-space-11); }
.ba-col { border-radius: var(--pw-radius-card); padding: var(--pw-space-8); }
.ba-col.before { background: rgba(242,235,221,0.04); border: 1px solid var(--pw-line-dark); }
.ba-col.after { background: var(--pw-ink-soft); border: 1px solid rgba(232,163,61,0.22); }
.ba-col h3, .ba-col h4 {
  margin: 0 0 var(--pw-space-5); font-family: var(--pw-font-mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--pw-tracking-kicker);
}
.ba-col.before h3, .ba-col.before h4 { color: var(--pw-ink-400); }
.ba-col.after h3, .ba-col.after h4 { color: var(--pw-gold); }
.ba-col p { margin: 0; font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed); }
.ba-col.before p { color: var(--pw-cream-dim); }
.ba-col.after p { color: var(--pw-cream); }
.ba--quote .ba-col { padding: var(--pw-space-9); }
.ba--quote .ba-col.before { background: rgba(0,0,0,0.28); }
.ba--quote .ba-col.after { color: var(--pw-cream); }
.ba--quote .ba-col.before h3, .ba--quote .ba-col.before h4 { color: var(--pw-ink-500); }
.ba--quote .ba-col p { font-family: var(--pw-font-display); font-size: var(--pw-text-lg); line-height: var(--pw-leading-snug); }
.ba--quote .ba-col.after p { color: var(--pw-head-dark); }
@media (max-width: 1000px) { .ba { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   TURN — the pivot line that closes a dark section. Styles
   the block itself and a <q> child alike, since pages differ
   on which element carries the sentence.
   --------------------------------------------------------- */
.turn { margin-top: var(--turn-mt, var(--pw-space-12)); }
/* Ground-aware, like every other type component. This was hard-coded to the
   on-ink heading colour and rendered invisible the first time a turn was used
   on paper. Gold is forbidden as type on light — vermilion is its counterpart. */
.turn, .turn q {
  display: block; quotes: none;
  font-family: var(--pw-font-display); font-style: italic; font-weight: 400;
  font-size: var(--turn-size, clamp(26px, 3.4vw, 46px));
  line-height: var(--pw-leading-snug); letter-spacing: var(--pw-tracking-tight);
  color: var(--pw-ink); max-width: var(--turn-measure, 28ch); text-wrap: pretty;
}
.turn em, .turn q em { font-style: italic; color: var(--pw-verm); }
.dark .turn, .dark .turn q { color: var(--pw-head-dark); }
.dark .turn em, .dark .turn q em { color: var(--pw-gold); }


/* =========================================================
   CASE STUDY — one structure drives all eight studies:
   hero, client, challenge, solution, results, quote, related, CTA.
   Choreography is allowed; the CTA is a single free-consultation
   button and never pricing.
   ========================================================= *//* ---- Hero ---- */
.cs-hero { padding-top: calc(var(--pw-nav-h) + clamp(36px, 5vw, 80px)); padding-bottom: clamp(48px, 6vw, 88px); }
.cs-meta {
  display: flex; flex-wrap: wrap; gap: var(--pw-space-3) var(--pw-space-6);
  font-family: var(--pw-font-mono); font-size: 10px; line-height: 1.7;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-ink-400); margin: 0 0 var(--pw-space-8);
}
.cs-meta span { display: inline-flex; align-items: center; gap: var(--pw-space-4); }
/* The separator belongs to the item BEFORE it. Rendered by the following
   item, a wrap leaves the row starting with a stray "·". */
.cs-meta span:not(:last-child)::after { content: "·"; color: var(--pw-ink-500); margin-left: var(--pw-space-4); }
.cs-hero h1 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(42px, 6vw, 92px); line-height: 0.99;
  letter-spacing: -0.03em; margin: 0;
  color: var(--pw-head-dark); max-width: 20ch; text-wrap: balance;
}
.cs-hero h1 em { font-style: italic; color: var(--pw-gold); }
.cs-client-logo {
  margin-top: var(--pw-space-11); padding-top: var(--pw-space-7);
  border-top: 1px solid var(--pw-line-dark);
  display: flex; align-items: center; gap: var(--pw-space-8); flex-wrap: wrap;
}
.cs-client-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.75; }
.cs-client-logo p {
  margin: 0; font-family: var(--pw-font-mono); font-size: 10px; line-height: 1.8;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-ink-400);
}
@media (max-width: 760px) {
  .cs-hero { padding-bottom: clamp(36px, 8vw, 56px); }
  .cs-hero h1 { font-size: clamp(34px, 8.4vw, 52px); letter-spacing: -0.02em; }
  .cs-client-logo { margin-top: var(--pw-space-9); padding-top: var(--pw-space-6); }
}

/* ---- Narrative body ---- */
.cs-body { max-width: 68ch; }
.cs-body p { font-size: var(--pw-text-lg); line-height: var(--pw-leading-relaxed); margin: 0 0 var(--pw-space-7); }
.cs-body p:last-child { margin-bottom: 0; }
.light .cs-body p { color: var(--pw-body); }
.dark .cs-body p { color: var(--pw-cream); }

/* ---- Pain list ---- */
.pains { margin: var(--pw-space-11) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.pains li {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--pw-space-6);
  align-items: baseline; padding: var(--pw-space-6) 0;
  border-top: 1px solid var(--pw-line-dark);
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark);
}
.pains li:last-child { border-bottom: 1px solid var(--pw-line-dark); }
.pains li::before {
  content: attr(data-n); font-family: var(--pw-font-mono);
  font-size: var(--pw-text-xs); letter-spacing: var(--pw-tracking-wide);
  color: var(--pw-gold);
}
.breaking {
  margin: var(--pw-space-11) 0 0; font-family: var(--pw-font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 46px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark); max-width: 26ch;
}
.breaking em { font-style: italic; color: var(--pw-gold); }

/* ---- Solution pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(var(--pillar-cols, 3), minmax(0, 1fr)); gap: var(--pw-space-6); margin-top: var(--pw-space-11); }
.pillar {
  background: var(--pw-ink); border-radius: var(--pw-radius-card);
  padding: var(--pw-space-8); box-shadow: var(--pw-shadow-lg);
  display: grid; align-content: start;
}
.pillar .ix {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-gold); margin-bottom: var(--pw-space-6);
}
.pillar h3 {
  margin: 0 0 var(--pw-space-4); font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(22px, 2.1vw, 29px); line-height: 1.16;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark);
}
.pillar p { margin: 0; color: var(--pw-cream-dim); font-size: var(--pw-text-sm); line-height: var(--pw-leading-relaxed); }

/* ---- Results ---- */
.pillars--2 { --pillar-cols: 2; }
.pillars--4 { --pillar-cols: 4; gap: var(--pw-space-5); }
.pillars--4 .pillar { padding: var(--pw-space-7); }
.results { margin-top: var(--pw-space-11); padding: 0; list-style: none; display: grid; gap: 0; }
/* The results are the payoff of the whole page, so they take the display
   face rather than body sans — a list of outcomes, set like headlines.
   Tabular figures keep the before → after numbers in vertical column. */
.results li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--pw-space-5);
  padding: var(--pw-space-7) 0; border-top: 1px solid var(--pw-line-light);
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 30px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--pw-ink); text-wrap: pretty;
}
.dark .results li { color: var(--pw-head-dark); }
.results li:last-child { border-bottom: 1px solid var(--pw-line-light); }
.results li::before {
  content: "→"; color: var(--pw-verm);
  font-family: var(--pw-font-sans); font-size: var(--pw-text-lg);
  line-height: 1.5;
}
.dark .results li::before { color: var(--pw-verm-lift); }
@media (max-width: 700px) {
  .results li { grid-template-columns: 20px 1fr; gap: var(--pw-space-4); font-size: clamp(19px, 5vw, 24px); }
}
.expansion {
  margin-top: var(--pw-space-11); padding: var(--pw-space-9);
  background: var(--pw-ink); border-radius: var(--pw-radius-xl);
  box-shadow: var(--pw-shadow-lg);
}
.expansion .lbl {
  margin: 0 0 var(--pw-space-5); font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-gold);
}
.expansion p {
  margin: 0; font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(23px, 2.6vw, 36px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark); max-width: 34ch;
}
.expansion p em { font-style: italic; color: var(--pw-gold); }

/* ---- Quote ---- */
/* Eighteen lines of unbroken display italic is a wall, not a quote. Same words,
   three registers: the setup reads as body, the sentence that actually sells
   the work takes display scale, the close returns to body. */
.cs-quote { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr); gap: var(--pw-space-12); align-items: start; }
/* The measure belongs to each register below, not to the column — capping the
   body here squeezed the quote into a third of its own track. */
.q-body { display: grid; gap: var(--pw-space-7); }

/* No portrait: there is no second column to fill, so the quote stops
   pretending to be a two-column layout and becomes a centred pull quote —
   the whole block on the page's axis, attribution signed beneath it. */
.cs-quote--sig {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pw-space-10);
  max-width: 68ch; margin-inline: auto; text-align: center;
}
.cs-quote--sig .q-body { justify-items: center; gap: var(--pw-space-8); }
.cs-quote--sig .q-setup,
.cs-quote--sig .q-close { max-width: 60ch; }
.cs-quote--sig blockquote {
  max-width: 30ch; margin-inline: auto;
  font-size: clamp(30px, 3.5vw, 50px);
}
.cs-quote--sig .attr {
  justify-items: center; gap: var(--pw-space-4);
  padding-top: var(--pw-space-7);
}
/* The section's eyebrow has to come with it — a left-flushed kicker over a
   centred quote reads as a mistake. Set on the section, not the block,
   because the eyebrow is the quote's sibling. */
.act--centered .pw-eyebrow { text-align: center; }
@media (max-width: 700px) {
  .cs-quote--sig { text-align: left; }
  .cs-quote--sig .q-body, .cs-quote--sig .attr { justify-items: start; }
  .act--centered .pw-eyebrow { text-align: left; }
}
.cs-quote blockquote {
  margin: 0; font-family: var(--pw-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.1vw, 44px); line-height: 1.14;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark);
  max-width: 26ch;
}
.q-setup, .q-close {
  margin: 0; max-width: 52ch;
  font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed);
  color: var(--pw-cream-dim);
}
.cs-quote .attr {
  display: grid; gap: var(--pw-space-6);
  padding-top: var(--pw-space-6); border-top: 1px solid var(--pw-line-dark);
}
/* The dashed ring is the EMPTY state. Once a real portrait lands the frame
   goes quiet — a hairline, not a placeholder marker. */
.cs-quote .portrait {
  width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: rgba(242,235,221,0.05);
  border: 1.5px dashed var(--pw-verm-lift);
  display: grid; place-items: center; text-align: center;
}
.cs-quote .portrait:has(img) { border: 1px solid var(--pw-line-dark); }
.cs-quote .portrait span {
  font-family: var(--pw-font-mono); font-size: 10px; line-height: 2;
  letter-spacing: var(--pw-tracking-wide); color: var(--pw-verm-lift);
}
.cs-quote .portrait img { width: 100%; height: 100%; object-fit: cover; }
.cs-quote .attr .nm { margin: 0; font-family: var(--pw-font-display); font-size: var(--pw-text-2xl); color: var(--pw-head-dark); }
@media (max-width: 900px) { .cs-quote { grid-template-columns: minmax(0, 1fr); gap: var(--pw-space-9); } }
.cs-quote .attr .ro { margin: var(--pw-space-2) 0 0; font-size: var(--pw-text-sm); color: var(--pw-cream-dim); line-height: var(--pw-leading-relaxed); }

/* ---- Related ---- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pw-space-6); margin-top: var(--pw-space-10); }
.rel {
  background: var(--pw-surface-elev); border: 1px solid var(--pw-line-light);
  border-radius: var(--pw-radius-card); padding: var(--pw-space-8);
  text-decoration: none; display: grid; align-content: start; gap: var(--pw-space-4);
  transition: transform var(--pw-dur-base) var(--pw-ease-emphasis), box-shadow var(--pw-dur-base) var(--pw-ease), border-color var(--pw-dur-base) var(--pw-ease);
}
.rel:hover { transform: translateY(-6px); box-shadow: var(--pw-shadow-lg); border-color: var(--pw-gold); }
/* Convert pages render .rel as an unlinked div — no exits allowed. A div gets
   the resting card, never the lift or the gold edge, so the hover never promises
   a click that cannot happen. */
div.rel:hover { transform: none; box-shadow: var(--pw-shadow-md); border-color: var(--pw-line-light); }

.rel .ix { font-family: var(--pw-font-mono); font-size: 10px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-verm); }
.rel h3 { margin: 0; font-family: var(--pw-font-display); font-weight: 400; font-size: var(--pw-text-2xl); line-height: var(--pw-leading-snug); letter-spacing: var(--pw-tracking-tight); color: var(--pw-ink); }
.rel p { margin: 0; font-size: var(--pw-text-sm); color: var(--pw-muted); line-height: var(--pw-leading-relaxed); }

@media (max-width: 1000px) {
  .pillars, .related { grid-template-columns: 1fr; }
  .cs-quote { grid-template-columns: 1fr; gap: var(--pw-space-9); }
  .q-body { max-width: none; }
}


/* =========================================================
   LEGAL / PROSE
   Privacy, terms, accessibility. Long-form reading, one column,
   no choreography. The measure is the whole design: 68ch and a
   clear heading hierarchy, so a visitor can actually find the
   clause they came for.
   ========================================================= */
/* A section whose content is a single head block. Full act padding around
   two lines of type reads as a missing section, not as breathing room. */
.act-short { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }

.legal-hero { padding-top: calc(var(--pw-nav-h) + clamp(40px, 5vw, 80px)); padding-bottom: clamp(32px, 4vw, 56px); }
.legal-hero h1 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 76px); line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight); margin: var(--pw-space-5) 0 0;
  color: var(--pw-head-dark); max-width: 20ch;
}
.legal-hero .meta {
  margin: var(--pw-space-8) 0 0; padding-top: var(--pw-space-6);
  border-top: 1px solid var(--pw-line-dark);
  display: flex; gap: var(--pw-space-8) var(--pw-space-9); flex-wrap: wrap;
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-ink-400);
}
.legal-hero .meta b { color: var(--pw-gold); font-weight: 500; }

.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-ink);
  margin: var(--pw-space-12) 0 var(--pw-space-5);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--pw-font-sans); font-weight: 600; font-size: var(--pw-text-lg);
  color: var(--pw-ink); margin: var(--pw-space-9) 0 var(--pw-space-4);
}
.prose p, .prose li { font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed); color: var(--pw-body); }
.prose p { margin: 0 0 var(--pw-space-6); }
.prose ul, .prose ol { margin: 0 0 var(--pw-space-6); padding-left: var(--pw-space-7); display: grid; gap: var(--pw-space-4); }
.prose li::marker { color: var(--pw-verm); }
.prose a { color: var(--pw-verm); }
.prose a:hover { color: var(--pw-ink); }
.prose dl { margin: 0 0 var(--pw-space-6); display: grid; gap: var(--pw-space-5); }
.prose dt { font-weight: 600; color: var(--pw-ink); font-size: var(--pw-text-md); }
.prose dd { margin: var(--pw-space-2) 0 0; font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed); color: var(--pw-body); }
.prose .last { margin-top: var(--pw-space-12); padding-top: var(--pw-space-7); border-top: 1px solid var(--pw-line-light); font-size: var(--pw-text-sm); color: var(--pw-muted); }

/* In-page contents for the longer documents. */
.legal-toc { margin: 0 0 var(--pw-space-11); padding: 0; list-style: none; display: grid; gap: var(--pw-space-3); }
.legal-toc a {
  font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
  letter-spacing: var(--pw-tracking-wide); color: var(--pw-muted); text-decoration: none;
}
.legal-toc a:hover { color: var(--pw-verm); }


/* ============================================================================
   FORM CARD  —  the elevated light card that holds a form on a dark ground.
   Contact and Free Consultation each carried a private copy of this under
   different names (.form-shell/.form-body vs .card/.bk-form) with different
   values, which is how the two forms drifted apart. One component now, with
   custom properties for the only deltas that were ever real.
   ========================================================================= */
.form-card {
  background: var(--pw-surface-elev); border-radius: var(--pw-radius-xl);
  box-shadow: var(--pw-shadow-xl); overflow: hidden;
}
.form-card > .head {
  /* margin:0 because .head is ALSO the section-header component, whose
     margin-bottom: var(--pw-space-12) was leaking in here and opening ~78px of
     dead white space under the title bar of every form card on the site. */
  margin: 0;
  display: flex; align-items: center; gap: var(--pw-space-4);
  padding: var(--pw-space-5) var(--pw-space-7);
  border-bottom: 1px solid var(--pw-line-light); background: var(--pw-ink-100);
}
.form-card > .head .t {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-muted);
  white-space: nowrap;
}
.form-card > .head .dur {
  margin-left: auto; font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-verm);
  white-space: nowrap; flex: none;
}
.form-card > form, .form-card > .body {
  padding: var(--form-pad, var(--pw-space-8)); display: grid; gap: var(--pw-space-6);
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pw-space-6); }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }

.fld { display: grid; gap: 7px; }
.fld label {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-muted); display: flex; align-items: baseline; gap: 6px;
}
.fld .req {
  color: var(--pw-verm); font-size: 10px;
  letter-spacing: var(--pw-tracking-wide); text-transform: uppercase;
}
.fld input, .fld select, .fld textarea {
  font-family: var(--pw-font-sans); font-size: var(--pw-text-md);
  color: var(--pw-ink); background: var(--pw-surface);
  border: 1px solid var(--pw-line-strong); border-radius: var(--pw-radius-chip);
  padding: 13px 14px; width: 100%;
  transition: border-color var(--pw-dur-fast) var(--pw-ease), box-shadow var(--pw-dur-fast) var(--pw-ease);
}
.fld textarea { min-height: var(--fld-textarea-h, 104px); resize: vertical; line-height: var(--pw-leading-relaxed); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--pw-verm); box-shadow: 0 0 0 3px rgba(184,68,32,0.14);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--pw-muted); }
/* An :invalid border on an untouched required field paints the form red before
   the visitor has typed anything. Neutral until they actually submit. */
.fld input:required:invalid, .fld textarea:required:invalid { border-color: var(--pw-line-strong); }
.fld select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--pw-muted) 50%), linear-gradient(135deg, var(--pw-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.form-actions { display: grid; gap: var(--pw-space-4); justify-items: start; margin-top: var(--pw-space-2); }
.form-actions .pw-btn { width: 100%; justify-content: center; }
/* --pw-faint reads 3.5:1 on paper — legitimate on ink (5.08:1), short of AA as
   light-ground text, so light-ground labels use --pw-muted (5.03:1) instead. */
.form-note {
  margin: 0; font-family: var(--pw-font-mono); font-size: 10px;
  line-height: 1.9; letter-spacing: var(--pw-tracking-wide); color: var(--pw-muted);
}

/* ============================================================================
   FUNNEL UTILITY PAGES  —  confirmations, lead magnets, 404.
   All post- or pre-conversion: one job each, full nav so nobody dead-ends.
   ========================================================================= */
.fx { padding-top: calc(var(--pw-nav-h) + var(--pw-space-11)); padding-bottom: var(--pw-space-13); }
.fx-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: var(--pw-space-12); align-items: start; }
@media (max-width: 1000px) { .fx-grid { grid-template-columns: 1fr; gap: var(--pw-space-10); } }
.fx h1, .e404 h1 {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02;
  letter-spacing: var(--pw-tracking-tight); margin: 0; max-width: 18ch; text-wrap: balance;
}
.fx h1 em { font-style: italic; }
/* The ground class and .fx land on the SAME element (class="act ink dark fx"),
   so these must be compound selectors. Written as descendant they silently
   never matched and every pivot word lost its gold. Both forms are listed so
   the rules still hold if .fx is ever nested inside a ground wrapper. */
.dark.fx h1, .dark .fx h1 { color: var(--pw-head-dark); }
.dark.fx h1 em, .dark .fx h1 em { color: var(--pw-gold); }
.light.fx h1 em, .light .fx h1 em { color: var(--pw-verm); }
.fx .sub, .e404 .sub {
  margin: var(--pw-space-7) 0 0; max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 18px); line-height: var(--pw-leading-relaxed);
}
.dark.fx .sub, .dark .fx .sub { color: var(--pw-cream-dim); }
.fx-fine {
  margin: var(--pw-space-9) 0 0; font-family: var(--pw-font-mono);
  font-size: 11px; line-height: 1.9; letter-spacing: var(--pw-tracking-wide); color: var(--pw-ink-400);
}

/* Numbered sequence. Used on confirmations, where the visitor's real question
   is "what happens now" and the answer is inherently ordered. */
.steps { margin: var(--pw-space-10) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; }
.steps > .lbl {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-gold); margin: 0 0 var(--pw-space-5);
}
.steps li {
  counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: var(--pw-space-5);
  padding: var(--pw-space-6) 0; border-top: 1px solid var(--pw-line-dark);
}
.steps li:last-child { border-bottom: 1px solid var(--pw-line-dark); }
.steps li::before {
  content: counter(s, decimal-leading-zero); font-family: var(--pw-font-mono);
  font-size: 11px; letter-spacing: var(--pw-tracking-wide); color: var(--pw-gold); padding-top: 3px;
}
.steps h2, .steps h3 { margin: 0 0 6px; font-family: var(--pw-font-sans); font-size: var(--pw-text-md); font-weight: 600; color: var(--pw-head-dark); }
.steps p { margin: 0; font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed); color: var(--pw-cream-dim); }

/* Onward links. A confirmation with no exit is a dead end; these are the two
   or three places a converted visitor actually wants to go. */
.onward { margin: var(--pw-space-11) 0 0; padding-top: var(--pw-space-7); border-top: 1px solid var(--pw-line-dark); display: grid; gap: var(--pw-space-5); }
/* .steps already closes on a bottom rule; the two together read as a double line. */
.steps + .onward { border-top: none; padding-top: 0; }
.onward .lbl { margin: 0; font-family: var(--pw-font-mono); font-size: 10px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-ink-400); }
.onward .links { display: flex; flex-wrap: wrap; gap: var(--pw-space-7); }
.onward a { color: var(--pw-gold); text-decoration: none; font-weight: 600; font-size: var(--pw-text-sm); }
.onward a:hover { color: var(--pw-head-dark); }

/* What's-inside list for lead magnets. */
.inside { margin: var(--pw-space-10) 0 0; padding: 0; list-style: none; display: grid; }
.inside > .lbl { font-family: var(--pw-font-mono); font-size: 10px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-gold); margin: 0 0 var(--pw-space-5); }
/* Marker is absolutely positioned, NOT a grid/flex column. Any element child
   of a grid or flex li becomes its own track item, so a single <strong> in the
   copy would push the rest of the sentence onto the next line. Positioning the
   marker keeps the list item a normal inline flow that can hold any markup. */
.inside li {
  position: relative; padding: var(--pw-space-5) 0 var(--pw-space-5) 30px;
  border-top: 1px solid var(--pw-line-dark);
  font-size: var(--pw-text-md); line-height: var(--pw-leading-relaxed); color: var(--pw-cream);
}
.inside li:last-child { border-bottom: 1px solid var(--pw-line-dark); }
.inside li::before { content: "→"; position: absolute; left: 0; top: var(--pw-space-5); color: var(--pw-gold); }
.inside li strong { color: var(--pw-head-dark); font-weight: 600; }
/* .inside hard-codes ink-ground colours (cream body, near-white strong). Inside a
   .form-card those land on the card's white surface at ~1.06:1 — invisible. The card
   is a light surface, so it takes the light ground's text colours. */
.form-card .inside li { color: var(--pw-body); border-top-color: var(--pw-line-light); }
.form-card .pw-btn-ghost { color: var(--pw-ink); border-color: rgba(20,17,14,0.28); }
/* The label is a bare text node — an anonymous flex item, which shrinks below its
   max-content width and wraps, stranding the arrow beside two lines. */
.pw-btn, .pw-btn-ghost { white-space: nowrap; }
.form-card .pw-btn-ghost:hover { color: var(--pw-verm); border-color: var(--pw-verm); }
.form-card .inside li:last-child { border-bottom-color: var(--pw-line-light); }
.form-card .inside li strong { color: var(--pw-ink); }
/* The card is a light surface inside a dark act, so every ground-sensitive
   default has to be answered here — links included. tokens.css sets prose links
   on ink to gold at (0,2,1); gold read 2.16:1 on this cream card, so the island
   answers it one class higher rather than relying on file order. */
.dark .form-card :is(p, dd, blockquote, figcaption, .prose, .prose li) a { color: var(--pw-verm); }
.dark .form-card :is(p, dd, blockquote, figcaption, .prose, .prose li) a:hover { color: var(--pw-verm); }
.form-card a { color: var(--pw-verm); }
/* Same island rule for emphasis: .dark p strong is (0,1,2), so one class plus
   the element clears it and the bold copy stays ink on the cream card. */
.dark .form-card p strong, .dark .form-card li strong { color: var(--pw-ink); }

/* Delivery page: the asset itself, plus how to open it. */
.deliver { display: grid; gap: var(--pw-space-7); }
/* Both actions size to their label and align left. Previously only .pw-btn had
   justify-self, so the ghost button stretched the full card width beside a
   content-width primary — two different button shapes in one stack. */
.deliver .pw-btn, .deliver .pw-btn-ghost { justify-self: start; }

/* 404 — centred, short, and it offers routes rather than apologising. */
.e404 { min-height: 78vh; display: grid; place-items: center; text-align: center; padding: calc(var(--pw-nav-h) + var(--pw-space-12)) 0 var(--pw-space-13); }
.e404 .code { font-family: var(--pw-font-mono); font-size: 11px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-gold); margin: 0 0 var(--pw-space-7); }
.e404 h1 { max-width: 20ch; margin-inline: auto; }
.e404 h1 em { font-style: italic; color: var(--pw-gold); }
.e404 .sub { margin-inline: auto; color: var(--pw-cream-dim); }
.e404 .links { margin: var(--pw-space-11) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pw-space-7); }
.e404 .links a { color: var(--pw-gold); text-decoration: none; font-weight: 600; font-size: var(--pw-text-sm); }
.e404 .links a:hover { color: var(--pw-head-dark); }

/* ---------- PROOF ----------
   One featured case: narrative on the left, figures on the right. This existed
   three times as three private components (.proof-grid on Airtable, a different
   .proof-grid on Legal Ops, .leo-* on AI Automation) which is why the AI page
   read as a different site. One component now, ground-aware like everything else.

   The lead line uses .turn — the display-italic pivot component — rather than a
   private headline style. Big single figures use .proof-fig; stacked figures use
   .proof-stats. A page picks one, never both. */
.proof-grid {
  display: grid; grid-template-columns: var(--proof-cols, minmax(0, 1.2fr) minmax(0, 0.8fr));
  gap: var(--pw-space-12); align-items: start;
}
/* :not([class]) so this only claims the plain narrative paragraphs — a bare
   element selector here out-specifies .turn and .proof-stack and silently
   flattens both to body copy. */
.proof-body > p:not([class]) { margin: 0 0 var(--pw-space-7); font-size: var(--pw-text-lg); line-height: var(--pw-leading-relaxed); color: var(--pw-ink-700); }
.dark .proof-body > p:not([class]) { color: var(--pw-cream); }
.proof-body > p:not([class]):last-child { margin-bottom: 0; }
/* Explicit rhythm. This block was relying on whatever margin each child
   happened to carry, so the kicker sat on the lead line and the tech stack ran
   into the link. Every gap in here is declared. */
.proof-body > .pw-eyebrow { margin: 0 0 var(--pw-space-6); }
.proof-body .turn { margin: 0 0 var(--pw-space-8); --turn-measure: 24ch; }
.proof-body .pw-link { margin-top: var(--pw-space-6); }
/* The featured quote and its attribution. These were the last two parts of the
   proof band still living privately on three pages, each hard-coding the dark
   ground — which rendered near-white on the one page whose band is paper.
   Ground-aware here, like the rest of the component. */
.proof-grid q {
  display: block; quotes: none; font-family: var(--pw-font-display);
  font-weight: 400; font-style: italic;
  font-size: var(--proof-quote, clamp(24px, 2.6vw, 38px)); line-height: 1.16;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-ink);
  margin: 0 0 var(--pw-space-7); text-wrap: pretty;
}
.dark .proof-grid q { color: var(--pw-head-dark); }
.proof-grid .attr {
  margin: 0; font-family: var(--pw-font-mono); font-size: 11px; line-height: 2;
  letter-spacing: var(--pw-tracking-wide); color: var(--pw-muted);
}
.dark .proof-grid .attr { color: var(--pw-cream-dim); }
/* An attribution followed by the engagement description read as one block —
   the mono credit ran straight into the body copy under it. The gap only
   applies when something actually follows. */
.proof-grid .attr:not(:last-child) { margin-bottom: var(--pw-space-7); }
.proof-stack {
  margin: var(--pw-space-8) 0 0; padding-top: var(--pw-space-6);
  border-top: 1px solid var(--pw-line-light); font-family: var(--pw-font-mono);
  font-size: var(--pw-text-xs); letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase; color: var(--pw-muted);
}
.dark .proof-stack { color: var(--pw-cream-dim); border-top-color: var(--pw-line-dark); }
.proof-stats { display: grid; gap: var(--pw-space-8); }
.proof-stats > div { padding-top: var(--pw-space-5); border-top: 1px solid var(--pw-line-light); display: grid; gap: var(--pw-space-3); }
.dark .proof-stats > div { border-top-color: var(--pw-line-dark); }
.proof-stats .fig {
  font-family: var(--pw-font-display); font-weight: 400;
  font-size: var(--proof-fig, clamp(38px, 4.2vw, 58px)); line-height: 0.95;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-ink);
}
.dark .proof-stats .fig { color: var(--pw-head-dark); }
.proof-stats .fig em { font-style: italic; color: var(--pw-verm); font-size: 0.58em; }
.dark .proof-stats .fig em { color: var(--pw-gold); }
.proof-stats .k { font-size: var(--pw-text-sm); line-height: 1.5; max-width: 32ch; color: var(--pw-ink-600); }
.dark .proof-stats .k { color: var(--pw-cream-dim); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; gap: var(--pw-space-11); } }
/* The site's plain forward link — "Read the case study →". Was a private
   .leo-go; it belongs to the system, not to one section. */
.pw-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--pw-text-sm); font-weight: 600; text-decoration: none;
  color: var(--pw-verm);
}
.dark .pw-link { color: var(--pw-gold); }
.pw-link .arrow { transition: transform var(--pw-dur-base) var(--pw-ease-emphasis); }
.pw-link:hover .arrow { transform: translateX(3px); }
/* ---------- SKIP LINK ----------
   WCAG 2.4.1. Off-screen until focused, then it lands as a real button at the
   top-left. Every page has a full nav, so a keyboard or screen-reader user was
   otherwise tabbing through eight nav items on every single page before
   reaching content. */
.skip-link {
  position: absolute; left: var(--pw-space-5); top: -100px; z-index: 999;
  padding: var(--pw-space-4) var(--pw-space-6); border-radius: var(--pw-radius-pill);
  background: var(--pw-gold); color: var(--pw-ink);
  font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
  letter-spacing: var(--pw-tracking-wide); text-transform: uppercase;
  text-decoration: none; transition: top var(--pw-dur-fast) var(--pw-ease);
}
.skip-link:focus { top: var(--pw-space-5); outline: 2px solid var(--pw-ink); outline-offset: 2px; }

/* ---------- FLAGGED ----------
   An internal pre-ship annotation, NOT copy. It was used on four pages while
   being defined nowhere, so every warning inherited the surrounding paragraph
   and read as a customer-facing sentence. It must never be mistakable for
   content: own line, mono, boxed, vermilion. Hidden in print, and everything
   still wearing this class must be resolved or removed before launch. */
.flagged {
  display: block; width: fit-content; max-width: 100%;
  margin: var(--pw-space-5) 0 0; padding: var(--pw-space-3) var(--pw-space-5);
  border: 1px dashed var(--pw-verm); border-radius: var(--pw-radius-sm, 6px);
  background: color-mix(in oklab, var(--pw-verm) 8%, transparent);
  font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
  letter-spacing: var(--pw-tracking-wide); line-height: 1.6;
  text-transform: uppercase; color: var(--pw-verm); text-wrap: pretty;
}
.dark .flagged { border-color: var(--pw-gold); color: var(--pw-gold); background: color-mix(in oklab, var(--pw-gold) 10%, transparent); }
@media print { .flagged { display: none; } }

/* ---------- PIPELINE SCHEMATIC ----------
   A drawn frame that states how a system runs: named stages, each a step
   brighter than the last, ending on the outcome. Used in the hero slot of
   /ai-automation/ (a workflow run) and /airtable/ (the build stack). It was a
   private .pipe on the AI page; a second page needing it made it a component
   rather than a copy. Dark-ground by default because both heroes are ink; the
   light-ground base is declared so it never inherits cream onto paper. */
.pipe {
  border: 1px solid var(--pw-line-light); border-radius: var(--pw-radius-xl);
  background: var(--pw-surface-elev); padding: var(--pw-space-8);
  font-family: var(--pw-font-mono);
}
.dark .pipe {
  border-color: rgba(242,235,221,0.14); background: var(--pw-ink-soft);
  box-shadow: 0 48px 100px -40px rgba(0,0,0,0.8);
}
.pipe-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-muted); margin-bottom: var(--pw-space-8);
}
.dark .pipe-head { color: var(--pw-cream-dim); }
.pipe-live { display: flex; align-items: center; gap: 7px; color: var(--pw-verm); }
.dark .pipe-live { color: var(--pw-gold); }
.pipe-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; animation: pulse 1.8s ease-in-out infinite; }
.pipe-flow { display: flex; flex-direction: column; }
.pipe-foot { margin: var(--pw-space-7) 0 0; font-size: 10px; color: var(--pw-muted); letter-spacing: var(--pw-tracking-wide); line-height: 1.8; }
.dark .pipe-foot { color: var(--pw-cream-dim); }
.pipe-foot b { color: var(--pw-verm); font-weight: 500; }
.dark .pipe-foot b { color: var(--pw-gold); }
.pipe .node {
  border: 1px solid var(--pw-line-light); border-radius: var(--pw-radius-chip);
  padding: 13px 16px; display: flex; align-items: baseline; gap: var(--pw-space-4);
  background: var(--pw-surface); animation: lightup 8s infinite;
}
.dark .pipe .node { border-color: rgba(242,235,221,0.14); background: rgba(20,17,14,0.5); }
/* Resting brightness climbs toward the outcome — the last stage is the point of
   the schematic, so it never sits dark. The sweep adds emphasis on top of that
   floor rather than being the only light. */
.pipe .node:nth-of-type(1) { opacity: 0.58; animation-delay: 0s; }
.pipe .node:nth-of-type(2) { opacity: 0.70; animation-delay: 1.6s; }
.pipe .node:nth-of-type(3) { opacity: 0.84; animation-delay: 3.2s; }
.pipe .node:nth-of-type(4) {
  opacity: 1; animation-delay: 4.8s; border-color: rgba(232,163,61,0.34);
  background: linear-gradient(100deg, rgba(232,163,61,0.14), rgba(224,123,57,0.06));
}
.pipe .node:nth-of-type(4) .k { color: var(--pw-verm); }
.dark .pipe .node:nth-of-type(4) .k { color: var(--pw-gold); }
.pipe .node:nth-of-type(4) .v { color: var(--pw-ink); }
.dark .pipe .node:nth-of-type(4) .v { color: var(--pw-head-dark); }
.pipe .node .k { font-size: 10px; letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase; color: var(--pw-muted); flex: 0 0 auto; }
.dark .pipe .node .k { color: var(--pw-mid); }
.pipe .node .v { font-size: 12px; color: var(--pw-body); line-height: 1.5; }
.dark .pipe .node .v { color: var(--pw-cream); }
.pipe .lk {
  width: 1px; height: 20px; margin-left: 28px; opacity: 0.45;
  background: repeating-linear-gradient(to bottom, var(--pw-muted) 0 3px, transparent 3px 7px);
}
.dark .pipe .lk { background: repeating-linear-gradient(to bottom, var(--pw-cream-dim) 0 3px, transparent 3px 7px); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
@keyframes lightup { 0%,100% { filter: none; } 8%,62% { filter: brightness(1.45); } 78% { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .pipe .node { animation: none; opacity: 1; }
  .pipe-live i { animation: none; }
}
/* The capture that a page moves out of its hero, shown where the built system
   belongs rather than beside the headline. */
.build-shot { margin-top: var(--pw-space-12); }
.build-shot .shot-cap { margin-top: var(--pw-space-5); }


/* =========================================================
   DEATHS · TRIO · PAY · BCARDS
   Promoted out of page CSS 2026-07-28. These four were declared
   locally on both AI Automation pages with different values —
   the express page rendered .death as a single display-serif
   column and .bcard as an ink card; the LP rendered the same
   classes as a two-column sans list and a white surface card.
   Same markup, two components. One definition, here, is the
   only thing that stops the pair drifting again.
   ========================================================= */
.deaths { margin: var(--pw-space-12) 0 0; }
.death {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--pw-space-7);
  align-items: baseline; padding: var(--pw-space-7) 0;
  border-top: 1px solid var(--pw-line-dark);
}
.death:last-of-type { border-bottom: 1px solid var(--pw-line-dark); }
.death .n {
  font-family: var(--pw-font-mono); font-size: var(--pw-text-xs);
  color: var(--pw-gold); letter-spacing: var(--pw-tracking-wide);
}
.death p {
  margin: 0; font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 30px); line-height: var(--pw-leading-snug);
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark);
}

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pw-space-6); margin-top: var(--pw-space-11); }
.bcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pw-space-6); margin-top: var(--pw-space-11); }

/* .pay and .bcard are the same card in two slots — an ink island that
   holds its own ground, so it reads identically on paper and on ink. */
.pay, .bcard {
  background: var(--pw-ink); border-radius: var(--pw-radius-card);
  padding: var(--pw-space-8); box-shadow: var(--pw-shadow-lg);
  display: grid; align-content: start;
}
.pay .ix, .bcard .tag {
  font-family: var(--pw-font-mono); font-size: 10px;
  letter-spacing: var(--pw-tracking-kicker); text-transform: uppercase;
  color: var(--pw-gold); margin-bottom: var(--pw-space-6);
}
.pay h3, .bcard h3 {
  margin: 0 0 var(--pw-space-4); font-family: var(--pw-font-display); font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.16;
  letter-spacing: var(--pw-tracking-tight); color: var(--pw-head-dark);
}
.pay p, .bcard p { margin: 0; color: var(--pw-cream-dim); font-size: var(--pw-text-sm); line-height: var(--pw-leading-relaxed); }

@media (max-width: 1000px) {
  .trio, .bcards, .deaths { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .death { grid-template-columns: 1fr; gap: var(--pw-space-3); }
}