/* ============================================================
   Prepse — Design System
   Editorial / Instrumentation aesthetic
   ============================================================ */

/* Registered custom properties so they can be transitioned. */
@property --mx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}
@property --my {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}

/* ---------- Tokens ---------- */
:root {
  /* Surface — slightly cooler / less yellow than pure cream so
     sections read cleaner; pair with a punchier hero map (v3). */
  --paper:        #E6E2DA;
  --paper-deep:   #D9D5CC;
  --paper-light:  #F0EDE6;
  --card:         #FAF8F5;
  --ink:          #14110D;   /* near black with warmth */
  --ink-soft:     #221E19;
  --ink-muted:    #5A5248;
  --ink-faint:    #8A8074;
  --line:         #C9C2B4;
  --line-strong:  #6F6658;

  /* Accent — Prepse Purple (real brand: #683EF4) + companions */
  --signal:        #683EF4;   /* PREPSE PURPLE — primary brand */
  --signal-deep:   #5A35D1;   /* hover / pressed */
  --signal-light:  #8B63F6;   /* lighter purple, gradient pair */
  --signal-soft:   rgba(104, 62, 244, 0.10);
  --signal-glow:   rgba(104, 62, 244, 0.30);
  --magenta:       #D511FD;   /* sister magenta, hi-energy accents */
  --azure:         #3E6FF4;   /* sister blue, used in app */
  --ember:         #F4683E;   /* mirror of brand, "coming soon" / warmth */
  --leaf:          #44A047;   /* live / ok green for status dots */
  /* Vivid jewel-tone rainbow — clean, bright, saturated */
  --rainbow-1:     #6A2BFF;
  --rainbow-2:     #2864FF;
  --rainbow-3:     #16B6E0;
  --rainbow-4:     #18C383;
  --rainbow-5:     #FFC23A;
  --rainbow-6:     #FF7A5C;
  --rainbow-7:     #F048C2;

  /* Inverse (used in dark sections) */
  --ink-bg:       #14110D;
  --ink-bg-2:     #1E1A14;
  --ink-on:       #EFE7D4;
  --ink-on-mute:  #A89D88;
  --ink-line:     #2E2820;

  /* Type */
  --serif:  'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --sans:   'Figtree', 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --mono:   'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* Layout */
  --max:     1280px;
  --gutter:  clamp(20px, 4vw, 56px);
  --radius:  6px;
  --radius-lg: 14px;

  /* Motion */
  --ease:    cubic-bezier(.2,.7,.1,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  /* `clip` prevents horizontal scroll without forming a scroll container,
     so descendants can still use `position: sticky` (e.g. the legal TOC). */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Selection */
::selection { background: var(--signal); color: var(--paper-light); }

/* ---------- Paper texture (subtle grain via SVG noise) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography ---------- */
h1,h2,h3,h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
.display-xl {
  font-family: var(--serif);
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.display-l {
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.display-m {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.display-s {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.italic { font-style: italic; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot {
  width: 8px; height: 8px; background: var(--signal); border-radius: 999px;
  box-shadow: 0 0 0 4px var(--signal-soft);
}
.lede {
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
}
.muted { color: var(--ink-muted); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }
.section { padding: clamp(72px, 10vw, 144px) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.divider { height: 1px; background: var(--line); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper-light);
}
.btn-primary:hover { background: var(--signal); color: var(--paper-light); }

/* Nav "Book a demo" stays inky at rest, blooms into the same vibrant
   watercolor stops as the hero/CTA buttons on hover. The gradient
   lives on a ::before that fades in over the dark base, which is the
   only way to smoothly transition into a multi-stop gradient.
   `isolation: isolate` + `z-index: -1` on ::before keeps it behind
   the label without affecting the surrounding nav stack. */
.nav-cta-demo {
  position: relative;
  isolation: isolate;
  background: linear-gradient(118deg, #6A34FF 0%, #4B22CF 100%);
  color: #FFFFFF;
  border: 0;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.78),
    0 0 1px rgba(20, 17, 13, 0.58);
  box-shadow:
    0 14px 34px -10px rgba(91, 43, 255, 0.62),
    0 8px 20px -8px rgba(121, 77, 255, 0.48);
  transition:
    background .35s var(--ease),
    filter .35s var(--ease),
    color .35s var(--ease),
    text-shadow .35s var(--ease),
    box-shadow .35s var(--ease),
    transform .35s var(--ease);
}
.nav-cta-demo::before {
  display: none;
}
.nav-cta-demo:hover,
.nav-cta-demo:active,
.nav-cta-demo:focus-visible {
  background: linear-gradient(120deg,
    #6A2BFF 0%,
    #2858E8 18%,
    #0E9BC4 38%,
    #16A86E 58%,
    #E89A18 76%,
    #E8633E 88%,
    #C6359A 100%);
  color: #FFFFFF;
  filter: saturate(1.3) contrast(1.22) brightness(1.0);
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.9),
    0 0 1px rgba(20, 17, 13, 0.72);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(20, 17, 13, 0.22) inset,
    0 22px 46px -10px rgba(182, 135, 36, 0.68),
    0 12px 30px -8px rgba(14, 143, 126, 0.64),
    0 10px 26px -8px rgba(91, 45, 226, 0.72),
    0 8px 22px -8px rgba(192, 67, 164, 0.60);
}
/* Watercolor sweep across the colors a painter actually mixes:
   golden yellow -> fresh green -> mint -> sky bridge -> deep purple
   -> magenta. Same vibrant energy as before, just with proper yellow
   and green presence (not only sunset pinks). Halos echo the four
   loudest stops so the button radiates each hue into the page. */
.btn-signal {
  background:
    linear-gradient(120deg,
      var(--rainbow-1) 0%,
      var(--rainbow-2) 18%,
      var(--rainbow-3) 38%,
      var(--rainbow-4) 58%,
      var(--rainbow-5) 76%,
      var(--rainbow-6) 88%,
      var(--rainbow-7) 100%);
  color: #FFFFFF;
  border: none;
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.45),
    0 0 1px rgba(20, 17, 13, 0.30);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 16px 40px -6px rgba(255, 216, 76, 0.55),
    0 10px 26px -4px rgba(63, 224, 164, 0.60),
    0 8px 22px -4px rgba(155, 91, 255, 0.65),
    0 6px 18px -4px rgba(240, 105, 226, 0.55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn-signal:hover {
  filter: brightness(1.02) saturate(1.22) contrast(1.14);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 20px 48px -6px rgba(255, 216, 76, 0.65),
    0 12px 32px -4px rgba(63, 224, 164, 0.70),
    0 10px 26px -4px rgba(155, 91, 255, 0.75),
    0 8px 22px -4px rgba(240, 105, 226, 0.65);
}
.btn-ghost {
  border-color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper-light); }
.btn-link {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--signal); border-color: var(--signal); transform: none; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
/* Floating pill-style nav (Vesta-inspired) */
.nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 1180px;
  background: rgba(248, 244, 236, 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(20, 17, 13, 0.08);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 30px -16px rgba(20, 17, 13, 0.18),
    0 4px 12px -8px rgba(20, 17, 13, 0.10);
  transition: box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled {
  background: rgba(248, 244, 236, 0.92);
  border-color: rgba(20, 17, 13, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 40px -18px rgba(20, 17, 13, 0.28),
    0 6px 16px -10px rgba(20, 17, 13, 0.14);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  padding: 0 clamp(18px, 2.4vw, 28px);
}
.nav-inner > .brand { justify-self: start; }
.nav-inner > .nav-links { justify-self: center; }
.nav-inner > .nav-cta { justify-self: end; }
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand img {
  display: block;
  width: 100px;
  height: auto;
  flex-shrink: 0;
}
/* Footer brand gets a touch more presence */
.footer .brand img { width: clamp(180px, 18vw, 240px); height: auto; }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(20, 17, 13, 0.28);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); background: rgba(20, 17, 13, 0.05); }
.nav-toggle .bar {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .28s var(--ease), opacity .2s var(--ease), top .28s var(--ease);
}
.nav-toggle .bar:nth-child(1) { top: 13px; }
.nav-toggle .bar:nth-child(2) { top: 19px; }
.nav-toggle .bar:nth-child(3) { top: 25px; }
.nav.open .nav-toggle .bar:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.nav.open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle .bar:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }

/* Mobile takeover panel (Sierra-style) — full-screen overlay, hidden by default */
.nav-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  flex-direction: column;
  background: var(--paper);
  padding: calc(16px + 60px + 24px) 28px 32px;
  overflow-y: auto;
}
.nav-panel-links {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-bottom: 24px;
}
.nav-panel-links a {
  font-family: var(--serif);
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 400;
  color: var(--ink);
  padding: 22px 4px;
  border-bottom: 1px solid rgba(20, 17, 13, 0.08);
  line-height: 1;
  letter-spacing: -0.015em;
  transition: color .2s var(--ease);
}
.nav-panel-links a:first-child { padding-top: 16px; }
.nav-panel-links a:hover { color: var(--signal); }
.nav-panel-cta {
  align-self: stretch;
  justify-content: center;
  height: 56px;
  font-size: 15.5px;
}

@keyframes navPanelIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 880px) {
  .nav-inner {
    grid-template-columns: auto 1fr auto;
    padding: 0 14px 0 18px;
  }
  .nav-inner > .nav-cta { gap: 8px; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn-primary {
    height: 40px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .nav-cta .btn-primary .arrow { display: none; }

  .nav.open ~ .nav-panel {
    display: flex;
    animation: navPanelIn .32s var(--ease) both;
  }
}

/* On phones, fold the inline "Book a demo" into the menu so the bar stays uncluttered */
@media (max-width: 520px) {
  .nav-cta-demo { display: none; }
}

/* Lock background scroll while the menu is open */
body:has(#nav.open) { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Always exactly the viewport height (with a safe min on very short screens)
     so the next section never peeks below the fold. */
  min-height: max(680px, 100svh);
  padding-top: clamp(104px, 12vh, 150px);  /* leave room for the floating nav */
  padding-bottom: clamp(40px, 6vh, 80px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.hero > .wrap { width: 100%; }
/* anchor jumps shouldn't hide content behind the floating nav */
html { scroll-padding-top: 92px; }

/* Scenic landscape: full-bleed SVG scene behind the hero */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero .hero-scene,
.hero .hero-visual {
  display: none;
}
.js .hero .hero-scene,
.js .hero .hero-visual {
  display: block;
}
.hero-scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* push saturation to punch through the paper-grain multiply overlay */
  filter: saturate(1.32) brightness(1.08);
}
/* v3 route motion (live page): animate dash flow on ALPHA + BRAVO */
.hero-scene--v3 #v3-pathA,
.hero-scene--v3 #v3-pathB {
  stroke-dashoffset: 0;
  animation: v3DashFlow 24s linear infinite;
}
.hero-scene--v3 #v3-pathB {
  animation-duration: 32s;
  animation-direction: reverse;
}
@keyframes v3DashFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -240; }
}

/* v3 sunrise chart: less cream halo behind the headline, bolder map */
.hero:has(.hero-scene--v3) .hero-scene-svg {
  filter: saturate(1.48) brightness(1.06) contrast(1.05);
}
.hero:has(.hero-scene--v3) .hero-grid > div:first-child {
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 28px) clamp(18px, 2.2vw, 26px);
  border-radius: 16px;
}
.hero .hero-copy-pane {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 32px) clamp(22px, 2.6vw, 30px);
  border-radius: 20px;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      rgba(248, 244, 236, 0.92) 0%,
      rgba(244, 239, 229, 0.88) 60%,
      rgba(240, 234, 222, 0.84) 100%);
  -webkit-backdrop-filter: blur(105px) saturate(1.05);
  backdrop-filter: blur(105px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(20, 17, 13, 0.04),
    0 26px 60px -28px rgba(20, 17, 13, 0.32),
    0 12px 28px -22px rgba(20, 17, 13, 0.22);
}
.hero .hero-copy-pane > * {
  position: relative;
  z-index: 1;
}
.hero .hero-copy-pane::before {
  content: "";
  position: absolute;
  inset: -38px -46px;
  border-radius: 36px;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 30% 50%,
      rgba(248, 244, 236, 0.55) 0%,
      rgba(248, 244, 236, 0.28) 50%,
      rgba(248, 244, 236, 0.00) 80%);
  filter: blur(40px);
  pointer-events: none;
}
.hero:has(.hero-scene--v3) .hero-grid > div:first-child::before {
  content: none;
}
.hero:has(.hero-scene--v3) .hero-grid > div:first-child::after {
  content: none;
}

/* v3 hero copy — readable over detail without obvious white block */
.hero:has(.hero-scene--v3) h1.display-xl {
  color: #110F0C;
  text-shadow:
    0 0.02em 0.08em rgba(20, 17, 13, 0.24),
    0 0 0.5em rgba(224, 216, 204, 0.2);
}
.hero:has(.hero-scene--v3) .hero-sub {
  color: #1E1A15;
  text-shadow: 0 0.02em 0.06em rgba(20, 17, 13, 0.16);
}
.hero:has(.hero-scene--v3) .eyebrow {
  color: #4D453A;
  text-shadow: 0 0.02em 0.06em rgba(20, 17, 13, 0.1);
}
.hero:has(.hero-scene--v3) .hero-actions .btn-signal {
  background: linear-gradient(118deg, #6A34FF 0%, #4B22CF 100%);
  border: 0;
  color: #FFFFFF;
  font-weight: 700;
  filter: saturate(1.08) contrast(1.12) brightness(0.96);
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.84),
    0 0 1px rgba(20, 17, 13, 0.62);
  box-shadow:
    0 16px 36px -10px rgba(91, 43, 255, 0.62),
    0 8px 20px -8px rgba(121, 77, 255, 0.50);
}
.hero:has(.hero-scene--v3) .hero-actions .btn-signal:hover,
.hero:has(.hero-scene--v3) .hero-actions .btn-signal:active,
.hero:has(.hero-scene--v3) .hero-actions .btn-signal:focus-visible {
  background:
    linear-gradient(120deg,
      #6A2BFF 0%,
      #2858E8 18%,
      #0E9BC4 38%,
      #16A86E 58%,
      #E89A18 76%,
      #E8633E 88%,
      #C6359A 100%);
  filter: saturate(1.3) contrast(1.22) brightness(1.0);
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.9),
    0 0 1px rgba(20, 17, 13, 0.72);
  box-shadow:
    0 0 0 1px rgba(20, 17, 13, 0.22) inset,
    0 22px 46px -10px rgba(182, 135, 36, 0.68),
    0 12px 30px -8px rgba(14, 143, 126, 0.64),
    0 10px 26px -8px rgba(91, 45, 226, 0.72),
    0 8px 22px -8px rgba(192, 67, 164, 0.60);
}

/* v3 chart labels — soft stroke so letters separate from paint, not a white ring */
.hero-scene--v3 .v3-rose-letters text {
  paint-order: stroke fill;
  stroke: rgba(232, 226, 216, 0.55);
  stroke-width: 1.6px;
  stroke-linejoin: round;
}
.hero-scene--v3 .v3-scale text {
  paint-order: stroke fill;
  stroke: rgba(226, 220, 234, 0.45);
  stroke-width: 1.35px;
  stroke-linejoin: round;
}
.hero-scene--v3 .v3-scale-art {
  transform-box: fill-box;
  transform-origin: center;
}
@media (max-width: 1200px) {
  .hero-scene--v3 .v3-scale-art { transform: scale(0.92); }
}
@media (max-width: 980px) {
  .hero-scene--v3 .v3-scale-art { transform: scale(0.84); }
}
.hero-scene--v3 .v3-pins text {
  paint-order: stroke fill;
  stroke: rgba(231, 224, 214, 0.52);
  stroke-width: 1.15px;
  stroke-linejoin: round;
}

/* Gentle cloud drift — three clusters at different speeds for parallax */
.hero-scene-svg .cloud-a { animation: cloudDrift1 34s ease-in-out infinite alternate; }
.hero-scene-svg .cloud-b { animation: cloudDrift2 42s ease-in-out infinite alternate; }
.hero-scene-svg .cloud-c { animation: cloudDrift3 48s ease-in-out infinite alternate; }
@keyframes cloudDrift1 { from { transform: translate(0,0); } to { transform: translate(38px, 4px); } }
@keyframes cloudDrift2 { from { transform: translate(0,0); } to { transform: translate(-28px, -3px); } }
@keyframes cloudDrift3 { from { transform: translate(0,0); } to { transform: translate(22px, 2px); } }

/* Sun-ray shimmer on the water — stagger each band */
.hero-scene-svg .shimmer-bands > * {
  transform-origin: center;
  transform-box: fill-box;
  animation: shimmerPulse 4.6s ease-in-out infinite;
}
.hero-scene-svg .shimmer-bands > *:nth-child(2) { animation-delay: -0.5s; }
.hero-scene-svg .shimmer-bands > *:nth-child(3) { animation-delay: -1.0s; }
.hero-scene-svg .shimmer-bands > *:nth-child(4) { animation-delay: -1.6s; }
.hero-scene-svg .shimmer-bands > *:nth-child(5) { animation-delay: -2.2s; }
@keyframes shimmerPulse {
  0%, 100% { transform: translateX(0)    scaleX(1);    opacity: 1; }
  50%      { transform: translateX(6px)  scaleX(1.06); opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scene-svg .cloud-a,
  .hero-scene-svg .cloud-b,
  .hero-scene-svg .cloud-c,
  .hero-scene-svg .shimmer-bands > *,
  .hero-scene--v3 #v3-pathA,
  .hero-scene--v3 #v3-pathB {
    animation: none;
  }
}
/* Gentle ripple shimmer on water */
.hero-scene-svg .ripples > * {
  animation: rippleShimmer 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.hero-scene-svg .ripples > *:nth-child(2) { animation-duration: 11s; animation-delay: -2s; }
.hero-scene-svg .ripples > *:nth-child(3) { animation-duration: 13s; animation-delay: -5s; }
.hero-scene-svg .ripples > *:nth-child(4) { animation-duration:  9s; animation-delay: -3s; }
.hero-scene-svg .ripples > *:nth-child(5) { animation-duration: 12s; animation-delay: -1s; }
.hero-scene-svg .ripples > *:nth-child(6) { animation-duration: 10s; animation-delay: -4s; }
@keyframes rippleShimmer {
  0%, 100% { transform: translateX(0);   opacity: 1; }
  50%      { transform: translateX(10px); opacity: 0.55; }
}

/* Legibility vignette under hero text over the bold scene */
.hero-grid > div:first-child {
  position: relative;
}
.hero-grid > div:first-child::before {
  content: "";
  position: absolute;
  inset: -60px -90px;
  z-index: -1;
  background:
    radial-gradient(ellipse 85% 100% at 30% 50%,
      rgba(253, 246, 227, 0.55) 0%,
      rgba(253, 246, 227, 0.28) 40%,
      rgba(253, 246, 227, 0.10) 65%,
      rgba(253, 246, 227, 0) 82%);
  pointer-events: none;
  filter: blur(14px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene-svg .ripples > * { animation: none; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 430px);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.hero-visual {
  width: 100%;
  max-width: 430px;
  justify-self: end;
}
.hero-visual .playback {
  width: min(100%, 430px);
  margin-left: auto;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .hero-visual {
    max-width: none;
    justify-self: stretch;
  }
  .hero-visual .playback {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

.hero h1 {
  margin-top: 24px;
}
.hero h1.display-xl {
  font-size: clamp(42px, 5.2vw, 66px);
}
.hero h1 .accent {
  color: var(--signal);
  font-style: italic;
}
.hero h1 .underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero h1 .underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 6px;
  background: var(--signal);
  opacity: 0.18;
  border-radius: 2px;
}

.hero-sub {
  margin-top: 28px;
  max-width: 44ch;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-fineprint {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.hero-fineprint span { color: var(--signal); }

/* 404 — Ghibli scene as a framed picture hanging on a paper wall */
.hero.hero-404 {
  min-height: max(640px, 100svh);
  padding-top: clamp(40px, 6vh, 72px);
  background:
    radial-gradient(ellipse 70% 90% at 50% 30%, rgba(104, 62, 244, 0.04), transparent 65%),
    var(--paper);
}
.nf-wrap {
  min-height: calc(100svh - 160px);
  display: grid;
  justify-items: center;
  align-items: center;
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(40px, 6vh, 80px);
}
.nf-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 40px); }

/* the postcard — cream card stock, printed photo, postmark, a gentle tilt */
.nf-frame {
  position: relative;
  width: min(560px, 62vw);
  aspect-ratio: 3 / 2;                /* classic postcard */
  margin: 0;
  padding: 14px 14px 64px;            /* card mat + bottom caption strip */
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,
      rgba(255, 255, 255, 0.65), rgba(255, 252, 245, 0) 60%),
    linear-gradient(180deg, #FDF7E4 0%, #F2E4C5 100%);
  border: 1px solid rgba(20, 17, 13, 0.08);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(20, 17, 13, 0.06) inset,
    0 22px 48px -22px rgba(20, 17, 13, 0.28),
    0 8px 18px -10px rgba(20, 17, 13, 0.14);
  transform: rotate(-1deg);
  transition: transform .6s var(--ease);
  /* subtle paper-grain texture via tiny repeating noise */
  background-blend-mode: multiply;
}
.nf-frame:hover { transform: rotate(-0.2deg) scale(1.01); }

/* the printed photo inside the postcard */
.nf-frame .hero-scene {
  position: absolute;
  inset: 14px 14px 64px;
  z-index: auto;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(20, 17, 13, 0.10) inset,
    0 1px 3px rgba(20, 17, 13, 0.08);
}
.nf-frame .hero-scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(1.15) brightness(1.04);
}

/* postage stamp on the postcard — dotted perf edge + inner ruled border */
.nf-stamp {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 4;
  width: 78px;
  height: 86px;
  padding: 12px 10px;
  background:
    /* four rows of tiny dots running along each edge to suggest perforations */
    radial-gradient(circle 1.4px, rgba(104, 62, 244, 0.45) 98%, transparent 100%) 0 3px    / 7px 2px repeat-x,
    radial-gradient(circle 1.4px, rgba(104, 62, 244, 0.45) 98%, transparent 100%) 0 calc(100% - 3px) / 7px 2px repeat-x,
    radial-gradient(circle 1.4px, rgba(104, 62, 244, 0.45) 98%, transparent 100%) 3px 0    / 2px 7px repeat-y,
    radial-gradient(circle 1.4px, rgba(104, 62, 244, 0.45) 98%, transparent 100%) calc(100% - 3px) 0 / 2px 7px repeat-y,
    #FFFAED;
  box-shadow: 0 10px 18px -10px rgba(20, 17, 13, 0.30);
  transform: rotate(5deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
  border-radius: 1px;
}
/* inner ruled border inside the stamp */
.nf-stamp::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--signal);
  border-radius: 1px;
  pointer-events: none;
}
.nf-stamp-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--signal);
  letter-spacing: -0.02em;
  z-index: 1;
}
.nf-stamp-label {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  color: var(--signal);
  text-transform: uppercase;
  line-height: 1;
  z-index: 1;
  opacity: 0.85;
  white-space: nowrap;
}

/* the caption strip at the bottom of the postcard */
.nf-frame figcaption {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  height: 36px;
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  overflow: hidden;
}

.nf-404 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(96px, 14vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.02em;
}
.nf-404 em { font-style: italic; color: var(--signal); }
.nf-center .hero-actions { margin-top: 4px; }

/* Instrument panel — hero product visual */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow:
    0 1px 0 rgba(20,17,13,0.04),
    0 24px 60px -28px rgba(20,17,13,0.18),
    0 8px 22px -16px rgba(20,17,13,0.10);
  position: relative;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 30%);
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.panel-head .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--signal);
}
.panel-head .live .pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal-glow);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--signal-glow); }
  100% { box-shadow: 0 0 0 14px rgba(221,75,26,0); }
}
.persona {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.persona-avatar {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2A241E, #14110D);
  color: var(--paper-light);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.02em;
}
.persona-name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.persona-role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.transcript {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  position: relative;
}
.transcript::before {
  content: "Buyer";
  position: absolute;
  top: -10px; left: 12px;
  background: var(--card);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.transcript .objection {
  background: linear-gradient(180deg, transparent 60%, var(--signal-soft) 60%);
  padding: 0 2px;
}
.gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.gauge {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 12px 10px;
}
.gauge-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.gauge-value {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gauge-bar {
  margin-top: 8px;
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.gauge-bar i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
}
.gauge.signal .gauge-bar i { background: var(--signal); }

.panel-foot {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.panel-foot .score {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Floating sticker */
/* ======================================================
   PLAYBACK PANEL — hero product mockup, modeled directly
   on the Prepse Playback / Call review screen.
   ====================================================== */
.playback {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(20,17,13,0.04),
    0 30px 70px -32px rgba(20,17,13,0.22),
    0 10px 24px -18px rgba(20,17,13,0.12);
  position: relative;
  overflow: hidden;
}
.playback::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), transparent 28%);
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* Header: avatar + title (no third column now) */
.playback-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
}
.pb-avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2A241E 0%, #14110D 100%);
  color: var(--paper-light);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.02em;
  position: relative;
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--signal),
    0 8px 18px -10px rgba(104, 62, 244, 0.4);
}
.pb-id { min-width: 0; }

/* Play button on the right edge of the header */
.pb-play {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pb-play:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper-light);
  transform: scale(1.05);
}
.pb-play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.pb-play .pb-play-icon  { margin-left: 2px; } /* optical center for triangle */
.pb-play .pb-pause-icon { display: none; margin-left: 0; }
.pb-play.is-playing .pb-play-icon  { display: none; }
.pb-play.is-playing .pb-pause-icon { display: block; }
.pb-play.is-playing {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper-light);
}
.pb-title {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  /* Mimic the editable input look from Playback.tsx */
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  display: inline-block;
}
.playback:hover .pb-title { border-bottom-color: var(--signal); }
.pb-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.pb-meta .dot-sep { color: var(--ink-faint); }
.pb-meta strong { color: var(--ink); font-weight: 500; letter-spacing: 0.08em; }

/* Section labels (mimic "Simulation" / "Metrics" / "Feedback" h6's) */
.pb-section-label {
  padding: 14px 18px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Metrics grid (4 cards, matches Playback.tsx grid-cols-4) */
.pb-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 18px 18px;
}
.pb-metric {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: border-color .25s var(--ease);
}
.playback:hover .pb-metric { border-color: var(--line-strong); }
.pb-metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-metric-value {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.pb-metric-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.pb-metric-bar {
  height: 3px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 2px;
}
.pb-metric-bar i {
  display: block;
  height: 100%;
  background: var(--signal);
  border-radius: inherit;
}
/* Good / warn / bad metric states */
.pb-metric.good .pb-metric-bar i  { background: #3FAE7C; }  /* green */
.pb-metric.good .pb-metric-value  { color: #2F8D62; }
.pb-metric.warn .pb-metric-bar i  { background: #E9A528; }  /* amber */
.pb-metric.warn .pb-metric-value  { color: #B37918; }
.pb-metric.bad  .pb-metric-bar i  { background: #D64545; }  /* red */
.pb-metric.bad  .pb-metric-value  { color: #B52C2C; }

/* Feedback section: line-tab scorecards (the tabs ARE the section header) */
.pb-feedback {
  border-top: 1px solid var(--line);
  padding: 0 18px 16px;
}

.pb-sc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.pb-sc-tab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0 12px;
  margin-right: 28px;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .2s var(--ease);
  font-family: inherit;
}
.pb-sc-tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.pb-sc-tab:hover { color: var(--ink); }
.pb-sc-tab:hover::after { transform: scaleX(0.4); }
.pb-sc-tab.is-active { color: var(--ink); }
.pb-sc-tab.is-active::after { transform: scaleX(1); background: var(--signal); }

.pb-sc-tab-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pb-sc-tab-score {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 0.65;
  transition: opacity .2s var(--ease);
}
.pb-sc-tab.is-active .pb-sc-tab-score { opacity: 1; }
/* Semantic score colors */
.pb-sc-tab-score.good { background: rgba(63, 174, 124, 0.14); color: #2F8D62; }
.pb-sc-tab-score.warn { background: rgba(233, 165, 40, 0.14); color: #B37918; }
.pb-sc-tab-score.bad  { background: rgba(214, 69, 69, 0.14); color: #B52C2C; }

.pb-sc-panel[hidden] { display: none; }
.pb-sc-panel.is-active { display: block; padding-top: 4px; }

.pb-fb {
  display: grid;
  grid-template-columns: 112px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.pb-sc-panel .pb-fb:last-child { border-bottom: 0; }
.pb-fb-k {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pb-fb-score {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--paper-deep);
  color: var(--ink-muted);
  border-radius: 5px;
  padding: 2px 0;
}
/* Semantic score colors, same thresholds as the tab scores */
.pb-fb-score.good { background: rgba(63, 174, 124, 0.14); color: #2F8D62; }
.pb-fb-score.warn { background: rgba(233, 165, 40, 0.14); color: #B37918; }
.pb-fb-score.bad  { background: rgba(214, 69, 69, 0.14); color: #B52C2C; }
.pb-fb-note {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

/* Tighter on small screens */
@media (max-width: 640px) {
  .pb-metrics { grid-template-columns: repeat(2, 1fr); }
  .pb-fb {
    grid-template-columns: minmax(0, 1fr) 40px;
    column-gap: 12px;
    row-gap: 4px;
  }
  .pb-fb-k    { grid-column: 1; grid-row: 1; }
  .pb-fb-score { grid-column: 2; grid-row: 1; }
  .pb-fb-note { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Marquee ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2.6vh, 40px) 0;
  min-height: clamp(76px, 9vh, 120px);
  overflow: hidden;
  position: relative;
  background: var(--paper);
  display: flex;
  align-items: center;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-item {
  font-family: var(--serif);
  font-size: clamp(22px, 3.2vh, 32px);
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 44px;             /* matches track gap so ✦ sits at the midpoint */
  white-space: nowrap;
}
.marquee-item::after {
  content: "✦";
  color: var(--signal);
  font-style: normal;
  font-size: 16px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 404-specific variant: scrolling caption inside the picture frame */
.marquee-404 {
  position: relative;
  padding: 0;
  margin: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  /* fade in from the frame's mat on both sides */
  -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%);
}
.marquee-404 .marquee-track {
  animation-duration: 24s;
  gap: 12px;
  padding: 1px 0;
  align-items: center;
}
.marquee-404 .marquee-item {
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
}
/* kill the base .marquee-item::after ✦ that the 404 doesn't want */
.marquee-404 .marquee-item::after { content: none; display: none; }
.marquee-404 .marquee-dot {
  color: var(--ink-muted);
  font-size: 22px;
  line-height: 1;
  user-select: none;
}
.marquee-404::before,
.marquee-404::after { content: none; display: none; }

/* ---------- Section labels ---------- */
.section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
  margin-bottom: clamp(48px, 6vw, 88px);
  gap: 24px;
}
.section-label .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section-label .title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  margin-left: auto;
}
@media (max-width: 480px) {
  .section-label {
    gap: 12px;
  }
  .section-label .title {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

/* ---------- Capability rows ---------- */
.cap-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--line);
}
.cap-row:nth-child(even) { grid-template-columns: 1.05fr 1fr; }
.cap-row:nth-child(even) .cap-text { order: 2; }
@media (max-width: 980px) {
  .cap-row, .cap-row:nth-child(even) { grid-template-columns: 1fr; }
  .cap-row:nth-child(even) .cap-text { order: 0; }
}
.cap-text .eyebrow { margin-bottom: 18px; }
.cap-text h3 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  max-width: 16ch;
}
.cap-text p { color: var(--ink-soft); max-width: 46ch; font-size: 17px; line-height: 1.55; }
.cap-bullets {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px dashed var(--line);
}
.cap-bullets li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  color: var(--ink-soft);
}
.cap-bullets li::before {
  content: "→";
  color: var(--signal);
  font-family: var(--mono);
}
.cap-actions { margin-top: 28px; }

/* Capability visuals (mockups) */
.mock {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 24px 60px -28px rgba(20,17,13,0.16), 0 8px 22px -18px rgba(20,17,13,0.08);
  position: relative;
}
.mock-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* Persona Mock */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.persona-card {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  position: relative;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.persona-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.persona-card .av {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2A241E, #14110D);
  color: var(--paper-light);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  margin-bottom: 10px;
  font-size: 16px;
}
.persona-card.alt .av { background: linear-gradient(135deg, var(--signal-light), var(--signal)); }
.persona-card .nm { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; }
.persona-card .tt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-top: 2px; }
.persona-card .traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.persona-card .chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--ink-soft);
}

/* Scenario Mock */
.scenario-list {
  display: flex; flex-direction: column; gap: 8px;
}
.scenario {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .3s var(--ease);
}
.scenario:hover { border-color: var(--ink); }
.scenario .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
}
.scenario .nm {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.scenario .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.scenario .pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.scenario .pill.signal { color: var(--signal); border-color: var(--signal); background: var(--signal-soft); }

/* Scorecard mock */
.score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.score-row:last-child { border-bottom: 0; }
.score-row .lbl { font-size: 14px; color: var(--ink-soft); }
.score-row .meter { width: 180px; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.score-row .meter i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.score-row .meter.signal i { background: var(--signal); }
.score-row .val { font-family: var(--mono); font-size: 13px; min-width: 48px; text-align: right; }

/* Analytics */
.kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.kpi-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.kpi-value {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kpi-delta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signal);
}
.spark {
  margin-top: 8px;
  height: 36px;
  width: 100%;
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
@media (max-width: 880px) { .stats { grid-template-columns: 1fr; } }
.stat {
  padding: clamp(36px, 5vw, 64px) 28px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stats .stat:last-child { border-right: 0; }
@media (max-width: 880px) { .stat { border-right: 0; border-bottom: 1px solid var(--line); } .stats .stat:last-child { border-bottom: 0; } }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.stat-num .unit {
  font-style: italic;
  background: linear-gradient(118deg, #6A34FF 0%, #4B22CF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 0.5em;
  vertical-align: super;
  display: inline-block;
  padding-right: 0.18em;
  margin-right: -0.08em;
}
.stat-label {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 28ch;
}

/* ---------- Scenarios chip cloud ---------- */
.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.cloud .chip-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  background: transparent;
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.cloud .chip-lg::before {
  content: "→";
  font-family: var(--mono);
  font-size: 13px;
  color: var(--signal);
}
.cloud .chip-lg:hover { background: var(--ink); color: var(--paper-light); transform: translateY(-2px); }
.cloud .chip-lg:hover::before { color: var(--paper-light); }

/* ---------- Quote / testimonial ---------- */
.quote {
  background: var(--ink-bg);
  color: var(--ink-on);
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.quote::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 90% 10%, rgba(221,75,26,0.18), transparent 60%);
  pointer-events: none;
}
/* Eyebrow lives above the radial-gradient overlay (position: relative
   to escape the ::before) and uses the dim cream so it reads as a
   label on the dark card without competing with the pull-quote. */
.quote > .eyebrow {
  position: relative;
  color: var(--ink-on-mute);
  margin-bottom: 24px;
}
.quote > .eyebrow .dot { box-shadow: 0 0 0 4px rgba(221, 75, 26, 0.18); }
.quote-text {
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 32ch;
  position: relative;
}
.quote-text .mark {
  font-style: italic;
  color: var(--signal);
}
.quote-attr {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.quote-attr .av {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--signal), var(--signal-deep));
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper-light);
}
.quote-attr .who { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }
.quote-attr .role { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-on-mute); }

/* Three-up dark cards */
.dark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 880px) { .dark-grid { grid-template-columns: 1fr; } }
.dark-card {
  background: var(--ink-bg-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--ink-on);
}
.dark-card .eyebrow { color: var(--ink-on-mute); }
.dark-card .eyebrow .dot { box-shadow: 0 0 0 4px rgba(221,75,26,0.18); }
/* The h4 inside a dark card carries the customer quote itself, so
   it leans into the serif pull-quote treatment. Slightly smaller
   than landing-page h4s because quotes are longer than headlines
   and need room to breathe at this width. */
.dark-card h4 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 14px 0 14px;
}
.dark-card p { color: var(--ink-on-mute); font-size: 15px; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 22px;
  color: var(--signal);
  display: inline-block;
  transform-origin: center;
  transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }

/* Open/close animation is driven by JS (Web Animations API) so
   the natural <details> hide-when-closed behavior is preserved
   for screen readers and no-JS users. `overflow-anchor: none`
   stops the browser from picking the animating panel as the
   scroll anchor, which otherwise causes the page to jump while
   the height interpolates. */
.faq .faq-body {
  overflow: hidden;
  overflow-anchor: none;
  contain: layout paint;
  will-change: height;
}
.faq summary { scroll-margin-top: 96px; }

.faq details p {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 70ch;
}

/* ---------- Footer / Final CTA ---------- */
.cta-final {
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0;
  border-top: 1px solid var(--line-strong);
}
.cta-final h2 {
  font-family: var(--serif);
  font-size: clamp(54px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
/* Painted with the same vibrant watercolor stops as the .btn-signal
   CTA right below, so the headline and the button read like two
   strokes of the same brush. */
.cta-final h2 em {
  background: linear-gradient(120deg,
    #6A2BFF 0%,
    #2858E8 18%,
    #0E9BC4 38%,
    #16A86E 58%,
    #E89A18 76%,
    #E8633E 88%,
    #C6359A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.4px rgba(20, 17, 13, 0.18);
  filter: saturate(1.24) contrast(1.08);
  text-shadow: 0 1px 1px rgba(20, 17, 13, 0.10);
}
.cta-final-copy {
  max-width: 36ch;
}
@media (max-width: 720px) {
  .cta-final-copy {
    max-width: none;
    width: 100%;
  }
  .cta-final-copy .lede {
    max-width: none;
  }
}
.cta-final .actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.cta-final .actions .btn-signal {
  background: linear-gradient(118deg, #6A34FF 0%, #4B22CF 100%);
  color: #FFFFFF;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.78),
    0 0 1px rgba(20, 17, 13, 0.58);
  filter: saturate(1.08) contrast(1.12) brightness(0.96);
  box-shadow:
    0 16px 36px -10px rgba(91, 43, 255, 0.62),
    0 8px 20px -8px rgba(121, 77, 255, 0.50);
}
.cta-final .actions .btn-signal:hover,
.cta-final .actions .btn-signal:active,
.cta-final .actions .btn-signal:focus-visible {
  background: linear-gradient(120deg,
    #6A2BFF 0%,
    #2858E8 18%,
    #0E9BC4 38%,
    #16A86E 58%,
    #E89A18 76%,
    #E8633E 88%,
    #C6359A 100%);
  filter: saturate(1.3) contrast(1.22) brightness(1.0);
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.9),
    0 0 1px rgba(20, 17, 13, 0.72);
  box-shadow:
    0 0 0 1px rgba(20, 17, 13, 0.22) inset,
    0 22px 46px -10px rgba(182, 135, 36, 0.68),
    0 12px 30px -8px rgba(14, 143, 126, 0.64),
    0 10px 26px -8px rgba(91, 45, 226, 0.72),
    0 8px 22px -8px rgba(192, 67, 164, 0.60);
}

.footer {
  background: var(--ink-bg);
  color: var(--ink-on);
  padding: 80px 0 40px;
  position: relative;
}
.footer .wrap { z-index: 2; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--ink-line);
}
@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { color: var(--ink-on); font-size: 36px; }
.footer-brand p {
  margin-top: 18px;
  color: var(--ink-on-mute);
  max-width: 32ch;
  font-size: 15px;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-on-mute);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14.5px;
  color: var(--ink-on);
  position: relative;
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--signal); }
.footer-col a[href="demo/"]:hover,
.footer-col a[href="demo/"]:focus-visible {
  background: linear-gradient(120deg,
    #7A56FF 0%,
    #4FAFFF 18%,
    #38DAB8 38%,
    #7ED33A 58%,
    #FFD35A 76%,
    #FFAD55 88%,
    #FF67D9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.footer-bottom {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-on-mute);
}
.footer-bottom .heart {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  fill: #FF3344;
  margin: 0 3px;
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 50%, 100% { transform: scale(1); }
  10%, 30%      { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-bottom .heart { animation: none; }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Hero is above-the-fold: don't hide/fade it before IO kicks in. */
.hero [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .panel-head .live .pulse { animation: none; }
}

/* ---------- Page header (interior) ---------- */
.page-hero {
  padding: clamp(64px, 9vw, 132px) 0 clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.page-hero .crumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.page-hero .crumb a { color: var(--ink-muted); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.page-hero .crumb a:hover { color: var(--ink); border-color: var(--ink); }
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.page-hero h1 em { color: var(--signal); }
.page-hero .lede { margin-top: 28px; }

/* ---------- Article (blog) ---------- */
.article {
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.article h2 { font-family: var(--serif); font-size: 36px; margin: 48px 0 16px; color: var(--ink); }
.article h3 { font-family: var(--serif); font-size: 26px; margin: 32px 0 12px; color: var(--ink); }
.article p { margin: 0 0 18px; }
.article a { color: var(--signal); border-bottom: 1px solid var(--signal); }

/* Blog list */
.post-list { border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background .25s var(--ease);
}
.post-row:hover { background: var(--paper-light); }
.post-row .date { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.post-row .ttl { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; }
.post-row .arrow { font-family: var(--mono); color: var(--signal); transition: transform .3s var(--ease); }
.post-row:hover .arrow { transform: translateX(6px); }
@media (max-width: 720px) {
  .post-row { grid-template-columns: 1fr; gap: 6px; }
  .post-row .arrow { display: none; }
}

/* ---------- Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.tier.featured { background: var(--ink-bg); color: var(--ink-on); border-color: var(--ink-bg); }
.tier .name { font-family: var(--serif); font-size: 30px; letter-spacing: -0.02em; }
.tier .name em { color: var(--signal); font-style: italic; }
.tier .price { font-family: var(--serif); font-size: 56px; letter-spacing: -0.03em; line-height: 1; margin: 18px 0; }
.tier .price .unit { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-left: 4px; vertical-align: middle; }
.tier.featured .price .unit { color: var(--ink-on-mute); }
.tier .desc { color: var(--ink-soft); }
.tier.featured .desc { color: var(--ink-on-mute); }
.tier ul { list-style: none; padding: 0; margin: 24px 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.tier li { font-size: 14.5px; display: flex; gap: 10px; }
.tier li::before { content: "✓"; color: var(--signal); }
.tier .btn { width: 100%; justify-content: center; }

/* ---------- Feature page extras ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
  position: relative;
}
.feature-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.feature-card .num {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.feature-card h4 { font-family: var(--serif); font-size: 28px; letter-spacing: -0.02em; }
.feature-card p { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.feature-card .soon {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid var(--signal);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1;
}

.cross-link {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 880px) { .cross-link { grid-template-columns: 1fr; } }
.cross-link a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.cross-link a:hover { background: var(--ink-bg); color: var(--ink-on); border-color: var(--ink-bg); }
.cross-link .num { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.cross-link a:hover .num { color: var(--signal); }
.cross-link .ttl { font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; }
.cross-link .arr { margin-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--signal); }

/* Pull quote (interior pages) */
.pullquote {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: clamp(40px, 6vw, 72px) 0;
  margin: clamp(56px, 7vw, 88px) 0;
}
.pullquote blockquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
  font-style: italic;
}
.pullquote blockquote .em { color: var(--signal); font-style: italic; }
.pullquote .src {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* TOC / Spec list */
.spec {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--line);
  align-items: baseline;
}
@media (max-width: 720px) { .spec { grid-template-columns: 1fr; gap: 6px; } }
.spec .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.spec .v { font-family: var(--serif); font-size: 22px; letter-spacing: -0.02em; }
.spec .v small { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); display:block; margin-top: 4px; font-style: normal; line-height: 1.5; }

/* Integrations strip */
.integrations {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.integrations .eyebrow { flex-shrink: 0; }
.integrations-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.integrations-row span { position: relative; }
.integrations-row span:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -18px;
  color: var(--signal);
  font-style: normal;
}

/* Use case rows */
.usecase {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
@media (max-width: 720px) { .usecase { grid-template-columns: 1fr; gap: 12px; } }
.usecase .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.usecase .txt h4 { font-family: var(--serif); font-size: 26px; letter-spacing: -0.02em; margin-bottom: 8px; }
.usecase .txt p { color: var(--ink-soft); font-size: 15.5px; max-width: 60ch; }
.usecase .meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-align: right; }
@media (max-width: 720px) { .usecase .meta { text-align: left; } }


/* ======================================================
   BENTO GRID — animated, interactive product showcase
   ====================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } }

.bento-cell {
  background: var(--card);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 440px;
  position: relative;
  transition: background .35s var(--ease);
  cursor: default;
  overflow: hidden;
}
.bento-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 20%, rgba(104, 62, 244, 0.12), transparent 70%);
  transition: opacity .4s var(--ease);
}
.bento-cell:hover { background: var(--paper-light); }
.bento-cell:hover::after { opacity: 1; }

.bento-stage {
  flex: 0 0 240px;        /* lock the basis to 240, no grow/shrink */
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(104, 62, 244, 0.05), transparent 60%),
    var(--paper-light);
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
  transition: --mx .18s ease-out, --my .18s ease-out, border-color .35s var(--ease), background .35s var(--ease);
  min-height: 240px;
  max-height: 240px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.bento-cell:hover .bento-stage {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(104, 62, 244, 0.14), transparent 65%),
    var(--paper-light);
}

.bento-text { display: flex; flex-direction: column; gap: 14px; }
.bento-text .eyebrow { color: var(--ink-muted); }
.bento-text h4 {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.bento-text p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: 32ch;
}

/* ---------- Bento mock: PERSONAS (cycling) ---------- */
.b-persona {
  display: grid;
  grid-template-rows: auto 0fr;
  gap: 0;
  width: 100%;
  max-width: 280px;
  transition: grid-template-rows .4s var(--ease), gap .4s var(--ease);
}
.b-persona.has-selection {
  grid-template-rows: auto 1fr;
  gap: 10px;
}
.b-persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.b-persona-profile {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease) .05s, transform .35s var(--ease) .05s;
}
.b-persona.has-selection .b-persona-profile {
  opacity: 1;
  transform: translateY(0);
}
.b-persona-profile .trait {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.b-persona-profile .trait-l,
.b-persona-profile .trait-r {
  white-space: nowrap;
}
.b-persona-profile .trait-l { justify-self: end; text-align: right; }
.b-persona-profile .trait-r { justify-self: start; text-align: left; }
.b-persona-profile .dots {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
  justify-self: center;
}
.b-persona-profile .dots > span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background .25s var(--ease);
}
.b-persona-profile .dots > span.on {
  background: var(--signal);
}
.b-persona .pcard {
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
  animation: pcardCycle 8s ease-in-out infinite;
  animation-play-state: running;
}
.b-persona .pcard:nth-child(1) { animation-delay: 0s; }
.b-persona .pcard:nth-child(2) { animation-delay: 2s; }
.b-persona .pcard:nth-child(3) { animation-delay: 4s; }
.b-persona .pcard:nth-child(4) { animation-delay: 6s; }
.b-persona .pcard:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.b-persona .pcard:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.b-persona.has-selection .pcard {
  animation-play-state: paused;
}
.b-persona.has-selection .pcard:not(.is-selected) {
  opacity: 0.5;
  border-color: var(--line);
  background: var(--card);
  transform: none;
}
.b-persona .pcard.is-selected {
  animation: none;
  border-color: var(--signal);
  background: var(--signal-soft);
  transform: translateY(-1px);
}
.b-persona .pcard .av {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ink-soft), var(--ink));
  color: var(--paper-light);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  flex-shrink: 0;
}
.b-persona .pcard .nm {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.b-persona .pcard .rl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}
@keyframes pcardCycle {
  0%, 8%    { border-color: var(--signal); }
  20%, 100% { border-color: var(--line); }
}

/* ---------- Bento mock: COACH (lesson -> quiz carousel) ---------- */
.b-coach {
  width: 100%;
  max-width: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.coach-slide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
  grid-area: 1 / 1;
}
.b-coach { display: grid; grid-template-columns: 1fr; }
.b-coach > .coach-slide { min-height: 148px; }
.b-coach > .coach-dots { grid-area: 2 / 1; margin-top: 10px; }
.coach-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Lesson slide */
.coach-lesson {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 12px 10px;
}
.coach-lesson-bar {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 10px;
}
.coach-timer { color: var(--signal); }
.coach-lesson-title {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.coach-lesson-body {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  min-height: 48px;
}
.coach-lesson-body em {
  font-style: italic;
  color: var(--signal);
  background: var(--signal-soft);
  padding: 0 3px;
  border-radius: 3px;
}
.coach-lesson { position: relative; padding-bottom: 18px; }
.coach-lesson-progress {
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 4px;
  background: var(--line);
  border-radius: 0 0 9px 9px;     /* flush with the card's outer corners */
  overflow: hidden;
}
.coach-lesson-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--signal);
  border-radius: inherit;
  animation: coachFill 4.8s linear infinite;
}
.coach-lesson.is-fading { animation: coachFade 320ms var(--ease); }
@keyframes coachFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}
@keyframes coachFade {
  0%   { opacity: 0.15; transform: translateY(4px); }
  100% { opacity: 1;    transform: translateY(0); }
}

/* Quiz slide */
.coach-quiz {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coach-quiz-q {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.coach-quiz-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--signal-soft);
  padding: 2px 6px;
  border-radius: 99px;
  margin-right: 6px;
  vertical-align: 2px;
}
.coach-quiz-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  text-align: left;
}
.coach-quiz-opt span {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.coach-quiz-opt:hover {
  border-color: var(--signal);
  background: var(--paper-light);
  color: var(--ink);
}
.coach-quiz-opt:hover span {
  background: var(--signal);
  color: var(--paper-light);
}
.coach-quiz-opt.is-selected {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--ink);
}
.coach-quiz-opt.is-selected span {
  background: var(--signal);
  color: var(--paper-light);
}
.coach-quiz-opt.is-selected.is-correct {
  border-color: var(--leaf);
  background: rgba(68, 160, 71, 0.12);
}
.coach-quiz-opt.is-selected.is-correct span {
  background: var(--leaf);
  color: #fff;
}
.coach-quiz-opt.is-wrong {
  border-color: #D64545;
  background: rgba(214, 69, 69, 0.08);
  color: #B52C2C;
  animation: quiz-shake 360ms cubic-bezier(.36,.07,.19,.97);
}
.coach-quiz-opt.is-wrong span {
  background: #D64545;
  color: #fff;
}
@keyframes quiz-shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Confetti (fired on correct quiz answer) --------------------------- */
.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w, 8px);
  height: var(--h, 10px);
  border-radius: 2px;
  background: var(--c, var(--signal));
  will-change: transform, opacity;
  animation: confetti-fly var(--dur, 1300ms) cubic-bezier(.22, .75, .3, 1) forwards;
  transform: translate(-50%, -50%);
  opacity: 0;
}
@keyframes confetti-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.4); opacity: 0; }
  10%  { opacity: 1; }
  35%  { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(var(--r1)) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(var(--rot)) scale(0.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { animation: none; display: none; }
}

/* Carousel nav dots */
.coach-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.coach-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--line-strong);
  border: 0;
  padding: 0;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity .25s var(--ease), background .25s var(--ease), width .25s var(--ease);
}
.coach-dot.is-active {
  opacity: 1;
  background: var(--signal);
  width: 14px;
}
.coach-dot:hover { opacity: 0.8; }

/* ---------- Bento mock: SCORECARDS (animated meters) ---------- */
.b-score {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b-score .row {
  display: grid;
  grid-template-columns: 24px 1fr 28px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.b-score .row .k {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--signal);
  text-align: center;
}
.b-score .row .bar {
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.b-score .row .bar i {
  display: block;
  height: 100%;
  background: var(--signal);
  border-radius: inherit;
  transform-origin: left;
  animation: barFill 4s var(--ease-out) infinite;
}
.b-score .row:nth-child(1) .bar i { animation-delay: 0.00s; --w: 88%; }
.b-score .row:nth-child(2) .bar i { animation-delay: 0.12s; --w: 72%; }
.b-score .row:nth-child(3) .bar i { animation-delay: 0.24s; --w: 92%; }
.b-score .row:nth-child(4) .bar i { animation-delay: 0.36s; --w: 64%; }
.b-score .row:nth-child(5) .bar i { animation-delay: 0.48s; --w: 96%; }
.b-score .row:nth-child(6) .bar i { animation-delay: 0.60s; --w: 84%; }
.b-score .row:nth-child(7) .bar i { animation-delay: 0.72s; --w: 80%; }
.b-score .row:nth-child(8) .bar i { animation-delay: 0.84s; --w: 72%; }
.b-score .row .val {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}
@keyframes barFill {
  0%   { width: 0%; }
  35%, 100% { width: var(--w, 80%); }
}

/* ---------- Bento mock: METRICS (sparkline + KPI) ---------- */
.b-metrics {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b-metrics .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.b-metrics .big {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.025em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.b-metrics .big .unit { font-size: 14px; color: var(--ink-muted); font-family: var(--mono); }
.b-metrics .big .delta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--signal);
}
.b-metrics svg.spark {
  width: 100%;
  height: 48px;
  overflow: visible;
  margin-top: 2px;
}
.b-metrics svg.spark .line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 5s ease-out infinite;
}
.b-metrics .spark-axis {
  display: flex;
  justify-content: space-between;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@keyframes drawLine {
  0%, 5%   { stroke-dashoffset: 100; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ---------- Bento mock: BADGES MATRIX ---------- */
.b-badges {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 280px;
  font-size: 10px;
}
.b-badges .h {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-badges .h.lbl { text-align: left; }
.b-badges .rep {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}
.b-badges .cell {
  height: 22px;
  border-radius: 4px;
  background: var(--paper-deep);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  animation: badgePop 6s ease-in-out infinite;
}
/* Real certification badge colors, mirroring BadgesMap.tsx palette */
.b-badges .cell.violet { background: rgba(104, 62, 244, 0.16); color: var(--signal); }
.b-badges .cell.blue   { background: rgba(62, 111, 244, 0.14); color: #1D4ED8; }
.b-badges .cell.green  { background: rgba(68, 160, 71, 0.16); color: #047857; }
.b-badges .cell.indigo { background: rgba(79, 70, 229, 0.14); color: #4338CA; }
.b-badges .cell.orange { background: rgba(244, 104, 62, 0.16); color: #C2410C; }
.b-badges .cell.pink   { background: rgba(236, 72, 153, 0.14); color: #BE185D; }
.b-badges .cell:nth-child(7n+2) { animation-delay: 0s; }
.b-badges .cell:nth-child(7n+3) { animation-delay: 0.3s; }
.b-badges .cell:nth-child(7n+4) { animation-delay: 0.6s; }
.b-badges .cell:nth-child(7n+5) { animation-delay: 0.9s; }
.b-badges .cell:nth-child(7n+6) { animation-delay: 1.2s; }
@keyframes badgePop {
  0%, 20%, 100% { transform: scale(1); }
  8%            { transform: scale(1.10); }
}

/* ---------- Bento mock: OBJECTIONS (chips populating) ---------- */
.b-obj {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.b-obj .chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(6px);
  animation: chipIn 6s ease-out infinite;
}
.b-obj .chip.signal { background: var(--signal); color: var(--paper-light); border-color: var(--signal); }
.b-obj .chip:nth-child(1) { animation-delay: 0.0s; }
.b-obj .chip:nth-child(2) { animation-delay: 0.2s; }
.b-obj .chip:nth-child(3) { animation-delay: 0.4s; }
.b-obj .chip:nth-child(4) { animation-delay: 0.6s; }
.b-obj .chip:nth-child(5) { animation-delay: 0.8s; }
.b-obj .chip:nth-child(6) { animation-delay: 1.0s; }
.b-obj .chip:nth-child(7) { animation-delay: 1.2s; }
.b-obj .chip:nth-child(8) { animation-delay: 1.4s; }
@keyframes chipIn {
  0%, 30%   { opacity: 0; transform: translateY(6px); }
  35%, 80%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .b-persona .pcard,
  .coach-lesson-progress i,
  .b-score .row .bar i,
  .b-metrics svg.spark .line,
  .b-badges .cell,
  .b-obj .chip {
    animation: none;
  }
  .b-metrics svg.spark .line { stroke-dashoffset: 0; }
  .b-obj .chip { opacity: 1; transform: none; }
}


/* ======================================================
   BOLD MANIFESTO — stacked one-line-per-row headlines
   (Pace-inspired)
   ====================================================== */
.manifesto {
  font-family: var(--serif);
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  /* Single-row stage: rows are stacked and crossfade one at a time */
  position: relative;
  display: block;
  min-height: 2.4em;
}
.manifesto .row {
  position: absolute;
  top: 0; left: 0;
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.manifesto .row.is-active {
  opacity: 1;
  transform: translateY(0);
}
.manifesto .row .dim { color: var(--ink-muted); opacity: 0.68; }
.manifesto .row em { color: var(--signal); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .manifesto { min-height: 0; }
  .manifesto .row { position: static; opacity: 1; transform: none; display: block; }
}

/* §01 The Principle — short pin so the manifesto rotation reads,
   then the section ends naturally without leaving a tail of whitespace */
.section-principle {
  min-height: 0;
  padding: clamp(72px, 10vh, 132px) 0;
}
.principle-grid {
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
/* Lede → CTA rhythm. Mirrors `.manifesto-dots { margin-top: 28px }`
   so both columns of the principle grid share the same beat. */
.lede + .actions { margin-top: 28px; }
.section-principle > .wrap {
  position: static;
}
@media (max-width: 980px) {
  .section-principle { padding: clamp(72px, 10vw, 144px) 0; }
}

/* Manifesto carousel dots */
.manifesto-dots {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
}
.manifesto-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line-strong);
  border: 0;
  padding: 0;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity .25s var(--ease), background .25s var(--ease), width .3s var(--ease);
}
.manifesto-dot:hover { opacity: 0.7; }
.manifesto-dot.is-active {
  opacity: 1;
  background: var(--signal);
  width: 28px;
}
.manifesto .row.divider {
  height: 1px;
  background: var(--line-strong);
  margin: 18px 0;
  width: min(60%, 480px);
}
.manifesto .row .strike {
  position: relative;
  display: inline-block;
}
.manifesto .row .strike::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  top: 52%;
  height: 6px;
  background: var(--signal);
  transform: rotate(-2deg);
  border-radius: 99px;
  opacity: 0.85;
}

/* ======================================================
   AUDIENCE SPLIT — Builders + Learners
   ====================================================== */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 880px) { .audience { grid-template-columns: 1fr; } }
.audience-cell {
  padding: clamp(36px, 4.6vw, 64px);
  position: relative;
  overflow: hidden;
}
.audience-cell.builders { background: var(--card); }
.audience-cell.learners {
  background: var(--ink-bg);
  color: var(--ink-on);
}
.audience-cell .role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.audience-cell.learners .role { color: var(--ink-on-mute); }
.audience-cell .role .dot {
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--signal-soft);
}
.audience-cell h3 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 22px 0 24px;
  max-width: 14ch;
}
.audience-cell h3 em { color: var(--signal); font-style: italic; }
.audience-cell .lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 0 28px;
}
.audience-cell.learners .lede { color: var(--ink-on-mute); }

/* Full-width Old way <-> With Prepse carousel inside each audience cell */
.audience-vs {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-bottom: 28px;
  position: relative;
}
.audience-cell.learners .audience-vs { border-top-color: var(--ink-line); }

/* Segmented-control tabs: Old way <-> With Prepse.
   The active background lives on a sliding ::before pill (positioned
   by JS via --pill-x / --pill-w) instead of on the tab itself, so
   switching tabs glides instead of snapping. "Old way" stays neutral
   gray; flipping to "With Prepse" blooms into the vibrant rainbow. */
.audience-vs-tabs {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 20px;
  position: relative;
  isolation: isolate;
}
.audience-cell.learners .audience-vs-tabs {
  background: var(--ink-bg-2);
  border-color: var(--ink-line);
}

.audience-vs-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--pill-w, calc(50% - 4px));
  transform: translateX(var(--pill-x, 4px));
  border-radius: 999px;
  background: linear-gradient(180deg, #7A7264 0%, #625B4F 100%);
  filter: none;
  box-shadow: 0 1px 2px rgba(20, 17, 13, 0.14);
  transition:
    transform .42s cubic-bezier(.4, 0, .2, 1),
    width .42s cubic-bezier(.4, 0, .2, 1),
    filter .42s cubic-bezier(.4, 0, .2, 1),
    box-shadow .42s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
  pointer-events: none;
}

.audience-vs-tabs:has(.audience-vs-tab[data-vs="1"].is-active)::before {
  background: linear-gradient(118deg, #7B4BFF 0%, #683EF4 52%, #4B22CF 100%);
  filter: saturate(1.08) contrast(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 8px 22px -6px rgba(104, 62, 244, 0.55),
    0 4px 12px -4px rgba(75, 34, 207, 0.45);
}

.audience-vs-tab {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color .35s var(--ease), text-shadow .35s var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.audience-vs-tab-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
  background-color: #683EF4;
  -webkit-mask: url('../img/prepse-icon.svg') center / contain no-repeat;
          mask: url('../img/prepse-icon.svg') center / contain no-repeat;
  opacity: 0.7;
  transition: opacity .35s var(--ease), background-color .35s var(--ease);
}
.audience-vs-tab:hover .audience-vs-tab-icon {
  opacity: 1;
  background-color: #683EF4;
  filter: drop-shadow(0 0 6px rgba(104, 62, 244, 0.55));
}
.audience-vs-tab.is-active .audience-vs-tab-icon {
  opacity: 1;
  background-color: #FFFFFF;
  filter: drop-shadow(0 1px 1px rgba(20, 17, 13, 0.35));
}
.audience-cell.learners .audience-vs-tab { color: var(--ink-on-mute); }
.audience-vs-tab:hover { color: var(--ink); }
.audience-cell.learners .audience-vs-tab:hover { color: var(--ink-on); }
.audience-vs-tab.is-active {
  color: #FFFFFF;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.62),
    0 0 1px rgba(20, 17, 13, 0.45);
}
.audience-cell.learners .audience-vs-tab.is-active {
  color: #FFFFFF;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(20, 17, 13, 0.62),
    0 0 1px rgba(20, 17, 13, 0.45);
}

/* Panel: full width list, swaps with crossfade */
.audience-vs-panel {
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.audience-vs-panel[hidden] { display: none; }
.audience-vs-panel.is-active { display: block; opacity: 1; }

.audience-vs-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audience-vs-panel li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.4;
}
.audience-vs-panel.old li {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(20, 17, 13, 0.22);
  text-decoration-thickness: 1px;
}
.audience-cell.learners .audience-vs-panel.old li {
  color: var(--ink-on-mute);
  text-decoration-color: rgba(255, 255, 255, 0.18);
}
.audience-vs-panel.old li::before {
  content: "—";
  color: var(--line-strong);
  font-family: var(--mono);
}
.audience-vs-panel.new li::before {
  content: "✓";
  color: var(--signal);
  font-family: var(--mono);
  font-weight: 600;
}
.audience-cell.learners .audience-vs-panel.new li { color: var(--ink-on); }

.audience-cell .role-list {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.audience-cell.learners .role-list { border-top-color: var(--ink-line); }
.role-list-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-right: 8px;
}
.audience-cell.learners .role-list-label { color: var(--ink-on-mute); }
.audience-cell .role-list .pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  color: var(--ink-soft);
}
.audience-cell.learners .role-list .pill {
  background: var(--ink-bg-2);
  border-color: var(--ink-line);
  color: var(--ink-on-mute);
}

/* ======================================================
   INDUSTRIES — playbook-ready cards
   ====================================================== */
.industries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 880px) { .industries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .industries { grid-template-columns: 1fr; } }
.industry {
  background: var(--card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
  position: relative;
  transition: background .25s var(--ease);
}
.industry:hover { background: var(--paper-light); }
.industry .icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}
.industry h4 {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.industry p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}
.industry .badge {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  color: var(--ink-muted);
}
.industry.ready .badge {
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--signal);
}
.industry.ready .icon {
  background: linear-gradient(135deg, var(--signal-light), var(--signal));
  color: var(--paper-light);
  border-color: transparent;
}

/* ==========================================================
   LEGAL PAGES (Privacy, Terms)
   Editorial long-form layout: sticky TOC + readable column.
   ========================================================== */
.legal-page { background: var(--paper); }

/* Hero / page header */
.legal-hero {
  position: relative;
  padding: clamp(96px, 14vw, 168px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.legal-hero .wrap { display: flex; flex-direction: column; gap: 16px; }
.legal-hero h1 { margin: 6px 0 4px; }
.legal-hero .lede { max-width: 64ch; margin-top: 12px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  width: max-content;
  padding: 6px 0;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.legal-back:hover { color: var(--ink); transform: translateX(-2px); }

.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

/* Two-column grid: sticky TOC + body */
.legal-section { padding-top: clamp(48px, 6vw, 80px); }
.legal-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  max-width: 1080px;
  margin: 0 auto;
}

/* TOC */
.legal-toc {
  position: sticky;
  top: 128px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-toc nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.legal-toc a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.legal-toc a:hover {
  color: var(--ink);
  border-left-color: var(--line-strong);
}
.legal-toc a:focus-visible {
  outline: none;
  color: var(--ink);
  border-left-color: var(--signal);
  background: var(--signal-soft);
}
.legal-toc a.is-active {
  color: var(--ink);
  border-left-color: var(--signal);
}

/* Body / prose */
.legal {
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: clamp(48px, 6vw, 72px) 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 128px;
}
.legal-prose > h2:first-child,
.legal-prose > :first-child { margin-top: 0; }
/* Soft fade-in once markdown lands so there's no flash of empty body. */
.legal-prose { opacity: 0; transition: opacity .3s var(--ease); }
body.legal-ready .legal-prose { opacity: 1; }
.legal h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 28px 0 8px;
  scroll-margin-top: 128px;
}
.legal p { margin: 0 0 16px; }
.legal p:last-child { margin-bottom: 0; }
.legal strong { color: var(--ink); font-weight: 500; }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.legal a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}

.legal ul, .legal ol {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.legal ul li, .legal ol li {
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--line-strong);
  border-radius: 999px;
}
.legal ol { counter-reset: step; }
.legal ol li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* Definitional list (bold lead-in) */
.legal ul.legal-defs li {
  padding-left: 0;
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal ul.legal-defs li:first-child { padding-top: 12px; }
.legal ul.legal-defs li::before { display: none; }
.legal ul.legal-defs li strong {
  display: inline;
  margin-right: 6px;
  color: var(--ink);
}

/* Responsive */
@media (max-width: 880px) {
  .legal-grid { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc {
    position: static;
    padding: 16px 14px;
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .legal-toc nav { border-left: 0; }
  .legal-toc a { padding-left: 0; border-left: 0; }
  .legal-toc a:hover { border-left: 0; }
}
@media (max-width: 560px) {
  .legal-hero { padding-top: clamp(80px, 22vw, 120px); }
  .legal { font-size: 15.5px; }
}

/* ==========================================================
   BLOG (/blog)
   Quiet index + reusable markdown article shell.
   ========================================================== */
.blog-page { background: var(--paper); }

.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;
}

.blog-hero {
  position: relative;
  padding: clamp(96px, 12vw, 144px) 0 clamp(20px, 3vw, 32px);
  z-index: 2;
}
.blog-hero .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-hero h1 {
  margin: 0;
}

/* Article hero (used on individual posts) keeps a touch more presence */
.blog-post-hero {
  position: relative;
  padding: clamp(104px, 14vw, 168px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.blog-post-hero .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-post-hero h1 {
  max-width: 920px;
  margin: 6px 0 4px;
}
.blog-post-hero .lede {
  max-width: 66ch;
}

.blog-section { padding-top: clamp(24px, 3vw, 40px); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.blog-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-muted);
}

.blog-card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-card-link:hover {
  transform: translateY(-2px);
  border-color: rgba(104, 62, 244, 0.4);
  box-shadow: 0 18px 50px rgba(104, 62, 244, 0.1);
}
.blog-card-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}
.blog-card h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.blog-card p {
  margin: 0;
  color: var(--ink-soft);
}
.blog-card-meta {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.blog-post-section .legal-grid { max-width: 1120px; }
.blog-article {
  max-width: 72ch;
  font-size: 17px;
}
.blog-article blockquote {
  margin: 28px 0;
  padding: 18px 0 18px 22px;
  border-left: 3px solid var(--signal);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
}

/* ==========================================================
   DEMO PAGE (/demo)
   Two-column hero: editorial pitch on the left, Cal.com
   inline embed framed like a product surface on the right.
   ========================================================== */
.demo-page { background: var(--paper); }

.demo-hero {
  position: relative;
  padding: clamp(112px, 14vw, 168px) 0 clamp(56px, 8vw, 112px);
  overflow: hidden;
}

/* Soft purple glow behind the booking card so it reads as the
   primary surface on the page without needing a hard border. */
.demo-hero::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -8%;
  width: 60%;
  height: 70%;
  background:
    radial-gradient(60% 60% at 50% 40%, var(--signal-soft), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

.demo-grid {
  display: grid;
  /* Pitch column is the wider one now; the booker is intentionally
     slimmer so Cal's month view renders shorter (it auto-sizes its
     date grid to whatever width it has). */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.demo-pitch {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 112px;
  align-self: start;
}
.demo-pitch .legal-back { margin-bottom: 4px; }
.demo-title { margin: 4px 0 0; }
.demo-title .signal-italic {
  color: var(--signal);
  font-style: italic;
}
.demo-lede { margin: 0; }

/* Numbered "what to expect" list, mirrors the editorial / mono
   accent used in feature cards across the site. */
.demo-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.demo-bullets li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.demo-bullet-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 3px;
}
.demo-bullets strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 4px;
}
.demo-bullets span {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Compact testimonial under the bullets — quieter than the homepage
   .quote so it doesn't compete with the booking card. */
.demo-trust {
  margin-top: 8px;
  padding: 18px 20px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-trust-quote {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.demo-trust-quote .mark {
  background: linear-gradient(120deg, transparent 0 6%, var(--signal-soft) 6% 94%, transparent 94%);
  padding: 0 4px;
  border-radius: 3px;
}
.demo-trust-attr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-trust-attr .av {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  flex-shrink: 0;
}
.demo-trust-attr .who {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.demo-trust-attr .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ----- Booker (right column) ----- */
.demo-booker {
  position: relative;
  z-index: 2;
}
.demo-booker-frame {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 30px 60px -30px rgba(20, 17, 13, 0.30),
    0 14px 30px -18px rgba(104, 62, 244, 0.18);
}

/* "Browser chrome" header so the embed reads as a product surface
   and not a raw iframe drop. Inert, just decoration. */
.demo-booker-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--paper-light);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.demo-booker-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  flex-shrink: 0;
}
.demo-booker-dot:nth-child(1) { background: #E0855B; }
.demo-booker-dot:nth-child(2) { background: #D6BC4A; }
.demo-booker-dot:nth-child(3) { background: #6FB36A; }

/* Stage that hosts Cal's iframe. Cal injects an iframe directly
   here and resizes it via postMessage to fit its content (which
   gets very tall on the slot picker / form steps). We pin a fixed
   height and let any overflow scroll inside the frame, so the
   booker never blows out the page layout. Skeleton sits inside
   until Cal mounts. */
.demo-booker-stage {
  position: relative;
  width: 100%;
  height: 860px;
  overflow: hidden;
  background: #FFFFFF;
}
.demo-booker-stage > cal-inline,
.demo-booker-stage iframe {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border: 0;
}

/* Skeleton placeholder — visible only until Cal mounts its iframe.
   Once Cal injects the iframe into this container, the iframe sits
   above the skeleton and covers it. */
.demo-booker-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  pointer-events: none;
}
.demo-booker-stage:has(> cal-inline) .demo-booker-skeleton {
  display: none;
}
.demo-booker-skeleton-head {
  height: 22px;
  width: 42%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--paper-deep) 0%, var(--paper-light) 50%, var(--paper-deep) 100%);
  background-size: 200% 100%;
  animation: demoShimmer 1.6s linear infinite;
}
.demo-booker-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.demo-booker-skeleton-grid span {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--paper-deep) 0%, var(--paper-light) 50%, var(--paper-deep) 100%);
  background-size: 200% 100%;
  animation: demoShimmer 1.6s linear infinite;
}
.demo-booker-skeleton-grid span:nth-child(odd)  { animation-delay: .1s; }
.demo-booker-skeleton-grid span:nth-child(3n)   { animation-delay: .2s; }
.demo-booker-skeleton-grid span:nth-child(5n)   { animation-delay: .3s; }
.demo-booker-skeleton-foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
@keyframes demoShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.demo-booker-note {
  margin: 18px 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  text-align: center;
}
.demo-booker-note a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.demo-booker-note a:hover {
  color: var(--signal);
  border-color: var(--signal);
}

/* Responsive: stack and let the booker breathe on tablet/mobile. */
@media (max-width: 1024px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 56px);
  }
  .demo-pitch {
    position: static;
    max-width: 60ch;
  }
  .demo-booker-stage { height: 540px; }
}
@media (max-width: 640px) {
  .demo-hero { padding-top: clamp(96px, 22vw, 132px); }
  .demo-bullets li { grid-template-columns: 44px minmax(0, 1fr); }
  .demo-booker-bar { padding: 10px 12px; }
  .demo-booker-stage { height: 520px; }
  .demo-booker-skeleton { padding: 22px 18px; }
}