/* ==========================================================================
   usabiq — Landing v5
   Built from .styleseed/effective-rules.md
   grammar: expressive-marketing · adapter: product-ui · domain: saas
   page: landing · recipe: expressive-brand · profile: none

   Focal point: ONE hero proof panel showing raw open-text responses
   resolving into AI clusters. Every other section is deliberately quieter.

   Self-contained — declares its own @font-face. All rules scoped under .v5.
   ========================================================================== */

/* ---------- 1. Fonts (local, no CDN) ---------- */
@font-face {
  font-family: "FigtreeV5";
  src: local("Figtree Variable"), local("Figtree"),
       url("assets/fonts/Figtree-VariableFont.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterV5";
  src: local("Inter Variable"), local("Inter"),
       url("assets/fonts/Inter-VariableFont.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("assets/icons/materialIcons_outline.woff2") format("woff2");
}

/* ==========================================================================
   2. Tokens
   Green is ACCENT and owns the primary action. Surfaces stay neutral —
   warm cream in light bands, neutral-dark in dark bands.
   ========================================================================== */
body.v5 {
  /* Action + brand */
  --action:        #35755f;
  --action-hover:  #2f6a55;
  --action-press:  #275646;
  --brand-500:     #4a9b82;   /* large/decorative fills only */
  --brand-soft:    #7ebea8;   /* accent on dark surfaces (6.9:1) */
  --brand-100:     #d4eae1;   /* board brand-100 */
  --brand-200:     #a8d5c4;   /* board brand-200 */
  --brand-wash:    #edf6f2;   /* board brand-50 — tonal group on light */

  /* Surfaces */
  --cream:         #f4ede4;
  --cream-2:       #faf6f0;
  --white:         #ffffff;
  --dark:          #1c2521;
  --dark-900:      #0f1613;
  --dark-raise:    #24302b;

  /* Ink */
  --ink:           #1d1c1d;
  --muted:         #56545a;
  --faint:         #656269;
  --on-dark:       #f4f6f5;
  --on-dark-mut:   #b6c2bc;

  /* Semantic (sentiment — used only for real sentiment data) */
  --pos:           #2f6a55;
  --pos-wash:      #e4efea;
  --neg:           #9c4221;
  --neg-wash:      #f6e9e2;

  /* Lines / radius / elevation */
  --line:          rgba(29, 28, 29, 0.12);
  --line-2:        rgba(29, 28, 29, 0.07);
  --line-dark:     rgba(244, 246, 245, 0.14);
  --r-xs:          6px;
  --r-sm:          10px;
  --r:             16px;
  --r-lg:          24px;
  --shadow-sm:     0 1px 2px rgba(29, 28, 29, 0.05), 0 3px 10px rgba(29, 28, 29, 0.04);
  --shadow-focal:  0 2px 4px rgba(29, 28, 29, 0.04), 0 18px 48px rgba(29, 28, 29, 0.10);

  /* Type */
  --display: "FigtreeV5", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "InterV5", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion — one duration/easing family (Spring restrained) */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  140ms;
  --dur:       260ms;
  --dur-slow:  620ms;

  /* Layout */
  --wrap:      1200px;
  --wrap-text: 720px;
  --nav-h:     72px;
}

/* ---------- 3. Base ---------- */
body.v5 {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.v5 *,
.v5 *::before,
.v5 *::after { box-sizing: border-box; }

.v5 img,
.v5 svg { max-width: 100%; display: block; }

.v5 a { color: inherit; }

.v5 :focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.v5 .band--dark :focus-visible { outline-color: var(--brand-soft); }

.v5 .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  user-select: none;
  flex: none;
}

.v5 .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.v5 .skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream-2);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.v5 .skip-link:focus { top: 16px; }

/* ---------- 4. Layout primitives ---------- */
.v5 .wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.v5 .band { padding-block: clamp(72px, 9vw, 120px); }
.v5 .band--tight { padding-block: clamp(48px, 6vw, 72px); }
.v5 .band--cream  { background: var(--cream); }
.v5 .band--cream2 { background: var(--cream-2); }
.v5 .band--white  { background: var(--white); }
.v5 .band--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.v5 .band--dark .eyebrow { color: var(--brand-soft); }
.v5 .band--dark .lede,
.v5 .band--dark .muted { color: var(--on-dark-mut); }

/* ---------- 5. Type ---------- */
.v5 h1, .v5 h2, .v5 h3, .v5 h4 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.v5 h1 {
  font-size: clamp(1.75rem, 5.6vw, 2.5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
.v5 h2 {
  font-size: clamp(1.5rem, 5.4vw, 2.5rem);
  overflow-wrap: break-word;
  line-height: 1.14;
  font-weight: 800;
}
.v5 h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.26;
  font-weight: 700;
}
.v5 h4 {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.v5 p { margin: 0; }

.v5 .eyebrow {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin: 0 0 20px;
}
.v5 .lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.v5 .muted { color: var(--muted); }
.v5 .fine {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--faint);
}
.v5 .num { font-variant-numeric: tabular-nums; }

/* ---------- 6. Buttons — one control height family ---------- */
.v5 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.v5 .btn--primary {
  background: var(--action);
  color: var(--white);
}
.v5 .btn--primary:hover { background: var(--action-hover); }
.v5 .btn--primary:active { background: var(--action-press); transform: translateY(1px); }

.v5 .btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.v5 .btn--ghost:hover { border-color: rgba(29, 28, 29, 0.28); background: rgba(29, 28, 29, 0.03); }

.v5 .band--dark .btn--ghost {
  color: var(--on-dark);
  border-color: var(--line-dark);
}
.v5 .band--dark .btn--ghost:hover {
  border-color: rgba(244, 246, 245, 0.34);
  background: rgba(244, 246, 245, 0.06);
}

.v5 .btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }
.v5 .btn--block { width: 100%; }

.v5 .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--action);
  text-decoration: none;
}
.v5 .link-arrow .material-symbols-outlined { font-size: 18px; transition: transform var(--dur-fast) var(--ease); }
.v5 .link-arrow:hover { color: var(--action-hover); }
.v5 .link-arrow:hover .material-symbols-outlined { transform: translateX(3px); }
.v5 .band--dark .link-arrow { color: var(--brand-soft); }

/* ==========================================================================
   7. Nav
   ========================================================================== */
.v5 .nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 237, 228, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.v5 .nav.is-stuck {
  background: rgba(250, 246, 240, 0.94);
  border-bottom-color: var(--line-2);
}
.v5 .nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--nav-h);
}
.v5 .nav__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.v5 .nav__brand { gap: 10px; }
/* Brand board §03: text logo is Figtree SemiBold with the q in brand green.
   The lettermark is rendered here rather than as an <img> because the shipped
   SVGs set font-family "DejaVu Sans, Arial" — they draw the q in whatever the
   viewer has installed, not in Figtree. */
.v5 .wordmark {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ink);
}
.v5 .wordmark__q { color: var(--brand-500); }

.v5 .brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 22%;
  background: var(--brand-500);
  color: var(--white);
  font-family: var(--display);
  font-size: 17px;          /* board ratio: glyph ≈ 60 % of the tile */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
}
/* the q descender makes a plain centre read low — nudge to optical centre */
.v5 .brandmark::before { content: "q"; transform: translateY(-0.06em); }

/* dark surfaces: tile keeps the brand fill, the q shifts to brand-300 */
.v5 .foot__brand .wordmark { color: var(--on-dark); }
.v5 .foot__brand .wordmark__q { color: var(--brand-soft); }

.v5 .nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-inline-end: auto;
}
.v5 .nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 12px;
  border-radius: var(--r-xs);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.v5 .nav__links a:hover { color: var(--ink); background: rgba(29, 28, 29, 0.045); }

.v5 .nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.v5 .nav__signin {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-xs);
}
.v5 .nav__signin:hover { background: rgba(29, 28, 29, 0.045); }

.v5 .nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.v5 .nav__mobile {
  display: none;
  border-top: 1px solid var(--line-2);
  background: var(--cream-2);
}
.v5 .nav__mobile.is-open { display: block; }
.v5 .nav__mobile ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px;
}
.v5 .nav__mobile a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.v5 .nav__mobile .btn { margin-top: 16px; }

/* ==========================================================================
   8. HERO — the page's single focal point
   ========================================================================== */
.v5 .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px);
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(74, 155, 130, 0.14) 0%, rgba(74, 155, 130, 0) 62%),
    var(--cream);
}
.v5 .hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.v5 .hero__copy { min-width: 0; }
.v5 .hero h1 { margin-bottom: 24px; }

/* Rotating result nouns — the headline's second line swaps its object word.
   The words are stacked in one grid cell, so the block keeps the height of the
   tallest (and stays stable when a long word wraps). Without JS or with reduced
   motion only .is-current is visible, which leaves the finished headline. */
.v5 .hero__headline-lead { display: block; }
.v5 .rotator {
  display: grid;
  /* room for descenders inside the clip box, taken back on the outside */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  overflow: hidden;
}
.v5 .rotator__item {
  grid-area: 1 / 1;
  /* without this a long compound would size the cell to min-content and get
     clipped by the overflow instead of wrapping */
  min-width: 0;
  hyphens: auto;
  opacity: 0;
  visibility: hidden;
}
.v5 .rotator__item.is-current { opacity: 1; visibility: visible; }

.v5.js-motion .rotator__item {
  visibility: visible;
  transform: translateY(-110%);
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  will-change: transform, opacity;
}
.v5.js-motion .rotator__item.is-current { opacity: 1; transform: none; }
.v5.js-motion .rotator__item.is-out { opacity: 0; transform: translateY(110%); }
/* used for one frame while a word is reset above the viewport */
.v5.js-motion .rotator__item.is-instant { transition: none; }
.v5 .hero .lede { max-width: 44ch; }
.v5 .hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 32px;
}
.v5 .hero__fine {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.v5 .hero__fine span { display: inline-flex; align-items: center; gap: 6px; }
.v5 .hero__fine .material-symbols-outlined { font-size: 16px; color: var(--action); }

/* ---------- 8b. The proof panel (signature move) ---------- */
.v5 .proof {
  margin: 0;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-focal);
  overflow: hidden;
}
.v5 .proof__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
  background: var(--cream-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--faint);
  text-transform: uppercase;
}
.v5 .proof__head .material-symbols-outlined { font-size: 16px; color: var(--brand-500); }

.v5 .proof__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 48px minmax(0, 1.1fr);
  align-items: stretch;
}
.v5 .proof__col { padding: 24px 20px; min-width: 0; }
.v5 .proof__col--raw { background: var(--cream-2); }

.v5 .proof__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.v5 .proof__label small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--faint);
}

.v5 .proof__quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v5 .proof__quotes li {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.v5 .proof__more {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.v5 .proof__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cream-2);
  border-inline: 1px solid var(--line-2);
  position: relative;
}
.v5 .proof__arrow .material-symbols-outlined {
  font-size: 22px;
  color: var(--white);
  background: var(--action);
  border-radius: 50%;
  padding: 8px;
}
.v5 .proof__arrow span:last-child {
  writing-mode: vertical-rl;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.v5 .cluster { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.v5 .cluster__row {
  display: grid;
  gap: 8px;
}
.v5 .cluster__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v5 .cluster__name {
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.v5 .cluster__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.v5 .cluster__bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(29, 28, 29, 0.08);
  overflow: hidden;
}
.v5 .cluster__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-500);
  width: var(--w, 0%);
  transition: width var(--dur-slow) var(--ease);
}
/* a grid child would be blockified and stretch the pill across the whole
   column — harmless in the narrow hero panel, ugly at a full reading measure */
.v5 .cluster__row .chip { justify-self: start; }
.v5 .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.v5 .chip--pos { background: var(--pos-wash); color: var(--pos); }
.v5 .chip--neg { background: var(--neg-wash); color: var(--neg); }
.v5 .chip--mut { background: rgba(29, 28, 29, 0.07); color: var(--muted); }
.v5 .band--dark .chip--mut { background: rgba(244, 246, 245, 0.14); color: var(--on-dark); }

.v5 .proof__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line-2);
  font-size: 0.75rem;
  color: var(--faint);
}
.v5 .proof__foot .material-symbols-outlined { font-size: 15px; color: var(--action); }

/* (9. old methods band removed — replaced by the science catalogue above) */

/* ==========================================================================
   9b. Science — method catalogue. A set of true peers, so the repetition is
   earned; variation comes from the family label, the stat chips and the
   closing accent cell, not from a rainbow of icon chips.
   ========================================================================== */
.v5 .science__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }
.v5 .science__head .lede { margin-top: 20px; max-width: 68ch; }

.v5 .science {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.v5 .method {
  display: grid;
  align-content: start;
  gap: 8px;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px;
}
.v5 .method__fam {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  min-height: 22px;
}
.v5 .method h3 { font-size: 1.125rem; }
.v5 .method__what { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }

.v5 .chip--accent {
  background: var(--brand-wash);
  color: var(--action);
  letter-spacing: 0.02em;
}

.v5 .method--cta {
  background: var(--action);
  border-color: var(--action);
  color: var(--white);
}
.v5 .method--cta h3 { color: var(--white); }
.v5 .method--cta .method__what { color: #e5f0ec; }   /* 4.66:1 on --action */
.v5 .method--cta .method__fam { color: #e5f0ec; }
.v5 .method--cta .link-arrow { color: var(--white); margin-top: 4px; }
.v5 .method--cta .link-arrow:hover { color: #e5f0ec; }
.v5 .method--cta :focus-visible { outline-color: var(--white); }

/* ==========================================================================
   13b. FAQ — native disclosure, no JS needed
   ========================================================================== */
.v5 .faq__head { max-width: 620px; margin-bottom: clamp(32px, 4vw, 48px); }
.v5 .faq__head .lede { margin-top: 16px; }

.v5 .faq {
  max-width: 880px;
  border-top: 1px solid var(--line);
}
.v5 .faq__item { border-bottom: 1px solid var(--line-2); }
.v5 .faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 16px 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.v5 .faq__item summary::-webkit-details-marker { display: none; }
.v5 .faq__item summary:hover { color: var(--action); }
.v5 .faq__item summary .material-symbols-outlined {
  font-size: 22px;
  color: var(--action);
  transition: transform var(--dur) var(--ease);
}
.v5 .faq__item[open] summary .material-symbols-outlined { transform: rotate(45deg); }
.v5 .faq__body {
  padding: 0 56px 20px 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 72ch;
}

/* ==========================================================================
   10. Mechanism — alternating evidence rows (varied rhythm, no card wall)
   ========================================================================== */
.v5 .mech__head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.v5 .mech__head .lede { margin-top: 20px; max-width: 54ch; }

.v5 .mech__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line-2);
}
.v5 .mech__row:first-of-type { border-top: 0; padding-top: 0; }
.v5 .mech__row--flip .mech__text { order: 2; }

.v5 .mech__text h3 { margin-bottom: 12px; }
.v5 .mech__text p { color: var(--muted); max-width: 46ch; }

/* Quiet evidence tiles — deliberately lighter than the hero panel */
.v5 .evi {
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px;
  min-width: 0;   /* so it can shrink inside a grid track instead of widening it */
}
/* wrap a table that cannot fit a narrow column; scrolls itself, never the page */
.v5 .evi__scroll { overflow-x: auto; }
.v5 .band--white .evi { background: var(--cream-2); }
.v5 .evi__cap {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}

/* evidence: verbatim quotes */
.v5 .evi__quotes { display: grid; gap: 10px; }
.v5 .evi__quote {
  display: grid;
  gap: 4px;
  background: var(--white);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.v5 .evi__quote q {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
.v5 .evi__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--action);
}

/* evidence: segment delta table */
.v5 .evi__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.v5 .evi__table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-2);
}
.v5 .evi__table th:not(:first-child),
.v5 .evi__table td:not(:first-child) { text-align: right; }
.v5 .evi__table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.v5 .evi__table tr:last-child td { border-bottom: 0; padding-bottom: 0; }
/* a trailing column that holds a sentence, not a figure — ragged right, not left */
.v5 .evi__table--note th:last-child,
.v5 .evi__table--note td:last-child { text-align: left; }
.v5 .evi__table td:first-child { color: var(--ink); font-weight: 550; }
.v5 .delta-pos { color: var(--pos); font-weight: 650; }
.v5 .delta-neg { color: var(--neg); font-weight: 650; }

/* ==========================================================================
   10b. For beginners — vertical "goal in, proposal out" artifact.
   Deliberately shares the hero panel's input→output grammar but runs on the
   vertical axis and stays tonal + shadowless, so the hero keeps the focus.
   ========================================================================== */
.v5 .start__head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.v5 .start__head .lede { margin-top: 20px; max-width: 58ch; }

.v5 .creator {
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.v5 .creator__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .creator__head .material-symbols-outlined { font-size: 17px; color: var(--brand-500); }

.v5 .creator__body { padding: 24px; }
.v5 .creator__cap {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
/* the accent rule marks this as the user's own input */
.v5 .creator__goal {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 62ch;
}

.v5 .creator__split {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .creator__split .material-symbols-outlined {
  font-size: 20px;
  color: var(--white);
  background: var(--action);
  border-radius: 50%;
  padding: 8px;
}
.v5 .creator__split::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.v5 .creator__rows { margin: 0; }
.v5 .creator__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
}
.v5 .creator__row:first-child { border-top: 0; padding-top: 0; }
.v5 .creator__row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
}
.v5 .creator__row dd { margin: 0; display: grid; gap: 4px; }
.v5 .creator__row dd b {
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}
.v5 .creator__row dd span { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }

.v5 .creator__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid var(--line-2);
  background: var(--white);
  font-size: 0.8125rem;
  color: var(--faint);
}
.v5 .creator__foot .material-symbols-outlined { font-size: 16px; color: var(--action); }

/* text-only supporting notes — no card containers, so this reads as type, not a grid */
.v5 .start__notes {
  list-style: none;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.v5 .start__notes li { display: grid; gap: 8px; align-content: start; }
.v5 .start__notes h3 { font-size: 1.0625rem; font-weight: 700; }
.v5 .start__notes p { font-size: 0.9375rem; color: var(--muted); max-width: 40ch; }

/* ==========================================================================
   11. Flow (dark band) — the full run of a study, one row per step.
   Five steps do not survive a five-column grid, so the sequence runs down the
   page: the marker column carries the count, the body carries the payoff.
   ========================================================================== */
.v5 .flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.v5 .flow__head h2 { max-width: 16ch; }
.v5 .flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.v5 .flow__step {
  background: var(--dark);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 32px);
}
.v5 .flow__mark { display: grid; align-content: start; gap: 6px; }
.v5 .flow__n {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-soft);
}
.v5 .flow__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
}
.v5 .flow__body { display: grid; align-content: start; gap: 12px; }
.v5 .flow__body h3 { color: var(--on-dark); }
.v5 .flow__body p { color: var(--on-dark-mut); font-size: 0.9375rem; max-width: 64ch; }
.v5 .flow__out {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--brand-soft);
}
.v5 .flow__out .material-symbols-outlined { font-size: 17px; flex: none; }
.v5 .flow__foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--on-dark-mut);
  max-width: 76ch;
}
.v5 .flow__foot .material-symbols-outlined { font-size: 19px; color: var(--brand-soft); margin-top: 1px; }
.v5 .flow__foot a { color: var(--brand-soft); font-weight: 600; text-underline-offset: 2px; }

/* ==========================================================================
   11b. Basics — the plain-language WAS / WIE / WARUM panel. First thing after
   the hero, so it carries no jargon and no product nouns the reader has not
   met yet. Hairline-joined cells, same grammar as the trust list.
   ========================================================================== */
.v5 .basics__head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 48px); }
.v5 .basics__head .lede { margin-top: 20px; max-width: 68ch; }

.v5 .basics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.v5 .basic {
  background: var(--white);
  padding: clamp(24px, 3vw, 32px);
  display: grid;
  align-content: start;
  gap: 12px;
}
.v5 .basic__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action);
}
.v5 .basic h3 { font-size: 1.125rem; }
.v5 .basic p { font-size: 0.9375rem; color: var(--muted); line-height: 1.6; }

/* the questions strip — proof that the abstract promise has concrete uses */
.v5 .qs {
  margin-top: clamp(32px, 4vw, 44px);
  background: var(--brand-wash);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
}
.v5 .qs__lead {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 16px;
}
.v5 .qs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v5 .qs__list li {
  background: var(--white);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.v5 .qs__not {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-200);
}
/* the rule spans the panel; only the sentence is held to a reading measure */
.v5 .qs__not > span:last-child { max-width: 82ch; }
.v5 .qs__not .material-symbols-outlined { font-size: 18px; color: var(--action); flex: none; margin-top: 1px; }

/* ==========================================================================
   11c. Case examples — one tile per industry. The grid runs on sixths so a
   tile spans two columns (three per row); a trailing pair that would leave an
   orphan cell gets .fcase--wide and spans three instead. Set that modifier in
   the markup, not by nth-child — the tile count changes as cases are added.
   ========================================================================== */
.v5 .fcases__head { max-width: 700px; margin-bottom: clamp(36px, 4vw, 48px); }
.v5 .fcases__head .lede { margin-top: 20px; max-width: 68ch; }

.v5 .fcases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.v5 .fcase {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 24px 22px;
}
.v5 .fcase--wide { grid-column: span 3; }

.v5 .fcase__branch {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .fcase__q { font-size: 1.0625rem; line-height: 1.35; }
.v5 .fcase__sit { font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
.v5 .fcase__res {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}
.v5 .fcase__res .material-symbols-outlined { font-size: 18px; color: var(--action); flex: none; margin-top: 1px; }
.v5 .fcase__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 4px;
}
.v5 .fcase__n { font-size: 0.75rem; color: var(--faint); }
.v5 .fcase .link-arrow { align-self: start; }

/* secondary shelf — same cases, told in one line each. Borderless-on-cream so
   the eye reads them as breadth, not as eight more things to study. */
.v5 .fcases__more {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: clamp(28px, 3.5vw, 36px);
  border-top: 1px solid var(--line);
}
.v5 .fcases__more-lead {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .fcases__more-sub { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); max-width: 68ch; }

.v5 .fslim {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}
.v5 .fslim li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 18px 20px;
}
.v5 .fslim__branch {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .fslim__q {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}
.v5 .fslim__res { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.v5 .fslim .cases__type { align-self: flex-start; margin-top: auto; }

.v5 .fcases__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 84ch;
}
.v5 .fcases__note .material-symbols-outlined { font-size: 19px; color: var(--action); flex: none; margin-top: 1px; }
.v5 .fcases__note a { color: var(--action); font-weight: 600; text-underline-offset: 2px; }

/* ==========================================================================
   12. Use cases — reference list, not a card grid
   ========================================================================== */
.v5 .cases__head { margin-bottom: 40px; max-width: 620px; }
.v5 .cases {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.v5 .cases li {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) 190px;
  gap: 6px 32px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.v5 .cases__job {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.v5 .cases__q { font-size: 0.9375rem; color: var(--muted); }
.v5 .cases__type {
  justify-self: end;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--action);
  background: var(--brand-wash);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* ==========================================================================
   13. Pricing
   ========================================================================== */
.v5 .price__head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 40px;
}
.v5 .price__head .lede { text-align: center; }

.v5 .toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(29, 28, 29, 0.05);
  border-radius: 999px;
}
.v5 .toggle button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.v5 .toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.v5 .toggle .save {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--action);
  margin-inline-start: 6px;
}

.v5 .tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.v5 .tier {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 24px 20px;
}
.v5 .tier--featured {
  border-color: var(--action);
  position: relative;
}
.v5 .tier__flag {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--action);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.v5 .tier__name {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.v5 .tier__for {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--faint);
  margin-top: 4px;
  min-height: 2.9em;   /* two lines, so headers align across tiers */
}
.v5 .tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.v5 .tier__price small {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0;
}
.v5 .tier__billing { font-size: 0.75rem; color: var(--faint); margin-top: 8px; min-height: 18px; }
.v5 .tier__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--muted);
}
.v5 .tier__feats li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.v5 .tier__feats .material-symbols-outlined { font-size: 17px; color: var(--action); margin-top: 1px; }
.v5 .tier__feats .tier__feat--star .material-symbols-outlined { color: var(--brand-500); }
.v5 .tier__feats .tier__feat--star span:last-child { color: var(--ink); }
.v5 .tier__from { margin-inline-end: 2px; }
.v5 .tier__sep { border: 0; border-top: 1px solid var(--line-2); margin: 0; }
.v5 .price__foot { text-align: center; margin-top: 24px; }

/* ---- 13c. Five-plan grid + detailed comparison ---- */
/* The pricing band is the one place that earns a wider container: five peer
   plans below ~240px each stop being readable. */
.v5 .wrap--wide { max-width: 1320px; }
.v5 .tiers--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1240px) {
  .v5 .tiers--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
.v5 .tiers--5 .tier { padding: 20px 16px; gap: 16px; }
.v5 .tiers--5 .tier__price { font-size: 2rem; }
.v5 .tiers--5 .tier__feats { font-size: 0.8125rem; gap: 9px; }
.v5 .tier__ask {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.v5 .cmp { margin-top: 32px; }
.v5 .cmp > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.v5 .cmp > summary::-webkit-details-marker { display: none; }
.v5 .cmp > summary:hover { border-color: rgba(29, 28, 29, 0.28); background: var(--cream-2); }
.v5 .cmp > summary .material-symbols-outlined {
  font-size: 20px;
  color: var(--action);
  transition: transform var(--dur) var(--ease);
}
.v5 .cmp[open] > summary .material-symbols-outlined { transform: rotate(180deg); }

.v5 .cmp__scroll {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.v5 .cmp__table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.v5 .cmp__table th,
.v5 .cmp__table td { padding: 12px 16px; text-align: left; }
.v5 .cmp__table thead th {
  background: var(--cream-2);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.v5 .cmp__table tbody th {
  font-weight: 550;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.v5 .cmp__table tbody td {
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v5 .cmp__group th {
  background: var(--brand-wash);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action);
  border-bottom: 1px solid var(--line-2);
}
/* the label column stays put while the plan columns scroll sideways */
.v5 .cmp__table thead th:first-child,
.v5 .cmp__table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--line-2);
}
.v5 .cmp__table thead th:first-child { background: var(--cream-2); }
.v5 .cmp__table tbody th[scope="row"] { background: var(--white); }

.v5 .cmp__yes { color: var(--action); font-weight: 700; }
.v5 .cmp__no { color: var(--faint); }

/* ==========================================================================
   13c-2. For professionals — a spec sheet, not a card grid. Researchers and
   agencies read this to find the limits, so it borrows the creator artifact's
   key/value rhythm and keeps the claims verifiable rather than adjectival.
   ========================================================================== */
.v5 .pro__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 44px); }
.v5 .pro__head .lede { margin-top: 20px; max-width: 66ch; }

.v5 .pro { margin: 0; border-top: 1px solid var(--line); }
.v5 .pro__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px clamp(24px, 4vw, 56px);
  padding: 24px 0;
  border-bottom: 1px solid var(--line-2);
}
.v5 .pro__row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
  padding-top: 5px;
}
.v5 .pro__row dd { margin: 0; display: grid; gap: 8px; }
.v5 .pro__row dd b {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
}
.v5 .pro__row dd span { font-size: 0.9375rem; line-height: 1.6; color: var(--muted); max-width: 68ch; }
.v5 .pro__row dd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--ink);
}
.v5 .pro__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 76ch;
}
.v5 .pro__note .material-symbols-outlined { font-size: 20px; color: var(--action); flex: none; margin-top: 1px; }
.v5 .pro__note a { color: var(--action); font-weight: 600; text-underline-offset: 2px; }

/* ==========================================================================
   13d. Integrations — three peer capabilities, tiered by plan
   ========================================================================== */
.v5 .intg__head { max-width: 700px; margin-bottom: clamp(40px, 5vw, 56px); }
.v5 .intg__head .lede { margin-top: 20px; max-width: 64ch; }

.v5 .intg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.v5 .intg__item {
  display: grid;
  align-content: start;
  gap: 10px;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 24px 20px;
}
.v5 .intg__tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action);
}
.v5 .intg__item h3 { font-size: 1.125rem; }
.v5 .intg__item p { font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
.v5 .intg__item code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  color: var(--ink);
}
.v5 .intg__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 72ch;
}
.v5 .intg__note .material-symbols-outlined { font-size: 20px; color: var(--action); margin-top: 1px; }
.v5 .intg__note a { color: var(--action); font-weight: 600; text-underline-offset: 2px; }

/* ==========================================================================
   14. Trust (dark band)
   ========================================================================== */
.v5 .trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.v5 .trust__head h2 { max-width: 14ch; }
.v5 .trust__head .lede { margin-top: 20px; }
.v5 .trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.v5 .trust__list li {
  background: var(--dark);
  padding: 20px;
  display: grid;
  gap: 6px;
}
.v5 .trust__list dt,
.v5 .trust__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--on-dark);
}
.v5 .trust__list .material-symbols-outlined { font-size: 18px; color: var(--brand-soft); }
.v5 .trust__v { font-size: 0.875rem; color: var(--on-dark-mut); line-height: 1.5; }

/* ==========================================================================
   15. Closing CTA
   ========================================================================== */
.v5 .close {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
}
.v5 .close h2 { max-width: 18ch; }
.v5 .close .lede { text-align: center; max-width: 48ch; }
.v5 .close__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   16. Footer
   ========================================================================== */
.v5 .foot {
  background: var(--dark-900);
  color: var(--on-dark);
  padding-block: clamp(48px, 6vw, 72px) 32px;
}
.v5 .foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.v5 .foot__brand a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 16px;
}
.v5 .foot__brand p { font-size: 0.875rem; color: var(--on-dark-mut); max-width: 34ch; }
.v5 .foot h3 {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
  margin-bottom: 16px;
}
.v5 .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v5 .foot ul a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 0.875rem;
  color: var(--on-dark);
  text-decoration: none;
}
.v5 .foot ul a:hover { color: var(--brand-soft); }
.v5 .foot__soon { color: var(--on-dark-mut); font-size: 0.875rem; min-height: 32px; display: inline-flex; align-items: center; }
.v5 .foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  font-size: 0.8125rem;
  color: var(--on-dark-mut);
}
.v5 .foot__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 2px;
  color: var(--on-dark-mut);
  text-decoration: none;
}
.v5 .foot__bottom a:hover { color: var(--on-dark); }

/* ==========================================================================
   16b. Legal pages (Impressum / Datenschutz)
   Bounded reading measure, hairline section rules, no cards — long-form text
   is typography, not UI.
   ========================================================================== */
.v5 .legal { padding-block: clamp(48px, 6vw, 80px) clamp(72px, 9vw, 112px); }
.v5 .legal__inner { max-width: 840px; margin-inline: auto; }

.v5 .legal__crumb {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 32px;
  font-size: 0.875rem;
  color: var(--faint);
}
.v5 .legal__crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--action);
  text-decoration: none;
  font-weight: 600;
}
.v5 .legal__crumb a:hover { color: var(--action-hover); text-decoration: underline; }
.v5 .legal__crumb .material-symbols-outlined { font-size: 18px; }

.v5 .legal h1 { margin-bottom: 40px; }

.v5 .legal__content { max-width: 68ch; }
.v5 .legal__content h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.v5 .legal__content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.v5 .legal__content h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 32px 0 12px;
}
.v5 .legal__content p,
.v5 .legal__content li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
.v5 .legal__content p { margin-bottom: 16px; }
.v5 .legal__content p:last-child { margin-bottom: 0; }
.v5 .legal__content ul,
.v5 .legal__content ol { margin: 0 0 16px; padding-left: 24px; }
.v5 .legal__content li { margin-bottom: 8px; }
.v5 .legal__content strong { color: var(--ink); font-weight: 650; }
.v5 .legal__content a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.v5 .legal__content a:hover { color: var(--action-hover); }

.v5 .foot__addr { margin-top: 12px; font-size: 0.8125rem; color: var(--on-dark-mut); }

/* ==========================================================================
   16c. Case-study pages — a study told in the order it happened. Reuses the
   landing page's evidence vocabulary (.evi, .cluster, .creator) so a reader
   arriving here recognises the artifacts from the home page.
   ========================================================================== */
.v5 .story {
  padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px);
  background:
    radial-gradient(120% 90% at 82% 4%, rgba(74, 155, 130, 0.14) 0%, rgba(74, 155, 130, 0) 62%),
    var(--cream);
}
.v5 .story__inner { max-width: 900px; margin-inline: auto; }
.v5 .story h1 { margin: 10px 0 20px; }
.v5 .story__lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
}
.v5 .story__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(28px, 3.5vw, 36px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.v5 .story__facts > div { background: var(--white); padding: 16px 18px; display: grid; gap: 4px; }
.v5 .story__facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.v5 .story__facts dd { margin: 0; font-size: 0.9375rem; font-weight: 650; color: var(--ink); line-height: 1.4; }

.v5 .story__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 84ch;
}
.v5 .story__note .material-symbols-outlined { font-size: 18px; color: var(--action); flex: none; margin-top: 1px; }

/* shared section head for the study's chapters */
.v5 .sect__head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.v5 .sect__head .lede { margin-top: 16px; max-width: 64ch; }

/* long-form body copy inside a chapter */
.v5 .prose { max-width: 68ch; display: grid; gap: 16px; }
.v5 .prose p { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.v5 .prose strong { color: var(--ink); font-weight: 650; }
.v5 .prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.v5 .prose li { font-size: 1rem; line-height: 1.65; color: var(--muted); }
.v5 .band--dark .prose p,
.v5 .band--dark .prose li { color: var(--on-dark-mut); }
.v5 .band--dark .prose strong { color: var(--on-dark); }

/* the evidence tile is cream by default — lift it off the warm bands */
.v5 .band--cream .evi,
.v5 .band--cream2 .evi { background: var(--white); }
.v5 .band--cream .evi__quote,
.v5 .band--cream2 .evi__quote { background: var(--cream-2); }

.v5 .grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: clamp(24px, 3vw, 32px);
}

/* the return numbers of a study */
.v5 .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(24px, 3vw, 32px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.v5 .stat { background: var(--white); padding: 20px; display: grid; gap: 4px; align-content: start; }
.v5 .stat__n {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.v5 .stat__k { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }

/* JTBD Story — the extracted "Wenn … will ich … damit …" statement. The whole
   method pays out in this one sentence, so it gets its own weight. */
.v5 .jobstory {
  display: grid;
  gap: 10px;
  background: var(--cream-2);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 66ch;
}
.v5 .jobstory b { color: var(--action); font-weight: 700; }
.v5 .jobstory__src {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}

/* JTBD Needs — functional, emotional and social needs stacked, because the
   point of the method is that the lower two levels outrank the first. */
.v5 .needs { display: grid; }
.v5 .needs__lvl { padding-block: 22px; border-top: 1px solid var(--line-2); }
.v5 .needs__lvl:first-child { border-top: 0; padding-top: 0; }
.v5 .needs__lvl:last-child { padding-bottom: 0; }
.v5 .needs__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--action);
  margin-bottom: 14px;
}
/* two channels: bar length is importance, bar colour is today's fulfilment.
   Without the colour a long green bar next to "nicht erfüllt" reads backwards. */
.v5 .needs .cluster__row--gap .cluster__fill  { background: var(--neg); }
.v5 .needs .cluster__row--part .cluster__fill { background: var(--brand-200); }

/* the ranked decision list (dark band) */
.v5 .decide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.v5 .decide__row {
  background: var(--dark);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 22px 24px;
}
.v5 .decide__rank {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-soft);
  font-variant-numeric: tabular-nums;
}
.v5 .decide__body { display: grid; gap: 8px; align-content: start; }
.v5 .decide__lbl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v5 .decide__score { font-size: 0.75rem; font-weight: 650; color: var(--on-dark-mut); font-variant-numeric: tabular-nums; }
.v5 .decide__body h3 { color: var(--on-dark); font-size: 1.0625rem; }
.v5 .decide__body p { color: var(--on-dark-mut); font-size: 0.9375rem; line-height: 1.6; max-width: 70ch; }

/* ==========================================================================
   17. Motion — sectional reveal only. Content is visible by default;
   JS adds .js-motion to opt in, so no-JS and reduced-motion get the full page.
   ========================================================================== */
.v5.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.v5.js-motion .reveal.is-in { opacity: 1; transform: none; }
.v5.js-motion .reveal-d1 { transition-delay: 70ms; }
.v5.js-motion .reveal-d2 { transition-delay: 140ms; }
.v5.js-motion .reveal-d3 { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .v5 *,
  .v5 *::before,
  .v5 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .v5.js-motion .reveal { opacity: 1; transform: none; }
  /* if the preference flips after load, the headline word just stops moving */
  .v5.js-motion .rotator__item { transform: none; opacity: 0; visibility: hidden; }
  .v5.js-motion .rotator__item.is-current { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .v5 .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .v5 .hero__copy { max-width: 100%; }
  .v5 .hero .lede { max-width: 56ch; }
  .v5 .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
  .v5 .tiers--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .v5 .science { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .intg { grid-template-columns: 1fr; }
  .v5 .trust__grid { grid-template-columns: 1fr; }
  .v5 .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .v5 .fcases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .fcase,
  .v5 .fcase--wide { grid-column: span 1; }
  .v5 .fslim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .story__facts,
  .v5 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .v5 .nav__links { display: none; }
  .v5 .nav__signin { display: none; }
  .v5 .nav__burger { display: inline-flex; }
  .v5 .nav__inner { justify-content: space-between; gap: 12px; }
  .v5 .nav__brand { margin-inline-end: auto; }
  .v5 .basics { grid-template-columns: 1fr; }
  .v5 .pro__row { grid-template-columns: 1fr; gap: 6px; }
  .v5 .pro__row dt { padding-top: 0; }
  .v5 .flow__step { grid-template-columns: 1fr; gap: 10px; }
  .v5 .flow__mark {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 12px;
  }
  .v5 .flow__n { font-size: 1.5rem; }
  /* plain 1fr is minmax(auto, 1fr) — a wide table's min-content would blow the
     track past the viewport, so the floor has to be pinned to 0 */
  .v5 .grid2 { grid-template-columns: minmax(0, 1fr); }
  .v5 .mech__row { grid-template-columns: 1fr; gap: 28px; }
  .v5 .mech__row--flip .mech__text { order: 0; }
  .v5 .faq__body { padding-right: 32px; }
  .v5 .cases li { grid-template-columns: 1fr auto; }
  .v5 .cases__q { grid-column: 1 / -1; }
  .v5 .start__notes { grid-template-columns: 1fr; gap: 24px; }
  .v5 .start__notes p { max-width: 62ch; }
}

@media (max-width: 720px) {
  .v5 .proof__body { grid-template-columns: 1fr; }
  .v5 .proof__arrow {
    flex-direction: row;
    border-inline: 0;
    border-block: 1px solid var(--line-2);
    padding: 10px 0;
    gap: 10px;
  }
  .v5 .proof__arrow .material-symbols-outlined { transform: rotate(90deg); }
  .v5 .proof__arrow span:last-child { writing-mode: horizontal-tb; }
    .v5 .creator__body { padding: 20px; }
  .v5 .creator__head, .v5 .creator__foot { padding-inline: 20px; }
  .v5 .creator__row { grid-template-columns: 1fr; gap: 4px; }
  .v5 .creator__goal { font-size: 1rem; }
  .v5 .trust__list { grid-template-columns: 1fr; }
  .v5 .foot__grid { grid-template-columns: 1fr; }
  .v5 .hero__cta .btn { width: 100%; }
  .v5 .fcases,
  .v5 .fslim { grid-template-columns: 1fr; }
  .v5 .story__facts,
  .v5 .stats { grid-template-columns: 1fr; }
  .v5 .decide__row { grid-template-columns: 1fr; gap: 4px; padding: 20px; }
  .v5 .qs__list li { width: 100%; }
}

@media (max-width: 560px) {
  .v5 .tiers, .v5 .tiers--5 { grid-template-columns: 1fr; }
  .v5 .science { grid-template-columns: 1fr; }
  .v5 .wrap { padding-inline: 20px; }
}