/* ============================================================
   MyPA — Design System v2  |  All Inter · Premium AI brand
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --blue:        #1E90FF;
  --blue-light:  #4BA6FF;
  --blue-deep:   #1577E0;
  --blue-pale:   #EBF5FF;
  --blue-mid:    #CEE7FF;
  --blue-text:   #006DD6;   /* small-text blue: AA 5.05:1 on white, 4.58:1 on --blue-pale */
  --blue-glow:   rgba(30,144,255,0.22);

  --green:       #22C55E;
  --green-soft:  #F0FDF4;
  --green-border:#BDEBC8;

  --ink:         #0A0F1C;
  --ink-2:       #374060;
  --ink-3:       #1A2035;
  --muted:       #627298;   /* AA: 4.79:1 on white, 4.55:1 on --bg-tint */

  --bg:          #FFFFFF;
  --bg-tint:     #F7F9FC;
  --bg-cool:     #EEF2FB;
  --line:        #E4E8F2;
  --line-soft:   #F0F2F8;
  --r-hero:      16px;      /* hero typing bar + its chips only; every other box stays 12px (2026-09-10) */

  --shadow-sm:   0 1px 4px rgba(10,15,28,.07), 0 1px 2px rgba(10,15,28,.04);
  --shadow-md:   0 4px 20px rgba(10,15,28,.09), 0 2px 8px rgba(10,15,28,.05);
  --shadow-lg:   0 16px 56px rgba(10,15,28,.13), 0 4px 16px rgba(10,15,28,.07);
  --shadow-blue: 0 4px 24px rgba(30,144,255,.28);

  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  8px;
  --r-lg:  8px;
  --r-xl:  8px;
  --r-2xl: 8px;
  --r-pill:999px;

  --font:      'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;

  --maxw: 1160px;

  /* Easing — strong curves for UI motion */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─────────────────────────────────────────────────────────
   REVEAL SYSTEM — the hidden starting state only, gated by
   .js-on on <html> so no-JS visitors see all content. The
   inline <head> script sets the class before first paint, so
   there is no FOUC.

   The reveal itself is Motion's job as of 2026-09-04: inView
   in main.js adds `.is-in` (57 rules below hang child
   animations off it) and animates opacity and transform. The
   CSS keyframe that used to live here was removed so the two
   cannot animate the same element at once.
   ───────────────────────────────────────────────────────── */
/* The pre-hide pair that used to live here (opacity 0 / translateY 16px) was
   removed on 2026-09-04 along with the reveal itself. `.reveal` is now only a
   marker: main.js adds `.is-in` when the element reaches the viewport, and the
   rules further down use that to start the animations inside the built
   graphics. The element itself never moves. */

/* Process timeline — vertical gradient line draws down on parent reveal */
.js-on .process-vertical::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease-out-expo);
}
.js-on .process-vertical.is-in::before {
  transform: scaleY(1);
}

/* Radial diagram — spokes draw outward, dots fade, labels fade.
   Triggered by `.radial-diagram.is-in` (the wrapper already has class="reveal"). */
.js-on .radial-diagram svg line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 800ms var(--ease-out-expo);
}
.js-on .radial-diagram.is-in svg line { stroke-dashoffset: 0; }
.js-on .radial-diagram svg g[stroke] line:nth-child(1) { transition-delay: 100ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(2) { transition-delay: 160ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(3) { transition-delay: 220ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(4) { transition-delay: 280ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(5) { transition-delay: 340ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(6) { transition-delay: 400ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(7) { transition-delay: 460ms; }
.js-on .radial-diagram svg g[stroke] line:nth-child(8) { transition-delay: 520ms; }

.js-on .radial-diagram svg g[fill] circle {
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.js-on .radial-diagram.is-in svg g[fill] circle { opacity: 1; }
.js-on .radial-diagram svg g[fill] circle:nth-child(1) { transition-delay: 600ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(2) { transition-delay: 660ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(3) { transition-delay: 720ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(4) { transition-delay: 780ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(5) { transition-delay: 840ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(6) { transition-delay: 900ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(7) { transition-delay: 960ms; }
.js-on .radial-diagram svg g[fill] circle:nth-child(8) { transition-delay: 1020ms; }

.js-on .radial-diagram svg g[font-family] text {
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}
.js-on .radial-diagram.is-in svg g[font-family] text { opacity: 1; }
.js-on .radial-diagram svg g[font-family] text:nth-child(1) { transition-delay: 780ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(2) { transition-delay: 840ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(3) { transition-delay: 900ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(4) { transition-delay: 960ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(5) { transition-delay: 1020ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(6) { transition-delay: 1080ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(7) { transition-delay: 1140ms; }
.js-on .radial-diagram svg g[font-family] text:nth-child(8) { transition-delay: 1200ms; }

@media (prefers-reduced-motion: reduce) {
  /* `.reveal` no longer hides anything, so there is nothing to restore here.
     What remains are the graphic animations, held at their finished state. */
  .js-on .process-vertical::before { transform: scaleY(1); transition: none; }
  .js-on .radial-diagram svg line { stroke-dashoffset: 0; transition: none; }
  .js-on .radial-diagram svg g[fill] circle,
  .js-on .radial-diagram svg g[font-family] text {
    opacity: 1;
    transition: none;
  }
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* clip, not hidden (2026-10-02): hidden made <body> a scroll container that
   never scrolls, which broke scroll-driven animations (SCROLL FOCUS) and
   position: sticky. clip trims sideways overflow the same way. */
body {
  overflow-x: clip;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Film-grain overlay — subtle analog atmosphere across the page ───────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.02; }
}

/* ── Branded text selection ──────────────────────────────────────────────── */
::selection {
  background: var(--blue);
  color: #fff;
}
::-moz-selection {
  background: var(--blue);
  color: #fff;
}

/* ── Custom scrollbar (slim, brand-tinted) ───────────────────────────────── */
@media (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(30,144,255,0.35) transparent;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(30,144,255,0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
    transition: background 0.2s var(--ease-out);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(30,144,255,0.5);
    background-clip: padding-box;
  }
}
img, svg { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── LAYOUT ─────────────────────────────────────────────── */
.page-shell { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px);
}
.container-narrow { max-width: 760px; }

section { padding: clamp(72px, 9vw, 120px) 0; }
section.tight   { padding: clamp(44px, 5.5vw, 72px) 0; }
section.loose   { padding: clamp(96px, 11vw, 144px) 0; }
section.compact { padding: clamp(36px, 4.5vw, 60px) 0; }
section.surface { background: var(--bg-tint); }
section.dark-section { background: var(--ink); color: #fff; }
section.dark-section p { color: rgba(255,255,255,.65); }
section.dark-section .label { color: var(--blue-light); }
.surface-cool { background: var(--ink); }
.surface-cool h2 { color: #fff; }
.surface-cool p  { color: rgba(255,255,255,.65); }
.surface-cool .label { color: var(--blue-light); }
.spotlight { border-radius: var(--r-xl); padding: clamp(40px, 5vw, 64px); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.left-heavy  { grid-template-columns: 1.5fr 1fr; }
.right-heavy { grid-template-columns: 1fr 1.5fr; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
p  { color: var(--ink-2); line-height: 1.7; }

.display {
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.display .accent { color: var(--blue); }

.lead {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.7;
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }

.eyebrow-dark { color: rgba(255,255,255,0.6); }
.eyebrow-dark::before { background: rgba(255,255,255,0.3); }

.label {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 14px;
  font-family: var(--font-mono);
}
.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.serif { font-style: italic; font-weight: 300; color: var(--blue); }
h1 .serif, h2 .serif { color: inherit; font-style: italic; font-weight: 300; }

.section-head { max-width: 620px; margin-bottom: clamp(44px, 5.5vw, 68px); }
.section-head--wide { max-width: none; }
.section-head--wide h2 { white-space: nowrap; }
@media (max-width: 700px) { .section-head--wide h2 { white-space: normal; } }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { margin-top: 6px; }
.section-head p  { margin-top: 16px; max-width: 520px; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background .18s,
    color .18s,
    box-shadow .18s,
    border-color .18s,
    transform 140ms var(--ease-out);
  white-space: nowrap;
  border: 1.5px solid transparent;
  text-decoration: none;
  letter-spacing: -0.005em;
}
/* Press feedback — applies to keyboard activation too (JS mousedown only catches mouse) */
.btn-primary:active,
.btn-blue:active,
.btn-ghost:active,
.btn-ghost-white:active,
.btn-white:active,
.btn-secondary:active { transform: scale(0.97); }

/* Keyboard focus rings — keep mouse users free of outlines */
.btn:focus { outline: none; }
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.btn-ghost-white:focus-visible { outline-color: #fff; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 20px rgba(30,144,255,.26);
  border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: 0 9px 28px rgba(30,144,255,.36); transform: translateY(-1px); }

.btn-secondary {
  background: var(--bg-cool);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--line); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-ghost.active { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); }

.btn-ghost-white {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); color: #fff; }

/* ── Cookie consent banner (injected site-wide by main.js) ────────────── */
.cookie-banner {
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 1200;
  width: min(380px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10,15,28,0.16);
  padding: 20px 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner-text {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.cookie-banner-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions { display: flex; gap: 10px; }
.cookie-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid var(--blue);
  transition: background .18s, color .18s, border-color .18s;
}
.cookie-btn--accept { background: var(--blue); color: #fff; }
.cookie-btn--accept:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.cookie-btn--ghost { background: transparent; color: var(--blue); }
.cookie-btn--ghost:hover { background: var(--blue-pale); }
.cookie-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}
@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

.btn-blue {
  background: var(--blue-pale);
  color: var(--blue-deep);
  border-color: transparent;
}
.btn-blue:hover { background: var(--blue-mid); }

.btn-white {
  background: #fff;
  color: var(--blue-deep);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}
.btn-white:hover { background: var(--blue-pale); box-shadow: 0 6px 28px rgba(0,0,0,0.18); }

.arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

/* ── NAV ────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,15,28,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.nav.scrolled { background: rgba(10,15,28,0.98); border-bottom-color: rgba(255,255,255,0.1); }

/* light nav variant — used on inner pages */
.nav.nav-light { background: rgba(255,255,255,0.94); border-bottom-color: transparent; }
.nav.nav-light.scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 20px rgba(10,15,28,.06); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: center; }
.brand-mark img { width: 34px; height: 34px; }
.brand-name { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.brand-sub {
  display: block;
  font-size: 0.62rem; font-weight: 400; color: rgba(255,255,255,0.4);
  letter-spacing: .04em; line-height: 1.3; margin-top: 1px; font-family: var(--font-mono);
}
.nav-light .brand-name { color: var(--ink); }
.nav-light .brand-sub  { color: var(--muted); }

.nav-links { display: flex; gap: 2px; align-items: center; margin: 0 auto; }
.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.6);
  padding: 7px 13px; border-radius: var(--r-sm);
  transition: color .15s, background .15s; text-decoration: none;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-links a.active { color: #fff; background: rgba(30,144,255,0.18); }
.nav-light .nav-links a { color: var(--ink-2); }
.nav-light .nav-links a:hover { color: var(--blue); background: var(--blue-pale); }
.nav-light .nav-links a.active { color: var(--blue); background: var(--blue-pale); }

.nav-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.nav-cta .btn { padding: 9px 18px; font-size: 0.83rem; }
.nav .btn-ghost { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.2); }
.nav .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.07); }
.nav-light .btn-ghost { color: var(--ink); border-color: var(--line); }
.nav-light .btn-ghost:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); }

.menu-btn {
  display: none;
  align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 0.83rem; font-weight: 500;
  color: rgba(255,255,255,0.8); border: 1.5px solid rgba(255,255,255,0.18);
  background: transparent; cursor: pointer; margin-left: auto; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.menu-btn:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.nav-light .menu-btn { color: var(--ink); border-color: var(--line); background: var(--bg); }
.nav-light .menu-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── MOBILE DRAWER ──────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(340px, 90vw); height: 100vh;
  background: var(--color-paper);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 48px rgba(10,15,28,0.16);
  z-index: 200;
  transform: translateX(110%);
  transition: transform .42s var(--ease-drawer);
  display: flex; flex-direction: column; padding: 24px; overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;
}
.drawer-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-tint); color: var(--ink-2);
  border: 1px solid var(--line); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.drawer-close:hover { background: var(--blue-pale); color: var(--blue); border-color: var(--blue); }
.mobile-drawer .brand-name { color: var(--ink); }
.mobile-drawer .brand-sub { color: var(--muted); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mobile-nav-links a {
  font-size: 1rem; font-weight: 500; color: var(--ink-2);
  padding: 13px 16px; border-radius: 8px;
  transition: color .15s, background .15s; text-decoration: none;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--blue); background: var(--blue-pale); }
.mobile-nav-cta {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line);
}
.mobile-nav-cta .btn { justify-content: center; }

.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 199; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; }

/* ═══════════════════════════════════════════════════════════
   HERO — ACCORDION
   ═══════════════════════════════════════════════════════════ */

.hero-v2 {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
  overflow: hidden;
  padding: clamp(26px, 2.9vw, 42px) 0 clamp(32px, 3.4vw, 47px);
}

/* Mirrored blue radial glows — matches product + web app hero scheme */
.hero-v2::before,
.hero-v2::after {
  content: '';
  position: absolute;
  top: -180px;
  width: 720px;
  height: 720px;
  pointer-events: none;
  z-index: 0;
}
.hero-v2::before {
  left: -12%;
  background: radial-gradient(circle, rgba(30,144,255,0.22), transparent 62%);
}
.hero-v2::after {
  right: -12%;
  background: radial-gradient(circle, rgba(91,168,255,0.20), transparent 62%);
}

.hero-v2 .container { position: relative; z-index: 1; }

.hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) auto;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-v2-acc { justify-self: end; }

/* Left: copy */
.hero-v2-copy { max-width: 480px; }

.hero-v2-tag {
  display: inline-block;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-v2-tag .dot { display: none; }

.hero-v2 h1 {
  color: var(--ink);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin-bottom: 16px;
}
.hero-v2 h1 .accent { color: var(--blue); }
/* Word-stagger spans need to be inline-block to accept transforms; opacity:0 prevents
   flash-of-visible content before JS runs the entrance animation. Gated by .js-on so
   if Motion fails to load (main.js drops the class), words display normally. */
.hero-v2 h1 .h1-word { display: inline-block; }
.js-on .hero-v2 h1 .h1-word { opacity: 0; }

.hero-v2 .lead {
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 460px;
  line-height: 1.65;
}

.hero-v2 .buttons { margin-top: 24px; }

.hero-v2-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.hero-v2-trust strong { color: var(--ink-2); font-weight: 600; }
.hero-v2-trust i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--line); }

/* Right: accordion */
.hero-v2-acc { display: flex; align-items: stretch; }
@media (hover: hover) and (pointer: fine) {
  .acc-panel:hover:not(.is-active) {
    background: rgba(255,255,255,0.72);
    border-color: rgba(255,255,255,0.75);
    box-shadow:
      0 4px 18px rgba(10,15,28,0.08),
      inset 0 1px 0 rgba(255,255,255,0.85);
  }
}

/* label — vertical when collapsed, horizontal when active */
.acc-label {
  position: absolute;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  z-index: 3;
  text-shadow: 0 1px 12px rgba(255,255,255,0.9);
  transition: transform 360ms var(--ease-out),
              bottom 360ms var(--ease-out),
              left 360ms var(--ease-out),
              font-size 280ms var(--ease-out),
              opacity 260ms var(--ease-out);
  pointer-events: none;
}
/* collapsed: rotate 90deg, sit in middle-bottom area */
.acc-panel:not(.is-active) .acc-label {
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center center;
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.92;
}

/* mobile fallback phone (accordion hidden on mobile) */
.hero-v2-mobile-img {
  display: none;
  justify-content: center;
  align-items: flex-end;
}
.hero-v2-mobile-img img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 24px 56px rgba(30,144,255,.22));
}

/* ── TRUST BAND — light, matches page surface ───────────── */
.trust-band {
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.trust-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; padding: 20px 0; flex-wrap: wrap;
}
.trust-label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
/* The label refuses to shrink so it never squashes beside the names. English
   fits on a phone, but the longer translations (Turkish is the widest) then
   ran off both edges of the band. Below 620px it may wrap instead
   (2026-09-04). */
@media (max-width: 620px) {
  .trust-label {
    flex-shrink: 1;
    min-width: 0;
    text-align: center;
    white-space: normal;
  }
}
.trust-names {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.trust-names i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin: 0 18px; }
/* ── Prompt marquee — 3 rows of white outlined command bubbles ─────────── */
.prompt-marquee {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(24px, 2.8vw, 36px);
  /* section-dividing hairline removed */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.prompt-marquee-row {
  display: flex;
  gap: 0;
  width: max-content;
}
.prompt-marquee-row--1 { animation: prompt-marquee-left 130s linear infinite; }
.prompt-marquee-row--2 { animation: prompt-marquee-right 155s linear infinite; }
.prompt-marquee-row--3 { animation: prompt-marquee-left 115s linear infinite; }

.prompt-marquee:hover .prompt-marquee-row { animation-play-state: paused; }

.prompt-marquee-track {
  display: flex;
  gap: 10px;
  padding-right: 10px;
  flex-shrink: 0;
}
.prompt-bubble {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out), background .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prompt-bubble:hover {
    border-color: var(--blue-mid);
    color: var(--ink);
    background: var(--bg-tint);
  }
}

@keyframes prompt-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes prompt-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-marquee-row { animation: none; }
  .prompt-marquee {
    flex-wrap: wrap;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .prompt-bubble {
    font-size: 0.82rem;
    padding: 8px 14px;
  }
  .prompt-marquee { gap: 8px; }
  .prompt-marquee-track { gap: 8px; padding-right: 8px; }
}

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card.lift {
  transition: box-shadow .22s, border-color .22s, transform .22s;
}
@media (hover: hover) and (pointer: fine) {
  .card.lift:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(30,144,255,.18);
    transform: translateY(-3px);
  }
}
.feature-card { display: flex; flex-direction: column; gap: 10px; }
.feature-card .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--blue-pale); border-radius: 8px;
  color: var(--blue); flex-shrink: 0;
}
.feature-card .icon svg { width: 20px; height: 20px; }
.feature-card h3 { margin-top: 4px; }
.feature-card p { font-size: .9rem; margin: 0; }

/* ── PILL ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--blue-pale); color: var(--blue-deep);
  font-size: 0.75rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); /* pulse removed */ }
/* @keyframes pulse-dot removed — no pulsing dots on the site */

/* ── STATS ──────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 2px; background: var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.stat { background: var(--bg); padding: 28px 24px; text-align: center; }
.stat .num { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.stat .lbl { font-size: .8rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* ── VALUE LADDER ───────────────────────────────────────── */
.value-ladder { display: flex; flex-direction: column; }
.value-row {
  display: grid; gap: 0 16px; padding: 22px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 72px 1fr 1.4fr;
}
.value-row:last-child { border-bottom: none; }
.vr-num { font-size: 1rem; font-weight: 700; color: var(--blue); padding-top: 2px; font-family: var(--font-mono); }
.vr-title { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.vr-body  { font-size: .87rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ── TIMELINE / STEPS ───────────────────────────────────── */
.timeline { display: grid; gap: 24px; margin-top: 48px; }
.step { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; }
.step .num {
  width: 36px; height: 36px; background: var(--blue); color: #fff; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700; margin-bottom: 14px;
}

/* ── PROCESS — legacy step variant (kept for any inner-page uses) ── */
.process-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; }
.process-step { position: relative; padding-top: 20px; }
.process-step::before {
  content: ''; position: absolute; top: 0; left: 0; width: 36px; height: 4px;
  background: var(--blue); border-radius: 2px;
}
.process-step .pnum {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; color: var(--blue); margin-bottom: 14px;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
.process-step p { font-size: 0.88rem; color: var(--ink-2); }

/* ── PROCESS TIMELINE — vertical glass timeline on faint blue ─ */
.process-section {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--blue-pale);
  color: var(--ink);
}
.process-section .label { color: var(--blue-text); }
.process-section h2 { color: var(--ink); }
.process-section h2 .serif { color: var(--blue); }

/* 2-column split using areas so the CTA spans only the timeline rows */
.process-launch-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "head ."
    "list cta";
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(20px, 2.5vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.process-launch-head {
  grid-area: head;
  margin-bottom: 0;
}
.process-launch-head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}
.process-vertical {
  grid-area: list;
  margin-top: 0;
  align-self: stretch;
}
.launch-cta {
  grid-area: cta;
  align-self: end;
  justify-self: center;
  height: calc(100% - 40px);
  width: calc(100% - 20px);
}

/* ── FINAL CTA · single confident focal panel (no glass) ──────────── */
.final-cta {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--blue-mid);
  border-radius: var(--r-lg);
  padding: clamp(40px, 4.8vw, 68px) clamp(28px, 4vw, 60px);
  box-shadow: 0 20px 56px rgba(10,15,28,0.09), 0 2px 6px rgba(30,144,255,0.05);
}
.final-cta-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.final-cta-heading {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.final-cta-heading .serif { font-style: italic; font-weight: 300; color: var(--blue); }
.final-cta-lead {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto clamp(28px, 3vw, 36px);
  text-wrap: pretty;
}
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(22px, 2.6vw, 30px);
}
.final-cta-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.final-cta-foot i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blue-mid);
  flex-shrink: 0;
}

.process-vertical {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  max-width: 720px;
  position: relative;
}
/* Vertical gradient line behind the nodes */
.process-vertical::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue-light) 100%);
  opacity: 0.5;
  border-radius: 1px;
}
.process-stop {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 20px;
  padding-bottom: clamp(12px, 1.6vw, 18px);
}
.process-stop:last-child { padding-bottom: 0; }

/* Glowing circular node */
.process-stop-node {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  border: 4px solid var(--blue-pale);
  box-shadow:
    0 0 0 1px rgba(30,144,255,0.35),
    0 0 18px rgba(30,144,255,0.45);
  margin-top: 10px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .process-stop:hover .process-stop-node {
    transform: scale(1.06);
    box-shadow:
      0 0 0 1px rgba(30,144,255,0.45),
      0 0 24px rgba(30,144,255,0.6);
  }
}

/* Glass content card */
.process-stop-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(12px, 1.4vw, 16px) clamp(20px, 2.2vw, 26px);
  box-shadow:
    0 8px 28px rgba(10,15,28,0.06),
    0 1px 2px rgba(30,144,255,0.04);
  transition:
    transform .25s var(--ease-out),
    box-shadow .25s var(--ease-out),
    border-color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .process-stop:hover .process-stop-card {
    transform: translateY(-2px);
    border-color: rgba(30,144,255,0.18);
    box-shadow:
      0 14px 38px rgba(10,15,28,0.09),
      0 2px 6px rgba(30,144,255,0.08);
  }
}
.process-stop-pnum {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}
.process-stop-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 4px;
}
.process-stop-card p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 880px) {
  .process-launch-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "list"
      "cta";
    row-gap: clamp(28px, 4vw, 48px);
  }
}
@media (max-width: 540px) {
  .process-vertical::before { left: 11px; }
  .process-stop { grid-template-columns: 24px 1fr; gap: 16px; }
  .process-stop-node { width: 24px; height: 24px; border-width: 3px; }
}

/* ── CHECK GRID ─────────────────────────────────────────── */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 28px; }
.check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--bg-tint); border: 1px solid var(--line);
}
.check::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.check span { font-size: 0.9rem; font-weight: 500; color: var(--ink); }

/* ── SHOWCASE (screenshots in cards) ───────────────────── */
.showcase-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 52px; }
.showcase-card { display: flex; flex-direction: column; gap: 16px; }
.showcase-screen {
  background: var(--bg-tint); border-radius: var(--r-lg);
  padding: 24px 20px 0; position: relative; overflow: hidden;
  aspect-ratio: 3/4; display: flex; justify-content: center; align-items: flex-start;
  border: 1px solid var(--line); transition: transform .25s, box-shadow .25s;
}
.showcase-card:hover .showcase-screen { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.showcase-screen img { width: 90%; max-width: 230px; border-radius: 8px; box-shadow: 0 14px 32px rgba(10,15,28,0.14); margin-top: 12px; }
.showcase-meta { display: flex; flex-direction: column; gap: 6px; }
.showcase-tag { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--blue); text-transform: uppercase; }
.showcase-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.showcase-desc  { font-size: 0.9rem; color: var(--muted); line-height: 1.55; }

/* ── HERO MOCKUP (generic) ──────────────────────────────── */
.hero-mockup { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.hero-mockup img { width: 100%; max-width: 440px; filter: drop-shadow(0 32px 64px rgba(30,144,255,.18)); }

/* ── PAGE HERO (dark intro for inner pages) ─────────────── */
.page-hero {
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  padding: clamp(112px, 12vw, 168px) 0 clamp(60px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -200px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(30,144,255,0.10), transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start;
}
.page-hero h1 {
  color: var(--ink);
  margin-top: 6px;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.page-hero .label { color: var(--blue-text); }
.page-hero .lead { color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════
   CORE FEATURES BENTO — light surface, mouse-following spotlight
   ══════════════════════════════════════════════════════════ */
.features-section {
  padding: clamp(72px, 9vw, 120px) 0;
  background: #fff;
}
.features-section .container { max-width: 1400px; }
.features-section .section-head {
  max-width: 960px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* Shared-border bento — gap-as-border trick handles mixed spans cleanly */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.bento-item {
  position: relative;
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: clamp(24px, 2.6vw, 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color .3s var(--ease-out);
}
/* Alt-tint on the two bento-wide cells for subtle rhythm */
.bento-wide { background: var(--bg-tint); }
/* Mouse-following radial spotlight — driven by JS-set CSS vars */
.bento-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(30,144,255,0.10),
    transparent 45%
  );
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.bento-item > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .bento-item:hover::before { opacity: 1; }
}

.bento-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.bento-item h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink);
  margin: 2px 0 0;
}
.bento-item p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* Hero cell (top-left 2x2) */
.bento-hero {
  grid-column: span 2;
  grid-row: span 2;
  padding: clamp(32px, 3.4vw, 44px);
  gap: 14px;
}
.bento-hero h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.bento-hero p {
  font-size: 1rem;
  max-width: 46ch;
}

.bento-wide      { grid-column: span 2; }
.bento-wide-full { grid-column: span 3; }

/* Statement variant — breaks the icon-tag-h3-p mold for one bento cell.
   Type-led pull-quote moment that reads as deliberate, not templated. */
.bento-item--statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px);
}
.bento-item--statement .bento-statement {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.bento-item--statement .bento-statement .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.bento-item--statement .bento-statement-sub {
  font-size: clamp(0.96rem, 1.05vw, 1.04rem);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 42ch;
  font-weight: 400;
}

/* Engine chip stack inside hero cell */
.engine-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.engine-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  transition:
    background .22s var(--ease-out),
    border-color .22s var(--ease-out),
    color .22s var(--ease-out),
    transform .25s var(--ease-out);
  cursor: default;
}
/* Chips are cursor:default — keep hover quiet, no lift, no color shift */
@media (hover: hover) and (pointer: fine) {
  .engine-chip:hover {
    background: var(--blue-pale);
    border-color: var(--blue-mid);
  }
}
.engine-dot {
  transition: transform .25s var(--ease-out);
}
.engine-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.dot-smart       { background: linear-gradient(135deg, #4BA6FF, #1E90FF); }
.dot-chatgpt     { background: #10A37F; }
.dot-gemini      { background: #4796E0; }
.dot-claude      { background: #D97757; }
.dot-perplexity  { background: #20B8A0; }
.dot-grok        { background: #1B1B1B; }
.dot-llama       { background: #0866FF; }
.dot-deepseek    { background: #4D6BFE; }

.engine-chip--more {
  background: var(--blue-pale);
  border-color: var(--blue-mid);
  color: var(--blue-deep);
  font-weight: 600;
}
.engine-chip--more:hover {
  background: var(--blue-mid);
}

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-hero,
  .bento-wide,
  .bento-wide-full { grid-column: span 2; }
  .bento-hero { grid-row: span 1; }
}
@media (max-width: 540px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero,
  .bento-wide,
  .bento-wide-full { grid-column: span 1; }
  .bento-hero h3 { font-size: 1.5rem; }
}

/* ── EVERYDAY ACTION — text left, radial diagram right ────── */
/* ── BENEFITS · 3 soft cards ─────────────────────────────── */
.benefits-section {
  padding: clamp(64px, 8vw, 112px) 0;
  background: var(--bg);
}
.benefits-head {
  max-width: 640px;
  margin: 0 auto clamp(38px, 4.5vw, 60px);
  text-align: center;
}
.benefits-head h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.benefits-head h2 .serif { font-style: italic; font-weight: 300; color: var(--blue); }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.benefit-card {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.6vw, 36px);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.benefit-card:hover {
  border-color: var(--blue-mid);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10,15,28,0.07);
}
.benefit-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--blue-pale);
  color: var(--blue);
}
.benefit-icon svg { width: 25px; height: 25px; }
.benefit-card h3 {
  margin: clamp(18px, 2vw, 24px) 0 10px;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.benefit-card {
  display: flex;
  flex-direction: column;
}
.benefit-card p {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
  margin: 0 0 clamp(20px, 2.4vw, 26px);
}
.benefits-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 52px);
}

/* little card graphic, pinned to the bottom of each card */
.benefit-art {
  margin-top: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 1 · unified list */
.ba-row { display: flex; align-items: center; gap: 10px; }
.ba-ic {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0; color: #fff;
}
.ba-ic svg { width: 15px; height: 15px; }
.ba-ic--blue  { background: var(--blue); }
.ba-ic--green { background: var(--green); }
.ba-ic--sky   { background: var(--blue-light); }
.ba-ic--deep  { background: var(--blue-deep); }
.ba-line { font-size: 0.82rem; color: var(--ink-2); line-height: 1.2; }
.ba-line b { color: var(--ink); font-weight: 600; }
/* 2 · ask -> done */
.benefit-art--ask { gap: 10px; }
.ba-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 8px 8px 12px; font-size: 0.82rem; color: var(--ink);
}
.ba-send {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.ba-send svg { width: 13px; height: 13px; }
.ba-result { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-2); }
.ba-check {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-soft); color: var(--green); display: grid; place-items: center;
}
.ba-check svg { width: 12px; height: 12px; }
.ba-event {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.ba-event-ic {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.ba-event-ic svg { width: 17px; height: 17px; }
.ba-event-text { display: flex; flex-direction: column; line-height: 1.3; font-size: 0.78rem; color: var(--ink-2); flex: 1; min-width: 0; }
.ba-event-text b { color: var(--ink); font-weight: 600; font-size: 0.84rem; }
.ba-event-done {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-soft); color: var(--green); display: grid; place-items: center;
}
.ba-event-done svg { width: 12px; height: 12px; }
/* 3 · compare options */
.ba-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font-size: 0.82rem; color: var(--ink-2);
}
.ba-opt--best { border-color: var(--blue); background: var(--blue-pale); color: var(--ink); font-weight: 600; }
.ba-opt-right { display: inline-flex; align-items: center; gap: 8px; }
.ba-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ba-best {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--blue); border-radius: 5px; padding: 2px 6px;
}

.everyday-split {
  display: grid;
  grid-template-columns: minmax(280px, 3fr) 7fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.everyday-split .section-head {
  text-align: left;
  margin: 0;
  max-width: 460px;
}
.everyday-split .section-head h2 {
  margin-bottom: 18px;
}
.radial-diagram {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
.radial-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}
.radial-diagram svg image {
  transition: transform .4s var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}
.radial-diagram:hover svg image {
  transform: scale(1.04);
}
.radial-fallback { display: none; }

/* Circuit hub graphic (everyday action) */
#everyday-arch { width: 100%; }
#everyday-arch svg { width: 100%; height: auto; display: block; overflow: visible; }
/* On phones, hide the detailed graphic (ID selector beats .radial-diagram svg)
   and let the .radial-fallback text list stand in. */
@media (max-width: 600px) { #everyday-arch { display: none; } }
.radial-diagram .trace { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.radial-diagram .node-circ { fill: #fff; stroke: var(--blue-mid); stroke-width: 1.5; filter: drop-shadow(0 5px 12px rgba(10,15,28,.08)); }
.radial-diagram .hub-disc { fill: #fff; }
.radial-diagram .ic { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.radial-diagram .node-label { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; fill: var(--ink); }
.radial-diagram .pulse { animation: pulse-travel linear infinite backwards; }
@keyframes pulse-travel {
  0%   { offset-distance: 100%; opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 0%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .radial-diagram .pulse { display: none; } }

@media (max-width: 880px) {
  .everyday-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .everyday-split .section-head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
  }
  .radial-diagram { max-width: 440px; }
}
@media (max-width: 600px) {
  .radial-diagram { max-width: 360px; }
  .radial-diagram svg { display: none; }
  .radial-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .radial-fallback li {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
}

/* ── CONNECTIONS CAROUSEL ───────────────────────────────── */
.conn-section {
  position: relative;
  margin-top: clamp(-104px, -8vw, -64px);  /* tucks under the bento section's bottom padding */
  padding-bottom: clamp(64px, 8vw, 112px);
  background: #fff;
  overflow: hidden;
}
.conn-section .container { position: relative; z-index: 1; }
.conn-section .section-head { padding-top: clamp(4px, 0.8vw, 12px); max-width: none; }
.conn-section .section-head h2 { max-width: none; }
.conn-section .section-head p { max-width: 720px; }
.conn-carousel-wrap { position: relative; margin-top: 48px; overflow: hidden; }
.conn-track { display: flex; gap: 20px; margin-bottom: 16px; width: max-content; }
/* Two rows, ~28 icons each — slower durations preserve perceived scroll speed */
.conn-track--left  { animation: conn-scroll-left  75s linear infinite; }
.conn-track--right { animation: conn-scroll-right 85s linear infinite; }
.conn-inner { display: flex; gap: 20px; flex-shrink: 0; }
.conn-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.conn-icon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.conn-icon--snap { background: #FFFC00; border-color: #F0EC00; }
.conn-fade { position: absolute; top: 0; bottom: 0; width: clamp(60px,10vw,120px); pointer-events: none; z-index: 2; }
.conn-fade--l { left: 0; background: linear-gradient(to right, #fff, transparent); }
.conn-fade--r { right: 0; background: linear-gradient(to left, #fff, transparent); }
@keyframes conn-scroll-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes conn-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .conn-track--left, .conn-track--right { animation: none; } }


/* ══════════════════════════════════════════════════════════
   PARTNERS SECTION — "Built for the AI assistant layer"
   Light, premium, investor-ready. 3+2 card grid.
   ══════════════════════════════════════════════════════════ */
.partners-section {
  position: relative;
  padding: clamp(80px, 10vw, 128px) 0 clamp(48px, 6vw, 72px);
  background: #fff;
  overflow: hidden;
}
.partners-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(30,144,255,0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.partners-section .container { position: relative; z-index: 1; }

.partners-head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.partners-head .label {
  display: inline-block;
  margin-bottom: 18px;
}
.partners-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.partners-head p {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 760px;
  text-wrap: pretty;
}
.partners-head p strong {
  color: var(--blue);
  font-weight: 700;
}

/* ── Section override: partners gets a wider container ───── */
.partners-section .container { max-width: 1400px; }

/* ── 4 cards, single row — shared-border lines treatment ────── */
.partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(28px, 3vw, 46px) clamp(24px, 2.6vw, 40px);
  background: #fff;
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition: background-color .25s var(--ease-out);
}
.partner-card:nth-child(-n+2) { border-top: 0; }   /* first row */
.partner-card:nth-child(odd)  { border-left: 0; }   /* first column */
.partner-card:nth-child(even) { background: var(--bg-tint); }
@media (hover: hover) and (pointer: fine) {
  .partner-card:hover { background: rgba(30,144,255,0.05); }
}
.partner-card-num {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 5vw, 5.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--line);
  margin-bottom: clamp(6px, 1vw, 12px);
}
.partner-card-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.2;
}
.partner-card h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
  margin: 4px 0 0;
  text-wrap: balance;
}
.partner-card p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 4px 0 0;
}

.partners-footer {
  text-align: center;
  margin-top: clamp(36px, 4vw, 52px);
}
.partners-footer p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.65;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .partner-cards { grid-template-columns: 1fr; }
  .partner-card { border-left: 0 !important; border-top: 1px solid var(--line); }
  .partner-card:first-child { border-top: 0; }
  .partner-card:nth-child(even) { background: var(--bg-tint); }
}

/* ══════════════════════════════════════════════════════════
   LAUNCH CTA — sits on the faint blue process surface, no box
   ══════════════════════════════════════════════════════════ */
.launch-cta {
  position: relative;
  text-align: left;
  max-width: none;
  margin: 0;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 32px rgba(10,15,28,0.06),
    0 1px 2px rgba(30,144,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.launch-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.launch-heading {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 10px;
}
.launch-lead {
  font-size: clamp(0.88rem, 1.05vw, 0.96rem);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.launch-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.launch-perks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.launch-perks li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  transform: translateY(-1px);
}
.launch-perks li strong {
  color: var(--ink);
  font-weight: 700;
  margin-right: 3px;
}
.launch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.launch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.launch-foot i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .launch-foot { gap: 10px; font-size: 0.62rem; }
}

/* Standalone variant for page-bottom CTAs (no flanking grid) */
.launch-cta.launch-cta--solo {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) clamp(32px, 3.6vw, 56px);
}
.launch-cta--solo .launch-heading { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.launch-cta--solo .launch-lead    { font-size: clamp(0.95rem, 1.15vw, 1.05rem); }

/* ── CTA BOX (inner pages) — light, faint blue ──────────── */
.cta-box {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: var(--r-2xl);
  padding: clamp(40px, 5vw, 64px);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; top: -120px; right: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(30,144,255,0.14), transparent 65%);
  pointer-events: none;
}
.cta-copy { position: relative; z-index: 1; }
.cta-box .label { color: var(--blue-text); }
.cta-box h2 { color: var(--ink); font-size: clamp(1.6rem,3vw,2.4rem); margin-top: 8px; }
.cta-box p { color: var(--ink-2); margin-top: 14px; }
.cta-box .buttons { margin-top: 28px; }
.cta-visual { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
.cta-visual .smiley-large { width: 100%; max-width: 160px; filter: drop-shadow(0 14px 36px rgba(30,144,255,0.22)); }

/* ── QUOTE BAND ─────────────────────────────────────────── */
.quote-band { padding: clamp(48px, 6vw, 88px) 0; }
.quote-content { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-content .mark { font-style: italic; font-weight: 300; font-size: 5rem; line-height: 0.5; color: var(--blue); margin-bottom: 24px; display: block; }
.quote-text { font-size: clamp(1.25rem,2.4vw,1.8rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.quote-attribution {
  margin-top: 28px; display: inline-flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.quote-attribution strong { color: var(--ink); font-weight: 700; }

/* ── ABOUT / WHY WE EXIST GRID ──────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.why-head h2 { margin-top: 10px; }
.why-body p {
  margin: 0;
  font-size: clamp(1rem, 1.18vw, 1.08rem);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
}
.why-body p + p { margin-top: 12px; }
.why-stats { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 800px) {
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
  .why-stats { grid-template-columns: 1fr; }
}

/* ── About: editorial hero, image group (light) ───────────────────────── */
.about-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  color: var(--ink);
  padding: clamp(128px, 15vw, 196px) 0 clamp(52px, 6vw, 84px);
}
.about-hero-glow {
  position: absolute;
  top: -25%;
  right: -8%;
  width: 58%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(30,144,255,0.10), transparent 72%);
  pointer-events: none;
}
.about-hero .container { position: relative; z-index: 1; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.about-hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.about-hero-eyebrow {
  font-family: var(--font-mono, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.about-hero-headline {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--ink);
}
.about-hero-headline .serif { color: var(--blue); }
.about-hero-lead {
  margin: 0 0 16px;
  max-width: 32rem;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.about-hero-note {
  margin: 0 0 clamp(28px, 3vw, 38px);
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: var(--muted, #8592B0);
}
.about-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.about-hero-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.5vw, 22px);
}
.about-hero-tile {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-tint);
  border: 1px solid var(--line);
}
.about-hero-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.about-hero-tile--sq { aspect-ratio: 1 / 1; }
.about-hero-tile--tall { grid-column: 2; grid-row: 1 / span 2; }

.about-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(28px, 6vw, 84px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.about-hero-stat dt {
  font-family: var(--font-mono, 'Inter', system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #8592B0);
  margin-bottom: 10px;
}
.about-hero-stat dd {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-hero-stat dd .serif { color: var(--blue); }

@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-gallery { max-width: 440px; order: 2; }
  .about-hero-stats { gap: 26px 44px; }
}

/* ── About: principles, feature-72 layout ─────────────────────────────── */
.principles-72 { padding: clamp(56px, 7vw, 104px) 0; }
.principles-72 .container {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
}
.principles-72-intro { max-width: 27rem; }
.principles-72-intro .label { display: block; margin-bottom: 12px; }
.principles-72-intro h2 { margin: 0 0 clamp(12px, 1.5vw, 18px); }
.principles-72-intro p {
  margin: 0 0 24px;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.6;
}
.principles-72-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  transition: color 0.2s var(--ease-out);
}
.principles-72-link svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.principles-72-link:hover { color: var(--blue); }
.principles-72-link:hover svg { transform: translateX(4px); }

.principles-72-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 760px) {
  .principles-72-grid { grid-template-columns: 1fr 1fr; }
}
.principle-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.principle-card-media {
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
}
.principle-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.principle-card-body { padding: clamp(22px, 2.6vw, 44px); }
.principle-card-body h3 {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.principle-card-body p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
}

/* ── FOUNDER LINKEDIN LINK ──────────────────────────────── */
.founder-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.founder-linkedin:hover {
  background: var(--blue-mid);
  color: var(--blue-deep);
}
.founder-linkedin svg { flex: none; }

/* ── WEB APP HERO (glass early-access) ──────────────────── */
.webapp-hero {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 6vw, 96px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-tint);
}

.webapp-hero-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.webapp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.85;
}

.webapp-blob-a {
  width: 760px;
  height: 560px;
  background: var(--blue-mid);
  top: -220px;
  left: -180px;
}

.webapp-blob-b {
  width: 620px;
  height: 620px;
  background: var(--blue-pale);
  bottom: -260px;
  right: -160px;
}

.webapp-hero-card {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 64px);
  border-radius: 8px;
  border: 1px solid var(--blue-mid);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px -28px rgba(26, 95, 217, 0.22),
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset;
  text-align: center;
  overflow: hidden;
}

.webapp-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 38%);
  pointer-events: none;
}

.webapp-hero-pill {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.webapp-hero-pill svg { display: none; }

.webapp-hero-title {
  position: relative;
  margin: 26px auto 18px;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;
}

.webapp-hero-title .serif {
  color: var(--blue);
}

.webapp-hero-sub {
  position: relative;
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.webapp-hero-actions {
  position: relative;
  margin-top: clamp(28px, 3.6vw, 44px);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 560px) {
  .webapp-hero-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .webapp-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── WEB APP MOCKUP + FEATURE PAIR (full-bleed split) ───── */
.webapp-pair-section {
  padding: 0;
}

.webapp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}

.webapp-mockup-frame {
  position: relative;
  overflow: hidden;
  background: #000;
  border-right: 1px solid var(--line);
  min-height: clamp(440px, 56vw, 680px);
}

.webapp-mockup-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.7);
  transform-origin: 50% 30%;
}

.webapp-pair-content {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 112px) clamp(20px, 4vw, 52px) clamp(56px, 8vw, 112px) clamp(40px, 5vw, 80px);
}

.webapp-pair-inner {
  width: 100%;
  max-width: 560px;
}

.webapp-pair-content .label {
  margin-bottom: 14px;
}

.webapp-pair-content h2 {
  margin: 0 0 18px;
}

.webapp-pair-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 52ch;
}

.webapp-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.webapp-feature {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.webapp-feature:last-child {
  border-bottom: 1px solid var(--line);
}

.webapp-feature h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.webapp-feature p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

@media (max-width: 900px) {
  .webapp-pair {
    grid-template-columns: 1fr;
  }
  .webapp-mockup-frame {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  /* The 1.7x zoom is tuned for the tall desktop column. On a phone it cut the
     monitor in half and left the screen unreadable. The artwork is 4:3, the
     same shape as this frame, so it fills it exactly with no zoom at all
     (2026-09-04). */
  .webapp-mockup-frame img {
    transform: none;
    object-position: 50% 50%;
  }
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background: #fff;
  color: var(--ink);
  padding: clamp(52px,6vw,80px) 0 clamp(28px,3vw,40px);
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: clamp(36px,4vw,52px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand .brand-mark img { filter: drop-shadow(0 4px 12px rgba(30,144,255,.25)); }
.footer-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.footer-address {
  font-size: 0.82rem; color: var(--muted); line-height: 1.7;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col h4 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); margin-bottom: 12px; }
.footer-col a { font-size: 0.9rem; color: var(--ink-2); padding: 5px 0; transition: color .15s; }
.footer-col a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-bottom span { font-size: 0.78rem; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ── FORMS ──────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-family: var(--font); font-size: 0.95rem; color: var(--ink); background: var(--bg);
  transition: border-color .18s, box-shadow .18s; outline: none;
  /* A select sizes itself to its longest option and will not shrink below it,
     so on a 360px phone the topic dropdown pushed the whole form past the
     right edge of the screen. These three let every control follow its field
     instead of setting the width (2026-09-04). */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,144,255,0.12);
}
.field textarea { min-height: 120px; resize: vertical; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(30,144,255,.25); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 0.97rem;
  color: var(--ink); list-style: none; gap: 12px;
  transition: background .15s;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--blue); flex-shrink: 0; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--bg-tint); }
.faq-item > p { padding: 0 22px 20px; font-size: 0.92rem; color: var(--ink-2); line-height: 1.72; }

/* ── REVENUE GRID (legacy, inner pages) ─────────────────── */
.revenue-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 32px; }

/* ── BRAND LOGO PNG ─────────────────────────────────────── */
.brand-mark img.logo-png { width: 36px; height: 36px; }

/* ── PARTNER TYPES GRID (who-it's-for on partners.html) ──── */
/* ─── Who is it for · accordion + image preview ────────────────────────── */
.pt-acc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
}

.pt-acc-list {
  display: flex;
  flex-direction: column;
}
.pt-acc-item {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pt-acc-item:first-child { border-top: 1px solid var(--line); }

/* Hide native disclosure marker */
.pt-acc-item > summary { list-style: none; }
.pt-acc-item > summary::-webkit-details-marker { display: none; }
.pt-acc-item > summary::marker { content: ''; }

.pt-acc-item > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer;
  outline: none;
}
.pt-acc-item > summary:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
  border-radius: 6px;
}
.pt-acc-item > summary > h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-2);
  transition: color .25s var(--ease-out);
}
.pt-acc-item[open] > summary > h3 { color: var(--ink); }
.pt-acc-tag {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}
.pt-acc-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: transform .25s var(--ease-out), color .25s var(--ease-out);
  align-self: center;
}
.pt-acc-item[open] > summary > .pt-acc-chevron {
  transform: rotate(180deg);
  color: var(--blue);
}

.pt-acc-body {
  padding: 0 0 clamp(18px, 2.2vw, 26px);
}
.pt-acc-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.pt-acc-body-img {
  display: none; /* mobile-only fallback (preview is on the right at desktop) */
  width: 100%;
  max-width: 320px;
  margin: 16px auto 0;
  border-radius: 12px;
}

/* RIGHT preview — sticky frame, swaps via JS */
.pt-acc-preview {
  position: sticky;
  top: clamp(96px, 10vw, 132px);
  margin: 0;
  background: var(--bg-tint, #F7F9FC);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-acc-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(20px, 3vw, 48px);
  transition: opacity .35s var(--ease-out);
}

@media (max-width: 900px) {
  .pt-acc-layout { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .pt-acc-preview { display: none; } /* mobile shows inline image inside each open item */
  .pt-acc-body-img { display: block; }
}

.partner-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.partner-type {
  padding: 40px 44px;
  transition: background .2s;
}
.partner-type:nth-child(1),
.partner-type:nth-child(2) { border-bottom: 1px solid var(--line); }
.partner-type:nth-child(1),
.partner-type:nth-child(3) { border-right: 1px solid var(--line); }
.partner-type:hover { background: var(--bg-tint); }
.partner-type-num {
  font-size: clamp(3.2rem, 5vw, 5.6rem);
  font-weight: 700;
  color: var(--line);
  letter-spacing: -0.07em;
  line-height: 0.85;
  font-family: var(--font-mono);
  margin-bottom: 18px;
}
.partner-type-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.partner-type h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.partner-type p  { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; }

/* ── STAT-4 STRIP (economics section on partners.html) ────── */
.stat-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: 52px;
}
.stat-4-item {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  transition: background .2s;
}
.stat-4-item:last-child { border-right: none; }
.stat-4-item:hover { background: var(--bg-tint); }
.stat-4-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.stat-4-num {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  font-style: italic;
}
.stat-4-unit {
  font-size: 0.82rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
  margin-left: 10px;
  letter-spacing: 0;
}
.stat-4-desc {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ── NEXT STEPS (contact.html what-happens-next) ──────────── */
.next-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 52px;
  border-top: 2px solid var(--line);
}
.next-step {
  padding: 32px 28px 28px;
  position: relative;
  border-right: 1px solid var(--line);
}
.next-step:last-child { border-right: none; }
.next-step::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 40px; height: 2px;
  background: var(--blue);
}
.next-step-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.next-step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.next-step p  { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; margin: 0; }

/* ── REQUIRED FIELD INDICATOR ──────────────────────────────── */
.field label .req { color: var(--blue); margin-left: 3px; }

/* ── MOTION INITIAL STATES (content visible by default; Motion fades in) ─── */
.reveal, .value-row, .step, .stat, .check { opacity: 1; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-v2-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .acc-panel.is-active { width: 326px; }
  /* 6 panels at smaller widths: 1×326 + 5×56 + 5×9 = 651 ≈ 650 */
  .acc-wrap { width: 650px; }
}

@media (max-width: 900px) {
  /* accordion switches to mobile phone image */
  .hero-v2-acc { display: none; }
  .hero-v2-mobile-img { display: flex; }
  .hero-v2-grid { grid-template-columns: 1fr; }
  .hero-v2-copy { max-width: 100%; }
  .hero-v2 { padding-bottom: 0; }

  /* grids collapse */
  .grid-2, .left-heavy, .right-heavy, .page-hero-inner { grid-template-columns: 1fr; }
  .cta-box { grid-template-columns: 1fr; }
  .cta-visual { display: none; }
  .process-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: flex; }
  .row-2 { grid-template-columns: 1fr; }
  .revenue-grid { grid-template-columns: 1fr 1fr; }
  .showcase-row { grid-template-columns: 1fr; gap: 24px; }

  /* new components */
  .partner-types { grid-template-columns: 1fr; }
  .partner-type:nth-child(1),
  .partner-type:nth-child(2) { border-bottom: 1px solid var(--line); }
  .partner-type:nth-child(3) { border-bottom: 1px solid var(--line); border-right: none; }
  .partner-type:nth-child(1),
  .partner-type:nth-child(3) { border-right: none; }
  .stat-4 { grid-template-columns: 1fr 1fr; }
  .stat-4-item:nth-child(2) { border-right: none; }
  .stat-4-item:nth-child(1),
  .stat-4-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .next-steps { grid-template-columns: 1fr; }
  .next-step { border-right: none; border-bottom: 1px solid var(--line); }
  .next-step:last-child { border-bottom: none; }
  .next-step::before { top: 0; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; }
  .display { font-size: 2.4rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cta-box { padding: 36px 24px; }
  section { padding: clamp(52px,6vw,80px) 0; }
  section.tight { padding: clamp(32px, 4vw, 52px) 0; }
  .process-row { grid-template-columns: 1fr; }
  .revenue-grid { grid-template-columns: 1fr; }
  .hero-v2-trust { gap: 12px; }
  .acc-wrap { height: 380px; }
  .stat-4 { grid-template-columns: 1fr; }
  .stat-4-item { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-4-item:last-child { border-bottom: none; }
  .partner-type { padding: 28px 24px; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — clean, light, product-led
   ═══════════════════════════════════════════════════════════ */

/* Hero — centered header + 3D perspective carousel */
.pp-hero {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 clamp(80px, 10vw, 120px);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
  overflow: hidden;
}
/* Mirrored blue radial glows (no purple — banned by PRODUCT.md anti-references) */
.pp-hero::before,
.pp-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  width: 620px;
  height: 620px;
  pointer-events: none;
  z-index: 0;
}
.pp-hero::before {
  left: -12%;
  background: radial-gradient(circle, rgba(30,144,255,0.22), transparent 62%);
}
.pp-hero::after {
  right: -12%;
  background: radial-gradient(circle, rgba(91,168,255,0.20), transparent 62%);
}
.pp-hero .container { position: relative; z-index: 1; }

.pp-hero-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.pp-hero-header .label {
  margin-bottom: 18px;
  display: inline-block;
}
.pp-hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}
.pp-hero h1 .accent { color: var(--blue); }
.pp-hero .lead {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 auto 32px;
  max-width: 600px;
  text-wrap: pretty;
}
.pp-hero .buttons {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 3D perspective carousel */
.pp-hero-carousel {
  position: relative;
  margin: clamp(56px, 7vw, 88px) auto 0;
  width: 100%;
  max-width: 920px;
  /* Tall enough to fit the cards at their derived aspect-ratio height */
  height: clamp(440px, 56vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.pp-carousel-card {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Card matches the screenshot's native aspect ratio (1206 × 2622) exactly,
     so the image fills the box edge-to-edge with zero transparent area. */
  width: clamp(180px, 20vw, 220px);
  aspect-ratio: 1206 / 2622;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 500ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
}
.pp-carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 24px 56px rgba(10,15,28,0.22);
}
/* Position states (JS sets data-pos on each card relative to active index) */
.pp-carousel-card[data-pos="0"] {
  transform: translate(-50%, -50%) scale(1) rotateY(0deg);
  z-index: 10;
  opacity: 1;
  filter: blur(0);
}
.pp-carousel-card[data-pos="-1"] {
  transform: translate(-50%, -50%) translateX(-78%) scale(0.84) rotateY(14deg);
  z-index: 5;
  opacity: 0.45;
  filter: blur(3px);
}
.pp-carousel-card[data-pos="1"] {
  transform: translate(-50%, -50%) translateX(78%) scale(0.84) rotateY(-14deg);
  z-index: 5;
  opacity: 0.45;
  filter: blur(3px);
}
.pp-carousel-card[data-pos="-2"],
.pp-carousel-card[data-pos="2"] {
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
}
.pp-carousel-card[data-pos="-2"] {
  transform: translate(-50%, -50%) translateX(-130%) scale(0.7) rotateY(22deg);
}
.pp-carousel-card[data-pos="2"] {
  transform: translate(-50%, -50%) translateX(130%) scale(0.7) rotateY(-22deg);
}
.pp-carousel-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* Nav buttons — minimal, white surface, blue on hover */
.pp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  cursor: pointer;
  z-index: 20;
  display: grid;
  place-items: center;
  color: var(--ink);
  line-height: 1;
  box-shadow: 0 4px 16px rgba(10,15,28,0.08);
  transition: background .2s, border-color .2s, color .2s, transform 120ms var(--ease-out);
}
.pp-carousel-btn svg { width: 18px; height: 18px; }
.pp-carousel-btn:hover {
  background: #fff;
  border-color: var(--blue-mid);
  color: var(--blue);
}
.pp-carousel-btn:active { transform: translateY(-50%) scale(0.94); }
.pp-carousel-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.pp-carousel-prev { left: clamp(8px, 2vw, 28px); }
.pp-carousel-next { right: clamp(8px, 2vw, 28px); }

/* "How it works" roadmap — horizontal process line with branded dots + badges */
.pp-roadmap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  margin-top: clamp(32px, 4vw, 56px);
  box-shadow: 0 4px 24px rgba(10,15,28,0.05);
}
.pp-roadmap-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pp-roadmap--5 {
  padding: clamp(36px, 4vw, 56px) clamp(20px, 2vw, 32px);
}
.pp-roadmap--5 .pp-roadmap-track {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.pp-roadmap--4 .pp-roadmap-track {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Vertical variant — timeline stack. Steps run top-to-bottom with a vertical
   blue line and left-positioned dots. Used by partners.html How It Goes Live. */
.pp-roadmap--vertical {
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.pp-roadmap--vertical .pp-roadmap-track {
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.2vw, 40px);
}
.pp-roadmap--vertical .pp-roadmap-line {
  left: 23px;
  right: auto;
  top: 12px;
  bottom: 12px;
  width: 2px;
  height: auto;
  background: linear-gradient(180deg, transparent 0%, rgba(30,144,255,0.55) 8%, rgba(30,144,255,0.55) 92%, transparent 100%);
}
.pp-roadmap--vertical .pp-roadmap-step {
  padding-top: 0;
  padding-left: 64px;
  text-align: left;
  min-height: 56px;
}
.pp-roadmap--vertical .pp-roadmap-dot {
  left: 24px;
  top: 8px;
}
.pp-roadmap--vertical .pp-roadmap-badge {
  margin-bottom: 8px;
}
.pp-roadmap--vertical .pp-roadmap-step p {
  max-width: none;
  margin: 0;
}
/* Marketing pages — wider container across all sections (overrides the 1160px default
   to give brand surfaces more horizontal breathing room). */
.partners-page .container,
.product-page  .container,
.home-page     .container { max-width: 1480px; }
.partners-page .container,
.home-page     .container {
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}
/* The comparison table is a dense reference, not a marketing surface — narrower for readability */
.product-page .pp-compare > .container { max-width: 1120px; }

/* ─── Partner page · Revenue cards (brand-aligned, restrained) ────────── */
.rev-shader-section { background: #fff; }
.rev-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
  margin: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 44px);
}
.rev-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(260px, 30vw, 320px);
  transition: border-color .25s var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
              transform .25s var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
              box-shadow .25s var(--ease-out, cubic-bezier(0.23,1,0.32,1));
}
@media (hover: hover) and (pointer: fine) {
  .rev-card:hover {
    border-color: var(--blue-mid);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(10,15,28,0.06);
  }
}

/* Single soft Clarity Blue glow in a corner — gentle, brand-restrained */
.rev-card-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.rev-card-shader::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -25%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,144,255,0.22), rgba(30,144,255,0) 70%);
  filter: blur(28px);
  will-change: transform;
  animation: rev-glow 16s ease-in-out infinite;
}
.rev-card-shader::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,168,255,0.16), rgba(91,168,255,0) 70%);
  filter: blur(28px);
  will-change: transform;
  animation: rev-glow 20s ease-in-out infinite reverse;
}
/* Subtle per-card variation in glow corner + delay so the grid doesn't pulse in sync */
.rev-card:nth-child(2) .rev-card-shader::before { right: auto; left: -25%; animation-delay: -4s; }
.rev-card:nth-child(2) .rev-card-shader::after  { left: auto; right: -20%; animation-delay: -8s; }
.rev-card:nth-child(3) .rev-card-shader::before { animation-delay: -8s; }
.rev-card:nth-child(3) .rev-card-shader::after  { animation-delay: -2s; }
.rev-card:nth-child(4) .rev-card-shader::before { right: auto; left: -25%; animation-delay: -6s; }
.rev-card:nth-child(5) .rev-card-shader::before { animation-delay: -12s; }
.rev-card:nth-child(5) .rev-card-shader::after  { animation-delay: -6s; }
.rev-card:nth-child(6) .rev-card-shader::before { right: auto; left: -25%; animation-delay: -2s; }
.rev-card:nth-child(6) .rev-card-shader::after  { animation-delay: -10s; }

/* Content layer — ink text on white, brand-standard pattern */
.rev-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
}
.rev-card-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
  color: var(--blue);
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.rev-card-icon svg { width: 24px; height: 24px; }
.rev-card:hover .rev-card-icon {
  background: var(--blue);
  color: #fff;
}
.rev-card-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
.rev-card-body p {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  flex-grow: 1;
}
.rev-card-meta {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rev-card-meta strong {
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@keyframes rev-glow {
  0%, 100% { transform: translate(0%, 0%) scale(1); opacity: 0.9; }
  50%      { transform: translate(10%, 12%) scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-card-shader::before,
  .rev-card-shader::after { animation: none; }
}

@media (max-width: 1024px) {
  .rev-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rev-cards { grid-template-columns: 1fr; }
}

/* ─── Partner page · Use cases (centered hero + 2-col feature grid + CTA) */
.uc-section { padding: clamp(72px, 9vw, 120px) 0; }
.uc-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.uc-hero-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
  color: var(--blue);
  margin-bottom: 18px;
}
.uc-hero-icon svg { width: 26px; height: 26px; }
.uc-hero .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 6px 0 14px;
}
.uc-hero h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0;
}
.uc-hero p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 16px auto 0;
}

.uc-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 1100px;
  text-align: left;
}
.uc-feature {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
}
.uc-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
  color: var(--blue);
}
.uc-feature-icon svg { width: 22px; height: 22px; }
.uc-feature-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.uc-feature-body h3 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 8px;
}
.uc-feature-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
}

.uc-cta {
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 720px;
  padding: clamp(28px, 3.4vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
.uc-cta h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 8px;
}
.uc-cta p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 auto 22px;
  max-width: 480px;
}
.uc-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 720px) {
  .uc-features { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 32px); }
}

/* ─── Partner page · Trust · expanding-row category list ──────────────── */
.trust-section { padding: clamp(72px, 9vw, 120px) 0; }
.trust-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}
.trust-hero-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  border-radius: 999px;
  color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(30,144,255,0.22);
}
.trust-hero-icon svg { width: 30px; height: 30px; }
.trust-hero .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 6px 0 14px;
}
.trust-hero h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
}
.trust-hero h2 .serif { color: var(--muted); }
.trust-hero p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 18px auto 0;
  max-width: 56ch;
}

.trust-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trust-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 18px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: default;
  overflow: hidden;
  transition:
    min-height .32s var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
    border-color .25s var(--ease-out),
    background .25s var(--ease-out),
    box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover {
    min-height: 128px;
    border-color: var(--blue);
    background: var(--blue-pale);
    box-shadow: 0 14px 36px rgba(30,144,255,0.16);
  }
}
.trust-row-body { flex: 1; min-width: 0; }
.trust-row-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  transition: color .25s var(--ease-out);
}
.trust-row--featured .trust-row-body h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
}
.trust-row:hover .trust-row-body h3 { color: var(--blue-deep); }
.trust-row-body p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height .35s var(--ease-out),
    opacity .25s var(--ease-out),
    margin-top .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover .trust-row-body p {
    max-height: 4em;
    opacity: 1;
  }
}
.trust-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.trust-row-icon svg { width: 24px; height: 24px; }
.trust-row:hover .trust-row-icon { opacity: 1; }

/* Corner brackets (TL + BR) revealed on hover */
.trust-row-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
  pointer-events: none;
}
.trust-row-corner::before,
.trust-row-corner::after {
  content: '';
  position: absolute;
  background: var(--blue);
}
.trust-row-corner--tl {
  top: 10px;
  left: 10px;
}
.trust-row-corner--tl::before {
  top: 0;
  left: 0;
  width: 14px;
  height: 2px;
}
.trust-row-corner--tl::after {
  top: 0;
  left: 0;
  width: 2px;
  height: 14px;
}
.trust-row-corner--br {
  bottom: 10px;
  right: 10px;
}
.trust-row-corner--br::before {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 2px;
}
.trust-row-corner--br::after {
  bottom: 0;
  right: 0;
  width: 2px;
  height: 14px;
}
.trust-row:hover .trust-row-corner { opacity: 1; }

/* Touch / no-hover: show the description by default so content isn't hidden */
@media (hover: none), (pointer: coarse) {
  .trust-row { min-height: auto; }
  .trust-row-body p { max-height: none; opacity: 1; margin-top: 8px; overflow: visible; }
  .trust-row-icon { opacity: 0.6; }
}

/* ─── Partner page §8 · Launch + Trust + Founder voice ─────────────────────
   Top row: "How it goes live" timeline, full container width.
   Bottom row: Trust (left, 2×2 cards) + founder quote (right), divider between.
   Quote sits vertically centred against the taller Trust column. */
.partners-page .pp-feeds-top {
  padding-bottom: clamp(56px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(56px, 6vw, 88px);
}
.partners-page .pp-feeds .pp-roadmap--4 {
  max-width: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  box-shadow: 0 4px 24px rgba(10,15,28,0.05);
}
.partners-page .pp-feeds-split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.partners-page .pp-feeds-half--left  { padding-right: clamp(40px, 5vw, 80px); }
.partners-page .pp-feeds-half--right { padding-left:  clamp(40px, 5vw, 80px); }
.partners-page .pp-feeds-split .pp-feeds-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
}
.partners-page .pp-feeds-split .qrot {
  width: 100%;
  padding: 0;
}
@media (max-width: 1024px) {
  .partners-page .pp-feeds-split { grid-template-columns: 1fr; align-items: start; }
  .partners-page .pp-feeds-half--left {
    padding-right: 0;
    padding-bottom: clamp(40px, 5vw, 64px);
  }
  .partners-page .pp-feeds-half--right {
    padding-left: 0;
    padding-top: clamp(40px, 5vw, 64px);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .partners-page .pp-feeds-split .pp-feeds-cards { grid-template-columns: 1fr; }
}

/* ─── Partner page · Founder voice quote · animated rotating word ────── */
.qrot-section {
  padding: clamp(44px, 5.5vw, 72px) 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.qrot {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(6px, 0.8vw, 12px) clamp(0px, 2vw, 32px);
  font-family: 'Inter', sans-serif;
}
.qrot-mark {
  position: absolute;
  top: -0.35em;
  left: -0.05em;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
  font-weight: 700;
  color: var(--blue-pale);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.qrot-body {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  padding: 0;
  border: 0;
  max-width: none;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: pretty;
}
.qrot-body p { margin: 0 0 clamp(10px, 1.2vw, 16px); }
.qrot-body p:last-child { margin-bottom: 0; }

/* The rotating word — italic Inter 300 in Clarity Blue, mirrors .serif treatment */
.qrot-slot {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
  white-space: nowrap;
  /* min-width prevents the surrounding sentence from reflowing every cycle */
  min-width: 7ch;
}
.qrot-slot .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity .35s cubic-bezier(0.23, 1, 0.32, 1),
              transform .35s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity;
}
.qrot-slot .char.in  { opacity: 1; transform: translateY(0); }
.qrot-slot .char.out { opacity: 0; transform: translateY(-0.5em); }

.qrot-attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qrot-name {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.qrot-role {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .qrot-slot .char { transition: none; }
}


/* ── Engine web — MyPA at the centre, every model branching out ─────────
   Paths are measured from the live node positions in main.js, so the beams
   stay attached at any width. Each beam is a base line plus a travelling
   light packet (dash offset animation through a fixed gradient).
   ─────────────────────────────────────────────────────────────────────── */
/* Boxless: the beam graphic sits directly on the section background
   (the white bordered panel was removed 2026-08-27). */
.engine-panel {
  position: relative;
  margin: clamp(32px, 4vw, 56px) 0 0;
}

/* ─── PARTNERS · Revenue coin-stack chart (light standout section) ──
   One stack of tokens per stream; heights are illustrative only, no
   values shown. Coins drop in bottom-up when the block reveals. */
.rev-coins { max-width: 940px; margin: clamp(40px, 5vw, 64px) auto 0; }
.rev-coins-plot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
  justify-items: center;
  min-height: 176px;
  border-bottom: 1px solid var(--line);
}
.rev-coin-stack {
  display: flex;
  flex-direction: column-reverse; /* bottom coin first in DOM; upper coins paint on top */
  align-items: center;
}
.rev-coin-stack i {
  display: block;
  position: relative;
  width: 64px;
  height: 24px;
}
.rev-coin-stack i + i { margin-bottom: -14px; }
.rev-coin-stack i::before { /* cylinder side */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 9px; bottom: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border: 1px solid rgba(10, 15, 28, 0.18);
}
.rev-coin-stack i::after { /* top face */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--blue-light), var(--blue));
  border: 1px solid rgba(10, 15, 28, 0.18);
}
.rev-coin-stack i:last-child::after { /* topmost coin: brighter face + glow */
  background:
    radial-gradient(50% 46% at 50% 44%, rgba(255, 255, 255, 0.4), transparent 62%),
    linear-gradient(180deg, #7CC0FF, var(--blue));
  box-shadow: 0 10px 26px rgba(30, 144, 255, 0.28);
}

.rev-coins-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
  margin-top: 20px;
  text-align: center;
}
.rev-coin-label span {
  display: block;
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.rev-coin-label h3 {
  margin: 8px 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rev-coin-label p {
  margin: 0 auto;
  max-width: 30ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-2);
}

@keyframes rev-coin-in {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}
.rev-coins.is-in .rev-coin-stack i { animation: rev-coin-in 0.4s var(--ease-out-expo) both; }
.rev-coins.is-in .rev-coin-stack i:nth-child(1)  { animation-delay: 0.05s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(2)  { animation-delay: 0.11s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(3)  { animation-delay: 0.17s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(4)  { animation-delay: 0.23s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(5)  { animation-delay: 0.29s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(6)  { animation-delay: 0.35s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(7)  { animation-delay: 0.41s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(8)  { animation-delay: 0.47s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(9)  { animation-delay: 0.53s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(10) { animation-delay: 0.59s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(11) { animation-delay: 0.65s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(12) { animation-delay: 0.71s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(13) { animation-delay: 0.77s; }
.rev-coins.is-in .rev-coin-stack i:nth-child(14) { animation-delay: 0.83s; }
@media (prefers-reduced-motion: reduce) {
  .rev-coins.is-in .rev-coin-stack i { animation: none; }
}

@media (max-width: 700px) {
  .rev-coins-plot { min-height: 120px; gap: 12px; }
  .rev-coin-stack i { width: 44px; height: 18px; }
  .rev-coin-stack i + i { margin-bottom: -10px; }
  .rev-coin-stack i::before { top: 7px; border-radius: 6px; }
  .rev-coin-stack i::after { height: 13px; }
  .rev-coins-labels { gap: 12px; }
  .rev-coin-label span { font-size: 0.6rem; letter-spacing: 0.08em; }
  .rev-coin-label h3 { font-size: 0.84rem; }
  .rev-coin-label p { display: none; }
}

/* Split layout: beam graphic left, heading + copy right, level */
.howit-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.howit-split .engine-panel { margin: 0; }
.howit-split .section-head {
  margin-bottom: 0;
  max-width: none;
}
@media (max-width: 900px) {
  .howit-split { grid-template-columns: 1fr; gap: 8px; }
  .howit-split .section-head { order: -1; margin-bottom: 8px; }
}
.engine-panel-note {
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: var(--muted);
}
.engine-panel-note b {
  font-weight: 500;
  color: var(--ink);
}
.beam-web {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1 / 0.6;
}
.beam-web-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.beam-base {
  fill: none;
  stroke: rgba(10,15,28,0.13);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.beam-flow {
  /* dash length + offset are written inline by main.js, per path length */
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  animation: beam-flow 2.9s linear infinite;
}
@keyframes beam-flow {
  to { stroke-dashoffset: 0; }
}
.beam-web:not(.is-live) .beam-flow { animation-play-state: paused; }

/* Centre hub */
.beam-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(76px, 14%, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--blue-mid);
  box-shadow: 0 10px 30px rgba(30,144,255,0.22), 0 2px 6px rgba(10,15,28,0.06);
  display: grid;
  place-items: center;
}
.beam-hub img { width: 58%; height: auto; display: block; }
.beam-hub::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  animation: beam-pulse 3s var(--ease-out) infinite;
}
@keyframes beam-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
.beam-web:not(.is-live) .beam-hub::after { animation-play-state: paused; }

/* Model nodes */
.beam-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(40px, 7.6%, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.beam-node img { width: 46%; height: auto; display: block; }
.beam-node-name {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .beam-node:hover {
    border-color: var(--blue);
    box-shadow: 0 8px 22px rgba(30,144,255,0.22);
    transform: translate(-50%, -50%) scale(1.08);
  }
  .beam-node:hover .beam-node-name { opacity: 1; }
}

@media (max-width: 760px) {
  /* Ring goes back to round once the panel is narrow */
  .beam-web { max-width: 420px; aspect-ratio: 1 / 0.92; }
  .beam-hub { width: clamp(68px, 19%, 88px); }
  .beam-node { width: clamp(38px, 11.5%, 50px); }
}
@media (max-width: 480px) {
  .beam-web { max-width: 340px; }
  .beam-node-name { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .beam-flow { animation: none; opacity: .5; }
  .beam-hub::after { animation: none; opacity: .35; }
}

/* ─── §5 Revenue · value ladder (numbered rows, no cards) ──────────────── */
.rev-ladder {
  list-style: none;
  padding: 0;
  margin: clamp(36px, 5vw, 56px) 0 0;
}
.rev-ladder > li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: baseline;
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}
.rev-ladder > li:first-child { padding-top: 0; }
.rev-ladder > li:last-child  { border-bottom: 0; }
.rev-ladder-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  line-height: 1;
}
.rev-ladder-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
.rev-ladder-title h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.rev-ladder-arpu {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 4px 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
}
.rev-ladder > li p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
}
@media (max-width: 600px) {
  .rev-ladder > li { grid-template-columns: 48px 1fr; gap: 14px; }
}

/* ─── §9 Why Different · asymmetric split (sticky head + numbered list) ─ */
.why-diff-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.why-diff-head {
  position: sticky;
  top: clamp(96px, 10vw, 132px);
  max-width: 460px;
}
.why-diff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: diff;
}
.why-diff-list > li {
  counter-increment: diff;
  position: relative;
  padding: clamp(22px, 2.6vw, 32px) 0 clamp(22px, 2.6vw, 32px) clamp(44px, 5vw, 68px);
  border-top: 1px solid var(--line);
}
.why-diff-list > li:first-child { border-top: 0; padding-top: 0; }
.why-diff-list > li:first-child::before { top: 0; }
.why-diff-list > li:last-child  { border-bottom: 0; }
.why-diff-list > li::before {
  content: counter(diff, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(22px, 2.6vw, 32px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.why-diff-list h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.why-diff-list p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .why-diff-split { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  .why-diff-head  { position: static; max-width: none; }
}

/* ─── §10 Trust · 2-up image + checklist split ─────────────────────────── */
.trust-split {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.trust-mockup {
  margin: 0;
}
.trust-mockup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 56px rgba(10,15,28,0.12);
}
.trust-text .section-head { max-width: none; margin-bottom: clamp(24px, 3vw, 36px); }
.trust-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
}
.trust-checklist > li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.trust-check {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
  border-radius: 999px;
}
.trust-check svg { width: 14px; height: 14px; }
.trust-checklist h3 {
  margin: 0 0 3px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.trust-checklist p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .trust-split { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }
  .trust-mockup { max-width: 320px; }
}
/* The horizontal blue line — spans only between the first and last dot centres */
.pp-roadmap-line {
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  opacity: 0.45;
  border-radius: 2px;
}
.pp-roadmap--5 .pp-roadmap-line {
  left: calc(100% / 10);
  right: calc(100% / 10);
}
.pp-roadmap--4 .pp-roadmap-line {
  left: calc(100% / 8);
  right: calc(100% / 8);
}
.pp-roadmap-step {
  position: relative;
  padding-top: 30px;
  text-align: center;
}
.pp-roadmap-dot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(30,144,255,0.18);
}
.pp-roadmap-dot::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}
.pp-roadmap-badge {
  display: inline-block;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pp-roadmap-step h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 6px;
}
.pp-roadmap-step p {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 32ch;
}

/* Branches — extends from the "Acts" step into 8 concrete examples */
.pp-roadmap-branches {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
}
/* Vertical stem positioned over the Acts column (right third of the 3-col track) */
.pp-roadmap-branches::before {
  content: '';
  position: absolute;
  top: 0;
  left: 83.33%;
  width: 1.5px;
  height: clamp(20px, 2.5vw, 28px);
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-light) 100%);
  opacity: 0.55;
  transform: translateX(-50%);
  border-radius: 1px;
}
/* Horizontal trunk — soft line where the branches meet */
.pp-roadmap-branches::after {
  content: '';
  position: absolute;
  top: clamp(20px, 2.5vw, 28px);
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 6%, var(--line) 94%, transparent 100%);
}
.pp-roadmap-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: clamp(24px, 3vw, 36px) auto 0;
}
.pp-roadmap-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blue-deep);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pp-roadmap-chip:hover { background: var(--blue-mid); }
}

/* Features bento — 6-col grid, varied cell sizes, no fabricated icons */
.pp-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(32px, 4vw, 56px);
}
.pp-feature-card {
  position: relative;
  grid-column: span 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
@media (hover: hover) and (pointer: fine) {
  .pp-feature-card:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 12px 32px rgba(10,15,28,0.06);
    transform: translateY(-2px);
  }
}
.pp-feature-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}
.pp-feature-card h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 4px;
  color: var(--ink);
}
.pp-feature-card p {
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* Cell-span variants */
.pp-feature-card.is-wide { grid-column: span 2; }
.pp-feature-card.is-full { grid-column: span 4; }

/* Anchor: big-number AI Assistant card (numbers lead the brand voice) */
.pp-feature-card.is-anchor {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
}
.pp-feature-card.is-anchor::before {
  content: '';
  position: absolute;
  top: -32%;
  left: -22%;
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(30,144,255,0.18), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.pp-feature-card.is-anchor > * { position: relative; z-index: 1; }
.pp-feature-bignum {
  font-size: clamp(3.4rem, 5.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--blue);
  margin: 12px 0 4px;
}
.pp-feature-bignum-lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 16px;
}

/* Dark cell — Founder's Ink, used for Privacy Tools as visual rhythm break */
.pp-feature-card.is-dark {
  background: var(--ink);
  border-color: rgba(255,255,255,0.08);
}
.pp-feature-card.is-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 110%, rgba(30,144,255,0.24), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.pp-feature-card.is-dark > * { position: relative; z-index: 1; }
.pp-feature-card.is-dark .pp-feature-num { color: var(--blue-light); }
.pp-feature-card.is-dark h3 { color: #fff; }
.pp-feature-card.is-dark p { color: rgba(255,255,255,0.72); }

/* Phone-mockup variant — used by Expert Connection and Privacy */
.pp-feature-card.has-mockup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 2vw, 32px);
  align-items: end;
  padding-right: 0;
  padding-bottom: 0;
}
.pp-feature-card.has-mockup .pp-feature-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: clamp(8px, 1.4vw, 20px);
  padding-bottom: clamp(28px, 2.6vw, 36px);
}
.pp-feature-mockup {
  height: clamp(200px, 24vw, 260px);
  width: clamp(120px, 14vw, 170px);
  align-self: end;
  margin-right: -8px;
  flex-shrink: 0;
}
.pp-feature-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 20px 40px rgba(10,15,28,0.22);
  display: block;
}
.pp-feature-card.is-full.has-mockup {
  grid-template-columns: 1fr clamp(180px, 22vw, 240px);
  align-items: center;
  padding-bottom: 0;
}
.pp-feature-card.is-full.has-mockup .pp-feature-body {
  padding-bottom: clamp(32px, 3vw, 44px);
}
.pp-feature-card.is-full.has-mockup .pp-feature-mockup {
  height: clamp(260px, 30vw, 340px);
  width: 100%;
  margin-right: 0;
}

/* Optimisation — before/after comparison diagram (inspired by slide 5)
   Framed inside a card so the rich diagram reads as a "showcase object"
   against the surface-tint section, not as ambient page content. */
.pp-opt-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(10,15,28,0.05);
}
/* Vertical divider between the two columns */
.pp-opt-split::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
}
.pp-opt-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}
.pp-opt-side-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  text-align: center;
}
.pp-opt-side--after .pp-opt-side-title { color: var(--blue); }
.pp-opt-caption {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  text-align: center;
  max-width: 38ch;
  align-self: center;
  min-height: 7em; /* large enough that BOTH captions reach this height regardless of natural wrap */
}

/* Shared arrow — thin blue vertical line with triangle head */
.pp-opt-arrow {
  position: relative;
  width: 3px;
  height: 26px;
  background: var(--blue);
  margin: 0 auto;
  border-radius: 1.5px;
}
.pp-opt-arrow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid var(--blue);
}

/* LEFT: 3 parallel stations, each prompt → app → output */
.pp-opt-stations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;        /* stretch the row so each station fills full height */
  gap: 10px;
  flex: 1;                         /* stretch to fill column height so prompts pin to bottom */
}
.pp-opt-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* output top, prompt bottom — aligns across both sides */
  gap: 8px;
  text-align: center;
}
.pp-opt-station-out,
.pp-opt-station-in {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.35;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-opt-station-out { font-weight: 500; color: var(--ink); }
.pp-opt-app {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(10,15,28,0.05);
  min-width: 84px;
}

/* RIGHT: convergent — 3 prompts → MyPA → output, with engines panel */
.pp-opt-converge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* output top, prompts bottom — aligns with left side */
  gap: 8px;
  text-align: center;
  width: 100%;
  flex: 1;                         /* stretch to fill column height */
}
.pp-opt-output {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35;
}
.pp-opt-mypa {
  padding: 14px 36px;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.012em;
  box-shadow: 0 6px 20px rgba(30,144,255,0.32);
  margin: 4px 0;
}
/* The funnel — 3 elbow arrows: left/right prompts bend toward MyPA, middle goes straight up */
.pp-opt-funnel {
  display: block;
  width: 100%;
  height: clamp(40px, 5vw, 52px);
  margin: 2px 0;
  color: var(--blue);
}
.pp-opt-funnel path,
.pp-opt-funnel line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-opt-funnel polygon {
  fill: currentColor;
  stroke: none;
}
.pp-opt-prompts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.pp-opt-prompts p {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin: 0;
  padding: 0 4px;
  text-align: center;
  line-height: 1.35;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "After" side becomes the positioning anchor so the bubble sits in its top-right corner */
.pp-opt-side--after {
  position: relative;
  min-height: 360px;     /* room for the floating bubble + the converge stack */
}

/* AI engines bubble — bleeds further out: roughly half inside, half outside the card */
.pp-opt-engines {
  position: absolute;
  top: clamp(-84px, -5.5vw, -54px);
  right: clamp(-40px, -3.4vw, -12px);
  width: clamp(176px, 18vw, 212px);
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(10,15,28,0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}

/* Two diagonal dashed arrows — sit in the gap between MyPA card and the AI bubble */
.pp-opt-conn {
  position: absolute;
  top: clamp(18px, 3vw, 40px);
  right: clamp(118px, 13vw, 172px);
  width: clamp(54px, 6vw, 74px);
  height: clamp(52px, 6vw, 72px);
  color: var(--muted);
  z-index: 3;
  pointer-events: none;
}
.pp-opt-conn svg { width: 100%; height: 100%; display: block; }
.pp-opt-engines-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.pp-opt-engines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  justify-items: center;
}
.pp-opt-engine {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: none;
}
.pp-opt-engine img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.pp-opt-engine--more {
  grid-column: span 5;
  width: auto;
  aspect-ratio: auto;
  margin-top: 4px;
  padding: 5px 10px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  color: var(--blue-deep);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Foot caption — kept from the old flow */
.pp-flow-foot {
  text-align: center;
  margin: clamp(28px, 3vw, 36px) auto 0;
  max-width: 720px;
  font-size: 0.96rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Prompt cards (real-world actions) — asymmetric 3-col, one wide spotlight */
/* "More examples" head — left-aligned, sits below doctor flow */
.pp-prompts-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.2vw, 28px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.pp-prompts-head .label { color: var(--blue-text); }
.pp-prompts-head p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Cards grid — 4 cols × 2 rows with spotlight spanning 2 */
.pp-prompts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .pp-prompts { grid-template-columns: repeat(2, 1fr); }
  .pp-prompt-card.is-spotlight { grid-column: span 2; }
}
@media (max-width: 560px) {
  .pp-prompts { grid-template-columns: 1fr; }
  .pp-prompt-card.is-spotlight { grid-column: span 1; }
}

/* Option 2 — TIGHT STACK: compress everything vertically */
.pp-realworld { padding: clamp(36px, 5vw, 64px) 0; }
.pp-realworld .section-head {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.pp-realworld .section-head h2 { margin-top: 4px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.pp-realworld .section-head p { margin-top: 10px; font-size: 0.92rem; }

/* Wider section: let the real-world examples breathe beyond the standard container */
.pp-realworld > .container {
  max-width: 1440px;
}

/* More examples — HORIZONTAL scrollable row, sits below the doctor flow graphic */
.pp-more-examples {
  position: relative;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.pp-more-examples-head {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  padding: 0;
}
.pp-more-examples-quote {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
}
.pp-prompts-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(30,144,255,0.3) transparent;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pp-prompts-scroll::-webkit-scrollbar {
  height: 6px;
}
.pp-prompts-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.pp-prompts-scroll::-webkit-scrollbar-thumb {
  background: rgba(30,144,255,0.25);
  border-radius: 999px;
}
.pp-prompts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(30,144,255,0.45);
}

/* Card sizing inside the horizontal scroll — shared-border lines treatment */
.pp-prompts-scroll .pp-prompt-card {
  flex-shrink: 0;
  width: clamp(230px, 24vw, 280px);
  padding: clamp(18px, 2vw, 24px);
  gap: 6px;
  scroll-snap-align: start;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition: background-color .2s var(--ease-out);
}
.pp-prompts-scroll .pp-prompt-card:last-child { border-right: 0; }
.pp-prompts-scroll .pp-prompt-card:nth-child(even) { background: var(--bg-tint); }
.pp-prompts-scroll .pp-prompt-card.is-spotlight {
  grid-column: auto;
  background: var(--blue-pale);
}
@media (hover: hover) and (pointer: fine) {
  .pp-prompts-scroll .pp-prompt-card:hover { background: rgba(30,144,255,0.05); }
}
.pp-prompts-scroll .pp-prompt-quote {
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.35;
  font-weight: 500;
  font-style: italic;
  color: var(--blue-deep);
  letter-spacing: -0.012em;
  margin: 0;
}
.pp-prompts-scroll .pp-prompt-card.is-spotlight .pp-prompt-quote {
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
}
.pp-prompts-scroll .pp-prompt-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: none;
}

@media (max-width: 1200px) {
  .pp-realworld > .container { max-width: var(--maxw); }
}

.pp-realworld .pp-prompts-head {
  margin: clamp(28px, 3.5vw, 40px) 0 clamp(14px, 1.6vw, 18px);
  padding-top: clamp(20px, 2.5vw, 28px);
}

.pp-realworld .pp-prompt-card {
  padding: clamp(16px, 1.8vw, 20px);
  gap: 6px;
}
.pp-realworld .pp-prompt-quote {
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.3;
}
.pp-realworld .pp-prompt-card.is-spotlight .pp-prompt-quote {
  font-size: clamp(1.05rem, 1.2vw, 1.15rem);
}
.pp-realworld .pp-prompt-desc {
  font-size: 0.83rem;
  line-height: 1.5;
}
.pp-prompt-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.pp-prompt-card.is-spotlight {
  grid-column: span 2;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
}
.pp-prompt-card.is-spotlight .pp-prompt-quote {
  font-size: 1.25rem;
  letter-spacing: -0.018em;
}
.pp-prompt-card.is-spotlight .pp-prompt-desc { font-size: 0.96rem; max-width: 50ch; }
@media (hover: hover) and (pointer: fine) {
  .pp-prompt-card:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 6px 24px rgba(10,15,28,0.05);
  }
}
.pp-prompt-quote {
  font-size: 1.08rem;
  font-weight: 500;
  font-style: italic;
  color: var(--blue-deep);
  line-height: 1.4;
  letter-spacing: -0.014em;
  margin: 0;
}
.pp-prompt-desc {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* App gallery — auto-advancing horizontal carousel */
.pp-gallery {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
}
.pp-gallery-viewport {
  overflow: hidden;
}
.pp-gallery-track {
  display: flex;
  gap: 16px;
  transition: transform 540ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.pp-gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  color: var(--ink);
  line-height: 1;
  box-shadow: 0 4px 16px rgba(10,15,28,0.08);
  transition: background .2s, border-color .2s, color .2s, transform 120ms var(--ease-out);
}
.pp-gallery-btn svg { width: 18px; height: 18px; }
.pp-gallery-btn:hover {
  background: #fff;
  border-color: var(--blue-mid);
  color: var(--blue);
}
.pp-gallery-btn:active { transform: translateY(-50%) scale(0.94); }
.pp-gallery-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.pp-gallery-btn--prev { left: clamp(-8px, -0.5vw, 0px); }
.pp-gallery-btn--next { right: clamp(-8px, -0.5vw, 0px); }
.pp-gallery-item {
  flex: 0 0 calc((100% - 32px) / 3); /* 3 visible on desktop, 16px gap × 2 = 32px */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  overflow: hidden;
  min-height: 380px;
  transition: box-shadow .22s, border-color .22s;
}

/* Hero gallery cell — spans 2 cols × 2 rows; text left, phone right */
.pp-gallery-item.is-hero {
  grid-column: span 2;
  grid-row: span 2;
  flex-direction: row;
  align-items: stretch;
  text-align: left;
  padding: clamp(28px, 3vw, 40px) 0 0 clamp(28px, 3vw, 40px);
  gap: clamp(24px, 3vw, 40px);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--blue-pale) 100%);
}
.pp-gallery-item.is-hero .pp-gallery-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  padding-bottom: clamp(24px, 3vw, 36px);
  max-width: 38ch;
}
.pp-gallery-item.is-hero .pp-gallery-title {
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
  color: var(--ink);
}
.pp-gallery-item.is-hero .pp-gallery-desc {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.pp-gallery-item.is-hero img {
  width: auto;
  max-width: none;
  height: 100%;
  align-self: flex-end;
  margin: 0;
  border-radius: 8px 0 0 0;
  box-shadow: 0 18px 40px rgba(10,15,28,0.18);
  object-fit: cover;
  object-position: top center;
  aspect-ratio: 1206 / 2622;
}
@media (hover: hover) and (pointer: fine) {
  .pp-gallery-item:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 14px 32px rgba(10,15,28,0.07);
  }
}
.pp-gallery-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.pp-gallery-title {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.pp-gallery-item img {
  width: 78%;
  max-width: 220px;
  height: auto;
  border-radius: 8px;
  margin-top: auto;
  box-shadow: 0 14px 28px rgba(10,15,28,0.12);
}

/* Final CTA — no container; whitespace and type carry it */
.pp-final {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 48px);
  max-width: 720px;
  margin: 0 auto;
}

/* Launch CTA — full-bleed section, gradient is the section background */
.pp-launch-section {
  background: linear-gradient(135deg, #F7F9FC 0%, var(--blue-pale) 100%);
  border-top: 1px solid var(--blue-mid);
  border-bottom: 1px solid var(--blue-mid);
  padding: clamp(56px, 8vw, 96px) 0;
}
.pp-launch {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.pp-launch-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.pp-launch-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 14px;
}
.pp-launch-lead {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 22px;
  text-wrap: pretty;
  max-width: 56ch;
}
.pp-launch-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.pp-launch-perks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.pp-launch-perks li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  transform: translateY(-1px);
}
.pp-launch-perks li strong {
  color: var(--ink);
  font-weight: 700;
  margin-right: 3px;
}
.pp-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.pp-launch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.pp-launch-foot i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
}
@media (max-width: 600px) {
  .pp-launch-perks { grid-template-columns: 1fr; }
}
.pp-final h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}
.pp-final p {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.pp-final .buttons {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Product page responsive */
@media (max-width: 1024px) {
  .pp-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pp-feature-card,
  .pp-feature-card.is-wide { grid-column: span 1; }
  .pp-feature-card.is-anchor,
  .pp-feature-card.is-full { grid-column: span 2; }
  .pp-feature-card.is-full.has-mockup { grid-template-columns: 1fr clamp(160px, 22vw, 220px); }
  .pp-gallery-item { flex: 0 0 calc((100% - 16px) / 2); }
  .pp-gallery-item.is-hero {
    grid-column: span 2;
    grid-row: auto;
    flex-direction: row;
  }
  .pp-prompts { grid-template-columns: repeat(2, 1fr); }
  .pp-prompt-card.is-spotlight { grid-column: span 2; }
}
@media (max-width: 760px) {
  .pp-hero { padding-bottom: clamp(56px, 8vw, 96px); }
  .pp-hero-carousel { height: clamp(420px, 110vw, 500px); }
  .pp-roadmap-track {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pp-roadmap-line { display: none; }
  .pp-roadmap-step { padding-top: 26px; }
  .pp-features { grid-template-columns: 1fr; }
  .pp-prompts { grid-template-columns: 1fr; }
  .pp-gallery-item { flex: 0 0 100%; }
  .pp-gallery-btn { display: none; }
  .pp-prompt-card.is-spotlight { grid-column: span 1; }
  .pp-gallery-item.is-hero {
    grid-column: span 1;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 24px 24px 0;
    gap: 6px;
  }
  .pp-gallery-item.is-hero .pp-gallery-text {
    padding-bottom: 0;
    align-self: center;
    max-width: 100%;
  }
  .pp-gallery-item.is-hero img {
    width: 78%;
    max-width: 220px;
    height: auto;
    align-self: center;
    margin-top: auto;
    border-radius: 8px;
  }
  .pp-feature-card,
  .pp-feature-card.is-wide,
  .pp-feature-card.is-anchor,
  .pp-feature-card.is-full { grid-column: span 1; }
  .pp-feature-card.has-mockup,
  .pp-feature-card.is-full.has-mockup {
    grid-template-columns: 1fr;
    padding-right: clamp(28px, 2.6vw, 36px);
  }
  .pp-feature-mockup,
  .pp-feature-card.is-full.has-mockup .pp-feature-mockup {
    width: 100%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1206 / 2622;
    margin: 0 auto;
    align-self: center;
  }
  .pp-opt-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pp-opt-split::before {
    left: 12%; right: 12%;
    top: 50%; bottom: auto;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
  }
  .pp-opt-side--after { min-height: 0; }
  .pp-opt-conn { display: none; }
  .pp-opt-engines {
    position: static;
    top: auto; right: auto;
    width: 100%;
    margin-top: 16px;
  }
  .pp-opt-engines-grid { grid-template-columns: repeat(5, 1fr); }
  .pp-opt-engine--more { grid-column: span 5; }
}


/* ═══════════════════════════════════════════════════
   LEGAL DOC — long-form pages (Terms, Privacy, Cookies)
   ═══════════════════════════════════════════════════ */
.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 96px;
  color: var(--ink, #0A0F1C);
  font-size: 16px;
  line-height: 1.7;
}
.legal-doc .legal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--ink-3, #6B7785);
  margin: 0 0 40px;
  padding: 16px 18px;
  background: var(--blue-pale, #EBF5FF);
  border-radius: 8px;
}
.legal-doc .legal-meta strong {
  color: var(--ink, #0A0F1C);
  font-weight: 600;
}
.legal-doc h2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  color: var(--ink, #0A0F1C);
}
.legal-doc h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--ink, #0A0F1C);
}
.legal-doc h2 + h3 { margin-top: 16px; }
.legal-doc p {
  margin: 0 0 16px;
  color: var(--ink-2, #2E3441);
}
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--ink-2, #2E3441);
}
.legal-doc li {
  margin: 0 0 6px;
}
.legal-doc a {
  color: var(--blue, #1E90FF);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-doc strong { color: var(--ink, #0A0F1C); font-weight: 600; }
.legal-doc .legal-intro {
  font-size: 17px;
  color: var(--ink-2, #2E3441);
  margin-bottom: 28px;
}
.legal-doc table.legal-ages {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15px;
  border: 1px solid rgba(10, 15, 28, 0.10);
  border-radius: 8px;
  overflow: hidden;
}
.legal-doc table.legal-ages th,
.legal-doc table.legal-ages td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
}
.legal-doc table.legal-ages th {
  background: rgba(10, 15, 28, 0.03);
  font-weight: 600;
  color: var(--ink, #0A0F1C);
}
.legal-doc table.legal-ages tr:last-child td { border-bottom: 0; }
.legal-doc table.legal-ages td:last-child {
  font-weight: 600;
  color: var(--ink, #0A0F1C);
  width: 120px;
}
.legal-doc .legal-contact {
  margin-top: 56px;
  padding: 20px 22px;
  border: 1px solid rgba(10, 15, 28, 0.10);
  border-radius: 8px;
  background: #fff;
}
.legal-doc .legal-contact h3 { margin-top: 0; }
.legal-doc .legal-callout {
  background: var(--red-soft, #FEF2F2);
  border: 1px solid #F5C6C6;
  border-radius: 12px;
  padding: 18px 22px;
  margin: 24px 0;
}
@media (max-width: 720px) {
  .legal-doc { font-size: 15px; padding-bottom: 64px; }
  .legal-doc h2 { font-size: 21px; margin-top: 40px; }
  .legal-doc h3 { font-size: 17px; }
}

/* ─── PRODUCT PAGE: Capability bento ──────────────────────────────────────────
   Mixed-span grid. Each cell carries a live visual (real app screens, scrolling
   prompts, an incoming-message queue, connection beams, running routines) that
   is masked out under the copy, plus a longer detail line revealed on hover.
   ─────────────────────────────────────────────────────────────────────────── */
#features { border-top: 1px solid var(--line); background: #fff; }
#features .container { max-width: 1400px; }
/* Section head aligns left with the grid rather than centring */
#features .section-head { margin-left: 0; margin-right: 0; }
#features .section-head h2,
#features .section-head p { max-width: 620px; }

.cap-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(clamp(282px, 25vw, 330px), auto);
  gap: clamp(12px, 1.1vw, 16px);
  margin-top: clamp(32px, 4vw, 56px);
}

/* ── Cell shell ──────────────────────────────────────────────────────────── */
.cap-cell {
  --pad: clamp(20px, 1.9vw, 28px);
  --lift: 58px;
  position: relative;
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cap-cell { grid-column: span 2; }
.cap-cell--wide { grid-column: span 4; --lift: 54px; }
/* Every non-half cell (rows 2 and 3): extra height */
.cap-bento .cap-cell:not(.cap-cell--half) { min-height: clamp(340px, 28vw, 400px); }
.cap-cell--half {
  grid-column: span 3;
  /* Taller card: the portrait Lottie intros need vertical room */
  min-height: clamp(440px, 36vw, 520px);
}

/* Blue wash, lifts in on hover */
.cap-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 86% 0%, rgba(30,144,255,0.10), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

/* ── Visual layer — masked out beneath the copy ──────────────────────────── */
.cap-visual {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 24%, #000 66%);
          mask-image: linear-gradient(to top, transparent 24%, #000 66%);
  transition: transform .55s var(--ease-out), opacity .4s var(--ease-out);
}

.cap-shot {
  width: auto;
  max-width: none;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(10,15,28,0.16), 0 2px 6px rgba(10,15,28,0.06);
}

/* Single centred app screen */
.cap-visual--screen {
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 1.8vw, 24px) 0 0;
  -webkit-mask-image: linear-gradient(to top, transparent 30%, #000 74%);
          mask-image: linear-gradient(to top, transparent 30%, #000 74%);
}
.cap-visual--screen .cap-shot { height: 128%; }

/* Two overlapping screens (wide booking cell) */
.cap-visual--shots { inset: 0; }
.cap-visual--shots .cap-shot { position: absolute; }
.cap-shot--back  { right: 26%; top: 30px; height: 116%; z-index: 0; opacity: .94; }
.cap-shot--front { right: 5%;  top: 12px; height: 134%; z-index: 1; }

/* Web-app booking chat (wide booking cell) — zoomed onto the conversation,
   sidebar pushed off-frame left, empty top strip cropped by the translate */
.cap-visual--chat { inset: 0; overflow: hidden; }
.cap-visual--chat .cap-shot {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  left: -33%;
  width: 152%;
  max-width: none;
  height: auto;
  aspect-ratio: 1912 / 948; /* gives the lazy img layout size before it loads */
  transform: translateY(-8%);
}

/* ── Scrolling prompts (Ask cell) ────────────────────────────────────────── */
.cap-visual--marquee {
  inset: 0;
  padding: clamp(14px, 1.6vw, 20px) 0 0 clamp(16px, 1.8vw, 24px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 34%, transparent 58%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 34%, transparent 58%);
}
.cap-marquee {
  display: flex;
  flex-direction: column;
  animation: cap-marquee-up 34s linear infinite;
}
.cap-marquee-track {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 9px;
}
.cap-prompt {
  align-self: flex-start;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  filter: blur(0.6px);
  transition: filter .3s var(--ease-out), border-color .3s var(--ease-out);
}
@keyframes cap-marquee-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ── Incoming message queue (Reply cell) ─────────────────────────────────── */
.cap-visual--list {
  top: clamp(14px, 1.5vw, 20px);
  right: clamp(14px, 1.5vw, 20px);
  bottom: 0;
  width: min(48%, 400px);
  overflow: hidden;
}
/* List visual inside a 1-col cell spans the full card width */
.cap-cell:not(.cap-cell--wide) .cap-visual--list {
  left: clamp(14px, 1.5vw, 20px);
  width: auto;
}
/* Voice tile (talk to it like a personal assistant): centred, clear of the copy */
.cap-visual--voice {
  inset: 0;
  bottom: clamp(78px, 7.5vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.2vw, 16px);
  -webkit-mask-image: none;
          mask-image: none;
}
.cap-visual--voice img {
  max-width: min(78%, 300px);
  max-height: 100%;
  object-fit: contain;
}

/* Lottie visual (email intro) — same footprint as the list visual.
   Ends above the copy block so animation and text never clash; a short
   fade softens the last few pixels under the hover-lifted title. */
.cap-visual--lottie {
  top: clamp(14px, 1.5vw, 20px);
  right: clamp(14px, 1.5vw, 20px);
  bottom: clamp(78px, 7.5vw, 96px);
  width: min(48%, 400px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%);
          mask-image: linear-gradient(to top, transparent 0%, #000 16%);
}
.cap-lottie {
  width: 100%;
  height: 100%;
}
/* Lottie filling a cell: full-width, top-aligned, stopping above the copy */
.cap-visual--lottie-cell {
  inset: 0;
  bottom: clamp(78px, 7.5vw, 96px);
  width: auto;
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.5vw, 20px) 0;
}
@media (max-width: 980px) { .cap-visual--lottie-cell { width: auto; } }
@media (max-width: 720px) { .cap-visual--lottie-cell { width: auto; } }
.cap-lottie svg { display: block; }
@media (max-width: 980px) {
  .cap-visual--lottie { width: min(44%, 340px); }
}
@media (max-width: 720px) {
  .cap-visual--lottie { width: 74%; }
}
.cap-msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
}
.cap-msg {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.cap-msg-logo { width: 20px; height: 20px; }
.cap-msg--noicon { grid-template-columns: minmax(0, 1fr) auto; }
.cap-msg-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.cap-msg-txt b { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.cap-msg-pill {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── Connection beams (Connect cell) ────────────────────────────────────── */
.cap-visual--beam {
  top: 0;
  right: clamp(6px, 0.8vw, 14px);
  bottom: 22%;
  width: min(46%, 400px);
  display: grid;
  place-items: center;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
          mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}
.cap-beam { width: 100%; height: auto; max-height: 100%; }
.cap-beam-base { fill: none; stroke: rgba(10,15,28,0.10); stroke-width: 1.4; }
.cap-beam-flow {
  fill: none;
  stroke: url(#cap-beam-grad);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 26 420;
  stroke-dashoffset: 446;
  animation: cap-beam-flow 3.2s linear infinite;
}
.cap-beam-lines .cap-beam-flow:nth-child(7)  { animation-delay: 0.62s; }
.cap-beam-lines .cap-beam-flow:nth-child(8)  { animation-delay: 1.24s; }
.cap-beam-lines .cap-beam-flow:nth-child(9)  { animation-delay: 1.86s; }
.cap-beam-lines .cap-beam-flow:nth-child(10) { animation-delay: 2.48s; }
@keyframes cap-beam-flow {
  to { stroke-dashoffset: 0; }
}
.cap-beam-nodes circle { fill: #fff; stroke: var(--line); stroke-width: 1.4; }
.cap-beam-glyphs {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cap-beam-hub {
  fill: #fff;
  stroke: var(--blue-mid);
  stroke-width: 1.6;
  filter: drop-shadow(0 8px 18px rgba(30,144,255,0.22));
}
.cap-beam-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.4;
  animation: cap-hub-pulse 3.2s var(--ease-out) infinite;
}
@keyframes cap-hub-pulse {
  0%   { r: 34; opacity: 0.45; }
  70%  { r: 50; opacity: 0; }
  100% { r: 50; opacity: 0; }
}

/* ── Running routines (Automate cell) ───────────────────────────────────── */
.cap-visual--routines {
  inset: 0;
  padding: clamp(14px, 1.6vw, 20px) 0 0 clamp(16px, 1.8vw, 24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 38%, transparent 64%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 38%, transparent 64%);
}
.cap-routines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(56%, 330px);
}
.cap-routine {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.cap-routine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: cap-routine-dot 2.6s var(--ease-out) infinite;
}
.cap-routine:nth-child(2) .cap-routine-dot { animation-delay: 0.5s; }
.cap-routine:nth-child(3) .cap-routine-dot { animation-delay: 1s; }
@keyframes cap-routine-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,144,255,0.36); }
  55%      { box-shadow: 0 0 0 6px rgba(30,144,255,0); }
}
.cap-routine-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--muted);
}
.cap-routine-txt b {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.cap-routine-shot { position: absolute; right: 5%; top: 18px; height: 122%; }

/* ── Copy block ─────────────────────────────────────────────────────────── */
.cap-body {
  position: relative;
  z-index: 2;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  transition: transform .38s var(--ease-out);
}
.cap-cell--wide .cap-body { max-width: 56%; }
.cap-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.cap-icon svg { width: 19px; height: 19px; }
.cap-body h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.cap-body p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--ink-2);
}
.cap-detail {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--pad) - 4px);
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .38s var(--ease-out);
  pointer-events: none;
}
.cap-cell--wide .cap-detail { right: auto; max-width: 56%; }

@media (hover: hover) and (pointer: fine) {
  .cap-cell:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 20px 48px rgba(10,15,28,0.10);
  }
  .cap-cell:hover::after { opacity: 1; }
  .cap-cell:hover .cap-body { transform: translateY(calc(var(--lift) * -1)); }
  .cap-cell:hover .cap-detail { opacity: 1; transform: translateY(0); }
  .cap-cell:hover .cap-icon {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .cap-cell:hover .cap-visual { transform: translateY(-12px) scale(1.02); opacity: .85; }
  .cap-cell:hover .cap-prompt { filter: none; border-color: var(--blue-mid); }
  .cap-cell:hover .cap-marquee { animation-play-state: paused; }
}

/* Touch: no hover to reveal, so the detail line sits in flow */
@media (hover: none) {
  .cap-cell .cap-detail,
  .cap-cell--wide .cap-detail {
    position: static;
    max-width: none;
    opacity: 1;
    transform: none;
    padding: 0 var(--pad) var(--pad);
  }
  .cap-body { padding-bottom: 10px; }
}

@media (max-width: 1080px) {
  /* Two columns: dense packing backfills the gaps the span-2 cells leave */
  .cap-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
  }
  .cap-cell { grid-column: span 1; }
  .cap-cell--wide { grid-column: span 2; }
  .cap-cell--half { grid-column: span 1; }
  .cap-cell--wide .cap-body { max-width: 62%; }
  .cap-cell--wide .cap-detail { max-width: 62%; }
  .cap-visual--list { width: min(44%, 340px); }
  .cap-visual--beam { width: min(44%, 340px); }
}

@media (max-width: 720px) {
  .cap-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(300px, auto);
  }
  .cap-cell,
  .cap-cell--wide { grid-column: span 1; }
  .cap-cell--wide .cap-body { max-width: 72%; }
  .cap-cell--wide .cap-detail { max-width: none; }
  .cap-visual--list { width: 74%; }
  .cap-visual--beam { width: 64%; }
  .cap-msg-pill { display: none; }
  .cap-visual--screen .cap-shot { height: 112%; }
  .cap-shot--back { display: none; }
  .cap-shot--front { right: 2%; height: 110%; }
  .cap-routines { max-width: 60%; }
  .cap-routine-shot { right: -6%; height: 110%; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-marquee,
  .cap-beam-flow,
  .cap-beam-pulse,
  .cap-routine-dot { animation: none; }
  .cap-visual,
  .cap-body,
  .cap-detail { transition: none; }
  .cap-prompt { filter: none; }
  .cap-beam-flow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .45; }
  .cap-beam-pulse { opacity: 0; }
}

/* ── Interactive example demo ("Ask. And it's already on it.") ─────────── */
.try-demo > .container {
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 80px);
}
.try-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(18px, 2.6vw, 40px);
  align-items: stretch;
  margin-top: clamp(28px, 4vw, 48px);
}
.try-prompts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.try-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 15px 17px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.try-chip svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); }
.try-chip:hover { color: var(--ink); border-color: var(--blue); }
.try-chip.is-active { background: rgba(30,144,255,0.07); border-color: var(--blue); color: var(--ink); }
.try-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.try-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 400px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 40px rgba(10,15,28,0.08);
}
.try-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.try-avatar { width: 30px; height: 30px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; }
.try-avatar img { width: 100%; height: 100%; object-fit: contain; }
.try-who { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.try-model { margin-left: auto; font-size: 0.72rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }
.try-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

.try-bubble {
  max-width: 88%;
  padding: 12px 15px;
  font-size: 0.9rem;
  line-height: 1.55;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: tryBubbleIn 0.4s var(--ease-out) forwards;
}
.try-bubble.user { align-self: flex-end; background: var(--blue); color: #fff; font-weight: 500; border-bottom-right-radius: 5px; margin-bottom: 14px; }
.try-bubble.ai { align-self: flex-start; background: #fff; border: none; color: var(--ink); border-bottom-left-radius: 5px; }
.try-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.try-tag svg { width: 13px; height: 13px; }

.try-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 13px 15px;
  background: #fff;
  border: none;
  border-radius: 12px;
  border-bottom-left-radius: 5px;
}
.try-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: tryBlink 1.2s infinite; }
.try-typing span:nth-child(2) { animation-delay: 0.2s; }
.try-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes tryBubbleIn { to { opacity: 1; transform: translateY(0); } }
@keyframes tryBlink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .try-bubble { animation: none; opacity: 1; transform: none; }
  .try-typing span { animation: none; }
}
@media (max-width: 760px) {
  .try-wrap { grid-template-columns: 1fr; }
  .try-screen { height: 360px; }
}

/* ─── PRODUCT PAGE: Memory / Personalisation — split, image on right ──────── */
.pp-memory {
  background: #fff;
  padding: clamp(36px, 4.5vw, 64px) 0;
}
.pp-memory > .container > .section-head {
  margin-bottom: clamp(28px, 3vw, 44px);
}
.pp-memory-split {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.pp-memory-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-memory-mockup img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(10,15,28,0.18));
}
/* Shared-border list (why-quad pattern, vertical stack) */
.pp-memory-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.pp-memory-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(18px, 1.8vw, 22px) clamp(20px, 2vw, 26px);
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  transition: background-color .22s var(--ease-out);
}
.pp-memory-item:first-child { border-top: 0; }
.pp-memory-item:nth-child(even) { background: var(--bg-tint); }
@media (hover: hover) and (pointer: fine) {
  .pp-memory-item:hover { background: rgba(30,144,255,0.05); }
}
.pp-memory-item.is-lead {
  background: var(--blue-pale);
}
.pp-memory-item-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
}
.pp-memory-item.is-lead .pp-memory-item-num {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.pp-memory-item-body h3 {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
}
.pp-memory-item-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .pp-memory-split { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); }
  .pp-memory-mockup { order: -1; }
  .pp-memory-mockup img { max-width: 320px; }
}

/* ─── PRODUCT PAGE: Comparison band — MyPA vs ChatGPT vs Siri/Alexa ───────── */
.pp-compare {
  background: var(--bg-tint);
  padding: clamp(72px, 8vw, 120px) 0;
  border-top: 1px solid var(--line);
}
.pp-compare .section-head { margin-bottom: clamp(36px, 4vw, 56px); }

.pp-compare-table {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.pp-compare-row {
  display: contents;
}
.pp-compare-cell {
  padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.pp-compare-cell:nth-child(4n) { border-right: 0; }
.pp-compare-row:first-child .pp-compare-cell { border-top: 0; }

.pp-compare-cell--feature {
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
  color: var(--ink);
}

.pp-compare-row--head .pp-compare-cell {
  background: var(--bg-tint);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(12px, 1.4vw, 16px);
}
.pp-compare-row--head .pp-compare-cell--mypa {
  color: var(--blue);
  background: var(--blue-pale);
}

.pp-compare-cell--mypa {
  background: rgba(30,144,255,0.05);
}

.pp-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.pp-compare-no {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--muted);
  opacity: 0.5;
  border-radius: 8px;
}
.pp-compare-partial {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
}

@media (max-width: 760px) {
  /* Switch the table to horizontal scroll so all 4 columns stay legible */
  .pp-compare-table {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 1fr));
    min-width: 600px;
  }
  .pp-compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pp-compare > .container {
    min-width: 600px;
  }
  .pp-compare-cell { padding: 12px 10px; font-size: 0.85rem; }
  .pp-compare-row--head .pp-compare-cell { font-size: 0.6rem; }
}

/* ─── PRODUCT PAGE: Trust chips — closer inside the Comparison band ───────── */
.pp-trust-chips {
  list-style: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.pp-trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  transition: border-color 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pp-trust-chips li:hover { border-color: var(--blue-mid); }
}
.pp-trust-dot { display: none; }

/* ─── PRODUCT PAGE: Data line — terminal-style key/value row, replaces stats strip ─── */
.pp-data-row {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2.2vw, 28px) 0;
}
.pp-data-line {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.4;
}
.pp-data-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pp-data-pair dt {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: lowercase;
}
.pp-data-pair dt::after {
  content: '=';
  margin-left: 6px;
  color: var(--line);
}
.pp-data-pair dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}
.pp-data-pair dd b {
  font-weight: 700;
  color: var(--blue);
  margin-right: 2px;
}

/* ─── (legacy) Numbers strip kept below for reference; class no longer rendered ─── */
.pp-stats-strip {
  padding: clamp(36px, 4.5vw, 56px) 0 clamp(48px, 6vw, 72px);
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
}
.pp-stats-strip .stat-4 { margin-top: 0; }

/* ─── PRODUCT PAGE: Bring Your Own AI + Choose your model — split, light ──── */
.byo-ai {
  position: relative;
  background: var(--bg-tint);
  color: var(--ink);
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .byo-provider:hover { border-color: var(--blue-mid); }
  .byo-provider-more:hover { border-color: var(--line); }
}
@media (hover: hover) and (pointer: fine) {
  .byo-card:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 8px 24px rgba(10,15,28,0.05);
  }
}

/* Partner note at bottom — full width, sits as a closer */
.byo-partner-note {
  margin: clamp(32px, 3.5vw, 48px) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .byo-split {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .byo-split > .byo-side:first-child {
    padding-right: 0;
    padding-bottom: clamp(40px, 6vw, 56px);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .byo-split > .byo-side:last-child {
    padding-left: 0;
    padding-top: clamp(40px, 6vw, 56px);
  }
  .byo-choose-mockup { margin-top: 0; }
  .byo-choose-mockup img { max-width: 280px; }
}

/* ─── PRODUCT PAGE: Ask the Experts — copy left, cascade of app moments (5a) ── */
.pp-triage {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 620px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(32px, 4vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 0 clamp(44px, 5.5vw, 70px);
}

.pp-triage-copy h3 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.625rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}

.pp-triage-lede {
  margin: 24px 0 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.pp-triage-copy .btn { margin-top: 24px; }

.pp-triage-note {
  margin: 24px 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Cascade scene — dotted path behind three absolutely placed cards */
.pp-triage-scene {
  position: relative;
  width: min(620px, 100%);
  height: 600px;
  color: var(--blue-mid); /* dotted path picks this up via currentColor */
}

.pp-triage-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pp-triage-card {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow:
    0 24px 48px rgba(10,15,28,.10),
    0 4px 12px rgba(10,15,28,.05);
}
.pp-triage-card--pick  { top: 0;     left: 0;     width: 310px; }
.pp-triage-card--match { top: 250px; left: 170px; width: 320px; }
.pp-triage-card--live  { top: 402px; left: 340px; width: 280px; }

.pp-triage-step {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.pp-triage-step--live { color: #7FE0AC; }

/* Card 1 — expert picker */
.pp-triage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pp-triage-chip {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 11px;
  box-shadow: var(--shadow-sm);
}
.pp-triage-chip.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 3px 12px rgba(30,144,255,.35);
}
.pp-triage-chip--more {
  color: var(--muted);
  border-style: dashed;
  border-color: var(--line);
  box-shadow: none;
}

.pp-triage-input {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 8px 8px 8px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pp-triage-input-ph {
  flex: 1;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-triage-mic {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.pp-triage-send {
  width: 26px;
  height: 26px;
  border-radius: 50%; /* round icon well */
  background: var(--bg-cool);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-triage-send svg { width: 12px; height: 12px; }

/* Cards 2 + 3 — person rows */
.pp-triage-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.pp-triage-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* genuine circle: avatar */
  background: var(--ink-3);
  color: #9FB0C0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-triage-person-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.pp-triage-person-sub {
  display: block;
  font-size: 0.69rem;
  color: var(--blue);
  margin-top: 3px;
}

.pp-triage-actions {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}
.pp-triage-connect {
  flex: 1;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(30,144,255,.25);
}
.pp-triage-later {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 9px 15px;
}

/* Card 3 — live call, dark surface */
.pp-triage-card--live {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 24px 48px rgba(10,15,28,.30), 0 4px 12px rgba(10,15,28,.12);
}
.pp-triage-card--live .pp-triage-avatar { background: rgba(255,255,255,0.12); }
.pp-triage-card--live .pp-triage-person-name { color: #fff; }
.pp-triage-card--live .pp-triage-person-sub  { color: #8FD0FF; }
.pp-triage-hang {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* round icon well */
  background: #FF4D4D;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-triage-hang svg {
  width: 17px;
  height: 17px;
  transform: rotate(135deg); /* handset down = hang up */
}

@media (max-width: 1080px) {
  .pp-triage {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 44px;
  }
  .pp-triage-copy { max-width: 480px; }
  .pp-triage-scene { margin: 0 auto; }
}

@media (max-width: 680px) {
  .pp-triage-scene {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pp-triage-path { display: none; }
  .pp-triage-card--pick,
  .pp-triage-card--match,
  .pp-triage-card--live {
    position: static;
    width: 100%;
  }
}

/* ─── PRODUCT PAGE: Ludicrous Mode — light editorial band ─────────────────── */
.ludi {
  position: relative;
  background: linear-gradient(180deg, #E8EEF8 0%, #F2F6FC 40%, #F8FAFE 100%);
  color: var(--ink);
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
}
.ludi > .container { position: relative; z-index: 2; }

.ludi-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Layer 1 — Large central spotlight: the "energy" of parallel intelligence */
.ludi-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.ludi-glow-1 {
  width: 1100px;
  height: 1100px;
  top: -380px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(30,144,255,0.32) 0%, rgba(30,144,255,0.10) 40%, transparent 70%);
  opacity: 0.7;
}

/* Layer 2 — Secondary accent glow, bottom-right */
.ludi-glow-2 {
  width: 760px;
  height: 760px;
  bottom: -300px;
  right: -220px;
  background: radial-gradient(circle, rgba(91,168,255,0.24), transparent 65%);
  opacity: 0.55;
}

.ludi-head {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.ludi-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 8px;
  padding: 9px 16px;
}
.ludi-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(30,144,255,0.6);
  /* pulse removed */
}
.ludi-display {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 18px 0 16px;
  color: var(--ink);
}
.ludi-display .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}

.ludi-lead {
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto;
}

/* Branch visualisation — MyPA query fans out to every engine */
.ludi-branch {
  position: relative;
  margin: clamp(36px, 4vw, 56px) auto 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 200px minmax(0, 0.9fr);
  align-items: stretch;
  gap: 0;
  padding: clamp(28px, 3.2vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(10,15,28,0.04);
}

.ludi-branch-source {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.ludi-branch-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.ludi-branch-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 8px;
}
.ludi-branch-card img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.ludi-branch-card p {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
}
.ludi-branch-dispatch {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ludi-branch-lines {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.ludi-branch-targets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.ludi-branch-engine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.ludi-branch-engine-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  min-width: 0;
}
.ludi-branch-engine-name img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ludi-branch-engine-resp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ludi-branch-engine-resp .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.ludi-branch-engine--more {
  border-color: var(--blue-mid);
  background: var(--blue-pale);
}
.ludi-branch-engine--more .ludi-branch-engine-name { color: var(--blue); }
.ludi-branch-engine--more .ludi-branch-engine-resp { color: var(--blue); }

/* Stats row */
/* Made-for target chips */
.ludi-targets {
  margin: clamp(28px, 3.5vw, 40px) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
}
.ludi-targets-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ludi-targets ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ludi-targets li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
}

@media (max-width: 900px) {
  .ludi-branch {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ludi-branch-lines { display: none; }
  .ludi-branch-source { text-align: center; align-items: center; }
  .ludi-branch-dispatch::before { content: '↓ '; }
}

/* ─── PRODUCT PAGE: Real-world examples — tinted band, dotted texture ─────── */
.pp-realworld {
  position: relative;
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.pp-realworld > .container { position: relative; z-index: 1; }

/* ─── PRODUCT PAGE: How it works — soft blue band, top border ─────────────── */
.pp-howitworks {
  position: relative;
  background: var(--bg-cool);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.pp-howitworks > .container { position: relative; z-index: 1; }

/* ─── PRODUCT PAGE: Optimisation Flow — white surface, top border ─────────── */
.pp-optimisation {
  background: #fff;
  border-top: 1px solid var(--line);
}

/* ─── PRODUCT PAGE: Memory — white surface, top border ────────────────────── */
.pp-memory { border-top: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE: Life Feeds MyPA — 3-col grid of input signals
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-feeds {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.pp-feeds > .container { position: relative; z-index: 1; }

/* Shared-border lines treatment for the 6 feeds cards (3×2) */
.pp-feeds-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 920px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.pp-feeds-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: clamp(20px, 2vw, 28px);
  background: #fff;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  min-width: 0;
  transition: background-color .22s var(--ease-out);
}
.pp-feeds-card:nth-child(-n+3) { border-top: 0; }
.pp-feeds-card:nth-child(3n+1) { border-left: 0; }
.pp-feeds-card:nth-child(2),
.pp-feeds-card:nth-child(4),
.pp-feeds-card:nth-child(6) { background: var(--bg-tint); }
.pp-feeds-card-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--blue);
  transition: background .25s ease, border-color .25s ease;
}
.pp-feeds-card-circle svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .pp-feeds-card:hover { background: rgba(30,144,255,0.05); }
  .pp-feeds-card:hover .pp-feeds-card-circle {
    background: var(--blue-mid);
    border-color: var(--blue);
  }
}
.pp-feeds-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.pp-feeds-card p {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-2);
}
.pp-feeds-foot {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
@media (max-width: 700px) {
  .pp-feeds-cards { grid-template-columns: repeat(2, 1fr); }
  .pp-feeds-card { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .pp-feeds-card:nth-child(-n+2) { border-top: 0; }
  .pp-feeds-card:nth-child(2n+1) { border-left: 0; }
  .pp-feeds-card:nth-child(3),
  .pp-feeds-card:nth-child(5) { border-left: 1px solid var(--line); }
  /* Re-tint for 2-col checkerboard */
  .pp-feeds-card { background: #fff; }
  .pp-feeds-card:nth-child(4n+2),
  .pp-feeds-card:nth-child(4n+3) { background: var(--bg-tint); }
}
@media (max-width: 460px) {
  .pp-feeds-cards { grid-template-columns: 1fr; }
  .pp-feeds-card { border-left: 0 !important; border-top: 1px solid var(--line) !important; background: #fff !important; }
  .pp-feeds-card:first-child { border-top: 0 !important; }
  .pp-feeds-card:nth-child(even) { background: var(--bg-tint) !important; }
}

/* ─── PRODUCT PAGE · Life Feeds split-screen (signals | capability) ───── */

/* Two halves, vertical divider between them */
.pp-feeds-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.pp-feeds-half--left  { padding-right: clamp(80px, 11vw, 200px); }
.pp-feeds-half--right {
  padding-left:  clamp(80px, 11vw, 200px);
  border-left: 1px solid var(--line);
}

/* Section-head text fills the half — no inherited 620/520 caps */
.pp-feeds-split .section-head     { max-width: none; }
.pp-feeds-split .section-head p   { max-width: none; }

/* Numbers spread across 2 rows × 3 cols */
.pp-feeds-split .pp-feeds-cards {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin: clamp(32px, 4vw, 48px) 0 0;
}
.pp-feeds-split .pp-feeds-cards::before { width: 320px; height: 320px; }
.pp-feeds-split .pp-feeds-foot {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: left;
}

/* Capability chart panel */
.pp-cap-chart {
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(10,15,28,0.05);
}
.pp-cap-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pp-cap-legend {
  list-style: none;
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: clamp(14px, 1.8vw, 22px) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 18px;
}
.pp-cap-legend li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.4;
}
.pp-cap-legend li strong {
  display: inline-block;
  min-width: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
  .pp-feeds-split { grid-template-columns: 1fr; }
  .pp-feeds-half--left  { padding-right: 0; padding-bottom: clamp(40px, 5vw, 64px); }
  .pp-feeds-half--right {
    padding-left: 0;
    padding-top: clamp(40px, 5vw, 64px);
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 700px) {
  .pp-feeds-split .pp-feeds-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .pp-feeds-split .pp-feeds-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE: Models — merged BYO key + per-chat picker + Ludicrous Mode
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT · MODELS · dark surface with shared-border lines (why-quad pattern)
   Mirrors partners' rev-shader-section--standout: dark ink ground, blue-tinted
   radial glows, transparent cells joined by hairline borders, alternating tint.
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-models {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0;
}
.pp-models--dark {
  background: var(--ink);
  color: #fff;
  isolation: isolate;
}
.pp-models--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(30,144,255,0.16), transparent 65%),
    radial-gradient(ellipse 50% 40% at 12% 80%, rgba(26,95,217,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.pp-models-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pp-models-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.pp-models-glow-1 {
  width: 760px;
  height: 760px;
  top: -240px;
  left: -160px;
  background: radial-gradient(circle, rgba(30,144,255,0.20), transparent 65%);
}
.pp-models-glow-2 {
  width: 620px;
  height: 620px;
  bottom: -200px;
  right: -120px;
  background: radial-gradient(circle, rgba(91,168,255,0.16), transparent 65%);
}
.pp-models > .container { position: relative; z-index: 1; }

/* Section head on dark */
.pp-models--dark .section-head .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-light);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pp-models--dark .section-head h2 { color: #fff; }
.pp-models--dark .section-head h2 .serif { color: var(--blue-light); }
.pp-models--dark .section-head p { color: rgba(255,255,255,0.62); }

/* Shared-border 3-cell grid (why-quad / rev-shader pattern) */
.pp-models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: stretch;
}

/* Boxless Ludicrous flow — one section with the head, no sub box.
   The section renders LIGHT (site rule: no black sections), so ink text. */
.pp-models-flow { margin-top: clamp(32px, 4vw, 52px); }
.pp-models-flow h3 {
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 14px 0 0;
  color: var(--ink);
}
.pp-models-flow h3 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.pp-models-flow h3 .dim {
  display: block;
  margin-top: 10px;
  max-width: 68ch;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.04vw, 1rem);
  line-height: 1.55;
}
.pp-models-flow .pp-models-shot {
  border-color: var(--line);
  box-shadow: 0 24px 64px rgba(10, 15, 28, 0.18);
}

.pp-models-card {
  position: relative;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  transition: background-color .25s var(--ease-out);
}
.pp-models-card:first-child { border-left: 0; }
.pp-models-card:nth-child(2) { background: rgba(255,255,255,0.025); }
@media (hover: hover) and (pointer: fine) {
  .pp-models-card:hover { background: rgba(91,168,255,0.06); }
}

/* Kicker head — icon + mono uppercase label */
.pp-models-card-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-text);
  min-height: 0;
}
.pp-models-card-head svg { width: 14px; height: 14px; }

/* Title with inline dim sub-text */
.pp-models-card h3 {
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  color: #fff;
}
.pp-models-card h3 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue-light);
}
.pp-models-card h3 .dim {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,0.58);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.04vw, 1rem);
  line-height: 1.55;
}

/* Logo list (BYO key) */
.pp-models-card-logos {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-models-card-logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .pp-models-card-logo-box:hover {
    border-color: rgba(91,168,255,0.32);
    background: rgba(91,168,255,0.08);
  }
}
.pp-models-card-logo-box img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Whitewash treatment for colored icons (e.g. OpenAI mark) on dark surface */
.pp-models-icon--white { filter: brightness(0) invert(1); }
.pp-models-card-logo-box span {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
}

/* Model-picker mockup */
.pp-models-card-mockup {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.pp-models-card-mockup img {
  max-width: 160px;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
/* Cropped to just the white "Choose model" dialog box from the screenshot */
.pp-models-modal-shot {
  width: 100%;
  max-width: 248px;
  aspect-ratio: 1060 / 1834;          /* white box bbox within the screenshot */
  background: url("assets/screen-choose-model.png") no-repeat 50% 50%;
  background-size: 114% auto;          /* zoom so the box fills the frame */
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* Feature cell (Ludicrous) — subtle blue glow tint */
.pp-models-card--feature {
  background: linear-gradient(180deg, rgba(30,144,255,0.06) 0%, rgba(30,144,255,0.02) 100%);
}
.pp-models-card-engines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 0;
}
.pp-models-engine {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
  transition: border-color .2s, background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .pp-models-engine:hover {
    border-color: rgba(91,168,255,0.32);
    background: rgba(91,168,255,0.08);
  }
}
.pp-models-engine img { width: 22px; height: 22px; flex-shrink: 0; }
.pp-models-engine--more {
  color: var(--blue-light);
  justify-content: center;
  font-style: italic;
  font-weight: 400;
  background: transparent;
  border-style: dashed;
}

@media (max-width: 1020px) {
  .pp-models-grid { grid-template-columns: 1fr; }
  .pp-models-card { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .pp-models-card:first-child { border-top: 0; }
  .pp-models-card:nth-child(2) { background: transparent; }
  .pp-models-card:nth-child(even) { background: rgba(255,255,255,0.025); }
  .pp-models-card-mockup img { max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE: Final CTA — document close, no dark card, no glow
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-final-cta {
  background: #fff;
  padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.pp-final-cta-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-final-cta-meta-path { color: var(--ink); }
.pp-final-cta-meta-ver { color: var(--blue); }
.pp-final-cta-meta-sep {
  width: 4px;
  height: 4px;
  background: var(--line);
}
.pp-final-cta-rule {
  height: 1px;
  background: var(--line);
  margin: 14px 0 clamp(32px, 4vw, 56px);
}
.pp-final-cta-body {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.pp-final-cta-num {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue);
  padding-top: clamp(14px, 1.6vw, 22px);
}
.pp-final-cta-content {
  min-width: 0;
}
.pp-final-cta-heading {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.94;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
  max-width: 18ch;
}
.pp-final-cta-heading .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.pp-final-cta-lead {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 28px;
}
.pp-final-cta-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pp-final-cta-command {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  font-weight: 500;
  padding: 12px 0 0;
  border-top: 1px dashed var(--line);
  max-width: 720px;
  width: 100%;
}
.pp-final-cta-command .prefix { color: var(--blue); font-weight: 700; }
.pp-final-cta-command .cmd { color: var(--ink); }
.pp-final-cta-command .cmd-arg { color: var(--blue); font-style: italic; font-weight: 300; }

@media (max-width: 720px) {
  .pp-final-cta-body { grid-template-columns: 1fr; }
  .pp-final-cta-num { padding-top: 0; margin-bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS PAGE — commercial sections (rebuild 2026-05-17)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero CTA row (legacy, unused after tech-hero rebuild) */
.page-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* ─── PARTNERS HERO TECH — light technical-document hero (matches pp-hero/hero-v2 palette) ─── */
.partners-hero-tech {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%);
  color: var(--ink);
  min-height: calc(100vh - 68px);
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px);
  display: flex;
  align-items: center;
  isolation: isolate;
}
@media (min-width: 768px) {
  .pht-top-right { display: flex; }
}
@media (max-width: 900px) {
  .pht-content { max-width: 100%; }
}

/* Right-side product mockup — twin phones, sized to fit (no horizontal crop) */
.pht-mockup {
  position: absolute;
  top: 0;
  right: 90px;
  bottom: 0;
  width: 56%;
  max-width: 940px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .pht-mockup { width: 52%; }
  .pht-mockup img { width: 100%; left: 50%; }
}
@media (max-width: 900px) {
  .pht-mockup {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    margin-top: 24px;
  }
  .pht-mockup img { width: 90%; left: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 720px) {
  .pht-mockup { display: none; }
}

/* Force every element in the partners hero to use Inter (override the
   monospace font that several .pht-* rules above declare). */
.partners-hero-tech,
.partners-hero-tech * {
  font-family: 'Inter', sans-serif;
}

@media (max-width: 720px) {
  .partners-hero-tech {
    min-height: 88vh;
    padding: clamp(40px, 7vw, 64px) clamp(20px, 5vw, 32px);
  }
  .pht-content {
    margin-left: 0;
    max-width: 100%;
  }
  .pht-headline { letter-spacing: 0.04em; }
  .pht-bottom-rail { padding: 10px 20px; }
  .pht-bottom-left, .pht-bottom-right { gap: 10px; }
  .pht-bars { display: none; }
  .pht-bottom-right .pht-meta:last-child { display: none; }
}

/* Section 2 — Why partner (4-card grid) */
.partners-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
@media (max-width: 1024px) {
  .partners-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .partners-why-grid { grid-template-columns: 1fr; }
}
@media (min-width: 720px) {
  .why-bento-cell { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .why-bento-cell { grid-column: span var(--span, 2); }
}

/* Cell 4 — Ad ARPU benchmark bars (7 columns, MyPA highlighted) */
.why-bento-bench {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--line);
}

/* ─── Why Partner · 2×2 quadrant feature grid ──────────────────────────── */
.why-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.why-quad-cell {
  position: relative;
  padding: clamp(24px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
  background: #fff;
  min-width: 0;
}
.why-quad-cell:nth-child(1) { border-right: 1px solid var(--line); }
.why-quad-cell:nth-child(2) { /* top-right */ }
.why-quad-cell:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.why-quad-cell:nth-child(4) { border-top: 1px solid var(--line); }
.why-quad-cell:nth-child(odd):not(:nth-child(1)),
.why-quad-cell:nth-child(3) { background: var(--bg-tint, #F7F9FC); }
.why-quad-cell--brand   { background: var(--bg-tint, #F7F9FC); }
.why-quad-cell--streams { background: var(--bg-tint, #F7F9FC); }

.why-quad-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.why-quad-head svg { width: 14px; height: 14px; }
.why-quad-cell > h3,
.why-quad-cell > h4 {
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.why-quad-cell .dim {
  color: var(--muted);
  font-weight: 400;
}

/* ── Brand cell: dotted world-map style + floating pill ────────────────── */
.why-quad-map {
  position: relative;
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(10,15,28,0.12) 0.9px, transparent 1.5px);
  background-size: 12px 12px;
  background-position: 4px 4px;
  height: clamp(160px, 22vh, 220px);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 50%, transparent 95%);
  mask-image: radial-gradient(ellipse 70% 60% at center, black 50%, transparent 95%);
}
.why-quad-map-pill {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(10,15,28,0.10);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  z-index: 2;
}
.why-quad-map-globe { font-size: 0.95rem; line-height: 1; }

/* ── Daily-use cell: stacked notification list ─────────────────────────── */
.why-quad-notify {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  mask-image: linear-gradient(180deg, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 60%, transparent 100%);
  max-height: 280px;
  overflow: hidden;
}
.why-quad-notify-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  transform: scale(0.96);
  animation: why-quad-scale-up .5s var(--ease-out, cubic-bezier(0.23,1,0.32,1)) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes why-quad-scale-up {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .why-quad-notify-msg { opacity: 1; transform: none; animation: none; }
}
.why-quad-notify-dot {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.why-quad-notify-dot--a { background: linear-gradient(135deg, #1E90FF, #4BA6FF); }
.why-quad-notify-dot--b { background: linear-gradient(135deg, #1577E0, #1E90FF); }
.why-quad-notify-dot--c { background: linear-gradient(135deg, #4BA6FF, #CEE7FF); }
.why-quad-notify-dot--d { background: linear-gradient(135deg, #1E90FF, #1577E0); }
.why-quad-notify-dot--e { background: linear-gradient(135deg, #4BA6FF, #1E90FF); }
.why-quad-notify-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.why-quad-notify-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}
.why-quad-notify-msg p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ── Streams cell: dual-area chart, no figures ─────────────────────────── */
.why-quad-chart {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-quad-chart svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
}
.why-quad-chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.why-quad-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.why-quad-chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.why-quad-chart-legend .dot--a { background: var(--blue-deep); }
.why-quad-chart-legend .dot--b { background: var(--blue); }
.why-quad-chart-legend .dot--c { background: var(--blue-light); }
.why-quad-chart-legend .dot--d { background: #8FC2FF; }

/* ── Features cell: 2 sub-cards with corner card + arrow ───────────────── */
.why-quad-cell--features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  gap: 0;
}
.why-quad-feat {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(220px, 26vh, 280px);
  overflow: hidden;
}
.why-quad-feat:first-child { border-right: 1px solid var(--line); }
.why-quad-feat-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.why-quad-feat-head svg { width: 14px; height: 14px; }
.why-quad-feat h4 {
  font-size: clamp(0.98rem, 1.2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.why-quad-feat-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(96px, 14vw, 152px);
  height: clamp(80px, 12vh, 120px);
  background: linear-gradient(135deg, var(--blue-pale) 0%, var(--surface-cool, #EEF2FB) 100%);
  border-top: 8px solid #fff;
  border-left: 8px solid #fff;
  border-top-left-radius: 12px;
}
.why-quad-feat-arrow {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  transition: transform .3s var(--ease-out);
  z-index: 2;
}
.why-quad-feat-arrow svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .why-quad-feat:hover .why-quad-feat-arrow { transform: rotate(-45deg); }
}

/* ── Responsive: stack to single column on narrow screens ─────────────── */
@media (max-width: 900px) {
  .why-quad { grid-template-columns: 1fr; }
  .why-quad-cell { border-right: 0; border-top: 1px solid var(--line); }
  .why-quad-cell:first-child { border-top: 0; }
  .why-quad-cell--features { grid-template-columns: 1fr; }
  .why-quad-feat:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ─── Opportunity bento variants (path + math) ────────────────────────── */

/* Growth chart cell */
.opp-bento-growth {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
}
.opp-bento-growth svg { display: block; width: 100%; height: auto; }

/* Path cell — 5 connected dots */
.opp-bento-path-cell { padding-top: clamp(28px, 3vw, 36px); }
.opp-bento-path {
  list-style: none;
  margin: 0 0 clamp(14px, 2vw, 20px);
  padding: 0 0 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 0.8vw, 10px);
  position: relative;
}
.opp-bento-path::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  opacity: 0.45;
  border-radius: 2px;
}
.opp-bento-path li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.opp-bento-path-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
  z-index: 1;
}
.opp-bento-path-dot--end {
  background: var(--blue);
}
.opp-bento-path-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
}
.opp-bento-path-lbl strong {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
}

/* Math cell — pill-style operands and a result */
.opp-bento-math-cell { padding-top: clamp(28px, 3vw, 36px); }
.opp-bento-math {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  margin: 0 0 clamp(14px, 2vw, 20px);
}
.opp-bento-math-term {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 64px;
}
.opp-bento-math-term strong {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.opp-bento-math-term em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.opp-bento-math-op {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}
.opp-bento-math-eq { color: var(--blue); }
.opp-bento-math-result {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
}
.opp-bento-math-result strong {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--blue-deep);
  line-height: 1;
}
.opp-bento-math-result em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

/* ─── Opportunity sticky-card stack (5 transformation steps) ───────────── */
.opp-stack-section {
  padding: clamp(64px, 8vw, 112px) 0;
}
.opp-stack-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.opp-stack-intro {
  position: sticky;
  top: clamp(96px, 10vw, 132px);
  align-self: start;
  max-width: 480px;
}
.opp-stack-intro .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.opp-stack-intro h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 20px;
}
.opp-stack-intro p {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

.opp-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vh, 120px);
}
.opp-stack-card {
  position: sticky;
  /* Each subsequent card sticks slightly below the previous so they fan into a stack */
  top: calc(clamp(96px, 10vw, 132px) + (var(--idx, 1) - 1) * 14px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 10px 36px rgba(10,15,28,0.06);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opp-stack-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.opp-stack-card-head h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.opp-stack-card-num {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1;
}
.opp-stack-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.opp-stack-card--final {
  border-color: var(--blue-mid);
  background: linear-gradient(180deg, #fff 0%, var(--blue-pale) 100%);
}

@media (max-width: 900px) {
  .opp-stack-layout { grid-template-columns: 1fr; }
  .opp-stack-intro { position: static; max-width: none; margin-bottom: clamp(32px, 4vw, 48px); }
  .opp-stack { gap: 16px; }
  .opp-stack-card { position: static; min-height: auto; }
}

/* Section 4 — Partner flow (Audience → Revenue) */
.partner-flow {
  list-style: none;
  padding: 0;
  margin: clamp(36px, 4.5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 1120px;
}
.partner-flow-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .partner-flow-step:hover {
    border-color: var(--blue-mid);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(10,15,28,0.06);
  }
}
.partner-flow-step.is-revenue {
  background: linear-gradient(180deg, #fff 0%, var(--blue-pale) 100%);
  border-color: var(--blue-mid);
}
.partner-flow-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.partner-flow-step h3 {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.partner-flow-step p {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-2);
}
.partner-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.partner-flow-arrow svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 960px) {
  .partner-flow {
    grid-template-columns: 1fr;
  }
  .partner-flow-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* Section 6 — What you receive (tri-column layout, product mockup centred) */
.value-tri {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
}
.value-tri-col {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 52px);
}
.value-tri-item { display: flex; flex-direction: column; }
.value-tri-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.value-tri-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,144,255,0.10);
  color: var(--blue);
  border-radius: 12px;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.value-tri-icon svg { width: 22px; height: 22px; }
.value-tri-item:hover .value-tri-icon {
  background: rgba(30,144,255,0.18);
  transform: translateY(-2px);
}
.value-tri-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.value-tri-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 4px 0 0;
}
.value-tri-body {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.62;
  padding-left: 60px;
  margin: 0;
}

/* Centre product mockup with offset ring + ambient accents.
   Padding-top/bottom reserves space for the annotation pills so they sit above
   and below the screenshot — never beside it, which would clash with the
   side text columns. */
.value-tri-image {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 60px 0 50px;
  filter: drop-shadow(0 28px 56px rgba(30,144,255,0.18));
}

/* Annotation callouts — pills + dashed connector lines pointing at the screen */
.value-tri-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.value-tri-callout {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  background: #fff;
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(30,144,255,0.14);
}
/* Above image: Branding (left) + Logo (right). Below image: Your Own Ads (centred). */
.value-tri-callout--brand { top:  8px; left:  4px; }
.value-tri-callout--logo  { top:  8px; right: 4px; }
.value-tri-callout--ads   { bottom: 8px; right: 4px; }

@media (max-width: 900px) {
  .value-tri-image { padding: 0; }
  .value-tri-lines,
  .value-tri-callout { display: none; }
}
.value-tri-image-frame {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.value-tri-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.value-tri-image-ring {
  position: absolute;
  inset: -16px;
  border: 3px solid var(--blue-mid);
  border-radius: 12px;
  z-index: 1;
  pointer-events: none;
}
.value-tri-image-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.value-tri-image-blob--a {
  width: 140px; height: 140px;
  top: -32px; right: -56px;
  background: rgba(30,144,255,0.22);
}
.value-tri-image-blob--b {
  width: 180px; height: 180px;
  bottom: -48px; left: -64px;
  background: rgba(91,168,255,0.22);
}
.value-tri-image-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}
.value-tri-image-dot--top {
  width: 10px; height: 10px;
  top: -28px; left: 50%; transform: translateX(-50%);
  background: var(--blue);
  animation: vt-float 2.6s ease-in-out infinite;
}
.value-tri-image-dot--bottom {
  width: 8px; height: 8px;
  bottom: -28px; left: 50%; transform: translateX(-50%);
  background: var(--blue-light);
  animation: vt-float 2.6s ease-in-out infinite 0.6s;
}
@keyframes vt-float {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50%      { transform: translate(-50%, -8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .value-tri-image-dot { animation: none; }
}

@media (max-width: 900px) {
  .value-tri {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .value-tri-image { order: -1; max-width: 260px; }
}

/* Section 5 — Revenue closing line */
.partners-revenue-foot {
  max-width: 720px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.partners-revenue-foot strong {
  color: var(--blue);
  font-weight: 700;
}

/* Section 6 — Value ladder sub-label (replaces inline-styled <p>) */
.vr-sub {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Section 8 — Use cases (2-col panels with longer copy) */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.use-case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .use-case:hover {
    border-color: var(--blue-mid);
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(10,15,28,0.06);
  }
}
.use-case-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.use-case h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.use-case p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .use-cases-grid { grid-template-columns: 1fr; }
}

/* Section 10 — Trust grid (4-card row) */
.partners-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
@media (max-width: 1024px) {
  .partners-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .partners-trust-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · EDITORIAL REBUILD
   Editorial-typographic spine with two atmospheric beats (hero, product
   moment, close). Uses existing DESIGN.md tokens — Founder's Ink (#0A0F1C),
   Clarity Blue (#1E90FF), Inter display compression, Inter labels.
   No card grids, no decorative chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

.partners-page--editorial { background: #fff; }
.partners-page--editorial main > section + section { /* no extra border-bottoms — sections own their padding */ }

/* Container width — keep partners-page existing override of 1480px. */

/* Shared editorial section opener (alternative to .section-head) ─────── */
.ed-section-open {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vw, 88px);
}
.ed-section-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.ed-section-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}

/* ── 1 · Atmospheric hero ─────────────────────────────────────────────── */
.ed-hero {
  position: relative;
  background: #fff; /* pure white per 2026-08-27 request (was paper gradient + blue radials) */
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.ed-hero > .container {
  position: relative;
  z-index: 1;
  padding-top: clamp(96px, 10vw, 140px);
  padding-bottom: clamp(72px, 7vw, 104px);
}
.ed-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.ed-hero-text { max-width: 720px; }
.ed-hero-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(24px, 2.6vw, 36px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ed-hero-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0 0 clamp(24px, 2.4vw, 32px);
}
.ed-hero-headline .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
  letter-spacing: -0.045em;
}
.ed-hero-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 clamp(32px, 3.6vw, 48px);
}
.ed-hero-cta {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  flex-wrap: wrap;
}
.ed-hero-quiet {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  transition: color .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1);
}
.ed-hero-quiet:hover { color: var(--blue); border-color: var(--blue); }
.ed-hero-stage {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.ed-hero-stage img,
.ed-hero-stage video {
  width: auto;
  height: auto;
  max-width: none;
  max-height: clamp(540px, 72vh, 840px);
  display: block;
}
/* Logo assembly animation stage (SVG built by main.js; img = no-JS fallback) */
.ed-hero-anim { width: 100%; }
.ed-hero-anim svg { display: block; width: 100%; height: auto; }
.ed-hero-anim > img { display: block; width: min(320px, 70%); margin: 0 auto; }
@media (max-width: 1024px) {
  .ed-hero-anim { max-width: 500px; margin: 0 auto; }
}

/* Feather the video's rectangular edges so it dissolves into the hero background */
.ed-hero-stage video {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 1024px) {
  .ed-hero-grid { grid-template-columns: 1fr; gap: clamp(48px, 6vw, 72px); }
  .ed-hero-stage img,
  .ed-hero-stage video { max-width: 100%; max-height: clamp(380px, 60vw, 600px); }
}

/* ── 2 · Editorial credibility line ───────────────────────────────────── */
.ed-credibility {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: clamp(72px, 9vw, 128px) 0;
}
.ed-credibility-line {
  max-width: 1080px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.ed-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue-deep);
  padding: 0 0.18em;
  position: relative;
  top: -0.06em;
}

/* ── 3 · The case · three editorial paragraphs ────────────────────────── */
.ed-case {
  background: var(--surface-tint, #F7F9FC);
  padding: clamp(96px, 12vw, 160px) 0;
}
.ed-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.ed-case-list li {
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 72px) 1fr;
  align-items: baseline;
  gap: clamp(20px, 2.4vw, 32px);
}
.ed-case-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  padding-top: 0.55em;
  border-top: 2px solid var(--blue);
  display: inline-block;
}
.ed-case-list p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .ed-case-list li { grid-template-columns: 1fr; gap: 14px; }
}

/* ── 4 · Segments accordion · chrome stripped ─────────────────────────── */
.ed-segments {
  background: #fff;
  padding: clamp(96px, 12vw, 160px) 0;
}
/* Override .pt-acc-section base shadow/background/border on this page */
.partners-page--editorial .pt-acc-section { background: transparent; padding: 0; }
.partners-page--editorial .pt-acc-section > .container { padding-top: 0; padding-bottom: 0; }
.partners-page--editorial .pt-acc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.partners-page--editorial .pt-acc-list {
  display: flex;
  flex-direction: column;
}
.partners-page--editorial .pt-acc-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
}
.partners-page--editorial .pt-acc-item:last-child { border-bottom: 1px solid var(--line); }
.partners-page--editorial .pt-acc-item > summary {
  list-style: none;
  display: grid;
  grid-template-columns: clamp(120px, 12vw, 160px) 1fr auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.partners-page--editorial .pt-acc-item > summary::-webkit-details-marker { display: none; }
.partners-page--editorial .pt-acc-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.partners-page--editorial .pt-acc-item > summary h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.partners-page--editorial .pt-acc-item[open] > summary h3 { color: var(--blue-deep); }
.partners-page--editorial .pt-acc-item[open] .pt-acc-tag { color: var(--blue); }
.partners-page--editorial .pt-acc-chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform .25s cubic-bezier(0.4,0,0.2,1), color .25s cubic-bezier(0.4,0,0.2,1);
}
.partners-page--editorial .pt-acc-item[open] .pt-acc-chevron { transform: rotate(180deg); color: var(--blue); }
.partners-page--editorial .pt-acc-body {
  padding: 0 0 clamp(24px, 2.8vw, 36px) clamp(136px, 14vw, 188px);
  background: transparent;
  border: 0;
}
.partners-page--editorial .pt-acc-body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.partners-page--editorial .pt-acc-body-img { display: none; }
.partners-page--editorial .pt-acc-preview {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.partners-page--editorial .pt-acc-preview-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 56px rgba(10,15,28,0.18));
  transition: opacity .35s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 900px) {
  .partners-page--editorial .pt-acc-layout { grid-template-columns: 1fr; }
  .partners-page--editorial .pt-acc-preview { display: none; }
  .partners-page--editorial .pt-acc-item > summary {
    grid-template-columns: 1fr auto;
  }
  .partners-page--editorial .pt-acc-tag {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .partners-page--editorial .pt-acc-item > summary h3 { grid-column: 1 / 2; }
  .partners-page--editorial .pt-acc-chevron { grid-column: 2 / 3; grid-row: 2 / 3; }
  .partners-page--editorial .pt-acc-body { padding-left: 0; }
}

/* ── 5 · Deliverables ladder + stat strip ─────────────────────────────── */
.ed-deliverables {
  background: var(--surface-tint, #F7F9FC);
  padding: clamp(96px, 12vw, 160px) 0;
}
.ed-ladder {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(80px, 10vw, 128px);
  max-width: 1080px;
}
.ed-ladder li {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 108px) 1fr;
  align-items: baseline;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
.ed-ladder li:last-child { border-bottom: 1px solid var(--line); }
.ed-ladder-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.ed-ladder li h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ed-ladder li p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 64ch;
}
.ed-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 2px solid var(--ink);
}
.ed-stat {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding-right: clamp(8px, 1.2vw, 16px);
}
.ed-stat-figure {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ed-stat p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 900px) {
  .ed-stat-strip { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 4vw, 40px); }
}
@media (max-width: 520px) {
  .ed-stat-strip { grid-template-columns: 1fr; }
  .ed-ladder li { grid-template-columns: 1fr; gap: 6px; }
}

/* ── 6 · Atmospheric product moment ───────────────────────────────────── */
.ed-moment {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(112px, 14vw, 180px) 0;
}
.ed-moment::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 50%, rgba(30,144,255,0.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ed-moment > .container { position: relative; z-index: 1; }
.ed-moment-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 112px);
}
.ed-moment-image {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
}
.ed-moment-image img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  filter: drop-shadow(0 50px 100px rgba(0,0,0,0.6));
}

/* ── 6b · Half-split variant · image full-bleed to viewport edge ──────── */
/* Section height is dictated by the image's natural 16:9 aspect at 50vw.
   Text on the right is sized to breathe inside that height — tight kicker→h2
   grouping, generous h2→p separation. */
.ed-moment--split { padding: 0; }
.ed-moment--split::before {
  background:
    radial-gradient(ellipse 60% 70% at 78% 50%, rgba(30,144,255,0.14), transparent 60%);
}
.ed-moment-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Hard-locked to the image's natural rendered height at 50vw width
     (image is 16:9, so 50vw × 9/16 = 28.125vw). Section IS the image height. */
  height: calc(50vw * 9 / 16);
  overflow: hidden;
}
.ed-moment--split .ed-moment-image {
  position: relative;
  margin: 0;
  display: block;
  overflow: hidden;
  justify-content: initial;
  min-height: 0;
}
.ed-moment--split .ed-moment-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.ed-moment-text-wrap {
  display: flex;
  align-items: center;
  padding: clamp(32px, 4vw, 72px) clamp(28px, 5vw, 96px);
}
.ed-moment--split .ed-moment-text { max-width: 520px; }
.ed-moment--split .ed-moment-kicker {
  margin-bottom: 14px;
}
.ed-moment--split .ed-moment-h {
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.ed-moment--split .ed-moment-text p {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
}
.ed-moment-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: clamp(20px, 2.2vw, 30px);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(91,168,255,0.28);
}
.ed-moment-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
}
.ed-moment-h .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue-light);
  letter-spacing: -0.04em;
}
.ed-moment-text p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 48ch;
}
@media (max-width: 900px) {
  .ed-moment-grid { grid-template-columns: 1fr; }
  .ed-moment-image img { max-width: 360px; }
  /* Split variant: stack image above text. Drop the hard height so the
     stacked layout breathes naturally instead of being squished. */
  .ed-moment-split { grid-template-columns: 1fr; height: auto; }
  .ed-moment-text-wrap { padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 40px); }
}

/* ── 7 · Launch + Trust + Founder voice · editorial three-column ──────── */
.ed-launch {
  background: #fff;
  padding: clamp(96px, 12vw, 160px) 0;
}
.ed-launch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ed-launch-col {
  padding: 0 clamp(24px, 2.6vw, 40px);
  border-left: 1px solid var(--line);
}
.ed-launch-col:first-child { padding-left: 0; border-left: 0; }
.ed-launch-col:last-child  { padding-right: 0; }
.ed-col-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(18px, 2vw, 26px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
.ed-col-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 clamp(24px, 2.6vw, 32px);
}
.ed-col-h .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
}
.ed-col-body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 38ch;
}
.ed-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}
.ed-timeline li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: 16px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.ed-timeline li strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue);
  padding-top: 0.45em;
  border-top: 1px solid var(--blue);
  align-self: start;
}
.ed-timeline li b {
  font-weight: 700;
  color: var(--ink);
}
.ed-launch-quote {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  padding: 0;
  border: 0;
}
.ed-launch-quote p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.ed-launch-quote .qrot-slot {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
  min-width: 6ch;
  display: inline-block;
}
.ed-launch-attrib {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ed-launch-attrib cite {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.ed-launch-attrib span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
@media (max-width: 1024px) {
  .ed-launch-grid { grid-template-columns: 1fr; gap: clamp(40px, 5vw, 60px); }
  .ed-launch-col { padding: clamp(40px, 5vw, 60px) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .ed-launch-col:first-child { padding-top: 0; border-top: 0; }
}

/* ── 8 · Atmospheric close ────────────────────────────────────────────── */
.ed-close {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(120px, 14vw, 180px) 0;
}
.ed-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(30,144,255,0.16), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ed-close > .container { position: relative; z-index: 1; }
.ed-close-inner {
  max-width: 920px;
  text-align: center;
  margin: 0 auto;
}
.ed-close-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #fff;
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.ed-close-h .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue-light);
  letter-spacing: -0.045em;
}
.ed-close-cta {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(28px, 3.2vw, 40px);
}
.ed-close-foot {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.ed-close-foot a {
  color: var(--blue-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,168,255,0.35);
  padding-bottom: 1px;
  transition: color .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1);
}
.ed-close-foot a:hover { color: #fff; border-bottom-color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · RESTORED EDITORIAL SECTIONS
   Why partner quad, value-tri "what you get", revenue 3×2 grid.
   Same DESIGN.md tokens, no card chrome, no decorative SVG.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Why Partner · 2×2 quad sharing one outer border ──────────────────── */
.ed-quad {
  background: #fff;
  padding: clamp(96px, 12vw, 160px) 0;
  border-top: 1px solid var(--line);
}
.ed-quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.ed-quad-cell {
  position: relative;
  padding: clamp(36px, 4.4vw, 64px) clamp(28px, 3.6vw, 56px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
  transition: background-color .25s cubic-bezier(0.4,0,0.2,1);
}
.ed-quad-cell:nth-child(1),
.ed-quad-cell:nth-child(2) { border-top: 0; }
.ed-quad-cell:nth-child(odd) { border-left: 0; }
.ed-quad-cell:hover { background: var(--surface-tint, #F7F9FC); }
.ed-quad-num {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(22px, 2.6vw, 36px);
  font-family: var(--font-mono);
  font-size: clamp(3rem, 5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--line);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.ed-quad-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(18px, 2vw, 26px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ed-quad-cell h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  max-width: 18ch;
}
.ed-quad-cell p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 38ch;
}
@media (max-width: 760px) {
  .ed-quad-grid { grid-template-columns: 1fr; }
  .ed-quad-cell { border-left: 0 !important; border-top: 1px solid var(--line); }
  .ed-quad-cell:nth-child(1) { border-top: 0; }
}

/* ── What You Get · editorial value-tri ───────────────────────────────── */
.ed-receive {
  background: #fff;
  padding: clamp(96px, 12vw, 160px) 0;
  border-top: 1px solid var(--line);
}
.ed-receive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(72px, 9vw, 112px);
}
.ed-receive-col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 44px);
}
.ed-receive-col:last-of-type { text-align: left; }
.ed-receive-item {
  display: grid;
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: baseline;
}
.ed-receive-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  padding-top: 0.55em;
  border-top: 1px solid var(--blue);
  align-self: start;
}
.ed-receive-item h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ed-receive-item p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.ed-receive-image {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ed-receive-image img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  border-radius: 32px;
  filter: drop-shadow(0 32px 64px rgba(10,15,28,0.18));
}
@media (max-width: 1024px) {
  .ed-receive-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .ed-receive-image { order: -1; max-width: 320px; margin: 0 auto; }
  .ed-receive-image img { max-width: 280px; }
}

/* ── Revenue Streams · editorial 3×2 grid ─────────────────────────────── */
.ed-revenue {
  background: var(--surface-tint, #F7F9FC);
  padding: clamp(96px, 12vw, 160px) 0;
}
.ed-revenue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
}
.ed-revenue-cell {
  position: relative;
  padding: clamp(30px, 3.6vw, 48px) clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s cubic-bezier(0.4,0,0.2,1);
}
.ed-revenue-cell:hover { background: var(--surface-tint, #F7F9FC); }
.ed-revenue-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.ed-revenue-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.ed-revenue-cell h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.18rem, 1.55vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.ed-revenue-cell p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 36ch;
}
.ed-revenue-foot {
  margin: clamp(40px, 5vw, 64px) 0 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 680px;
}
.ed-revenue-foot strong {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 1024px) {
  .ed-revenue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ed-revenue-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · REVENUE STANDOUT (atmospheric, money-math hero)
   The conversion-critical moment for MVNO partners. Dark, big numbers first,
   the six streams as supporting detail beneath.
   ═══════════════════════════════════════════════════════════════════════════ */

.rev-shader-section--standout {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(112px, 14vw, 180px) 0;
}
.rev-shader-section--standout::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(30,144,255,0.16), transparent 65%),
    radial-gradient(ellipse 50% 40% at 12% 80%, rgba(26,95,217,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.rev-shader-section--standout > .container { position: relative; z-index: 1; }

/* Money math hero — big number, equation, lead */
.rev-standout-hero {
  text-align: center;
  max-width: 980px;
  margin: 0 auto clamp(64px, 8vw, 96px);
}
.rev-shader-section--standout .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: clamp(24px, 2.6vw, 36px);
  padding: 0;
  border: 0;
  border-radius: 0;
}
.rev-standout-figure {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 clamp(28px, 3vw, 40px);
  text-wrap: balance;
}
.rev-standout-figure .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue-light);
  letter-spacing: -0.035em;
}
.rev-standout-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  margin: 0 auto;
  max-width: 56ch;
}

/* Six revenue cells — shared-border 3×2 grid (why-quad pattern, inverted) */
.rev-shader-section--standout .rev-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 clamp(40px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: none;
}
.rev-shader-section--standout .rev-card {
  position: relative;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 2.8vw, 36px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .25s cubic-bezier(0.4,0,0.2,1);
}
/* Remove top-border for first row, left-border for first column */
.rev-shader-section--standout .rev-card:nth-child(-n+3) { border-top: 0; }
.rev-shader-section--standout .rev-card:nth-child(3n+1) { border-left: 0; }
/* Subtle alternating tint, mirrors why-quad's tinted cells */
.rev-shader-section--standout .rev-card:nth-child(2),
.rev-shader-section--standout .rev-card:nth-child(4),
.rev-shader-section--standout .rev-card:nth-child(6) {
  background: rgba(255,255,255,0.025);
}
@media (hover: hover) and (pointer: fine) {
  .rev-shader-section--standout .rev-card:hover {
    background: rgba(91,168,255,0.06);
    transform: none;
    border-color: rgba(91,168,255,0.20);
    box-shadow: none;
  }
}

/* Card head — small icon + mono uppercase tag (why-quad pattern) */
.rev-shader-section--standout .rev-card-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.rev-shader-section--standout .rev-card-head svg {
  width: 14px;
  height: 14px;
}

/* Title with dim sub-text */
.rev-shader-section--standout .rev-card > h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.rev-shader-section--standout .rev-card .dim {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,0.58);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.04vw, 1rem);
  line-height: 1.55;
}

/* Foot note text on dark */
.rev-shader-section--standout .partners-revenue-foot {
  color: rgba(255,255,255,0.55);
}
.rev-shader-section--standout .partners-revenue-foot strong {
  color: var(--blue-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVENUE BENTO — 6-slot bento on dark, MyPA branded
   Layout: tall lead (col 1, rows 1–3) + 4 small + wide bottom (cols 2–3)
   Shared internal borders, alternating subtle tint, no figures (per project rule)
   ═══════════════════════════════════════════════════════════════════════════ */
.rev-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(180px, auto));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
@media (hover: hover) and (pointer: fine) {
  .rev-bento-cell:hover { background: rgba(91,168,255,0.06); }
}
@media (hover: hover) and (pointer: fine) {
  .rev-bento--trackers:hover,
  .rev-bento--prod:hover { background: rgba(91,168,255,0.07); }
}


/* ── Responsive collapses ─────────────────────────────────── */
@media (max-width: 1024px) {
  .rev-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .rev-bento--lead     { grid-column: 1 / 3; grid-row: auto; border-top: 0; border-left: 0; }
  .rev-bento--trackers { grid-column: 1; grid-row: auto; border-top: 1px solid rgba(255,255,255,0.08); border-left: 0; background: transparent; }
  .rev-bento--stat     { grid-column: 2; grid-row: auto; border-top: 1px solid rgba(255,255,255,0.08); border-left: 1px solid rgba(255,255,255,0.08); }
  .rev-bento--focus    { grid-column: 1; grid-row: auto; background: rgba(255,255,255,0.025); }
  .rev-bento--prod     { grid-column: 2; grid-row: auto; background: transparent; }
}
@media (max-width: 640px) {
  .rev-bento { grid-template-columns: 1fr; }
  .rev-bento-cell { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; grid-column: 1 !important; }
  .rev-bento--lead { border-top: 0 !important; }
  .rev-bento--lead { gap: 16px; }
  .rev-bento-glyph { font-size: clamp(3.5rem, 14vw, 5rem); }
  .rev-bento-glyph--split { font-size: clamp(2.4rem, 10vw, 3.6rem); }
}

/* ── Revenue standout → light (no black sections on the site) ─────────── */
.rev-shader-section--standout {
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  color: var(--ink);
}
.rev-shader-section--standout::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(30,144,255,0.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 12% 80%, rgba(26,95,217,0.05), transparent 60%);
}
.rev-shader-section--standout .label { color: var(--blue-text); }
.rev-standout-figure { color: var(--ink); }
.rev-standout-figure .serif { color: var(--blue); }
.rev-standout-lead { color: var(--ink-2); }
.rev-bento-cell .rev-card-head,
.rev-shader-section--standout .rev-card-head { color: var(--blue); }
.rev-shader-section--standout .partners-revenue-foot { color: var(--ink-2); }
.rev-shader-section--standout .partners-revenue-foot strong { color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .rev-bento-cell:hover,
  .rev-bento--trackers:hover,
  .rev-bento--prod:hover { background: var(--blue-pale); }
}
@media (max-width: 1024px) {
  .rev-bento--trackers { border-top-color: var(--line); }
  .rev-bento--stat { border-top-color: var(--line); border-left-color: var(--line); }
  .rev-bento--focus { background: var(--bg-tint); }
}
@media (max-width: 640px) {
  .rev-bento-cell { border-top-color: var(--line) !important; }
}

/* ── Product Models section → light (no black sections) ───────────────── */
.pp-models--dark {
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  color: var(--ink);
}
.pp-models--dark::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(30,144,255,0.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 12% 80%, rgba(26,95,217,0.05), transparent 60%);
}
.pp-models-glow { opacity: 0.45; }
.pp-models--dark .section-head .label { color: var(--blue-text); }
.pp-models--dark .section-head h2 { color: var(--ink); }
.pp-models--dark .section-head h2 .serif { color: var(--blue); }
.pp-models--dark .section-head p { color: var(--ink-2); }
.pp-models-grid { background: #fff; border-color: var(--line); }
.pp-models-card { border-left-color: var(--line); }
.pp-models-card:nth-child(2) { background: var(--bg-tint); }
.pp-models-card-head { color: var(--blue); }
.pp-models-card h3 { color: var(--ink); }
.pp-models-card h3 .serif { color: var(--blue); }
.pp-models-card h3 .dim { color: var(--ink-2); }
.pp-models-card-logo-box { background: var(--bg-tint); border-color: var(--line); }
.pp-models-card-logo-box span { color: var(--ink); }
.pp-models-engine { background: var(--bg-tint); border-color: var(--line); color: var(--ink); }
.pp-models-engine--more { color: var(--blue); background: transparent; }
.pp-models-icon--white { filter: none; }
.pp-models-card-mockup { background: var(--bg-tint); border-color: var(--line); }
.pp-models-card-mockup img,
.pp-models-modal-shot { box-shadow: 0 16px 36px rgba(10,15,28,0.14); }
@media (hover: hover) and (pointer: fine) {
  .pp-models-card:hover { background: var(--blue-pale); }
  .pp-models-card-logo-box:hover,
  .pp-models-engine:hover { border-color: var(--blue); background: var(--blue-pale); }
}
@media (max-width: 1020px) {
  .pp-models-card { border-top-color: var(--line); }
}

/* ── Partners atmospheric sections → light (no black sections) ─────────── */
.ed-moment {
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  color: var(--ink);
}
.ed-moment::before {
  background: radial-gradient(ellipse 70% 50% at 30% 50%, rgba(30,144,255,0.07), transparent 60%);
}
.ed-moment--split::before {
  background: radial-gradient(ellipse 60% 70% at 78% 50%, rgba(30,144,255,0.07), transparent 60%);
}
.ed-moment-kicker { color: var(--blue); border-bottom-color: var(--line); }
.ed-moment-h { color: var(--ink); }
.ed-moment-h .serif { color: var(--blue); }
.ed-moment-text p { color: var(--ink-2); }

.ed-close {
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  color: var(--ink);
}
.ed-close::before {
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(30,144,255,0.07), transparent 65%);
}
.ed-close-h { color: var(--ink); }
.ed-close-h .serif { color: var(--blue); }
.ed-close-foot { color: var(--ink-2); }
.ed-close-foot a { color: var(--blue); border-bottom-color: rgba(30,144,255,0.35); }
.ed-close-foot a:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }

/* Responsive collapses */
@media (max-width: 1024px) {
  .rev-shader-section--standout .rev-cards { grid-template-columns: repeat(2, 1fr); }
  .rev-shader-section--standout .rev-card:nth-child(-n+3) { border-top: 1px solid rgba(255,255,255,0.08); }
  .rev-shader-section--standout .rev-card:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,0.08); }
  .rev-shader-section--standout .rev-card:nth-child(-n+2) { border-top: 0; }
  .rev-shader-section--standout .rev-card:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 640px) {
  .rev-shader-section--standout .rev-cards { grid-template-columns: 1fr; }
  .rev-shader-section--standout .rev-card { border-left: 0 !important; }
  .rev-shader-section--standout .rev-card:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.08) !important; }
  .rev-shader-section--standout .rev-card:first-child { border-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · WHAT YOU RECEIVE · editorial branding
   Strip decorative ring/glow/dots from around the phone, harmonise the item
   heads with the rest of the editorial page (small stroke icons, mono labels,
   compressed type). Keep arrows + callouts + all 7 info items intact.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Item head — small stroke icon inline with mono uppercase label */
.partners-page--editorial .value-tri-head {
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  padding-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 1px solid var(--line);
}
.partners-page--editorial .value-tri-icon {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--blue);
  flex-shrink: 0;
  transform: translateY(2px);
}
.partners-page--editorial .value-tri-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.partners-page--editorial .value-tri-item:hover .value-tri-icon {
  background: transparent;
  color: var(--blue-deep);
}
.partners-page--editorial .value-tri-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1.32vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 4px;
}
.partners-page--editorial .value-tri-sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.partners-page--editorial .value-tri-body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Phone centre — strip decorative chrome (ring, glow blobs, floating dots) */
.partners-page--editorial .value-tri-image {
  filter: drop-shadow(0 24px 56px rgba(10,15,28,0.14));
  padding-top: 30px;
  padding-bottom: 20px;
}
.partners-page--editorial .value-tri-image-ring,
.partners-page--editorial .value-tri-image-blob,
.partners-page--editorial .value-tri-image-dot { display: none; }
.partners-page--editorial .value-tri-image-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Callout pills — restrained editorial register */
.partners-page--editorial .value-tri-callout {
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 12px;
  box-shadow: none;
  padding: 5px 10px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* Connector lines — slightly faded, still functional */
.partners-page--editorial .value-tri-lines path {
  opacity: 0.55;
}
.partners-page--editorial .value-tri-lines circle {
  opacity: 0.75;
}

/* Tighten column item spacing for the new compressed type rhythm */
.partners-page--editorial .value-tri-col {
  gap: clamp(28px, 3.4vw, 40px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · LAYOUT RHYTHM
   Four-tier section padding scale (tight/medium/loose/peak). Revenue is the
   peak. Hero is shorter (~35% reduction) while keeping text + image size.
   Soft 1px line between consecutive tinted sections so transitions read.
   ═══════════════════════════════════════════════════════════════════════════ */

.partners-page--editorial {
  --pad-tight:  clamp(56px, 6vw, 88px);
  --pad-medium: clamp(96px, 11vw, 144px);
  --pad-loose:  clamp(120px, 14vw, 180px);
  --pad-peak:   clamp(144px, 16vw, 208px);
}

/* Hero — reduced height (~35% less vertical) but layout/scale unchanged */
.partners-page--editorial .ed-hero > .container {
  padding-top: clamp(60px, 7vw, 92px);
  padding-bottom: clamp(44px, 5.5vw, 76px);
}
/* Cap the stage so the tall image bleeds off top/bottom instead of
   forcing the band taller. Image height itself is unchanged. */
.partners-page--editorial .ed-hero-stage {
  min-height: 0;
  max-height: clamp(500px, 64vh, 700px);
  overflow: visible;
}

/* Tight one-beat sections */
.partners-page--editorial .ed-credibility {
  padding-top: var(--pad-tight);
  padding-bottom: var(--pad-tight);
}

/* Medium reading sections */
.partners-page--editorial .ed-case,
.partners-page--editorial .ed-segments,
.partners-page--editorial .ed-launch {
  padding-top: var(--pad-medium);
  padding-bottom: var(--pad-medium);
}
.partners-page--editorial main > section.surface {
  padding-top: var(--pad-medium);
  padding-bottom: var(--pad-medium);
}

/* Peak — Revenue standout, biggest vertical breath on the page */
.partners-page--editorial .rev-shader-section--standout {
  padding-top: var(--pad-peak);
  padding-bottom: var(--pad-peak);
}
.partners-page--editorial .rev-standout-figure {
  font-size: clamp(3rem, 7vw, 5.4rem);
}

/* Loose atmospheric beats */
.partners-page--editorial .ed-moment,
.partners-page--editorial .ed-close {
  padding-top: var(--pad-loose);
  padding-bottom: var(--pad-loose);
}
/* Split variant overrides the loose padding — section height = image height */
.partners-page--editorial .ed-moment--split {
  padding-top: 0;
  padding-bottom: 0;
}

/* Soft delineation between consecutive tinted/light sections */
.partners-page--editorial .ed-case { border-bottom: 1px solid var(--line); }
.partners-page--editorial main > section.surface + section.surface {
  border-top: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · CLOSE · adopted from homepage's process-section + launch-cta,
   inverted for the atmospheric Founder's Ink register.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section head + h2 colours on dark surface */
.ed-close--launch .process-launch-head .label { color: var(--blue-light); }
.ed-close--launch .process-launch-head h2 { color: #fff; }
.ed-close--launch .process-launch-head h2 .serif { color: var(--blue-light); }
.ed-close--launch .process-launch-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

/* Timeline gradient line and nodes adjust for dark */
.ed-close--launch .process-vertical::before {
  background: linear-gradient(to bottom, var(--blue-light) 0%, rgba(91,168,255,0.32) 100%);
  opacity: 0.55;
}
.ed-close--launch .process-stop-node {
  border-color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(91,168,255,0.55),
    0 0 18px rgba(30,144,255,0.55);
}
@media (hover: hover) and (pointer: fine) {
  .ed-close--launch .process-stop:hover .process-stop-node {
    box-shadow:
      0 0 0 1px rgba(91,168,255,0.7),
      0 0 26px rgba(30,144,255,0.7);
  }
}

/* Timeline card — glass on dark */
.ed-close--launch .process-stop-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ed-close--launch .process-stop-card h3 { color: #fff; }
.ed-close--launch .process-stop-card p { color: rgba(255,255,255,0.64); }
.ed-close--launch .process-stop-pnum { color: var(--blue-light); }
@media (hover: hover) and (pointer: fine) {
  .ed-close--launch .process-stop:hover .process-stop-card {
    border-color: rgba(91,168,255,0.32);
    box-shadow: 0 18px 48px rgba(0,0,0,0.42);
  }
}

/* Launch CTA aside — glass on dark */
.ed-close--launch .launch-cta {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(91,168,255,0.22);
  box-shadow:
    0 24px 56px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ed-close--launch .launch-badge { color: var(--blue-light); }
.ed-close--launch .launch-heading { color: #fff; }
.ed-close--launch .launch-heading .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue-light);
}
.ed-close--launch .launch-lead { color: rgba(255,255,255,0.68); }
.ed-close--launch .launch-perks li { color: rgba(255,255,255,0.74); }
.ed-close--launch .launch-perks li strong { color: #fff; }
.ed-close--launch .launch-perks li::before { background: var(--blue-light); }
.ed-close--launch .launch-foot { color: rgba(255,255,255,0.45); }
.ed-close--launch .launch-foot i { background: rgba(255,255,255,0.18); }
.ed-close--launch .launch-foot a {
  color: var(--blue-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,168,255,0.35);
  padding-bottom: 1px;
  transition: color .2s cubic-bezier(0.4,0,0.2,1), border-color .2s cubic-bezier(0.4,0,0.2,1);
}
.ed-close--launch .launch-foot a:hover { color: #fff; border-bottom-color: #fff; }

/* Ghost button on dark surface */
.ed-close--launch .btn-ghost {
  color: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.24);
}
.ed-close--launch .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
}

/* Ensure the close section's atmospheric ::before glow sits beneath content */
.ed-close--launch > .container { position: relative; z-index: 1; }

/* ── ed-close--launch → light (no black sections) ─────────────────────── */
.ed-close--launch .process-launch-head .label { color: var(--blue-text); }
.ed-close--launch .process-launch-head h2 { color: var(--ink); }
.ed-close--launch .process-launch-head h2 .serif { color: var(--blue); }
.ed-close--launch .process-vertical::before {
  background: linear-gradient(to bottom, var(--blue) 0%, rgba(30,144,255,0.25) 100%);
  opacity: 1;
}
.ed-close--launch .process-stop-node {
  border-color: var(--color-paper);
  box-shadow: 0 0 0 1px var(--blue), 0 2px 8px rgba(30,144,255,0.30);
}
.ed-close--launch .process-stop-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 4px 16px rgba(10,15,28,0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ed-close--launch .process-stop-card h3 { color: var(--ink); }
.ed-close--launch .process-stop-card p { color: var(--ink-2); }
.ed-close--launch .process-stop-pnum { color: var(--blue); }
.ed-close--launch .launch-cta {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 18px 48px rgba(10,15,28,0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ed-close--launch .launch-badge { color: var(--blue); }
.ed-close--launch .launch-heading { color: var(--ink); }
.ed-close--launch .launch-heading .serif { color: var(--blue); }
.ed-close--launch .launch-perks li { color: var(--ink-2); }
.ed-close--launch .launch-perks li strong { color: var(--ink); }
.ed-close--launch .launch-perks li::before { background: var(--blue); }
.ed-close--launch .launch-foot { color: var(--muted, #8592B0); }
.ed-close--launch .launch-foot i { background: var(--line); }
.ed-close--launch .launch-foot a { color: var(--blue); border-bottom-color: rgba(30,144,255,0.35); }
.ed-close--launch .launch-foot a:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.ed-close--launch .btn-ghost { color: var(--ink); border-color: var(--line); }
.ed-close--launch .btn-ghost:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); }
@media (hover: hover) and (pointer: fine) {
  .ed-close--launch .process-stop:hover .process-stop-node {
    box-shadow: 0 0 0 1px var(--blue), 0 4px 14px rgba(30,144,255,0.40);
  }
  .ed-close--launch .process-stop:hover .process-stop-card {
    border-color: var(--blue);
    box-shadow: 0 12px 32px rgba(10,15,28,0.10);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · WHY-QUAD PATTERN APPLIED PAGE-WIDE
   Case (vertical 3-cell), Where It Fits (2×2), Value-tri items (cell visual),
   Launch (2-cell horizontal). Shared 12px outer border, 1px internal dividers,
   alternating tinted cells, small mono-tag heads, h3 with .dim sub-text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared style: head + h3 + dim sub-text inside any why-quad cell ──── */
.ed-case-head,
.ed-segments-head,
.ed-launch-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: clamp(16px, 1.9vw, 22px);
}
.ed-segments-head svg,
.ed-launch-head svg { width: 14px; height: 14px; }

/* ── The Case · flowing 3-item stack, shared branding only ───────────── */
.ed-case-flow {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.ed-case-item {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 18px);
}
.ed-case-item .ed-case-head { margin-bottom: 0; }
.ed-case-item h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}
.ed-case-item .dim {
  display: block;
  margin-top: 12px;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
}
.partners-page--editorial .ed-case { border-bottom: 0; }

/* ── Where It Fits · 2×2 shared-border box ────────────────────────────── */
.ed-segments-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: clamp(40px, 5vw, 64px);
}
.ed-segments-cell {
  padding: clamp(32px, 3.8vw, 56px) clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
  background: #fff;
  transition: background-color .25s cubic-bezier(0.4,0,0.2,1);
}
.ed-segments-cell:nth-child(1),
.ed-segments-cell:nth-child(4) { background: var(--bg-tint, #F7F9FC); }
.ed-segments-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.ed-segments-cell:nth-child(3),
.ed-segments-cell:nth-child(4) { border-top: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) {
  .ed-segments-cell:hover { background: var(--bg-tint, #F7F9FC); }
  .ed-segments-cell:nth-child(1):hover,
  .ed-segments-cell:nth-child(4):hover { background: #fff; }
}
.ed-segments-head { margin-bottom: 0; color: var(--muted); }
.ed-segments-cell:hover .ed-segments-head { color: var(--blue); }
.ed-segments-cell h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.ed-segments-cell .dim {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 400;
  font-size: clamp(0.96rem, 1.08vw, 1.04rem);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .ed-segments-quad { grid-template-columns: 1fr; }
  .ed-segments-cell { border-right: 0 !important; border-top: 1px solid var(--line); background: #fff; }
  .ed-segments-cell:first-child { border-top: 0; }
  .ed-segments-cell:nth-child(even) { background: var(--bg-tint, #F7F9FC); }
}

/* ── 4b · Segments accordion · list left, image stage right ───────────── */
.ed-segments-acc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.ed-acc-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.ed-acc-item {
  border-top: 1px solid var(--line);
  background: #fff;
  transition: background-color .25s var(--ease-out);
}
.ed-acc-item:first-child { border-top: 0; }
.ed-acc-item:nth-child(even) { background: var(--bg-tint, #F7F9FC); }
.ed-acc-item.is-open { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .ed-acc-item:not(.is-open):hover { background: rgba(30,144,255,0.05); }
}

.ed-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(18px, 1.9vw, 24px) clamp(20px, 2vw, 26px);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.ed-acc-trigger:focus { outline: none; }
.ed-acc-trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.ed-acc-trigger-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ed-acc-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .22s var(--ease-out);
}
.ed-acc-head svg { width: 14px; height: 14px; }
.ed-acc-item.is-open .ed-acc-head { color: var(--blue); }

.ed-acc-trigger h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.45vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  color: var(--muted);
  transition: color .22s var(--ease-out);
}
.ed-acc-item.is-open .ed-acc-trigger h3 { color: var(--ink); }

.ed-acc-chev {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  transition: transform .35s var(--ease-out), color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.ed-acc-chev svg { width: 14px; height: 14px; }
.ed-acc-item.is-open .ed-acc-chev {
  transform: rotate(180deg);
  color: var(--blue);
  border-color: var(--blue-mid);
}

.ed-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.ed-acc-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px);
}
.ed-acc-item.is-open .ed-acc-body { grid-template-rows: 1fr; }
.ed-acc-body p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.96rem, 1.06vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
.ed-acc-body-img {
  display: none;
  margin: 16px 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--bg-tint, #F7F9FC);
}
.ed-acc-body-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image stage (desktop) — stacked, crossfade on active */
.ed-acc-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-tint, #F7F9FC);
  aspect-ratio: 4 / 3;
  position: sticky;
  top: clamp(96px, 12vh, 140px);
}
.ed-acc-stage-img {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-out);
}
.ed-acc-stage-img.is-active {
  opacity: 1;
  transform: scale(1);
}
.ed-acc-stage-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 880px) {
  .ed-segments-acc { grid-template-columns: 1fr; }
  .ed-acc-stage { display: none; }
  .ed-acc-body-img { display: block; }
}

/* ── What You Receive · value-tri items adopt cell visual ─────────────── */
.partners-page--editorial .value-tri-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.partners-page--editorial .value-tri-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.partners-page--editorial .value-tri-h .dim {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 400;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.55;
}

/* ── Launch (How it goes live + Trust + Founder voice) · flowing 3-col ── */
.ed-launch-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 4.5vw, 72px);
  max-width: 1480px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  align-items: start;
}
.ed-launch-item {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}
.ed-launch-item .ed-launch-head { margin-bottom: 0; }
.ed-launch-item h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.ed-launch-item h3 .serif {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
}
.ed-launch-item h3 .dim {
  display: block;
  margin-top: 14px;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.6;
}
.ed-launch-item .ed-launch-quote {
  margin: 0;
  padding: 0;
  border: 0;
}
.ed-launch-item .ed-launch-quote p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.32vw, 1.28rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.ed-launch-item .ed-launch-quote .qrot-slot {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
  min-width: 6ch;
  display: inline-block;
}
.ed-launch-item .ed-launch-attrib {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.ed-launch-item .ed-launch-attrib cite {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.ed-launch-item .ed-launch-attrib span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
@media (max-width: 1100px) {
  .ed-launch-flow { grid-template-columns: 1fr; gap: clamp(40px, 5vw, 56px); }
}

/* ── Hero · sensible padding, content-driven height, no cropping ──────── */
.partners-page--editorial .ed-hero > .container {
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: clamp(40px, 4.8vw, 64px);
}
.partners-page--editorial .ed-hero-grid {
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · POLISH PASS
   Unify cell h3 typography (anchor on Why Partner pattern), unify .dim
   sub-text colour and scale, tighten section transitions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unify cell h3 to Why Partner's pattern (1.1–1.4rem, weight 500) */
.partners-page--editorial .ed-segments-cell > h3,
.rev-shader-section--standout .rev-card > h3,
.partners-page--editorial .value-tri-h {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.42vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
  margin: 0;
}

/* Unify .dim sub-text on light surfaces to var(--muted) */
.partners-page--editorial .ed-segments-cell .dim,
.partners-page--editorial .value-tri-h .dim {
  color: var(--muted);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.06vw, 1.02rem);
  line-height: 1.55;
  margin-top: 10px;
}

/* Launch item dim (full-row context, slightly larger body) keeps --ink-2 */
.partners-page--editorial .ed-launch-item h3 .dim {
  color: var(--ink-2);
}

/* Mono-tag heads — unified colour (blue) on light, blue-light on dark */
.partners-page--editorial .ed-case-head,
.partners-page--editorial .ed-launch-head,
.partners-page--editorial .ed-segments-head {
  color: var(--blue);
}
.partners-page--editorial .ed-segments-cell .ed-segments-head { color: var(--muted); }
.partners-page--editorial .ed-segments-cell:hover .ed-segments-head { color: var(--blue); }

/* Smoother cell hover transitions */
.partners-page--editorial .ed-segments-cell,
.rev-shader-section--standout .rev-card {
  transition: background-color .3s cubic-bezier(0.22,1,0.36,1);
}

/* Section transitions — subtle line where consecutive light sections meet */
.partners-page--editorial .ed-segments { border-top: 1px solid var(--line); }
.partners-page--editorial .ed-launch { border-top: 1px solid var(--line); }

/* Tighten launch row internal cell gap so columns balance visually */
.partners-page--editorial .ed-launch-item { gap: clamp(16px, 1.8vw, 22px); }
.partners-page--editorial .ed-launch-item h3 {
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.22;
}

/* Polish: WYR head separator subtler, matches why-quad */
.partners-page--editorial .value-tri-head {
  border-bottom-color: var(--line-soft, #F0F2F8);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · WHERE IT FITS · alternating rows (Case Studies pattern)
   Four partner segments as alternating left/right rows. Phone mockup + tag +
   h3 with dim + capability bullet list. Border-bottom between rows.
   ═══════════════════════════════════════════════════════════════════════════ */

.ed-seg-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(48px, 6vw, 72px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.ed-seg-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--line);
}
.ed-seg-row:first-child { padding-top: 0; }
.ed-seg-row:last-child { padding-bottom: 0; border-bottom: 0; }
.ed-seg-row--reverse .ed-seg-image { order: 2; }

.ed-seg-image {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ed-seg-image img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  border-radius: 12px;
  filter: drop-shadow(0 24px 56px rgba(10,15,28,0.16));
  transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .ed-seg-row:hover .ed-seg-image img { transform: scale(1.03); }
}

.ed-seg-content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 22px);
  max-width: 56ch;
}
.ed-seg-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.ed-seg-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.ed-seg-content h3 .dim {
  display: block;
  margin-top: 14px;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.6;
}
.ed-seg-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-seg-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.94rem, 1.04vw, 1rem);
  color: var(--ink-2);
  line-height: 1.5;
}
.ed-seg-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .ed-seg-row {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .ed-seg-row--reverse .ed-seg-image { order: 0; }
  .ed-seg-image img { max-width: 240px; }
}

/* ── Close section · launch-cta heading uses h3 + dim pattern ─────────── */
.ed-close--launch .launch-heading .dim {
  display: block;
  margin-top: 14px;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}
.ed-close--launch .launch-lead { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SITE FOOTER · Ft5 statement-led — replaces the 4-col link grid (Ft3)
   Brand stance line · single inline link row · compressed regulatory chrome.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: clamp(64px, 8vw, 112px) 0 clamp(28px, 3.6vw, 44px);
}
.site-footer-statement {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 clamp(40px, 5vw, 64px);
  max-width: 22ch;
  text-wrap: balance;
}
.site-footer-statement .serif {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
  letter-spacing: -0.025em;
}
.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 36px);
  margin: 0 0 clamp(36px, 4.4vw, 56px);
  padding: 0 0 clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--line);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  font-weight: 500;
}
.site-footer-nav a {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color .2s var(--ease-out);
}
.site-footer-nav a:hover { color: var(--blue); }
/* Phones: the footer links were 25px tall, well under a comfortable thumb.
   Each one gets a 44px touch height, and the row gap drops to nothing so the
   footer does not grow taller than it was (2026-09-04). */
@media (max-width: 620px) {
  .site-footer-nav,
  .site-footer-chrome { row-gap: 0; column-gap: 22px; }
  .site-footer-nav a,
  .site-footer-chrome a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.site-footer-chrome {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.2vw, 32px);
  align-items: baseline;
  justify-content: space-between;
}
.site-footer-disclaimer {
  flex: 1 1 100%;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 90ch;
}
.site-footer-address {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 64ch;
  flex: 1 1 360px;
}
.site-footer-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.site-footer-legal a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease-out);
}
.site-footer-legal a:hover { color: var(--blue); }

@media (max-width: 720px) {
  .site-footer-statement { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .site-footer-chrome { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HALLMARK · genre: atmospheric · macrostructure: Editorial Magazine
   design-system: design.md · designed-as-app
   hero archetypes: H2 Marquee (index.html) · H4 Quote-Led (product.html)
   Added 2026-05-20. See design.md section 7.
   ═══════════════════════════════════════════════════════════════════════════ */

/* OKLCH token mirror — additive, non-breaking. Hex tokens above remain. */
:root {
  --color-paper:        oklch(99% 0.005 250);
  --color-paper-2:      oklch(97% 0.008 250);
  --color-paper-dark:   oklch(15% 0.015 260);
  --color-ink:          oklch(17% 0.02 260);
  --color-ink-2:        oklch(35% 0.04 260);
  --color-ink-3:        oklch(60% 0.03 260);
  --color-accent:       #1E90FF;
  --color-accent-light: #4BA6FF;
  --color-accent-deep:  #1577E0;
  --color-rule:         oklch(91% 0.01 250);
  --color-focus:        #1E90FF;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;
}

/* ─── N5 Floating Pill Nav ─────────────────────────────────────────────── */
.nav-pill {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(960px, calc(100vw - 2 * var(--space-md)));
}
.nav-pill-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 14px 10px 18px;
  background: oklch(99% 0.005 250 / 0.82);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid oklch(91% 0.01 250 / 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 20px oklch(15% 0.015 260 / 0.06);
}
.nav-pill-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-ink);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.018em;
  flex-shrink: 0;
}
.nav-pill-brand img { width: 22px; height: 22px; object-fit: contain; }
.nav-pill-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.nav-pill-links a {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.nav-pill-links a:hover { color: var(--color-ink); background: oklch(91% 0.01 250 / 0.5); }
.nav-pill-links a.active { color: var(--color-accent); background: rgba(30,144,255,0.10); }
.nav-pill-links a:focus-visible,
.mobile-nav-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: background .2s var(--ease-out);
  flex-shrink: 0;
}
.nav-pill-cta:hover { background: var(--color-accent-deep); }
/* Log in sits beside Sign up in the header (2026-09-10): outlined, same size */
.nav-pill-cta--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--line);
  padding: 7px 13px;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-pill-cta--ghost:hover {
  background: rgba(30,144,255,0.08);
  border-color: rgba(30,144,255,0.45);
  color: var(--color-accent);
}
.nav-pill-cta .arrow { transition: transform .2s var(--ease-out); }
.nav-pill-cta:hover .arrow { transform: translateX(3px); }
.nav-pill-menu { display: none; }
@media (max-width: 900px) {
  /* Hamburger from 900px (was 760): with Log in and Sign up in the header the
     full row no longer fits a portrait tablet (2026-09-10). */
  .nav-pill { width: calc(100vw - 2 * var(--space-sm)); top: var(--space-sm); }
  .nav-pill-inner { padding: 10px 12px; gap: var(--space-sm); }
  .nav-pill-links { display: none; }
  .nav-pill-cta { display: none; }
  .nav-pill-menu {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    /* 44px tall: this is the only way into the navigation on a phone, and it
       was a 29px target before (2026-09-04). The pill does not grow, because
       the brand mark beside it is already taller than this. */
    padding: 6px 10px;
    min-height: 44px;
  }
  .nav-pill-menu svg { width: 16px; height: 12px; }
  /* Standalone action links get the same comfortable height. The team card's
     LinkedIn link is deliberately left alone: it shares a flex row with the
     role, so a 44px box there pushes the name and the role apart. */
  .post-back { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-pill-brand,
  .mobile-drawer-header .brand { min-height: 44px; align-items: center; }
}

/* ─── Language switcher ────────────────────────────────────────────────── */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-ink-2);
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.lang-switch-toggle::-webkit-details-marker { display: none; }
.lang-switch-toggle::marker { content: ""; }
.lang-switch-toggle:hover { color: var(--color-ink); background: oklch(91% 0.01 250 / 0.5); }
.lang-switch-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lang-switch .fi {
  width: 1.3em;
  height: 0.975em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px oklch(15% 0.015 260 / 0.08);
  flex-shrink: 0;
}
.lang-switch-caret { width: 11px; height: 11px; transition: transform .2s var(--ease-out); }
.lang-switch[open] .lang-switch-caret { transform: rotate(180deg); }
.lang-switch-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: 340px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 8px;
  background: oklch(99% 0.005 250 / 0.97);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid oklch(91% 0.01 250 / 0.6);
  border-radius: 12px;
  box-shadow: 0 12px 32px oklch(15% 0.015 260 / 0.12);
}
.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
.lang-switch-option:hover { background: oklch(91% 0.01 250 / 0.6); }
.lang-switch-option.is-active { color: var(--color-accent); background: oklch(60% 0.18 250 / 0.10); font-weight: 600; }
.lang-switch-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.lang-switch-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drawer variant: full-width block shown only inside the mobile drawer */
.lang-switch--drawer { display: none; }
@media (max-width: 900px) {
  /* Hide the desktop dropdown; the drawer carries the switcher on mobile */
  .nav-pill-inner .lang-switch { display: none; }
  .lang-switch--drawer { display: block; margin: 4px 0 12px; }
  .lang-switch--drawer .lang-switch-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 11px 14px;
    border: 1px solid oklch(91% 0.01 250 / 0.7);
    border-radius: 10px;
  }
  .lang-switch--drawer .lang-switch-list {
    position: static;
    width: 100%;
    margin-top: 6px;
    max-height: 50vh;
  }
}

/* ─── H2 Marquee Hero (index.html) ─────────────────────────────────────── */
.hero-marquee {
  padding: clamp(112px, 13vw, 184px) 0 clamp(96px, 9vw, 150px);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hero-marquee::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(30,144,255,0.14), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-marquee > .container { position: relative; z-index: 1; }
.hero-marquee-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  position: relative;
}
.hero-marquee-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.hero-marquee-figure {
  margin: 0;
  position: relative;
  pointer-events: none;
}
.hero-marquee-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(735px, 98vh, 1085px);
  object-fit: contain;
  transform: rotate(-4deg);
}
@media (min-width: 980px) {
  /* Taller hero, no bottom padding; the front phone bleeds off the bottom and
     overflow:hidden crops it. Positioned with `bottom` (not transform) because
     the .reveal load animation drives transform. */
  .hero-marquee { padding-bottom: 0; min-height: clamp(780px, 80vh, 880px); }
  .hero-marquee-text { max-width: 580px; }
  .hero-marquee-figure {
    position: absolute;
    right: clamp(-55px, -1.2vw, 28px);
    bottom: clamp(-385px, -22.8vw, -292px);
    width: clamp(525px, 46.5vw, 678px);
    z-index: 1;
  }
  .hero-marquee-figure img { width: 100%; max-height: none; height: auto; }
}
@media (max-width: 979px) {
  .hero-marquee-grid { grid-template-rows: auto auto; min-height: 0; }
  .hero-marquee-figure { position: relative; transform: none; width: min(420px, 84%); margin: 12px auto 0; }
}

/* Trust band sits above the bleeding hero figure so it visually covers the bottom of the phones */
.trust-band { position: relative; z-index: 2; }
.hero-marquee-headline {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--color-ink);
  margin: 0 0 var(--space-lg);
  max-width: 16ch;
}
.hero-marquee-line-1 {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.hero-marquee-line-2 {
  display: block;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--color-ink);
}
.hero-marquee-line-3 {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
  font-size: clamp(1.6rem, 3.6vw, 3.0rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-top: 0.18em;
}
.hero-strike {
  color: var(--color-ink-2);
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 0.06em;
  margin-right: 0.12em;
}
.hero-marquee-lead {
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: min(44ch, 100%);
  margin: 0 0 var(--space-xl);
}
.hero-marquee-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
@media (max-width: 600px) {
  .hero-marquee { padding-top: 96px; }
  .hero-marquee-line-2 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-marquee-line-1 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-marquee-line-3 { font-size: clamp(1.4rem, 5.4vw, 2.2rem); }
}

/* ─── Feature Showcase · accordion demoted from hero ───────────────────── */
.feature-showcase {
  background: var(--color-paper-dark);
  color: oklch(99% 0.005 250);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.feature-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 22%, rgba(30,144,255,0.14), transparent 65%);
  pointer-events: none;
}
.feature-showcase > .container { position: relative; z-index: 1; }
.feature-showcase-head {
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
}
.feature-showcase-h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: oklch(99% 0.005 250);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.feature-showcase-h2 .serif {
  font-weight: 300;
  font-style: italic;
  color: var(--color-accent-light);
}
.feature-showcase-lead {
  font-family: "Inter", sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
  color: oklch(99% 0.005 250 / 0.68);
  margin: 0;
  max-width: 60ch;
}

/* ─── H4 Quote-Led Hero (product.html) ─────────────────────────────────── */
.hero-quote {
  padding: clamp(96px, 10vw, 140px) 0 clamp(72px, 7vw, 104px);
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
  position: relative;
  overflow: hidden;
}
.hero-quote > .container { position: relative; z-index: 1; }
.hero-quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hero-quote-text { max-width: 720px; }
.hero-quote-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-ink-3);
  margin: 0 0 var(--space-md);
}
.hero-quote-headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}
.hero-quote-headline .serif {
  font-weight: 300;
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: -0.035em;
}
.hero-quote-lead {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 52ch;
  margin: 0 0 var(--space-xl);
}
.hero-quote-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* App Store / Google Play download badges */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--blue);
  border: 1.5px solid var(--blue);
  color: #fff;
  text-decoration: none;
  line-height: 1;
  transition: transform 140ms var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.store-badge:hover {
  background: #000;
  box-shadow: 0 8px 28px rgba(10,15,28,0.28);
  transform: translateY(-2px);
}
.store-badge:active { transform: scale(0.97); }
.store-badge:focus { outline: none; }
.store-badge:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.store-badge-logo {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}
.store-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.store-badge-small {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.store-badge-big {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-quote-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-quote-image img {
  width: auto;
  max-width: 380px;
  max-height: clamp(420px, 50vh, 560px);
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px oklch(15% 0.015 260 / 0.18));
}

/* ── Centred hero variant (mobile-app page) ───────────────────────────────
   Two grouped blocks, one decisive break:
   {kicker · headline · typebar}  ──big──  {lead · badges}
   Width hierarchy: headline widest → typebar the focal object → lead caption. */
.hero-quote--centered .hero-quote-text {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  min-width: 0;
}
.hero-quote--centered .hero-quote-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}
.hero-quote--centered .hero-quote-headline {
  margin: 0 0 var(--space-md);          /* hook → bar: kept close */
}
.hero-quote--centered .hero-typebar {
  margin: 0 auto clamp(2.5rem, 5.5vw, 4.5rem);  /* the section break */
  max-width: 600px;                      /* narrower than the headline */
}
.hero-quote-mockup {
  width: min(350px, 76vw);
  aspect-ratio: 1261 / 2611;                    /* the asset is already cropped to the phone */
  margin: clamp(1.75rem, 3.4vw, 2.75rem) auto clamp(-15rem, -22vw, -9rem);  /* title gap; pull subtitle + CTAs up into the fade */
  background: url("assets/mockup-iphone-voice.png") no-repeat 50% 0;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 62%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 62%);
}
.hero-quote--centered .hero-quote-lead {
  max-width: 46ch;                       /* a caption, clearly secondary */
  margin: 0 auto var(--space-md);        /* lead → badges: a pair */
}
.hero-quote--centered .hero-quote-cta {
  justify-content: center;
}

/* ── "More of a visual learner?" video cue ────────────────────────────── */
.hero-video-cue {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: var(--space-md) auto 0;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  color: var(--color-ink-3, #8592B0);
}
.hero-video-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  font-weight: 600;
  color: var(--blue, #1E90FF);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.hero-video-link svg {
  width: 18px;
  height: 18px;
  transition: transform .18s var(--ease-out);
}
.hero-video-link:hover { color: var(--blue-deep, #1577E0); }
.hero-video-link:hover svg { transform: translateX(2px); }
.hero-video-link:focus-visible {
  outline: 2px solid var(--blue, #1E90FF);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── In-page video modal ──────────────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease-out), visibility .28s var(--ease-out);
}
.video-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(15% 0.015 260 / 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-modal-frame {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 32px 90px oklch(15% 0.015 260 / 0.55);
  transform: scale(0.97) translateY(8px);
  transition: transform .32s var(--ease-out);
}
.video-modal[aria-hidden="false"] .video-modal-frame { transform: none; }
.video-modal-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.video-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: oklch(100% 0 0 / 0.14);
  color: #fff;
  cursor: pointer;
  transition: background .18s var(--ease-out), transform .12s var(--ease-out);
}
.video-modal-close:hover { background: oklch(100% 0 0 / 0.26); }
.video-modal-close:active { transform: scale(0.92); }
.video-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .video-modal, .video-modal-frame { transition: none; }
  .video-modal-frame { transform: none; }
}

/* ── Interactive typing bar ───────────────────────────────────────────── */
.hero-typebar {
  width: 100%;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  background: #fff;
  border: 1.5px solid oklch(85% 0.02 260 / 0.9);
  border-radius: 12px;
  padding: 16px 18px 12px;
  box-shadow: 0 18px 50px oklch(40% 0.05 260 / 0.10);
  text-align: left;
  transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out);
}
.hero-typebar:focus-within {
  border-color: var(--blue, #1E90FF);
  box-shadow: 0 18px 54px rgba(30,144,255,0.20);
}
.hero-typebar-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--color-ink);
  padding: 4px 2px 14px;
}
.hero-typebar-input::placeholder {
  color: oklch(62% 0.02 260);
}
.hero-typebar-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hero-typebar-tools-left,
.hero-typebar-tools-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  flex: none;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), transform .12s var(--ease-out);
}
.hero-tb-icon svg { width: 21px; height: 21px; }
.hero-tb-icon:hover { background: oklch(94% 0.01 260); }
.hero-tb-icon:active { transform: scale(0.92); }
.hero-tb-icon--accent {
  background: #EBF5FF;
  color: var(--blue, #1E90FF);
}
.hero-tb-icon--accent:hover { background: #D9ECFF; }
.hero-tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid oklch(88% 0.015 260);
  background: #fff;
  color: var(--color-ink);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  flex: none;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out);
}
.hero-tb-pill svg { width: 16px; height: 16px; }
.hero-tb-pill:hover { background: oklch(96% 0.01 260); border-color: oklch(82% 0.02 260); }
.hero-tb-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: oklch(82% 0.015 260);
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: background .18s var(--ease-out), transform .12s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hero-tb-send svg { width: 20px; height: 20px; }
.hero-tb-send.is-active {
  background: var(--blue, #1E90FF);
  box-shadow: 0 6px 18px rgba(30,144,255,0.40);
}
.hero-tb-send:hover { transform: translateY(-1px); }
.hero-tb-send:active { transform: scale(0.92); }

/* Pulse the download badges when the user "sends" */
@keyframes heroDownloadPulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,144,255,0.45); }
  100% { box-shadow: 0 0 0 22px rgba(30,144,255,0); }
}
.hero-quote-cta.is-pulsing .store-badge,
.hero-quote-cta.is-pulsing .btn {
  animation: heroDownloadPulse 0.9s var(--ease-out) 1;
}

@media (max-width: 880px) {
  .hero-quote-grid { grid-template-columns: 1fr; }
  .hero-quote-image img { max-width: 280px; }
}
@media (max-width: 600px) {
  .hero-quote { padding-top: 120px; }
  .hero-quote-headline {
    font-size: clamp(1.25rem, 5.4vw, 1.75rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .hero-typebar { padding: 14px 14px 10px; }
  .hero-typebar-input { font-size: 1rem; }
  .hero-tb-icon { width: 34px; height: 34px; }
  .hero-tb-icon svg { width: 19px; height: 19px; }
  .hero-tb-pill { padding: 0 11px; font-size: 0.88rem; }
  .hero-typebar-tools-left,
  .hero-typebar-tools-right { gap: 2px; }
}
@media (max-width: 420px) {
  .hero-typebar-tools-left .hero-tb-icon:nth-child(3),
  .hero-typebar-tools-left .hero-tb-icon:nth-child(4) { display: none; }
}

/* Feature showcase stage — centred accordion, hide on mobile (carousel is desktop-only) */
.feature-showcase-stage {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
@media (max-width: 900px) {
  .feature-showcase-stage { display: none; }
  .feature-showcase { padding: var(--space-2xl) 0; }
}

/* Feature showcase mobile fallback — single decisive image below 900px */
.feature-showcase-mobile-img {
  display: none;
}
@media (max-width: 900px) {
  .feature-showcase-mobile-img {
    display: flex;
    justify-content: center;
  }
  .feature-showcase-mobile-img img {
    width: 100%;
    max-width: 280px;
    height: auto;
    filter: drop-shadow(0 24px 60px oklch(15% 0.015 260 / 0.5));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME · What MyPA does for your company · split (image left, rows right)
   Adapted from the demo.tsx prompt; MyPA tokens, Inter, 12px radius.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-pitch {
  background: var(--color-paper);
  padding: var(--space-3xl) 0;
}
.home-pitch-head {
  text-align: left;
  max-width: 960px;
  margin: 0 0 var(--space-2xl);
}
.home-pitch-head h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.home-pitch-head h2 .serif {
  font-weight: 300;
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: -0.025em;
}
.home-pitch-head p {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  color: var(--color-ink-3);
  line-height: 1.6;
  margin: 0;
  max-width: 82ch;
}

.home-pitch-split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  margin-left: clamp(40px, 6vw, 100px);
}
.home-pitch-figure {
  flex: 1 1 55%;
  margin: 0;
  max-width: 500px;
}
.home-pitch-figure img {
  height: 550px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* Partners: the hero motion graphic reused as the pitch figure */
.home-pitch-figure--video { max-width: 560px; }
.home-pitch-figure--video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.home-pitch-rows {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 480px;
}
.home-pitch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.home-pitch-row-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: rgba(30,144,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.home-pitch-row-icon svg {
  width: 26px;
  height: 26px;
}
.home-pitch-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-top: 6px;
}
.home-pitch-row-text h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0;
}
.home-pitch-row-text p {
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  color: var(--color-ink-2);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 880px) {
  .home-pitch-head { max-width: 100%; }
  .home-pitch-split { flex-direction: column; align-items: stretch; gap: var(--space-xl); margin-left: 0; }
  .home-pitch-figure { max-width: 500px; width: 100%; align-self: center; }
  .home-pitch-rows { max-width: 100%; }
}


@media (max-width: 900px) {
  .hero-marquee-bg {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 92%;
    margin: var(--space-xl) auto 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-marquee-bg img { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME · Features Gallery · 3-card image grid with hover lift
   Adapted from the feature-sections prompt; MyPA tokens, Inter, 12px radius.
   ═══════════════════════════════════════════════════════════════════════════ */
.features-gallery {
  background: var(--color-paper);
  padding: var(--space-3xl) 0;
}
.features-gallery-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-2xl);
}
.features-gallery-head h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.features-gallery-head h2 .serif {
  font-weight: 300;
  font-style: italic;
  color: var(--color-accent);
  letter-spacing: -0.025em;
}
.features-gallery-head p {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  color: var(--color-ink-3);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.features-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 40px);
}
.features-gallery-card {
  max-width: 320px;
  flex: 1 1 280px;
  transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .features-gallery-card:hover { transform: translateY(-3px); }
}
.features-gallery-card-image {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-paper-2);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.features-gallery-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.features-gallery-card h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: var(--space-md) 0 var(--space-2xs);
}
.features-gallery-card p {
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  color: var(--color-ink-2);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 760px) {
  .features-gallery-grid { flex-direction: column; align-items: center; }
  .features-gallery-card { max-width: 360px; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNERS · What MyPA can do for your company · marquee + 4-feature grid
   Adapted from the vercep-feature-1 demo; MyPA tokens, Inter, 12px radius.
   ═══════════════════════════════════════════════════════════════════════════ */
.partner-pitch {
  background: var(--color-paper, #ffffff);
  padding: clamp(64px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}
.partner-pitch::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(30,144,255,0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.partner-pitch > .container { position: relative; z-index: 1; }

.partner-pitch-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0 var(--space-md, 20px);
}
.partner-pitch-head h2 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0F1C);
  margin: 0 0 18px;
}
.partner-pitch-head h2 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue, #1E90FF);
}
.partner-pitch-head p {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.98rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2, #374060);
  margin: 0 auto;
  max-width: 580px;
}

.partner-pitch-grid {
  margin: clamp(36px, 5vw, 64px) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.partner-pitch-cell {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .partner-pitch-cell:hover {
    border-color: var(--blue);
    box-shadow: 0 16px 36px rgba(10, 15, 28, 0.08);
    transform: translateY(-3px);
  }
}
.partner-pitch-num {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--line);
  flex-shrink: 0;
}
.partner-pitch-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.partner-pitch-text h3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink, #0A0F1C);
  margin: 0;
}
.partner-pitch-text p {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2, #374060);
  margin: 0;
}

@media (max-width: 1024px) {
  .partner-pitch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .partner-pitch-grid { grid-template-columns: 1fr; }
  .partner-pitch-text { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT · HQ GLOBE · two-location card with cobe globe (Jersey + LA)
   Square corners by request, no CTA arrow icon. Adapted from globe-feature.
   ═══════════════════════════════════════════════════════════════════════════ */
.hq-globe {
  padding: clamp(64px, 8vw, 120px) 0;
  background: #ffffff;
}
.hq-globe-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 56px);
  background:
    linear-gradient(135deg, rgba(30,144,255,0.04) 0%, rgba(255,255,255,1) 60%),
    #ffffff;
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(10, 15, 28, 0.05);
}
@media (min-width: 880px) {
  .hq-globe-card {
    flex-direction: row;
    align-items: center;
  }
}

.hq-globe-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq-globe-label {
  font-family: var(--font-mono, "Inter", system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue, #1E90FF);
}
.hq-globe-heading {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0F1C);
  margin: 0;
}
.hq-globe-heading .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue, #1E90FF);
}
.hq-globe-lead {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2, #374060);
  margin: 4px 0 8px;
  max-width: 460px;
}

.hq-globe-locations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 8px 0 4px;
}
@media (min-width: 480px) {
  .hq-globe-locations { grid-template-columns: 1fr 1fr; }
}
.hq-globe-loc {
  padding: 4px 0;
}
.hq-globe-loc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, "Inter", system-ui, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2, #374060);
  margin-bottom: 6px;
}
.hq-globe-dot {
  width: 8px;
  height: 8px;
  background: var(--blue, #1E90FF);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(30,144,255,0.18);
  display: inline-block;
}
.hq-globe-loc h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink, #0A0F1C);
  margin: 0 0 4px;
}
.hq-globe-loc p {
  font-family: "Inter", sans-serif;
  font-size: 0.88rem;
  color: var(--ink-2, #374060);
  line-height: 1.5;
  margin: 0;
}

.hq-globe-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 12px 22px;
  margin-top: 10px;
  background: var(--ink, #0A0F1C);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--ink, #0A0F1C);
  border-radius: 0;
  transition: background .2s var(--ease-out, ease), color .2s var(--ease-out, ease);
}
.hq-globe-cta:hover {
  background: var(--blue, #1E90FF);
  border-color: var(--blue, #1E90FF);
  color: #ffffff;
}

.hq-globe-foot {
  font-family: var(--font-mono, "Inter", system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 15, 28, 0.5);
  margin: 12px 0 0;
}

.hq-globe-orb {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
@media (min-width: 880px) {
  .hq-globe-orb {
    margin: 0 -40px 0 auto;
    max-width: 560px;
  }
}
#hq-globe-canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
  contain: layout paint size;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT · FOUNDING TEAM · dream-team layout (grayscale -> color hover)
   Adapted from team.tsx demo; MyPA tokens, Inter.
   Photo files expected at /assets/team-{andrew,jim,richard,archie}.jpg.
   If a file is missing, the .about-team-initials fallback shows automatically.
   ═══════════════════════════════════════════════════════════════════════════ */
.about-team {
  background: var(--color-paper, #ffffff);
  padding: clamp(56px, 8vw, 128px) 0;
}
.about-team-frame {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  border-top: 1px solid rgba(10, 15, 28, 0.12);
  position: relative;
}
.about-team-eyebrow {
  position: absolute;
  top: -0.7em;
  left: clamp(8px, 2vw, 24px);
  background: var(--color-paper, #ffffff);
  padding: 0 14px;
  font-family: var(--font-mono, "Inter", system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue, #1E90FF);
}

.about-team-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: clamp(36px, 5vw, 80px) 0 clamp(32px, 5vw, 64px);
}
@media (min-width: 760px) {
  .about-team-intro {
    grid-template-columns: 2fr 3fr;
    gap: 32px;
  }
}
.about-team-intro-left h2 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink, #0A0F1C);
  margin: 0;
}
.about-team-intro-right p {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-2, #374060);
  margin: 0;
  max-width: 540px;
}

.about-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 24px;
}
@media (min-width: 600px) {
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .about-team-grid { grid-template-columns: repeat(4, 1fr); }
}

.about-team-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-team-photo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue, #1E90FF) 0%, var(--blue-deep, #1577E0) 100%);
  text-decoration: none;
  transition: border-radius .5s ease, transform .5s ease;
  will-change: transform, border-radius;
}
.about-team-card:hover .about-team-photo {
  border-radius: 12px;
}

.about-team-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.02em;
  user-select: none;
}
.about-team-initials::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}

.about-team-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1);
  transition: filter .5s ease, transform .5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .about-team-card:hover .about-team-photo img {
    filter: grayscale(0);
    transform: scale(1.02);
  }
}

.about-team-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 0;
}
.about-team-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.about-team-name {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink, #0A0F1C);
  margin: 0;
  transition: letter-spacing .5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .about-team-card:hover .about-team-name {
    letter-spacing: 0.04em;
  }
}
.about-team-idx {
  font-family: var(--font-mono, "Inter", system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(10, 15, 28, 0.45);
  letter-spacing: 0.08em;
}

.about-team-meta-row--reveal {
  align-items: center;
  min-height: 1.2em;
}
.about-team-role {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  color: var(--ink-2, #374060);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .3s ease .05s, transform .3s ease .05s;
}
.about-team-link {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-2, #374060);
  text-decoration: none;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .4s ease .08s, transform .4s ease .08s, color .2s ease;
}
.about-team-link:hover { color: var(--blue, #1E90FF); text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
  .about-team-card:hover .about-team-role,
  .about-team-card:hover .about-team-link {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover: none) {
  /* Touch devices: keep role/link visible since there's no hover */
  .about-team-role,
  .about-team-link { opacity: 1; transform: none; }
  .about-team-photo img { filter: grayscale(0); }
}

.about-team-bio {
  font-family: "Inter", sans-serif;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2, #374060);
  margin: 8px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE · NEW SECTIONS (competitor-informed) · added 2026-05-28
   - stat-trio band  (after trust marquee)
   - feature-deepdive rows  (after bento)
   - partner-compare (inside partners section)
   - faq-section (before process)
   - site-footer-newsletter (inside footer)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── a11y utility ──────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Stat trio ─────────────────────────────────────────────────────────── */
.stat-trio {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: clamp(36px, 5vw, 72px) 0;
}
.stat-trio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.stat-trio-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0 0;
  border-top: 2px solid var(--ink);
  position: relative;
}
.stat-trio-item::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 28px; height: 2px;
  background: var(--blue);
}
.stat-trio-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
  color: var(--ink);
}
.stat-trio-plus {
  color: var(--blue);
  font-weight: 500;
  margin-left: 2px;
}
.stat-trio-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 32ch;
}
@media (max-width: 720px) {
  .stat-trio-list { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── Per-feature deep-dive rows ────────────────────────────────────────── */
.feature-deepdives {
  background: var(--bg-tint);
  padding: clamp(48px, 7vw, 96px) 0;
  border-top: 1px solid var(--line);
}
.feature-deepdives-head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}
.feature-deepdives-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
}
.feature-deepdives-head h2 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.feature-deepdives-head p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.feature-deepdive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 72px) 0;
  border-top: 1px solid var(--line);
}
.feature-deepdive:last-of-type { border-bottom: 1px solid var(--line); }
.feature-deepdive--reverse { direction: rtl; }
.feature-deepdive--reverse > * { direction: ltr; }
.feature-deepdive-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature-deepdive-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  width: max-content;
}
.feature-deepdive-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--blue);
}
.feature-deepdive-text h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.feature-deepdive-text h3 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.feature-deepdive-problem {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0;
}
.feature-deepdive-problem::before {
  content: 'The problem · ';
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.feature-deepdive-answer {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.18vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.feature-deepdive-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.feature-deepdive-visual img {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  transition: filter .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-deepdive:hover .feature-deepdive-visual img {
    filter: drop-shadow(0 22px 60px rgba(10,15,28,0.18));
    transform: translateY(-4px);
  }
}

/* Memory log variant (the third deep-dive replaces the screenshot with a log card) */
.memory-log {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 18px;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-deepdive:hover .memory-log {
    box-shadow: 0 22px 60px rgba(10,15,28,0.12);
    border-color: var(--blue-mid);
    transform: translateY(-4px);
  }
}
.memory-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.memory-log-head::before {
  content: '● ● ●';
  letter-spacing: 0.16em;
  color: var(--line);
  font-size: 0.62rem;
}
.memory-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.memory-log-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 0.78rem;
  line-height: 1.5;
}
.memory-log-time {
  color: var(--blue);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.memory-log-text {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}
.memory-log-text em {
  font-style: normal;
  font-weight: 500;
  color: var(--blue-deep);
  background: var(--blue-pale);
  padding: 0 4px;
  border-radius: 4px;
}

/* Privacy controls variant (the second deep-dive replaces the screenshot with
   a faithful CSS rebuild of the Privacy Shield / Scam Shield / VPN cards) */
.privacy-controls {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-deepdive:hover .privacy-controls { transform: translateY(-4px); }
}
.privacy-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 4px 18px rgba(10,15,28,0.05);
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-deepdive:hover .privacy-row {
    box-shadow: 0 16px 44px rgba(10,15,28,0.10);
    border-color: var(--green-border);
  }
}
.privacy-row:not(.privacy-row--vpn),
.privacy-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.privacy-row-label {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.privacy-toggle {
  flex: none;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: var(--line);
  transition: background .25s var(--ease-out);
}
.privacy-toggle[data-on="true"] { background: var(--green); }
.privacy-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10,15,28,0.25);
  transition: transform .25s var(--ease-out);
}
.privacy-toggle[data-on="true"]::after { transform: translateX(22px); }
.privacy-vpn-location {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.privacy-vpn-flag {
  flex: none;
  display: block;
  width: 30px;
  height: 20px;
}
.privacy-vpn-flag svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(10,15,28,0.08);
}
.privacy-vpn-place {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.35;
}
.privacy-vpn-place strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
}
.privacy-vpn-chevron {
  flex: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .feature-deepdive {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0;
  }
  .feature-deepdive--reverse { direction: ltr; }
  .feature-deepdive-visual { min-height: auto; order: 2; }
  .feature-deepdive-text { order: 1; }
}

/* ─── Partner compare (Without / With) ──────────────────────────────────── */
.partner-compare {
  margin: clamp(48px, 6vw, 88px) 0 clamp(16px, 2vw, 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.partner-compare-col {
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
}
.partner-compare-without {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.partner-compare-with {
  background: var(--blue-deep);
  color: #fff;
  position: relative;
}
.partner-compare-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
.partner-compare-without .partner-compare-tag { color: var(--muted); }
.partner-compare-with .partner-compare-tag { color: rgba(255,255,255,0.78); }
.partner-compare-col h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}
.partner-compare-without h3 { color: var(--ink); }
.partner-compare-with h3 { color: #fff; }
.partner-compare-list {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  counter-reset: compare;
}
.partner-compare-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  font-family: 'Inter', sans-serif;
  font-size: 0.94rem;
  line-height: 1.5;
}
.partner-compare-list li::before {
  counter-increment: compare;
  content: counter(compare, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  align-self: baseline;
}
.partner-compare-without .partner-compare-list li::before { color: var(--muted); }
.partner-compare-with .partner-compare-list li::before { color: rgba(255,255,255,0.55); }
.partner-compare-with .partner-compare-list li { color: rgba(255,255,255,0.92); }
@media (max-width: 720px) {
  .partner-compare { grid-template-columns: 1fr; }
}

/* ─── FAQ accordion ─────────────────────────────────────────────────────── */
.faq-section {
  background: var(--color-paper-2, #f5f7fb);
  padding: clamp(72px, 9vw, 120px) 0;
  border-top: 1px solid var(--line);
}
.faq-section + .faq-section { border-top: 0; padding-top: 0; }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.faq-head { position: sticky; top: 104px; }
.faq-head .faq-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.faq-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 12ch;
}
.faq-head h2 .serif {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.faq-head p {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 34ch;
}
.faq-head p a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Centered variant (product page): title above, list centered below */
.faq-grid--center {
  display: block;
  max-width: 860px;
  margin: 0 auto;
}
.faq-grid--center .faq-head {
  position: static;
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.faq-grid--center .faq-head h2 {
  max-width: none;
  margin: 0;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
.faq-item:hover { border-color: rgba(30,144,255,0.25); }
.faq-item[open] {
  border-color: rgba(30,144,255,0.35);
  box-shadow: 0 1px 0 rgba(10,15,28,0.04), 0 12px 32px -16px rgba(30,144,255,0.22);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  transition: color .2s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--blue);
}
.faq-icon svg { width: 18px; height: 18px; }
.faq-q { flex: 1; }
.faq-item summary::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
  flex-shrink: 0;
  margin-left: 8px;
}
.faq-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--blue);
}
.faq-item summary:hover { color: var(--blue); }
.faq-item-body {
  padding: 0 22px 20px 64px;
  font-family: 'Inter', sans-serif;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 70ch;
}
.faq-item-body p { margin: 0 0 10px; }
.faq-item-body p:last-child { margin: 0; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-head { position: static; }
  .faq-head h2 { max-width: none; }
  .faq-head p { max-width: 56ch; }
  .faq-item summary { padding: 16px 18px; gap: 12px; }
  .faq-item-body { padding: 0 18px 18px 54px; }
}

/* ─── Footer newsletter capture ─────────────────────────────────────────── */
.site-footer-newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  justify-content: space-between;
  padding: 0 0 clamp(28px, 3.6vw, 44px);
  margin: 0 0 clamp(28px, 3.6vw, 44px);
  border-bottom: 1px solid var(--line);
}
.site-footer-newsletter-copy {
  flex: 1 1 280px;
  max-width: 44ch;
}
.site-footer-newsletter-copy h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
}
.site-footer-newsletter-copy p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.site-footer-newsletter-form {
  flex: 1 1 320px;
  display: flex;
  gap: 8px;
  max-width: 460px;
}
.site-footer-newsletter-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.site-footer-newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.12);
}
.site-footer-newsletter-form input[type="email"]::placeholder { color: var(--muted); }
.site-footer-newsletter-form button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.site-footer-newsletter-form button .arrow {
  display: inline-block;
  transition: transform .2s var(--ease-out);
}
.site-footer-newsletter-form button:hover {
  background: var(--blue-deep);
  transform: translateY(-1px);
}
.site-footer-newsletter-form button:hover .arrow { transform: translateX(3px); }
.site-footer-newsletter-form.is-done input,
.site-footer-newsletter-form.is-done button { pointer-events: none; }
.site-footer-newsletter-form.is-done input { opacity: 0.6; }
.site-footer-newsletter-form.is-done button {
  background: var(--green);
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.28);
}
@media (max-width: 600px) {
  .site-footer-newsletter-form { flex-wrap: wrap; }
  .site-footer-newsletter-form button { width: 100%; }
}

/* Static, enlarged connection icons (replaces the scrolling carousel rows) */
.conn-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 900px;            /* breaks the 14 icons into balanced rows */
  margin-inline: auto;
}
.conn-static .conn-icon {
  width: clamp(76px, 7.2vw, 96px);
  height: clamp(76px, 7.2vw, 96px);
}
.conn-static .conn-icon img,
.conn-static .conn-icon svg { width: 42%; height: 42%; object-fit: contain; display: block; }

/* AOL has no usable glyph on the icon CDNs; its logo is the wordmark */
.conn-word {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #000;
}
/* Download CTA under the connection icons */
.conn-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}

/* Models section, Ludicrous-only: single full-width card + product screenshot */
.pp-models-grid { grid-template-columns: 1fr; }
.pp-models-shot {
  margin-top: clamp(24px, 3vw, 36px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.pp-models-shot img { display: block; width: 100%; height: auto; }

/* Closing consumer CTA: open, centred, voice tile as the focal point */
.try-cta {
  text-align: center;
  padding: clamp(24px, 3vw, 40px) 0;
}
.try-cta h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
}
.try-cta-voice {
  display: block;
  width: min(260px, 56vw);
  height: auto;
  margin: clamp(8px, 1.2vw, 16px) auto 0;
}
.try-cta-lead {
  color: var(--ink-2);
  margin: 0 0 22px;
}
.try-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.try-cta--after { margin-top: clamp(28px, 3.5vw, 44px); padding-top: 0; }

/* Mid-page offer CTA (no voice image between headline and lead) */
.try-cta--offer .try-cta-lead { margin-top: 14px; }

/* Mid CTA duo box: one large box, web half + mobile half */
.cta-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  margin: 6px auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.cta-duo-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
}
.cta-duo-half--web {
  border-left: 1px solid var(--line);
  background: var(--bg-tint);
  padding: 0; /* the sign-in card fills this half edge to edge */
}
.cta-duo-half-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-align: center;
}
.cta-duo-appicon {
  width: 148px;
  height: 148px;
  margin: auto 0;
  border-radius: 32px; /* app-icon squircle look */
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(10, 15, 28, 0.14);
}
.cta-duo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
}
@media (max-width: 800px) {
  .cta-duo { grid-template-columns: 1fr; }
  .cta-duo-half--web {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Web app sign-in card recreation (8px radii — app-screen recreation rule).
   Fills its cta-duo half edge to edge; the half provides the frame. */
.login-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
  background: #fff;
  text-align: left;
}
.login-card-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.login-card-sub {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.login-card-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-card-input {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--bg-tint);
  text-decoration: none;    /* it is a link to the web sign-in (2026-09-10) */
  transition: border-color .15s, box-shadow .15s;
}
.login-card-input:hover,
.login-card-input:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.14);
}
.login-card-send {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background .2s var(--ease-out);
}
.login-card-send:hover { background: var(--blue-deep); }
.login-card-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.login-card-divider::before,
.login-card-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.login-card-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-card-prov {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.login-card-prov:hover { background: var(--bg-tint); border-color: var(--blue-mid); }
.login-card-prov svg { width: 18px; height: 18px; flex: 0 0 18px; }
.login-card-prov--apple {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.login-card-prov--apple:hover { background: #1A2035; border-color: #1A2035; }


/* ── Home "What MyPA does": three tall cards on the apps-page cap system ── */
.home-does { padding: clamp(56px, 7vw, 96px) 0; }
.home-does .cap-bento { margin-top: clamp(32px, 4vw, 56px); }
.cap-bento--trio { grid-template-columns: repeat(3, 1fr); }
.cap-bento--trio .cap-cell {
  grid-column: auto;
  min-height: clamp(400px, 32vw, 470px);
}
.cap-visual--home-art {
  inset: 0;
  bottom: clamp(96px, 9vw, 118px);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%);
          mask-image: linear-gradient(to top, transparent 0%, #000 14%);
}
.cap-visual--home-art .benefit-art {
  margin: 0;
  width: 100%;
  gap: 10px;
}
.cap-visual--home-art .ba-row,
.cap-visual--home-art .ba-opt,
.cap-visual--home-art .ba-prompt { font-size: 0.88rem; }
@media (max-width: 980px) {
  .cap-bento--trio { grid-template-columns: 1fr; }
  .cap-bento--trio .cap-cell { grid-column: auto; min-height: 360px; }
}

/* ── Homepage link-out sections: split text + media ─────────────────────── */
.link-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.link-split--flip .link-split-text { order: 2; }
.link-split--flip .link-split-media { order: 1; }
.link-split-lead {
  color: var(--ink-2);
  margin: 14px 0 20px;
  max-width: 46ch;
}
.link-facts {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.link-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--blue-mid);
  font-size: 0.92rem;
  color: var(--muted);
}
.link-facts li strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
}
.try-cta-actions--left { justify-content: flex-start; }
.link-split-media { margin: 0; }
.link-split-media video,
.link-split-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.link-split-media--faces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.link-split-media--faces img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 900px) {
  .link-split { grid-template-columns: 1fr; }
  .link-split--flip .link-split-text { order: 1; }
  .link-split--flip .link-split-media { order: 2; }
}

/* Everyday-action section: centred head above a centred graphic */
.everyday-stack { display: flex; flex-direction: column; align-items: center; }
.everyday-stack .section-head { max-width: 760px; }
.everyday-stack .section-head p { max-width: 64ch; }
.everyday-stack .radial-diagram {
  width: min(480px, 80%);
  margin-top: clamp(12px, 1.5vw, 20px);
}

/* Frameless app screenshots need a hairline + lift against white sections */
.link-split-media--framed img {
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(10, 15, 28, 0.10);
}

/* Download CTA: desktop screen centred with the phone overlapping in front */
.download-duo {
  position: relative;
  width: min(760px, 92%);
  margin: clamp(44px, 5vw, 72px) auto clamp(52px, 6vw, 84px);
}
.download-duo-desktop {
  display: block;
  width: 88%;
  margin-inline: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(10, 15, 28, 0.10);
}
.download-duo-phone {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 24%;
  filter: drop-shadow(0 16px 32px rgba(10, 15, 28, 0.22));
}

/* ════════════════════════════════════════════════════════════
   LIFE FEEDS · ORBIT (product page)
   Ported from 21st.dev @dillionverma/orbiting-circles (Magic UI,
   source in 21st-ref/). The six life signals orbit the MyPA mark
   on two counter-rotating rings; hovering a list row or a chip
   pauses the system and cross-highlights its pair (main.js).
   ════════════════════════════════════════════════════════════ */

.lf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 1040px;
}

/* Signal list */
.lf-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lf-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background-color .22s var(--ease-out), box-shadow .22s var(--ease-out), opacity .22s var(--ease-out);
}
.lf-row-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transition: background .22s var(--ease-out), border-color .22s var(--ease-out);
}
.lf-row-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}
.lf-row-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 2px 0 3px;
  color: var(--ink);
}
.lf-row-body p {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-2);
}
.lf-row.is-active {
  background: #fff;
  box-shadow: 0 0 0 1px var(--blue-mid), var(--shadow-sm);
}
.lf-row.is-active .lf-row-icon {
  background: var(--blue-mid);
  border-color: var(--blue);
}
.lf-split.is-focused .lf-row:not(.is-active) { opacity: .55; }

/* Orbit stage */
.lf-orbit {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.lf-orbit-stage {
  position: relative;
  width: 384px;
  height: 384px;
  flex: 0 0 auto;
}
.lf-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--blue-glow), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}
.lf-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ring-r) * 2);
  height: calc(var(--ring-r) * 2);
  margin: calc(var(--ring-r) * -1) 0 0 calc(var(--ring-r) * -1);
  border: 1px dashed var(--blue-mid);
  border-radius: 50%;
  pointer-events: none;
}
.lf-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lf-hub img {
  width: 62px;
  height: 62px;
  display: block;
}

/* One orbiting chip. The keyframes recreate Magic UI's animate-orbit:
   rotate → push out to radius → counter-rotate to keep the icon
   upright. Even spacing on a ring comes from negative delays
   (--off × --dur). */
.lf-orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  z-index: 3;
  animation: lf-orbit calc(var(--dur) * 1s) linear infinite;
  animation-delay: calc(var(--off) * var(--dur) * -1s);
  transition: border-color .22s var(--ease-out), box-shadow .22s var(--ease-out), opacity .22s var(--ease-out);
}
.lf-orbit-item svg {
  width: 22px;
  height: 22px;
  display: block;
}
.lf-orbit-item--rev { animation-direction: reverse; }
@keyframes lf-orbit {
  from { transform: rotate(0turn) translateY(calc(var(--radius) * -1px)) rotate(0turn); }
  to   { transform: rotate(1turn) translateY(calc(var(--radius) * -1px)) rotate(-1turn); }
}

/* Hover behaviour: hovering the stage pauses every chip (pure CSS);
   hovering a list row pauses via .is-focused (set by main.js). */
.lf-orbit-stage:hover .lf-orbit-item,
.lf-split.is-focused .lf-orbit-item { animation-play-state: paused; }
.lf-orbit-item.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow), var(--shadow-md);
}
.lf-split.is-focused .lf-orbit-item:not(.is-active) { opacity: .45; }

/* Reduced motion: park the chips at their stagger angles */
@media (prefers-reduced-motion: reduce) {
  .lf-orbit-item {
    animation: none;
    transform: rotate(calc(var(--off) * 1turn)) translateY(calc(var(--radius) * -1px)) rotate(calc(var(--off) * -1turn));
  }
  .lf-orbit-item--rev {
    transform: rotate(calc(0.167turn + var(--off) * 1turn)) translateY(calc(var(--radius) * -1px)) rotate(calc(-0.167turn - var(--off) * 1turn));
  }
}

@media (max-width: 900px) {
  .lf-split {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .lf-orbit { order: -1; }
  .lf-orbit-stage {
    transform: scale(0.82);
    margin: -34px 0;
  }
}
@media (max-width: 460px) {
  .lf-orbit-stage {
    transform: scale(0.66);
    margin: -64px 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT · connection tiles as rounded squares (matches .cap-cell 12px)
   ═══════════════════════════════════════════════════════════════════════ */
.conn-static .conn-icon { border-radius: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT · "Less to think about" bento grid
   Vanilla port of Magic UI BentoGrid/BentoCard: hover lifts the copy, the
   icon shrinks from its left origin and a CTA slides up from the bottom.
   ═══════════════════════════════════════════════════════════════════════ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 20vw, 262px);
  gap: clamp(12px, 1.1vw, 16px);
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  box-shadow: 0 1px 2px rgba(10,15,28,.03), 0 12px 24px rgba(10,15,28,.04);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.bento-card:hover { border-color: var(--blue-mid); box-shadow: 0 2px 4px rgba(30,144,255,.06), 0 18px 40px rgba(30,144,255,.12); }
.bento-card--c1-tall   { grid-column: 1; grid-row: 1 / 3; }
.bento-card--c1-bottom { grid-column: 1; grid-row: 3; }
.bento-card--c2-top    { grid-column: 2; grid-row: 1; }
.bento-card--c2-tall   { grid-column: 2; grid-row: 2 / 4; }
.bento-card--c3-tall   { grid-column: 3; grid-row: 1 / 3; }
.bento-card--c3-bottom { grid-column: 3; grid-row: 3; }
.bento-bg {
  position: absolute; top: -8%; right: -18%;
  width: 62%; max-width: 250px; height: auto;
  border-radius: 12px;
  opacity: .9;
  box-shadow: 0 18px 48px rgba(10,15,28,.14);
  transform: rotate(-6deg);
  transition: transform .5s var(--ease-out), opacity .3s var(--ease-out);
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
.bento-card:hover .bento-bg { transform: rotate(-4deg) translateY(-6px); }
.bento-glow {
  position: absolute; top: -40%; right: -20%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,144,255,.16) 0%, rgba(30,144,255,0) 70%);
  pointer-events: none;
}
.bento-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(18px, 1.8vw, 24px);
  pointer-events: none;
  transition: transform .3s var(--ease-out);
}
.bento-card:hover .bento-body { transform: translateY(-40px); }
.bento-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 8px;
  border-radius: 12px;
  background: var(--blue-pale); color: var(--blue);
  transform-origin: left center;
  transition: transform .3s var(--ease-out);
}
.bento-icon svg { width: 22px; height: 22px; }
.bento-card:hover .bento-icon { transform: scale(.8); }
.bento-body h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.bento-body p {
  font-size: .94rem; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 34ch;
}
.bento-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 1.8vw, 24px);
  transform: translateY(40px); opacity: 0;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
  pointer-events: none;
}
.bento-card:hover .bento-cta { transform: none; opacity: 1; pointer-events: auto; }
.bento-cta a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--blue); text-decoration: none;
  padding: 8px 12px; margin-left: -12px; border-radius: 8px;
  transition: background .2s var(--ease-out);
}
.bento-cta a:hover { background: var(--blue-pale); }
.bento-cta svg { width: 16px; height: 16px; }
.bento-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(10,15,28,0); transition: background .3s var(--ease-out);
}
.bento-card:hover .bento-veil { background: rgba(10,15,28,.025); }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .bento-card { grid-column: auto !important; grid-row: auto !important; }
  .bento-card--c1-tall, .bento-card--c3-tall, .bento-card--c2-tall { grid-row: span 2 !important; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card--c1-tall, .bento-card--c3-tall, .bento-card--c2-tall { grid-row: span 1 !important; min-height: 320px; }
  .bento-card:hover .bento-body { transform: none; }
  .bento-cta { display: none; }
}
@media (hover: none) {
  .bento-card:hover .bento-body { transform: none; }
  .bento-cta { display: none; }
}

/* Ludicrous mode: copy now sits under the screenshot */
.pp-models-flow .pp-models-shot { margin-top: 14px; }
.pp-models-flow .pp-models-shot + h3 { margin-top: clamp(20px, 2.4vw, 30px); }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT · closing CTA phone carousel (vanilla port of phone-mockups-1)
   Centre phone is active; neighbours sit behind, scaled and dimmed.
   ═══════════════════════════════════════════════════════════════════════ */
.phone-carousel {
  --phone-w: clamp(170px, 20vw, 232px);
  --phone-gap: 0.78;
  position: relative;
  margin: clamp(20px, 2.6vw, 36px) auto clamp(20px, 2.6vw, 32px);
  height: calc(var(--phone-w) * 2.06 + 24px);
  max-width: 1000px;
  overflow: hidden;
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.phone-track { position: absolute; inset: 0; }
.phone-slide {
  position: absolute; top: 12px; left: 50%;
  width: var(--phone-w); margin: 0;
  transform: translateX(calc(-50% + var(--off, 0) * var(--phone-w) * var(--phone-gap))) scale(var(--sc, 1));
  opacity: var(--op, 1);
  z-index: var(--z, 1);
  cursor: pointer;
  transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .45s var(--ease-out);
  will-change: transform;
}
.phone-slide[data-off="0"]  { --off: 0;  --sc: 1;   --op: 1;   --z: 5; cursor: default; }
.phone-slide[data-off="1"]  { --off: 1;  --sc: .84; --op: .55; --z: 4; }
.phone-slide[data-off="-1"] { --off: -1; --sc: .84; --op: .55; --z: 4; }
.phone-slide[data-off="2"]  { --off: 2;  --sc: .7;  --op: .25; --z: 3; }
.phone-slide[data-off="-2"] { --off: -2; --sc: .7;  --op: .25; --z: 3; }
.phone-slide:not([data-off]) { --off: 3; --sc: .6; --op: 0; --z: 1; }
.phone-frame {
  position: relative; display: block;
  padding: 9px;
  border-radius: calc(var(--phone-w) * .17);
  background: #0A0F1C;
  box-shadow: 0 0 0 1.5px #2A3142, 0 26px 60px rgba(10,15,28,.28);
}
.phone-frame img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--phone-w) * .17 - 9px);
  background: #fff;
}
.phone-island {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 20px; border-radius: 999px; background: #0A0F1C; z-index: 2;
}
.phone-nav {
  position: absolute; top: 50%; z-index: 10; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.phone-nav:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.phone-nav:active { transform: translateY(-50%) scale(.95); }
.phone-nav svg { width: 20px; height: 20px; }
.phone-nav--prev { left: clamp(8px, 4vw, 40px); }
.phone-nav--next { right: clamp(8px, 4vw, 40px); }
@media (max-width: 560px) {
  .phone-carousel { --phone-w: 150px; }
  .phone-nav--prev { left: 4px; } .phone-nav--next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-slide { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · ENGAGEMENT BAR CHART
   Vanilla port of 21st.dev @bklitai bar-chart (horizontal): bars grow from
   the left with a stagger, hover fades the others, faded dashed gridlines.
   ═══════════════════════════════════════════════════════════════════════ */
.eng-section { padding: clamp(64px, 8vw, 120px) 0; }
.eng-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.eng-chart {
  position: relative;
  margin: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 40%, var(--bg-tint) 100%);
}
.eng-gridlines {
  position: absolute; inset: clamp(20px, 2.4vw, 32px);
  left: calc(clamp(20px, 2.4vw, 32px) + var(--eng-label-w, 150px) + 14px);
  right: calc(clamp(20px, 2.4vw, 32px) + 68px);
  bottom: 62px;
  display: flex; justify-content: space-between; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.eng-gridlines i { width: 0; border-left: 1px dashed var(--line); }
.eng-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--eng-label-w, 150px) 1fr 68px;
  align-items: center; gap: 14px;
  padding: 5px 0;
  transition: opacity .25s var(--ease-out);
}
.eng-chart.is-hover .eng-row:not(:hover) { opacity: .3; }
.eng-label { font-size: .9rem; color: var(--ink-2); font-weight: 500; text-align: right; white-space: nowrap; }
.eng-track { display: block; height: 22px; }
.eng-bar {
  display: block; height: 100%; width: calc(var(--v) * 100%);
  border-radius: 0 6px 6px 0;
  background: var(--blue-mid);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s cubic-bezier(.85,0,.15,1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.eng-row--social .eng-bar { background: var(--blue-mid); }
.eng-row--ref .eng-bar { background: #D6DDEA; }
.eng-row--target .eng-bar {
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  box-shadow: 0 6px 18px rgba(30,144,255,.3);
}
.eng-row--target .eng-label, .eng-row--target .eng-val { color: var(--blue); font-weight: 700; }
.eng-chart.is-in .eng-bar { transform: scaleX(1); }
.eng-row:nth-child(2) .eng-bar { --i: 0 } .eng-row:nth-child(3) .eng-bar { --i: 1 } .eng-row:nth-child(4) .eng-bar { --i: 2 }
.eng-row:nth-child(5) .eng-bar { --i: 3 } .eng-row:nth-child(6) .eng-bar { --i: 4 } .eng-row:nth-child(7) .eng-bar { --i: 5 }
.eng-row:nth-child(8) .eng-bar { --i: 6 } .eng-row:nth-child(9) .eng-bar { --i: 7 } .eng-row:nth-child(10) .eng-bar { --i: 8 }
.eng-val { font-size: .88rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eng-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.eng-legend span { display: inline-flex; align-items: center; gap: 8px; }
.eng-key { width: 12px; height: 12px; border-radius: 3px; background: var(--blue-mid); }
.eng-key--ref { background: #D6DDEA; }
.eng-key--target { background: linear-gradient(90deg, var(--blue-deep), var(--blue)); }
.eng-side { display: flex; flex-direction: column; gap: 14px; }
.eng-stat {
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.eng-stat strong {
  display: block; font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-bottom: 8px;
}
.eng-stat span { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.eng-stat--target { border-color: var(--blue-mid); background: var(--blue-pale); }
.eng-stat--target strong { color: var(--blue); }
.eng-points { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eng-points li { font-size: .92rem; color: var(--ink-2); line-height: 1.5; padding-left: 18px; position: relative; }
.eng-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.eng-points b { color: var(--ink); font-weight: 600; }
.eng-source { margin-top: 22px; font-size: .78rem; line-height: 1.55; color: var(--muted); max-width: 90ch; }
@media (max-width: 900px) {
  .eng-grid { grid-template-columns: 1fr; }
  .eng-chart { --eng-label-w: 118px; }
  .eng-label { font-size: .8rem; white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · 50/50 SHARE RING + REWARDS LOOP
   ═══════════════════════════════════════════════════════════════════════ */
.share-section { padding: clamp(64px, 8vw, 120px) 0; }
.share-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.share-ring-wrap { position: relative; max-width: 360px; margin: 0 auto; }
.share-ring { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.share-ring circle { fill: none; stroke-width: 22; }
.share-ring-bg { stroke: var(--line); }
.share-ring-partner, .share-ring-mypa {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1);
  stroke-linecap: butt;
}
.share-ring-partner { stroke: var(--blue); }
.share-ring-mypa { stroke: var(--ink); stroke-dashoffset: -50; transition-delay: .25s; }
.share-ring-wrap.is-in .share-ring-partner { stroke-dasharray: 49.4 100; }
.share-ring-wrap.is-in .share-ring-mypa { stroke-dasharray: 49.4 100; }
.share-ring-centre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%);
  text-align: center; pointer-events: none;
}
.share-ring-centre strong {
  display: block; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: var(--ink);
}
.share-ring-centre strong span { color: var(--blue); font-weight: 300; font-style: italic; }
.share-ring-sub { display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.share-ring-legend {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; justify-content: center; gap: 22px; font-size: .9rem; color: var(--ink-2);
}
.share-ring-legend li { display: inline-flex; align-items: center; gap: 8px; }
.share-ring-legend b { color: var(--ink); font-weight: 600; }
.share-key { width: 12px; height: 12px; border-radius: 3px; }
.share-key--partner { background: var(--blue); }
.share-key--mypa { background: var(--ink); }
.share-copy h2 { max-width: 16ch; }
.share-copy > p { color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.share-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.share-facts li {
  position: relative; padding: 14px 16px 14px 44px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
}
.share-facts li::before {
  content: ''; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-pale); border: 2px solid var(--blue);
}
.share-facts b { color: var(--ink); font-weight: 600; }
.loop-head { margin-top: clamp(48px, 6vw, 80px); max-width: 640px; }
.loop-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; color: var(--ink); }
.loop-head p { color: var(--ink-2); line-height: 1.6; margin: 0; }
.loop-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.1vw, 16px);
  margin-top: 26px;
}
.loop-card {
  padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.loop-card:hover { border-color: var(--blue-mid); box-shadow: 0 18px 40px rgba(30,144,255,.12); transform: translateY(-3px); }
.loop-ic {
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--blue-pale); color: var(--blue); margin-bottom: 14px;
}
.loop-ic svg { width: 22px; height: 22px; }
.loop-card h4 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.loop-card p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) {
  .share-grid { grid-template-columns: 1fr; }
  .loop-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .loop-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · TRUSTED ACTION FLOW
   Vanilla port of 21st.dev @chamaac how-it-works: pinned, slightly tilted
   cards joined by an animated dashed path. Laid out in a row for the site.
   ═══════════════════════════════════════════════════════════════════════ */
.flow-section { padding: clamp(64px, 8vw, 120px) 0; }
.flow-section .section-head h2 { max-width: none; }
.flow-track {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 20px);
  padding-top: 26px;
}
.flow-line { position: absolute; left: 0; right: 0; top: 34px; width: 100%; height: 40px; pointer-events: none; z-index: 0; }
.flow-line path {
  fill: none; stroke: var(--blue-mid); stroke-width: 2; stroke-dasharray: 8 6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: flow-dash 3s linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -140; } }
.flow-card {
  position: relative; z-index: 1;
  padding: 6px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(10,15,28,.08);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.flow-card:nth-child(odd)  { --tilt: -1.5deg; }
.flow-card:nth-child(even) { --tilt: 1.5deg; }
.flow-card:hover { transform: rotate(0) scale(1.04); z-index: 3; box-shadow: 0 22px 48px rgba(30,144,255,.16); }
.flow-pin {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--blue-mid), 0 4px 10px rgba(30,144,255,.35);
}
.flow-card-inner {
  height: 100%; padding: 18px 16px 20px; border-radius: 8px;
  background: var(--blue-pale); border: 1px solid var(--blue-mid);
}
.flow-num { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--blue); line-height: 1; margin-bottom: 12px; }
.flow-card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.flow-card p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.flow-monitors {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.1vw, 16px);
  margin-top: clamp(36px, 4vw, 56px);
}
.flow-mon { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.flow-mon h4 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.flow-mon p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1000px) {
  .flow-track { grid-template-columns: repeat(3, 1fr); }
  .flow-line { display: none; }
}
@media (max-width: 640px) {
  .flow-track { grid-template-columns: 1fr; padding-top: 14px; }
  .flow-card { --tilt: 0deg !important; }
  .flow-monitors { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .flow-line path { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · VERIFICATION YIELD STEPS
   ═══════════════════════════════════════════════════════════════════════ */
.yield-section { padding: clamp(64px, 8vw, 120px) 0; }
.yield-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.yield-copy h2 { max-width: 16ch; }
.yield-copy p { color: var(--ink-2); line-height: 1.6; max-width: 58ch; }
.yield-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 16px);
  align-items: end; padding-top: 10px;
}
.yield-step { display: flex; flex-direction: column; }
.yield-bar {
  height: calc(var(--h) * 220px);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--blue-mid), var(--blue-pale));
  border: 1px solid var(--blue-mid); border-bottom: 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.yield-step:nth-child(2) .yield-bar { transition-delay: .12s; }
.yield-step:nth-child(3) .yield-bar { transition-delay: .24s; }
.yield-step--top .yield-bar {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  border-color: var(--blue-deep);
  box-shadow: 0 16px 40px rgba(30,144,255,.28);
}
.yield-steps.is-in .yield-bar { transform: scaleY(1); }
.yield-step h4 , .yield-step h3{ margin: 14px 0 6px; font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.yield-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-pale); border: 1px solid var(--blue-mid);
  padding: 4px 8px; border-radius: 6px; margin-bottom: 8px;
}
.yield-step--top .yield-tag { color: #fff; background: var(--blue); border-color: var(--blue); }
.yield-step p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); min-height: 4.2em; }
.yield-step h4 , .yield-step h3{ white-space: nowrap; }
@media (max-width: 900px) { .yield-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .yield-steps { grid-template-columns: 1fr; align-items: stretch; } .yield-bar { height: 28px; border-radius: 8px; transform-origin: left; } .yield-steps.is-in .yield-bar { transform: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · /impeccable layout pass (2026-08-28)
   Rhythm: engagement default, share tight, flow default, yield tight.
   Repeated card grids replaced with the design system's strip and rule patterns.
   ═══════════════════════════════════════════════════════════════════════ */
.share-section.tight { padding: clamp(56px, 6.5vw, 96px) 0; }
.yield-section.tight { padding: clamp(56px, 6.5vw, 96px) 0; }
.eng-section { padding: clamp(72px, 9vw, 120px) 0; }
.flow-section { padding: clamp(72px, 9vw, 120px) 0 clamp(80px, 10vw, 136px); }

/* Rewards loop: one bordered strip, four columns, shared dividers (stat-strip pattern) */
.loop-grid {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.loop-card {
  border: 0;
  border-radius: 0;
  padding: 26px 24px 28px;
  transition: background .25s var(--ease-out);
}
.loop-card + .loop-card { border-left: 1px solid var(--line); }
.loop-card:hover { border-color: var(--line); box-shadow: none; transform: none; background: var(--bg-tint); }
.loop-head { max-width: 560px; }
.loop-grid { margin-top: 22px; }
@media (max-width: 900px) {
  .loop-card:nth-child(2n) { border-left: 1px solid var(--line); }
  .loop-card:nth-child(2n+1) { border-left: 0; }
  .loop-card:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .loop-card { border-left: 0 !important; }
  .loop-card + .loop-card { border-top: 1px solid var(--line); }
}

/* Monitors: rule layout with blue accent per column (next-steps timeline pattern), no boxing */
.flow-monitors {
  gap: 0;
  border-top: 2px solid var(--line);
  margin-top: clamp(40px, 5vw, 64px);
}
.flow-mon {
  position: relative;
  border: 0; border-radius: 0; background: transparent;
  padding: 22px clamp(18px, 2vw, 28px) 0 0;
}
.flow-mon + .flow-mon { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--line); }
.flow-mon::before {
  content: ''; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--blue);
}
.flow-mon + .flow-mon::before { left: clamp(18px, 2vw, 28px); }
@media (max-width: 640px) {
  .flow-mon { padding: 20px 0 22px; border-left: 0 !important; }
  .flow-mon + .flow-mon { padding-left: 0; border-top: 1px solid var(--line); }
  .flow-mon + .flow-mon::before { left: 0; }
}

/* Flow cards: the pins now sit on the dashed line, cards get equal heights */
.flow-track { align-items: stretch; }
.flow-card { display: flex; }
.flow-card-inner { width: 100%; }

/* Yield copy: two paragraphs, give the second its own line of air */
.yield-copy p + p { margin-top: 14px; }

/* Share ring: top-align with the headline so the composition reads left to right */
.share-grid { align-items: start; }
.share-ring-wrap { padding-top: 26px; }

/* Engagement: keep the side column aligned to the chart card top, source sits close to the chart */
.eng-source { margin-top: 18px; }

/* Layout pass round 2: headline-to-lead air, yield tiers share row tracks so bars sit on one baseline */
.share-copy h2, .yield-copy h2 { margin-bottom: 18px; }
.yield-steps { grid-template-rows: auto auto auto auto; align-items: stretch; }
.yield-step { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; }
.yield-bar { align-self: end; }
@media (max-width: 480px) {
  .yield-steps { grid-template-rows: none; }
  .yield-step { grid-row: auto; grid-template-rows: none; display: flex; }
}


/* ═══════════════════════════════════════════════════════════════════════
   404 · Page not found
   ═══════════════════════════════════════════════════════════════════════ */
.nf-code {
  display: block;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: .9;
  color: var(--blue-mid);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.nf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.nf-link {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  transition: background .2s var(--ease-out);
}
.nf-link:nth-child(n+2) { border-left: 1px solid var(--line); }
.nf-link:nth-child(3n+1) { border-left: 0; }
.nf-link:nth-child(n+4) { border-top: 1px solid var(--line); }
.nf-link:hover { background: var(--blue-pale); }
.nf-link strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.nf-link strong::after { content: ' \2192'; color: var(--blue); }
.nf-link span { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.nf-actions { margin-top: 28px; }
@media (max-width: 800px) {
  .nf-grid { grid-template-columns: 1fr 1fr; }
  .nf-link:nth-child(n+2) { border-left: 1px solid var(--line); }
  .nf-link:nth-child(2n+1) { border-left: 0; }
  .nf-link:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .nf-grid { grid-template-columns: 1fr; }
  .nf-link { border-left: 0 !important; }
  .nf-link:nth-child(n+2) { border-top: 1px solid var(--line); }
}


/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS v3 (2026-08-28) · pitch flip, engagement spacing, streams grid,
   rewards orbit, timeline sections
   ═══════════════════════════════════════════════════════════════════════ */

/* Pitch: copy + rows left, unboxed full-height video right */
.home-pitch--flip .pitch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.home-pitch--flip .home-pitch-head { margin: 0 0 clamp(28px, 3.5vw, 44px); max-width: none; }
.home-pitch--flip .home-pitch-head p { max-width: 58ch; }
.home-pitch--flip .home-pitch-rows { flex: none; gap: clamp(18px, 2.2vw, 28px); }
.pitch-figure {
  margin: 0; position: relative; min-height: 420px;
  border-radius: 12px; overflow: hidden;
}
.pitch-figure video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  border: 0; box-shadow: none; background: transparent;
}
@media (max-width: 900px) {
  .home-pitch--flip .pitch-grid { grid-template-columns: 1fr; }
  .pitch-figure { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Engagement: head sits lower, source hugs the chart */
.eng-section--lowered .section-head { padding-top: clamp(24px, 3vw, 48px); }
.eng-chart-col { display: flex; flex-direction: column; }
.eng-chart-col .eng-source { margin-top: 14px; }
@media (max-width: 900px) {
  .stream-grid { grid-template-columns: 1fr 1fr; }
  .stream-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .stream-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .stream-grid { grid-template-columns: 1fr; }
  .stream-cell { border-right: 1px solid var(--line); }
  .stream-cell + .stream-cell { border-top: 1px solid var(--line); }
}

/* Rewards loop: orbit section */
.loop-section { padding: clamp(72px, 9vw, 120px) 0; }
.loop-split { margin-top: 0; }
.loop-hub { width: 92px; height: 92px; }
.loop-coin {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 38%, rgba(255,255,255,.55), transparent 62%), linear-gradient(180deg, var(--blue-light), var(--blue-deep));
  color: #fff; box-shadow: 0 10px 30px rgba(30,144,255,.35), inset 0 -3px 0 rgba(10,15,28,.18);
  line-height: 1;
}
.loop-coin b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; }
.loop-coin small { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; opacity: .9; }

/* Timeline sections (trusted action, how it goes live) */
.tl-layout {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
.tl-aside { position: sticky; top: 110px; }
.tl-aside h2 { max-width: 18ch; }
.tl-aside > p { color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
.tl-aside .flow-monitors { margin-top: clamp(28px, 3vw, 40px); grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--line); }
.tl-aside .flow-mon { padding: 18px 0 20px; border-left: 0; }
.tl-aside .flow-mon + .flow-mon { padding-left: 0; border-top: 1px solid var(--line); }
.tl-aside .flow-mon + .flow-mon::before { left: 0; }
.tl-aside .flow-mon::before { top: -2px; }
.tl-aside .flow-mon + .flow-mon::before { top: -1px; }
.trust-note { margin-top: clamp(32px, 4vw, 48px); padding-top: 26px; border-top: 2px solid var(--line); position: relative; }
.trust-note::before { content: ''; position: absolute; left: 0; top: -2px; width: 40px; height: 2px; background: var(--blue); }
.trust-note .label { margin-bottom: 8px; }
.trust-note h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.trust-note h3 .serif { font-weight: 300; font-style: italic; color: var(--blue); }
.trust-note p { margin: 0; color: var(--ink-2); line-height: 1.6; }

.tl { list-style: none; margin: 0; padding: 0 0 10px; position: relative; }
.tl-rail {
  position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line); border-radius: 2px;
}
.tl-rail i {
  position: absolute; inset: 0; background: var(--blue); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1) .2s;
}
.tl.is-in .tl-rail i { transform: scaleY(1); }
.tl-item {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.tl-item + .tl-item { margin-top: clamp(18px, 2.2vw, 28px); }
.tl-node {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--blue);
  border: 2px solid var(--blue-mid);
  box-shadow: 0 6px 18px rgba(10,15,28,.08);
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tl-node svg { width: 22px; height: 22px; }
.tl-item:hover .tl-node { transform: scale(1.05); border-color: var(--blue); }
.tl-card {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 20px 22px 18px;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .2s var(--ease-out);
}
.tl-item:hover .tl-card { border-color: var(--blue-mid); box-shadow: 0 14px 34px rgba(30,144,255,.12); transform: translateY(-2px); }
.tl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.tl-card h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); transition: color .2s var(--ease-out); }
.tl-item:hover .tl-card h3 { color: var(--blue); }
.tl-meta { font-size: .8rem; color: var(--muted); }
.tl-badge {
  flex-shrink: 0; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-pale); border: 1px solid var(--blue-mid);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}
.tl-card p { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.tl-progress { display: block; height: 4px; border-radius: 4px; background: var(--bg-tint); overflow: hidden; border: 1px solid var(--line); }
.tl-progress i {
  display: block; height: 100%; width: var(--p, 20%); border-radius: 4px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.22,1,.36,1) .5s;
}
.tl.is-in .tl-progress i { transform: scaleX(1); }
.tl-end {
  position: absolute; left: 22px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px var(--blue-pale);
  opacity: 0; transform: scale(0); transition: transform .4s cubic-bezier(.22,1,.36,1) 1.3s, opacity .2s 1.3s;
}
.tl.is-in .tl-end { opacity: 1; transform: scale(1); }
@media (max-width: 900px) {
  .tl-layout { grid-template-columns: 1fr; }
  .tl-aside { position: static; }
}
@media (max-width: 520px) {
  .tl-item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .tl-node { width: 44px; height: 44px; } .tl-node svg { width: 18px; height: 18px; }
  .tl-rail { left: 21px; } .tl-end { left: 16px; }
  .tl-card { padding: 16px; }
  .tl-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-rail i, .tl-progress i { transition: none; transform: none; }
  .tl-end { transition: none; opacity: 1; transform: none; }
}

/* v3 round 2 */
.tl-aside h2 { margin-bottom: 16px; }
.pitch-figure video { mix-blend-mode: multiply; }


/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS v4 · brand-consistency pass (DESIGN.md patterns)
   One head style, one accent word, labels as eyebrows, flat at rest,
   value ladders for sequences, rule rows for steps, bordered panel grids.
   ═══════════════════════════════════════════════════════════════════════ */
.pitch-head { margin-bottom: clamp(28px, 3.5vw, 44px) !important; }
.rev-shader-section .section-head { text-align: left; margin-left: 0; }
.rev-shader-section .section-head p { margin-left: 0; }
.partners-revenue-foot { text-align: left; }
.share-grid { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); align-items: center; margin-top: 8px; }
.share-ring-wrap { padding-top: 0; }
.share-copy { display: none; }
.faq-head .label { margin-bottom: 12px; }
.loop-hub .loop-coin { box-shadow: inset 0 -3px 0 rgba(10,15,28,.18); }

/* Value ladder: number · title+sub · description, 1px dividers, no boxes */
.ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ladder li {
  display: grid; grid-template-columns: 64px minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 2.5vw, 40px); align-items: start;
  padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--line);
  transition: background .2s var(--ease-out);
}
.ladder li:hover { background: linear-gradient(90deg, var(--bg-tint), transparent 70%); }
.ladder strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--blue); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ladder h3 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ladder-sub { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ladder p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.share-ladder { border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .ladder li { grid-template-columns: 44px minmax(0, 1fr); }
  .ladder p { grid-column: 2; }
}

/* Rule row: top 2px line, 40px blue accent per column, 1px separators, no boxes */
.rule-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 2px solid var(--line); margin-top: clamp(36px, 4.5vw, 60px);
}
.rule-row--4 { grid-template-columns: repeat(4, 1fr); margin-top: clamp(28px, 3.5vw, 44px); }
.rule-col { position: relative; padding: 22px clamp(18px, 2vw, 28px) 4px 0; }
.rule-col + .rule-col { padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid var(--line); }
.rule-col::before { content: ''; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--blue); }
.rule-col + .rule-col::before { left: clamp(18px, 2vw, 28px); }
.rule-num { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--blue); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.rule-col h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.rule-col p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .rule-row, .rule-row--4 { grid-template-columns: 1fr 1fr; }
  .rule-col:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .rule-col:nth-child(2n+1)::before { left: 0; }
  .rule-col:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 560px) {
  .rule-row, .rule-row--4 { grid-template-columns: 1fr; }
  .rule-col { padding-left: 0 !important; border-left: 0 !important; }
  .rule-col::before { left: 0 !important; }
  .rule-col + .rule-col { border-top: 1px solid var(--line); margin-top: 18px; }
}

/* How it goes live: head left, trust aside right */
.launch-intro {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
}
.launch-intro .section-head { margin-bottom: 0; }
.trust-aside { padding-top: 6px; }
.trust-aside .label { margin-bottom: 10px; }
.trust-aside h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.trust-aside h3 .serif { font-weight: 300; font-style: italic; color: var(--blue); }
.trust-aside p { margin: 0; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 900px) { .launch-intro { grid-template-columns: 1fr; } }

/* What you receive: phone + bordered panel grid */
.recv-layout {
  display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.recv-figure { margin: 0; }
.recv-figure img {
  display: block; width: 100%; max-width: 300px; height: auto;
  border-radius: 12px; border: 1px solid var(--line);
}
.recv-figure figcaption { margin-top: 12px; font-size: .85rem; color: var(--muted); max-width: 300px; }
.recv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
}
.recv-cell {
  padding: clamp(18px, 2vw, 26px); text-decoration: none; color: inherit; display: block;
  transition: background .2s var(--ease-out);
}
.recv-cell:nth-child(2n) { border-left: 1px solid var(--line); }
.recv-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
.recv-cell:hover { background: var(--bg-tint); }
.recv-tag { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.recv-cell h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.recv-cell p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.recv-cell--cta { background: var(--blue-pale); }
.recv-cell--cta:hover { background: var(--blue-mid); }
.recv-cell--cta h3 { color: var(--blue); }
.recv-cell--cta .recv-tag { color: var(--blue-deep); }
@media (max-width: 900px) {
  .recv-layout { grid-template-columns: 1fr; }
  .recv-figure img { max-width: 240px; }
}
@media (max-width: 520px) {
  .recv-grid { grid-template-columns: 1fr; }
  .recv-cell { border-left: 0 !important; }
  .recv-cell + .recv-cell { border-top: 1px solid var(--line); }
}

.rev-shader-section .partners-revenue-foot { text-align: left; margin-left: 0; max-width: 70ch; }
.flow-section .section-head h2 { max-width: none; }

.launch-intro .section-head h2 { white-space: normal; max-width: 16ch; }
.launch-intro > * { min-width: 0; }
.trust-aside .label { display: block; }
.trust-aside h3 { margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS v5 · one box language everywhere (matches product page .cap-cell:
   1px grey outline, 12px radius, white-to-tint fill, flat at rest)
   ═══════════════════════════════════════════════════════════════════════ */
.pitch-head h2 { max-width: none; }

/* Pitch rows */
.home-pitch--flip .home-pitch-row {
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  padding: 18px 20px;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.home-pitch--flip .home-pitch-row:hover { border-color: var(--blue-mid); box-shadow: 0 12px 28px rgba(30,144,255,.10); }
.home-pitch--flip .home-pitch-rows { gap: 12px; }

/* Value ladders → boxed rows */
.ladder { border-top: 0; display: flex; flex-direction: column; gap: 12px; }
.ladder li {
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ladder li:hover { background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%); border-color: var(--blue-mid); box-shadow: 0 12px 28px rgba(30,144,255,.10); }
.share-ladder { border-top: 0; }

/* Rule rows → boxed columns */
.rule-row, .rule-row--4 { border-top: 0; gap: 12px; }
.rule-col, .rule-col + .rule-col {
  border: 1px solid var(--line) !important; border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  padding: 22px 22px 24px !important; margin-top: 0 !important;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.rule-col::before, .rule-col + .rule-col::before { display: none; }
.rule-col:hover { border-color: var(--blue-mid) !important; box-shadow: 0 12px 28px rgba(30,144,255,.10); }

/* Trust aside and engagement side points share the same box */
.trust-aside, .eng-points {
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  padding: 22px 24px;
}
.trust-aside { border-top: 1px solid var(--line); }
.trust-aside::before { display: none; }
.eng-points { margin-top: 0; }

/* Pitch v6: head spans full width, boxes left (wider), graphic right at the boxes' combined height */
.home-pitch--flip .pitch-head { max-width: none; }
.home-pitch--flip .pitch-head p { max-width: none; }
.home-pitch--flip .pitch-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: stretch; gap: clamp(24px, 3vw, 48px); }
.home-pitch--flip .pitch-copy { display: flex; flex-direction: column; }
.pitch-figure { min-height: 0; height: 100%; }
@media (max-width: 900px) { .home-pitch--flip .pitch-grid { grid-template-columns: 1fr; } .pitch-figure { height: auto; aspect-ratio: 4 / 5; } }

.home-pitch--flip .home-pitch-rows, .home-pitch--flip .home-pitch-row, .home-pitch--flip .home-pitch-row-text { max-width: none; width: 100%; }
.home-pitch--flip .home-pitch-row-text p { max-width: none; }

/* Partners hero: uncropped animation frame, made larger by letting the figure
   outgrow its column and overhang the right edge */
@media (min-width: 1025px) {
  .ed-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ed-hero-anim { width: 150%; max-width: none; margin-left: -18%; margin-right: -32%; }
}

/* Stat trio → same box language as the rest of the partners page */
.stat-trio-list { gap: 12px; }
.stat-trio-item {
  border-top: 1px solid var(--line);
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 46%, var(--bg-tint) 100%);
  padding: 22px 24px 24px;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.stat-trio-item::before { display: none; }
.stat-trio-item:hover { border-color: var(--blue-mid); box-shadow: 0 12px 28px rgba(30,144,255,.10); }

.stat-trio-list { align-items: stretch; }

.launch-intro { grid-template-columns: 1fr; }

/* Partners: flat white boxes, no gradient fill (2026-08-28) */
.stat-trio-item, .home-pitch--flip .home-pitch-row, .eng-chart, .eng-stat, .eng-points,
.stream-cell, .ladder li, .ladder li:hover, .rule-col, .rule-col + .rule-col,
.recv-grid, .recv-cell, .bento-card, .loop-card, .flow-mon, .share-facts li {
  background: #fff;
}
.eng-stat--target { background: var(--blue-pale); }
.recv-cell--cta { background: var(--blue-pale); }
.recv-cell--cta:hover { background: var(--blue-mid); }
.recv-cell:hover, .stream-cell:hover, .ladder li:hover, .rule-col:hover, .stat-trio-item:hover, .home-pitch--flip .home-pitch-row:hover { background: #fff; }
.recv-cell--cta:hover { background: var(--blue-mid); }
.recv-cell:not(.recv-cell--cta):hover { background: var(--bg-tint); }


/* Partners · revenue streams on the app-page bento */
.cap-bento--streams { margin-top: clamp(32px, 4vw, 56px); }
.rev-shader-section .cap-cell { background: #fff; }
.cap-visual--pending {
  align-items: center; justify-content: center; padding: 0;
  -webkit-mask-image: none; mask-image: none;
  background: radial-gradient(60% 60% at 50% 40%, var(--blue-pale) 0%, rgba(235,245,255,0) 100%);
}
.cap-pending-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); color: var(--blue);
  margin-bottom: 26%;
}
.cap-pending-ic svg { width: 36px; height: 36px; }

/* How it goes live: trust box sits above the four step boxes */
.trust-box {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 24px 26px; margin-top: clamp(20px, 2.5vw, 32px);
  display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1fr); gap: 8px clamp(24px, 3vw, 48px); align-items: start;
}
.trust-box .label { grid-column: 1; margin-bottom: 6px; display: block; }
.trust-box h3 { grid-column: 1; margin: 0; font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.trust-box h3 .serif { font-weight: 300; font-style: italic; color: var(--blue); }
.trust-box p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--ink-2); line-height: 1.6; }
.rule-row--4 { margin-top: 12px; }
@media (max-width: 720px) { .trust-box { grid-template-columns: 1fr; } .trust-box p { grid-column: 1; grid-row: auto; } }

/* Tokens stream: anchor the screen to the bottom so the top-up sheet is the visible part */
[data-stream="rev-tokens"] .cap-visual--screen {
  align-items: flex-end; padding: 0 0 118px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 34%);
          mask-image: linear-gradient(to bottom, transparent 4%, #000 34%);
}
[data-stream="rev-tokens"] .cap-visual--screen .cap-shot { height: 118%; }

/* Switching stream: match the tokens screen width. The shot is sized by height, and a
   percentage height resolves against the visual's CONTENT box, so the two only agree
   when they share the same vertical padding. Give this one the tokens padding and
   restore its top inset with a margin, which does not affect that reference. */
[data-stream="rev-switching"] .cap-visual--screen { padding: 0 0 118px; }
[data-stream="rev-switching"] .cap-visual--screen .cap-shot {
  height: 118%;
  margin-top: clamp(16px, 1.8vw, 24px);
}

/* Revenue streams: four abreast on one row (was 2x2) */
.cap-bento--streams { grid-template-columns: repeat(4, 1fr); }
.cap-bento--streams .cap-cell--half { grid-column: span 1; min-height: clamp(400px, 30vw, 470px); }
@media (max-width: 1000px) {
  .cap-bento--streams { grid-template-columns: repeat(2, 1fr); }
  .cap-bento--streams .cap-cell--half { grid-column: span 1; }
}
@media (max-width: 620px) { .cap-bento--streams { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT · LUDICROUS MODE GRAPHIC
   Built graphic (no screenshot): one question fans out to four AIs in
   parallel, their answers merge back into a single reply. Light surface,
   12px radii, Inter, blue accent.
   ═══════════════════════════════════════════════════════════════════════ */
.lud-graphic {
  --lud-gap: clamp(10px, 1.1vw, 16px);
  position: relative;
  margin-top: clamp(24px, 3vw, 36px);
  /* No container box — the parts sit straight on the section surface */
  padding: clamp(4px, 0.6vw, 10px) 0;
}

/* ── The question bar ─────────────────────────────────────────────────── */
.lud-ask {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 10px 10px 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(10, 15, 28, 0.06);
}
.lud-ask-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lud-ask-chip svg { width: 12px; height: 12px; }
.lud-ask-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lud-ask-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
}
.lud-ask-send svg { width: 16px; height: 16px; }

/* ── Connector wires ──────────────────────────────────────────────────────
   Drawn with the same grid maths as .lud-cols so the stems always land on
   the column centres: with 4 equal columns and gap g, the outer centres sit
   (100% - 3g) / 8 in from each edge. */
.lud-wires {
  position: relative;
  height: clamp(28px, 3.4vw, 46px);
  --lud-wire: var(--blue-mid);
}
.lud-wire-spine {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 50%;
  transform: translateX(-50%);
  background: var(--lud-wire);
}
.lud-wire-rail {
  position: absolute;
  top: 50%;
  left:  calc((100% - 3 * var(--lud-gap)) / 8);
  right: calc((100% - 3 * var(--lud-gap)) / 8);
  height: 1.5px;
  transform: translateY(-50%);
  background: var(--lud-wire);
}
.lud-wire-stems {
  position: absolute;
  inset: 50% 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lud-gap);
}
.lud-wire-stems i {
  justify-self: center;
  width: 1.5px;
  height: 100%;
  background: var(--lud-wire);
}

/* ── The four parallel answers ────────────────────────────────────────── */
.lud-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lud-gap);
}
.lud-col {
  padding: 12px 14px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(10, 15, 28, 0.04);
}
.lud-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.lud-col-head i {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* ── Answer copy ──────────────────────────────────────────────────────── */
.lud-say {
  margin: 0;
  font-size: clamp(0.78rem, 0.86vw, 0.86rem);
  line-height: 1.55;
  color: var(--ink-2);
}
.lud-say b {
  color: var(--blue-text);
  font-weight: 600;
}
.lud-say-note {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Legend — says what the four columns are for ──────────────────────── */
.lud-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-text);
  text-align: center;
}
.lud-legend svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .lud-cols { grid-template-columns: repeat(2, 1fr); }
  /* Four-way stems only line up against four columns — leave a single spine */
  .lud-wires { height: clamp(20px, 3.6vw, 28px); }
  .lud-wire-rail, .lud-wire-stems { display: none; }
  .lud-wire-spine { height: 100%; }
}
@media (max-width: 560px) {
  .lud-ask { flex-wrap: wrap; gap: 8px; }
  .lud-ask-text { white-space: normal; flex-basis: 100%; order: 3; }
  .lud-col-head { font-size: 0.56rem; letter-spacing: 0.1em; }
  .lud-say { font-size: 0.8rem; }
}

/* Match the rhythm the screenshot used to hold in the Ludicrous flow */
.pp-models-flow .lud-graphic { margin-top: 0; }
.pp-models-flow .lud-graphic + h3 { margin-top: clamp(20px, 2.4vw, 30px); }

/* Ludicrous section sits on plain white — no tinted panel behind the graphic */
.pp-models--dark { background: #fff; }
.pp-models--dark::before { display: none; }
.pp-models-bg { display: none; }

/* Ludicrous section reads as one centred column */
.pp-models-flow { text-align: center; }
.pp-models-flow h3 .dim { margin-left: auto; margin-right: auto; }
.pp-models-flow .lud-col,
.pp-models-flow .lud-ask-text { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · FEATURE GRID ("Life is complicated enough.")
   Two-up cards: simple MyPA graphic on the left, title + copy on the right,
   arrow that leads into the page the card is about.
   ═══════════════════════════════════════════════════════════════════════ */
.fg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.1vw, 16px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.fg-card {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.2vw, 18px);
  padding: clamp(16px, 1.5vw, 20px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fg-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue-mid);
    box-shadow: 0 18px 44px rgba(10, 15, 28, 0.10);
  }
  .fg-card:hover .fg-media { background: var(--blue); color: #fff; }
}
.fg-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Graphic — flat brand tile, one clear glyph, nothing decorative behind it */
.fg-media {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 3.6vw, 54px);
  height: clamp(46px, 3.6vw, 54px);
  border-radius: 12px;
  background: var(--blue-pale);
  color: var(--blue);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.fg-media svg { width: 48%; height: 48%; }

/* Copy — arrows line up on the card's bottom edge, whatever the copy length */
.fg-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fg-body h3 {
  margin: 0;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.fg-lead {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.fg-desc {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 900px) {
  .fg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fg-card { flex-direction: column; gap: 12px; }
  .fg-media { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-card, .fg-media { transition: none; }
  .fg-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · continuous surface
   No hairlines and no tint/white steps between sections — the section
   boundaries were reading as horizontal borders. One paper, top to bottom.
   ═══════════════════════════════════════════════════════════════════════ */
body.home-page { background: var(--color-paper-2); }
.home-page main > section.surface,
.home-page .trust-band { background: transparent; }
/* Footer keeps its own (blue) surface on the home page too — see SITE FOOTER · BLUE. */
.home-page .site-footer { border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · "One app for everyday life." — graphic left, founder quote right
   The title stays full-width above; the hub shrinks to make room for the
   quote that used to sit in the About-link section.
   ═══════════════════════════════════════════════════════════════════════ */
.everyday-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
  margin-top: clamp(16px, 2vw, 28px);
}
.everyday-stack .everyday-split .radial-diagram {
  width: 100%;
  max-width: 420px;
  margin: 0;            /* sits left in its column, not centred on the page */
}
.everyday-split .qrot { padding-left: clamp(12px, 2vw, 28px); }

@media (max-width: 900px) {
  .everyday-split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
    justify-items: center;
    text-align: center;
  }
  .everyday-stack .everyday-split .radial-diagram { margin: 0 auto; }
  .everyday-split .qrot { padding-left: 0; text-align: left; }
}

/* (Removed 2026-09-01: home-close / everyday-stack / compact spacing overrides
   tuned for the deleted "One app for everyday life" section. Section rhythm on
   the home and apps pages is now governed by the SECTION RHYTHM block at the
   end of this file.) */

/* Each supporting point sits in its own box instead of hanging off a rule.
   Used on the home page's web-app and partner sections. */
.link-facts--boxed { gap: 10px; }
.link-facts--boxed li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   AMBIENT CARD SHADOW
   The app gives every content card a soft lift; the site was flat at rest.
   --shadow-sm is the system's ambient token, so this uses it rather than a
   new value. Hover shadows still win on specificity, so lift states are
   unaffected. Icons, chevrons, image frames and scrolling chips are left
   flat on purpose.
   ═══════════════════════════════════════════════════════════════════════ */
.card,
.step,
.check,
.cap-cell,
.fg-card,
.link-facts--boxed li,
.faq-item,
.principle-card,
.about-hero-tile,
.uc-cta,
.try-model,
.try-chip,
.byo-provider,
.pp-triage-input,
.pp-triage-later,
.privacy-vpn-location,
.login-card-input,
.login-card-prov,
.ludi-branch-engine,
.ludi-targets li,
.why-quad-notify-msg,
.opp-bento-math-term,
.eng-stat,
.flow-mon,
.trust-box,
.trust-aside,
.eng-points,
.share-facts li,
.pp-trust-chips li,
.ba-prompt,
.ba-event,
.ba-opt,
.engine-chip,
/* shared-border panels: the panel itself is the card */
.bento-grid,
.partner-cards,
.partner-types,
.stat-4,
.pp-memory-list,
.pp-feeds-cards,
.pp-compare-table,
.why-quad,
.ed-quad-grid,
.ed-segments-quad,
.ed-acc-list,
.loop-grid,
.nf-grid,
.recv-grid {
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · "On your phone. In your browser." — web app with the phone in front
   Both surfaces in one figure, so the section shows what it claims.
   ═══════════════════════════════════════════════════════════════════════ */
.split-duo {
  position: relative;
  margin: 0;
  padding-bottom: 6%;   /* room for the phone to hang below the browser shot */
}
.split-duo .split-duo-web {
  display: block;
  width: 90%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(10, 15, 28, 0.10);
}
.split-duo .split-duo-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27%;
  height: auto;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 16px 32px rgba(10, 15, 28, 0.22));
}
@media (max-width: 560px) {
  .split-duo .split-duo-web { width: 100%; }
  .split-duo .split-duo-phone { width: 30%; right: -2%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION · full-width top bar
   Was an inset floating pill; now a bar flush to the top edge, spanning the
   viewport, fixed so it is always on screen. The inner row keeps the site
   container width so the links stay aligned with page content.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-pill {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  background: oklch(99% 0.005 250 / 0.9);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav-pill-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px clamp(20px, 4vw, 52px);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 56px;
}
/* Scrolled state firms the bar up rather than shrinking a floating pill */
.nav-pill.scrolled {
  background: oklch(99% 0.005 250 / 0.97);
  box-shadow: 0 1px 16px oklch(15% 0.015 260 / 0.07);
}

@media (max-width: 900px) {
  .nav-pill { width: 100%; top: 0; }
  .nav-pill-inner { padding: 8px clamp(16px, 4vw, 24px); min-height: 52px; }
}
/* One bar width on every page, so the brand, links and CTA never move
   between pages. (Matching each page's own container made the CTA sit at a
   different x on the apps page, which is the drift this is meant to fix.) */
.nav-pill-inner {
  max-width: 1480px;
  padding-left: clamp(20px, 6vw, 96px);
  padding-right: clamp(20px, 6vw, 96px);
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION · fixed positions, page to page
   The link row used to be pushed right by `margin-left: auto`, so its
   position moved with the width of the CTA label ("Download" vs "Become a
   partner") and drifted between pages. It is now centred on the bar itself,
   independent of what sits either side of it.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-pill-inner { position: relative; }
.nav-pill-brand { margin-right: auto; }
.nav-pill-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0;
  white-space: nowrap;
}
.nav-pill-inner .lang-switch { margin-left: auto; }

/* Squared-off CTA and selected-page marker */
.nav-pill-cta,
.nav-pill-links a,
.nav-pill-links a.active { border-radius: 10px; }

@media (max-width: 1340px) {
  /* Below this the centred row would run into the language switch, so the
     links rejoin the flow and the bar spaces itself instead. Raised from 1150
     when Log in joined Sign up in the header (2026-09-10). */
  .nav-pill-links {
    position: static;
    transform: none;
    margin-left: auto;
  }
  .nav-pill-brand { margin-right: 0; }
  .nav-pill-links { gap: 2px; }
  .nav-pill-links a { padding: 7px 10px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  /* Tablet widths: seven links, the language switch and two buttons share
     one row, so everything tightens and the language name drops to its flag. */
  .nav-pill-inner { gap: 10px; padding-left: clamp(14px, 2vw, 24px); padding-right: clamp(14px, 2vw, 24px); }
  .nav-pill-links { gap: 0; }
  .nav-pill-links a { padding: 7px 8px; font-size: 0.84rem; }
  .lang-switch-toggle .lang-switch-label { display: none; }
  .nav-pill-cta { padding: 7px 11px; font-size: 0.84rem; }
  .nav-pill-cta--ghost { padding: 6px 10px; }
}

/* Founder quote sits in a card, like the points it now shares the page with */
.qrot--boxed {
  padding: clamp(22px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.qrot--boxed .qrot-mark { top: 0.02em; left: 0.18em; }


/* ═══════════════════════════════════════════════════════════════════════
   HOME · FOUR POINTS
   Four benefits in a row. Each carries a small built graphic made of real
   labels rather than grey bars, so it reads as a specific everyday moment
   without showing the product itself.
   ═══════════════════════════════════════════════════════════════════════ */
.pnt-grid {
  list-style: none;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  text-align: left;
}
.pnt {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
/* Bullets, not icons: the labels carry the meaning on their own */
.pnt-bul {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--blue);
}

/* 2 · what you said, and what came back */
.pnt-said {
  align-self: flex-end;
  max-width: 92%;
  padding: 8px 11px;
  background: var(--blue);
  border-radius: 12px 12px 4px 12px;
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}

@media (max-width: 900px) { .pnt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pnt-grid { grid-template-columns: 1fr; } }
/* More air between the nav links; they are centred, so the row grows evenly
   from the middle and the brand and CTA stay pinned to the edges. */
.nav-pill-links { gap: clamp(2px, 1vw, 16px); }
.nav-pill-links a { padding: 7px 14px; }



/* ═══════════════════════════════════════════════════════════════════════
   HOME · FLOATING-ICONS HERO (2026-09-01)
   Centred headline with the apps MyPA connects to (and replaces) drifting
   around it as glassy tiles. Tiles idle on a slow drift loop and shy away
   from the cursor (spring physics in main.js, [data-hero-float]).
   ═══════════════════════════════════════════════════════════════════════ */
.hero-float {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  /* Taller stage; the copy keeps its size — only the canvas grows. The
     background matches the page paper exactly (no gradient band) and both
     joins are explicitly borderless so no seam can appear below it. */
  min-height: clamp(760px, 102vh, 1060px);
  padding: clamp(128px, 15vh, 200px) 0 clamp(96px, 12vh, 160px);
  background: var(--color-paper-2);
  border: 0;
}
.home-does { border-top: 0; }
/* The blue radial glow behind the headline was removed on 2026-09-04. The
   hero now sits on flat paper, matching the rest of the page, so there is no
   ::before layer here at all. */
.hero-float > .container { position: relative; z-index: 2; width: 100%; }
.hero-float-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-float .hero-marquee-headline { max-width: none; }
.hero-float .hero-marquee-lead { margin-left: auto; margin-right: auto; max-width: 48ch; }
.hero-float .hero-marquee-cta { justify-content: center; }

/* The icon field sits behind the copy; tiles never catch the pointer. */
.hero-float-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hf-ic { position: absolute; will-change: transform; }
.js-on .hf-ic {
  opacity: 0;
  /* scale is its own property here so the entrance never fights the JS
     transform on the same element */
  animation: hf-appear 0.7s var(--ease-out-expo) forwards;
  animation-delay: calc(140ms + var(--i) * 70ms);
}
@keyframes hf-appear {
  from { opacity: 0; scale: 0.5; }
  to   { opacity: 1; scale: 1; }
}
.hf-ic-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(54px, 5.2vw, 76px);
  height: clamp(54px, 5.2vw, 76px);
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hf-drift ease-in-out infinite;
  animation-duration: calc(6.5s + var(--i) * 0.6s);
  animation-delay: calc(var(--i) * -1.35s);
}
.hf-ic-tile img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}
@keyframes hf-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(6px, -8px) rotate(3.5deg); }
  50%  { transform: translate(0, 0) rotate(0deg); }
  75%  { transform: translate(-6px, 8px) rotate(-3.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@media (max-width: 760px) {
  .hf-ic--desk { display: none; }
  .hero-float { min-height: clamp(560px, 88vh, 720px); padding-top: 96px; }
  .hf-ic-tile { width: 48px; height: 48px; }
  /* The shorter mobile stage pulls the CTA row down; the fourth tile
     (ChatGPT) drops to the bottom corner so it never sits behind a button */
  /* top and left are cleared as well: since the 2026-09-04 swap the fourth
     tile carries a top/left inline pair, and without this it would keep them
     and sit half off the left edge. */
  .hero-float-field .hf-ic:nth-child(4) {
    top: auto !important;
    left: auto !important;
    bottom: 3% !important;
    right: 6% !important;
  }
  /* Claude and the penguin traded places on the desktop field (2026-09-04).
     Claude's new spot sits mid-left, which on a phone lands behind the
     headline, so the tenth tile keeps the low-right corner it had before. */
  .hero-float-field .hf-ic:nth-child(10) {
    top: 88% !important;
    left: 66% !important;
    right: auto !important;
    bottom: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hf-ic-tile { animation: none; }
  .js-on .hf-ic { animation: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · "Life is complicated enough." — text left, capability hub right
   Replaces the four point boxes; the hub graphic moved up from the removed
   "One app for everyday life." section. Still links to the apps page.
   ═══════════════════════════════════════════════════════════════════════ */
.home-does-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
}
.home-does-text h2 { margin: 0 0 clamp(22px, 2.6vw, 32px); max-width: 15ch; }

/* Three outcome points, each in its own box, Font Awesome glyph in a blue tile */
.does-points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}
.does-points li {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.does-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
}
.does-ic svg { width: 18px; height: 18px; }
.does-point-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.does-point-txt strong {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-does-split .radial-diagram {
  width: 100%;
  max-width: 520px;
  margin: 0 0 0 auto;
}
@media (max-width: 900px) {
  .home-does-split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .home-does-split .radial-diagram { margin: 0 auto; max-width: 440px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE FOOTER · BLUE (2026-09-01, all pages)
   Brand-blue surface, statement line removed; every piece of footer text
   flips to white/near-white.
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--blue);
  border-top: 0;
  padding: clamp(48px, 6vw, 80px) 0 clamp(28px, 3.6vw, 44px);
}
.site-footer-statement { display: none; }
.site-footer-nav { border-bottom-color: rgba(255,255,255,0.3); }
.site-footer-nav a { color: #fff; }
.site-footer-nav a:hover { color: rgba(255,255,255,0.72); }
.site-footer-disclaimer {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.3);
}
.site-footer-address { color: rgba(255,255,255,0.88); }
.site-footer-legal { color: rgba(255,255,255,0.88); }
.site-footer-legal a { color: rgba(255,255,255,0.88); }
.site-footer-legal a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   APPS PAGE · continuous surface (2026-09-01)
   Same treatment as the home page: one paper top to bottom, no hairlines
   or tint/white steps between sections.
   ═══════════════════════════════════════════════════════════════════════ */
body.product-page { background: var(--color-paper-2); }
.product-page #features,
.product-page .conn-section,
.product-page .pp-realworld,
.product-page .pp-howitworks,
.product-page .pp-feeds,
.product-page .faq-section,
.product-page .pp-models--dark {
  background: transparent;
  border-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · ambient shadow parity (2026-09-01)
   The partner boxes adopted the product-page box language but stayed flat
   at rest; this gives them the same --shadow-sm ambient lift the home and
   apps page boxes carry.
   ═══════════════════════════════════════════════════════════════════════ */
.eng-chart,
.stat-trio-item,
.stream-cell,
.ladder li,
.rule-col,
.home-pitch--flip .home-pitch-row {
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════════════════════════
   APPS PAGE · BUILT CELL GRAPHICS v2 (2026-09-01)
   Faithful HTML/CSS recreations of the app screens the cells used to show
   as screenshots: the web-app booking chat, the "Choose model" sheet, the
   "Tap an Expert" chips and the Image & Video Creator style library.
   Also used on partners.html for the Tokens top-up sheet and the
   switching-deal chat.
   ═══════════════════════════════════════════════════════════════════════ */
.cap-visual--art {
  inset: 0;
  bottom: clamp(78px, 7.5vw, 96px);
  display: flex;
  align-items: flex-start;
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px) 0;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%);
          mask-image: linear-gradient(to top, transparent 0%, #000 14%);
}
.capg {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font);
}

/* ── Booking chat (wide "Plan the trip" cell) — mirrors webapp-booking-chat ── */
.capg-chat { max-width: 720px; gap: 12px; }
.capg-bub {
  align-self: flex-end;
  max-width: 34ch;
  padding: 10px 14px;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.capg-reply {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.capg-reply-logo { width: 22px; height: 22px; object-fit: contain; }
.capg-reply p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink);
}
.capg-flight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-left: 31px;
}
.capg-flight p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.capg-choose {
  display: inline-block;
  padding: 7px 15px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ── "Choose model" sheet — mirrors screen-choose-model ─────────────────── */
.capg-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: clamp(14px, 1.5vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.capg-sheet-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.capg-sheet-sub {
  margin: -4px 0 2px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}
.capg-mrow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.capg-mrow.is-sel { background: var(--blue-pale); }
.capg-mic { display: grid; place-items: center; width: 24px; height: 24px; }
.capg-mic img { width: 17px; height: 17px; object-fit: contain; }
.capg-mic--smart { color: var(--blue); }
.capg-mic--smart svg { width: 19px; height: 19px; }
.capg-mtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.capg-mtxt b {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.capg-mtxt b u {
  text-decoration: none;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #FFC107;
  border-radius: 999px;
  padding: 2px 7px;
}
.capg-mtxt i {
  font-style: normal;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.capg-radio {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  border: 1.5px solid #C9CFDB;
  background: #fff;
}
.capg-radio.is-on {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── "Tap an Expert" chips — mirrors screen-experts ─────────────────────── */
.capg-experts { gap: 12px; }
.capg-experts-title {
  margin: 0;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.capg-echips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}
.capg-echips span {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* ── Image & Video Creator styles — mirrors screen-image-creator ────────── */
.capg-creator { gap: 8px; }
.capg-creator-title {
  margin: 0 0 2px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.capg-creator-label {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
}
.capg-styles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.capg-style {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.capg-style i {
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 20, 28, 0.72);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* One line fits the English preset names but not the longer translations, so
   German lost the end of "Tuschezeichnung" to the ellipsis. Same treatment the
   hero headline gets: let them wrap rather than truncate (2026-09-04). */
html:not([lang="en"]) .capg-style i {
  white-space: normal;
  line-height: 1.2;
  /* A German compound such as "Tuschezeichnung" is one unbreakable word and
     was 4px wider than the chip. It hyphenates on the page's own language
     rather than dropping to an unreadable size (2026-09-04). */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.capg-style--sketch { background: linear-gradient(150deg, #F6F7F9 0%, #DDE0E6 55%, #C4C9D2 100%); }
.capg-style--inkart { background: linear-gradient(150deg, #F2F3F5 0%, #A7ADB8 60%, #3C414C 100%); }
.capg-style--water  { background:
  radial-gradient(80% 70% at 22% 24%, rgba(255,183,178,0.75), transparent 60%),
  radial-gradient(75% 70% at 78% 36%, rgba(168,205,255,0.7), transparent 62%),
  radial-gradient(85% 75% at 50% 86%, rgba(255,231,166,0.7), transparent 65%),
  #FCFAF6; }
.capg-style--cine  { background: linear-gradient(150deg, #55635A 0%, #2C3833 55%, #131A17 100%); }
.capg-style--noir  { background: linear-gradient(150deg, #83868D 0%, #45474D 55%, #17181C 100%); }
.capg-style--moody { background: linear-gradient(150deg, #55463A 0%, #33291F 55%, #151110 100%); }

/* ── Partners · Tokens top-up sheet — mirrors rev-tokens ────────────────── */
.capg-topup .capg-sheet-sub { margin-bottom: 4px; }
.capg-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.capg-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 12px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capg-pack .capg-radio { position: absolute; top: 8px; right: 8px; }
.capg-pack b { font-size: 0.86rem; font-weight: 700; color: var(--blue); }
.capg-pack i { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.capg-pack.is-sel { background: var(--blue-pale); border-color: var(--blue); }
.capg-pack u {
  position: absolute;
  top: -6px;      /* straddles the pack's top edge, clear of the token label (2026-09-02) */
  left: 10px;
  text-decoration: none;
  font-size: 0.56rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border-radius: 5px;
  padding: 2px 6px;
}
.capg-topup-btn {
  display: block;
  text-align: center;
  padding: 11px 0;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ── Partners · switching-deal chat — mirrors rev-switching ─────────────── */
.capg-switch { gap: 12px; }
.capg-bub--sm { font-size: 0.78rem; max-width: 30ch; }
.capg-deal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capg-deal b { font-size: 0.84rem; font-weight: 700; color: var(--blue-text); }
.capg-deal i { font-style: normal; font-size: 0.74rem; line-height: 1.45; color: var(--ink-2); }
.capg-deal u {
  text-decoration: none;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue-text);
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · "Who it is for" — four static boxes (replaces the accordion)
   ═══════════════════════════════════════════════════════════════════════ */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.seg-card {
  padding: clamp(20px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.seg-card:hover { border-color: var(--blue-mid); box-shadow: 0 12px 28px rgba(30,144,255,.10); }
.seg-card h3 {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.seg-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 720px) { .seg-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG (2026-09-01) — listing page + post template
   Same box language as the rest of the site: white cards, 1px lines,
   12px radius, ambient --shadow-sm, blue accents, one continuous paper.
   ═══════════════════════════════════════════════════════════════════════ */
body.blog-page { background: var(--color-paper-2); }

.blog-hero { padding: clamp(120px, 14vh, 176px) 0 0; }
.blog-hero .section-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.blog-hero-title {
  margin: 6px 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 18ch;
}
.blog-hero .section-head p { margin-top: 16px; max-width: 52ch; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.blog-card:hover {
  border-color: var(--blue-mid);
  box-shadow: 0 14px 32px rgba(30,144,255,.10);
  transform: translateY(-3px);
}
.blog-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder fill until a real 1600x900 image is added */
.blog-card-media--ph {
  background:
    radial-gradient(90% 120% at 14% 0%, rgba(30,144,255,0.22), transparent 55%),
    radial-gradient(110% 130% at 88% 100%, rgba(75,166,255,0.28), transparent 60%),
    linear-gradient(135deg, var(--blue-pale), var(--blue-mid));
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 1.8vw, 22px);
  flex: 1;
}
.blog-card-meta {
  font-size: 0.74rem;
  color: var(--muted);
}
.blog-card-meta b { font-weight: 700; color: var(--blue-text); }
.blog-card-body h3 , .blog-card-body h2{
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.blog-card-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.blog-card-more {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--blue-text);
}
.blog-card-more span { display: inline-block; transition: transform .25s var(--ease-out); }
.blog-card:hover .blog-card-more span { transform: translateX(4px); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── Post template ──────────────────────────────────────────────────────── */
.post { padding: clamp(120px, 14vh, 176px) 0 clamp(64px, 8vw, 104px); }
.post .container { max-width: 840px; }
.post-back {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--blue-text);
  text-decoration: none;
}
.post-back:hover { text-decoration: underline; }
.post-head .blog-card-meta { display: block; margin-bottom: 12px; }
.post-head h1 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 24ch;
}
.post-lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}
.post-figure {
  margin: clamp(28px, 3.5vw, 40px) 0;
}
.post-figure img,
.post-figure .blog-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.post-figure figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}
.post-body {
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 68ch;
}
.post-body p { margin: 0 0 1.2em; }
.post-body h2 {
  margin: 1.8em 0 0.6em;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.post-body h3 {
  margin: 1.5em 0 0.5em;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.post-body ul,
.post-body ol { margin: 0 0 1.2em; padding-left: 1.2em; }
.post-body li { margin-bottom: 0.4em; }
.post-body a { color: var(--blue-text); }
.post-quote {
  position: relative;
  margin: 1.6em 0;
  padding: 18px 22px 18px 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.post-quote::before {
  content: '\201C';
  position: absolute;
  left: 18px;
  top: 6px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blue);
}
.post-quote p {
  margin: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--ink);
}
.post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(36px, 4.5vw, 56px);
  padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid var(--line);
  /* the generic `footer` rule paints white + big padding; neutralise it here */
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 4 TWEAKS (2026-09-01)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hub graphic: node glyphs are now Font Awesome fills (main.js .ic-fa) */
.radial-diagram .ic-fa { fill: var(--blue); }

/* APPS · "Less to think about." — text left, six compact boxes 3×2 right */
.feeds-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.feeds-split .fg-grid { max-width: 740px; justify-self: end; }
.feeds-split .section-head { margin-bottom: 0; }
.feeds-split .fg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}
/* Smaller cards: glyph above the copy, tighter type */
.feeds-split .fg-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 16px;
}
.feeds-split .fg-media { width: 36px; height: 36px; }
.feeds-split .fg-body h3 { font-size: 0.92rem; }
.feeds-split .fg-lead { margin-top: 4px; font-size: 0.78rem; line-height: 1.45; }
@media (max-width: 900px) {
  .feeds-split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .feeds-split .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .feeds-split .fg-grid { grid-template-columns: 1fr; }
}

/* APPS · "The best AIs, working together." — graphic left, text right */
.models-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.models-split .lud-graphic { margin-top: 0; }
.models-split .lud-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.models-copy h2 { margin: 0 0 16px; }
.models-copy > p {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.65;
}
.models-copy h3 {
  font-size: clamp(1.18rem, 1.5vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.models-copy h3 .dim {
  display: block;
  margin-top: 10px;
  max-width: 52ch;
  color: var(--ink-2);
  font-weight: 400;
  font-size: clamp(0.92rem, 1.04vw, 1rem);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .models-split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .models-split .models-copy { order: -1; }
}

/* PARTNERS · trust band — brand marks + larger names */
.trust-label { font-size: 0.74rem; }
.trust-names {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  gap: 0;
}
.trust-name { display: inline-flex; align-items: center; gap: 11px; }
.trust-name img { width: 26px; height: 26px; object-fit: contain; }
.trust-name--blokk { letter-spacing: 0.02em; }
.trust-names i { margin: 0 clamp(14px, 2vw, 26px); }

/* PARTNERS · continuous surface — no hairlines or tone steps between
   sections, matching the home and apps pages. One paper, top to bottom. */
body.partners-page { background: var(--color-paper-2); }
.partners-page .ed-hero,
.partners-page .trust-band,
.partners-page .stat-trio,
.partners-page .home-pitch,
.partners-page .eng-section,
.partners-page .rev-shader-section,
.partners-page .share-section,
.partners-page .ed-segments,
.partners-page .recv-section,
.partners-page .yield-section,
.partners-page .faq-section,
.partners-page .process-section,
.partners-page .ed-close {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   APPS · "The app that handles the apps." — icons left, text right
   The icon cloud shrinks so the split stays inside the standard width.
   ═══════════════════════════════════════════════════════════════════════ */
/* Match the bento section above (its container is 1400px; the page default
   is 1480px, which made this section run slightly wider than its neighbours) */
.product-page .conn-section .container { max-width: 1400px; }
.conn-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.conn-split .section-head { margin-bottom: 0; }
.conn-split .section-head h2,
.conn-split .section-head p { max-width: none; }
/* Title holds on one line; the size is capped so it never wraps */
.conn-split .section-head h2 {
  white-space: nowrap;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
}
/* 14 icons in a strict 7 × 2 grid — square tiles fill their cells so the
   spacing is identical horizontally and vertically */
.conn-split .conn-static {
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.conn-split .conn-static .conn-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.conn-split .conn-word { font-size: 0.78rem; }
@media (max-width: 900px) {
  .conn-split { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .conn-split .section-head { order: -1; }
  .conn-split .conn-static { justify-items: center; }
}
@media (max-width: 560px) {
  .conn-split .section-head h2 { white-space: normal; }
  .conn-split .conn-static { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION RHYTHM · home + apps (2026-09-01, impeccable layout pass)
   Both pages are one continuous paper, so the perceived gap between two
   blocks is A's bottom padding plus B's top padding. The tight/default/
   loose classes were tuned for alternating surfaces and now produce gaps
   from ~120px to ~256px on the same page. One shared half-gap on every
   section makes every boundary identical; the heroes and the closing CTA
   keep their own deliberate exceptions, re-asserted below.
   ═══════════════════════════════════════════════════════════════════════ */
/* Half-gaps: two of these meet at every boundary, giving 112-160px between
   major sections at desktop (the master-brief target of 120-160px). */
.home-page main > section,
.product-page main > section,
.partners-page main > section {
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
/* The partners hero manages its own padding on its container */
.partners-page main > section.ed-hero { padding: 0; }
/* Sections whose own higher-specificity paddings would fight the rhythm */
.partners-page main > section.rev-shader-section,
.partners-page main > section.share-section {
  padding: clamp(56px, 6vw, 80px) 0;
}
.partners-page .eng-section--lowered .section-head { padding-top: 0; }

/* Heroes keep their stage-setting space (they sit under the fixed nav);
   a touch more air under each hero before the first section. */
.home-page main > section.hero-float {
  padding-top: clamp(128px, 15vh, 200px);
  /* Matches the shared half-gap: hero → bridge lands at ~140-160px clear */
  padding-bottom: clamp(56px, 6vw, 80px);
}
.product-page main > section.hero-quote {
  padding-top: clamp(96px, 10vw, 140px);
  /* The prompt carousel sits right under the hero */
  padding-bottom: clamp(20px, 2.5vw, 36px);
}

/* One container width on the whole apps page (was a mix of 1480/1440/1400) */
.product-page .container,
.product-page .pp-realworld > .container { max-width: 1400px; }

/* The connections section used a negative tuck under the old centred bento;
   as a split it joins the shared rhythm like everything else. */
.product-page .conn-section { margin-top: 0; }

/* The closing offer earns extra air before the footer, nowhere else */
.home-page main > section.home-close,
.product-page main > section.loose {
  padding-bottom: clamp(72px, 9vw, 128px);
}
/* Apps: the closing offer sits closer to the FAQs above it */
.product-page .faq-section { padding-bottom: clamp(28px, 3.5vw, 48px); }
.product-page main > section.loose { padding-top: clamp(28px, 3.5vw, 48px); }

/* ─── Heading-scale consistency ─────────────────────────────────────────
   Every section-level heading on the apps page sits on the same scale.
   The connections h2 stays capped only as far as its one-line constraint
   requires; the expert-triage heading joins the standard section scale. */
.conn-split .section-head h2 { font-size: clamp(1.5rem, 2.7vw, 2.3rem); }
.pp-triage-copy h3 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════════════════════
   TITLES · no blue, no italic (2026-09-01, user rule)
   The .serif accent word inside headings previously rendered as blue
   italic 300. Titles now read as one voice: same colour, same posture.
   !important intentionally beats every scoped .serif variant.
   ═══════════════════════════════════════════════════════════════════════ */
h1 .serif, h2 .serif, h3 .serif, h4 .serif,
.hero-marquee-headline .serif,
.blog-hero-title .serif,
.engine-panel-note .serif {
  font-style: normal !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Home hero: "Get your time back." on one line, sub-line in ink, upright */
.hero-marquee-line-3 {
  font-style: normal;
  font-weight: 500;
  color: var(--color-ink-2);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: -0.025em;
  margin-top: 0.35em;
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · round 5 (2026-09-01)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero joins the trust band a little sooner, and sits a touch higher */
.partners-page--editorial .ed-hero > .container {
  padding-top: clamp(36px, 4.2vw, 60px);
  padding-bottom: clamp(20px, 2.6vw, 36px);
}

/* Real BLOKK wordmark in the trust band (beats the generic 26px icon rule) */
.trust-name img.trust-blokk { height: 24px; width: auto; display: block; }

/* Pitch video: just the phone, no box (multiply hides its light backdrop) */
.home-pitch--flip .pitch-figure {
  border-radius: 0;
  overflow: visible;
  height: auto;
  min-height: 0;
  align-self: center;
}
.home-pitch--flip .pitch-figure video {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .home-pitch--flip .pitch-figure { aspect-ratio: auto; }
}

/* ── How it goes live · numbered icon step cards (21st @7ovr/how-it-works-1) ── */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hiw-card {
  position: relative;
  padding: clamp(20px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.hiw-card:hover { border-color: var(--blue-mid); box-shadow: 0 12px 28px rgba(30,144,255,.10); }
.hiw-num {
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  right: clamp(16px, 1.8vw, 22px);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-text);
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  border-radius: 999px;
  padding: 3px 9px;
}
.hiw-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
  margin-bottom: 16px;
}
.hiw-ic svg { width: 19px; height: 19px; }
.hiw-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hiw-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 980px) { .hiw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hiw-grid { grid-template-columns: 1fr; } }

/* ── Contact CTA · one box: copy left, form right (21st @meschacirung/contact-form) ── */
.pcta-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 3.6vw, 56px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.pcta-copy .label { display: none; }
.pcta-copy h2 { margin: 0 0 14px; }
.pcta-copy > p {
  margin: 0 0 22px;
  max-width: 44ch;
  line-height: 1.65;
}
.pcta-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pcta-points li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* Check glyph: these are things the partner gets, not decoration */
.pcta-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 15px;
  height: 15px;
  background-color: var(--blue);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') center / contain no-repeat;
}
.pcta-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pcta-field { display: flex; flex-direction: column; gap: 6px; }
.pcta-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.pcta-field input,
.pcta-field textarea {
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.pcta-field textarea { resize: vertical; min-height: 96px; }
.pcta-field input:focus-visible,
.pcta-field textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.14);
}
.pcta-form .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 900px) {
  .pcta-card { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 6 · simple UI (2026-09-01)
   ═══════════════════════════════════════════════════════════════════════ */

/* No eyebrow labels anywhere: headings stand on their own */
.label { display: none; }

/* Partners: stats sit closer to "What MyPA can do for your company" */
.partners-page .stat-trio { padding-bottom: clamp(28px, 3.5vw, 48px); }
.partners-page .home-pitch { padding-top: clamp(28px, 3.5vw, 48px); }

/* Pitch section: no figure any more — the four rows read 2×2 full width */
.home-pitch--flip .pitch-grid { grid-template-columns: 1fr; }
.home-pitch--flip .home-pitch-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .home-pitch--flip .home-pitch-rows { grid-template-columns: 1fr; }
}

/* What you receive: the branded-phone video, straight on the page surface */
.recv-figure video {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border: 0;
  border-radius: 0;
  /* Push the clip's near-white backdrop to pure white, then multiply melts
     it into the paper — no box, just the phone. */
  filter: brightness(1.08) contrast(1.02);
  mix-blend-mode: multiply;
}

/* Partner form success state (mirrors the contact page) */
.pcta-success {
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: 12px;
  padding: 24px 26px;
}
.pcta-success strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.pcta-success p { margin: 0; color: var(--ink-2); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · PARTNER BAND (2026-09-01, tasteskill pass)
   The conversion moment breaks the run of image+text splits: one wide box,
   centred head, three facts across, one CTA.
   ═══════════════════════════════════════════════════════════════════════ */
.partner-band {
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3.5vw, 56px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.partner-band .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.partner-band .section-head p { max-width: 62ch; }
.partner-band-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0;
  list-style: none;
}
/* Internal cells, not nested cards: tint instead of border+shadow */
.partner-band-facts li {
  background: var(--bg-tint);
  border: 0;
  box-shadow: none;
  padding: 16px 18px;
  border-radius: 12px;
}
.partner-band .try-cta-actions { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .partner-band-facts { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MASTER-BRIEF PASS (2026-09-01)
   Bridge section, standalone apps feature sections, partners spatial pass.
   ═══════════════════════════════════════════════════════════════════════ */

/* Section heads hold their content tighter; the big air lives BETWEEN sections */
.home-page .section-head,
.product-page .section-head,
.partners-page .section-head {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* ── HOME · bridge: "One place to get life done." ──────────────────────── */
.bridge-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.bridge-text h2 { margin: 0 0 14px; max-width: 16ch; }
.bridge-lead {
  margin: 0 0 20px;
  max-width: 44ch;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.65;
}
.bridge-verbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bridge-verbs span { display: inline-flex; align-items: center; gap: 10px; }
.bridge-verbs span:not(:first-child)::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-mid);
}

/* Intent → MyPA → Outcome, one connected flow */
.bridge-flow {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: flex-end;
}
.bridge-ask {
  flex-shrink: 1;
  max-width: 21ch;
  padding: 12px 16px;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.bridge-rail {
  flex: 0 0 clamp(20px, 2.4vw, 40px);
  height: 2px;
  background: var(--blue-mid);
}
.bridge-hub {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.bridge-hub img { width: clamp(56px, 5vw, 72px); height: auto; display: block; }
.bridge-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bridge-outcomes li {
  position: relative;
  padding: 9px 14px 9px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.bridge-outcomes li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--blue);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') center / contain no-repeat;
}
/* Outcomes land one after another once the flow scrolls in */
.js-on .bridge-flow .bridge-outcomes li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js-on .bridge-flow.is-in .bridge-outcomes li { opacity: 1; transform: none; }
.js-on .bridge-flow.is-in .bridge-outcomes li:nth-child(1) { transition-delay: .25s; }
.js-on .bridge-flow.is-in .bridge-outcomes li:nth-child(2) { transition-delay: .45s; }
.js-on .bridge-flow.is-in .bridge-outcomes li:nth-child(3) { transition-delay: .65s; }
.js-on .bridge-flow.is-in .bridge-outcomes li:nth-child(4) { transition-delay: .85s; }
@media (prefers-reduced-motion: reduce) {
  .js-on .bridge-flow .bridge-outcomes li { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .bridge-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .bridge-flow { flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; }
  .bridge-rail { flex-basis: auto; width: 2px; height: 24px; }
  .bridge-outcomes { width: min(320px, 100%); }
  .bridge-outcomes li { white-space: normal; }
}

/* ── APPS · standalone feature sections (from the dismantled bento) ────── */
.feat-intro .section-head { margin-bottom: 0; }
.feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.feat--flip .feat-text { order: 2; }
.feat--flip .feat-graphic { order: 1; }
.feat-text h2 { margin: 0 0 14px; max-width: 18ch; }
.feat-lead {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.65;
}
.feat-graphic { display: flex; justify-content: center; min-width: 0; }
.cap-lottie--feat { width: min(500px, 100%); }
/* The built graphics scale up out of the bento: same UI, more room */
.feat-graphic .capg--feat { zoom: 1.18; }
.feat-graphic .capg-chat { max-width: 540px; width: 100%; }
.feat-graphic .capg-creator { max-width: 440px; width: 100%; }
.feat-voice { max-width: min(360px, 100%); height: auto; }
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .feat--flip .feat-text { order: 0; }
  .feat--flip .feat-graphic { order: 1; }
  .feat-graphic .capg--feat { zoom: 1; }
}

/* ── PARTNERS · spatial pass ───────────────────────────────────────────── */

/* Stats stand on the page as numbers, not three identical cards */
.partners-page .stat-trio-list { gap: clamp(32px, 4vw, 64px); }
.partners-page .stat-trio-item {
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 0 0;
}
.partners-page .stat-trio-item::before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--blue);
}
.partners-page .stat-trio-item:hover {
  border-color: var(--ink);
  background: transparent;
  box-shadow: none;
}

/* "What MyPA can do for your company": open rows, no boxes */
.home-pitch--flip .home-pitch-row,
.home-pitch--flip .home-pitch-row:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.home-pitch--flip .home-pitch-rows {
  gap: clamp(28px, 3.5vw, 44px) clamp(32px, 4vw, 64px);
}

/* Engagement: the chart is the focus; reference stats sit open beside it,
   only the MyPA target keeps its highlighted surface */
.eng-stat {
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  padding: 12px 0 0;
}
.eng-stat--target {
  border: 1px solid var(--blue-mid);
  border-radius: 12px;
  background: var(--blue-pale);
  box-shadow: var(--shadow-sm) !important;
  padding: 18px 20px;
}

/* Streams: same surfaces, less tower */
.cap-bento--streams .cap-cell--half { min-height: clamp(320px, 25vw, 390px); }

/* 50/50 gets more presence */
.share-grid { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); }
.share-ring-wrap { max-width: 440px; }

/* Partner types: compact */
.seg-card { padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); }
.seg-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.seg-card p { font-size: 0.9rem; }

/* Everything you need to launch: the phone earns more of the row */
.recv-layout { grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr); }
.recv-figure video { max-width: 400px; }
/* The intro head keeps its centring despite the legacy #features ID rules */
.feat-intro#features .section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.feat-intro#features .section-head h2,
.feat-intro#features .section-head p {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   BRIDGE v2 (2026-09-01) — one real MyPA interaction as the focal object.
   Narrower column than the sections around it: broad hero → focused
   explanation → broad product story.
   ═══════════════════════════════════════════════════════════════════════ */
.bridge-inner { max-width: 880px; margin: 0 auto; }
.bridge-head { margin-bottom: clamp(28px, 3.5vw, 40px); }
.bridge-head p { max-width: 52ch; }

/* The conversation panel: real MyPA UI, the section's visual focus */
.bridge-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  padding: clamp(22px, 2.8vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.bridge-card .bridge-ask {
  align-self: flex-end;
  max-width: 24ch;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.bridge-reply {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.bridge-reply-logo { width: 24px; height: 24px; object-fit: contain; }
.bridge-reply p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.45;
}
.bridge-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bridge-actions li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.bridge-action-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
}
.bridge-action-ic svg { width: 17px; height: 17px; }
.bridge-action-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bridge-action-txt b {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bridge-action-txt i {
  font-style: normal;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}
/* Trust green: completion only, which is exactly what this is */
.bridge-done {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803D;
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 4px 10px;
}
/* Reply and actions land in sequence once the panel scrolls in */
.js-on .bridge-card .bridge-reply,
.js-on .bridge-card .bridge-actions li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js-on .bridge-card.is-in .bridge-reply,
.js-on .bridge-card.is-in .bridge-actions li { opacity: 1; transform: none; }
.js-on .bridge-card.is-in .bridge-reply { transition-delay: .3s; }
.js-on .bridge-card.is-in .bridge-actions li:nth-child(1) { transition-delay: .55s; }
.js-on .bridge-card.is-in .bridge-actions li:nth-child(2) { transition-delay: .75s; }
.js-on .bridge-card.is-in .bridge-actions li:nth-child(3) { transition-delay: .95s; }
@media (prefers-reduced-motion: reduce) {
  .js-on .bridge-card .bridge-reply,
  .js-on .bridge-card .bridge-actions li { opacity: 1; transform: none; transition: none; }
}
.bridge-inner .bridge-verbs { justify-content: center; }
@media (max-width: 560px) {
  .bridge-actions li { grid-template-columns: 36px minmax(0, 1fr); }
  .bridge-actions li .bridge-done { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   APPS · ONE VISUAL SYSTEM for the seven feature chapters (2026-09-01)
   Same grid (45% text / 55% visual), same graphic footprint, same text
   widths, same section height, same once-on-scroll product animation.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared grid + section height */
.feat-grid,
.pp-triage,
.howit-split,
.conn-split {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  min-height: clamp(360px, 32vw, 440px);
}
/* Graphic-first rows keep the same tracks, mirrored */
.feat--flip .feat-grid,
.conn-split { grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr); }
.pp-triage { max-width: none; padding: 0; justify-content: stretch; margin: 0; }
.howit-split .section-head { margin-bottom: 0; }

/* Shared text measure */
.feat-text h2 { max-width: 15ch; }
.feat-text h2,
.pp-triage-copy h3,
.howit-split .section-head h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.feat-lead,
.pp-triage-lede,
.howit-split .section-head p,
.conn-split .section-head p {
  max-width: 420px;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.65;
}
.pp-triage-lede { margin-top: 16px; }
/* The connections title keeps its one-line constraint */
.conn-split .section-head h2 { font-size: clamp(1.5rem, 2.7vw, 2.3rem); white-space: nowrap; }

/* Shared graphic footprint: every visual sits centred in the same stage */
.feat-graphic {
  justify-self: center;
  width: 100%;
  max-width: 560px;
  min-height: clamp(320px, 28vw, 400px);
  display: grid;
  place-items: center;
}
.cap-lottie--feat { width: min(480px, 100%); }
#deals-intro-lottie.cap-lottie--feat { width: min(400px, 100%); }
/* ONE width for every built graphic: with the shared zoom every visual
   renders ~515px wide, so every graphic column carries identical insets
   and all seven visuals read as the same object size. */
.feat-graphic .capg {
  zoom: 1.12;
  width: 460px;
  max-width: 100%;
}
.capg-askdemo { gap: 12px; }
.capg-askdemo .capg-bub { align-self: flex-end; }
/* Slightly more generous internals on the lighter demos so all seven
   visuals land in the same height band */
.feat-graphic .capg--feat { gap: 14px; }
.feat-graphic .capg--feat .capg-deal,
.feat-graphic .capg--feat .capg-draft { padding: 16px 18px; gap: 5px; }
/* Expert scene scales to the same rendered width (620 × 0.72 ≈ 446px) */
.pp-triage-scene { zoom: 0.72; justify-self: center; }

/* One animation philosophy: the product state lands once, on scroll.
   (The Inbox and Deal intros animate natively at a matching pace.) */
.js-on .feat-graphic.reveal .capg--feat:not(.capg-model) > *,
.js-on .feat-graphic.reveal .capg-model .capg-sheet > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *,
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > * {
  opacity: 1;
  transform: none;
}
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *:nth-child(1),
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(1) { transition-delay: .15s; }
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *:nth-child(2),
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(2) { transition-delay: .3s; }
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *:nth-child(3),
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(3) { transition-delay: .45s; }
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *:nth-child(4),
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(4) { transition-delay: .6s; }
.js-on .feat-graphic.reveal.is-in .capg--feat:not(.capg-model) > *:nth-child(5),
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(5) { transition-delay: .75s; }
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(6) { transition-delay: .9s; }
.js-on .feat-graphic.reveal.is-in .capg-model .capg-sheet > *:nth-child(7) { transition-delay: 1.05s; }
@media (prefers-reduced-motion: reduce) {
  .js-on .feat-graphic.reveal .capg--feat:not(.capg-model) > *,
  .js-on .feat-graphic.reveal .capg-model .capg-sheet > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .feat-grid,
  .feat--flip .feat-grid,
  .pp-triage,
  .howit-split,
  .conn-split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
    min-height: 0;
  }
  .feat-graphic .capg { zoom: 1; }
  .pp-triage-scene { zoom: 0.62; }
  .conn-split .section-head h2 { white-space: normal; }
}
/* Inbox draft card + deal demo (system-consistent replacements for the
   tall Lottie intros; same conversation language as the other chapters) */
.feat-graphic .capg-inboxdemo,
.feat-graphic .capg-dealdemo { max-width: 460px; }
.capg-inboxdemo, .capg-dealdemo { gap: 12px; }
.capg-inboxdemo .capg-bub, .capg-dealdemo .capg-bub { align-self: flex-end; }
.capg-draft {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capg-draft b { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.capg-draft i { font-style: normal; font-size: 0.76rem; color: var(--muted); }
/* The drafted-reply panel, mirroring the original intro animation */
.capg-draft-body {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.capg-draft-body em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.capg-draft-body p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
}
/* Cancel left, round controls right, blue send last — like the original */
.capg-draft-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.capg-draft-cancel {
  font-style: normal;
  padding: 7px 16px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-right: auto;
}
.capg-draft-round {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-2);
}
.capg-draft-round svg { width: 12px; height: 12px; }
.capg-draft-send {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   APPS PAGE · LAYOUT SPEC (2026-09-01, user layout-reorganization brief)
   Structure only. One 1120px container, one 96px rhythm, one strict
   feature-row system (5fr text / 7fr graphic, 72px gap, 56px row padding,
   hairline dividers, 4:3 graphic frames), wrapping prompt pills, 720px
   FAQ column, 880px CTA card. Copy and component visuals unchanged.
   Deliberately LAST in the file so it wins every earlier apps-page rule.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · ONE content container below the hero: 1120px, 32px side padding */
.product-page main .container {
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
}
/* Hero is explicitly unchanged: it keeps the page's previous width */
.product-page main .hero-quote .container { max-width: 1400px; }

/* 2 · ONE vertical rhythm: 60px halves meet as 120px between sections (2026-09-02, was 48) */
.product-page main > section {
  padding-top: 60px;
  padding-bottom: 60px;
}
.product-page main > section.hero-quote {
  padding-top: clamp(96px, 10vw, 140px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
}
/* The old tighter FAQ→CTA pairing rejoins the uniform rhythm */
.product-page main > section.faq-section { padding-bottom: 60px; }
.product-page main > section.loose { padding-top: 60px; padding-bottom: 60px; }

/* 3 · Prompt strip: the original full-bleed scrolling marquee, restored at
   the user's request. It is deliberately EXEMPT from the container and
   rhythm rules — the one section allowed to ignore them. (A static
   wrapping-pills variant was built and reverted 2026-09-01.) */

/* 4 · Section header: centered, max-width 480px */
.product-page .feat-intro .section-head,
.product-page .feat-intro#features .section-head { max-width: 480px; }

/* 5 · Feature rows: the strict system. The 56px row padding and the
   hairline divider live on the container so the divider spans exactly
   the content width and sits midway between consecutive rows. */
.product-page main > section.feat { padding-top: 0; padding-bottom: 0; }
/* The hairline divider between rows was removed on 2026-09-04: the rows are
   separated by their own padding on continuous paper, which is how the rest of
   the page reads. */
.product-page section.feat > .container {
  padding-top: 60px;
  padding-bottom: 60px;
}
.product-page .feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
  min-height: 0;
}
.product-page .feat--flip .feat-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.product-page .feat--flip .feat-text { order: 2; }
.product-page .feat--flip .feat-graphic { order: 1; }

/* Text column: H3 → one paragraph, 420px measure
   (the uppercase kickers were removed at the user's request 2026-09-01) */
.product-page .feat-text { max-width: 420px; }
.product-page .feat-text h3 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: none;
  white-space: normal;
}
.product-page .feat-text .feat-lead { max-width: none; } /* measure lives on the column */
.product-page .feat-text .pp-triage-note { margin-top: 16px; }

/* 6 · ONE graphic frame: 4:3, 20px radius, one shared background */
.product-page .feat-graphic {
  width: 100%;
  max-width: none;
  min-height: 0;
  min-width: 0;
  justify-self: stretch;
  display: block;
}
/* Frame: the shared 4:3 stage. A white rounded rectangle on both the
   apps and home pages (user consistency rule 2026-09-01), on the site's
   standard box treatment: 12px radius, hairline border, ambient shadow. */
.feat-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.5vw, 32px);
}
/* Every existing graphic is scaled to sit inside the frame; the shared
   zoom system from the previous layout is retired inside frames. */
.feat-frame .capg {
  zoom: 1;
  width: min(440px, 100%);
  max-width: 100%;
}
.feat-frame .capg-model { zoom: 0.88; width: min(460px, 100%); }
/* Every built demo renders 440 wide (user request 2026-09-01). The
   creator's tiles go landscape inside the frame so the panel fits the
   4:3 stage at full width instead of being zoomed down. */
.feat-frame .capg-style { aspect-ratio: 4 / 3; }

/* Deals graphic: mirrors the original deals-intro animation — bubble →
   product title → description → phone photo → price. The phone image is
   the animation's own asset, extracted to /assets/deal-phone.png. */
.capg-dealflat { display: flex; flex-direction: column; gap: 8px; }
.capg-dealflat > b {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.capg-dealflat p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); }
.capg-dealphone { width: auto; height: 168px; align-self: flex-start; margin-top: 2px; }
.capg-dealprice { font-style: normal; font-size: 0.92rem; color: var(--ink); }
.capg-dealprice b { font-weight: 700; }
.feat-frame .pp-triage-scene {
  zoom: 0.78;
  width: 500px;
  max-width: 100%;
  height: 420px;
}
.feat-frame .conn-static {
  margin: 0;
  max-width: 400px;
  gap: 14px;
}
.feat-frame .conn-static .conn-icon { width: 62px; height: 62px; }

/* 7 · FAQ: centered 720px column, uniform rows, 10px gap */
.product-page .faq-grid--center { max-width: 720px; }
.product-page .faq-list { gap: 10px; }
.product-page .faq-item summary { min-height: 64px; }

/* 8 · CTA: centered heading + one 880px card, symmetric halves */
.product-page .cta-duo { max-width: 880px; }

/* Below the two-column breakpoint the system stacks; frames keep 4:3 */
@media (max-width: 900px) {
  .product-page .feat-grid,
  .product-page .feat--flip .feat-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-page .feat--flip .feat-text { order: 0; }
  .product-page .feat--flip .feat-graphic { order: 1; }
  .product-page .feat-text { max-width: 420px; }
  .feat-frame .pp-triage-scene { zoom: 0.55; }
}
@media (max-width: 560px) {
  .feat-frame .capg { zoom: 0.82; }
  .feat-frame .pp-triage-scene { zoom: 0.42; }
  .feat-frame .conn-static .conn-icon { width: 48px; height: 48px; }
  /* On a phone the 4:3 frame was shorter than three of the built graphics, so
     the deal card lost its price and its button and the model picker lost a
     third of its list. Frames holding a built graphic keep the 4:3 height as a
     floor and grow to whatever the graphic needs (2026-09-04). Photo frames
     and the split duo are untouched, since they size off the ratio. */
  .feat-frame:has(> .capg) {
    aspect-ratio: auto;
    min-height: 240px;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE · SAME LAYOUT SYSTEM AS THE APPS PAGE (2026-09-01)
   The apps-page ruleset applied with home context kept: the four split
   sections keep their richer text columns (fact boxes, buttons) but join
   the one-container, one-rhythm, 5fr/7fr, hairline-divider, 4:3-stage
   system. Hero and bridge card untouched beyond container alignment.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · One content container below the hero */
.home-page main > section:not(.hero-float) .container {
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
}

/* 2 · One vertical rhythm: 48px halves meet as 96px between sections */
.home-page main > section {
  padding-top: 60px;
  padding-bottom: 60px;
}
.home-page main > section.hero-float {
  padding-top: clamp(128px, 15vh, 200px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
.home-page main > section.home-close { padding-top: 60px; padding-bottom: 60px; }

/* 3 · Bridge: the centred intro moment, head on the apps intro measure */
.home-page .bridge-head { max-width: 480px; margin-left: auto; margin-right: auto; }

/* 4 · Split rows: the strict system (24px halves + hairline on the container) */
.home-page main > section.home-row { padding-top: 0; padding-bottom: 0; }
/* Divider removed 2026-09-04, same as the apps page: padding alone separates
   the rows. */
.home-page section.home-row > .container {
  padding-top: 60px;
  padding-bottom: 60px;
}
.home-page .home-does-split,
.home-page .link-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}
.home-page .link-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* Text columns: same 420px measure and heading scale as the apps rows;
   the fact boxes and buttons stay — that is the home page's context. */
.home-page .home-does-text,
.home-page .link-split-text { max-width: 420px; }
.home-page .home-does-text h2,
.home-page .link-split-text h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: none;
}

/* 5 · Graphics: the same invisible 4:3 stage as the apps rows */
.home-page .home-does-split .radial-diagram {
  max-width: none;
  margin: 0;
  width: 100%;
}
.feat-frame > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.feat-frame #everyday-arch { width: min(340px, 100%); }
.feat-frame.split-duo { position: relative; }
.feat-frame.split-duo .split-duo-web { width: 84%; margin-right: auto; }
.feat-frame.split-duo .split-duo-phone { max-height: 88%; width: auto; }

/* 6 · CTA: same 880px card as the apps page */
.home-page .cta-duo { max-width: 880px; }

@media (max-width: 900px) {
  .home-page .home-does-split,
  .home-page .link-split,
  .home-page .link-split--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-page .link-split--flip .link-split-text { order: 0; }
  .home-page .link-split--flip .link-split-media { order: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · "Summarising everything" graphic (recreation of Frame 4c) +
   apps deal-graphic CTA (2026-09-01)
   ═══════════════════════════════════════════════════════════════════════ */
.capg-summary { width: min(460px, 100%); gap: 8px; }

.capg-sum-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.capg-sum-navbtn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.capg-sum-navbtn svg { width: 12px; height: 12px; }
.capg-sum-navbtn--round { border-radius: 50%; }
.capg-sum-title {
  flex: 1;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.capg-sum-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
}
.capg-sum-card--urgent { border-color: rgba(220, 38, 38, 0.55); }
.capg-sum-card--urgent .capg-sum-head { color: #DC2626; }
.capg-sum-card--urgent .capg-sum-head svg { color: #DC2626; }
.capg-sum-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.capg-sum-head svg,
.capg-sum-head img { width: 13px; height: 13px; flex-shrink: 0; }
.capg-sum-head svg { color: var(--ink); }
.capg-sum-card p {
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.capg-sum-input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.capg-sum-ph { font-size: 0.73rem; color: var(--muted); }
.capg-sum-tools { display: flex; align-items: center; gap: 10px; }
.capg-sum-tool { width: 13px; height: 13px; color: var(--ink); flex-shrink: 0; }
.capg-sum-smart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink);
}
.capg-sum-smart svg { width: 8px; height: 8px; }
.capg-sum-well {
  width: 24px;
  height: 24px;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  background: var(--bg-cool);
  border-radius: 50%;
  color: var(--ink);
}
.capg-sum-well + .capg-sum-well { margin-left: 0; }
.capg-sum-well svg { width: 11px; height: 11px; }
.capg-sum-send {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  background: var(--bg-cool);
  border-radius: 50%;
  color: var(--muted);
}
.capg-sum-send svg { width: 11px; height: 11px; }
/* Four cards only (nav, Calls and the typing bar removed at user request):
   the column fits the 4:3 stage at full size */
.feat-frame .capg-summary { zoom: 1; }

/* Apps · deal graphic: small caption + CTA under the price */
.capg-dealnote { font-size: 0.74rem; color: var(--muted); margin-top: -2px; }
.capg-dealflat .capg-choose { align-self: flex-start; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   CONSISTENCY PASS (2026-09-01): one text voice + one rectangle size
   - Built UI graphics sit on the white rounded card (.feat-frame).
   - Photo/image figures carry no white card: the image itself fills the
     same 4:3 rectangle (object-fit cover, 12px radius), so every
     graphic rectangle on home + apps is the same size.
   - Home point boxes become plain paragraphs, matching the apps rows.
   ═══════════════════════════════════════════════════════════════════════ */

/* Image figures: no card, image fills the stage */
.feat-frame.link-split-media {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.feat-frame.link-split-media > img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 12px;
}
/* Web-and-phone duo: browser shot fills the stage, phone overlaps it */
.feat-frame.split-duo { padding: 0; }
.feat-frame.split-duo .split-duo-web {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top; /* crop from the right, same frame size/placement (2026-09-02) */
  margin: 0;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.feat-frame.split-duo .split-duo-phone {
  right: 4%;
  bottom: 0;
  max-height: 86%;
  width: auto;
}

/* Home points: paragraphs, not boxes — same voice as the apps rows */
.home-page .does-points li,
.home-page .link-facts--boxed li {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.home-page .does-points,
.home-page .link-facts--boxed { gap: 12px; max-width: none; }
.home-page .does-point-txt,
.home-page .link-facts li {
  display: block;
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.home-page .does-point-txt strong,
.home-page .link-facts li strong {
  display: inline;
  font-size: inherit;
  font-weight: 650;
  color: var(--ink);
}
.home-page .does-point-txt strong::after,
.home-page .link-facts li strong::after { content: '. '; }

/* Apps rows: the same point-paragraph text rules as the home rows
   (short lead, then bold run-in points; no boxes) */
.product-page .link-facts--boxed li {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.product-page .link-facts--boxed {
  gap: 12px;
  max-width: none;
  margin: 16px 0 0;
}
.product-page .link-facts li {
  display: block;
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.product-page .link-facts li strong {
  display: inline;
  font-size: inherit;
  font-weight: 650;
  color: var(--ink);
}
.product-page .link-facts li strong::after { content: '. '; }
.product-page .feat-text .pp-triage-note { margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · ASK BAR + STATEMENT BAND (2026-09-01)
   The web app's command bar as a marketing moment (typewriter placeholder,
   blue send, chip row), and a big-type verbs statement on the brand tint.
   ═══════════════════════════════════════════════════════════════════════ */
.askbar-section .section-head { max-width: 480px; margin-left: auto; margin-right: auto; }

/* The bar mirrors the web app .command: white surface, hairline border,
   soft shadow, faint prompt, blue up-arrow send — pill-shaped here. */
.askbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
  padding: 9px 9px 9px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(10, 15, 28, 0.09), var(--shadow-sm);
  text-decoration: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.askbar:hover {
  border-color: var(--blue-mid);
  box-shadow: 0 14px 36px rgba(10, 15, 28, 0.09), 0 0 0 4px rgba(30, 144, 255, 0.12);
  transform: translateY(-1px);
}
.askbar-text {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 1.5em;
  font-size: 1.02rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}
.askbar-caret {
  flex-shrink: 0;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  background: var(--blue);
  animation: askbar-blink 1.1s steps(1) infinite;
}
@keyframes askbar-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .askbar-caret { animation: none; opacity: 0; }
}
.askbar-send {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 144, 255, 0.35);
}
.askbar-send svg { width: 16px; height: 16px; }

.askbar-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
  margin: 18px auto 0;
}
.askbar-chips span {
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

/* Statement band: left-aligned big type on the brand tint */
.statement-band { background: var(--blue-pale); }
.home-page main > section.statement-band {
  padding-top: clamp(64px, 7vw, 96px);
  padding-bottom: clamp(64px, 7vw, 96px);
}
.statement-eyebrow {
  margin: 0 0 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.statement-line {
  margin: 0;
  font-size: clamp(1.6rem, 2.9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--ink);
  max-width: 24ch;
}
.statement-pill {
  display: inline-block;
  padding: 0.08em 0.5em 0.12em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--blue-text);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.statement-sub {
  margin: 22px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS PAGE · SAME LAYOUT SYSTEM AS HOME + APPS (2026-09-01)
   Same order of content, presented on the shared system: one 1120px
   container below the hero, 48px rhythm, system rows (5fr/7fr, hairline
   dividers, 4:3 stages, run-in point text) for engagement / share /
   yield, open two-column points for the pitch, 720px FAQ, 880px CTA.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Container + rhythm */
.partners-page main > section:not(.ed-hero) .container,
.partners-page .trust-band .container {
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
}
.partners-page main > section {
  padding-top: 48px;
  padding-bottom: 48px;
}
.partners-page main > section.ed-hero { padding: 0; }
.partners-page main > section.rev-shader-section { padding: 48px 0; }

/* 2 · System rows */
.partners-page main > section.feat { padding-top: 0; padding-bottom: 0; }
.partners-page section.feat > .container {
  padding-top: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-soft);
}
.partners-page .feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}
.partners-page .feat--flip .feat-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.partners-page .feat--flip .feat-text { order: 2; }
.partners-page .feat--flip .feat-graphic { order: 1; }
.partners-page .feat-text { max-width: 420px; }
.partners-page .feat-text h3 , .partners-page .feat-text h2{
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.partners-page .feat-lead {
  margin: 0 0 12px;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-2);
}
.partners-page .feat-graphic { width: 100%; display: block; min-width: 0; }

/* Run-in point text, identical to home + apps */
.partners-page .link-facts--boxed li {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
.partners-page .link-facts--boxed { gap: 12px; max-width: none; margin: 16px 0 0; }
.partners-page .link-facts li {
  display: block;
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.partners-page .link-facts li strong {
  display: inline;
  font-size: inherit;
  font-weight: 650;
  color: var(--ink);
}
.partners-page .link-facts li strong::after { content: '. '; }

/* 3 · Pitch: open two-column run-in points, no icon tiles */
.pitch-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 56px;
}
.pitch-points li {
  font-size: clamp(0.95rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.pitch-points li strong { font-weight: 650; color: var(--ink); }
.pitch-points li strong::after { content: '. '; }

/* 4 · Graphics inside the shared white stage */
.feat-frame .eng-chart {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none !important;
  border-radius: 0;
}
.feat-frame .eng-chart .eng-label { font-size: 0.66rem; }
.feat-frame .eng-chart .eng-val { font-size: 0.66rem; }
.feat-frame .eng-legend { font-size: 0.64rem; }
.feat-frame .share-ring-wrap { max-width: 300px; margin: 0; }
.feat-frame .yield-steps { width: 100%; max-width: 460px; margin: 0; }
/* The chart source sits under the stage as small print */
.partners-page .feat-graphic .eng-source {
  margin: 12px 4px 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--muted);
}

/* 5 · What you receive: the video is a full 4:3 rectangle like the
   image figures on home; the panel grid takes the wider column */
.partners-page .recv-layout {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}
.partners-page .recv-figure video {
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  mix-blend-mode: normal;
  filter: none;
}

/* 6 · FAQ + CTA on the shared measures */
.partners-page .faq-grid--center { max-width: 720px; }
.partners-page .faq-list { gap: 10px; }
.partners-page .faq-item summary { min-height: 64px; }
.partners-page .pcta-card { max-width: 880px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .partners-page .feat-grid,
  .partners-page .feat--flip .feat-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .partners-page .feat--flip .feat-text { order: 0; }
  .partners-page .feat--flip .feat-graphic { order: 1; }
  .pitch-points { grid-template-columns: 1fr; }
}

/* Streams: 2x2 at the shared 1120 container (the 4-across layout was
   tuned for the old 1400px width and clipped the built graphics) */
.partners-page .cap-bento--streams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partners-page .cap-bento--streams .cap-cell--half { min-height: clamp(360px, 30vw, 430px); }
/* This override sits after the shared one-column breakpoint, so on a phone it
   was holding the streams at two columns: each card came out about 155px wide,
   the built graphics inside collapsed, and the top-up chips crushed their own
   labels. One card per row below 620px (2026-09-04). */
@media (max-width: 620px) {
  .partners-page .cap-bento--streams { grid-template-columns: 1fr; }
  .partners-page .cap-bento--streams .cap-cell--half { min-height: 0; }
}
/* The revenue eyebrow joins the site-wide no-eyebrows rule (its standout
   block re-coloured it back into view) */
.rev-shader-section--standout .label { display: none; }

/* Statement band tuning (2026-09-01): title box widened so the sentence
   sits on two lines; verb pills slightly smaller; blue eyebrow removed */
.statement-line {
  max-width: none;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1.6;
}
.statement-pill {
  font-size: 0.8em;
  padding: 0.02em 0.4em 0.04em;
  line-height: 1.25;
  vertical-align: baseline;
  border-radius: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════
   HOME · ASK BAR v2 (2026-09-02) · mirrors the mobile app's typing bar
   Two-row cornered rectangle (prompt row, then tools: + / attach / voice /
   "Smart" model pill, with the round card + location buttons and the send
   circle on the right), chips as cornered rectangles, the whole graphic on
   a white rectangle backdrop, and more air above and below the section.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page main > section.askbar-section {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}
.askbar-section .section-head { margin-bottom: 36px; }

/* White rectangle backdrop */
.askbar-stage {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 52px) clamp(20px, 4vw, 48px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* The bar: cornered rectangle, two rows */
.askbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: none;
  padding: 20px 16px 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(10, 15, 28, 0.08), var(--shadow-sm);
}
.askbar:hover { transform: none; }
.askbar-text { font-size: 1.05rem; min-height: 1.5em; }

.askbar-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.askbar-tool {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.askbar-tool svg { width: 20px; height: 20px; }
.askbar-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px; /* pill by design in the app (not a box) */
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.askbar-model svg { width: 14px; height: 14px; }
.askbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.askbar-round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-pale);
  border: 1px solid var(--blue);
  color: var(--ink);
}
.askbar-round svg { width: 17px; height: 17px; }
.askbar-send {
  width: 36px;
  height: 36px;
  background: #B9BEC9;      /* resting grey, as in the app before you type */
  color: #fff;
  box-shadow: none;
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.askbar-send svg { width: 17px; height: 17px; }
.askbar:hover .askbar-send { background: var(--blue); box-shadow: 0 6px 16px rgba(30, 144, 255, 0.35); }

/* Chips: cornered rectangles like the app's shortcut buttons */
.askbar-chips {
  max-width: none;
  gap: 10px;
  margin-top: 18px;
}
.askbar-chips span {
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(10, 15, 28, 0.06), var(--shadow-sm);
}

@media (max-width: 560px) {
  .askbar { padding: 16px 12px 12px 14px; }
  .askbar-tools { gap: 10px; }
  .askbar-round { width: 32px; height: 32px; }
  .askbar-send { width: 32px; height: 32px; }
  .askbar-chips span { padding: 9px 14px; font-size: 0.86rem; }
}

/* Ask bar v2.1 (2026-09-02): backdrop spans the full content width (same as
   the split rows below); voice tile + greeting summary added above the bar.
   Inner column stays phone-like so the bar and copy do not stretch. */
.askbar-stage {
  max-width: none;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
}
.askbar-inner { max-width: 640px; margin: 0 auto; }

.askbar-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.askbar-voice-tile {
  --voice-r: 12px; /* site radius rule; the app itself uses a softer squircle */
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(132px, 16vw, 168px);
  aspect-ratio: 1;
  border-radius: var(--voice-r);
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #6FBBFF 0%, #1E90FF 52%, #1577E0 100%);
  box-shadow: 0 18px 44px rgba(30, 144, 255, .30), 0 4px 12px rgba(30, 144, 255, .18);
}
.askbar-voice-wave { display: flex; align-items: center; gap: 6px; }
.askbar-voice-wave i {
  display: block;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: rgba(255,255,255,.92);
}
.askbar-voice-wave i:nth-child(1), .askbar-voice-wave i:nth-child(11) { height: 8px; opacity: .6; }
.askbar-voice-wave i:nth-child(2), .askbar-voice-wave i:nth-child(10) { height: 11px; opacity: .8; }
.askbar-voice-cap { font-size: 0.82rem; color: var(--muted); }

.askbar-greet { text-align: center; margin: 0 auto 26px; max-width: 34rem; }
.askbar-greet-name { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.askbar-greet-sum { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
.askbar-greet-sum b { font-weight: 700; }

@media (max-width: 560px) {
  .askbar-voice { gap: 12px; margin-bottom: 22px; }
  .askbar-greet-sum { font-size: 0.92rem; }
}

/* Ask bar v2.2 (2026-09-02): one-line title; voice tile is the handoff
   <mypa-voice> web component (mypa-voice.js, v2.0 "Fade") rendered idle only:
   no mic/sounds/demo attributes, wrapper is inert + pointer-events none so it
   never reacts. ID/location circles removed. Phones image in the web-app row. */
.askbar-title { white-space: nowrap; }
@media (max-width: 480px) { .askbar-title { white-space: normal; } }
.askbar-voice { pointer-events: none; user-select: none; }
.askbar-voice-el { display: inline-block; line-height: 0; }
.askbar-voice-el::part(stage) { cursor: default; }
@media (max-width: 560px) { .askbar-voice-el { zoom: 0.8; } }

/* Phones row: white framed box reinstated, image fits inside it.
   2026-10-02: now the v3 web app (browser + phone, webapp-v3-devices.png),
   which carries its own 40px margin for the shadows, so the frame pads less. */
.feat-frame.link-split-media--phones {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: clamp(4px, 0.8vw, 10px);
}
.feat-frame.link-split-media--phones > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
/* Ask bar v2.3 (2026-09-02): backdrop narrowed again */
.askbar-stage { max-width: 880px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · HERO + ASK BAR MERGED (2026-09-02)
   The separate "Life admin, handled." section is gone; the typing bar and
   its action chips now sit in the hero under the headline, CTAs below the
   chips. No white panel, no voice tile, no summary block. Tiles a step
   smaller. (.askbar-section / .askbar-stage / .askbar-voice / .askbar-greet
   rules above are now orphaned.)
   ═══════════════════════════════════════════════════════════════════════ */
.hero-float-content { max-width: 880px; }
.hero-float .hero-marquee-headline { margin-bottom: 0; }
.hero-ask {
  width: 100%;
  max-width: 640px;
  margin: clamp(32px, 4vw, 44px) auto 0;
}
.hero-ask .askbar {
  box-shadow: 0 16px 44px rgba(30, 144, 255, 0.12), 0 2px 8px rgba(10, 15, 28, 0.06);
}
.hero-ask .askbar:hover {
  border-color: var(--blue-mid);
  box-shadow: 0 16px 44px rgba(30, 144, 255, 0.16), 0 0 0 4px rgba(30, 144, 255, 0.10);
}
.hero-ask .askbar-chips { margin-top: 16px; }
.hero-float .hero-marquee-cta { margin-top: clamp(32px, 4vw, 40px); }

/* Floating tiles: slightly smaller so the bar leads */
.hf-ic-tile {
  width: clamp(46px, 4.4vw, 64px);
  height: clamp(46px, 4.4vw, 64px);
}
@media (max-width: 760px) {
  .hf-ic-tile { width: 42px; height: 42px; }
  .hero-float { min-height: clamp(640px, 92vh, 820px); }
  .hero-ask { margin-top: 28px; }
}
/* Hero ghost CTA sits on a white rectangle (2026-09-02); statement band
   section removed from the homepage (.statement-* rules orphaned) */
.hero-float .hero-marquee-cta .btn-ghost {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.hero-float .hero-marquee-cta .btn-ghost:hover { background: #fff; border-color: var(--blue); }
/* Hero breathing room (2026-09-02): taller stage and a deeper bottom
   padding so the CTAs clear the "Life is complicated enough" row */
.home-page main > section.hero-float {
  min-height: clamp(860px, 112vh, 1180px);
  padding-bottom: clamp(112px, 12vw, 176px);
}
@media (max-width: 760px) {
  .home-page main > section.hero-float {
    min-height: clamp(700px, 96vh, 880px);
    padding-bottom: 88px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · ONE ROW SYSTEM (2026-09-02)
   Every section between the stat trio and the contact form is a .feat row
   (text 5fr / graphic 7fr, alternating with .feat--flip). Old pitch /
   streams bento / seg-grid / recv-layout / hiw-grid sections removed
   (their rules are now orphaned). 60px rhythm like home and apps.
   ═══════════════════════════════════════════════════════════════════════ */
.partners-page main > section { padding-top: 60px; padding-bottom: 60px; }
.partners-page main > section.ed-hero { padding: 0; }
.partners-page main > section.feat { padding-top: 0; padding-bottom: 0; }
.partners-page section.feat > .container { padding-top: 60px; padding-bottom: 60px; }
.partners-page .feat-text { max-width: 440px; }

/* Media frames: photo / video fills the 4:3 stage edge to edge */
.partners-page .feat-frame--media { padding: 0; }
.partners-page .feat-frame--media > img,
.partners-page .feat-frame--media > video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.partners-page .feat-frame .capg-topup { width: min(400px, 100%); }
.partners-page .feat-frame .yield-steps { max-width: 520px; }

@media (max-width: 900px) {
  .partners-page .feat-grid,
  .partners-page .feat--flip .feat-grid { grid-template-columns: 1fr; gap: 32px; }
  .partners-page .feat--flip .feat-text { order: 1; }
  .partners-page .feat--flip .feat-graphic { order: 2; }
  .partners-page .feat-text { max-width: none; }
}
/* Yield graphic fitted to the 4:3 stage */
.partners-page .feat-frame .yield-steps { max-width: 100%; padding-top: 0; }
.partners-page .feat-frame .yield-bar { height: calc(var(--h) * 150px); }
.partners-page .feat-frame .yield-step h4 , .partners-page .feat-frame .yield-step h3{ margin: 10px 0 5px; font-size: 0.9rem; }
.partners-page .feat-frame .yield-tag { font-size: 0.62rem; }
.partners-page .feat-frame .yield-step p { font-size: 0.78rem; min-height: 0; }
/* Partners stats: one white box, faint dividers between the three (2026-09-02) */
.partners-page .stat-trio-list {
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.partners-page .stat-trio-item {
  border: 0;
  border-left: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
}
.partners-page .stat-trio-item:first-child { border-left: 0; }
.partners-page .stat-trio-item::before { display: none; }
.partners-page .stat-trio-item:hover { background: transparent; box-shadow: none; border-color: var(--line-soft); }
@media (max-width: 760px) {
  .partners-page .stat-trio-list { grid-template-columns: 1fr; gap: 0; }
  .partners-page .stat-trio-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .partners-page .stat-trio-item:first-child { border-top: 0; }
}
/* Partners · revenue streams as a centred break-up section (2026-09-02) */
.partners-page main > section.rev-section { padding-top: 60px; padding-bottom: 60px; }
.partners-page .rev-head { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.partners-page .rev-head h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.partners-page .rev-head p {
  margin: 0;
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-2);
}
.partners-page .rev-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.partners-page .rev-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partners-page .rev-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.partners-page .rev-box h3 {
  margin: 4px 0 0;
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.partners-page .rev-box p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) { .partners-page .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .partners-page .rev-grid { grid-template-columns: 1fr; } }
/* Revenue section: the original stream cells (built graphics) back in the centred section */
.partners-page .rev-section .cap-bento--streams { margin-top: 0; }
.partners-page .rev-section .cap-cell { background: #fff; }
/* Centred FAQ head: the capped-width subtitle centres as a block too */
.faq-grid--center .faq-head p { margin-left: auto; margin-right: auto; }

/* Partners graphics (2026-09-02)
   "Four kinds of partner": four stock photos in one frame (2x2, captioned).
   Streams: affiliate = the Samsung deal card; advertising = travel answer +
   a native Trainline sponsored card beneath it. */
.partners-page .feat-frame--photos { padding: 0; }
.seg-photos {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  background: #fff;
}
.seg-photos figure { position: relative; margin: 0; overflow: hidden; min-height: 0; }
.seg-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seg-photos figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.seg-photos figure:nth-child(1) img { border-top-left-radius: 12px; }
.seg-photos figure:nth-child(2) img { border-top-right-radius: 12px; }
.seg-photos figure:nth-child(3) img { border-bottom-left-radius: 12px; }
.seg-photos figure:nth-child(4) img { border-bottom-right-radius: 12px; }

/* Affiliate: deal card sized for the half cell */
.capg-affil { gap: 12px; }
.capg-affil .capg-bub { align-self: flex-end; }
.capg-affil .capg-dealflat {
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  gap: 6px;
}
.capg-affil .capg-dealflat > b { font-size: 0.84rem; font-weight: 700; color: var(--blue-text); }
.capg-affil .capg-dealphone { height: 120px; }
.capg-affil .capg-dealprice { font-size: 0.82rem; }
.capg-affil .capg-dealnote { font-size: 0.72rem; }
.capg-affil .capg-choose { font-size: 0.74rem; }

/* Advertising: answer then a sponsored card */
.capg-ad { gap: 12px; }
.capg-ad .capg-bub { align-self: flex-end; }
.capg-adcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capg-adhead { display: flex; align-items: center; gap: 9px; }
.capg-adhead img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 3px; }
.capg-adhead span { display: flex; flex-direction: column; line-height: 1.2; }
.capg-adhead b { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.capg-adhead i { font-style: normal; font-size: 0.68rem; color: var(--muted); }
.capg-adcard p { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--ink-2); }
.capg-adbtn {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
}
/* Photo grid pinned to the frame so both rows fit; deal card tightened so
   its button clears the cell mask */
.partners-page .feat-frame--photos { display: block; position: relative; }
.seg-photos { position: absolute; inset: 0; height: auto; }
.capg-affil { gap: 10px; }
.capg-affil .capg-dealflat { gap: 4px; padding: 11px 14px; }
.capg-affil .capg-dealphone { height: 88px; margin-top: 0; }
.capg-affil .capg-dealnote { display: none; }

/* Partners: customisable modules graphic + dashboard screenshot (2026-09-02) */
.capg-modules { width: min(400px, 100%); gap: 6px; }
.capg-mod-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.capg-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.capg-mod-ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue-pale);
  color: var(--blue);
  flex-shrink: 0;
}
.capg-mod-ic svg { width: 16px; height: 16px; }
.capg-mod-name { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.capg-mod-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #D5DAE5;
  flex-shrink: 0;
}
.capg-mod-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10,15,28,.2);
}
.capg-mod.is-on .capg-mod-toggle { background: var(--blue); }
.capg-mod.is-on .capg-mod-toggle i { left: 18px; }
.capg-mod:not(.is-on) .capg-mod-ic { background: var(--color-paper-2, #F3F6FB); color: var(--muted); }
.capg-mod:not(.is-on) .capg-mod-name { color: var(--ink-2); font-weight: 500; }

.partners-page .feat-frame--dash > img { object-position: left top; }
.capg-mod { padding: 8px 12px; }
.capg-mod-list { gap: 6px; }
.capg-modules .capg-sheet-sub { margin-bottom: 2px; }
/* Partners streams: MyPA answers on the background, not in a box (2026-09-02) */
.partners-page .capg-affil .capg-dealflat,
.partners-page .capg-switch .capg-deal {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.partners-page .capg-switch .capg-deal u {
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
  font-weight: 700;
  color: var(--blue-text);
}
/* Yield tags: text only, no boxes (2026-09-02) */
.partners-page .yield-tag,
.partners-page .yield-step--top .yield-tag {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: var(--blue-text);
}

/* Customisable modules: jigsaw graphic with Font Awesome icons (2026-09-02) */
.partners-page .feat-frame--puzzle .puzzle { width: min(360px, 100%); height: auto; display: block; }
.puzzle-shape { stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.puzzle-piece--blue .puzzle-shape { fill: var(--blue); }
.puzzle-piece--pale .puzzle-shape { fill: var(--blue-pale); }
.puzzle text { font-family: var(--font, "Inter", sans-serif); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
/* the last piece sits slightly apart, being slotted in */
.puzzle-piece--road { transform: translate(14px, 14px); }
@media (prefers-reduced-motion: no-preference) {
  .puzzle-piece--road { animation: puzzle-slot 4.5s ease-in-out infinite; }
  @keyframes puzzle-slot {
    0%, 20%  { transform: translate(14px, 14px); }
    45%, 75% { transform: translate(0, 0); }
    100%     { transform: translate(14px, 14px); }
  }
}
/* Partners CTA form: every field fills its column, card spans the content
   width like the rows above (2026-09-02) */
.partners-page .pcta-card { max-width: none; }
.pcta-form .row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcta-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcta-form .field input,
.pcta-form .field select,
.pcta-form .field textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .pcta-form .row-2 { grid-template-columns: 1fr; } }

/* Puzzle v2 (2026-09-02): brand gradients, rounded corners via a self-coloured
   round-joined stroke painted beneath the fill, white seam on top, blue shadow */
.puzzle-shape { stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke fill; }
.puzzle-seam { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.puzzle text { font-weight: 700; }
/* Revenue cells: graphics a touch narrower inside the white boxes (2026-09-02) */
.partners-page .rev-section .cap-visual--art {
  padding-left: clamp(26px, 3.2vw, 44px);
  padding-right: clamp(26px, 3.2vw, 44px);
}
/* Stat trio source line + unit styling (2026-09-02) */
.partners-page .stat-trio-source { margin: 12px 4px 0; font-size: 0.72rem; line-height: 1.5; color: var(--muted); }
.partners-page .stat-trio-num .stat-trio-plus { font-size: 0.5em; margin-left: 0.12em; vertical-align: baseline; }

/* Home · News row (2026-09-02): three teasers in the standard white frame */
.home-page .home-news-frame { align-items: stretch; padding: clamp(20px, 2.5vw, 32px); }
.home-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; }
.home-news-list li + li { border-top: 1px solid var(--line-soft); }
.home-news-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 4px;
  text-decoration: none;
  color: var(--ink);
}
.home-news-meta { grid-column: 1; font-size: 0.78rem; color: var(--muted); }
.home-news-meta b { color: var(--blue-text); font-weight: 600; }
.home-news-title { grid-column: 1; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.home-news-more { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blue); font-size: 1.1rem; transition: transform .2s var(--ease-out); }
.home-news-list a:hover .home-news-title { color: var(--blue-text); }
.home-news-list a:hover .home-news-more { transform: translateX(4px); }
/* Home news teasers: arrows removed (2026-09-02) */
.home-news-list a { grid-template-columns: minmax(0, 1fr); }
/* Puzzle v3 (2026-09-02): flat and simple. Pale pieces, thin blue outline,
   blue icons, dark labels, no shadow, no gradient, no motion. */
.puzzle-shape { fill: var(--blue-pale); stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; paint-order: normal; }
.puzzle-piece--road .puzzle-shape { fill: #fff; stroke-dasharray: 5 3; }
.puzzle-piece--road { transform: none !important; animation: none !important; }
.puzzle text { font-weight: 600; fill: var(--ink); }
/* Partners hero ghost CTA on a white rectangle, like the home hero (2026-09-02) */
.partners-page .ed-hero-cta .btn-ghost {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.partners-page .ed-hero-cta .btn-ghost:hover { background: #fff; border-color: var(--blue); }
/* Launch row: phone nudged down and left inside its frame (2026-09-02) */
.partners-page .feat-frame--launch > img {
  object-fit: contain;
  transform: translate(-4%, 4%) scale(0.92);
  transform-origin: center;
}

/* Hallmark · component: step-sequence (F4) · genre: modern-minimal · theme: MyPA system (locked)
 * source: 21st.dev @7ovr/how-it-works-2, ported to vanilla · knobs: numbering=01/02, layout=vertical, connector=line
 * removed: outline badge eyebrow, nested card surfaces, Remix icons (FA solid, one set) · states: static (non-interactive)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · slop test: pass (universal gates; 38a brand exception: .serif accent span kept for site consistency) */
.partners-page .feat-grid--hiw { align-items: start; }
.hiw-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 560px; }
.hiw-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; }
.hiw-rail { display: flex; flex-direction: column; align-items: center; }
.hiw-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-mid);
  color: var(--blue);
}
.hiw-ic svg { width: 18px; height: 18px; }
.hiw-rail::after { content: ''; flex: 1; width: 1px; margin-top: 8px; background: var(--line); }
.hiw-step:last-child .hiw-rail::after { display: none; }
.hiw-body { padding: 0 0 32px; }
.hiw-step:last-child .hiw-body { padding-bottom: 0; }
.hiw-stepnum {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue-text);
  font-variant-numeric: tabular-nums;
  margin: 12px 0 2px;
}
.hiw-body h4 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.hiw-body p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .hiw-timeline { max-width: none; }
  .hiw-body { padding-bottom: 24px; }
}
@media (max-width: 480px) {
  .hiw-step { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .hiw-ic { width: 36px; height: 36px; }
  .hiw-ic svg { width: 15px; height: 15px; }
}
/* How it goes live · centred timeline, each step on a white box (2026-09-02) */
.partners-page main > section.hiw-section { padding-top: 60px; padding-bottom: 60px; }
.partners-page .hiw-head { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.partners-page .hiw-head h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.partners-page .hiw-head p { margin: 0; font-size: clamp(0.98rem, 1.05vw, 1.06rem); line-height: 1.65; color: var(--ink-2); }
.partners-page .hiw-timeline { max-width: 680px; margin: 0 auto; }
.partners-page .hiw-step { column-gap: 0; grid-template-columns: 44px minmax(0, 1fr); }
.partners-page .hiw-rail { margin-right: 20px; }
.partners-page .hiw-body {
  padding: 18px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.partners-page .hiw-step:last-child .hiw-body { margin-bottom: 0; padding-bottom: 20px; }
.partners-page .hiw-stepnum { margin-top: 0; }
.partners-page .hiw-rail::after { margin-top: 8px; margin-bottom: 8px; }
.partners-page .hiw-cta { justify-content: center; margin-top: 36px; }
@media (max-width: 480px) {
  .partners-page .hiw-step { grid-template-columns: 36px minmax(0, 1fr); }
  .partners-page .hiw-rail { margin-right: 14px; }
  .partners-page .hiw-body { padding: 16px 16px 18px; }
}
/* How it goes live · horizontal steps, icon inside each white box (2026-09-02) */
.partners-page .hiw-timeline {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.partners-page .hiw-step { display: block; }
.partners-page .hiw-body {
  height: 100%;
  margin: 0;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.partners-page .hiw-body .hiw-ic { margin-bottom: 12px; }
.partners-page .hiw-stepnum { margin: 0; }
.partners-page .hiw-body h4 { font-size: 1.04rem; }
.partners-page .hiw-body p { font-size: 0.92rem; }
@media (max-width: 900px) { .partners-page .hiw-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .partners-page .hiw-timeline { grid-template-columns: 1fr; } }
/* Steps: icon sits plain in the box, no tile (2026-09-02) */
.partners-page .hiw-body .hiw-ic { background: transparent; border: 0; width: auto; height: auto; justify-items: start; margin-bottom: 14px; }
.partners-page .hiw-body .hiw-ic svg { width: 22px; height: 22px; }
.partners-page .hiw-stepnum { font-size: 0.8rem; }
/* Revenue section CTAs under the four streams (2026-09-02) */
.partners-page .rev-cta { justify-content: center; margin-top: 36px; }
.partners-page .rev-cta .btn-ghost { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.partners-page .rev-cta .btn-ghost:hover { background: #fff; border-color: var(--blue); }
/* Partners stat trio joins the 60px rhythm (older 28-48px bottom padding outranked the page rule) */
.partners-page .stat-trio { padding-top: 60px; padding-bottom: 60px; }
/* Row 1 video frame: whole phone visible, frame painted the video's own paper (2026-09-02) */
.partners-page .feat-frame--video { --paper-video-top: #F5F9FA; --paper-video-bottom: #EBF3F6; background: linear-gradient(180deg, var(--paper-video-top), var(--paper-video-bottom)); }
.partners-page .feat-frame--video > video { object-fit: contain; background: transparent; }
/* Yield graphic: tighter columns, taller bars, less dead space (2026-09-02) */
.partners-page .feat-frame .yield-steps { max-width: 420px; gap: 10px; }
.partners-page .feat-frame .yield-bar { height: calc(var(--h) * 180px); }
.partners-page .feat-frame .yield-step h4 , .partners-page .feat-frame .yield-step h3{ margin: 8px 0 4px; }
.partners-page .feat-frame .yield-tag { margin-bottom: 6px; }
.partners-page .feat-frame .yield-step p { line-height: 1.4; }
/* Video frame: pin the video to the 4:3 stage so contain works (height:100% resolved to intrinsic) */
.partners-page .feat-frame--video { display: block; position: relative; }
.partners-page .feat-frame--video > video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Launch frame: pin the image so contain shows the whole phone, smaller, in the same 4:3 box */
.partners-page .feat-frame--launch { display: block; position: relative; }
.partners-page .feat-frame--launch > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform: translate(-3%, 3%) scale(0.9);
}
/* Steps: no icons, big step numbers (2026-09-02) */
.partners-page .hiw-stepnum {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue);
  margin: 0 0 10px;
}
/* Centred FAQ head: breathing room between title and subtitle (2026-09-02) */
.faq-grid--center .faq-head h2 { margin: 0 0 18px; line-height: 1.1; }
.faq-grid--center .faq-head p { line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · "What MyPA can do for your company" scene (2026-09-02)
   Three app cards radiating from the frame's centre in light perspective:
   notification · token top-up · engagement chart. Brand tokens only, Inter,
   12px corners, hairlines, site shadows. Static (no motion).
   ═══════════════════════════════════════════════════════════════════════ */
.partners-page .feat-frame--scene { display: block; position: relative; padding: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; perspective: 1100px; font-family: var(--font); }
.scene-ring {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.scene-ring--1 { width: 34%; aspect-ratio: 1; }
.scene-ring--2 { width: 64%; aspect-ratio: 1; border-color: var(--line-soft); }
.scene-core {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.scene-core img { width: 34px; height: 34px; object-fit: contain; }

.scene-card {
  position: absolute; left: 50%; top: 50%;
  width: 46%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(30, 144, 255, 0.14), var(--shadow-sm);
  transform-style: preserve-3d;
  color: var(--ink);
}
/* radiating positions: up-left, right, down-left */
.scene-card--notif { transform: translate(calc(-50% - 22%), calc(-50% - 27%)) rotateX(8deg) rotateY(-14deg) rotate(-3deg); }
.scene-card--chart { width: 42%; transform: translate(calc(-50% + 30%), calc(-50% - 4%)) rotateX(6deg) rotateY(16deg) rotate(2deg); }
.scene-card--topup { width: 40%; transform: translate(calc(-50% - 24%), calc(-50% + 30%)) rotateX(-7deg) rotateY(-10deg) rotate(2.5deg); }

/* notification */
.scene-notif-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.74rem; }
.scene-notif-head img { width: 18px; height: 18px; object-fit: contain; }
.scene-notif-head b { font-weight: 700; color: var(--ink); }
.scene-notif-head i { font-style: normal; margin-left: auto; color: var(--muted); }
.scene-card--notif p { margin: 0 0 10px; font-size: 0.8rem; line-height: 1.45; color: var(--ink); }
.scene-notif-actions { display: flex; gap: 6px; }
.scene-pill {
  display: inline-block; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.7rem; font-weight: 600; color: var(--ink);
}
.scene-pill--fill { background: var(--blue); border-color: var(--blue); color: #fff; }

/* chart */
.scene-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 0.74rem; color: var(--ink-2); }
.scene-chart-head b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.scene-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.scene-chart-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 0 0; background: var(--blue-pale); border: 1px solid var(--blue-mid); border-bottom: 0; }
.scene-chart-bars i:nth-child(n+9) { background: var(--blue); border-color: var(--blue); }
.scene-chart-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.62rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 5px; }
.scene-chart-foot i { font-style: normal; }

/* top-up */
.scene-topup-title { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.scene-pack {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px;
  padding: 9px 11px; margin-bottom: 9px;
  border: 1px solid var(--blue); border-radius: 12px; background: var(--blue-pale);
  font-size: 0.78rem;
}
.scene-pack b { grid-column: 1; font-weight: 700; color: var(--blue-text); }
.scene-pack i { grid-column: 1; font-style: normal; font-size: 0.7rem; color: var(--ink-2); }
.scene-radio { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--blue); background: #fff; box-sizing: border-box; }
.scene-topup-btn { display: block; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--blue); color: #fff; font-size: 0.76rem; font-weight: 700; }

@media (max-width: 900px) {
  .scene-card { width: 52%; }
  .scene-card--chart { width: 46%; }
  .scene-card--topup { width: 44%; }
}
/* Scene: cards spread so each reads and the centre mark shows */
.scene-card { width: 42%; padding: 12px 14px; }
.scene-card--notif { transform: translate(calc(-50% - 27%), calc(-50% - 33%)) rotateX(8deg) rotateY(-12deg) rotate(-3deg); }
.scene-card--chart { width: 36%; transform: translate(calc(-50% + 33%), calc(-50% + 2%)) rotateX(6deg) rotateY(14deg) rotate(2deg); }
.scene-card--topup { width: 33%; transform: translate(calc(-50% - 29%), calc(-50% + 33%)) rotateX(-7deg) rotateY(-10deg) rotate(2.5deg); }
.scene-card--notif p { font-size: 0.76rem; }
.scene-chart-bars { height: 54px; }
@media (max-width: 900px) {
  .scene-card { width: 46%; }
  .scene-card--chart { width: 40%; }
  .scene-card--topup { width: 36%; }
}
/* Scene: frame-relative placement, three clear zones around the centre mark */
.scene-card--notif { left: 30%; top: 29%; width: 40%; transform: translate(-50%, -50%) rotateX(8deg) rotateY(-12deg) rotate(-3deg); }
.scene-card--chart { left: 72%; top: 50%; width: 34%; transform: translate(-50%, -50%) rotateX(6deg) rotateY(14deg) rotate(2deg); }
.scene-card--topup { left: 32%; top: 73%; width: 30%; transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-10deg) rotate(2.5deg); }
@media (max-width: 900px) {
  .scene-card--notif { width: 44%; }
  .scene-card--chart { width: 38%; }
  .scene-card--topup { width: 34%; }
}
/* Scene v2: no rings; brand card replaces the notification; chart and +3.4% split */
.scene-ring { display: none; }
.scene-card--brand {
  left: 29%; top: 30%; width: 30%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 16px;
  transform: translate(-50%, -50%) rotateX(8deg) rotateY(-12deg) rotate(-3deg);
}
.scene-card--brand img { width: 34px; height: 34px; object-fit: contain; }
.scene-card--brand b { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.scene-card--chart { left: 72%; top: 34%; width: 34%; transform: translate(-50%, -50%) rotateX(6deg) rotateY(14deg) rotate(2deg); }
.scene-card--stat {
  left: 71%; top: 76%; width: 24%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  transform: translate(-50%, -50%) rotateX(-6deg) rotateY(12deg) rotate(-2deg);
}
.scene-card--stat b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.scene-card--stat span { font-size: 0.7rem; color: var(--muted); }
@media (max-width: 900px) {
  .scene-card--brand { width: 34%; }
  .scene-card--stat { width: 28%; }
}
/* Scene v3: no centre tile; brand card is the mark alone, larger */
.scene-card--brand { padding: 18px 16px; }
.scene-card--brand img { width: 72px; height: 72px; }
/* Scene v4 (2026-09-02): one box split into four quarters by hairlines, flat 2D.
   TL brand mark · TR weekly engagement · BL top up · BR +3.4% */
.partners-page .feat-frame--scene .scene {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  perspective: none;
}
.partners-page .feat-frame--scene .scene-card {
  position: static; left: auto; top: auto; width: auto;
  transform: none !important;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 8% 9%;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.partners-page .feat-frame--scene .scene-card--brand { order: 1; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); align-items: center; }
.partners-page .feat-frame--scene .scene-card--chart { order: 2; border-bottom: 1px solid var(--line-soft); }
.partners-page .feat-frame--scene .scene-card--topup { order: 3; border-right: 1px solid var(--line-soft); }
.partners-page .feat-frame--scene .scene-card--stat  { order: 4; align-items: center; justify-content: center; }
.partners-page .feat-frame--scene .scene-card--brand img { width: 40%; height: auto; max-width: 96px; }
.partners-page .feat-frame--scene .scene-card--stat b { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.partners-page .feat-frame--scene .scene-card--stat span { font-size: 0.8rem; }
.partners-page .feat-frame--scene .scene-chart-bars { height: 58px; }
/* Apps · Just ask: "Booked" is plain text, no pill (2026-09-02) */
.product-page .capg-askdemo .capg-deal u {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  font-weight: 700;
  color: var(--blue-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT · rebranded onto the shared system (2026-09-02)
   Continuous paper-2 surface, 60px rhythm, 12px boxes, no eyebrows.
   Hero: port of 21st.dev @haydenbleasel/hero-section-2. Where we are: port
   of 21st.dev @Mazyar kawa/location-map (static). Jersey only.
   ═══════════════════════════════════════════════════════════════════════ */
body.about-page { background: var(--color-paper-2); }
.about-page main > section { background: transparent; border: 0; padding-top: 60px; padding-bottom: 60px; }
.about-page main > section .container { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
.about-page .site-footer { border-top: 0; }

/* Hero */
.about-page main > section.about-hero {
  background: var(--color-paper-2);
  padding-top: clamp(128px, 15vh, 180px);
  padding-bottom: 60px;
  overflow: visible;
}
.about-page .about-hero-glow { display: none; }
.about-hero-copy { max-width: 720px; }
.about-page .about-hero-headline {
  margin: 0 0 20px;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  max-width: none;
}
.about-hero-sub {
  margin: 0 0 28px;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}
.about-page .about-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.about-page .about-hero-cta .btn-ghost { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.about-page .about-hero-cta .btn-ghost:hover { background: #fff; border-color: var(--blue); }
.about-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.about-hero-trust-label { font-size: 0.86rem; color: var(--muted); }
.about-hero-trust-names { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.about-hero-trust .trust-name { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.about-hero-trust .trust-name img { width: 20px; height: 20px; border-radius: 5px; }
.about-hero-trust .trust-blokk { width: auto; height: 18px; border-radius: 0; }
.about-hero-media {
  margin: 48px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 40px);
  aspect-ratio: 16 / 8;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.about-hero-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Team */
.about-page .about-team-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.about-page .about-team-head h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-page .about-team-head p { margin: 0; font-size: clamp(0.98rem, 1.05vw, 1.06rem); line-height: 1.65; color: var(--ink-2); }
.about-page .about-team-grid { gap: 16px; }
.about-page .about-team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 16px 16px 20px;
}
.about-page .about-team-photo { border-radius: 12px; overflow: hidden; }
.about-page .about-team-photo img { border-radius: 12px; }
.about-page .about-team-meta-row--reveal { opacity: 1; transform: none; max-height: none; }

/* Where we are */
.about-where-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: center;
}
.about-where-text { max-width: 440px; }
.about-where-text h2 {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-where-lead { margin: 0 0 18px; font-size: clamp(0.98rem, 1.05vw, 1.06rem); line-height: 1.65; color: var(--ink-2); }
.about-where-address { font-style: normal; font-size: 0.98rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.about-where-address strong { color: var(--ink); font-weight: 650; }

.about-page .about-map { padding: 0; position: relative; display: block; }
.map-card { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: #fff; }
.map-grid { position: absolute; inset: 0; color: var(--ink); opacity: 0.06; }
.map-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-road { stroke: var(--line); stroke-width: 6; }
.map-road--thin { stroke-width: 4; }
.map-lane { stroke: var(--line-soft); stroke-width: 1.5; }
.map-block { fill: var(--color-paper-2); stroke: var(--line); stroke-width: 1; }
.map-water { fill: var(--blue-pale); }
.map-pin {
  position: absolute; left: 50%; top: 46%;
  width: 40px; height: 40px;
  transform: translate(-50%, -100%);
  color: var(--blue);
  filter: drop-shadow(0 8px 14px rgba(30, 144, 255, 0.35));
}
.map-pin svg { width: 100%; height: 100%; fill: currentColor; }
.map-pin circle { fill: #fff; }
.map-pin::after {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 16px; height: 6px; border-radius: 50%;
  background: rgba(30, 144, 255, 0.25);
  transform: translateX(-50%);
}
.map-tag {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.map-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.map-label {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.map-label b { font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.map-label span { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .about-where-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-where-text { max-width: none; }
  .about-hero-media { aspect-ratio: 4 / 3; }
}
/* About fixes: whole hero image, always-visible role row, bigger BLOKK mark */
.about-page .about-hero-media { aspect-ratio: auto; display: block; }
.about-page .about-hero-media img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.about-page .about-team-card .about-team-meta-row--reveal {
  max-height: none; height: auto; opacity: 1; visibility: visible; transform: none; overflow: visible;
  margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.about-page .about-team-card .about-team-role { font-size: 0.86rem; color: var(--ink-2); }
.about-page .about-team-card .about-team-link { font-size: 0.86rem; font-weight: 600; color: var(--blue-text); text-decoration: none; }
.about-page .about-team-card .about-team-link:hover { text-decoration: underline; }
.about-hero-trust .trust-blokk { height: 24px; }
/* About: role + LinkedIn always visible (no hover reveal); BLOKK wordmark at proper size */
.about-page .about-team-card .about-team-role,
.about-page .about-team-card .about-team-link { opacity: 1; transform: none; transition: color .2s ease; }
.about-hero-trust .trust-name img.trust-blokk { width: auto; height: 24px; border-radius: 0; }
/* Apps hero: wider lead paragraph under the phone (2026-09-02) */
.product-page .hero-quote--centered .hero-quote-lead,
.product-page .hero-quote-lead { max-width: 68ch; margin-left: auto; margin-right: auto; }
/* About hero media: shorter photo banner instead of the tall phone frame (2026-09-02) */
.about-page .about-hero-media { padding: 0; height: clamp(260px, 30vw, 400px); aspect-ratio: auto; display: block; overflow: hidden; }
.about-page .about-hero-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 45%; border-radius: 12px; }
/* About hero as a split row like the other pages: text 5fr left, 4:3 framed graphic right (2026-09-02) */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-page .about-hero-copy { max-width: none; }
.about-page .about-hero-headline { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.about-hero-sub { font-size: clamp(1.02rem, 1.25vw, 1.2rem); max-width: 30em; }
.about-page .about-hero-media {
  margin: 0; padding: 0; height: auto; aspect-ratio: 4 / 3; display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.about-page .about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 12px; }
@media (max-width: 900px) { .about-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
/* About · Our purpose (2026-09-02): heading left, statement right, three run-in points */
.about-purpose-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.about-purpose-grid h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.about-purpose-statement {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-purpose-note { margin: 0 0 22px; font-size: clamp(0.98rem, 1.05vw, 1.06rem); line-height: 1.65; color: var(--ink-2); }
.about-purpose-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.about-purpose-points li {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 18px 18px 20px; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2);
}
.about-purpose-points li strong { display: block; margin-bottom: 6px; font-weight: 650; color: var(--ink); }
@media (max-width: 900px) {
  .about-purpose-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-purpose-points { grid-template-columns: 1fr; }
}
/* Our purpose v2: text column left (heading, statement, note), stacked boxes right */
.about-purpose-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 72px; }
.about-purpose-grid h2 { margin-bottom: 14px; }
.about-purpose-statement { font-size: clamp(1.1rem, 1.5vw, 1.35rem); margin-bottom: 14px; }
.about-purpose-note { margin-bottom: 0; }
.about-purpose-points { grid-template-columns: 1fr; gap: 12px; }
.about-purpose-points li { display: grid; grid-template-columns: auto; padding: 18px 22px; font-size: 0.98rem; }
.about-purpose-points li strong { margin-bottom: 4px; }
/* Team subtitle centred */
.about-page .about-team-head, .about-page .about-team-head p, .about-page .about-team-head h2 { text-align: center; }
.about-page .about-team-head p { margin-left: auto; margin-right: auto; max-width: 56ch; }
@media (max-width: 900px) { .about-purpose-grid { gap: 28px; } }
/* About · real office map (Leaflet + CARTO light tiles), one dot, zoom only (2026-09-02) */
.about-page .about-map { overflow: hidden; }
.office-map { position: absolute; inset: 0; border-radius: 12px; background: var(--color-paper-2); z-index: 0; }
.office-map .leaflet-control-zoom { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.office-map .leaflet-control-zoom a { width: 32px; height: 32px; line-height: 32px; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line-soft); font-family: var(--font); }
.office-map .leaflet-control-zoom a:last-child { border-bottom: 0; }
.office-map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.85); color: var(--muted); border-radius: 6px 0 0 0; }
.office-map .leaflet-control-attribution a { color: var(--muted); }
.office-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(30, 144, 255, 0.22), 0 4px 12px rgba(30, 144, 255, 0.35);
}
.about-page .about-map .map-tag, .about-page .about-map .map-label { z-index: 500; }
.about-page .about-map .map-label { left: 16px; bottom: 28px; }
/* Office map: OSM tiles muted to the pale brand palette */
.office-map .leaflet-tile-pane { filter: grayscale(0.9) brightness(1.06) contrast(0.92) saturate(0.6); }
/* Our purpose v3: boxes left (7fr), text right (5fr); text first on mobile */
.about-purpose-grid--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) {
  .about-purpose-grid--flip { grid-template-columns: 1fr; }
  .about-purpose-grid--flip .about-purpose-text { order: 1; }
  .about-purpose-grid--flip .about-purpose-points { order: 2; }
}
/* Ask bar: fixed prompt-row height so typing never changes the bar size (2026-09-02) */
.askbar-text { height: 1.6em; min-height: 0; line-height: 1.6; overflow: hidden; }
.askbar-text #askbar-type { display: inline-block; line-height: 1.6; white-space: nowrap; }
.askbar-caret { height: 1.1em; }
/* News posts · Quick answers block (2026-09-02) */
.post-faq { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.post-faq h2 { margin-bottom: 14px; }
.post-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 10px; }
.post-faq-item h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 650; color: var(--ink); }
.post-faq-item p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--ink-2); }
.post-body h2 { margin-top: 1.6em; }
/* Post and card images carry width/height attributes for CLS; let CSS own the box */
.post-figure img, .blog-card-media img { height: auto; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* News posts · Ask your AI row (2026-09-02) */
.post-ask { margin: 36px 0 8px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.post-ask-text h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.post-ask-text p { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.post-ask-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.post-ask-btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); white-space: nowrap; }
.post-ask-btn img { width: 18px; height: 18px; display: block; }
.post-ask-btn:hover { border-color: var(--blue); background: #fff; }
.post-ask-note { margin: 12px 0 0; min-height: 1.2em; font-size: 0.82rem; color: var(--blue-text); }
/* News posts · Related reading (2026-09-02) */
.post-related { margin-top: 32px; }
.post-related h2 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.post-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.post-related a { color: var(--blue-text); font-weight: 600; text-decoration: none; font-size: 0.98rem; }
.post-related a:hover { text-decoration: underline; }
/* Ask your AI moved under the title; FA back arrow (2026-09-02) */
.post-ask { margin: 26px 0 0; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; }
.post-ask-text h2 { font-size: 1rem; margin-bottom: 4px; }
.post-ask-text p { margin: 0; font-size: 0.88rem; }
.post-ask-btns { grid-column: 2; grid-row: 1; }
.post-ask-note { grid-column: 1 / -1; margin: 0; min-height: 0; }
.post-ask-btn img { width: 22px; height: 22px; }
.post-back-ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }
@media (max-width: 720px) { .post-ask { grid-template-columns: 1fr; } .post-ask-btns { grid-column: 1; grid-row: auto; } }
.post-back { display: inline-flex; align-items: center; gap: 6px; }
.post-back-ic { display: inline-block; margin: 0; }
/* News posts · worked example + At a glance facts (2026-09-02) */
.post-example { padding: 14px 18px; background: var(--blue-pale); border: 1px solid var(--blue-mid); border-radius: 12px; font-size: 0.98rem; }
.post-example strong { color: var(--blue-text); font-weight: 700; }
.post-facts { margin-top: 36px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.post-facts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.post-facts dl { margin: 0; display: grid; gap: 0; }
.post-facts-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.post-facts-row:first-child { border-top: 0; }
.post-facts dt { font-weight: 650; color: var(--ink); font-size: 0.92rem; }
.post-facts dd { margin: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 560px) { .post-facts-row { grid-template-columns: 1fr; gap: 2px; } }
/* Ask bar: the prompt row is a fixed-size flex item so the bar never resizes while typing */
.hero-ask .askbar-text, .askbar-text { flex: 0 0 auto; height: 1.6em; min-height: 1.6em; max-height: 1.6em; box-sizing: content-box; }
/* Home hero headline on one line (2026-09-02) */
.hero-float .hero-marquee-line-1 { font-size: clamp(2rem, 3.6vw, 3.5rem); white-space: nowrap; letter-spacing: -0.04em; }
@media (max-width: 760px) { .hero-float .hero-marquee-line-1 { white-space: normal; font-size: clamp(1.9rem, 8vw, 2.6rem); } }
/* Apps hero headline: two deliberate lines (2026-09-03) */
.product-page .hero-quote-headline { max-width: none; white-space: nowrap; font-size: clamp(2.2rem, 4.4vw, 4rem); }
@media (max-width: 760px) { .product-page .hero-quote-headline { white-space: normal; font-size: clamp(2rem, 8.5vw, 2.8rem); } }
/* About · stat trio (2026-09-03): same one-box treatment as the partners page */
.about-page main > section.about-stats { padding-top: 0; padding-bottom: 60px; }
.about-page .stat-trio-list {
  gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-page .stat-trio-item { border: 0; border-left: 1px solid var(--line-soft); border-radius: 0; background: transparent; box-shadow: none; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
.about-page .stat-trio-item:first-child { border-left: 0; }
.about-page .stat-trio-item::before { display: none; }
.about-page .stat-trio-item:hover { background: transparent; box-shadow: none; border-color: var(--line-soft); }
.about-page .stat-trio-num .stat-trio-plus { font-size: 0.5em; margin-left: 0.12em; vertical-align: baseline; }
@media (max-width: 760px) {
  .about-page .stat-trio-list { grid-template-columns: 1fr; }
  .about-page .stat-trio-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .about-page .stat-trio-item:first-child { border-top: 0; }
}
.about-page .stat-trio-label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT-TO-LEFT (2026-09-03)
   i18n.js sets dir="rtl" on <html> for Arabic, Farsi, Hebrew, Pashto and
   Urdu. Text mirrors on its own; these rules mirror the handful of places
   that were pinned with physical left/right properties.
   ═══════════════════════════════════════════════════════════════════════ */
/* 4 Oct 2026 (Archie): the MyPA logo sits top left of the menu bar in every
   language, so the bar keeps its left-to-right layout in RTL too. The text
   inside the drop-down menus and the phone drawer still reads right to left. */
[dir="rtl"] .nav-pill-inner { direction: ltr; }
[dir="rtl"] .nav-pill-inner .nav-dd-menu,
[dir="rtl"] .nav-pill-inner .lang-switch-list { direction: rtl; }

/* Latin-script fragments (brand names, prices, times) inside RTL sentences
   keep their own direction so punctuation does not jump to the wrong end. */
[dir="rtl"] .askbar-text,
[dir="rtl"] .cookie-banner-text { text-align: start; }

/* Anything drawn as a diagram or a chat mock stays in its authored direction,
   because its positions are absolute and would otherwise cross over. */
[dir="rtl"] .capg,
[dir="rtl"] .circuit-hub,
[dir="rtl"] .puzzle-graphic,
[dir="rtl"] .stream-graphic { direction: ltr; }
[dir="rtl"] .capg *,
[dir="rtl"] .stream-graphic * { text-align: start; }

/* Translated pages only. English line breaks were tuned by hand, so they are
   left alone; other languages run longer and would otherwise leave a ragged
   last line on the big headings. */
html:not([lang="en"]) h1,
html:not([lang="en"]) h2,
html:not([lang="en"]) h3,
html:not([lang="en"]) .hero-marquee-headline,
html:not([lang="en"]) .blog-hero-title {
  text-wrap: balance;
  overflow-wrap: break-word;
}
html:not([lang="en"]) .hero-marquee-line-1 { text-wrap: balance; }
/* The home and apps headlines are held on one line for the English wording.
   Translations run longer, so they are allowed to wrap instead of overflowing. */
html:not([lang="en"]) .hero-float .hero-marquee-line-1,
html:not([lang="en"]) .product-page .hero-quote-headline { white-space: normal; }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNERS · HERO HEIGHT (2026-09-04)
   A little more room around the logo assembly animation. The copy and the
   animation keep their sizes; only the band gets taller, so the stage can
   run its full scatter without crowding the trust band underneath.
   ═══════════════════════════════════════════════════════════════════════ */
.partners-page main > section.ed-hero > .container {
  padding-top: clamp(116px, 12vw, 168px);
  padding-bottom: clamp(88px, 8.4vw, 124px);
}
.partners-page--editorial .ed-hero-stage {
  max-height: clamp(560px, 70vh, 780px);
}
@media (max-width: 900px) {
  .partners-page main > section.ed-hero > .container {
    padding-top: clamp(96px, 14vw, 128px);
    padding-bottom: clamp(72px, 10vw, 96px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   NARROW PHONES (2026-09-04)
   At 320px, the width of the oldest phones still in use, a long CTA label is
   wider than its column and pushed the whole row past the right edge of the
   screen, because .btn is nowrap. Below 340px the label wraps instead. Wider
   phones keep buttons on one line.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 340px) {
  .btn {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
  /* The 340px language panel has no room left at this width, and its two
     columns cut the longer endonyms. One column here instead. */
  .lang-switch-list {
    width: calc(100vw - 24px);
    grid-template-columns: 1fr;
  }
  /* The art style chips are narrow enough here that even the English names
     ("Ink Illustration") no longer fit on one line. They wrap rather than
     shrink: 0.6rem is already the smallest readable step on the ramp. */
  .capg-style i {
    white-space: normal;
    line-height: 1.2;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PARTNERS · GRAPHICS ON PHONES (2026-09-08)
   The .feat-frame stage is a fixed 4:3 box tuned for the ~560px desktop
   column. Under 700px it falls to about 316x237 and the graphics inside it
   no longer fit, so overflow:hidden crops them and what is left reads as a
   magnified fragment. Measured at a 390px viewport, past the frame edge:
   engagement chart +174px, yield steps +437px, share ring +100px, app
   scene +18px; the four partner photos were cropped 25% top and bottom
   into 155px cells. On phones each stage sizes to its own graphic.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Built graphics (chart, share ring, yield steps): the stage grows to fit */
  .partners-page .feat-frame { aspect-ratio: auto; }

  /* Frames whose graphic is position:absolute keep a ratio, but one chosen
     for the graphic instead of inherited from the desktop 4:3 */
  .partners-page .feat-frame--photos { aspect-ratio: 1 / 1; }
  .partners-page .feat-frame--scene  { aspect-ratio: 4 / 5; }
  .partners-page .feat-frame--video  { aspect-ratio: 4 / 3; }
  .partners-page .feat-frame--launch { aspect-ratio: 3 / 4; }
  /* The desktop nudge shrank the phone to 90% inside a much wider stage */
  .partners-page .feat-frame--launch > img { transform: none; }

  /* Screenshots: whole image at its own ratio, full width, nothing cropped */
  .partners-page .feat-frame--media:not(.feat-frame--launch) > img {
    height: auto;
    object-fit: contain;
  }

  /* Engagement chart: label and value columns sized for a 316px stage so the
     bars and the gridlines keep their share of the width */
  .partners-page .feat-frame .eng-chart { --eng-label-w: 84px; }
  .partners-page .feat-frame .eng-row {
    grid-template-columns: var(--eng-label-w) 1fr 50px;
    gap: 8px;
  }
  .partners-page .feat-frame .eng-gridlines {
    inset: 0 50px 46px calc(var(--eng-label-w) + 8px);
  }
  .partners-page .feat-frame .eng-chart .eng-label { font-size: 0.6rem; line-height: 1.25; }
  .partners-page .feat-frame .eng-chart .eng-val { font-size: 0.6rem; }

  /* Four partner photos: square cells, captions scaled to them */
  .seg-photos figcaption { left: 8px; bottom: 8px; padding: 4px 9px; font-size: 0.66rem; }
}

/* Verification-yield tiers: the site turns these into horizontal bars under
   480px, but the partners-page height override kept them as thin vertical
   slivers stacked one per row. Restore the horizontal bar and let its width
   carry the tier so the comparison still reads. */
@media (max-width: 480px) {
  .partners-page .feat-frame .yield-bar {
    height: 28px;
    width: calc(28% + var(--h) * 72%);
    border-radius: 8px;
    border-bottom: 1px solid var(--blue-mid);
    align-self: flex-start;
    transform: none;
  }
  .partners-page .feat-frame .yield-step--top .yield-bar { border-color: var(--blue-deep); }
  .partners-page .feat-frame .yield-step h4 , .partners-page .feat-frame .yield-step h3{ white-space: normal; }
}

/* Revenue-stream cells on phones: the built graphic is absolutely positioned
   into a 220px window and faded out at its foot, which is right on desktop
   where the graphic is 244px tall at most. At 390px the same graphics run to
   373px, so the top-up button, "Get this deal" and the saving line were
   masked away entirely. On phones the graphic joins the flow above the copy
   and is shown whole. */
@media (max-width: 620px) {
  .partners-page .rev-section .cap-cell--half { justify-content: flex-start; }
  .partners-page .rev-section .cap-visual--art {
    position: static;
    inset: auto;
    padding: var(--pad) var(--pad) 4px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .partners-page .rev-section .cap-cell--half .cap-body { padding-top: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · HERO TYPING BAR v3 (2026-09-10)
   Restyled to match the live web app composer (mypa-web-dev): one white
   card, the typed example on the top row, an action row along the bottom
   with the Smart chip (blue sparkles) and a mic box on the left, and the
   plus box, the grey arrow box and the blue voice square on the right. The
   typewriter (#askbar-type, main.js) and the chips underneath are unchanged.
   Radius is 12px on every box per the site rule. Icons are Lucide strokes,
   like the rest of the site. The old .askbar / .askbar-tools rules above are
   now orphaned on the home page.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 128px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-hero);
  box-shadow: 0 2px 12px rgba(16, 42, 67, 0.06), 0 16px 44px rgba(30, 144, 255, 0.10);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hero-bar:hover {
  border-color: rgba(30, 144, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.12), 0 2px 12px rgba(16, 42, 67, 0.06), 0 16px 44px rgba(30, 144, 255, 0.14);
}
.hero-bar-text {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
}
.hero-bar-text #askbar-type { display: inline-block; white-space: nowrap; }
.hero-bar-caret {
  flex-shrink: 0;
  width: 2px;
  height: 18px;
  margin-left: 2px;
  background: var(--blue);
  animation: askbar-blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-bar-caret { animation: none; opacity: 0; } }
.hero-bar-actions {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-bar-chip,
.hero-bar-box,
.hero-bar-send,
.hero-bar-voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 12px;
  transition: background .15s, border-color .15s, box-shadow .2s var(--ease-out);
}
.hero-bar-chip,
.hero-bar-box {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.hero-bar-chip { gap: 8px; padding: 0 14px 0 12px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.hero-bar-box { width: 40px; }
.hero-bar-chip svg, .hero-bar-box svg, .hero-bar-send svg, .hero-bar-voice svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hero-bar-chip svg { color: var(--blue); }
.hero-bar:hover .hero-bar-chip, .hero-bar:hover .hero-bar-box { background: #F7FAFD; }
.hero-bar-plus { margin-left: auto; }
.hero-bar-send {
  width: 40px;
  background: #F1F3F6;      /* idle grey until there is text, as in the app */
  color: #8A93A6;
}
.hero-bar:hover .hero-bar-send { background: var(--blue); color: #fff; }
.hero-bar-voice {
  width: 40px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.28);
}
.hero-bar:hover .hero-bar-voice { box-shadow: 0 6px 18px rgba(30, 144, 255, 0.38); }
[dir="rtl"] .hero-bar-text { text-align: start; }
@media (max-width: 560px) {
  .hero-bar { height: 112px; }
  .hero-bar-text { top: 14px; left: 16px; right: 16px; font-size: 15px; }
  .hero-bar-actions { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .hero-bar-chip, .hero-bar-box, .hero-bar-send, .hero-bar-voice { height: 36px; }
  .hero-bar-box, .hero-bar-send, .hero-bar-voice { width: 36px; }
  .hero-bar-chip { padding: 0 12px 0 10px; font-size: 14px; }
  .hero-bar-chip svg, .hero-bar-box svg, .hero-bar-send svg, .hero-bar-voice svg { width: 18px; height: 18px; }
}
/* Hero chips share the bar's radius so the two read as one family. Inner
   controls of the bar (Smart, mic, plus, arrow, voice) stay 12px. */
.hero-ask .askbar-chips span { border-radius: var(--r-hero); }

/* ═══════════════════════════════════════════════════════════════════════
   APPS PAGE · FLOATING-ICONS HERO (2026-10-02)
   The home page's floating-icons hero now opens the apps page. Same stage
   as it had on home; the bottom is tighter because the prompt carousel
   sits right underneath it here.
   ═══════════════════════════════════════════════════════════════════════ */
.product-page main > section.hero-float {
  padding-top: clamp(128px, 15vh, 200px);
  padding-bottom: clamp(56px, 6vw, 88px);
  min-height: clamp(760px, 100vh, 1040px);
}
@media (max-width: 760px) {
  .product-page main > section.hero-float {
    min-height: clamp(680px, 92vh, 820px);
    padding-bottom: 56px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   HOME · "YOUR OWN PERSONAL ASSISTANT" CHARACTER DEMO (2026-10-02)
   The MyPA character (mypa-voice.js, v3 "Eyes", the same element as the
   web app) plays one conversation on a loop while on screen: you ask, it
   listens, thinks, then answers. Driven by the [data-voice-demo] block in
   main.js. Words light up as they are said. Without JS, or with reduced
   motion, both messages simply show.
   ═══════════════════════════════════════════════════════════════════════ */
.voice-demo-frame { overflow: visible; }
.voice-demo {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.voice-demo-char { height: 148px; display: flex; justify-content: center; }
.voice-demo-state {
  position: relative;
  margin: 0;
  width: 100%;
  height: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}
.vd-s { position: absolute; inset: 0; opacity: 0; }
/* the outgoing word goes at once; only the incoming one fades */
.voice-demo[data-state="idle"] .vd-s--idle,
.voice-demo[data-state="listening"] .vd-s--listening,
.voice-demo[data-state="thinking"] .vd-s--thinking,
.voice-demo[data-state="speaking"] .vd-s--speaking { opacity: 1; transition: opacity .3s var(--ease-out); }
.voice-demo-chat {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.vd-bubble {
  margin: 0;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.vd-bubble--you { align-self: flex-end; background: var(--blue); color: #fff; }
.vd-bubble--mypa {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.vd-bubble.is-on { opacity: 1; transform: none; }
.vd-w { opacity: 0.2; transition: opacity .22s var(--ease-out); }
.vd-w.is-on { opacity: 1; }
/* static: no JS, Motion missing, or reduced motion */
html:not(.js-on) .vd-bubble,
.voice-demo[data-state="static"] .vd-bubble { opacity: 1; transform: none; }
.voice-demo[data-state="static"] .vd-w { opacity: 1; }
html:not(.js-on) .voice-demo-state,
.voice-demo[data-state="static"] .voice-demo-state { visibility: hidden; }
@media (max-width: 560px) {
  .voice-demo-frame { aspect-ratio: auto; min-height: 400px; }
  .vd-bubble { font-size: 0.875rem; }
}

/* Apps hero (2026-10-02, later): the chip row is gone and the MyPA character
   sits above the headline. The CTA row must stay exactly where it was, so the
   centred content carries a bottom margin equal to its net growth
   (character 104 + gap 16 - removed chips 65 = 55px): margin on a centred
   flex item lifts it by half that, which cancels the half it grew. */
.hero-mascot { display: flex; justify-content: center; height: 104px; margin-bottom: 16px; }
.product-page .hero-float-content { margin-bottom: 55px; }

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL · every page (2026-10-02, Archie's request)
   Port of 21st.dev "Scroll Reveal": each section below the hero waits at
   94% size, 32px low and dimmed, and eases to full size when it reaches the
   middle of the screen, then settles back when it leaves. Driven by
   Motion's inView in main.js; only the content container moves, section
   backgrounds stay put. Off under reduced motion and without Motion, where
   everything simply shows. (Replaced two scroll-linked versions, CSS
   animation-timeline then Motion scroll(), that did not run reliably.)
   ═══════════════════════════════════════════════════════════════════════ */
main > section:not(:first-child) > .container { transform-origin: 50% 50%; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME · SCENES-REEL HERO (2026-10-02)
   Vanilla port of the 21st.dev "Prisma hero" Archie picked. A dark stage
   inset from the page edges plays one looping reel of everyday scenes
   (about 4.5s each, hard cuts) under a shade, with the headline pulled up
   word by word bottom left and the line plus one button bottom right. Prisma's pill button and 2rem corners become the
   house 12px boxes; its cream type becomes white.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page main > section.hero-scenes { padding: 76px 16px 0; }
.hs-stage {
  position: relative;
  isolation: isolate;
  height: calc(100svh - 92px);
  min-height: 560px;
  max-height: 1040px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.hs-reel {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);   /* the generated frames have soft rounded corners baked in: crop past them */
  background: #2a2118 url(assets/hero-scenes/reel.jpg?v=11) center / cover no-repeat;
}
.hs-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 15, 28, 0.5) 0%, rgba(10, 15, 28, 0.18) 45%, rgba(10, 15, 28, 0) 70%),
    linear-gradient(180deg, rgba(10, 15, 28, 0.18) 0%, rgba(10, 15, 28, 0) 34%, rgba(10, 15, 28, 0.12) 58%, rgba(10, 15, 28, 0.72) 100%);
}
.hs-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: end;
  gap: 24px clamp(24px, 4vw, 64px);
  padding: 0 clamp(20px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px);
}
.hs-title {
  margin: 0;
  color: #fff;
  font-size: clamp(2.9rem, 7.6vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-wrap: balance;
}
.hs-title-light { display: block; font-weight: 300; }
.hs-title-strong { display: block; font-weight: 700; }
.hs-w { display: inline-block; }
.hs-side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 8px; }
.hs-lead { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 1rem; line-height: 1.55; max-width: 42ch; }
.hs-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 20px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 600; font-size: 1rem;
  text-decoration: none;
  transition: gap .3s var(--ease-out), background-color .2s;
}
.hs-cta-arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--blue); color: #fff;
  transition: transform .3s var(--ease-out);
}
.hs-cta-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .hs-cta:hover { gap: 18px; }
  .hs-cta:hover .hs-cta-arrow { transform: scale(1.08); }
}
.hs-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* entrance: hidden only while JS is about to pull the words up */
.js-on .hero-scenes:not(.is-in) .hs-w,
.js-on .hero-scenes:not(.is-in) [data-hs-in] { opacity: 0; }
@media (max-width: 900px) {
  .hs-content { grid-template-columns: minmax(0, 1fr); }
  .hs-lead { max-width: 52ch; }
}
@media (max-width: 560px) {
  .home-page main > section.hero-scenes { padding: 72px 10px 0; }
  .hs-stage { height: calc(100svh - 82px); min-height: 600px; }
  .hs-title { font-size: clamp(2.5rem, 12vw, 3.4rem); }
  .hs-lead { font-size: 0.9375rem; }
}
html:not([lang="en"]) .hs-title { font-size: clamp(2.4rem, 6vw, 6rem); }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER DROPDOWNS (2026-10-02)
   Home | Product | Partners | About. Each group is a button that opens a
   12px white panel of links with a one-line description. Opens on hover
   for mouse users, on click or keyboard for everyone (main.js), closes on
   Escape, outside click or focus leaving. Phone drawer: <details> groups.
   ═══════════════════════════════════════════════════════════════════════ */
.nav-dd { position: relative; }
.nav-dd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 0; border-radius: 10px; background: none;
  font-family: "Inter", sans-serif; font-size: 0.88rem; font-weight: 500; letter-spacing: -0.012em;
  color: var(--color-ink-2);
  cursor: pointer;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.nav-dd-toggle:hover, .nav-dd.is-open .nav-dd-toggle { color: var(--color-ink); background: oklch(91% 0.01 250 / 0.5); }
.nav-dd-toggle.active { color: var(--color-accent); background: rgba(30, 144, 255, 0.10); }
.nav-dd-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-dd-caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform .2s var(--ease-out); }
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  display: grid; gap: 2px;
  width: 300px; padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s linear .18s;
  z-index: 60;
}
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav-dd.is-open .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-pill-links .nav-dd-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: normal;
  text-decoration: none;
}
.nav-pill-links .nav-dd-item:hover, .nav-pill-links .nav-dd-item:focus-visible { background: var(--blue-pale); }
.nav-dd-title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.nav-dd-sub { font-size: 0.8rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); }
.nav-dd-item[aria-current="page"] .nav-dd-title { color: var(--blue-text); }
@media (max-width: 1100px) and (min-width: 901px) {
  .nav-dd-toggle { padding: 7px 8px; font-size: 0.84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd-menu, .nav-dd-caret { transition: none; }
}

/* Phone drawer groups */
.mobile-nav-group summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 13px 16px;
  border-radius: 8px;
  font-size: 1rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary:hover { color: var(--blue); background: var(--blue-pale); }
.mobile-nav-group summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mobile-nav-group summary .nav-dd-caret { width: 12px; height: 12px; }
.mobile-nav-group[open] summary .nav-dd-caret { transform: rotate(180deg); }
.mobile-nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px 12px; }
.mobile-nav-links .mobile-nav-sub a { font-size: 0.95rem; padding: 11px 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNER SUB-PAGES (mvnos, creators, brands, providers · 2026-10-02)
   Same components as partners.html; the hero stage holds a photo instead
   of the logo animation.
   ═══════════════════════════════════════════════════════════════════════ */
.ed-hero--sub .ed-hero-stage--photo {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--blue-pale);
}
.ed-hero--sub .ed-hero-stage--photo img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   SUPPORT PAGE (2026-10-02)
   Centred hero, three groups of questions on one 760px column, then the
   form that emails help@mypa.today (support-send.php).
   ═══════════════════════════════════════════════════════════════════════ */
.partners-page main > section.support-hero { padding-top: clamp(124px, 13vw, 176px); padding-bottom: 24px; }
.support-title {
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
.support-lead { max-width: 56ch; margin: 0 auto 28px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }
.support-hero .try-cta-actions { justify-content: center; }
.support-groups { display: grid; gap: clamp(40px, 5vw, 64px); max-width: 760px; margin: 0 auto; }
.support-group-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 16px; }
.support-group .faq-list { display: grid; gap: 10px; }
.support-more { max-width: 760px; margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; color: var(--ink-2); }
.support-more a, .support-direct a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.support-more a:hover, .support-direct a:hover { text-decoration: underline; }
.support-direct { margin-top: 18px; font-size: 0.95rem; color: var(--ink-2); }
.support-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-error {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.06);
  color: #DC2626;
  font-size: 0.9rem;
}
.support-error a { color: inherit; font-weight: 600; }
/* sub-page heroes carry longer lines than the partners hero */
.ed-hero--sub .ed-hero-headline { font-size: clamp(2.3rem, 4.2vw, 3.9rem); line-height: 1.04; }
.support-hero .btn-ghost { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); color: var(--ink); }
.support-hero .btn-ghost:hover { border-color: var(--blue); }

/* Home rhythm (2026-10-02): the hero's bottom gap matches the 120px between
   every other pair of sections (60px here + the next row's 60px). */
.home-page main > section.hero-scenes { padding-bottom: 60px; }

/* ═══════════════════════════════════════════════════════════════════════
   APPS · COMING SOON (2026-10-02)
   Four white 12px boxes, two by two, between "The app that handles the
   apps" and the FAQs. Each visual recreates the v3 web app prototype:
   the Agents list with mascot faces, the booking exchange from its welcome
   demo, Create, and the Connectors catalogue.
   ═══════════════════════════════════════════════════════════════════════ */
.soon-head { max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: clamp(28px, 3.5vw, 44px); }
.soon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.soon-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.soon-visual {
  display: grid; place-items: center;
  min-height: 250px;
  padding: 28px;
  background: var(--bg-tint, #F6F8FC);
  border-bottom: 1px solid var(--line);
}
.soon-body { padding: 22px 26px 26px; }
.soon-body h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.soon-body p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.soon-num { color: var(--ink); }

/* shared bits of the recreations (web app radii: 12 box, 10 small box, 16 bubble) */
.sg-agents, .sg-chat, .sg-cxs { width: 100%; max-width: 360px; display: grid; gap: 8px; }
.sg-agent, .sg-cx, .sg-file {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.sg-face { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; }
.sg-mascot { width: 34px; height: 34px; color: #2F9BFF; filter: drop-shadow(0 2px 4px rgba(30, 144, 255, 0.25)); }
.sg-agent-txt, .sg-cx-txt, .sg-file-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sg-agent-txt b, .sg-cx-txt b, .sg-file-txt b { font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-agent-txt i, .sg-cx-txt i, .sg-file-txt i { font-style: normal; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-count {
  flex-shrink: 0; display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.sg-working { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: var(--blue-text); }
.sg-bub {
  justify-self: end; max-width: 88%;
  padding: 9px 13px;
  border-radius: 16px;
  background: var(--blue); color: #fff;
  font-size: 0.82rem; line-height: 1.4;
}
.sg-reply { margin: 2px 0 4px; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.78rem; font-weight: 500; color: var(--ink);
}
.sg-chip svg { width: 13px; height: 13px; color: var(--blue); }
.sg-files { display: grid; gap: 6px; }
.sg-file-ic { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.sg-file-ic svg { width: 15px; height: 15px; }
.sg-file-ic--flyer { background: var(--blue-pale); color: var(--blue); }
.sg-file-ic--slides { background: var(--blue-pale); color: var(--blue); }
.sg-file-ic--md { background: var(--blue-pale); color: var(--blue); }
.sg-search {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 0.8rem; color: var(--muted);
}
.sg-search svg { width: 13px; height: 13px; color: var(--muted); }
.sg-cx img { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }
.sg-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
}
@media (max-width: 760px) {
  .soon-grid { grid-template-columns: minmax(0, 1fr); }
  .soon-visual { min-height: 0; padding: 22px 18px; }
}
/* every box's visual the same height, so the dividers and titles line up */
@media (min-width: 761px) { .soon-visual { height: 300px; min-height: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   PRICING PAGE (2026-10-02)
   Centred hero (the support-hero pattern), then two 21st.dev structures in
   MyPA dress (Inter, brand blue, 12px boxes, no eyebrows):
   · Top-ups: "Volume Pricing Card" (diarmuradi/pricing-10). A tinted panel
     with a slider over the four live sizes and a big price whose digits
     spring in (main.js), beside a white card of what every top-up includes.
   · Plans, coming soon: "Pricing Section 1" (shadcnstore). Name, one line,
     price, ticked features, full-width button; the badge slot carries a
     signal-bar usage meter because the plans differ by usage.
     (tier-* names: .pp-* already belongs to the product page.)
   ═══════════════════════════════════════════════════════════════════════ */
.price-head { max-width: 620px; margin: 0 auto clamp(28px, 3.5vw, 44px); }

/* top-ups */
.tu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.tu-panel, .tu-card { border-radius: 12px; padding: clamp(24px, 3vw, 32px); }
.tu-panel { display: flex; flex-direction: column; gap: 22px; background: var(--bg-tint); border: 1px solid var(--line); }
.tu-card { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.tu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tu-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tu-pill { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; }
.tu-pill b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the slider: brand-blue fill to the thumb (--p, set by main.js), a slim
   blue pill thumb with a white rim, as in the original */
.tu-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 6px 0 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue) 0 var(--p, 33%), var(--blue-mid) var(--p, 33%) 100%);
  cursor: grab; outline: none;
}
.tu-range:active { cursor: grabbing; }
.tu-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 28px; border-radius: 999px;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(10,15,28,.25);
  transition: transform .15s var(--ease-out);
}
.tu-range::-moz-range-thumb {
  width: 8px; height: 22px; border-radius: 999px;
  background: var(--blue); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(10,15,28,.25);
}
.tu-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.tu-range:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); }
.tu-stops { position: relative; height: 22px; margin: -8px 7px 0; }
.tu-stop {
  position: absolute; left: var(--x); top: 0; transform: translateX(-50%);
  padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font: 500 0.78rem/1.4 var(--font); color: var(--muted); font-variant-numeric: tabular-nums;
}
.tu-stop:first-child { transform: none; left: -7px; }
.tu-stop:last-child { transform: none; left: auto; right: -7px; }
.tu-stop.is-on { color: var(--ink); font-weight: 700; }
.tu-sep { border: 0; border-top: 1px solid var(--line); margin: 0; }
.tu-price { display: flex; align-items: baseline; justify-content: center; margin: 0; color: var(--ink); line-height: 1; }
.tu-cur, .tu-digits { font-size: clamp(3.4rem, 6vw, 4.5rem); font-weight: 600; letter-spacing: -0.045em; }
.tu-digits { display: inline-flex; font-variant-numeric: tabular-nums; }
.tu-digits > span { display: inline-block; }
.tu-per { margin-left: 8px; font-size: 1.05rem; color: var(--muted); letter-spacing: 0; }
.tu-cta { width: 100%; justify-content: center; gap: 8px; }
.tu-cta svg { width: 18px; height: 18px; }
.tu-card h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tu-card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.tu-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 16px; }
.tu-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.tu-tick { flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--blue); color: #fff; }
.tu-tick svg { width: 12px; height: 12px; }

/* plans */
.price-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tier-card {
  display: flex; flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.tier-card-head { margin-bottom: 20px; }
.tier-card-top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.tier-name { margin: 0; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.tier-desc { margin: 0; min-height: 2.9em; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.tier-usage { display: inline-flex; align-items: flex-end; gap: 7px; padding: 5px 10px; border-radius: 12px; background: var(--blue-pale); white-space: nowrap; }
.tier-usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.tier-usage-bars span { width: 3px; border-radius: 1px; background: var(--blue-mid); }
.tier-usage-bars span:nth-child(1) { height: 4px; }
.tier-usage-bars span:nth-child(2) { height: 7px; }
.tier-usage-bars span:nth-child(3) { height: 10px; }
.tier-usage-bars span:nth-child(4) { height: 12px; }
.tier-usage-bars span.on { background: var(--blue); }
.tier-usage-label { font-size: 0.72rem; font-weight: 600; line-height: 1; color: var(--blue-text); }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 0 22px; color: var(--ink); }
.tier-price b { font-size: clamp(2rem, 2.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.tier-freq { font-size: 0.875rem; color: var(--muted); }
.tier-features { list-style: none; margin: 0 0 24px; padding: 0; display: grid; align-content: start; gap: 12px; flex: 1; }
.tier-features li { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }
.price-check { flex-shrink: 0; width: 16px; height: 16px; color: var(--blue); }
.tier-btn {
  display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-tint);
  color: var(--muted);
  font-size: 0.9rem; font-weight: 600;
  cursor: default;
}
.price-note { margin: clamp(20px, 2.5vw, 28px) 0 0; text-align: center; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 1080px) {
  .price-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .tu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .price-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .tier-desc { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SITE FOOTER · SECTIONED (2026-10-02, every page)
   Port of 21st.dev "Footer 2" (efferd/footer-2) on the brand-blue surface:
   a brand column then four link columns (Product, Partners, About, Legal),
   a hairline, a bar with the social icons left and the store badges right,
   a hairline, then the disclaimer, address and copyright. Replaces the
   single row of links (.site-footer-nav, now unused). Built by the
   scratchpad build_footer.py; the social icons appear once their links are
   filled in there.
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer { padding: clamp(56px, 7vw, 88px) 0 clamp(28px, 3.6vw, 40px); }
.sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(36px, 4.4vw, 52px);
}
.sf-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
/* the mark is the blue logo.png; on the blue footer it is drawn white */
.sf-logo img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.sf-logo span { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.sf-tagline { margin: 14px 0 0; max-width: 26ch; font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.86); }
.sf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.sf-col-title { margin: 0 0 16px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,0.7); }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sf-col a { color: #fff; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; transition: color .2s var(--ease-out); }
.sf-col a:hover { color: rgba(255,255,255,0.72); }
.sf-col a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.5); }
.sf-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.28);
}
.sf-social { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.sf-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  color: #fff;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.sf-social a:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.sf-social svg { width: 18px; height: 18px; }
.sf-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
/* store badges sit on the blue here, so they go black as the stores do */
.site-footer .store-badge { padding: 8px 16px; border-radius: 12px; background: var(--ink); border-color: rgba(255,255,255,0.22); }
.site-footer .store-badge:hover { background: #000; border-color: #fff; }
.site-footer .store-badge:focus-visible { outline-color: #fff; }
.site-footer-chrome { padding-top: clamp(20px, 2.4vw, 28px); }
.site-footer-disclaimer { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; }
.sf-copy { margin: 0; font-size: 0.8rem; line-height: 1.55; color: rgba(255,255,255,0.88); }
.sf-copy::before { content: "\00A9\00A0"; }
@media (max-width: 960px) {
  .sf-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .sf-col ul { gap: 0; }
  .sf-col a { display: inline-flex; align-items: center; min-height: 40px; }
  .sf-stores { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPARE PAGE (2026-10-02)
   Port of 21st.dev "Feature Comparison Table" (olewandowski1/comparison-3):
   grouped rows, a sticky header row, MyPA's column tinted blue-pale. One
   white 12px box; on narrow screens it scrolls sideways with the feature
   names pinned on the left. Every icon carries hidden text (.cmp-sr) so
   the table reads as words to screen readers and to AI crawlers.
   ═══════════════════════════════════════════════════════════════════════ */
.cmp-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0 0 18px; padding: 0; font-size: 0.85rem; color: var(--ink-2); }
.cmp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  outline: none;
}
.cmp-wrap:focus-visible { box-shadow: 0 0 0 3px var(--blue-pale), 0 0 0 4px var(--blue); }
.cmp-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; }
.cmp-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); text-align: center; vertical-align: middle; }
.cmp-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 18px 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.cmp-corner { text-align: left !important; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cmp-name { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.cmp-sub { display: block; margin-top: 3px; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.cmp-table thead .cmp-mine { background: var(--blue-pale); border-top-left-radius: 0; }
.cmp-table thead .cmp-mine .cmp-name { color: var(--blue-text); font-size: 1.05rem; }
.cmp-table td.cmp-mine { background: rgba(235,245,255,0.7); }
.cmp-feature { text-align: left !important; font-weight: 500; color: var(--ink); width: 26%; min-width: 210px; }
.cmp-group th {
  padding: 10px 14px;
  text-align: left;
  background: var(--bg-tint);
  font-size: 0.8rem; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
/* the feature column stays in view while the table scrolls sideways */
.cmp-feature, .cmp-corner { position: sticky; left: 0; z-index: 1; background: #fff; }
.cmp-corner { z-index: 3; }
.cmp-group th { position: sticky; left: 0; }
.cmp-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.cmp-ico svg { width: 13px; height: 13px; }
.cmp-y .cmp-ico { background: var(--ink-2); color: #fff; }
.cmp-mine.cmp-y .cmp-ico, .cmp-legend .cmp-y .cmp-ico { background: var(--blue); }
.cmp-p .cmp-ico { color: var(--muted); }
.cmp-p .cmp-ico svg { width: 15px; height: 15px; }
.cmp-n .cmp-ico { background: var(--line-soft); color: #A3ADC4; }
.cmp-soon {
  display: inline-block; padding: 3px 8px;
  border-radius: 6px;
  background: #FFF4E0; color: #9A5B00;
  font-size: 0.72rem; font-weight: 700;
}
.cmp-na { font-size: 0.75rem; color: #A3ADC4; }
.cmp-text { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.cmp-mine .cmp-text { color: var(--ink); }
.cmp-note { display: block; margin-top: 4px; font-size: 0.7rem; line-height: 1.3; color: var(--muted); }
.cmp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-checked { max-width: 70ch; margin: 18px auto 0; text-align: center; font-size: 0.85rem; line-height: 1.6; color: var(--muted); }
.cmp-checked a, .cmp-sources a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.cmp-checked a:hover, .cmp-sources a:hover { text-decoration: underline; }
.cmp-sources { max-width: 760px; margin: 0 auto; }
.cmp-sources-title { margin: 0 0 12px; font-size: 1.1rem; letter-spacing: -0.02em; }
.cmp-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); }
.cmp-sources b { color: var(--ink); margin-right: 4px; }
@media (max-width: 720px) {
  .cmp-feature { min-width: 150px; font-size: 0.8rem; }
  .cmp-table th, .cmp-table td { padding: 10px 10px; }
}
.cmp-tm { margin: 16px 0 0; font-size: 0.8rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════
   APPS · ROWS SHOW THE REAL WEB APP (2026-10-02)
   Each feature row's frame holds a screenshot of the matching v3 web app
   screen (assets/apps/v3-*.png/.webp, 2x), floated on a pale blue wash with
   the app's own 12px card radius, scaled to fit the 4:3 frame.
   ═══════════════════════════════════════════════════════════════════════ */
.feat-frame.feat-frame--shot {
  aspect-ratio: 4 / 3;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(12px, 1.8vw, 24px);
  background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%);
}
/* the voice row sits on the same wash so every row reads as one set */
.product-page .feat-frame.voice-demo-frame { background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); }
.feat-frame--shot picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.feat-frame--shot img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 720px) {
  .feat-frame.feat-frame--shot { aspect-ratio: auto; padding: 10px; }
  .feat-frame--shot picture { height: auto; }
  .feat-frame--shot img { width: 100%; max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING HERO (2026-10-02)
   Port of 21st.dev "Financial Hero" (lavikatiyar/hero-section): text on the
   left, a fanned stack of cards on the right over a faint grid. The cards
   are the three ways to pay: Apple Pay, Google Pay and PayPal. They slide in
   one after another (main.js) and lift on hover.
   ═══════════════════════════════════════════════════════════════════════ */
.pricing-page main > section.pay-hero { position: relative; overflow: hidden; padding: clamp(112px, 12vw, 150px) 0 clamp(36px, 4.5vw, 60px); }
.pay-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 30%, transparent 75%);
  opacity: 0.8;
}
.pay-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); min-height: clamp(400px, 50vh, 540px); }
.pay-hero-title { margin: 0 0 20px; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.045em; color: var(--ink); }
.pay-hero-lead { max-width: 44ch; margin: 0 0 28px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.pay-hero-cta .btn { gap: 8px; }
.pay-hero-cta svg { width: 18px; height: 18px; }
.pay-hero-methods { margin: 18px 0 0; font-size: 0.9rem; color: var(--muted); }
.pay-hero-cards { position: relative; height: clamp(320px, 34vw, 420px); }
.pay-card {
  --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; left: 50%; top: 50%;
  width: min(300px, 72%);
  aspect-ratio: 1.586;
  padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 22px;
  border-radius: 12px;
  box-shadow: 0 26px 50px -18px rgba(10,15,28,0.38), 0 8px 18px -8px rgba(10,15,28,0.2);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 0.35s var(--ease-out);
}
.pay-card:hover { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) - 12px)) rotate(calc(var(--r) * 0.5)); }
.pay-card-head { display: flex; align-items: center; gap: 12px; }
.pay-card img { width: auto; height: 34px; }
.pay-card b { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.pay-card-chip { width: 40px; height: 30px; border-radius: 6px; background: rgba(255,255,255,0.28); }
.pay-card--paypal { --x: 70px; --y: -96px; --r: 5deg; background: #003087; color: #fff; }
.pay-card--gpay { --x: 12px; --y: -14px; --r: -3deg; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.pay-card--gpay .pay-card-chip { background: var(--bg-cool); }
.pay-card--apple { --x: -46px; --y: 72px; --r: -7deg; background: var(--ink); color: #fff; }
@media (max-width: 900px) {
  .pay-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pay-hero-cards { height: 300px; }
  .pay-card { width: min(250px, 64%); }
  .pay-card--paypal { --x: 48px; --y: -80px; }
  .pay-card--gpay { --y: -12px; }
  .pay-card--apple { --x: -36px; --y: 58px; }
  .pay-hero-cards { height: 340px; }
}
@media (prefers-reduced-motion: reduce) { .pay-card { transition: none; } }

/* PRICING · "MyPA tokens are not ChatGPT tokens" (2026-10-02, v2): split
   head, then a bento of white 12px boxes, each with a built graphic on the
   blue wash: one balance feeding every AI (tall, left), relative token use
   (no numbers), and the app's own AI picker with Smart selected. The token
   pulses and meter fills only run while in view (main.js, Motion inView). */
.tok-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tok-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
.tok-head h2 { margin: 0; }
.tok-head p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.tok-bento { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.tok-box { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.tok-box--hub { grid-row: span 2; }
.tok-art { flex: 1; display: grid; place-items: center; padding: clamp(18px, 2.2vw, 32px); background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); border-bottom: 1px solid var(--line); }
.tok-body { padding: 22px 24px 24px; }
.tok-body h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tok-body p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

/* one balance, every AI */
.tok-hub { display: block; width: 100%; max-width: 560px; height: auto; overflow: visible; }
.tok-hub text { font-family: inherit; }
.tok-line { fill: none; stroke: var(--blue-mid); stroke-width: 2; }
.tok-pulse { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 9 200; stroke-dashoffset: 9; opacity: 0; }
.tok-art.is-on .tok-pulse { opacity: 1; animation: tok-flow 2.4s linear infinite; animation-delay: calc(var(--i) * -0.4s); }
@keyframes tok-flow { to { stroke-dashoffset: -100; } }
.tok-tile rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; filter: drop-shadow(0 1px 3px rgba(10, 15, 28, 0.08)); }
.tok-tile-name { font-size: 14px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }
.tok-core rect { fill: #fff; stroke: var(--blue); stroke-width: 1.5; filter: drop-shadow(0 4px 14px rgba(30, 144, 255, 0.14)); }
.tok-core-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; fill: var(--ink); }
.tok-core-sub { font-size: 14px; fill: var(--muted); }

/* each AI costs what it costs */
.tok-meter { width: 100%; max-width: 440px; display: grid; gap: 14px; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.tok-meter-row { display: grid; gap: 7px; }
.tok-meter-row em { font-style: normal; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.tok-meter-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tok-meter-cells i { position: relative; overflow: hidden; height: 10px; border-radius: 3px; background: var(--blue-pale); }
.tok-meter-cells i.on::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: left center; }
.tok-anim .tok-meter-cells i.on::after { transform: scaleX(0); transition: transform 0.3s var(--ease-out) calc(var(--d) * 45ms); }
.tok-anim.is-on .tok-meter-cells i.on::after { transform: none; }
.tok-meter-axis { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 0.75rem; color: var(--muted); }

/* make them go further: the app's AI picker */
.tok-pick { width: 100%; max-width: 380px; display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.tok-pick-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tok-pick-row.is-sel { border-color: var(--blue); background: var(--blue-pale); }
.tok-pick-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink); }
.tok-pick-ico svg { width: 18px; height: 18px; }
.tok-pick-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tok-pick-txt b { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.tok-pick-txt em { font-style: normal; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.tok-pick-tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--blue-text); }
.tok-pick-tick svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .tok-head, .tok-bento { grid-template-columns: minmax(0, 1fr); }
  .tok-box--hub { grid-row: auto; }
}
@media (max-width: 560px) {
  .tok-art { padding: 14px 10px; }
  .tok-tile-name { font-size: 19px; }
  .tok-core-title { font-size: 19px; }
  .tok-core-sub { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tok-pulse { display: none; }
  .tok-anim .tok-meter-cells i.on::after { transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   APPS · CHAPTERS + MID-PAGE SIGN-UP (2026-10-02)
   The nine feature rows sit in three chapters (built by mypa-site-tools/
   build_apps_chapters.py), each opened by a centred heading and one line.
   After chapter two, one slim brand-blue sign-up band.
   ═══════════════════════════════════════════════════════════════════════ */
.product-page main > section.apps-chapter { padding: clamp(80px, 10vw, 128px) 0 clamp(4px, 1vw, 12px); text-align: center; }
.apps-chapter-title { margin: 0 0 12px; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.apps-chapter-lead { max-width: 52ch; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.product-page main > section.apps-midcta { padding: clamp(56px, 7vw, 88px) 0 0; }
.midcta-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
}
.midcta-text h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; color: #fff; }
.midcta-text p { margin: 0; color: rgba(255,255,255,0.9); }
.midcta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.apps-midcta .store-badge { padding: 8px 16px; border-radius: 12px; background: var(--ink); border-color: rgba(255,255,255,0.22); }
.apps-midcta .store-badge:hover { background: #000; border-color: #fff; }
.midcta-web { background: #fff; border: 1px solid #fff; color: var(--ink); }
.midcta-web:hover { background: rgba(255,255,255,0.9); color: var(--ink); }
@media (max-width: 720px) { .midcta-card { flex-direction: column; align-items: flex-start; } }
.midcta-text { flex: 1 1 260px; }
.midcta-actions { flex: 0 0 auto; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME PREVIEW (2026-10-02, home-preview.html only)
   Both audiences first ("One assistant. Two ways in."), then the product,
   the latest releases and the team. Site box logic throughout: white 12px
   boxes with a border and soft shadow, real screens framed on the blue
   wash, boxed facts and boxed buttons. The hero video above is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page main > section.fp-section { padding: clamp(32px, 4vw, 56px) 0; }
.home-page main > section.fp-section--top { padding-top: clamp(48px, 6vw, 80px); }
.fp2-head { max-width: 900px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.fp2-head h2 { margin: 0 0 10px; font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -0.04em; }
.fp2-head p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.fp2-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fp2-path, .fp2-card, .fp2-news, .fp2-team {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.fp2-path { display: flex; flex-direction: column; }
.fp2-frame { display: grid; place-items: center; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); border-bottom: 1px solid var(--line); }
.fp2-frame--photo { background: var(--bg-tint); }
.fp2-frame--photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp2-frame--shot { padding: clamp(12px, 1.6vw, 20px); }
.fp2-frame--shot img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fp2-frame--shot picture { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 0; }
.fp2-voice { position: absolute; inset: 0; display: grid; place-items: center; background: transparent; border: 0; box-shadow: none; padding: 0; }
.fp2-path-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(22px, 2.6vw, 32px); flex: 1; }
.fp2-path-title { margin: 0; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); }
.fp2-path-body > p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.fp2-path-body .link-facts--boxed { width: 100%; max-width: none; margin: 0; }
.fp2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; }
.fp2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fp2-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.fp2-card:hover, .fp2-news:hover { box-shadow: var(--shadow-md); border-color: #D5DCEB; }
.fp2-card-body { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); }
.fp2-card-title { font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.fp2-card-dek { font-size: 0.98rem; line-height: 1.55; color: var(--ink-2); }
.fp2-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; color: var(--blue-text); }
.fp2-card-link svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.fp2-card:hover .fp2-card-link svg { transform: translateX(3px); }
.fp2-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.2vw, 26px); }
.fp2-section-head h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.035em; }
.fp2-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fp2-news { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.fp2-news-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.fp2-news-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp2-news-body { display: grid; gap: 8px; padding: 20px 22px 22px; }
.fp2-news-title { font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.fp2-news-meta { font-size: 0.8rem; color: var(--muted); }
.fp2-news-dek { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
.fp2-team { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.fp2-team .fp2-frame { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
@media (max-width: 1000px) {
  .fp2-paths, .fp2-two, .fp2-team { grid-template-columns: minmax(0, 1fr); }
  .fp2-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp2-team .fp2-frame { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .fp2-three { grid-template-columns: minmax(0, 1fr); }
  .fp2-section-head { flex-direction: column; align-items: flex-start; }
}
/* titles stay one colour and upright (site rule 2026-09-01) */
.fp2-card-title .serif, .fp2-path-title .serif, .fp2-head .serif, .fp2-section-head .serif { color: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
/* the release images are app screens on a wide wash: crop in so the screen reads */
.fp2-news-media img { transform: scale(1.45); transition: transform 0.5s var(--ease-out); }
.fp2-news:hover .fp2-news-media img { transform: scale(1.5); }
/* card actions sit at the foot of each box (2026-10-02, CTA consistency) */
.fp2-card-body, .fp2-news-body { flex: 1; grid-template-rows: auto auto auto 1fr; align-content: start; justify-items: start; }
.fp2-card-body { grid-template-rows: auto auto 1fr; }
.fp2-card-body .btn, .fp2-news-body .btn { align-self: end; margin-top: 6px; }
.fp2-card, .fp2-news { transition: none; }
.fp2-card:hover, .fp2-news:hover { box-shadow: var(--shadow-sm); border-color: var(--line); }
.fp2-news:hover .fp2-news-media img { transform: scale(1.45); }

/* ═══════════════════════════════════════════════════════════════════════
   WIDER SECTIONS (2 Oct 2026, Archie): every section below the hero, on
   every page, and the footer share the nav's grid (1480px max, 6vw sides),
   so their edges line up with the logo and the Sign up button. At 1440 wide
   that is about 1267px of content, up from 1056. Heroes keep their own
   width (first section of main is skipped); reading columns (FAQ, article
   body, CTA cards, section heads) keep their own narrower max-widths.
   Last in the file, and one step more specific than the per-page 1120px
   rules for home, apps, partners and company, so it wins everywhere.
   ═══════════════════════════════════════════════════════════════════════ */
body main > section:first-of-type ~ * .container:not(.container-narrow),
body .site-footer .container,
body .post .container {
  max-width: 1480px;
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}
/* Articles sit on the same grid: the hero image spans it, and everything
   else keeps the 736px reading column it had, centred on the grid. */
body .post .container > :not(.post-figure) { max-width: 736px; margin-left: auto; margin-right: auto; }
/* The web app page's split (screen + copy) was the one full-bleed block;
   it now sits on the grid as a 12px box like every other section. */
body .webapp-pair-section { padding: clamp(24px, 3vw, 40px) clamp(24px, 6vw, 96px) 0; }
body .webapp-pair { max-width: calc(1480px - 2 * clamp(24px, 6vw, 96px)); margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
/* Small print stays a readable length on the wider grid */
.price-note { max-width: 720px; margin-left: auto; margin-right: auto; }
.partners-page .stat-trio-source { max-width: 760px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME BENTO (3 Oct 2026, Archie): "One assistant. Two ways in." is no
   longer four equal boxes. Each audience gets a large box (media beside the
   text) with a small product box next to it: 8/4, then 4/8 mirrored. Boxes
   on one row share a height; the small box's screen grows to fill it. The
   releases are one compact box of hairline rows. The team box is unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
.fp3-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.fp3-box { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.fp3-big { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.fp3-small { grid-column: span 4; }
.fp3-media { position: relative; }
.fp3-big .fp3-media { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line); }
/* mirrored: the text keeps the wider column, the photo sits on the outside */
.fp3-big--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.fp3-big--flip .fp3-media { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.fp3-big .fp3-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp3-big .fp2-voice { padding: clamp(18px, 2vw, 28px); }
.fp3-media--partner > img { object-position: 74% 50%; }
/* the small box's screen fills whatever height the row gives it */
.fp3-small .fp3-media { --pad: clamp(14px, 1.6vw, 22px); flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
.fp3-small .fp3-media > img,
.fp3-small .fp3-media > picture { position: absolute; top: var(--pad); left: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); display: block; }
.fp3-small .fp3-media > img,
.fp3-small .fp3-media > picture img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.fp3-small .fp2-card-body { flex: none; }

.fp3-news { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.fp3-news-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 2vw, 28px); padding: 16px clamp(16px, 2vw, 24px); }
.fp3-news-row + .fp3-news-row { border-top: 1px solid var(--line-soft); }
.fp3-news-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); }
.fp3-news-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); }
.fp3-news-text { display: grid; gap: 4px; min-width: 0; }
.fp3-news-text .fp2-news-dek { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1180px) {
  .fp3-big { grid-template-columns: minmax(0, 1fr); }
  .fp3-big .fp3-media { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .fp3-big--flip .fp3-media { order: 0; }
}
@media (max-width: 860px) {
  .fp3-big, .fp3-small { grid-column: 1 / -1; }
  .fp3-small .fp3-media { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .fp3-news-row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .fp3-news-row .btn { grid-column: 2; justify-self: start; }
  .fp3-news-text .fp2-news-dek { display: none; }
}

/* HOME TEAM COMPANIES (3 Oct 2026, Archie): the team box's picture is the
   founders' past companies, a 2x2 grid of white logo tiles on the blue
   wash, each named underneath. (A faces grid was tried first, then dropped.) */
.fp3-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: stretch; gap: clamp(8px, 1vw, 12px); padding: clamp(12px, 1.4vw, 18px); background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); }
.fp3-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 140px; margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.fp3-logo img { display: block; width: auto; height: auto; object-fit: contain; }
.fp3-logo--wide img { max-width: 72%; max-height: 40px; }
.fp3-logo--mark img { width: 52px; height: 52px; }
.fp3-logo figcaption { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
@media (min-width: 1001px) {
  .fp2-team { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .fp2-team .fp3-logos { min-height: 400px; }
}
/* the Rentalcars file carries its own margins, so it gets more room */
.fp3-logo--padded img { max-width: 88%; max-height: 64px; }
@media (max-width: 1000px) { .fp2-team .fp3-logos { aspect-ratio: auto; } .fp3-logo { min-height: 116px; gap: 10px; padding: 14px; } }
/* the text sits centred beside the logos instead of leaving a gap above the button */
.fp2-team .fp2-path-body { justify-content: center; }
.fp2-team .fp2-actions { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNER PAGES v2 (3 Oct 2026): built graphics for the rewritten creators
   and brands pages. Sections: two creators, one template, different
   sections switched on. Meal plan: a shopper's question and the week back.
   ═══════════════════════════════════════════════════════════════════════ */
.feat-frame--sections, .feat-frame--meal { background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); padding: clamp(14px, 2vw, 28px); }
.secp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); width: 100%; align-self: center; }
.secp { padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.secp-title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.secp-core { margin: 4px 0 12px; font-size: 0.72rem; line-height: 1.4; color: var(--muted); }
.secp ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.secp-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.8rem; color: var(--muted); }
.secp-row.is-on { border-color: var(--blue); background: var(--blue-pale); color: var(--ink); }
.secp-ic { display: grid; place-items: center; flex: none; width: 16px; height: 16px; }
.secp-ic svg { width: 16px; height: 16px; }
.secp-name { flex: 1; min-width: 0; font-weight: 600; }
.secp-toggle { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--line); }
.secp-toggle i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 15, 28, 0.2); }
.secp-row.is-on .secp-toggle { background: var(--blue); }
.secp-row.is-on .secp-toggle i { left: 14px; }

.mealp { display: grid; gap: 12px; width: 100%; max-width: 420px; align-self: center; justify-self: center; }
.mealp-you { justify-self: end; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 0.9rem; line-height: 1.45; }
.mealp-card { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.mealp-head { margin: 0 0 8px; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.mealp-card ul { margin: 0; padding: 0; list-style: none; }
.mealp-card li { display: flex; gap: 12px; padding: 7px 0; font-size: 0.86rem; color: var(--ink-2); }
.mealp-card li + li { border-top: 1px solid var(--line-soft); }
.mealp-card li b { flex: none; width: 34px; font-weight: 600; color: var(--muted); }
.mealp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.mealp-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .secp-pair { grid-template-columns: minmax(0, 1fr); } }
.mealp-say { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.offerp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.offerp-tag { grid-column: 1 / -1; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.offerp-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.offerp-sub { grid-column: 1; margin: 0; font-size: 0.78rem; color: var(--muted); }
.offerp .mealp-btn { grid-column: 2; grid-row: 2 / span 2; }
.loyp { margin: 0; padding: 0; list-style: none; }
.loyp li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 0.86rem; color: var(--ink-2); }
.loyp li + li { border-top: 1px solid var(--line-soft); }
.loyp-chip { flex: none; padding: 3px 9px; border: 1px solid var(--blue); border-radius: 12px; background: var(--blue-pale); font-size: 0.72rem; font-weight: 600; color: var(--blue-text); }
/* transparent phone mockups stand on the wash, with no card behind them */
.feat-frame--cutout img { background: none; border: 0; border-radius: 0; box-shadow: none; }
/* a six-step timeline (MVNO launch) runs three across, not four and two */
@media (min-width: 901px) { .partners-page .hiw-timeline:has(> .hiw-step:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════
   LEGAL PAGES v2 (3 Oct 2026): the legal pack, built by build_legal.py.
   The document keeps its 760px reading column; a list of every legal
   document sits beside it on wide screens and below it on narrow ones.
   Plus the /legal hub, wide tables, the cookie status line and the
   footer's Cookie settings button.
   ═══════════════════════════════════════════════════════════════════════ */
.legal-layout { display: grid; grid-template-columns: minmax(0, 760px) 248px; justify-content: center; gap: clamp(32px, 4vw, 64px); align-items: start; }
.legal-layout .legal-doc { max-width: none; margin: 0; }
.legal-nav { position: sticky; top: 96px; margin-top: 24px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.legal-nav-title { margin: 0 0 8px; padding: 0 8px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.legal-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-nav a { display: block; padding: 7px 8px; border-radius: 12px; font-size: 0.88rem; color: var(--ink-2); text-decoration: none; }
.legal-nav a:hover { background: var(--bg-tint); color: var(--ink); }
.legal-nav a[aria-current="page"] { background: var(--blue-pale); color: var(--ink); font-weight: 600; }
@media (max-width: 1080px) {
  .legal-layout { grid-template-columns: minmax(0, 760px); }
  .legal-nav { position: static; margin: 0 0 64px; }
}
.legal-table { overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--line); border-radius: 12px; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-tint); font-weight: 600; color: var(--ink); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-doc h4 { margin: 20px 0 6px; font-size: 1rem; font-weight: 600; color: var(--ink); }

.legal-hub { display: grid; gap: 12px; max-width: 900px; margin: 24px auto 0; padding: 0; list-style: none; }
.legal-hub-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.legal-hub-row h2 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.legal-hub-row p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.legal-hub-row .btn { flex: none; }
.legal-hub-note { max-width: 900px; margin: 24px auto 96px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 560px) { .legal-hub-row { flex-direction: column; align-items: flex-start; } }

.cookie-banner-status { display: block; margin-top: 6px; font-weight: 600; }
.sf-col .sf-linkbtn { padding: 0; background: none; border: 0; font: inherit; color: #fff; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: color .2s var(--ease-out); }
.sf-col .sf-linkbtn:hover { color: rgba(255,255,255,0.72); }
.sf-col .sf-linkbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 720px) { .sf-col .sf-linkbtn { display: inline-flex; align-items: center; min-height: 40px; } }

/* ═══════════════════════════════════════════════════════════════════════
   APPS PAGE (3 Oct 2026, Archie): every screen row except the first fills
   its box: the screenshot's own white edge is the edge of the box, no blue
   wash around it. The box takes the screen's own shape; tall screens are
   capped and show their top. Plus the "Use MyPA wherever you are" strip.
   ═══════════════════════════════════════════════════════════════════════ */
.product-page .feat-frame.feat-frame--shot { display: block; aspect-ratio: auto; padding: 0; background: #fff; }
.product-page .feat-frame--shot picture { display: block; width: 100%; height: auto; }
.product-page .feat-frame--shot img { display: block; width: 100%; height: auto; max-width: none; max-height: 620px; object-fit: cover; object-position: top center; border: 0; border-radius: 0; box-shadow: none; }

.apps-channels .ch-head { max-width: 720px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.apps-channels .ch-head h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.035em; }
.apps-channels .ch-head h2 .serif { color: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
.apps-channels .ch-head p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.ch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ch-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.ch-art { display: grid; place-items: center; height: 132px; margin-bottom: 8px; overflow: hidden; border-radius: 12px; background: linear-gradient(160deg, #F4F8FF 0%, #E8F1FE 100%); }
.ch-title { margin: 0; padding: 0 4px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.ch-text { margin: 0; padding: 0 4px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.ch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 8px 4px 0; }
.ch-actions .btn { min-height: 40px; padding: 0 14px; font-size: 0.88rem; }
.store-badge--sm { gap: 7px; padding: 6px 10px; border-radius: 12px; background: var(--ink); border-color: var(--ink); }
.store-badge--sm .store-badge-logo { width: 15px; height: 15px; }
.store-badge--sm .store-badge-small { font-size: 0.56rem; }
.store-badge--sm .store-badge-big { font-size: 0.8rem; }
/* glimpses */
.ch-phone { display: grid; place-items: center; width: 64px; height: 118px; margin-top: 28px; border: 4px solid var(--ink); border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: var(--shadow-md); }
.ch-phone img { width: 30px; height: 30px; }
.ch-browser { display: flex; flex-direction: column; width: 82%; height: 104px; margin-top: 28px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: var(--shadow-md); }
.ch-dots { display: flex; gap: 4px; padding: 7px 8px 0; }
.ch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.ch-url { align-self: center; margin-top: -9px; padding: 2px 8px; border-radius: 12px; background: var(--bg-tint); font-size: 0.6rem; color: var(--muted); }
.ch-page { display: grid; justify-items: center; gap: 5px; padding-top: 12px; }
.ch-page img { width: 22px; height: 22px; }
.ch-page b { display: block; width: 60%; height: 6px; border-radius: 3px; background: var(--line-soft); }
.ch-page b + b { width: 40%; }
.ch-art--chat { align-content: center; justify-items: stretch; gap: 6px; padding: 10px 12px; }
.ch-app { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.ch-app img { width: 16px; height: 16px; }
.ch-chat { display: grid; gap: 6px; }
.ch-chat p { margin: 0; max-width: 88%; padding: 6px 9px; border-radius: 12px; font-size: 0.72rem; line-height: 1.35; }
.ch-you { justify-self: end; background: var(--blue); color: #fff; }
.ch-mypa { justify-self: start; background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
@media (max-width: 1000px) { .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } }
/* creators: talking avatar and shop glimpses (3 Oct 2026) */
.avp { display: grid; justify-items: center; gap: 10px; width: 100%; align-self: center; }
.avp-stage { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; width: min(220px, 70%); aspect-ratio: 9 / 16; max-height: 100%; padding: 18px 14px; border-radius: 12px; background: linear-gradient(180deg, #16213A 0%, #0A0F1C 100%); box-shadow: var(--shadow-md); }
.avp-face { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(160deg, #4BA6FF 0%, #1577E0 100%); color: #fff; box-shadow: 0 0 0 6px rgba(75, 166, 255, 0.18); }
.avp-face svg { width: 52px; height: 52px; }
.avp-state { font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.avp-wave { display: flex; align-items: center; gap: 4px; height: 28px; }
.avp-wave i { display: block; width: 4px; height: var(--h); border-radius: 2px; background: #4BA6FF; }
.avp-caption { margin: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); font-size: 0.74rem; line-height: 1.4; color: #fff; text-align: center; }
.avp-label { margin: 0; font-size: 0.74rem; color: var(--muted); }
.shp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shp-item { display: grid; gap: 4px; }
.shp-img { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--bg-tint); color: var(--ink-2); }
.shp-img svg { width: 34px; height: 34px; }
.shp-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.shp-price { font-size: 0.8rem; color: var(--muted); }
.avp-stage { width: min(184px, 56%); gap: 10px; padding: 16px 12px; }
.avp-face { width: 76px; height: 76px; }
.avp-face svg { width: 42px; height: 42px; }
.shp-img { aspect-ratio: 16 / 10; }
.shp-img svg { width: 28px; height: 28px; }
/* consent tick box on the partner and contact forms (3 Oct 2026): never
   pre-ticked, required, and the form will not go through without it */
.field-check .check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; font-weight: 400; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.field-check input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--blue); cursor: pointer; }
.field-check a { color: var(--blue-text); }
.field-error { margin: 0 0 0 28px; font-size: 0.8rem; font-weight: 600; color: #B42318; }
/* footer AI notice (legal pack, PDF 06 Appendix A, 3 Oct 2026) */
.site-footer-ai { margin: 0 0 10px; font-size: 0.82rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
.site-footer-ai a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* apps: the Connectors card (3 Oct 2026), in the web app's own style, fills its box */
.product-page .feat-frame.feat-frame--conn { display: block; aspect-ratio: auto; padding: 0; background: #fff; }
.cn { padding: 18px 18px 14px; }
.cn-head { display: grid; gap: 3px; margin-bottom: 12px; }
.cn-head b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cn-head span { font-size: 0.8rem; color: var(--muted); }
.cn-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.82rem; color: var(--muted); }
.cn-search svg { width: 15px; height: 15px; }
.cn-label { margin: 14px 0 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cn ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; }
.cn-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.cn-row + .cn-row { border-top: 1px solid var(--line-soft); }
.cn-logo { flex: none; width: 26px; height: 26px; object-fit: contain; }
.cn-name { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cn-name b { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.cn-name span { font-size: 0.74rem; color: var(--muted); }
.cn-btn { flex: none; padding: 5px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.76rem; font-weight: 600; color: var(--ink); }
.cn-state { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; color: #15803D; }
.cn-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
/* compare: the answer first (3 Oct 2026, GEO review) */
.cmp-short { max-width: 860px; margin: 0 auto clamp(20px, 2.4vw, 28px); padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.cmp-short-title { margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.cmp-short ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); }
.tu-sizes { margin-top: 8px; font-size: 0.9rem; color: var(--ink-2); }
/* links from a core page to the guide that goes deeper (3 Oct 2026, GEO review) */
.guide-links { margin: 18px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.guide-links a { color: var(--blue-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faq-section .guide-links, .soon-section .guide-links { text-align: center; }

/* APPS HERO TYPING BAR (3 Oct 2026, Archie: "update the typing bar for the
   latest one"): the live app's row. The Smart chip with the wand on the left;
   on the right the boxed plus, the boxed microphone, the send square (an
   arrow) and the blue voice box. No glow on blue, per the app's rules. One
   CTA underneath, larger. */
.hero-bar-voice, .hero-bar:hover .hero-bar-voice { box-shadow: none; }
.hero-bar:hover .hero-bar-voice { background: var(--blue-deep); }
.hero-bar-chip svg { color: var(--ink-2); }
.btn.btn-lg { min-height: 56px; padding: 0 34px; font-size: 1.08rem; border-radius: 12px; }
.hero-marquee-cta .btn-lg { min-width: 220px; }

/* ═══════════════════════════════════════════════════════════════════════
   PARTNER TIMELINES v2 (3 Oct 2026, Archie: horizontal, less bland). A port
   of 21st.dev "Animated Progress Stepper" (shadcnspace/stepper-03): a rail
   between the first and last node, a blue fill that runs along it with a
   dot at its head, nodes that light up as it reaches them, and a pulse on
   the last. Every step stays visible. The finished state is the default;
   the "before" state only applies once main.js adds .hiw2-anim, so it never
   hides anything without JS or with reduced motion. Vertical on phones.
   ═══════════════════════════════════════════════════════════════════════ */
.hiw2-track { --pad: clamp(16px, 2.4vw, 32px); --gap: clamp(12px, 1.6vw, 24px); --dur: calc(var(--n) * 0.42s); position: relative; max-width: 1180px; margin: clamp(28px, 3.5vw, 44px) auto 0; padding: 28px var(--pad) 32px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.hiw2-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.hiw2-step { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.hiw2-node { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); border: 1px solid var(--blue); color: #fff; }
.hiw2-node svg { width: 24px; height: 24px; }
.hiw2-node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(30, 144, 255, 0.5); opacity: 0; pointer-events: none; }
.hiw2-num { margin-top: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-text); }
.hiw2-step h4 , .hiw2-step h3{ margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.hiw2-step p { margin: 0; max-width: 28ch; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
.hiw2-rail { position: absolute; top: 55px; height: 2px; background: var(--line);
  left: calc(var(--pad) + (100% - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n) / 2);
  right: calc(var(--pad) + (100% - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n) / 2); }
.hiw2-fill { position: absolute; inset: 0; background: var(--blue); transform-origin: left center; }
.hiw2-run { position: absolute; inset: 0; }
.hiw2-dot { position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
/* animated: start empty, then play once in view */
.hiw2-anim .hiw2-fill { transform: scaleX(0); transition: transform var(--dur) cubic-bezier(0.22, 1, 0.36, 1); }
.hiw2-anim .hiw2-run { transform: translateX(-100%); transition: transform var(--dur) cubic-bezier(0.22, 1, 0.36, 1); }
.hiw2-anim .hiw2-node { background: var(--bg-tint); border-color: var(--line); color: var(--muted);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
  transition-delay: calc(var(--k) / (var(--n) - 1) * var(--dur) * 0.82); }
.hiw2-anim.is-on .hiw2-fill, .hiw2-anim.is-on .hiw2-run { transform: none; }
.hiw2-anim.is-on .hiw2-node { background: var(--blue); border-color: var(--blue); color: #fff; }
.hiw2-anim.is-on .hiw2-step:last-child .hiw2-node::after { animation: hiw2-ring 2.2s ease-in-out var(--dur) 3; }
@keyframes hiw2-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 760px) {
  .hiw2-track { padding: 22px var(--pad); }
  .hiw2-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hiw2-step { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; justify-items: start; text-align: left; }
  .hiw2-node { grid-row: span 3; }
  .hiw2-num { margin-top: 2px; }
  .hiw2-step p { max-width: none; }
  .hiw2-rail { top: 50px; bottom: 50px; left: calc(var(--pad) + 27px); right: auto; width: 2px; height: auto; }
  .hiw2-fill { transform-origin: center top; }
  .hiw2-dot { right: -4px; top: auto; bottom: -5px; }
  .hiw2-anim .hiw2-fill { transform: scaleY(0); }
  .hiw2-anim .hiw2-run { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .hiw2-node::after { animation: none !important; } }
/* the large hero CTA: text centred in its box (3 Oct 2026) */
.btn.btn-lg { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* MVNO page graphics (3 Oct 2026): from the MVNO deck */
.feat-frame--ph3 { overflow: hidden; }
.ph3 { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ph3 picture { display: block; width: 31%; }
.ph3 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(10, 15, 28, 0.14)); }
.ph3 .ph3-0 { transform: translateX(14%) translateY(6%) rotate(-4deg); z-index: 1; }
.ph3 .ph3-1 { z-index: 2; width: 34%; }
.ph3 .ph3-2 { transform: translateX(-14%) translateY(6%) rotate(4deg); z-index: 1; }
.wh-bar { height: 10px; border-radius: 6px; background: var(--blue-pale); overflow: hidden; }
.wh-bar i { display: block; width: var(--u); height: 100%; border-radius: 6px; background: var(--blue); }
.wh-meta { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 14px; font-size: 0.8rem; color: var(--ink-2); }
.wh-days { color: var(--muted); }
.wh-label { margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.wh-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wh-cat { padding: 4px 9px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.wh-cat.is-now { border-color: #F5B544; background: #FFF7E8; color: #8A5A00; }
.wh-cat.is-next { border-color: var(--blue); background: var(--blue-pale); color: var(--blue-text); }
.es-plans { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.es-plan { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.84rem; }
.es-plan.is-sel { border-color: var(--blue); background: var(--blue-pale); }
.es-name { font-weight: 600; color: var(--ink); }
.es-term { color: var(--muted); }
.es-go { background: var(--blue); border-color: var(--blue); color: #fff; }
.fn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.fn-step { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.fn-step:last-child { border-color: var(--blue); background: var(--blue-pale); }
.fn-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); font-size: 0.72rem; color: #fff; }
.fn-note { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); }
/* a photo that fills its 4:3 box edge to edge (the AQFI partner app) */
.partners-page .feat-frame--fill { padding: 0; }
.partners-page .feat-frame--fill > img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 70% 50%; border-radius: 0; }
.ph3 picture { width: 36%; }
.ph3 .ph3-1 { width: 40%; }
/* providers: three concrete moments a provider's product is offered (3 Oct 2026) */
.mealp.pm { gap: 10px; max-width: 440px; }
.pm-item { display: grid; gap: 6px; }
.pm-item .mealp-you { font-size: 0.82rem; padding: 8px 12px; }
.pm-item .offerp { background: #fff; padding: 10px 12px; }
.pm-item .offerp-title { font-size: 0.86rem; }
.mealp.pm { gap: 8px; }
.pm-item { gap: 5px; }
.pm-item .mealp-you { font-size: 0.76rem; padding: 6px 10px; }
.pm-item .offerp { padding: 8px 10px; }
.pm-item .offerp-tag { font-size: 0.66rem; }
.pm-item .offerp-title { font-size: 0.8rem; }
.pm-item .offerp-sub { font-size: 0.72rem; }
/* creators: a phone screenshot shown as a phone screen on the wash (3 Oct 2026) */
.feat-frame--phone { display: grid; place-items: center; }
.feat-frame--phone picture { display: flex; justify-content: center; height: 100%; padding: 14px 0; box-sizing: border-box; }
.feat-frame--phone img { display: block; height: 100%; width: auto; max-width: none; border: 6px solid #0A0F1C; border-radius: 30px; box-shadow: 0 14px 34px rgba(10, 15, 28, 0.18); }
@media (max-width: 720px) { .feat-frame--phone { aspect-ratio: 4 / 3.4; } }
.feat-frame--phone { position: relative; overflow: hidden; }
.feat-frame--phone picture { position: absolute; inset: 16px 0; height: auto; padding: 0; display: flex; justify-content: center; align-items: center; }
.feat-frame--phone img { height: 100%; width: auto; max-height: 100%; object-fit: contain; }
@media (max-width: 720px) { .partners-page .feat-frame.feat-frame--phone { aspect-ratio: auto; height: 460px; min-height: 460px; } }

/* ── Phones: flex-basis in a column (2026-10-03) ─────────────────────────
   When a row stacks into a column, a flex-basis such as 360px turns into a
   height. That left the footer address 360px tall and the apps "Try it for
   yourself" text 244px tall, both mostly empty. The footer AI notice link
   also took the 44px tap height of the footer menu links, which spaced the
   sentence out; it is a link inside a sentence, so it stays inline. */
@media (max-width: 720px) {
  .site-footer-chrome > *,
  .midcta-text { flex-basis: auto; }
}
.site-footer .site-footer-ai a { display: inline; min-height: 0; }

/* ── Partner pages on phones (2026-10-03) ─────────────────────────────────
   The consent box took the round blue bullet of the older .check list item,
   which showed as a stray dot. The eSIM plan rows and funnel steps sit in a
   .mealp-card, whose plain list rule (padding 7px 0) out-ranked their own
   padding, so text ran into the borders. The funnel goes to two columns on
   phones, where three were too narrow for "Discover". The "Built by the
   team behind" names wrapped with a dangling dot and no gap: centred, gap,
   no dots once they wrap. */
.field-check .check::before { content: none; }
.mealp-card .es-plan { padding: 10px 12px; }
.mealp-card .es-plan + .es-plan { border-top: 1px solid var(--line); }
.mealp-card .fn-step { padding: 9px 10px; }
.mealp-card .fn-step + .fn-step { border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .fn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-names { justify-content: center; gap: 14px 26px; }
  .trust-names i { display: none; }
}

/* Partner pages, stacked (2026-10-03): the shared 320px graphic stage left
   up to 140px of empty space under shorter graphics once the rows stack, as
   the frame sits at the top of the stage. Stacked, each graphic takes its own
   height. The phone frames keep their fixed 460px. */
@media (max-width: 900px) {
  .partners-page .feat-graphic { min-height: 0; }
}

/* Japanese and Korean headings (2026-10-03): break at phrase boundaries so a
   heading never leaves a lone particle such as "に。" on its own line.
   auto-phrase is Chrome 119+; other browsers keep the normal breaking. */
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:lang(ko) :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }

/* Timeline in right-to-left languages (2026-10-03): steps run right to left,
   so the rail fills from the right, and on phones the vertical rail sits
   under the step icons on the right instead of running through the text. */
[dir="rtl"] .hiw2-fill { transform-origin: right center; }
[dir="rtl"] .hiw2-dot { right: auto; left: -5px; }
[dir="rtl"] .hiw2-anim .hiw2-run { transform: translateX(100%); }
[dir="rtl"] .hiw2-anim.is-on .hiw2-run { transform: none; }
@media (max-width: 760px) {
  [dir="rtl"] .hiw2-step { text-align: right; }
  [dir="rtl"] .hiw2-rail { left: auto; right: calc(var(--pad) + 27px); }
  [dir="rtl"] .hiw2-fill { transform-origin: center top; }
  [dir="rtl"] .hiw2-dot { left: -4px; right: auto; }
  [dir="rtl"] .hiw2-anim .hiw2-run { transform: translateY(-100%); }
  [dir="rtl"] .hiw2-anim.is-on .hiw2-run { transform: none; }
}

/* Home (4 Oct 2026): the "One assistant. Two ways in." heading was dropped
   at Archie's request; the one-line definition stays as the section's lead,
   a little larger and in ink so it reads as an intro, not a caption. */
.fp2-head--lead { max-width: 760px; }
.fp2-head--lead p { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; }

/* ── Guides (4 Oct 2026): step-by-step tutorials, build_guides.py ──────────
   A real app screen framed on the blue wash (shown whole, never cropped),
   numbered step cards on the site's box logic (white, 12px, line, soft
   shadow), and hub cards that show the top of each screen. */
.guide-shot { max-width: 880px; margin: clamp(20px, 3vw, 32px) auto; padding: clamp(12px, 2.2vw, 22px); background: linear-gradient(160deg, #F4F8FF 0%, #E3EEFD 100%); border: 1px solid var(--line); border-radius: 12px; }
.guide-shot picture { display: block; }
.guide-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; margin: 0 auto; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.guide-shot figcaption { margin-top: 12px; text-align: center; font-size: 0.88rem; color: var(--muted); }
.guide-steps { list-style: none; margin: 8px 0 32px; padding: 0; display: grid; gap: 12px; }
.guide-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); scroll-margin-top: 90px; }
.guide-step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.95rem; }
.post-body .guide-step h3 { margin: 5px 0 4px; font-size: 1.05rem; line-height: 1.35; }
.post-body .guide-step p { margin: 0; }
.blog-card-media.guide-card-media { background: linear-gradient(160deg, #F4F8FF 0%, #E3EEFD 100%); }
.blog-card-media.guide-card-media img { object-position: top center; }
@media (max-width: 560px) {
  .guide-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .guide-step-n { width: 30px; height: 30px; font-size: 0.85rem; }
}
.post-body ol.guide-steps { padding-left: 0; margin-left: 0; }
.post-body ol.guide-steps > li { margin: 0; }

/* Phone graphics on the partner pages (4 Oct 2026, Archie): just the phone
   screen with a shadow, no black frame round it. */
.feat-frame--phone img { border: 0; border-radius: 26px; box-shadow: 0 18px 40px rgba(10, 15, 28, 0.20), 0 3px 10px rgba(10, 15, 28, 0.08); }

/* Apps hero "Try MyPA FREE" button (4 Oct 2026, Archie): bigger label. */
.hero-marquee-cta .btn.btn-lg { font-size: 1.3rem; min-height: 62px; padding: 0 40px; }
@media (max-width: 560px) { .hero-marquee-cta .btn.btn-lg { font-size: 1.2rem; min-height: 58px; padding: 0 32px; } }

/* Apps page grid (4 Oct 2026, Archie): language, AI models, images and
   connectors laid out like the home page bento (wide, small / small, wide).
   Built by build_apps_chapters.py. */
.product-page main > section.apps-bento { padding: clamp(28px, 4vw, 44px) 0 0; }
.apps-bento .fp3-big .fp2-frame--shot { --pad: clamp(16px, 2vw, 28px); }
.apps-bento .fp3-big .fp2-frame--shot > picture { position: absolute; top: var(--pad); left: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); display: block; }
.apps-bento .fp3-big .fp2-frame--shot > picture img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.apps-bento .fp2-card-title, .apps-bento .fp2-card-dek { margin: 0; }
.apps-bento .fp3-big .apps-bento-conn { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 0; padding: clamp(16px, 2vw, 28px); }
.apps-bento .apps-bento-conn .cn { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
@media (min-width: 1181px) { .apps-bento .fp3-big--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.apps-bento .apps-bento-conn .cn ul:last-of-type .cn-row:nth-child(n+4) { display: none; }
/* the AI box: four AI logos as tiles, not a screenshot (4 Oct 2026, Archie) */
.apps-bento .apps-ai-logos { aspect-ratio: auto; }
.apps-bento .apps-ai-logos .fp3-logo { min-height: 0; padding: 12px; gap: 8px; }
.apps-bento .apps-ai-logos .fp3-logo img { width: 40px; height: 40px; }

/* Company hero on the shared grid (4 Oct 2026, Archie): same width as the
   stats box below it, instead of the old 1120px hero cap. */
body.about-page main > section.about-hero > .container {
  max-width: 1480px;
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}

/* Heading levels (4 Oct 2026): partner page row titles became h2 (they sat
   straight under the h1 as h3s). The shared .feat-text h2 measure (15ch) is
   not theirs; they keep the h3 look. */
.partners-page .feat-text h2 { max-width: none; }
/* the same look at the new levels: home box titles stay 600, the
   verification bar labels keep their h4 line height */
h2.fp2-path-title { font-weight: 600; }
.yield-step h3 { line-height: 1.65; }

/* Company hero: just the MyPA logo in the image space (4 Oct 2026, Archie:
   no phone photo). The official mark (assets/logo.svg, from Mypa logo.zip)
   and the name, on the site's soft blue panel. */
.about-page .about-hero-media.about-hero-media--logo { position: relative; display: grid; place-items: center; background: linear-gradient(160deg, #F4F8FF 0%, #E3EEFD 100%); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.about-hero-lockup { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.about-page .about-hero-media--logo .about-hero-lockup img { width: clamp(64px, 7vw, 108px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; max-height: none; }
/* Store badges: the small line was 9.9px (8.96px on the compact badge), under
   the 11px floor for functional text (4 Oct 2026 legibility fix). */
.store-badge-small { font-size: 0.6875rem; }
.store-badge--sm .store-badge-small { font-size: 0.6875rem; letter-spacing: 0; text-transform: none; }
/* the translate box: the Live translate panel from the phone app, as a card
   on the wash, as large as the box allows (4 Oct 2026, Archie) */
.apps-bento .apps-bento-panel { --pad: clamp(18px, 2.2vw, 30px); }
.apps-bento .apps-bento-panel > picture { position: absolute; inset: var(--pad); display: flex; align-items: center; justify-content: center; }
.apps-bento .apps-bento-panel img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(10, 15, 28, 0.12), 0 2px 6px rgba(10, 15, 28, 0.06); }
@media (max-width: 1180px) { .apps-bento .fp3-big .apps-bento-panel { aspect-ratio: 1 / 1; } }

/* Home (4 Oct 2026, Archie): the intro line sits a little closer to the hero,
   and the AI box uses the apps page's AI logo tiles at the same box size */
.home-page main > section.fp-section--top { padding-top: clamp(32px, 3.6vw, 52px); }
.fp3-bento .apps-ai-logos { aspect-ratio: auto; }
.fp3-bento .apps-ai-logos .fp3-logo { min-height: 0; padding: 12px; gap: 8px; }
.fp3-bento .apps-ai-logos .fp3-logo img { width: 40px; height: 40px; }

/* Compare table on phones (4 Oct 2026, Archie: "the table looks awful on
   mobile"). Below 720px it shows Features, MyPA and ONE competitor, picked
   with the buttons above it; desktop keeps the full table. */
.cmp-pick { display: none; }
@media (max-width: 720px) {
  .cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
  .cmp-pick-label { flex-basis: 100%; margin-bottom: 2px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
  .cmp-pick-btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
  .cmp-pick-btn.is-on { background: var(--blue-pale); border-color: var(--blue); color: var(--blue-text); }
  .cmp-wrap { overflow-x: visible; }
  .cmp-table { min-width: 0; width: 100%; }
  .cmp-table tr > :nth-child(n+3) { display: none; }
  .cmp-table[data-cmp-col="3"] tr > :nth-child(3),
  .cmp-table[data-cmp-col="4"] tr > :nth-child(4),
  .cmp-table[data-cmp-col="5"] tr > :nth-child(5),
  .cmp-table[data-cmp-col="6"] tr > :nth-child(6),
  .cmp-table[data-cmp-col="7"] tr > :nth-child(7),
  .cmp-table[data-cmp-col="8"] tr > :nth-child(8) { display: table-cell; }
  .cmp-table .cmp-feature, .cmp-table .cmp-corner { position: static; width: 46%; min-width: 0; font-size: 0.85rem; }
  .cmp-table th, .cmp-table td { padding: 11px 8px; }
  .cmp-table thead .cmp-name { font-size: 0.95rem; }
}

/* Apps hero on phones (4 Oct 2026, Archie: the scattered icons looked random
   on mobile). Phones get their own symmetrical set: four tiles either side of
   the character, four in a low arc under the button. Desktop is unchanged. */
.hf-ic--mob { display: none; }
@media (max-width: 760px) {
  .hero-float-field .hf-ic:not(.hf-ic--mob) { display: none; }
  .hero-float-field .hf-ic--mob { display: block; }
}

/* Mobile legibility (4 Oct 2026 audit): functional text never below 11px,
   and code samples wrap instead of pushing the page sideways on phones. */
.launch-badge, .partner-type-tag { font-size: 0.6875rem; }
@media (max-width: 540px) { .launch-foot { font-size: 0.6875rem; } }
.feat-frame .eng-chart .eng-label, .feat-frame .eng-chart .eng-val,
.partners-page .feat-frame .eng-chart .eng-label { font-size: 0.6875rem; }
main pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
main pre code { white-space: inherit; overflow-wrap: anywhere; }
.partners-page .feat-frame .eng-chart .eng-val { font-size: 0.6875rem; }
@media (max-width: 760px) {
  /* the values at 11px need a wider column; long ones may wrap */
  .partners-page .feat-frame .eng-chart .eng-val { font-size: 0.6875rem; white-space: normal; line-height: 1.2; }
  .partners-page .feat-frame .eng-row { grid-template-columns: var(--eng-label-w) 1fr 58px; }
  .partners-page .feat-frame .eng-gridlines { inset: 0 58px 46px calc(var(--eng-label-w) + 8px); }
}