/* ============================================================================
   NORTHWEST AI — SITE STYLESHEET v4 (DRAFT, 2026-08-15)

   WHY THIS EXISTS
   The v3 site ran a warm-paper / Fraunces-serif / terracotta system. Wyatt's call:
   it reads as generic AI-company design and it is not what our own converting pages
   look like. This stylesheet retires that system and adopts the one already running
   on the embedded-expert landing pages (training-lp-ovegas-2026-08.html): Poppins,
   white canvas, navy ink, brand blue, gold CTAs, the navy-to-blue gradient hero.

   Nothing here is invented. Every token below is lifted from that file so the site
   and the funnel pages finally look like the same company.

   LAYOUT REFERENCE: bustem.com (Wyatt supplied). What was taken is structure, not
   style: floating pill nav, two-column hero with the VSL beside the copy instead of
   under it, icon-bullet proof list, logo band directly under the fold, three-card
   problem section, numbered mechanism steps, stat strip, comparison table, six-card
   differentiator grid, testimonial grid, numbered path-to-start, founder letter,
   FAQ accordions, fat footer. Their palette (white hero, black type) was NOT taken;
   the hero stays on our gradient so we don't look like them either.

   RULES THAT CARRY OVER FROM THE LP AND MUST NOT DRIFT:
   - 760px is the one mobile breakpoint. Every mobile rule in this file uses it.
   - Gold (#F4C24E) is the only button fill. Navy is for tags and panels, never CTAs.
     (Wyatt 2026-08-06: "all the buttons yellow, not blue".)
   - Empty media slots paint #EDF0F4 so a pending asset reads as pending, not broken.
   ============================================================================ */

:root {
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ink + text */
  --ink: #1B2533;
  --gray: #555F6E;
  --gray-soft: #7A8494;

  /* brand */
  --blue: #2160E8;          /* the accent. was --hero-bottom on the LP */
  --navy: #1B2F55;          /* panels, tags, dark type. was --cta */
  --navy-deep: #13233F;
  --dot: #E0492E;           /* the red dot. sparingly */
  --gold: #F4C24E;          /* every button */
  --gold-hover: #EAB33A;

  /* surfaces */
  --hero-top: #05090F;
  --hero-bottom: #2160E8;
  --soft: #F7F7F5;
  --soft-blue: #EEF2FF;
  --panel: #F4F4F1;
  --slot: #EDF0F4;          /* empty media */
  --line: rgba(27, 37, 51, 0.12);
  --line-soft: rgba(27, 37, 51, 0.07);

  --shadow-card: 0 1px 6px rgba(27, 37, 51, 0.06);
  --shadow-lift: 0 6px 22px rgba(27, 37, 51, 0.09);
  --shadow-nav: 0 6px 28px rgba(27, 37, 51, 0.10);

  --radius: 14px;
  --radius-lg: 20px;

  --nav-pull: 102px; /* see the .navwrap note */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The nav is sticky and ~98px tall, so an anchor jump would otherwise land the section
   heading underneath it. Every in-page link on this site (#how, #results, #book) relies
   on this. Keep it a bit taller than the nav. */
[id] { scroll-margin-top: 112px; }
body {
  font-family: var(--font);
  background: #fff;
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--blue); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 26px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 26px; }
section { padding: 84px 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; }

/* ONE HEADING SCALE for the whole site. The v3 site had four. */
h1 { font-size: clamp(36px, 5vw, 62px); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(29px, 4vw, 44px); font-weight: 800; }
h3 { font-size: clamp(19px, 2vw, 23px); }
h2 .hl, h1 .hl { color: var(--blue); }
/* Emphasis inside a heading. COLOR ONLY, never a box.

   This was a bustem-style highlight box (background + border-radius + padding +
   display:inline-block). It caused both of the problems Wyatt reported, from one cause:

     - "weird break points": inline-block makes the marked phrase an ATOMIC unit. It
       cannot wrap internally, so a three-word phrase gets shoved onto its own line and
       the headline breaks in a place no one chose. Every hero h1 was doing this.
     - "weird gray highlight": the box works on bustem because it sits on white. Ours
       sat on the navy-to-blue hero gradient, where a translucent white fill reads as a
       gray smudge over the type rather than as a highlight.

   Color-only emphasis fixes both at once and, better, it is the treatment h2 already
   uses (.hl). Headings now share one emphasis system instead of two. Gold on the dark
   hero, blue on light sections, because blue on the gradient would vanish.
   DO NOT reintroduce a background here. If a boxed highlight is ever wanted, it needs a
   light-background section and box-decoration-break:clone, and it still should not go
   on an h1. */
.mark { display: inline; color: var(--blue); }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 20px; height: 2px; background: var(--dot); }
.kicker.on-dark { color: rgba(255,255,255,0.72); }
.kicker.centered { display: flex; justify-content: center; }

.lede { font-size: clamp(17px, 2vw, 20px); color: var(--gray); max-width: 720px; line-height: 1.55; }
.section-head { max-width: 780px; margin: 0 auto 46px; text-align: center; }
.section-head .lede { margin: 16px auto 0; }
.section-head.left { margin-left: 0; text-align: left; }

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 17px; letter-spacing: 0.02em;
  padding: 18px 38px; border-radius: 10px; text-decoration: none;
  transition: background .12s ease, transform .12s ease;
  border: none; cursor: pointer; font-family: var(--font);
}
.btn:hover { background: var(--gold-hover); }
.btn.sm { padding: 12px 22px; font-size: 14.5px; border-radius: 8px; }
/* Ghost is the ONLY non-gold button, and only ever as a secondary next to a gold one. */
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { background: var(--soft); }
.btn.ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.32); }
.btn.ghost.on-dark:hover { background: rgba(255,255,255,0.10); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cta-row.centered { justify-content: center; }
.cta-note { font-size: 14.5px; color: var(--gray); margin-top: 16px; }
.cta-note.on-dark { color: rgba(255,255,255,0.7); }

/* ------------------------------------------------------------- TOP STRIP */
/* Black strip + white pill + red dot. Straight off the LP. */
.topbar { background: #000; padding: 11px 16px; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); border-radius: 6px;
  padding: 7px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }

/* ------------------------------------------------------------------- NAV */
/* Floating pill, bustem's shape. Sits ON the hero gradient, so it needs its own white
   surface and shadow rather than a border-bottom like the old sticky bar.
   THE NEGATIVE MARGIN IS LOad-BEARING. The nav is a SIBLING of the hero, not a child,
   because a sticky element only sticks inside its own scroll parent: nested in <header
   class="hero"> it would unstick the moment the hero scrolled past, which is worse than
   v3's plain sticky bar. As a body-level sibling it sticks for the whole page, and the
   negative margin-bottom (matched by .hero's padding-top) pulls the gradient back up
   underneath it so it still reads as floating on the hero. Change one, change both.
   --nav-pull is deliberately a few px MORE than the nav's real height (~98px). Erring
   long makes the hero start slightly ABOVE the nav, which is invisible; erring short
   leaves a white sliver above the gradient, which is not. If the nav ever gets taller
   than this, raise it. */
.navwrap { position: sticky; top: 0; z-index: 60; padding: 14px 0; background: transparent; margin-bottom: calc(-1 * var(--nav-pull)); }
.nav {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 26px;
  background: #fff; border-radius: 16px;
  padding: 12px 14px 12px 22px;
  box-shadow: var(--shadow-nav);
}
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.logo .glyph {
  width: 30px; height: 30px; border-radius: 8px; background: var(--ink);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: -0.03em;
}
.logo .glyph i { font-style: normal; color: var(--dot); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links > a, .menu-item > .top {
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: 9px 13px; border-radius: 8px; white-space: nowrap;
}
.nav-links > a:hover, .menu-item > .top:hover { background: var(--soft); }
.menu-item { position: relative; }
.menu-item > .top .car { font-size: 9px; color: var(--gray-soft); margin-left: 3px; }

/* HOVER FORGIVENESS (Wyatt 2026-08-16: "it goes away quite a bit when I'm trying to
   hover then move my mouse down"). Three separate fixes, and the menu needs all three
   because they cover three different ways the hover was breaking.

   1. THE GAP BRIDGE. The panel floats 10px below the trigger, and that gap was dead
      space: the moment the cursor left the link it was over nothing, :hover dropped and
      the panel closed before the cursor arrived. `.menu-item::after` extends the
      trigger's hover area down through the gap. It is absolutely positioned so it costs
      no layout, and it sits behind the panel so it never eats a click.

   2. THE DIAGONAL. The panel is much wider than its trigger, so a cursor moving
      down-and-right toward a lower item leaves the trigger's column before it enters
      the panel. `.dropdown::before` spans the panel's full width across the gap, so any
      approach angle stays over a hover target the whole way.

   3. THE CLOSE DELAY. Even with 1 and 2, a cursor that clips a corner for one frame
      should not nuke the menu. Closing is delayed ~220ms and opening is instant: the
      delays live on the closed state, and the open state zeroes them. This is the part
      that actually makes it feel less twitchy. If it ever feels sticky instead, lower
      the delay rather than removing it. */
.menu-item::after {
  content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 18px; z-index: 0;
}
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 330px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: 10px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); z-index: 2;
  transition: opacity .14s ease .22s, transform .14s ease .22s, visibility 0s linear .36s;
}
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.menu-item:hover .dropdown, .menu-item:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}
.dropdown a { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.dropdown a:hover { background: var(--soft-blue); }
.dropdown a .d { display: block; font-size: 12.5px; font-weight: 500; color: var(--gray); margin-top: 2px; line-height: 1.4; }
.dropdown .dd-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-soft); padding: 8px 12px 4px; }
.dropdown hr { border: none; border-top: 1px solid var(--line-soft); margin: 8px 4px; }
.nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 6px; margin-left: auto; }

@media (max-width: 980px) {
  .nav { flex-wrap: wrap; padding: 12px 16px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; margin: 10px 0 4px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  }
  .nav-links.open { display: flex; }
  .menu-item > .top { display: block; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--line);
    border-radius: 0; margin: 0 0 8px 13px; padding: 0 0 0 8px; min-width: 0;
    transition: none;
  }
  /* The desktop hover bridges are invisible boxes sitting over the next element. In the
     stacked mobile menu that next element is another nav link, so they would swallow
     taps. There is no hover to forgive here anyway. */
  .menu-item::after, .dropdown::before { display: none; }
  .nav-links .btn { text-align: center; margin-top: 8px; }
}

/* ------------------------------------------------------------------ HERO */
/* Navy-to-blue gradient with the 110px grid overlay. Same recipe as the LP. */
.hero {
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(115deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
  background-size: 110px 110px, 110px 110px, 100% 100%;
  color: #fff;
  padding-top: var(--nav-pull); /* paired with .navwrap's negative margin. See the note there. */
}
/* TWO COLUMN, bustem's shape: argument left, video right. This is the single
   biggest structural change from v3, where everything was centred and stacked.
   1.05fr/1fr rather than 1fr/1fr so a long headline doesn't force the video narrow. */
/* VIDEO-WEIGHTED, 2026-08-16 (Wyatt: "the videos are a little too small relative to
   the text"). Was 1.05fr / 1fr with a 54px gap, which made the copy column the wider
   of the two and left the player around 520px.

   This is also Phillips's third principle from concepts/presentation-techniques, which
   the 4-Mat audit already flagged and this change finally acts on: the most important
   thing should be the biggest thing. On a page whose job is to get the video played,
   the player outranks the headline. So the ratio flips AND the h1 steps down; doing
   only one of the two barely moves the needle. */
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.32fr; gap: 42px;
  align-items: center; padding: 34px 0 76px;
}
/* Smaller than the global h1: in a two-column hero the headline gets roughly half the
   width, so the site-wide 62px cap ran the live headline to four lines. 52px holds it
   to three. If a page's h1 is short enough for two lines, leave this alone anyway —
   consistency across the hero set matters more than one page's line count. */
.hero h1 { color: #fff; margin-bottom: 20px; font-size: clamp(31px, 2.9vw, 43px); }
.hero h1 .mark, .hero .mark { color: var(--gold); }
.hero-sub { font-size: clamp(17px, 1.9vw, 20px); color: rgba(255,255,255,0.88); max-width: 560px; margin-bottom: 28px; }
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600;
  color: #fff; letter-spacing: 0.03em;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* Icon bullets. bustem runs three; three is the cap here too, which is also Srivatsaa's
   "1, 2, 3, too many".

   SIZED UP 2026-08-16. These used to sit under a subhead paragraph and play support at
   16.5px / 94% white. The subhead is gone (Wyatt), so the bullets now carry the entire
   value proposition and they were too light to do that job on a gradient this busy.
   Four changes, all for legibility rather than taste: full white instead of 94%, weight
   500 instead of 400, a step up in size, and a text-shadow. The shadow is the one that
   matters most: the hero paints 110px grid lines behind the type, and white-on-blue
   over a moving edge is exactly where thin text falls apart. It costs nothing on the
   dark half of the gradient and rescues the light-blue half. */
.checks { list-style: none; margin: 0 0 28px; display: grid; gap: 13px; max-width: 620px; }
.checks li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: clamp(16.5px, 1.35vw, 18px); font-weight: 500; color: #fff; line-height: 1.45;
  text-shadow: 0 1px 2px rgba(5, 9, 15, 0.35);
}
.checks .ic {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; margin-top: 2px;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
}
.checks .ic svg { width: 15px; height: 15px; }
/* On the subpage heroes the column is full width, so the list needs its own measure. */
.pagehead .checks { max-width: 680px; margin-bottom: 30px; }

/* VSL slot. Aspect-locked so the column height is stable before an embed lands. */
.vsl {
  width: 100%; aspect-ratio: 16 / 9; background: var(--slot);
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  box-shadow: 0 18px 50px rgba(5, 9, 15, 0.35);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.14);
}
.vsl iframe, .vsl video, .vsl > div { width: 100%; height: 100%; border: 0; }
.vsl-ph { color: var(--gray); font-size: 13.5px; font-weight: 600; text-align: center; padding: 0 20px; }
.vsl-play {
  width: 66px; height: 66px; border-radius: 20px; background: var(--navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.vsl-play::after { content: ""; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.vsl-cap { text-align: center; font-size: 13px; color: rgba(255,255,255,0.62); margin-top: 12px; }

/* HUB-AND-SPOKE BENCH GRAPHIC (experts.html hero). Fills the slot a player fills on
   every other hero, so the copy is never left-aligned against dead space.
   Sits on the dark gradient, so every stroke is white-based rather than ink. */
.benchweb { width: 100%; max-width: 540px; margin: 0 auto; display: block; overflow: visible; }
.benchweb .spoke { stroke: rgba(255,255,255,0.30); stroke-width: 1.5; stroke-dasharray: 3 6; }
.benchweb .ring { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 2.5; }
.benchweb .hub { fill: var(--navy); stroke: var(--gold); stroke-width: 2.5; }
.benchweb .hubtext { fill: #fff; font-family: var(--font); font-weight: 800; font-size: 15px; text-anchor: middle; letter-spacing: -0.01em; }
.benchweb .initials { fill: #fff; font-family: var(--font); font-weight: 700; font-size: 20px; text-anchor: middle; }

/* LIVE PLAYER. Frame only: radius, shadow, clipping. It must NOT set an aspect-ratio,
   because the Vidalytics embed ships its own 56.25% padding-top spacer and the two
   would fight into a double-height box. That is the bug to look for if a hero video
   ever renders with a huge empty gap under it. */
.vsl-live {
  width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--slot); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 50px rgba(5, 9, 15, 0.35);
}
/* The two-column hero brings its own vertical rhythm; .pagehead already supplied it. */
.pagehead .hero-grid { padding: 4px 0 8px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 58px; }
  .hero-sub, .checks { max-width: 100%; }
}

/* ------------------------------------------------------- LOGO / PRESS BAND */
/* bustem puts "Trusted by 160+ brands" + a logo row immediately under the fold.
   Ours is the press ticker, which was buried at the bottom of every v3 page. */
.band { background: #fff; padding: 40px 0 34px; border-bottom: 1px solid var(--line-soft); }
.band-label { text-align: center; font-size: 13.5px; color: var(--gray); margin-bottom: 24px; letter-spacing: 0.02em; }
.band-label strong { color: var(--ink); font-weight: 700; }
.ticker { overflow: hidden; position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.ticker::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.tk-track { display: flex; width: max-content; align-items: center; animation: tk 46s linear infinite; will-change: transform; }
@keyframes tk { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-item { display: flex; align-items: center; padding: 0 34px; }
.tk-item img { max-height: 30px; max-width: 150px; width: auto; filter: grayscale(1); opacity: 0.62; }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } .ticker { overflow-x: auto; } }

/* --------------------------------------------------------- CARD PRIMITIVES */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--gray); }
.card p strong { color: var(--ink); }
.card .tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue); background: #EAF0FF;
  border-radius: 6px; padding: 4px 9px; margin-bottom: 14px;
}
.card .ic-box {
  width: 44px; height: 44px; border-radius: 12px; background: var(--soft-blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card .ic-box svg { width: 21px; height: 21px; stroke: var(--blue); }
.card.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.card.dark h3 { color: #fff; }
.card.dark p { color: rgba(255,255,255,0.76); }

/* Visual card: a mocked screenshot slot above the copy. bustem's problem section. */
.vcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
/* Fixed height, not min-height: the three art blocks hold different numbers of props,
   so on min-height the headings below them started at three different heights. */
.vcard .art { background: var(--panel); padding: 24px 22px; height: 216px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
/* Real illustration instead of the CSS props.

   4:3, NOT SQUARE (Wyatt 2026-08-16: "they feel a little tall"), and NOT widescreen.
   The reason is measurable: five of the six diagrams have square ink (measured 0.99 to
   1.02), so the box height caps the diagram no matter how wide the box gets. Going
   wider cannot enlarge the art, it can only shrink it. At the ~395px card width these
   render at, the diagram goes 363px square (1:1) -> 273px (4:3) -> 204px (16:9), and
   these diagrams carry text labels ("Defined deliverable", the chart legend) that stop
   being readable around 220px. 4:3 buys ~100px of card height for ~25% of diagram size;
   16:9 would buy another 75px and cost the labels.

   The sources were RECOMPOSED onto a 4:3 canvas rather than cropped, because build-2-ship
   has only 4.6% headroom and any cover-crop would clip it. That pass also normalised
   margins that ranged 7% to 32% across the set, so the six now render at one scale.
   object-fit:cover is therefore a no-op here and exists only as a guard. */
.vcard .art.shot { height: auto; aspect-ratio: 4 / 3; padding: 0; background: #fff; display: block; }
.vcard .art.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .body { padding: 24px 24px 26px; }
.vcard h3 { margin-bottom: 9px; }
/* Step label inside an illustration card. .card .tag relies on flex align-self, which
   does nothing in .vcard's block body, so it needs its own rule. */
.vcard .body .tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--blue); background: #EAF0FF;
  border-radius: 6px; padding: 4px 9px; margin-bottom: 12px;
}
.vcard p { font-size: 15.5px; color: var(--gray); }

/* Little UI props used inside .art. Illustration only, never real client data. */
.chatline { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow-card); }
.chatline .who { display: block; font-size: 10.5px; font-weight: 700; color: var(--gray-soft); margin-bottom: 3px; letter-spacing: 0.04em; }
.figrow { display: flex; align-items: baseline; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.figrow .k { font-size: 11.5px; color: var(--gray); font-weight: 600; }
.figrow .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.figrow .v.down { color: #C81E1E; }
.figrow .v.up { color: #1B7A43; }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: 11.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--gray); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ------------------------------------------------------------ NUMBERED STEPS */
/* The house component for anything list-shaped. Replaces v3's steps-vert rows. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: s; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 22px; border-top: 2px solid var(--line); }
.step .num { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--blue); margin-bottom: 10px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--gray); }
.step.lit { border-top-color: var(--blue); }

/* --------------------------------------------------------------- STAT STRIP */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.stat { padding: 30px 24px; border-right: 1px solid var(--line); text-align: center; }
.stat:last-child { border-right: none; }
.stat .n { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.stat .n em { font-style: normal; color: var(--blue); }
.stat .l { font-size: 14px; color: var(--gray); margin-top: 8px; line-height: 1.4; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* ---------------------------------------------------------- DARK PANEL BLOCK */
/* One dark section per page, maximum. Used for the comparison and the founder note. */
.dark-panel { background: var(--navy); color: #fff; border-radius: 26px; padding: 60px 46px; }
.dark-panel h2 { color: #fff; }
.dark-panel .lede { color: rgba(255,255,255,0.75); }
@media (max-width: 760px) { .dark-panel { padding: 40px 22px; border-radius: 20px; } }

/* ------------------------------------------------------------------- TABLE */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
table.cmp th, table.cmp td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15.5px; vertical-align: top; }
table.cmp thead th { background: var(--soft); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); }
table.cmp thead th.win { background: var(--navy); color: #fff; }
table.cmp tbody td:first-child { font-weight: 700; width: 20%; }
table.cmp td.win { background: #F5F8FF; font-weight: 600; color: var(--ink); }
table.cmp tr:last-child td { border-bottom: none; }
.table-foot { font-size: 15px; color: var(--gray); margin-top: 18px; }
.table-foot strong { color: var(--ink); }

/* ------------------------------------------------------------ RESULT ROWS */
.result { display: grid; grid-template-columns: 300px 1fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); align-items: start; }
.result:last-child { border-bottom: 1px solid var(--line); }
.result .n { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.result .n em { font-style: normal; color: var(--blue); }
.result p { font-size: 16.5px; color: var(--gray); }
.result p strong { color: var(--ink); }
@media (max-width: 760px) { .result { grid-template-columns: 1fr; gap: 12px; } }

/* ------------------------------------------------------------ TESTIMONIALS */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-card); }
.quote .stars { color: #FBBC04; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.quote p { font-size: 15.5px; color: #3C4350; line-height: 1.55; }
.quote mark { background: #FFE867; padding: 1px 3px; border-radius: 2px; color: inherit; }
.quote .who { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.quote .av { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.quote .nm { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.quote .rl { font-size: 12.5px; color: var(--gray); }
/* Draft-only marker. Delete this rule and every .pending element before launch. */
.pending { border-style: dashed; border-color: #C81E1E; background: #FFFBFB; }
.pending .flag { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #C81E1E; margin-bottom: 12px; }

/* -------------------------------------------------------------- SPECKLE PANEL */
/* The LP's textured panel. Used to set a proof section off from plain white. */
.speckle {
  background-color: var(--panel);
  background-image: radial-gradient(rgba(27,37,51,0.05) 1px, transparent 1px);
  background-size: 6px 6px;
  border-radius: 26px; padding: 62px 34px 68px;
}
@media (max-width: 760px) { .speckle { padding: 42px 16px 48px; border-radius: 20px; } }

/* -------------------------------------------------------------- PRODUCT PANEL */
/* Company Brain illustration. Conceptual only — never NovaBrain's UI language. */
.prodpanel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--soft); border-bottom: 1px solid var(--line); }
.pp-bar .t { font-size: 13px; font-weight: 700; }
.pp-bar .status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gray); }
.pp-bar .dotg { width: 8px; height: 8px; border-radius: 50%; background: #1B7A43; }
.pp-body { padding: 8px 0; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.pp-row:last-child { border-bottom: none; }
.pp-row .f { font-size: 14px; font-weight: 600; }
.pp-row .src { font-size: 11.5px; font-weight: 600; color: var(--gray); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.pp-row .src.hot { color: var(--blue); background: #EAF0FF; border-color: rgba(33,96,232,0.28); }
.pp-foot { padding: 14px 18px; background: var(--soft); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--gray); }
.pp-cap { font-size: 12px; color: var(--gray-soft); text-align: center; margin-top: 12px; }

/* Layer stack (L1/L2/L3). Stepped widths, kept from the v3 rebuild. */
.layers { display: grid; gap: 14px; }
.layer { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: #fff; }
.layer.l1 { background: var(--navy); border-color: var(--navy); color: #fff; }
.layer.l2 { width: 94%; }
.layer.l3 { width: 88%; }
@media (max-width: 760px) { .layer.l2, .layer.l3 { width: 100%; } }
.layer .lv { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dot); margin-bottom: 6px; }
.layer.l1 .lv { color: var(--gold); }
.layer h3 { margin-bottom: 8px; }
.layer p { font-size: 15.5px; color: var(--gray); }
.layer.l1 p { color: rgba(255,255,255,0.78); }
.layer .note { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-soft); margin-top: 12px; }
.layer.l1 .note { color: rgba(255,255,255,0.6); }

/* ====================== THE BENCH: EXPERTS CAROUSEL ========================
   Ported from `training-lp-draft-2026-08.html` (the full embedded-expert LP), which
   built it BEON.tech-style at Wyatt's request 2026-07-23. It is the single best proof
   asset NWAI has and it was trapped on a noindex ad page.

   WHY IT MATTERS MORE HERE THAN IT DID THERE: the 2026-08-09 positioning frame of
   record is forward-deployed EXPERTS, not engineers. People who did the function and
   are now AI-fluent. The bench IS that claim, made visible. On the old page the
   carousel sat unexplained as a credential parade; here the section above it states the
   mechanism, so the faces pay something off.

   MECHANICS, all carried over intact because each fixes a real bug:
   - CSS-only, no JS. The card set is DUPLICATED so the -50% keyframe loops seamlessly.
     ANY CARD EDIT MUST BE MADE IN BOTH SETS or the loop jumps.
   - The edge fade is two overlay gradients, NOT a mask. A mask painted over a
     compositor-animated child is a known iOS Safari bug: cards rendered blank until a
     tap forced a repaint. If the section background stops being white, update both.
   - translate3d + backface-visibility keeps the track on its own GPU layer, which is
     the other half of that fix.
   - Pause-on-hover is gated to (hover: hover). Ungated, an iOS tap sets :hover and
     never clears it, permanently freezing the carousel after anyone touches it.
   - Duration scales with card count: 74s was tuned for 8 cards. Adding cards without
     raising it speeds the whole strip up.

   DELIBERATE EXCEPTION TO THE SIX-OBJECT RULE. concepts/presentation-techniques caps a
   slide at six objects, and the call-2 deck cut its bench slide from five faces to three
   for exactly that reason. This carousel shows roughly five cards at once, each with a
   photo, a name, a role, a credential and four chips, so it is far past six. Keep it.
   Phillips's counting penalty is about a projected slide the audience cannot control;
   a reader sets their own dwell time, and here the volume IS the proof (Vantage uses an
   avatar wall the same way). Three faces on a slide, all eight on a page. Do not
   "fix" this to match the deck.

   COPY RULES ON THESE CARDS (from concepts/embedded-ai-expert-offer):
   - No org-chart titles on the founders. Specialty labels only (Strategy / Architecture
     / Automations), so the three read as part of the bench, not the leadership team.
   - "Built the Thursday Night Football backend at Amazon", never "ex-Amazon CTO".
     Asad is a current Amazon employee and the accomplishment is true either way.
   - "Out of Microsoft" for Awais, never "ex-Microsoft head of engineering".
   - "Routing" is internal vocabulary. Never say routed on a client surface.       */
.experts { padding: 10px 0 8px; }
.experts-viewport { overflow: hidden; padding: 8px 0 6px; position: relative; }
.experts-viewport::before, .experts-viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7%;
  pointer-events: none; z-index: 2;
}
.experts-viewport::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.experts-viewport::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
/* On a tinted section the fades have to match that surface, not white. */
.tinted .experts-viewport::before { background: linear-gradient(90deg, var(--soft), rgba(247,247,245,0)); }
.tinted .experts-viewport::after { background: linear-gradient(270deg, var(--soft), rgba(247,247,245,0)); }
.expert-track {
  display: flex; width: max-content;
  animation: expert-scroll 74s linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
@media (hover: hover) { .experts-viewport:hover .expert-track { animation-play-state: paused; } }
@keyframes expert-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .expert-track { animation: none; } .experts-viewport { overflow-x: auto; } }
.expert-card {
  flex: 0 0 292px; margin-right: 18px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px 22px;
  box-shadow: var(--shadow-lift); text-align: center;
  display: flex; flex-direction: column;
}
.expert-ring {
  width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--blue), var(--dot));
}
.expert-photo {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 32px;
}
.expert-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-name { font-weight: 700; font-size: 17.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.expert-check { width: 16px; height: 16px; flex: 0 0 16px; }
.expert-role { font-size: 12px; color: var(--dot); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin: 4px 0 11px; }
.expert-cred { font-size: 13.5px; color: var(--gray); line-height: 1.5; margin-bottom: 16px; }
.expert-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: auto; }
.expert-tag { font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.expert-tag.lead { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 760px) { .expert-card { flex-basis: 252px; padding: 24px 18px 20px; } }

/* =============== NUMBERED DELIVERABLE STACK (#1 / #2 / #3) =================
   Ported with its markup from the embedded-expert LP. Three columns on desktop,
   stacked on a phone.

   THE THREE IMAGES ARE A NARRATIVE, not three unrelated pictures: the same person asks
   in #1, that exact automation gets built on the call in #2, and it shows up saving
   hours in #3. Do not swap one out in isolation, you break the thread.

   TITLES MUST FIT ONE LINE at 3-up or the images and body copy start at different
   heights across the columns. Keep them under ~24 characters. That constraint is why
   "#3: Automations Your Team Owns" became "#3: Automations You Keep".

   The 16:10 slot is fixed-ratio so the three body copies start at the same height even
   before real images land, and object-fit:cover crops anything slightly off-ratio
   instead of squashing it. Empty slots paint --slot so pending reads as pending. */
.ovg-stack {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 34px; row-gap: 48px; align-items: start;
  max-width: 1180px; margin: 34px auto 0;
}
.ovg-item { text-align: center; }
.ovg-num { font-size: clamp(20px, 2.1vw, 25px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 18px; }
.ovg-shot { width: 100%; aspect-ratio: 16 / 10; background: var(--slot); border-radius: 14px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--line); }
.ovg-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ovg-item p { font-size: 16.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.ovg-item p strong { font-weight: 800; }
@media (max-width: 900px) {
  .ovg-stack { grid-template-columns: 1fr; max-width: 560px; row-gap: 44px; }
  .ovg-num { font-size: 26px; margin-bottom: 16px; }
  .ovg-item p { font-size: 17px; }
}

/* ===================== THE WALL (trading-card roster) ======================
   experts.html. Wyatt: "'our experts' deserves more than an anchor link, let's make a
   wall of fame kind of page with bios, sports cards kind of thing."

   The sports-card read comes from four things, and it falls apart if you drop any of
   them: a numbered corner, a position badge over the photo, a dark nameplate band, and
   a two-cell stat strip. The stat strip is the one doing real work. "Came from" is the
   entire NWAI positioning argument stated as a card stat, because the claim is that
   these people did the job before they did AI. Read down that column and the page makes
   the argument without a paragraph.

   EIGHT CARDS BREAKS THE SIX-OBJECT RULE, deliberately, same as the carousel. A roster
   is not an explanation, the reader controls dwell time, and volume is the proof. See
   the note on .expert-card.

   Photo slots are 4:5 and fixed-ratio so the nameplates line up across a row even
   before every headshot exists. Missing photos fall back to initials on the gradient,
   which reads as a card that hasn't been printed yet rather than a broken image. */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }

.wallcard {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; position: relative;
  transition: transform .14s ease, box-shadow .14s ease;
}
.wallcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(27,37,51,0.16); }

.wc-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(150deg, var(--hero-top), var(--hero-bottom));
  display: flex; align-items: center; justify-content: center;
}
.wc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-photo .initials { color: rgba(255,255,255,0.9); font-size: 46px; font-weight: 800; letter-spacing: -0.02em; }
/* The card number, top right, like a trading card. Purely an index. */
.wc-num {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(5,9,15,0.5);
}
/* Position badge, bottom left of the photo, gold like every other emphasis on the site. */
.wc-pos {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: var(--gold); color: var(--ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px;
}
/* Scrim so the badge stays legible over a light headshot. */
.wc-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(5,9,15,0.55), transparent); pointer-events: none;
}

/* Name only. The card was printing the discipline on the photo badge AND the "now
   builds" value on the plate AND again in the stat cell, so three elements carried two
   facts. Each element says one thing now: badge = discipline, plate = name, stats =
   came from / now builds. */
.wc-plate { background: var(--navy); color: #fff; padding: 15px 16px; }
.wc-name { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }

.wc-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.wc-stat { padding: 12px 14px; }
.wc-stat + .wc-stat { border-left: 1px solid var(--line); }
.wc-stat .k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-soft); }
.wc-stat .v { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: 3px; }

.wc-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.wc-body p { font-size: 14.5px; color: var(--gray); line-height: 1.5; margin-bottom: 14px; }
.wc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wc-tags .expert-tag { font-size: 11px; padding: 4px 9px; }

/* ============== COST OF INACTION (the red rhetorical question) =============
   Hormozi's device, and the one section on the LP set that does the job no feature
   list can: it prices the status quo instead of the offer. Deliberately carries NO
   numbers. The reader fills them in, and whatever they come up with beats anything
   we could assert. One per page, never two.                                      */
.redq {
  max-width: 860px; margin: 0 auto; text-align: center;
  border: 1px solid rgba(224, 73, 46, 0.30); background: #FFF6F4;
  border-radius: 18px; padding: 40px 34px;
}
.redq h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #A83218; margin-bottom: 12px; line-height: 1.25; }
.redq p { font-size: 17px; color: var(--gray); max-width: 640px; margin: 0 auto; }
@media (max-width: 760px) { .redq { padding: 30px 20px; } }

/* ================== WHY NOT THE LAST FIRM (3-up + payoff) =================
   The UNIQUE block from the LP. It is the page's only answer to "we already tried a
   consultant." The payoff line under it is the promise the three columns earn.      */
.uniq-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .uniq-cols { grid-template-columns: 1fr; gap: 24px; } }
.uniq-col { text-align: center; }
.uniq-col h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.uniq-col h3 span { color: var(--blue); }
.uniq-col p { font-size: 15.5px; color: var(--gray); line-height: 1.5; }
.uniq-line {
  max-width: 840px; margin: 36px auto 0; background: var(--soft-blue); border-radius: 14px;
  padding: 22px 28px; text-align: center; font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 700; color: var(--ink); line-height: 1.45;
}
.uniq-line span { color: var(--blue); }

/* ===================== TWO OPTIONS (DIY versus us) ========================
   From the LP, itself NWAI's own invention rather than a Vantage borrow (the Slow /
   Risky / Costly badge device does not exist on Vantage; see the correction note on
   sources/acq-vantage-lp before anyone "restores" it from there).
   The winning column deliberately outweighs the losing one before either is read:
   two-line minis on the good side, one thin line on the bad side. Keep it that way. */
.twoopt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 760px) { .twoopt-grid { grid-template-columns: 1fr; gap: 34px; } }
.twoopt-col { border: 1px solid var(--line); border-radius: 18px; padding: 34px 24px 26px; background: #fff; position: relative; }
.twoopt-col.good { background: linear-gradient(180deg, #F3F6FF, #fff); border-color: rgba(33,96,232,0.35); box-shadow: 0 8px 26px rgba(27,47,85,0.10); }
.twoopt-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 8px; color: #fff; white-space: nowrap;
}
.twoopt-col.bad .twoopt-tag { background: #222; }
.twoopt-col.good .twoopt-tag { background: var(--navy); }
.twoopt-title { text-align: center; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; margin: 4px 0 18px; }
.twoopt-col.good .twoopt-title { color: var(--navy); }
.twoopt-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.badge2 { border-radius: 9px; padding: 12px 6px; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.twoopt-col.bad .badge2 { background: #EFEFEC; color: var(--gray); }
.twoopt-col.good .badge2 { background: var(--navy); color: #fff; }
.twoopt-list { list-style: none; display: grid; gap: 11px; margin-bottom: 18px; }
.twoopt-list li { display: flex; gap: 10px; font-size: 15.5px; color: var(--gray); line-height: 1.45; align-items: flex-start; }
.twoopt-list li b { display: block; color: var(--ink); font-weight: 700; }
.twoopt-list .m { flex: 0 0 18px; font-weight: 800; }
.twoopt-col.bad .m { color: #C81E1E; }
.twoopt-col.good .m { color: #1B7A43; }
.twoopt-foot { text-align: center; font-size: 14.5px; color: var(--gray); line-height: 1.5; border-top: 1px solid var(--line-soft); padding-top: 16px; }

/* ================== CHANNEL MOCK (Slack / Teams illustration) =============
   Wyatt 2026-08-16: the site never said the experts live IN their Slack or Teams,
   which is the whole mechanic. This draws it. Illustration only, never real client
   names or real message text.                                                     */
.channel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.channel-bar { display: flex; align-items: center; gap: 9px; padding: 13px 18px; background: var(--navy); color: #fff; }
.channel-bar .hash { opacity: 0.55; font-weight: 700; }
.channel-bar .nm { font-weight: 700; font-size: 14px; }
.channel-bar .live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.7); }
.channel-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: #3ECF8E; font-style: normal; }
.channel-body { padding: 18px; display: grid; gap: 14px; background: var(--soft); }
.msg { display: flex; gap: 11px; align-items: flex-start; }
.msg .av { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.msg .bub { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.45; }
.msg .who { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-soft); margin-bottom: 4px; }
.msg.ours .bub { background: #EEF4FF; border-color: rgba(33,96,232,0.25); }

/* --------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details { border-radius: 10px; overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 24px;
  font-size: clamp(16px, 2vw, 19px); font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: #232A4D; color: #fff; border-radius: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; flex-shrink: 0; transition: transform .15s ease; }
.faq details[open] summary::after { content: "\00d7"; }
.faq summary:hover { background: #2C3560; }
.faq summary:hover::after { transform: scale(1.15); }
.faq .a { padding: 20px 24px 6px; }
.faq .a p { font-size: 16px; color: var(--gray); margin-bottom: 12px; }
.faq .a p strong { color: var(--ink); }
.faq .a ul { margin: 0 0 12px 20px; color: var(--gray); font-size: 16px; }
.faq .a li { margin-bottom: 8px; }

/* ------------------------------------------------------------ FOUNDER NOTE */
.founder { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; gap: 26px; } }
.founder .photo { width: 100%; border-radius: var(--radius-lg); background: var(--slot); aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.founder .nm { font-weight: 800; font-size: 19px; margin-top: 16px; color: #fff; }
.founder .rl { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.founder .letter p { color: rgba(255,255,255,0.82); font-size: 16.5px; margin-bottom: 16px; }
.founder .letter p strong { color: #fff; }
.founder .letter ul { margin: 0 0 16px 20px; color: rgba(255,255,255,0.82); font-size: 16.5px; }
.founder .letter li { margin-bottom: 7px; }

/* ------------------------------------------------------------------- TEAM */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.member { text-align: left; }
.member .face { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--slot); margin-bottom: 16px; display: block; }
.member .nm { font-weight: 800; font-size: 18px; }
.member .rl { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dot); margin: 4px 0 10px; }
.member p { font-size: 15.5px; color: var(--gray); }
.bench { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; color: var(--gray); }
.bench strong { color: var(--ink); }

/* ------------------------------------------------------------- BOOK / FINAL */
.final { background: var(--navy); color: #fff; text-align: center; padding: 92px 0; }
.final h2 { color: #fff; max-width: 880px; margin: 0 auto 18px; }
.final p { color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto 30px; font-size: 17px; }
.final .guarantee { font-size: 14px; color: rgba(255,255,255,0.6); margin: 20px auto 0; }
/* 4-Mat's NOW frame. Sits between the body copy and the button, sized between the two
   so the eye lands on it on the way down rather than skipping it. Gold because it is
   the last thing read before the only gold object on the section. */
.final .domino { color: var(--gold); font-weight: 600; font-size: clamp(17px, 2vw, 20px); max-width: 640px; margin: 0 auto 26px; }
.iclosed-widget { max-width: 900px; margin: 0 auto; }

/* -------------------------------------------------------------- PAGE HEADER */
/* Subpage hero. Same gradient, single column, shorter. */
.pagehead { padding: 26px 0 62px; }
.pagehead h1 { color: #fff; max-width: 900px; margin-bottom: 20px; }
.pagehead .lede { color: rgba(255,255,255,0.84); max-width: 720px; }
.pagehead .cta-row { margin-top: 30px; }

/* Stat cells under a case-study head */
.headstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 640px) { .headstats { grid-template-columns: 1fr; } }
.headstat { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 20px 22px; }
.headstat .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.headstat .l { font-size: 13.5px; color: rgba(255,255,255,0.72); margin-top: 4px; }

/* ------------------------------------------------------------------- PROSE */
/* Long-form body: case studies, legal, role pages. */
.prose { max-width: 760px; }
.prose h2 { margin: 44px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; }
.prose p { font-size: 17px; color: var(--gray); margin-bottom: 18px; }
.prose p strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 20px 22px; color: var(--gray); font-size: 17px; }
.prose li { margin-bottom: 10px; }
.prose li strong { color: var(--ink); }
.prose a { color: var(--blue); font-weight: 600; }
.prose .small { font-size: 14.5px; color: var(--gray-soft); }

/* --------------------------------------------------------------- ROLE CARDS */
.rolecard { display: block; text-decoration: none; color: inherit; }
.rolecard:hover { border-color: rgba(33,96,232,0.4); box-shadow: var(--shadow-lift); }
.rolecard .go { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--blue); }
.rolecard .meta { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-soft); margin-top: 12px; }

/* ------------------------------------------------------------------ FOOTER */
footer { background: #0D1420; color: rgba(255,255,255,0.62); padding: 62px 0 34px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
footer a { color: rgba(255,255,255,0.62); text-decoration: none; }
footer a:hover { color: #fff; }
.foot-logo { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; margin-bottom: 14px; }
.foot-logo .glyph { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.foot-logo .glyph i { font-style: normal; color: var(--dot); }
.foot-col strong { display: block; color: rgba(255,255,255,0.85); font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 14px; font-weight: 800; }
.foot-col a { display: block; margin-bottom: 9px; line-height: 1.4; }
.foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.42); }

/* ------------------------------------------------------- FLOATING MOBILE CTA */
/* Carried over from the LP. Hidden until the reader passes the hero CTA, hidden
   again once the booking section is on screen. Driven by IntersectionObserver. */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(130%); transition: transform .22s ease; pointer-events: none;
  }
  .mcta.on { transform: translateY(0); pointer-events: auto; }
  .mcta a { display: block; text-align: center; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 17px; padding: 16px 18px; border-radius: 10px; text-decoration: none; }
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------- MOBILE RHYTHM */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  section { padding: 58px 0; }
  .wrap, .wrap-narrow { padding-left: 20px; padding-right: 20px; }
  .section-head { margin-bottom: 34px; }
  .cta-row .btn { width: 100%; text-align: center; }
  .final { padding: 64px 0; }
}

/* ------------------------------------------------------------ LEGAL PAGES
   Added 2026-08-16 with the rebuilt legal set (_pages_legal.py). Seven long
   documents needed three things the marketing pages never did: a jump list, a
   callout for the one clause a reader must not skim past (the arbitration
   notice), and a footer row that carries all seven links without turning the
   fat footer's Company column into a wall. */
.legal-date { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,0.62); }

.legal-toc {
  background: var(--soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 44px;
}
.legal-toc strong {
  display: block; font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--gray-soft); font-weight: 800; margin-bottom: 12px;
}
.legal-toc ol { margin: 0 0 0 18px; columns: 2; column-gap: 34px; font-size: 15px; }
.legal-toc li { margin-bottom: 7px; break-inside: avoid; }
.legal-toc a { color: var(--ink); font-weight: 500; text-decoration: none; }
.legal-toc a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 760px) { .legal-toc ol { columns: 1; } }

.legal-callout {
  background: var(--soft-blue); border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0; padding: 18px 22px; margin-bottom: 34px;
}
.prose .legal-callout { color: var(--ink); }

.legal-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 48px 0 24px; }

.prose h2 { scroll-margin-top: 110px; }
.prose ol { margin-bottom: 20px; }

.foot-legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px;
}
.foot-legal + .foot-base { margin-top: 18px; padding-top: 18px; }

/* Legal body typography. The marketing h2 is built for one heading per screen;
   a 30-section contract needs headings that scan as structure, not as billboards.
   Numbers are generated by the ::before counter so the markup stays clean and a
   reordered section never has to be renumbered by hand. */
.legal-body { counter-reset: legal-section; }
.legal-body h2 {
  font-size: 22px; line-height: 1.3; letter-spacing: -0.01em;
  margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  counter-increment: legal-section;
}
.legal-body h2::before {
  content: counter(legal-section) ". ";
  color: var(--gray-soft); font-weight: 700;
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 40px; }
.legal-body h3 { font-size: 17.5px; margin: 26px 0 8px; }
.legal-body p, .legal-body li { font-size: 16.5px; line-height: 1.68; }
@media (max-width: 760px) { .legal-body h2 { font-size: 20px; } }