/* ============================================================================
   DealAlign — public marketing site
   Design system derived from the DealAlign brand assets and presentation
   materials: deep navy, white, DealAlign electric blue, muted slate.

   Visual-first: sections communicate through purpose-built graphics,
   product-inspired UI composition and diagrams rather than blocks of copy.
   Everything remains honest, restrained and consistent with the brand.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --navy:        #0A1330;
  --navy-2:      #111C3F;
  --navy-3:      #1B2750;
  --navy-line:   #22305C;

  --blue:        #1879FC;
  --blue-600:    #0F63D8;
  /* Accessible primary-button blue. #0F63D8 on white measures ~5.53:1, which
     clears the WCAG AA 4.5:1 requirement for normal-sized text (audit A03).
     --blue stays the brand accent for borders, glows and icons, where the
     contrast ratio does not apply to text. */
  --blue-btn:    #0F63D8;
  --blue-btn-hover: #0B4FAC;
  --blue-300:    #4C97FF;
  --blue-50:     #EAF2FF;

  --ink:         #0B1330;
  --ink-2:       #3A4460;
  --muted:       #5C6480;
  --slate:       #5C6E80;

  --line:        #E4E7EE;
  --line-2:      #EEF0F5;
  --bg:          #FFFFFF;
  --bg-alt:      #F4F6FA;
  --logo-plate:  #FFFFFF;

  --good:        #16865A;
  --warn:        #B26A00;
  --warn-bright: #E9A23B;

  --maxw: 1180px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(10, 19, 48, 0.05);
  --shadow-md: 0 10px 28px rgba(10, 19, 48, 0.08);
  --shadow-lg: 0 26px 60px rgba(10, 19, 48, 0.16);

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Data visuals are drawn from their resting values in the markup, so they are
   already correct without scripting; these animations simply fill them in. */
@keyframes drawArc {
  from { stroke-dasharray: 0 100; }
  to   { stroke-dasharray: var(--val, 0) 100; }
}
@keyframes growX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes growY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes ringIn {
  from { opacity: 0; transform: rotate(-40deg) scale(0.86); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Must equal the sticky header's rendered height exactly (76px min-height +
     1px border = 77px). A larger offset leaves a sliver of the PREVIOUS
     section visible beneath the navigation (e.g. the navy promise strip above
     The Blind Spot); a smaller one hides the section title behind the header.
     The offset is applied ONCE, here — never also as scroll-margin-top, or the
     two add together and the offset doubles. */
  scroll-padding-top: 77px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--blue-btn);
  color: #fff;
  box-shadow: 0 6px 18px rgba(15, 99, 216, 0.26);
}
.btn-primary:hover {
  background: var(--blue-btn-hover);
  box-shadow: 0 10px 24px rgba(15, 99, 216, 0.34);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: rgba(10, 19, 48, 0.18);
}
.btn-ghost:hover { border-color: var(--navy); background: rgba(10, 19, 48, 0.04); }

.btn-sm { padding: 11px 20px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ============================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Opaque, not translucent: a translucent header lets the previous section's
     background (e.g. the navy promise strip) show through as a "navy strip"
     immediately beneath the navigation. */
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 14px rgba(10, 19, 48, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

/* Logo sits directly on the white navigation background — no plate, no box.
   The supplied 1024x341 asset carries empty canvas above and below the
   artwork (the artwork occupies x 30..994, y 78..263 — a 965x186 band), so the
   element is given the exact artboard dimensions (280x51 = 965:186 at this
   scale) and object-fit: cover trims only that empty canvas. The 1024px-wide
   source is roughly 4x the rendered width, so the logo stays crisp on
   high-DPI displays. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  display: block;
  width: 280px;
  height: auto;
  /* The asset is a tight crop of the approved artwork (972x186, aspect 5.226),
     so the image's own proportions define the box. This previously used
     aspect-ratio + object-fit: cover to trim empty canvas out of a padded
     export, which forced the browser down a resampling path that visibly
     softened the wordmark. With the padding already removed from the file,
     the plain scaling path renders the logo sharply, with no rendering hints. */
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-list > li { display: flex; }

.nav-list a {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav-list a:hover { color: var(--navy); background: var(--bg-alt); text-decoration: none; }
.nav-cta-item { margin-left: 10px; }
.nav-cta-item a { color: #fff; }
.nav-cta-item a:hover { color: #fff; background: var(--blue-btn-hover); }

/* With Partner Profitability added, the seven-item primary nav plus its CTA
   overflowed the header in the band just above the burger breakpoint — the list
   ran 7px past the viewport edge at 1025px. This tightens ONLY that band:
   the item set, order, destinations and type family are unchanged, no label
   wraps, and nothing is clipped. Above 1140px the normal spacing applies. */
@media (min-width: 1025px) and (max-width: 1140px) {
  .nav-list { gap: 2px; }
  .nav-list a { padding: 9px 9px; font-size: 13.5px; }
  .nav-cta-item { margin-left: 4px; }
  .brand-logo { width: 208px; }
}

/* mobile menu button */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  color: var(--navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.menu-bars { display: grid; gap: 4px; width: 18px; }
.menu-bars i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% -14%, rgba(24, 121, 252, 0.12), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
  border-bottom: 1px solid var(--line-2);
}
.hero-glow {
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 520px;
  background: radial-gradient(closest-side, rgba(24, 121, 252, 0.09), transparent);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
  padding: 96px 28px 92px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(24, 121, 252, 0.14);
}

.hero-title {
  /* Capped so the longest hero line ("Higher profitability.") still fits on one
     line inside the hero copy column at every two-column width; 3.5rem wrapped it
     onto a fourth and fifth line between ~1025 and 1920px. */
  font-size: clamp(2.4rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hero-line { display: block; }
.hero-emphasis { color: var(--blue); }

.hero-lead {
  margin-top: 24px;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Category statement — states plainly what DealAlign is, for search engines
   and human visitors alike, without becoming awkward keyword copy. */
.hero-category {
  margin-top: 12px;
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-points li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 2px;
  background: var(--blue);
}

/* ---------- hero product panel ---------- */
.hero-panel { position: relative; }

.panel-glow {
  position: absolute;
  inset: -8% -14% -16% -4%;
  background: radial-gradient(closest-side, rgba(24, 121, 252, 0.24), transparent 72%);
  pointer-events: none;
}

/* ============================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.section { padding: 88px 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head { max-width: 780px; }

.eyebrow {
  margin-bottom: 16px;
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow-light { color: var(--blue-300); }

.section-title {
  font-size: clamp(1.75rem, 3.8vw, 2.6rem);
  letter-spacing: -0.03em;
}
.section-title-light { color: #fff; }
.muted-strong { color: var(--muted); }

.section-intro {
  margin-top: 20px;
  max-width: 620px;
  font-size: 17px;
  color: var(--ink-2);
}

.section-head-center { max-width: 760px; margin: 0 auto; text-align: center; }
.section-head-center .section-intro { margin-inline: auto; }

/* The three signal pills sit directly beneath a centred headline. Give the
   headline its own bottom rhythm so the pills can never crowd it. */
.blind-spot .section-head { margin-bottom: 46px; }
.blind-spot .section-title { margin-bottom: 0; }

/* ============================================================================
   CONVERSION DIAGRAM — "the pipeline already exists"
   One pipeline bar split into converted-today and still-available. Conceptual
   only: no figures are stated, because none could be stated honestly.
   ========================================================================== */
.convert-fig { max-width: 860px; margin: 46px auto 0; }
.convert-bar {
  display: flex;
  gap: 4px;
  height: 62px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cv-seg-done,
.cv-seg-left { display: block; border-radius: 10px; }
.cv-seg-done { flex: 0 0 38%; background: linear-gradient(180deg, var(--blue), var(--blue-600)); }
.cv-seg-left { flex: 1 1 auto; background: repeating-linear-gradient(135deg, #DCE5F6 0 10px, #EAF0FB 10px 20px); }
.convert-ends {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.convert-ends span:last-child { text-align: right; }
.convert-legend { display: grid; gap: 12px; margin-top: 26px; }
.convert-legend li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.cv-key { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 5px; }
.cv-key-done { background: var(--blue); }
.cv-key-left { background: repeating-linear-gradient(135deg, #DCE5F6 0 5px, #EAF0FB 5px 10px); border: 1px solid var(--line); }
.convert-cap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.convert-cap strong { color: var(--navy); }

/* ============================================================================
   FLOW DIAGRAM — how risk compounds across a partner deal
   ========================================================================== */
.flow { margin-top: 60px; }

.flow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.flow-node {
  position: relative;
  padding: 0 16px;
  text-align: center;
}
.flow-node::after {
  content: "";
  position: absolute;
  top: 45px;
  right: -15px;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(24, 121, 252, 0.45), rgba(24, 121, 252, 0.12));
}
.flow-node:last-child::after { display: none; }

.flow-visual {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FC 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--blue);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.flow-node:hover .flow-visual {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #CFD8EA;
}
.flow-visual svg { width: 46px; height: 46px; }

.flow-index {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.flow-name {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.flow-caption {
  margin-top: 34px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
}
.flow-caption strong { color: var(--navy); font-weight: 800; }

/* ============================================================================
   DEALALIGN OUTCOMES FRAMEWORK — one connected framework
   ========================================================================== */
.framework {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 58px;
}
/* the connecting spine */
.framework::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(24, 121, 252, 0.10) 0%,
    rgba(24, 121, 252, 0.55) 50%,
    rgba(24, 121, 252, 0.10) 100%);
}
.fw-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0 14px;
  text-align: center;
}
.fw-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--blue);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease,
              background-color 0.22s ease, color 0.22s ease;
}
.fw-step:hover .fw-icon {
  transform: translateY(-3px);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.fw-icon svg { width: 28px; height: 28px; }

.fw-word {
  color: var(--navy);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.fw-line { color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* ============================================================================
   WHY IT COSTS REVENUE — pipeline leakage, conceptual and non-numeric
   ========================================================================== */
.cost { background: #fff; }

.leak {
  margin-top: 54px;
  padding: 34px 32px 30px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.leak-title {
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.leak-stages { display: grid; gap: 20px; }
.leak-stage { display: grid; gap: 8px; }

.leak-bar {
  display: block;
  height: 34px;
  border-radius: 8px;
  background: rgba(10, 19, 48, 0.05);
  overflow: hidden;
}
.leak-bar i {
  display: block;
  width: var(--w, 100%);
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #2E6FD4 0%, var(--blue) 100%);
  transform-origin: left center;
  animation: growX 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.leak-drop-1 .leak-bar i { background: linear-gradient(90deg, #2E6FD4 0%, #4C97FF 100%); }
.leak-drop-2 .leak-bar i { background: linear-gradient(90deg, #6B93D6 0%, #9DB8DB 100%); }
.leak-drop-3 .leak-bar i { background: linear-gradient(90deg, #9AA6BE 0%, #C2C9D8 100%); }

.leak-label { color: var(--navy); font-size: 15.5px; font-weight: 800; letter-spacing: -0.012em; }
.leak-note { color: var(--muted); font-size: 13.5px; }

.leak-close {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.leak-close strong { color: var(--navy); font-weight: 800; }

/* ============================================================================
   REMOVED: COMMERCIAL VALUE / ROI, OPPORTUNITY EXPLORER (CALCULATOR),
   ROI THESIS, FOUR-STEP COMMERCIAL JOURNEY, ROI CONNECT, AUDIENCE CARD GRID

   The ROI and partner-pipeline calculator was retired from the public site by
   explicit product decision. Every rule that styled it — .revflow, .rf-node,
   .roi-points, .calc*, .calc-*, .scenarios, .scenario, .sc-*, .money-moment,
   .mm-*, .calc-disclaimer, .roi-thesis*, .journey, .j-step*, .roi-connect*,
   .roi-pillars, .roi-pillar* — has been deleted outright rather than disabled,
   so no unused calculator styling is shipped and no orphaned rule can interfere
   with unrelated layout.

   The four generic audience role cards were also removed during the homepage
   simplification pass: the three-pillar section already carries the audience
   argument, and the brief forbids adding another row of generic benefit cards.

   Redirect status: /partner-pipeline-calculator.html is currently a stub page
   that forwards the visitor to /product.html. A genuine edge-level 301 is NOT
   applied, because the production Worker does not honour _redirects (verified
   against live responses). The permanent redirect must be configured at the
   Cloudflare zone — see README.md, Blockers.
   ========================================================================== */

/* ============================================================================
   FOUNDER
   ========================================================================== */
.founder-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  margin-top: 52px;
  padding: 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.founder-identity {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 40px;
  border-right: 1px solid var(--line);
}
.founder-monogram {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.founder-name { color: var(--navy); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.founder-role { margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 700; }

/* Pull quote: an unphotographed, typographic credibility statement. */
.founder-quote {
  margin: 6px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.founder-quote p {
  color: var(--navy);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.014em;
}
.founder-quote p::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 2px;
  background: var(--blue);
}

.founder-detail p { font-size: 16px; color: var(--ink-2); line-height: 1.65; }
.founder-detail p + p { margin-top: 18px; }
.founder-close {
  color: var(--navy) !important;
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: -0.014em;
}

/* Four restrained credibility signals — one system, not four generic cards. */
.founder-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.fs-item {
  padding: 0 18px;
  border-left: 1px solid var(--line);
}
.fs-item:first-child { padding-left: 0; border-left: 0; }
.fs-value {
  display: block;
  color: var(--blue-600);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.014em;
}
.fs-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ============================================================================
   STEALTH / EARLY ACCESS
   ========================================================================== */
.stealth {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(24, 121, 252, 0.20), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #0D1738 100%);
}
.stealth-glow {
  position: absolute;
  right: -12%;
  bottom: -50%;
  width: 620px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(24, 121, 252, 0.16), transparent);
  pointer-events: none;
}

.stealth-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.stealth-body {
  margin-top: 18px;
  max-width: 520px;
  color: #C2CBE4;
  font-size: 16.5px;
}
.stealth-note {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 2px solid rgba(76, 151, 255, 0.6);
  color: #8190B8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- lead form ---------- */
.lead-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 34px 32px;
  box-shadow: var(--shadow-lg);
}
.lead-title { font-size: 23px; letter-spacing: -0.02em; }
.lead-sub { margin-top: 8px; color: var(--muted); font-size: 15px; }

.lead-form { margin-top: 26px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field + .field,
.field-row + .field,
.field + .field-row { margin-top: 16px; }
.field-row + .field-row { margin-top: 16px; }

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.optional {
  margin-left: 4px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder,
.field textarea::placeholder { color: #A9B0C4; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(24, 121, 252, 0.14);
}

.field.has-error input,
.field.has-error textarea { border-color: #C4312B; box-shadow: 0 0 0 4px rgba(196, 49, 43, 0.10); }
.field-error {
  margin-top: 6px;
  color: #C4312B;
  font-size: 12.5px;
  font-weight: 700;
}

.form-status {
  display: none;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
}
.form-status.is-error { display: block; background: #FCEBEA; color: #C4312B; }

.lead-form .btn-block { margin-top: 24px; }

.lead-fineprint {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
/* DA-07: links inside dense text blocks must be distinguishable by more than
   colour alone (axe link-in-text-block, 3:1 against surrounding text). */
.lead-fineprint a,
.pillar-split-note a,
.rs-cap a { text-decoration: underline; text-underline-offset: 2px; }

/* success state */
.lead-success { padding: 12px 0 4px; text-align: center; }
.lead-success-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
}
.lead-success h3 { font-size: 23px; letter-spacing: -0.02em; }
.lead-success p { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.lead-success .btn { margin-top: 26px; }

/* ============================================================================
   LEGAL PAGES (privacy / terms)
   ========================================================================== */
.legal-nav { position: static; transform: none; opacity: 1; visibility: visible;
             flex-direction: row; background: none; border: 0; box-shadow: none; padding: 0; }

.legal-doc { max-width: 760px; }
.legal-updated {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.legal-doc h2 {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  letter-spacing: -0.015em;
}
.legal-doc h2 + p { margin-top: 12px; }
.legal-doc p { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.legal-doc ul { margin: 18px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.legal-doc li { font-size: 16px; line-height: 1.68; color: var(--ink-2); }
.legal-doc li strong { color: var(--navy); }
.legal-inline {
  color: var(--navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.legal-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--bg-alt);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.legal-back { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
/* DA-07: inline links in legal prose need a non-colour cue as well. */
.legal-doc p a,
.legal-doc li a,
.legal-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy);
  padding: 62px 0 26px;
  color: #B8C2DE;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--navy-line);
}

.footer-brand { max-width: 400px; }
/* Footer sits on navy, so the logo keeps a light plate; it is clipped to the
   artwork band for the same reason as the header logo above. */
.footer-logo {
  display: block;
  width: 248px;
  height: auto;
  padding: 0;
  background: var(--logo-plate);
  border-radius: 4px;
}
.footer-tagline {
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.footer-promise {
  margin-top: 10px;
  color: #8190B8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.footer-nav a {
  display: inline-block;
  padding: 6px 0;
  color: #B8C2DE;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.16s ease;
}
.footer-nav a:hover { color: #fff; text-decoration: none; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  /* DA-07: was #6F7CA3 — measured 4.42:1 on --navy, just under the 4.5:1 AA
     threshold. #8B97BC measures 5.73:1 and keeps the same muted appearance. */
  color: #8B97BC;
  font-size: 13px;
}
.footer-domain { font-weight: 700; letter-spacing: 0.04em; }

/* ============================================================================
   REVEAL + SUBTLE MOTION
   ========================================================================== */
.reveal {
  opacity: 1;
  transform: none;
}
/* Only hold content back when scripting is available to reveal it again. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* A slow, low-amplitude drift on the hero product panel — enough to signal a
   living product without becoming decoration. */
@media (prefers-reduced-motion: no-preference) {
  .panel-glow { animation: panelDrift 9s ease-in-out infinite alternate; }
}

@keyframes panelDrift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(0, -14px, 0) scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-panel .app-window { transform: none; }
}

/* ============================================================================
   NEW POSITIONING SECTIONS
   Partner-deal wedge: blind spot, revenue stack, category, prototype,
   the "not another tool" objection, and commercial outcomes.
   ========================================================================== */

/* ---------- hero supporting copy ---------- */
.hero-support {
  margin-top: 18px;
  max-width: 540px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.62;
}

/* ---------- promise strip ---------- */
.promise-strip {
  background: var(--navy);
  padding: 20px 0;
}
.promise-line {
  color: #fff;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

/* ---------- the partner deal blind spot ---------- */
.blind-spot { background: #fff; }

.sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 58px;
}
.source-card {
  padding: 30px 26px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.source-card:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 121, 252, 0.4);
  box-shadow: var(--shadow-md);
}
.source-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
}
.source-icon svg { width: 26px; height: 26px; }
.source-name {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.source-quote {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
}

.sources-flow {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 34px 0 0;
}
.sources-flow i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.28;
}
.sources-flow i:nth-child(2) { opacity: 0.55; }
.sources-flow i:nth-child(3) { opacity: 0.9; }

/* ---------- the DealAlign node, reused across sections ---------- */
.da-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  margin: 26px auto 0;
  padding: 18px 30px;
  background: #fff;
  border: 1px solid rgba(24, 121, 252, 0.32);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(24, 121, 252, 0.16);
}
.da-node-solid { background: var(--navy); border-color: var(--navy); }
.da-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  /* DA-07: white on --blue measured 4.05:1 at 13px bold — below AA for normal
     text. --blue-600 (#0F63D8) measures 5.9:1 with white and is an existing
     brand token, so the pill keeps its look and passes. */
  background: var(--blue-600);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.da-node-text { display: grid; gap: 2px; text-align: left; }
.da-node-title {
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.da-node-solid .da-node-title { color: #fff; }
.da-node-sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.da-node-solid .da-node-sub { color: #9FB0DA; }

.blind-copy {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: center;
}
.blind-lead {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.blind-says {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  text-align: left;
}
.blind-says li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.blind-says li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue);
}
.blind-close {
  margin-top: 26px;
  color: var(--muted);
  font-size: 16px;
}
.blind-close strong { display: block; margin-top: 6px; color: var(--navy); font-size: 19px; }

/* ---------- revenue stack (category section) ---------- */
.stack-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 54px;
}
.stack-logo {
  display: grid;
  place-items: center;
  height: 104px;
  padding: 16px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.stack-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(24, 121, 252, 0.36);
  box-shadow: var(--shadow-md);
}
.stack-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: saturate(0.9);
}
/* Consistency: every vendor tile renders its mark at one uniform size and
   within one uniform card, so no logo can dominate or look squeezed. */

.stack-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

.stack-flow {
  margin-top: 46px;
  text-align: center;
}
.stack-flow-label {
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stack-arrow, .nt-arrow {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.stack-arrow i, .nt-arrow i {
  display: block;
  width: 2px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(24, 121, 252, 0.15), rgba(24, 121, 252, 0.75));
}
.stack-flow .da-node { margin-top: 0; }

/* NOTE: the "Your existing revenue stack" section was removed from the homepage
   as a duplicate of "The missing intelligence layer for partner-led revenue".
   .stack-flow / .stack-flow-label / .da-node* remain because the category section
   still uses them; .stack-outputs / .so-item were exclusive to the deleted
   section and have been removed. */

/* ---------- the category ---------- */
.category { background: #fff; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.cat-card {
  padding: 30px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cat-card-da {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 24px 54px rgba(10, 19, 48, 0.22);
}
.cat-kind {
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cat-card-da .cat-kind { color: var(--blue-300); }
.cat-tools {
  margin-top: 14px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.cat-card-da .cat-tools { color: #fff; font-size: 19px; }
.cat-role {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.cat-card-da .cat-role { color: #A9B7DE; }

.cat-question {
  margin-top: 46px;
  color: var(--navy);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-align: center;
}

/* ---------- prototype showcase ---------- */
.proto { background: var(--bg-alt); }

.proto-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 34px auto 0;
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.proto-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(24, 121, 252, 0.14);
}

.proto-story {
  display: grid;
  gap: 64px;
  margin-top: 56px;
}
.ps-step {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 40px;
  align-items: center;
}
.ps-step:nth-child(even) .ps-shot { order: 2; }

/* Browser-style frame around the real prototype capture. */
.ps-frame {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.ps-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--navy-2);
  border-bottom: 1px solid var(--navy-line);
}
.ps-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-3); }
.ps-bar i:first-child { background: #3A4A78; }
.ps-frame img { display: block; width: 100%; height: auto; }

.ps-copy { padding: 0 4px; }
.ps-index {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.ps-title {
  display: block;
  color: var(--navy);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ps-text {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.proto-more {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 64px;
}
.proto-more-cap {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

/* ---------- not another tool ---------- */
.no-tool { background: var(--bg-alt); }

.nt-flow {
  margin-top: 52px;
  text-align: center;
}
.nt-inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.nt-inputs li {
  padding: 11px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nt-out {
  max-width: 460px;
  margin: 0 auto;
  color: var(--navy);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.nt-negatives {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 46px;
}
.nt-negatives li {
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ---------- commercial outcomes ---------- */
.outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 54px;
}
.oc-item {
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}
.oc-title {
  display: block;
  color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.oc-text {
  display: block;
  margin-top: 10px;
  color: #A9B7DE;
  font-size: 14.5px;
  line-height: 1.55;
}

/* ============================================================================
   RESPONSIVE

   Breakpoints: desktop 1440+ / laptop 1024–1440 / tablet 768–1024 / mobile 375–768
   ========================================================================== */

/* --- laptop 1024–1440 --- */
@media (max-width: 1240px) {
  .framework { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .framework::before { display: none; }

  .founder-card { grid-template-columns: 260px 1fr; gap: 36px; padding: 36px; }
  .founder-signals { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .fs-item:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* --- tablet 768–1024: nav collapses, grids reflow --- */
@media (max-width: 1024px) {
  /* Header height at this breakpoint is 69px (68 + 1px border). */
  html { scroll-padding-top: 69px; }

  .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(10, 19, 48, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav-list.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-list a { padding: 14px 12px; font-size: 16px; }
  .nav-list > li { display: block; }
  .nav-cta-item { margin: 12px 0 0; }
  .nav-cta-item a {
    display: block;
    text-align: center;
    padding: 15px 20px;
    font-size: 15px;
  }

  .menu-toggle { display: inline-flex; }
  .header-inner { min-height: 68px; }
  .brand-logo { width: 240px; }
  .footer-logo { width: 212px; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 72px 28px 76px;
  }
  .hero-panel .app-window { transform: none; }
  .hero-panel:hover .app-window { transform: none; }
  .hero-actions { margin-top: 30px; }
  .hero-points { margin-top: 34px; }

  .section { padding: 84px 0; }

  .flow-track { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .flow-node::after { display: none; }

  .app-showcase-body { grid-template-columns: 1fr; }
  .app-side { justify-items: center; }

  /* --- new positioning sections --- */
  .stack-logos { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .ps-step { grid-template-columns: 1fr; gap: 24px; }
  .ps-step:nth-child(even) .ps-shot { order: 0; }
  .proto-more { grid-template-columns: 1fr; }
  .nt-negatives { grid-template-columns: repeat(3, 1fr); }

  .stealth-inner { grid-template-columns: 1fr; gap: 44px; }
  .stealth-body { max-width: none; }

  .founder-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .founder-identity {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 0;
    padding-bottom: 26px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  /* The pull quote always takes its own line beneath the identity. */
  .founder-quote { flex: 1 1 100%; margin-top: 4px; }
  .founder-signals { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }

  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* --- mobile 375–768 --- */
@media (max-width: 768px) {
  /* Header height at this breakpoint is 63px (62 + 1px border). */
  html { scroll-padding-top: 63px; }

  body { font-size: 15.5px; }
  .wrap { padding: 0 20px; }

  .header-inner { min-height: 62px; gap: 12px; }
  .brand-logo { width: 200px; }
  .menu-toggle { padding: 9px 12px; font-size: 12px; }
  .menu-toggle-text { display: none; }

  .hero-grid { padding: 52px 20px 60px; gap: 42px; }
  .hero-title { font-size: clamp(2.05rem, 9.2vw, 2.7rem); letter-spacing: -0.03em; }
  .hero-lead { margin-top: 20px; font-size: 1.15rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-points { margin-top: 30px; padding-top: 20px; gap: 10px 22px; }
  .badge { font-size: 10.5px; padding: 7px 13px; letter-spacing: 0.1em; }

  .app-body { padding: 18px 16px 20px; }
  .app-titlebar { padding: 11px 14px; gap: 12px; }
  .app-titlebar-text { font-size: 11.5px; }
  .app-chip { display: none; }
  .app-summary { grid-template-columns: 1fr; gap: 18px; justify-items: stretch; }
  .app-legend { width: 100%; }
  .coverage { min-width: 0; }
  .app-kpis { gap: 10px; margin-top: 16px; }
  .kpi { padding: 11px 12px; }
  .kpi-value { font-size: 15px; }
  .app-row { grid-template-columns: 24px 1fr 58px; gap: 10px; }
  .ar-bar { display: none; }

  .section { padding: 64px 0; }
  .section-title { font-size: clamp(1.5rem, 6.6vw, 1.95rem); }
  .section-intro { margin-top: 16px; font-size: 16px; }

  .flow { margin-top: 44px; }
  .flow-track { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .flow-node { padding: 0 8px; }
  .flow-visual { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 14px; }
  .flow-visual svg { width: 38px; height: 38px; }
  .flow-name { font-size: 15.5px; }
  .flow-meter { margin-top: 34px; gap: 12px; }
  .fm-label, .fm-end { font-size: 10px; letter-spacing: 0.1em; }
  .flow-caption { margin-top: 26px; font-size: 1.05rem; }

  .app-showcase { margin-top: 36px; }
  .app-showcase-body { padding: 16px 14px 18px; gap: 14px; }
  .app-chart { padding: 16px 14px 14px; }
  .bars { height: 116px; gap: 6px; }
  .app-side { padding: 18px 16px; gap: 16px; }
  .cf-ring { width: 74px; height: 74px; }
  .cf-ring::after { inset: 10px; }

  /* Outcomes framework: a 2×2 grid with a cross spine, still one system. */
  .framework { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; margin-top: 40px; }
  .framework::before { top: 28px; left: 18%; right: 18%; }
  .fw-step { padding: 0 6px; gap: 10px; }
  .fw-icon { width: 54px; height: 54px; }
  .fw-icon svg { width: 25px; height: 25px; }

  .leak { margin-top: 38px; padding: 22px 18px 20px; }
  .leak-bar { height: 26px; }
  .leak-label { font-size: 14.5px; }
  .leak-note { font-size: 12.5px; }
  .leak-close { font-size: 14.5px; }

  /* --- new positioning sections --- */
  .promise-strip { padding: 16px 0; }
  .promise-line { font-size: 0.95rem; }

  .sources { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  .source-card { padding: 24px 20px; }
  .sources-flow { margin-top: 26px; }
  .blind-copy { margin-top: 34px; }
  .blind-close strong { font-size: 17px; }

  .stack-logos { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 38px; }
  .stack-logo { height: 86px; padding: 12px 8px; }
  .stack-logo img { max-height: 22px; }
  .stack-note { font-size: 11.5px; }

  .cat-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  .cat-card { padding: 24px 20px; }
  .cat-question { margin-top: 32px; }

  .proto-label { margin-top: 26px; font-size: 10.5px; padding: 8px 14px; text-align: center; }
  .proto-story { gap: 44px; margin-top: 38px; }
  .ps-step { grid-template-columns: 1fr; gap: 20px; }
  .ps-step:nth-child(even) .ps-shot { order: 0; }
  .ps-frame { border-radius: 12px; }
  .proto-more { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }

  .nt-flow { margin-top: 38px; }
  .nt-inputs { gap: 8px; }
  .nt-inputs li { padding: 9px 14px; font-size: 11.5px; }
  .nt-negatives { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }

  .outcomes { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .oc-item { padding: 22px 20px; }

  .founder-card { padding: 26px 22px; border-radius: var(--radius); }
  .founder-monogram { width: 56px; height: 56px; font-size: 18px; border-radius: 13px; }
  .founder-detail p { font-size: 15.5px; }
  .founder-close { font-size: 16px !important; }
  .founder-quote p { font-size: 16px; }
  .founder-signals { margin-top: 28px; padding-top: 24px; }
  .fs-value { font-size: 14.5px; }
  .fs-label { font-size: 12px; }

  .stealth-inner { gap: 36px; }
  .lead-card { padding: 28px 22px 26px; border-radius: var(--radius); }
  .lead-title { font-size: 21px; }
  .field-row { grid-template-columns: 1fr; gap: 16px; }
  .field-row + .field-row { margin-top: 16px; }
  .field input,
  .field textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */

  .site-footer { padding: 48px 0 22px; }
  .footer-logo { width: 186px; }
  .footer-nav { grid-template-columns: 1fr; gap: 4px; }
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .footer-base { flex-direction: column; gap: 6px; }
}

/* --- very small phones (≤ 400px) --- */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .brand-logo { width: 160px; }
  .hero-title { font-size: 1.95rem; }
  .hero-actions .btn { padding: 14px 18px; font-size: 14px; }

  .flow-track { grid-template-columns: 1fr; }
  .framework { grid-template-columns: 1fr; gap: 24px; }
  .framework::before { display: none; }
  .app-kpis { grid-template-columns: 1fr; }
  .app-row { grid-template-columns: 24px 1fr 52px; }

  .journey { grid-template-columns: 1fr; }
  .mm-headline { font-size: 1.75rem; }
  .sc-value { font-size: 1.45rem; }

  .founder-signals { grid-template-columns: 1fr; gap: 16px; }
  .fs-item { padding-left: 0; border-left: 0; }
}

/* ============================================================================
   CONTENT PAGES — guides, calculator, about
   Reuses the marketing design system. Long-form copy stays readable while the
   navy/blue identity is preserved. All text is real HTML, so it is crawlable
   and readable with JavaScript disabled.
   ========================================================================== */
.page-hero {
  position: relative;
  /* The sticky header already occupies its own height in normal flow, so only a
     modest breathing space is needed here. The previous 128px produced a large
     empty band above the headline on every supporting page. */
  padding: 46px 0 54px;
  background: var(--bg);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 121, 252, 0.13), transparent 68%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; }

.crumbs {
  margin-bottom: 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue-600); }

.page-hero h1 {
  max-width: 920px;
  font-size: clamp(1.95rem, 4.4vw, 2.9rem);
  letter-spacing: -0.03em;
}
.page-lead {
  margin-top: 22px;
  max-width: 740px;
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.page-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding: 8px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.page-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(24, 121, 252, 0.14);
}

/* ============================================================================
   PRODUCT SCREENSHOT COMPONENT (used site-wide, not just the homepage)
   A genuine DealAlign screen in a navy frame with a small label. The frame hugs
   the asset, so the screenshot's own boundaries are what the visitor sees — no
   container may crop it.
   ========================================================================== */
.pshot { margin: 0; min-width: 0; }
.pshot-frame {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  padding: 8px;
  box-shadow: 0 22px 48px -28px rgba(10, 19, 48, .55), 0 3px 12px -8px rgba(10, 19, 48, .35);
  border: 1px solid var(--navy-line);
}
.pshot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
/* The label is a real caption bar ABOVE the image, never an overlay.
   It previously sat absolutely on top of the screenshot and obscured the
   product UI (audit finding A02). Keeping it in normal flow guarantees it can
   never overlap the image, clip the screenshot header, or wrap across it. */
.pshot-tag {
  display: block;
  margin: 0 0 8px;
  padding: 2px 2px 0;
  font: 700 11px/1.4 "Manrope", system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  /* The label sits INSIDE the navy .pshot-frame, above the screenshot and
     outside the image itself. A light blue on the navy gradient measures
     ~9.7:1; --muted would only reach ~3.6:1 here, so this must stay light. */
  color: #B9C6E6;
}

/* Content-page product figure (Product page, guide pages). A full-width figure
   with its caption underneath, so the screenshot is as large as the column
   allows and the caption can never cover it. */
.pshot-page { margin: 30px 0 0; }
.pshot-cap { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ----------------------------------------------------------------------------
   PRESENTATION CROP — removes captured browser chrome, an OS taskbar, unrelated
   third-party floating widget controls or surplus table height from a REAL
   screenshot WITHOUT touching a single product pixel. No part of the dashboard
   is redrawn, invented or re-typed; every figure stays exactly as captured.

   A wrapper with overflow:hidden plus an absolutely positioned inner image
   crops BOTH axes deterministically, which object-fit alone cannot do (cover
   overflows on one axis only). Percentages are relative to the RETAINED box,
   so the same declaration is resolution independent and is mirrored exactly by
   the enlarged viewer.

   Measured geometry of the supplied files:
     · profit-1.png 1024x446 — no chrome. Floating widgets at x 984-1000; all
       product content ends by x 935.
     · profit-2.png 1024x637 — browser chrome rows 0-78, Windows taskbar rows
       619-636, floating widgets x 984-1000.
     · profit-3.png 1024x565 — no chrome; floating widgets x 984-1000.
     · profit-4.png 1024x569 — no chrome; floating widgets x 984-1000.
   The right-edge cut keeps x 0-980, clearing the widgets with ~45px to spare
   and clipping no column value or label.
   -------------------------------------------------------------------------- */
.shot-crop {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.shot-crop > img.shot-img {
  position: absolute;
  left: 0;
  top: 0;
  /* 1024 / 980: the retained width as a share of the full capture. */
  width: 104.4898%;
  height: auto;
  max-width: none;
  border-radius: 0;
  background: transparent;
}

/* profit-1 — overview tiles. Right edge only. */
.shot-crop--p1 { aspect-ratio: 980 / 446; }
/* profit-2 — right edge + browser chrome + taskbar. The retained band starts at
   row 79 of a 540-tall window, so it is offset up by 79/540. */
.shot-crop--p2 { aspect-ratio: 980 / 540; }
.shot-crop--p2 > img.shot-img { top: -14.6296%; }
/* profit-3 — methodology screen with all three explanation panels EXPANDED.
   Right edge only: the two floating widget controls sit at x 990-1000 and are
   cleared by keeping x 0-980. Full height retained (1024x566 capture). */
.shot-crop--p3 { aspect-ratio: 980 / 566; }
/* profit-4 — full contribution table. Right edge only. */
.shot-crop--p4 { aspect-ratio: 980 / 569; }
/* profit-4 — top band only, so reliability and margin are read together without
   a full-height table. */
.shot-crop--p4t { aspect-ratio: 980 / 360; }

/* The enlarged viewer's crop viewport, mirroring the page. */
.lb-crop { position: relative; overflow: hidden; margin: 0 auto; border-radius: 8px; }

/* ============================================================================
   COMPACT PAGE HERO — copy beside the primary visual, so the headline, value
   proposition AND a meaningful part of the product visual all sit within the
   first desktop viewport. Falls to a single column on tablet and below.
   ========================================================================== */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 52px;
  align-items: center;
}
.page-hero-copy { min-width: 0; }
.page-hero-shot { min-width: 0; }
.page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
@media (max-width: 1024px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ============================================================================
   PRODUCT PAGE — THE TWO COMMERCIAL OUTCOMES
   Sits between the compact hero and the long-form article, so both outcomes
   are reachable from the introduction before either pillar is described.
   Reuses .src-cards / .outcome-card from the homepage block; only the wrapper
   and its heading are new, because the page body is not a centred section.
   ========================================================================== */
.page-outcomes { margin: 0 0 12px; scroll-margin-top: 90px; }
.page-outcomes-title {
  margin: 0 0 22px;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  letter-spacing: -0.022em;
  color: var(--navy);
}
.page-outcomes-note {
  margin: 22px 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}
/* These inline links sit inside a muted paragraph, so colour alone cannot
   distinguish them (axe: link-in-text-block). Underline them explicitly. */
.page-outcomes-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

/* ---------- long-form prose ---------- */
.prose { max-width: 800px; }
.prose > * + * { margin-top: 20px; }
/* Data-dense diagrams (matrices, plots, comparison tables) are allowed to use
   the full wrap width so their columns are not cramped. They stay inside the
   wrap's padding, so this can never cause horizontal overflow. */
.prose .wide { max-width: none; }
/* Sits directly beneath .page-hero, which already carries bottom padding. */
.page-body { padding: 8px 0 108px; }
.prose h2 {
  margin-top: 56px;
  font-size: clamp(1.4rem, 2.7vw, 1.9rem);
  letter-spacing: -0.025em;
}
.prose h3 {
  margin-top: 36px;
  font-size: 1.16rem;
  letter-spacing: -0.012em;
}
.prose p { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.prose strong { color: var(--navy); font-weight: 800; }
.prose a { font-weight: 700; }

.prose ul, .prose ol { margin-top: 18px; }
.prose li {
  position: relative;
  padding-left: 30px;
  margin-top: 11px;
  font-size: 16.5px;
  line-height: 1.66;
  color: var(--ink-2);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.prose ol { counter-reset: prose-step; }
.prose ol li { counter-increment: prose-step; padding-left: 36px; }
.prose ol li::before {
  content: counter(prose-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
}

/* ---------- callout ---------- */
.callout {
  margin-top: 30px;
  padding: 22px 24px;
  background: var(--blue-50);
  border: 1px solid #D6E6FF;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
}
.callout p { font-size: 15.5px; line-height: 1.65; color: #173A73; }
.callout p + p { margin-top: 12px; }
.callout strong { color: var(--navy); }

/* ---------- checklist ---------- */
.checklist { display: grid; gap: 10px; margin-top: 24px; }
.checklist li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 17px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.6;
}
.checklist .ck {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--blue);
  border-radius: 6px;
}
.checklist strong { color: var(--navy); }

/* ---------- data table ---------- */
.table-scroll { margin-top: 26px; overflow-x: auto; }
/* Horizontally scrolling data tables must be reachable and scrollable by
   keyboard (axe: scrollable-region-focusable). These containers carry
   tabindex="0" in the markup, so they need a visible focus indicator. */
.table-scroll:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.data-table caption {
  caption-side: top;
  margin-bottom: 12px;
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.data-table th, .data-table td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
.data-table th {
  background: var(--bg-alt);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.data-table td { color: var(--ink-2); }
.data-table tr:last-child td { border-bottom: 0; }

/* ---------- related pages ---------- */
.res-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.res-link {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.res-link:hover {
  transform: translateY(-2px);
  border-color: rgba(24, 121, 252, 0.4);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.res-link strong { display: block; color: var(--navy); font-size: 16px; letter-spacing: -0.01em; }
.res-link span { display: block; margin-top: 7px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- closing CTA band ---------- */
.page-cta {
  margin-top: 60px;
  padding: 42px 44px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: #fff;
}
.page-cta h2 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -0.025em; }
.page-cta p { margin-top: 13px; max-width: 620px; color: #B8C2DE; font-size: 15.5px; }
.page-cta .btn { margin-top: 26px; }
/* The CTA band is navy, but .btn-ghost sets color: var(--navy). Without this
   override a ghost button inherits navy text on a navy background (1.00:1,
   effectively invisible). Mirrors the .cta-band .btn-ghost treatment in
   editorial.css so both dark bands behave the same way. */
.page-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.page-cta .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- screenshot lightbox (accessibility + keyboard) ---------- */
.shot-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: zoom-in;
}
.shot-zoom:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 14px; }
.shot-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(10, 19, 48, 0.92);
}
.lightbox.is-open { display: grid; }

/* The panel is a column: caption, scrollable stage, control bar. The stage is
   the only part that scrolls, so panning a zoomed screenshot never moves the
   controls or hides them behind the image (A04/A05). */
.lb-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  max-height: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lightbox-cap {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}
.lb-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background: #F4F6FB;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The stage is keyboard-focusable so a keyboard user can scroll (pan) a zoomed
   screenshot with the arrow keys (F04). */
.lb-stage:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.lb-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 8px;
  background: #fff;
}
.lb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.lb-btn:hover { background: var(--blue-50); border-color: #C6D6F2; }
.lb-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lb-btn[disabled] { opacity: 0.42; cursor: not-allowed; }
.lb-btn[disabled]:hover { background: #fff; border-color: var(--line); }
/* The "Full size" link is withheld for a presentation-cropped screenshot whose
   source still contains the strip the page frames out. .lb-btn sets an explicit
   display, which would otherwise defeat the hidden attribute. */
.lb-btn[hidden] { display: none; }
.lb-zoom {
  min-width: 58px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lb-btn-close { margin-left: auto; }
body.lb-lock { overflow: hidden; }

/* ---------- named tool logos ---------- */
.stack-logo { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.sl-name {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================================
   CONTENT-PAGE EXPLAINER VISUALS
   Qualitative diagrams that make the surrounding argument visible. They contain
   no invented figures, no statuses and no claims: every element is a structural
   explanation of the text beside it. Colour is used only with a written label,
   so it always carries meaning.
   ========================================================================== */
.ex-fig { margin-top: 30px; }
.ex-fig figcaption {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ---- forecast comparison: reported confidence vs evidence-supported ----
   Two panels showing the same committed number read two ways. Colour is only
   ever paired with a written label, so it always carries meaning. */
.fc {
  margin: 34px 0 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.fc-panel {
  padding: 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
}
.fc-panel--claim { border-top-color: #B26A00; }
.fc-panel--evidence { border-top-color: var(--good); }
.fc-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.fc-big {
  margin: 12px 0 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
}
.fc-panel--claim .fc-big { color: #8A5200; }
.fc-panel--evidence .fc-big { color: #10603F; }
.fc-sub {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.fc-list {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}
.fc-list li {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.fc-mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
}
.fc-mark--ok { background: rgba(22, 134, 90, 0.14); border-color: #16865A; }
.fc-mark--gap { background: rgba(178, 106, 0, 0.14); border-color: #B26A00; }
.fc-mark--plain { border-color: var(--muted); }
.fc-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 96px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
}
.fc-arrow::before {
  content: "";
  width: 2px;
  height: 34px;
  background: var(--blue);
  opacity: .45;
}
.fc-arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--blue);
  opacity: .65;
}
.fc figcaption {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .fc { padding: 18px; }
  .fc-grid { grid-template-columns: minmax(0, 1fr); }
  .fc-arrow { width: 100%; flex-direction: row; justify-content: center; }
  .fc-arrow::before { width: 40px; height: 2px; }
  .fc-arrow::after { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--blue); border-right: 0; }
}

/* ---- source cards used outside a <figure> ---- */
.src-cards--three { grid-template-columns: repeat(3, 1fr); }
.src-cards-cap {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .src-cards--three { grid-template-columns: minmax(0, 1fr); }
}

/* ---- status pills: colour + written label, never colour alone ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pill--ok { color: #16865A; background: rgba(22, 134, 90, 0.08); border-color: rgba(22, 134, 90, 0.28); }
.pill--claim { color: #A85F00; background: rgba(178, 106, 0, 0.09); border-color: rgba(178, 106, 0, 0.28); }
.pill--gap { color: #9D2B2B; background: rgba(214, 69, 69, 0.08); border-color: rgba(214, 69, 69, 0.28); }

/* ---- source cards (seller / partner / buyer, evidence sources) ---- */
.src-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.src-cards--four { grid-template-columns: repeat(4, 1fr); }
.src-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.src-card h3,
.src-card h4 { margin: 0; color: var(--navy); font-size: 15.5px; letter-spacing: -0.01em; }
.src-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.src-card .pill { justify-self: start; }

/* ---- the two commercial outcomes (homepage) ----
   Deliberately built on .src-cards so both outcomes sit in the same component
   at identical weight. Only a two-column modifier and the text spacing inside
   each card are new. No new visual language. */
.src-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.outcome-card { padding: 26px 24px; gap: 12px; }
.outcome-kind {
  color: var(--blue-600);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.outcome-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.outcome-card > p { color: var(--ink-2); font-size: 14.5px; line-height: 1.62; }
.outcome-list { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.outcome-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
/* DA-07: a link inside a sentence must be identifiable without colour alone
   (axe link-in-text-block needs 3:1 against surrounding text, or an underline). */
.outcome-list a { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.outcome-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.outcome-link { margin-top: 4px !important; }
.outcome-link a { font-size: 13.5px; font-weight: 700; }

.outcomes-pillars {
  margin: 30px auto 0;
  max-width: 74ch;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.outcomes-pillars a { font-weight: 700; }

@media (max-width: 768px) {
  .src-cards--two { grid-template-columns: minmax(0, 1fr); }
  .outcome-card { padding: 22px 20px; }
}

/* ---- divergence diagram: three versions converging on one deal ---- */
.dv { margin-top: 4px; }
.dv-bus { position: relative; height: 38px; }
.dv-bus::before {
  content: "";
  position: absolute;
  left: 16.66%;
  right: 16.66%;
  top: 0;
  height: 2px;
  background: var(--line);
}
.dv-bus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--line);
}
.dv-node {
  width: fit-content;
  margin: 0 auto;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}
.dv-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  text-align: center;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---- conflict pair: two sources that disagree ---- */
.cp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.cp-panel { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.cp-panel h4 { margin: 0 0 7px; color: var(--navy); font-size: 14px; }
.cp-panel p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cp-panel .pill { margin-top: 12px; }
.cp-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

/* ---- MEDDPICC elements with their evidence source marked ---- */
.mdc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mdc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mdc-letter {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 17px;
  font-weight: 800;
}
.mdc-body strong { display: block; color: var(--navy); font-size: 15px; letter-spacing: -0.01em; }
.mdc-body p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.mdc-body .pill { margin-top: 11px; }
.mdc-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mdc-key p { margin: 0; flex: 1 1 100%; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }

/* ---- credential strip (factual, no logos) ---- */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.creds--four { grid-template-columns: repeat(2, 1fr); }
.cred { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.cred .ci {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue);
}
.cred strong { display: block; color: var(--navy); font-size: 14.5px; letter-spacing: -0.01em; }
.cred span { display: block; margin-top: 5px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---- explainer responsive ---- */
@media (max-width: 768px) {
  .src-cards { grid-template-columns: 1fr; }
  .src-cards--four { grid-template-columns: 1fr; }
  .mdc-grid { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .cp { grid-template-columns: 1fr; }
  .cp-vs { justify-self: center; }
}
@media (max-width: 1024px) {
  .src-cards--four { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- content-page responsive ---------- */
@media (max-width: 1024px) {
  .page-hero { padding: 112px 0 48px; }
}
@media (max-width: 768px) {
  .page-hero { padding: 96px 0 40px; }
  .page-hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.3rem); }
  .page-lead { font-size: 1.05rem; }
  .prose h2 { margin-top: 44px; }
  .res-links { grid-template-columns: 1fr; }
  .page-cta { padding: 30px 24px; border-radius: var(--radius); }
  .lightbox { padding: 10px; }
  .lb-panel { border-radius: var(--radius); }
  .lb-stage { padding: 8px; }
  .lightbox-cap { padding: 11px 14px; font-size: 12.5px; }
  .lb-bar { padding: 10px 12px; gap: 6px; }
  .lb-btn { min-height: 38px; padding: 8px 11px; font-size: 13px; }
  .lb-zoom { min-width: 50px; }
}
@media (max-width: 400px) {
  .page-hero { padding: 88px 0 34px; }
  .page-body { padding: 4px 0 72px; }
  .callout { padding: 18px 16px; }
}

/* ---------- homepage additions ---------- */
/* The prominent descriptive line under the hero. The category line sits
   directly above it, so the two read as one short block and the tagline does
   not float away from the copy it belongs to. */
.hero-tagline {
  margin-top: 8px;
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.012em;
}
.hero-resources {
  margin-top: 24px;
  max-width: 560px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}
.hero-resources a { font-weight: 700; }
.blind-more { margin-top: 18px; font-weight: 700; }

/* Honest note about the prototype's own score wording. */
.ps-note {
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--bg-alt);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ============================================================================
   SUPPORTING-PAGE EXPLAINER VISUALS
   Purpose-built diagrams that explain the problem and the commercial consequence
   on each guide page. They are deliberately NOT product screenshots — the
   Product section on the homepage already shows the application. Each visual is
   self-contained, uses the navy/blue/white palette, and carries a written label
   for every colour so meaning is never conveyed by colour alone.
   ========================================================================== */

/* ---- 1. Evidence-gap flow: seller / partner / buyer into one reconciled view ---- */
.eg { margin: 34px 0 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); }
.eg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.eg-col {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
}
.eg-col--claim { border-top: 3px solid #B26A00; }
.eg-col--gap { border-top: 3px solid #C0392B; }
.eg-col--ok { border-top: 3px solid var(--good); }
.eg-who { margin: 0; font: 800 11.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.eg-says { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--navy); }
.eg-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.eg-bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.eg-bar span { display: block; height: 100%; border-radius: 999px; }
.eg-col--claim .eg-bar span { width: 55%; background: #E9A23B; }
.eg-col--gap .eg-bar span { width: 18%; background: #D64545; }
.eg-col--ok .eg-bar span { width: 88%; background: #16865A; }
.eg-merge { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 6px; }
.eg-merge svg { display: block; width: 100%; max-width: 720px; height: auto; }
.eg-merge path { fill: none; stroke: rgba(24,121,252,.4); stroke-width: 1.5; }
.eg-node {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid var(--navy-line); color: #fff;
  font: 800 14px/1 "Manrope", system-ui, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 16px 34px -22px rgba(10,19,48,.6);
}
.eg-node b { color: var(--blue-300); }
.eg-out { margin: 16px 0 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.eg figcaption { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .eg { padding: 18px; }
  .eg-cols { grid-template-columns: minmax(0, 1fr); }
  .eg-merge svg { display: none; }
  .eg-node { display: flex; width: 100%; justify-content: center; margin-top: 4px; }
}

/* ---- 2. Risk-over-time: slippage compounding across a quarter ---- */
.rot { margin: 34px 0 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.rot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.rot-step { text-align: center; }
.rot-cap { margin: 0 0 10px; font: 800 11px/1.3 "Manrope", system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.rot-track { position: relative; height: 132px; border-radius: 10px; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; }
.rot-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #E9A23B, #B26A00); }
.rot-step:nth-child(1) .rot-fill { height: 22%; }
.rot-step:nth-child(2) .rot-fill { height: 46%; }
.rot-step:nth-child(3) .rot-fill { height: 70%; }
.rot-step:nth-child(4) .rot-fill { height: 100%; background: linear-gradient(180deg, #D64545, #9D2B2B); }
.rot-val { margin: 10px 0 0; font: 800 15px/1.2 "Manrope", system-ui, sans-serif; color: var(--navy); }
.rot-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.rot figcaption { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .rot { padding: 18px; }
  .rot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rot-track { height: 96px; }
}

/* ---- 3. Prioritisation matrix: deal score against evidence completeness ---- */
.pmx { margin: 34px 0 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.pmx-plot {
  position: relative; height: 320px; margin: 0 0 0 46px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(24,121,252,.05) 0 50%, rgba(22,134,90,.06) 50% 100%),
    linear-gradient(0deg, rgba(214,69,69,.05) 0 50%, rgba(24,121,252,.04) 50% 100%);
}
.pmx-y { position: absolute; left: -46px; top: 0; bottom: 0; width: 42px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 2px 0; }
.pmx-y span, .pmx-x span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pmx-x { display: flex; justify-content: space-between; margin: 8px 0 0 46px; }
.pmx-dot {
  position: absolute; display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, 50%);
}
.pmx-dot i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(10,19,48,.3); }
.pmx-dot b { font: 800 12px/1.2 "Manrope", system-ui, sans-serif; color: var(--ink-2); white-space: nowrap; }
.pmx-dot--ok i { background: #16865A; }
.pmx-dot--watch i { background: #E9A23B; }
.pmx-dot--risk i { background: #D64545; }
.pmx-quad { position: absolute; padding: 8px 10px; font: 800 10.5px/1.3 "Manrope", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pmx-quad--tr { top: 6px; right: 8px; text-align: right; color: #10603F; }
.pmx-quad--tl { top: 6px; left: 8px; }
.pmx-quad--br { bottom: 6px; right: 8px; text-align: right; }
.pmx-quad--bl { bottom: 6px; left: 8px; color: #8A5200; }
.pmx-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pmx-key span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.pmx-key i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pmx-key .k-ok i { background: #16865A; }
.pmx-key .k-watch i { background: #E9A23B; }
.pmx-key .k-risk i { background: #D64545; }
.pmx figcaption { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .pmx { padding: 18px; }
  .pmx-plot { height: 260px; margin-left: 34px; }
  .pmx-y { left: -34px; width: 30px; }
  .pmx-dot b { display: none; }
  .pmx-quad { font-size: 9.5px; }
}

/* ---- 4. Before/after pipeline view ---- */
.ba { margin: 34px 0 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ba-panel { padding: 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.ba-panel--after { border-top: 3px solid var(--good); }
.ba-panel--before { border-top: 3px solid var(--muted); }
.ba-title { margin: 0 0 4px; font: 800 15px/1.3 "Manrope", system-ui, sans-serif; color: var(--navy); }
.ba-sub { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }
.ba-row { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.ba-row:first-of-type { border-top: 0; }
.ba-name { font-size: 13.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.ba-tag { font: 800 11px/1 "Manrope", system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); background: var(--bg-alt); color: var(--muted); }
.ba-tag--ok { color: #10603F; background: rgba(22,134,90,.09); border-color: rgba(22,134,90,.28); }
.ba-tag--claim { color: #8A5200; background: rgba(178,106,0,.09); border-color: rgba(178,106,0,.28); }
.ba-tag--gap { color: #9D2B2B; background: rgba(214,69,69,.08); border-color: rgba(214,69,69,.28); }
.ba figcaption { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .ba { padding: 18px; }
  .ba-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 5. Qualification matrix: CRM field complete vs evidence verified ---- */
.qmx { margin: 34px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.qmx-head, .qmx-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 108px 132px; align-items: center; gap: 10px; }
.qmx-head { padding: 14px 20px; background: var(--navy); color: #fff; }
.qmx-head span { font: 800 10.5px/1.3 "Manrope", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.qmx-row { padding: 13px 20px; border-top: 1px solid var(--line-2); }
.qmx-row:nth-child(odd) { background: var(--bg-alt); }
.qmx-el { display: flex; align-items: baseline; gap: 11px; min-width: 0; }
.qmx-letter { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--blue-50); color: var(--blue-600); font: 800 12.5px/1 "Manrope", system-ui, sans-serif; }
.qmx-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.qmx-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.qmx-cell i { flex: none; width: 13px; height: 13px; border-radius: 4px; }
.qmx-cell--yes { color: #10603F; }
.qmx-cell--yes i { background: #16865A; }
.qmx-cell--no { color: #9D2B2B; }
.qmx-cell--no i { background: #D64545; }
.qmx-cell--part { color: #8A5200; }
.qmx-cell--part i { background: #E9A23B; }
.qmx-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--blue-50); font-size: 13px; font-weight: 700; color: var(--blue-600); }
.qmx-cap { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .qmx-head { display: none; }
  .qmx-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .qmx-cell::before { content: attr(data-l); font-weight: 800; color: var(--muted); margin-right: 2px; }
}

/* ---- 6. Evidence comparison pair (claim vs verified) ---- */
.evp { margin: 30px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.evp-panel { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
.evp-panel--claim { border-top: 3px solid #B26A00; }
.evp-panel--verify { border-top: 3px solid var(--good); }
.evp-h { margin: 0 0 4px; font: 800 11.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.evp-q { margin: 12px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: var(--navy); }
.evp-meta { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.evp-panel--claim .evp-q { color: #8A5200; }
.evp-panel--verify .evp-q { color: #10605F; }
.evp-cap { margin-top: 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 768px) {
  .evp { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7. Founder / credibility panel ---- */
.cred-panel {
  margin: 34px 0 0; padding: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
  border: 1px solid var(--navy-line); color: #fff;
}
.cred-panel .cred-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cred-panel .cred-item { padding-left: 16px; border-left: 2px solid rgba(76,151,255,.5); }
.cred-panel .cred-k { display: block; font: 800 1.35rem/1.1 "Manrope", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
.cred-panel .cred-v { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.72); }
.cred-panel .cred-note { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
@media (max-width: 900px) {
  .cred-panel .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .cred-panel { padding: 20px; }
  .cred-panel .cred-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   THREE STRATEGIC PILLARS
   The definitive product architecture: regional revenue intelligence,
   cross-company accountability and partner reliability intelligence. Each
   pillar is a distinct treatment (media + structured proof), not an icon card.
   ========================================================================== */
.pillars { background: #fff; }

.pillar-list { display: flex; flex-direction: column; gap: 64px; margin-top: 54px; }

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
/* Alternating composition keeps the three pillars visually distinct. */
.pillar--flip .pillar-media { order: 2; }

.pillar-media { min-width: 0; }
.pillar-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  box-shadow: 0 30px 60px -40px rgba(10, 19, 48, .55);
}
.pillar-frame img { display: block; width: 100%; height: auto; }

.pillar-num {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 11.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600);
  margin-bottom: 14px;
}
.pillar-num::before {
  content: ""; width: 26px; height: 2px; background: var(--blue); border-radius: 2px;
}
.pillar-name {
  margin: 0 0 10px;
  font: 800 clamp(1.4rem, 2.5vw, 1.85rem)/1.18 "Manrope", system-ui, sans-serif;
  letter-spacing: -.024em; color: var(--navy);
}
.pillar-promise {
  margin: 0 0 18px;
  font-size: 1.06rem; line-height: 1.5; font-weight: 700; color: var(--blue-600);
}
.pillar-text { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.68; }

.pillar-qa { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pillar-qa li { padding-left: 17px; position: relative; }
.pillar-qa li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.pillar-qa b {
  display: block; font: 800 11px/1.3 "Manrope", system-ui, sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.pillar-qa span { display: block; color: var(--ink-2); font-size: 14.5px; line-height: 1.58; }

/* Structured proof beside a pillar: ownership split (accountability) and
   reliability dimensions. Text labels only — no colour-only legends. */
.pillar-split { margin-top: 22px; border-top: 1px solid var(--line); }

/* Reliability read against profitability for the SAME partner. Pillar 03 owns
   both signals, so this block is what joins them: the reliability screenshot
   alone cannot show financial contribution, and the figures here are the ones
   visible in the partner table screenshot beside it. */
.reliability-contribution { margin-top: 24px; }
.rc-lead {
  margin: 14px 0 12px;
  color: var(--muted);
  font: 800 11px/1.3 "Manrope", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reliability-contribution .pillar-split-row b { min-width: 118px; }

/* Second screenshot inside a pillar's media column, spaced from the first. */
.pillar-frame + .pillar-second { margin-top: 18px; }
.pillar-second-cap {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.pillar-split-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.pillar-split-row b { font-size: 14px; color: var(--navy); font-weight: 700; }
.pillar-split-row span { font-size: 13px; color: var(--muted); text-align: right; }
.pillar-split-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1024px) {
  .pillar-list { gap: 52px; }
  .pillar { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pillar--flip .pillar-media { order: 0; }
}
@media (max-width: 560px) {
  .pillar-list { gap: 42px; margin-top: 38px; }
  .pillar-split-row { flex-direction: column; gap: 3px; }
  .pillar-split-row span { text-align: left; }
}

/* ============================================================================
   REGIONAL REVENUE STORY
   "Manage partner revenue without a local sales team."
   ========================================================================== */
.region-story { background: var(--bg-alt); border-block: 1px solid var(--line); }

.rs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 50px;
  align-items: center;
  margin-top: 46px;
}
.rs-scenario {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  margin-bottom: 26px;
}
.rs-scenario p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.68; }
.rs-scenario strong { color: var(--navy); }

.rs-questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rs-questions li {
  position: relative; padding-left: 28px;
  color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.5;
}
.rs-questions li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--blue);
}
.rs-questions li::after {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 7px; height: 4px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
.rs-answer {
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.65;
}
.rs-answer strong { color: var(--navy); }
.rs-answer a { text-decoration: underline; text-underline-offset: 2px; }

.rs-media { min-width: 0; }
.rs-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 30px 60px -40px rgba(10, 19, 48, .5);
}
.rs-frame img { display: block; width: 100%; height: auto; }
.rs-cap {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}

/* ============================================================================
   PARTNER PROFITABILITY STREAM
   The second commercial value stream (revenue vs profitability). Deliberately
   reuses the .rs-* grid and copy components above rather than introducing a
   parallel set of rules, so the page gains one section without new components.
   White here, between the alt-tinted regional story above and the alt-tinted
   workflow section below, keeps the band rhythm intact.
   ========================================================================== */
.profit-stream { background: #fff; }

/* The two commercial outcomes previously carried a single summary line here;
   it moved into its own #outcomes section, so these rules were removed rather
   than left orphaned. */

@media (max-width: 1024px) {
  .rs-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ============================================================================
   FOUR-STAGE PRODUCT JOURNEY
   How DealAlign operates: find the truth, fill the gaps, drive action,
   forecast with confidence. Four equal media panels, one per stage.
   ========================================================================== */
.journey4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 52px; }

.j4-step {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.j4-media { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.j4-media img { display: block; width: 100%; height: auto; }
.j4-body { padding: 22px 24px 24px; }
.j4-idx {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font: 800 11px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600);
}
.j4-idx i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--blue-50); color: var(--blue-600); font-style: normal; font-size: 11px;
}
.j4-title {
  margin: 0 0 8px;
  font: 800 1.16rem/1.25 "Manrope", system-ui, sans-serif;
  letter-spacing: -.018em; color: var(--navy);
}
.j4-text { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.62; }

@media (max-width: 860px) { .journey4 { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ---------- four-stage journey strip (text only: each product screenshot
   keeps a single home on the homepage, so no visual repeats) ---------- */
.journey-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.journey-strip .flow-node {
  align-items: flex-start; text-align: left;
  padding: 26px 24px 28px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.journey-strip .flow-node::after { display: none; }
.journey-strip .flow-index {
  display: grid; place-items: center; width: 30px; height: 30px;
  margin-bottom: 14px; border-radius: 8px; letter-spacing: 0;
  background: var(--blue-50); color: var(--blue-600);
  font: 800 12px/1 "Manrope", system-ui, sans-serif;
}
.journey-strip .flow-name { display: block; margin: 0 0 8px; font-size: 17px; line-height: 1.25; }
.journey-strip .flow-sub {
  display: block;
  font-size: 13.5px; line-height: 1.55; color: var(--muted); font-weight: 500;
}
.journey-note {
  margin: 30px auto 0; max-width: 760px; text-align: center;
  color: var(--muted); font-size: 14px; line-height: 1.65;
}
@media (max-width: 900px) { .journey-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .journey-strip { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   REMOVED: PILLAR → COMMERCIAL OUTCOME MAPPING (.roi-pillars, .roi-pillar)

   This was the grid that restated each pillar next to a commercial outcome.
   It was removed with the commercial-case section: the three-pillar section now
   carries each pillar's own commercial outcome, so the mapping was a repeat.
   ========================================================================== */

/* ============================================================================
   PRACTICAL FAQ (Product page)
   A short question/answer block. Deliberately plain: no accordion widget, no
   new interaction, no JavaScript. It reuses the existing prose type scale and
   the existing card border treatment so it sits inside the page language
   without introducing a competing component.
   ========================================================================== */
.faq {
  margin: 26px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq-item {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--line-2);
}
.faq-item h3 {
  margin: 0 0 8px;
  font: 800 1.02rem/1.35 "Manrope", system-ui, sans-serif;
  letter-spacing: -0.012em;
  color: var(--navy);
}
.faq-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width: 768px) {
  .faq-item { padding: 18px 0 16px; }
  .faq-item p { font-size: 14.5px; }
}

/* Contextual invitation on educational pages. Sits at the point of decision
   (after a checklist), inside the existing .callout treatment so it reads as
   guidance rather than a banner. One per page, never repeated. */
.callout.page-invite { border-left-color: var(--blue); }
.callout.page-invite a { font-weight: 800; white-space: nowrap; }

/* ---------- print ---------- */
@media print {
  .site-header, .menu-toggle, .hero-actions { display: none; }
  .reveal { opacity: 1; transform: none; }
}