@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
/* Version 5: One Customer. Loaded after styles.css on every page.
   Quiet and almost monochrome: off-white on charcoal, one warm accent (--accent) used only where a promise is kept:
   the customer record, the newest entry, the badge, focus.
   Its own components: reading passages that light up word by word, a typographic index of organizations,
   a stories player, a huge sticky stage number, numbered lists with a growing line, rows of large type,
   one quiet field, large-type questions, and an ending that rolls like credits. */

:root {
  --ground: #151514; --ground-alt: #1a1a18; --panel: #181816; --raised: #201f1d;
  --ink: #f1eee7; --muted: #a8a399; --faint: #78746c;
  --line: rgba(241, 238, 231, 0.08); --line-strong: rgba(241, 238, 231, 0.18);
  --primary: #f1eee7; --primary-hover: #ffffff; --primary-ink: #151514;
  --hl: #e6e1d6; --turquoise: #84b5d2; --accent: #5896bd; --accent-soft: rgba(88, 150, 189, 0.16);
  --tag-blue-bg: rgba(241, 238, 231, 0.07); --tag-blue: #ddd8cd;
  --tag-yellow-bg: rgba(241, 238, 231, 0.07); --tag-yellow: #ddd8cd;
  --tag-green-bg: rgba(241, 238, 231, 0.07); --tag-green: #ddd8cd;
  --tag-pink-bg: rgba(241, 238, 231, 0.07); --tag-pink: #ddd8cd;
  --warn: #bdb5a5; --warn-bg: rgba(241, 238, 231, 0.035); --warn-line: rgba(241, 238, 231, 0.22);
  --rec-w: 256px;
  /* Full width (Sam, October 23): a wide frame with generous side margins that grow with the screen; text keeps a readable line length */
  --container: 105rem;
  --gutter: clamp(32px, 4vw, 80px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}
/* One theme everywhere: the "light" sections become a slightly warmer charcoal band. */
.section-light {
  --ground: #1b1a18; --ground-alt: #201f1c; --panel: #1b1a18; --raised: #23221f;
  --ink: #f1eee7; --muted: #a8a399; --faint: #78746c;
  --line: rgba(241, 238, 231, 0.08); --line-strong: rgba(241, 238, 231, 0.18);
  --hl: #e6e1d6; --primary: #f1eee7; --primary-hover: #ffffff; --primary-ink: #151514;
  --tag-blue-bg: rgba(241, 238, 231, 0.07); --tag-blue: #ddd8cd;
  --warn: #bdb5a5; --warn-bg: rgba(241, 238, 231, 0.035); --warn-line: rgba(241, 238, 231, 0.22);
  background: var(--ground); color-scheme: dark;
}

html, body { background: var(--ground); }
html { overflow-x: clip; }
body { font-family: Geist, "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-size: 15.5px; line-height: 1.65; overflow-x: clip; }
a { color: var(--ink); }

/* Type: lighter weights, tighter tracking; highlighted words are turquoise, as on the main site (Sam, October 23) */
h1, h2, h3 { letter-spacing: -0.03em; }
h1 { font-weight: 500; }
h2 { font-weight: 500; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.035em; }
h3 { font-weight: 600; }
.hl, h1 .hl, h2 .hl { color: var(--turquoise); }
.kicker { box-shadow: none !important; padding: 0; border-radius: 0; background: none !important; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); display: inline-block; }
.kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 0.12em; border-radius: 50%; background: var(--accent); }
.agreement-line { display: block; text-align: center; }
.agreement-line::before { display: inline-block; margin-right: 8px; vertical-align: 0.12em; background: var(--accent); }
.lead { color: var(--muted); }
.label, .path .path-who, .start-cta .path-who, .feat-group, .story-ai small { color: var(--muted); }
.transformation { color: var(--ink); }
.muted { color: var(--muted); }

/* Space */
/* Tighter space between sections (Sam, October 25): about 176px between sections on wide screens, about 88px on phones. */
section { padding-block: 88px; }
@media (max-width: 640px) { section { padding-block: 44px; } }
.band { background: var(--ground-alt); border-top: 0; }
.section-head { margin: 0 0 56px; text-align: left; max-width: 52rem; }
.section-head .lead { margin-inline: 0; }
.section-head h2 { margin-inline: 0; }

/* Header */
.site-header { background: rgba(21, 21, 20, 0.72); border-bottom-color: var(--line); }
.nav a { color: var(--muted); position: relative; }
.nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1280px) { .nav a::after { display: none; } }

/* Buttons: off-white primary, hairline secondary; they lift a little */
.btn { border-radius: 999px; padding: 7px 14px; transition: background 0.2s, transform 0.25s var(--ease), box-shadow 0.25s; }
.btn-lg { padding: 11px 20px; font-size: 15.5px; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(241, 238, 231, 0.45); }
.btn-secondary { background: transparent; }
.btn-secondary:hover { background: rgba(241, 238, 231, 0.06); transform: translateY(-1px); }
.btn-lg.btn-primary::after { transition: transform 0.25s var(--ease); }
.btn-lg.btn-primary:hover::after { transform: translateX(3px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Links: an underline that draws itself */
main a:not(.btn), .site-footer a:not(.btn) { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--ease), color 0.2s; }
main a:not(.btn):hover, .site-footer a:not(.btn):hover { background-size: 100% 1px; color: var(--ink); }
.other-path a, .path-list a, .checklist-pdf, .footer-link, .text-link { color: var(--ink); background-size: 100% 1px !important; background-image: linear-gradient(var(--line-strong), var(--line-strong)) !important; }
.other-path a:hover, .path-list a:hover, .checklist-pdf:hover, .footer-link:hover, .text-link:hover { background-image: linear-gradient(var(--accent), var(--accent)) !important; }

/* Tags, notes, promise */
.tag { background: none !important; padding: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) !important; }
.note { border-radius: 8px; }
.promise { border: 0; border-left: 1px solid var(--accent); border-radius: 0; background: none; padding: 4px 0 4px 28px; }
.promise p { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); line-height: 1.5; }
.badge { background: var(--accent); color: #1a1209; }
.chk { background: var(--ink); box-shadow: none; }
.chk svg { stroke: var(--primary-ink); }
/* Bright marks (Sam, October 25) */
.mark.yes { color: #22c55e; } .mark.partly { color: #f5a524; } .mark.no { color: #ef4444; }
.live::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.try-spin { border-top-color: var(--accent); }

/* ---------- Homepage hero: full screen, one line, one call to action ---------- */
.hero-one { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--header)); min-height: calc(100svh - var(--header)); display: grid; place-items: center; padding-block: 72px 96px; }
.hero-one .hero-center { position: relative; }
.hero-one h1 { font-size: clamp(40px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.045em; max-width: 13.5em; margin: 0 auto 36px; }
.hero-one .kicker { margin-bottom: 26px; color: var(--hl); }
.hero-one .hero-actions { margin-bottom: 26px; }
.hero-one .agreement-line { color: var(--muted); }
/* The one decorative effect: slow drifting morning light. It is also the still poster when motion is off. */
.hero-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 115%, #2a2620 0%, rgba(42, 38, 32, 0) 60%), linear-gradient(180deg, #121211 0%, #161514 100%); }
.hero-ambient .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; z-index: 0; }
/* Video shade: dark enough everywhere that the headline passes the five-second test over a busy frame. */
.hero-ambient .glow, .hero-ambient .beam { z-index: 1; }
.hero-ambient::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 18, 17, 0.55) 0%, rgba(18, 18, 17, 0.62) 50%, rgba(21, 21, 20, 0.92) 100%), radial-gradient(60% 50% at 50% 50%, rgba(18, 18, 17, 0.45) 0%, rgba(18, 18, 17, 0) 100%); }
.hero-ambient::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(90% 70% at 50% 45%, rgba(21, 21, 20, 0) 40%, rgba(21, 21, 20, 0.7) 100%); }
.hero-ambient .glow { position: absolute; border-radius: 50%; will-change: transform; }
.hero-ambient .g1 { width: 70vmax; height: 70vmax; left: -22vmax; top: -34vmax; background: radial-gradient(circle, rgba(245, 232, 210, 0.13) 0%, rgba(245, 232, 210, 0) 62%); animation: v5-drift-a 42s ease-in-out infinite alternate; }
.hero-ambient .g2 { width: 60vmax; height: 60vmax; right: -24vmax; bottom: -34vmax; background: radial-gradient(circle, rgba(88, 150, 189, 0.11) 0%, rgba(88, 150, 189, 0) 60%); animation: v5-drift-b 54s ease-in-out infinite alternate; }
.hero-ambient .g3 { width: 36vmax; height: 36vmax; left: 46%; top: 8%; background: radial-gradient(circle, rgba(241, 238, 231, 0.05) 0%, rgba(241, 238, 231, 0) 65%); animation: v5-drift-c 64s ease-in-out infinite alternate; }
.hero-ambient .beam { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 220%; background: linear-gradient(104deg, rgba(255, 246, 228, 0) 34%, rgba(255, 246, 228, 0.045) 42%, rgba(255, 246, 228, 0) 47%, rgba(255, 246, 228, 0) 53%, rgba(255, 246, 228, 0.03) 58%, rgba(255, 246, 228, 0) 64%); animation: v5-beam 70s ease-in-out infinite alternate; will-change: transform; }
/* Pause the light while the hero is off screen. */
.hero-one.still .glow, .hero-one.still .beam { animation-play-state: paused; }
@keyframes v5-drift-a { to { transform: translate(14vmax, 10vmax) scale(1.08); } }
@keyframes v5-drift-b { to { transform: translate(-12vmax, -8vmax) scale(1.12); } }
@keyframes v5-drift-c { to { transform: translate(-18vmax, 12vmax); } }
@keyframes v5-beam { to { transform: translateX(16%); } }
/* Over the video, the second half of the headline needs a little more light to read. */
.hero-one h1 .hl { color: var(--turquoise); }

/* ---------- Other pages: a title card. Big type, and the record's hairline drawn under it with its warm dot ---------- */
.hero:not(.hero-one) { position: relative; background: radial-gradient(70% 70% at 15% 0%, rgba(245, 232, 210, 0.06) 0%, rgba(245, 232, 210, 0) 70%), radial-gradient(50% 60% at 90% 0%, rgba(88, 150, 189, 0.04) 0%, rgba(88, 150, 189, 0) 70%); padding-block: 132px 104px; text-align: left; }
.hero:not(.hero-one) > .container:first-child { position: relative; }
.hero:not(.hero-one) h1 { font-size: clamp(36px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.042em; max-width: 15em; margin-bottom: 28px; }
.hero:not(.hero-one) .lead { font-size: clamp(16.5px, 1.5vw, 19px); max-width: 44rem; }
.hero:not(.hero-one) .agreement-line { text-align: left; }
.hero:not(.hero-one)::after { content: ""; position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0, var(--line-strong) 120px, var(--line) 70%); transform-origin: left; animation: v5-rule 0.5s var(--ease) both; }
.hero:not(.hero-one)::before { content: ""; position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); z-index: 1; }
@keyframes v5-rule { from { transform: scaleX(0); } }
@media (max-width: 640px) {
  .hero:not(.hero-one) { padding-block: 72px 56px; }
  .hero:not(.hero-one)::after { left: 16px; right: 16px; }
  .hero:not(.hero-one)::before { left: 16px; }
}
.hero.left .grid-2 { align-items: start; }
/* Title cards sit on the left edge of the page grid, with the rule. */
.hero:not(.hero-one) > .container { margin-left: max(0px, calc((100% - var(--container)) / 2)); }
.hero:not(.hero-one) .center { text-align: left; }
.hero:not(.hero-one) .lead, .hero:not(.hero-one) h1 { margin-inline: 0; }
.hero:not(.hero-one) .hero-actions { justify-content: flex-start; }
.hero:not(.hero-one) .note { margin-inline: 0 !important; }

/* ---------- Value line and the fork: two paths, one row each ---------- */
.hero-more { padding-block: 120px 56px; }
.hero-more .lead { max-width: 52rem; margin: 0 0 72px; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.32; letter-spacing: -0.02em; color: var(--ink); }
.v5-fork { border-top: 1px solid var(--line); }
.fork-row { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); transition: background 0.45s ease; }
.fork-row .path-who { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); transition: color 0.3s; }
.fork-main h3 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.03em; transition: transform 0.55s var(--ease); }
.fork-main p { margin: 0; color: var(--muted); max-width: 36rem; }
.fork-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.fork-row:hover { background: linear-gradient(90deg, rgba(241, 238, 231, 0.035), rgba(241, 238, 231, 0) 75%); }
.fork-row:hover::after { transform: scaleX(1); }
.fork-row:hover h3 { transform: translateX(10px); }
.fork-row:hover .path-who { color: var(--accent); }
@media (max-width: 760px) { .fork-row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; } .fork-row .btn { justify-self: start; margin-top: 8px; } }

/* ---------- Reading passages: one sentence to a line; each word lights up as it scrolls past ---------- */
.v5-stakes .section-head { margin-bottom: 64px; }
.v5-read { max-width: 58rem; margin: 0 0 96px; }
.v5-read .lead, .v5-read .punch { max-width: none; margin: 0 0 1.2em; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.32; letter-spacing: -0.02em; font-weight: 450; color: var(--ink); text-align: left; }
.v5-read .sen { display: block; margin-bottom: 0.5em; }
.v5-read .punch { padding: 0; border: 0; background: none; }
.v5-read .punch .hl { color: var(--turquoise); }
html.js-motion .lighting .lw { opacity: clamp(0.16, calc((var(--p, 0) - var(--i)) / 3), 1); transition: opacity 0.25s linear; }

/* Problem blocks on the audience pages: the headline, a lit passage, and a quiet aside with a warm rule */
.v5-stakes-a { display: block !important; }
.v5-stakes-a h2 { max-width: 20em; }
.v5-stakes-a .lead[data-light] { margin: 28px 0 56px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.38; letter-spacing: -0.015em; color: var(--ink); max-width: 46rem; }
.v5-aside { background: none !important; border: 0 !important; border-left: 1px solid var(--accent) !important; border-radius: 0 !important; padding: 4px 0 4px 32px !important; max-width: 44rem; margin-left: min(30%, 22rem); box-shadow: none !important; }
.v5-aside p { font-size: 16px; line-height: 1.6; }
.v5-aside:hover { transform: none !important; }
.v5-aside h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Numbered rows of large type: tenets, and the card grids on other pages ---------- */
.v5-tenets, .v5-rows { list-style: none; margin: 0; padding: 0; counter-reset: tn; border-top: 1px solid var(--line); }
.v5-rows { display: block !important; }
.v5-tenets > li, .v5-rows > .card { counter-increment: tn; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 32px; align-items: baseline; padding: 30px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transition: background 0.45s ease; }
.v5-tenets > li::before, .v5-rows > .card::before { content: counter(tn, decimal-leading-zero); grid-column: 1; grid-row: 1; font-size: 12.5px; letter-spacing: 0.1em; color: var(--faint); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.v5-tenets > li::after, .v5-rows > .card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.v5-tenets > li:hover, .v5-rows > .card:hover { background: linear-gradient(90deg, rgba(241, 238, 231, 0.03), rgba(241, 238, 231, 0) 80%); transform: none; box-shadow: none; }
.v5-tenets > li:hover::after, .v5-rows > .card:hover::after { transform: scaleX(1); }
.v5-tenets > li:hover::before, .v5-rows > .card:hover::before { color: var(--accent); }
.tn-head { grid-column: 2; grid-row: 1; }
.tn-head h3, .v5-rows > .card > h3 { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; transition: transform 0.55s var(--ease); }
.v5-tenets > li:hover h3, .v5-rows > .card:hover > h3 { transform: translateX(8px); }
.tn-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.v5-tenets > li > p, .v5-rows > .card > p:not(.kicker) { grid-column: 3; grid-row: 1; margin: 0; color: var(--muted); }
.v5-rows > .card > h3 { grid-column: 2; grid-row: 1; }
.v5-rows > .card > .icon, .v5-rows > .card > .tags { display: none; }
.v5-rows.kicked > .card::before { content: none; }
.v5-rows.kicked > .card > .kicker { grid-column: 1; grid-row: 1; font-size: 11px; margin: 0; }
.v5-rows.kicked > .card > .kicker::before { display: none; }
.v5-rows.kicked > .card { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 760px) {
  .v5-tenets > li, .v5-rows > .card, .v5-rows.kicked > .card { grid-template-columns: 44px minmax(0, 1fr); padding: 24px 0; }
  .v5-tenets > li > p, .v5-rows > .card > p:not(.kicker) { grid-column: 2; grid-row: 2; }
  .v5-rows.kicked > .card > .kicker { grid-column: 1 / -1; }
  .v5-rows.kicked > .card > h3 { grid-row: 2; grid-column: 1 / -1; }
  .v5-rows.kicked > .card > p:not(.kicker) { grid-row: 3; grid-column: 1 / -1; }
}

/* ---------- The typographic index: organizations on the left, a quiet profile on the right ---------- */
.v5-index { max-width: none !important; margin: 0 !important; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.ix-list .picker-label { margin-bottom: 30px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; color: var(--ink); max-width: 30em; }
.ix-list .picker-label::after { content: " ↓"; color: var(--turquoise); }
.ix-group + .ix-group { margin-top: 28px; }
.ix-kind { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.ix-group ul { list-style: none; margin: 0; padding: 0; }
.ix-org { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; padding: 5px 0 7px 28px; cursor: pointer; font-size: clamp(22px, 2.3vw, 33px); font-weight: 500; line-height: 1.15; letter-spacing: -0.035em; color: var(--faint); transition: color 0.35s ease; }
.ix-name { display: inline-block; transition: transform 0.55s var(--ease); }
.ix-name > b { font-weight: inherit; display: inline-flex; align-items: center; gap: 0.35em; }
.ix-name > b svg { order: 2; width: 0.6em; height: 0.6em; stroke-width: 1.5; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s, transform 0.5s var(--ease); }
.ix-org.on .ix-name > b svg, .ix-org:hover .ix-name > b svg { opacity: 0.85; transform: none; }
.ix-org::before { content: ""; position: absolute; left: 2px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.45s var(--ease); }
.ix-org:hover { color: var(--muted); }
.ix-org:hover .ix-name { transform: translateX(8px); }
.ix-org.on { color: var(--ink); }
.ix-org.on::before { transform: scale(1); }
.ix-org:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ix-tick { position: absolute; left: 28px; right: 0; bottom: 1px; height: 1px; background: var(--accent); opacity: 0.55; transform: scaleX(0); transform-origin: left; }
.ix-org.ticking .ix-tick { animation: ix-tick var(--dwell, 4500ms) linear forwards; }
@keyframes ix-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v5-index .autoplay-status { min-height: 1.5em; margin: 26px 0 0; font-size: 12.5px; color: var(--faint); }
.ix-profile { position: sticky; top: calc(var(--header) + 32px); display: grid; }
.pf { grid-area: 1 / 1; min-width: 0; transition: opacity 0.38s ease, transform 0.5s var(--ease); }
.pf > * { transition: opacity 0.45s ease, transform 0.6s var(--ease); }
.pf > :nth-child(2) { transition-delay: 0.05s; } .pf > :nth-child(3) { transition-delay: 0.1s; } .pf > :nth-child(4) { transition-delay: 0.15s; }
.pf.enter > * { opacity: 0; transform: translateY(12px); }
.pf.out { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.pf-row { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.pf-row:first-child { border-top-color: var(--line-strong); }
.pf-label { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--turquoise); }
.pf-base .pf-label { margin-bottom: 12px; }
.pf-value { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.pf-value span { white-space: nowrap; }
.pf-value span:not(:last-child)::after { content: "·"; margin-left: 0.55em; color: var(--faint); }
.pf-base { margin: 8px 0 14px; padding: 20px 22px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: linear-gradient(180deg, rgba(241, 238, 231, 0.035), rgba(241, 238, 231, 0.01)); }
.pf-mark { display: block; height: 18px; width: auto; margin-bottom: 14px; }
.pf-base ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pf-base li { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; line-height: 1.45; }
.pf-base li b { font-weight: 600; }
.pf-base li span { color: var(--muted); }
@media (max-width: 900px) {
  .v5-index { grid-template-columns: 1fr; gap: 36px; }
  .ix-profile { position: relative; top: 0; }
  .ix-org { font-size: 23px; }
}

/* ---------- The stories player: one customer at a time, full width ---------- */
.v5-player { position: relative; max-width: none; margin: 0 auto; }
.pl-bars { display: flex; gap: 6px; margin-bottom: 36px; }
.pl-bars span { flex: 1; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.pl-bars i { display: block; height: 100%; background: var(--muted); transform: scaleX(0); transform-origin: left; }
.pl-bars span.done i { transform: scaleX(1); }
.pl-bars span.on i { transform: scaleX(1); background: var(--accent); }
.v5-player.auto .pl-bars span.on i { animation: pl-fill var(--dwell, 9000ms) linear both; animation-play-state: paused; }
.v5-player.auto.playing .pl-bars span.on i { animation-play-state: running; }
@keyframes pl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pl-stage { position: relative; overflow: hidden; touch-action: pan-y; }
.v5-player .story { display: grid; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; gap: 0; grid-template-columns: minmax(0, 1fr); }
.pl-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 210px minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 4px 0 8px; transition: opacity 0.42s ease, transform 0.6s var(--ease); }
.pl-slide.enter { opacity: 0; transform: translateX(48px); }
.pl-slide.out { opacity: 0; transform: translateX(-48px); pointer-events: none; }
.story[data-dir="prev"] .pl-slide.enter { transform: translateX(-48px); }
.story[data-dir="prev"] .pl-slide.out { transform: translateX(48px); }
.pl-logo { aspect-ratio: 1; display: grid; place-items: center; padding: 30px; border-radius: 22px; background: #f3f0e9; transition: transform 0.6s var(--ease); }
.pl-logo img { max-width: 100%; max-height: 84px; width: auto; height: auto; }
.pl-logo.pl-icon { background: rgba(241, 238, 231, 0.05); border: 1px solid var(--line-strong); color: var(--accent); }
.pl-logo.pl-icon svg { width: 56px; height: 56px; }
.v5-player:hover .pl-logo { transform: scale(1.02) rotate(-1deg); }
.v5-player .story-main h3 { margin: 12px 0 14px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.v5-player .story-main h3 svg.lucide { display: none; }
.v5-player .story-main p { font-size: 17px; line-height: 1.6; }
.v5-player .story-ai { gap: 18px; }
.v5-player .story-ai > div { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.v5-player .story-ai > div:hover { transform: none; box-shadow: none; }
.v5-player .story-ai small { color: var(--faint); font-size: 11px; letter-spacing: 0.14em; }
.v5-player .story-ai p { font-size: 15px; color: var(--ink); }
.v5-player .story-ai .note { font-size: 12.5px; color: var(--warn); margin: 0; }
.pl-foot { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.pl-arrow { all: unset; flex: none; box-sizing: border-box; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.35s var(--ease); }
.pl-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-arrow:hover { background: rgba(241, 238, 231, 0.07); border-color: var(--muted); }
.pl-arrow.prev:hover { transform: translateX(-3px); }
.pl-arrow.next:hover { transform: translateX(3px); }
.pl-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.v5-player .logo-wall { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; max-width: none; margin: 0; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.v5-player .logo-wall::-webkit-scrollbar { display: none; }
.v5-player .logo-wall button { position: relative; flex: 0 0 auto; height: 48px; min-width: 0; padding: 8px 14px; gap: 8px; background: none !important; border: 0; border-radius: 10px; box-shadow: none !important; opacity: 0.6; filter: brightness(0.7); transition: opacity 0.3s, filter 0.3s, transform 0.4s var(--ease); }
.v5-player .logo-wall button img.mono { display: block !important; max-height: 24px; }
.v5-player .logo-wall button img.color { display: none !important; }
.v5-player .logo-wall button span { color: var(--ink) !important; font-size: 13px; }
.v5-player .logo-wall button:hover { opacity: 0.9; filter: none; transform: translateY(-2px); }
.v5-player .logo-wall button[aria-selected="true"] { opacity: 1; filter: none; }
.v5-player .logo-wall button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform 0.45s var(--ease); }
.v5-player .logo-wall button[aria-selected="true"]::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .pl-slide { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pl-logo { width: 104px; padding: 18px; border-radius: 18px; }
  .pl-logo img { max-height: 48px; }
  .pl-foot { gap: 8px; }
  .pl-arrow { width: 40px; height: 40px; }
}

/* ---------- How it starts: a huge sticky number; the stages scroll past beside it ---------- */
.v5-stages { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
.st-num { position: relative; }
.st-window { position: sticky; top: calc(50vh - 0.5em + var(--header) / 2); height: 1em; overflow: hidden; font-size: clamp(150px, 19vw, 280px); line-height: 1; font-weight: 500; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.st-digits { transform: translateY(calc(var(--k, 0) * -1em)); transition: transform 0.85s var(--ease-io); }
.st-digits span { display: block; height: 1em; color: var(--ink); }
.st-window::after { content: ""; position: absolute; left: 0.04em; bottom: 0.16em; width: 0.05em; height: 0.05em; border-radius: 50%; background: var(--accent); }
.stage { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; border-top: 1px solid var(--line); color: var(--faint); cursor: pointer; transition: color 0.55s ease; }
.stage:first-child { border-top: 0; }
.stage h3 { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; color: inherit; transition: transform 0.6s var(--ease); }
.stage p { margin: 0; max-width: 32rem; font-size: 18px; line-height: 1.55; color: inherit; }
.stage.current { color: var(--ink); cursor: default; }
.stage.current p { color: var(--muted); }
.stage:not(.current):hover { color: var(--muted); }
.stage:not(.current):hover h3 { transform: translateX(8px); }
.stage .split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 32rem; margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.stage .split small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.stage .split span { font-size: 15px; }
.stage h3::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 14px; vertical-align: 0.35em; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.45s var(--ease); }
.stage.reached h3::after { transform: scale(1); }
@media (max-width: 760px) {
  .v5-stages { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .st-window { font-size: 84px; top: calc(var(--header) + 24px); }
  .stage { min-height: 46vh; padding: 32px 0; }
  .stage .split { grid-template-columns: 1fr; }
}

/* ---------- The Setup Interview demo: a quiet single column; each finding fades in under the last ---------- */
.v5-interview { max-width: 660px; margin: 72px auto 0; }
.iv-part:empty { display: none; }
.iv-part + .iv-part:not(:empty) { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.iv-part.arrived { animation: iv-in 0.6s var(--ease) both; }
@keyframes iv-in { from { opacity: 0; transform: translateY(14px); } }
.v5-interview .try-form { position: relative; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-strong); }
.v5-interview .try-form::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.v5-interview .try-form:focus-within::after, .v5-interview.demo .try-form::after { transform: scaleX(1); }
.v5-interview .try-form input { flex: 1; min-width: 0; padding: 14px 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; font: inherit; font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.02em; color: var(--ink); outline: none; }
.v5-interview .try-form input::placeholder { color: var(--faint); }
.v5-interview .try-hint { font-size: 13px; color: var(--faint); margin: 12px 0 0; }
.v5-interview .try-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.v5-interview .try-mode { font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent); border-color: rgba(88, 150, 189, 0.4); }
.v5-interview .try-findings { list-style: none; margin: 0 0 22px; padding: 0; display: block; }
.v5-interview .try-findings li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 18px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; animation: iv-in 0.7s var(--ease) both; }
.v5-interview .try-findings li:last-child { border-bottom-color: var(--line-strong); }
.v5-interview .try-findings small { grid-row: 1 / 3; padding-top: 3px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.v5-interview .try-findings b { font-size: 16.5px; font-weight: 500; margin: 0; line-height: 1.45; }
.v5-interview .try-findings .chip { justify-self: start; font-size: 11px; color: var(--faint); background: none; padding: 0; border: 0; }
.v5-interview .try-findings li:last-child .chip { color: var(--accent); }
.v5-interview .try-says { font-size: 16px; color: var(--ink); margin: 0 0 12px; }
.v5-interview .try-depts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.v5-interview .try-depts span { padding: 0; background: none; color: var(--ink); font-size: 19px; letter-spacing: -0.02em; opacity: 0; animation: iv-in 0.5s var(--ease) forwards; }
.v5-interview .try-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .v5-interview .try-findings li { grid-template-columns: 1fr; } .v5-interview .try-findings small { grid-row: auto; } }
.v5-starts .promise { margin-top: 56px !important; }
.start-cta { margin-top: 40px; }

/* ---------- Numbered lists with a thin line that grows down beside them ---------- */
.v5-line-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 60px; counter-reset: ln; }
.v5-line-list::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--accent), var(--line-strong) 40%, var(--line)); transform-origin: top; }
.v5-line-list > li { counter-increment: ln; position: relative; padding: 12px 0; }
.v5-line-list > li::before { content: counter(ln); position: absolute; left: -60px; top: 12px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ground); color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; transition: border-color 0.3s, color 0.3s, transform 0.45s var(--ease); }
.v5-line-list > li:hover::before { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
.v5-line-list.compact > li { font-size: 16px; padding: 10px 0; line-height: 1.5; }
.v5-line-list.compact > li::before { top: 6px; }
.v5-line-list.compact > li::after { display: none; }
.v5-line-list.beliefs > li { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.015em; padding: 14px 0; }
.v5-line-list.beliefs > li::before { top: 13px; }
.v5-line-list.own-num > li::before { content: none; }
.v5-line-list.own-num .num { position: absolute; left: -60px; top: 22px; width: 31px; height: 31px; display: grid; place-items: center; margin: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ground); color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: 0; transition: border-color 0.3s, color 0.3s; }
.v5-line-list.own-num > li:hover .num { border-color: var(--accent); color: var(--accent); }
.four-list { max-width: 54rem; }
.four-list > li { padding: 20px 0 26px; border-bottom: 1px solid var(--line); }
.four-list h3 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.03em; }
.four-list p { margin: 0; max-width: 44rem; }
.v5-path .container { max-width: 60rem; }
.v5-path .other-path { margin: 0 0 22px; font-size: clamp(26px, 3vw, 40px); }
.path-list > li { padding: 10px 0; font-size: clamp(28px, 3.6vw, 50px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.15; }
.path-list > li::before { top: 22px; }
html.js-motion .v5-line-list.line-wait::before { transform: scaleY(0); transition: transform 1s var(--ease); }
html.js-motion .v5-line-list.line-wait.in::before { transform: scaleY(1); }
html.js-motion .v5-line-list.line-wait > li { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.6s var(--ease); }
html.js-motion .v5-line-list.line-wait.in > li { opacity: 1; transform: none; }
html.js-motion .v5-line-list.line-wait.in > li:nth-child(2) { transition-delay: 0.08s; }
html.js-motion .v5-line-list.line-wait.in > li:nth-child(3) { transition-delay: 0.16s; }
html.js-motion .v5-line-list.line-wait.in > li:nth-child(n+4) { transition-delay: 0.24s; }

/* ---------- One customer: the systems pass on the left; her one record fills in on the right ---------- */
.v5-follow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.v5-follow .label { margin-bottom: 18px; text-align: left; font-size: 11px; letter-spacing: 0.14em; color: var(--faint); }
.fl-record { position: sticky; top: calc(var(--header) + 28px); }
.v5-follow .journey { position: relative; display: block; padding: 0; }
.v5-follow .journey > div[data-i] { position: relative; min-height: 26vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 40px 0 24px 46px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; background: none; text-align: left; font-size: 15px; color: var(--faint); cursor: pointer; transition: color 0.45s ease; }
.v5-follow .journey > div[data-i] b { display: block; margin: 0 0 2px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.035em; color: inherit; transition: transform 0.55s var(--ease); }
.v5-follow .journey > div[data-i]:hover { color: var(--muted); }
.v5-follow .journey > div[data-i]:hover b { transform: translateX(6px); }
.v5-follow .journey > div.past { color: var(--muted); }
.v5-follow .journey > div.on { color: var(--ink); }
.v5-follow .journey > div.next { color: var(--muted); }
.v5-follow .journey > div.next b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 12px; vertical-align: 0.3em; border-radius: 50%; background: var(--accent); animation: v5-pulse 1.6s ease-in-out infinite; }
@keyframes v5-pulse { 50% { transform: scale(1.6); opacity: 0.5; } }
.v5-follow .sys-icon { position: absolute; right: 0; top: 46px; display: inline-flex; width: auto; height: auto; margin: 0; background: none !important; box-shadow: none !important; color: inherit; }
.v5-follow .sys-icon svg { width: 18px; height: 18px; }
/* Each system's own logo, on a small white tile so dark brand colors still read on the dark page: gray and faded
   until it is the system on show, then in its own color, a little larger, with a ring (Sam, October 26). */
.v5-follow .sys-icon.fl-logo svg, .v5-follow .sys-icon.fl-logo img { width: 24px; height: 24px; fill: currentColor; border-radius: 4px; }
.v5-follow .sys-icon.fl-logo { align-items: center; justify-content: center; padding: 5px; border-radius: 9px; background: #fff !important; filter: grayscale(1); opacity: 0.35; transition: filter 0.4s, opacity 0.4s, transform 0.4s var(--ease), box-shadow 0.4s; }
.v5-follow .journey > div[data-i]:hover .sys-icon.fl-logo { opacity: 0.6; }
.v5-follow .journey > div.on .sys-icon.fl-logo { filter: none; opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--accent-soft) !important; }
/* The script centers the avatar over its system; left: -50% and the top margin bring it back onto the line, beside the system's name. */
.v5-follow .journey-avatar { position: absolute; left: -50%; top: 0; margin-top: 59px; width: 34px; height: 34px; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 4px var(--accent-soft); transition: transform 0.75s var(--ease), opacity 0.4s; z-index: 2; pointer-events: none; }
.v5-follow .journey-avatar.visible { opacity: 1; }
.v5-follow .journey-hint { text-align: left; margin: 18px 0 0 46px; }
.v5-follow .hero-visual { max-width: none; margin: 0; }
.v5-follow .dash { border-color: var(--line-strong); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); }
.v5-follow .dash-body { padding: 22px 24px; }
.v5-follow .dash-stats { margin-bottom: 18px; }
.v5-follow .dash-stats div { border-color: var(--line); }
.v5-follow .dash-stats strong { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.v5-follow .timeline { margin-bottom: 16px; }
.v5-follow .timeline li { cursor: pointer; transition: opacity 0.5s ease, color 0.4s; }
.v5-follow .timeline li::before { border-color: var(--muted); }
.v5-follow .timeline li.fresh { color: var(--ink); }
.v5-follow .timeline li.fresh::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.v5-follow.filling .timeline li:not(.shown) { opacity: 0.12; }
.v5-follow.filling .timeline li.shown { animation: rec-in 0.6s var(--ease); }
.v5-follow .ask { transition: opacity 0.6s; }
.v5-follow.filling .ask:not(.shown) { opacity: 0.12; }
.v5-follow .ask .a b { color: var(--accent); }
.v5-follow .caption { text-align: left; margin-left: 0; }
@media (max-width: 899px) {
  .v5-follow { grid-template-columns: 1fr; gap: 28px; }
  .fl-record { position: relative; top: 0; }
  .v5-follow .journey > div[data-i] { min-height: 0; padding: 10px 0 10px 40px; }
  .v5-follow .journey-avatar { margin-top: 22px; }
  .v5-follow .journey > div[data-i] b { font-size: 20px; }
  .v5-follow .sys-icon { display: none; }
  .v5-follow .dash-body { padding: 16px; }
}

/* ---------- The checklist: one quiet line and one field ---------- */
.checklist-offer { display: block; max-width: 760px; margin: 0 auto; text-align: center; }
.checklist-offer h2 { margin: 18px auto 14px; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.18; max-width: 22em; }
.checklist-offer .lead { margin: 0 auto; max-width: 34rem; }
.checklist-form { max-width: 560px; margin: 40px auto 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
.checklist-form label { margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.checklist-row { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-strong); }
.checklist-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.checklist-row:focus-within::after { transform: scaleX(1); }
.checklist-row input { flex: 1 1 auto; min-width: 0; padding: 14px 0; border: 0; border-radius: 0; background: none !important; box-shadow: none !important; font-size: clamp(18px, 1.8vw, 21px); letter-spacing: -0.015em; color: var(--ink); outline: none; }
.checklist-row input::placeholder { color: var(--faint); }
.checklist-row .btn { flex: none; padding: 8px 0 8px 10px; border: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none; white-space: nowrap; }
.checklist-row .btn::after { content: "→"; display: inline-block; margin-left: 10px; color: var(--accent); transition: transform 0.4s var(--ease); }
.checklist-row .btn:hover { background: none; transform: none; box-shadow: none; }
.checklist-row .btn:hover::after { transform: translateX(5px); }
.checklist-msg { text-align: left; }
.checklist-pdf { font-size: 13.5px; font-weight: 500; }
@media (max-width: 420px) { .checklist-row .btn { font-size: 14px; } }

/* ---------- Questions: large type; each answer opens with a smooth height ---------- */
.v5-faq, .faq-list { border-top: 1px solid var(--line); }
main details { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
main summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 0; font-size: clamp(19px, 2.1vw, 27px); font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; color: var(--muted); transition: color 0.3s; }
main summary::-webkit-details-marker { display: none; }
main summary::after { content: ""; flex: none; width: 18px; height: 18px; background: linear-gradient(var(--muted), var(--muted)) center / 100% 1px no-repeat, linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat; transition: transform 0.5s var(--ease); }
main summary:hover { color: var(--ink); }
main summary:hover::after { transform: rotate(90deg); }
main details[open] > summary { color: var(--ink); }
main details[open] > summary::after { transform: rotate(45deg); background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat; }
main details > p { max-width: 46rem; margin: 0 0 30px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
main details.opening > p { animation: iv-in 0.55s var(--ease) both; }

/* ---------- The ending: credits, slow and centered ---------- */
.close-band { position: relative; overflow: clip; padding-block: 136px 160px; border: 0; text-align: center; }
.close-band::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 96px; background: linear-gradient(var(--line-strong), rgba(241, 238, 231, 0)); transform: translateX(-50%); }
.close-band .container { max-width: 780px !important; will-change: transform; }
.close-band .kicker { margin-bottom: 44px; }
.close-band h2 { margin: 0 auto 44px; max-width: 18em; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.04em; }
.close-band .transformation { max-width: 30rem; margin: 0 auto 22px; font-size: 19px; line-height: 1.5; }
.close-band .lead { max-width: 32rem; margin: 0 auto 48px; }
.close-band .hero-actions { justify-content: center; }
.end-mark { display: block; width: 26px; height: auto; margin: 88px auto 0; opacity: 0.6; }
html.js-motion .close-band.credits-wait .cr { opacity: 0; transform: translateY(26px); transition: opacity 0.55s ease, transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
html.js-motion .close-band.credits-wait.in .cr { opacity: 1; transform: none; }
html.js-motion .close-band.credits-wait.in .end-mark { opacity: 0.6; }
@media (max-width: 640px) { .close-band { padding-block: 112px 120px; } }

/* ---------- Comparisons: a ledger in large type; each row lights up as it passes ---------- */
.table-wrap { border: 0; border-radius: 0; }
table.compare { font-size: 15px; }
table.compare thead th { padding: 0 12px 20px; border-bottom: 1px solid var(--line-strong); background: none; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
table.compare thead th:last-child { color: var(--accent); }
table.compare th .th-eg { text-transform: none; letter-spacing: 0; }
table.compare tbody td { padding: 22px 12px; border-bottom: 1px solid var(--line); transition: color 0.5s ease; }
table.compare tbody td:first-child b { font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; letter-spacing: -0.015em; }
table.compare td:last-child { background: rgba(88, 150, 189, 0.05); }
table.compare-marks .mark { transition: filter 0.5s ease, transform 0.4s var(--ease); }
html.js-motion table.compare-marks tbody tr.dim:not(.lit) td { color: var(--faint); }
html.js-motion table.compare-marks tbody tr.dim:not(.lit) .mark { filter: saturate(0.8) brightness(0.85); }
table.compare-marks tbody tr:hover { background: none; }
table.compare-marks tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.compare-marks tbody tr:hover .mark { transform: scale(1.12); }
table.compare-marks tbody:hover tr:not(:hover) td { color: var(--faint); }
table.compare-marks .col-hover { background-image: linear-gradient(rgba(241, 238, 231, 0.04), rgba(241, 238, 231, 0.04)); }

/* ---------- The services: a slow vertical roll of names, like credits ---------- */
.int-marquee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: var(--container); height: 380px; margin: 8px auto 48px; padding-inline: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.int-row { display: block; width: auto; min-width: 0; }
.int-track { display: block; margin: 0; padding: 0; list-style: none; animation: roll-up 70s linear infinite; }
.int-row[data-dir="right"] .int-track { animation-name: roll-down; animation-duration: 84s; }
@keyframes roll-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes roll-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.int-tile { display: flex; align-items: center; gap: 14px; height: auto; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -0.02em; color: var(--muted); transition: color 0.3s, transform 0.5s var(--ease); }
.int-tile:hover { color: var(--ink); transform: translateX(8px); border-color: var(--line); }
.int-tile svg, .int-tile img { width: 20px; height: 20px; }
.int-tile .soon { margin-left: auto; }
@media (max-width: 640px) { .int-marquee { grid-template-columns: 1fr 1fr; gap: 0 20px; padding-inline: 16px; height: 320px; } .int-tile { font-size: 15px; gap: 10px; } }
/* Narrow screens: a long name wraps, and "Coming soon" sits on its own line under the name, so neither runs into the next column. */
@media (max-width: 900px) {
  .int-tile { flex-wrap: wrap; row-gap: 4px; min-width: 0; white-space: normal; line-height: 1.25; }
  .int-tile span { min-width: 0; flex: 1 1 calc(100% - 40px); }
  .int-tile .soon { flex: none; margin-left: 30px; }
}

@keyframes v5-line-down { from { transform: scaleY(0); } }

/* ---------- Platform: each part's huge word holds still beside it ---------- */
.v5-part { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 48px; align-items: start; }
.part-word { position: sticky; top: calc(var(--header) + 48px); margin: 0; font-size: clamp(56px, 8vw, 128px) !important; font-weight: 500 !important; letter-spacing: -0.06em !important; line-height: 0.95; text-transform: none !important; color: var(--ink) !important; }
.part-word::before { display: block !important; margin: 0 0 18px !important; width: 7px !important; height: 7px !important; }
.part-body .section-head { margin-bottom: 40px; }
@media (max-width: 900px) { .v5-part { grid-template-columns: 1fr; gap: 12px; } .part-word { position: relative; top: 0; font-size: 56px !important; } }

/* ---------- Docs: a table of contents ---------- */
.v5-toc { list-style: none; margin: 36px 0 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--line-strong); }
.v5-toc > li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr) 24px; gap: 24px; align-items: baseline; padding: 26px 0; transition: background 0.4s; }
.toc-row::before { content: counter(toc, decimal-leading-zero); font-size: 12.5px; letter-spacing: 0.1em; color: var(--faint); transition: color 0.3s; }
.toc-row h3 { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.025em; transition: transform 0.55s var(--ease); }
.toc-row p { margin: 0; }
.toc-go { width: 14px; height: 14px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); align-self: center; transition: transform 0.45s var(--ease), border-color 0.3s; }
.toc-row:hover { background: linear-gradient(90deg, rgba(241, 238, 231, 0.03), rgba(241, 238, 231, 0)); }
.toc-row:hover h3 { transform: translateX(8px); }
.toc-row:hover::before { color: var(--accent); }
.toc-row:hover .toc-go { transform: translateX(4px) rotate(45deg); border-color: var(--accent); }
@media (max-width: 760px) { .toc-row { grid-template-columns: 40px minmax(0, 1fr); } .toc-row p { grid-column: 2; } .toc-go { display: none; } }

/* ---------- Start: the huge step number beside the interview ---------- */
.v5-iv { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 36px; padding: 0; border: 0; background: none; box-shadow: none; }
.iv-side { position: relative; }
.iv-big { position: relative; height: 0.78em; overflow: hidden; margin-bottom: 26px; font-size: 150px; font-weight: 500; line-height: 0.8; letter-spacing: -0.06em; color: var(--ink); }
.iv-big::before { content: attr(data-n); display: block; animation: iv-in 0.5s var(--ease); }
.v5-iv .iv-steps { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; overflow: visible; }
.v5-iv .iv-steps span { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 14px; color: var(--faint); white-space: nowrap; transition: color 0.3s; }
.v5-iv .iv-steps span i { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: none; font-style: normal; font-size: 11px; color: var(--muted); }
.v5-iv .iv-steps span.on { color: var(--ink); }
.v5-iv .iv-steps span.on i { border-color: var(--accent); color: var(--accent); background: none; }
.v5-iv .iv-steps span.done { color: var(--muted); }
.v5-iv .iv-steps span.done i { background: var(--ink); border-color: var(--ink); color: var(--primary-ink); }
.iv-main { min-width: 0; }
.v5-iv .iv-body { padding: 0; border: 0; background: none; }
.v5-iv .iv-body.turn { animation: iv-in 0.5s var(--ease); }
.v5-iv .iv-body h2 { font-size: clamp(26px, 3vw, 38px); }
.v5-iv .iv-foot { padding: 24px 0 0; margin-top: 28px; border-top: 1px solid var(--line); background: none; }
.v5-iv input[type="text"], .v5-iv input[type="url"], .v5-iv textarea, .v5-iv select { background: transparent; }
.v5-iv .choice { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: none; transition: background 0.3s, padding 0.4s var(--ease); }
.v5-iv .choice:hover { background: rgba(241, 238, 231, 0.03); }
.v5-iv .radio-row label:has(input:checked), .v5-iv .choice:has(input:checked) { border-color: var(--accent); background: rgba(241, 238, 231, 0.04); }
.v5-iv .found-card, .v5-iv .dept { border-radius: 10px; }
@media (max-width: 760px) {
  .v5-iv { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .iv-side, .iv-main { min-width: 0; }
  .iv-big { position: relative; top: 0; font-size: 84px; margin-bottom: 8px; }
  .v5-iv .iv-steps { flex-direction: row; overflow-x: auto; gap: 16px; scrollbar-width: none; }
}

/* ---------- Walkthrough: quiet numbered fields; a warm line grows as the form fills ---------- */
.v5-form { position: relative; padding: 0 0 0 44px; border: 0; background: none; box-shadow: none; counter-reset: fld; }
.v5-form::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.v5-form::after { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--accent); transform: scaleY(var(--filled, 0)); transform-origin: top; transition: transform 0.6s var(--ease); }
.v5-form .field { position: relative; counter-increment: fld; margin-bottom: 26px; }
.v5-form .field:not([hidden])::before { content: counter(fld); position: absolute; left: -44px; top: 0; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--ground); border: 1px solid var(--line-strong); font-size: 11px; color: var(--muted); z-index: 1; transition: border-color 0.3s, color 0.3s; }
.v5-form .field.done::before { border-color: var(--accent); color: var(--accent); }
.v5-form label, .v5-form legend { font-size: 13.5px; color: var(--muted); }
.v5-form input[type="text"], .v5-form input[type="email"], .v5-form input[type="url"], .v5-form select, .v5-form textarea { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; box-shadow: none; padding-inline: 0; font-size: 17px; transition: border-color 0.3s; }
.v5-form input:focus, .v5-form select:focus, .v5-form textarea:focus { border-bottom-color: var(--accent); outline: none; }
.v5-form .radio-row label { border-radius: 999px; }

/* ---------- Monochrome fixes for leftovers styles.css tints blue ---------- */
.dash { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); }
.timeline li::before { border-color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--primary-ink); }
.radio-row label:has(input:checked), .choice:has(input:checked) { border-color: var(--ink); background: rgba(241, 238, 231, 0.06); }
.for-pick button.on, .row-tools .rt.buyer.on { color: var(--primary-ink); }

/* ---------- Motion: everything below is hide-then-reveal only when motion.js has run ---------- */
/* Headlines arrive word by word */
html.js-motion .wr .w { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 0.4s ease, transform 0.45s var(--ease); transition-delay: min(calc(var(--i, 0) * 25ms), 0.2s); }
html.js-motion .wr.in .w { opacity: 1; transform: none; }
/* Each block arrives in its own way */
html.js-motion .arr { transition: opacity 0.4s ease, transform 0.55s var(--ease); }
html.js-motion .arr-rise:not(.in) { opacity: 0; transform: translateY(28px); }
html.js-motion .arr-scale:not(.in) { opacity: 0; transform: scale(0.965); }
html.js-motion .arr-left:not(.in) { opacity: 0; transform: translateX(-36px); }
html.js-motion .arr-right:not(.in) { opacity: 0; transform: translateX(36px); }
html.js-motion .arr-fade:not(.in) { opacity: 0; }

/* ---------- Maria's record: docked on the side (desktop) or a bar at the bottom (phones) ---------- */
.rec { position: fixed; z-index: 45; font-size: 13px; color: var(--ink); background: rgba(26, 26, 24, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.6s var(--ease); }
.rec.show { opacity: 1; pointer-events: auto; transform: none; }
.rec-top { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; cursor: default; }
.rec-av { width: 38px; height: 38px; border-radius: 50%; display: block; }
.rec-id { display: grid; min-width: 0; }
.rec-label { grid-column: 1 / -1; margin-bottom: -2px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.rec-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.rec-id b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rec-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-latest { display: none; }
.rec-count { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.rec-meter { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 14px 0 6px; }
.rec-meter span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.rec-list { list-style: none; margin: 0; padding: 4px 0 0; position: relative; overflow-y: auto; }
.rec-list li { position: relative; padding: 6px 0 6px 18px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.rec-list li:last-child { border-bottom: 0; }
.rec-list li::before { content: ""; position: absolute; left: 1px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background 0.4s; }
.rec-list li.fresh::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rec-list li .t { display: block; line-height: 1.4; transition: color 0.2s, transform 0.35s var(--ease); }
.rec-list li:hover .t { color: #fff; transform: translateX(3px); }
.rec-list li .m { display: flex; gap: 8px; font-size: 11px; color: var(--faint); margin-top: 2px; }
.rec-list li .m span:last-child { margin-left: auto; color: var(--muted); }
.rec-list li.adding { animation: rec-in 0.6s var(--ease) both; }
@keyframes rec-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rec-foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.rec.complete .rec-foot { color: var(--ink); }
.rec.complete .rec-count { color: var(--accent); }

@media (min-width: 1200px) {
  .rec { top: calc(var(--header) + 24px); right: 24px; width: var(--rec-w); max-height: calc(100vh - var(--header) - 48px); display: flex; flex-direction: column; padding: 18px 18px 14px; transform: translateX(14px); }
  .rec-list { flex: 1 1 auto; min-height: 0; }
  .rec-sub { white-space: normal; }
  .rec-list li .m { margin-top: 0; }
  /* Make room for the docked record beside every section after the hero. */
  /* The frame stays lined up with the header; only its right side gives way where the record sits. */
  html.has-record main > section:not(.hero-one) > .container { padding-right: max(var(--gutter), calc(var(--rec-w) + 72px - max(0px, (100vw - var(--container)) / 2))); }
}
@media (max-width: 1199px) {
  .rec { left: 16px; right: 16px; bottom: 12px; padding: 10px 14px; transform: translateY(calc(100% + 20px)); }
  .rec-top { cursor: pointer; }
  .rec-av { width: 30px; height: 30px; }
  .rec-label, .rec-sub { display: none; }
  .rec-id b { font-size: 13.5px; }
  .rec-latest { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rec-meter { margin: 8px 0 0; }
  .rec-list, .rec-foot { display: none; }
  .rec.open .rec-list { display: block; max-height: 46vh; margin-top: 6px; }
  .rec.open .rec-foot { display: block; }
  html.has-record main { padding-bottom: 72px; }
}

/* Reduced motion: nothing moves, everything is visible. */
@media (prefers-reduced-motion: reduce) {
  .hero-ambient .glow, .hero-ambient .beam { animation: none !important; }
  html.js-motion .wr .w, html.js-motion .arr, html.js-motion .cr, html.js-motion .lw { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rec, .rec-meter span, .rec-list li::before { transition: none !important; }
  .rec-list li.adding, .iv-part.arrived, .v5-interview .try-findings li, .v5-interview .try-depts span, .iv-big::before, .v5-iv .iv-body.turn, main details.opening > p, .v5-follow .timeline li.shown { animation: none !important; opacity: 1; }
  .hero:not(.hero-one)::after, .vp-tier.feat::before { animation: none; }
  .st-digits, .pf, .pf > *, .pl-slide, .tr-more, .fork-row h3, .ix-name, .tier-row h3 { transition: none !important; }
  .int-marquee { height: auto; -webkit-mask-image: none; mask-image: none; }
  .int-track { animation: none !important; }
  .card, .btn, .story-ai > div { transition: none !important; }
  .card:hover, .btn:hover { transform: none !important; }
}

/* Phones: the pricing columns scroll sideways inside their frame; the row names take less room. */
@media (max-width: 640px) { .v5-price { min-width: 700px; } .vp-grid { grid-template-columns: 132px repeat(4, minmax(0, 1fr)); } .vp-tier .t-amount { font-size: 26px; } }

/* Two buttons side by side for startups and small and medium businesses */
.fork-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fork-acts { justify-content: flex-end; }
@media (max-width: 760px) { .fork-acts { justify-content: flex-start; margin-top: 8px; } }

/* Full width: one gutter everywhere, so the header, sections and rules line up */
.container { padding-inline: var(--gutter); }
@media (max-width: 1024px) { :root { --gutter: 24px; } }
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* "Your business, on Ulmero": a looping video of the chosen organization at work, at the upper right beside the
   heading (not behind the list), faded at every edge (Sam, October 23). */
.has-ix-video .section-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; max-width: none; }
.has-ix-video .section-head > :not(.ix-video) { grid-column: 1; }
.ix-video { position: relative; grid-column: 2; grid-row: 1 / span 4; align-self: center; aspect-ratio: 16 / 9; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); }
.ix-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.9s ease; filter: saturate(0.9); }
.ix-video video.on { opacity: 0.6; }
@media (max-width: 900px) { .has-ix-video .section-head { display: block; } .ix-video { display: none; } }

/* Icons beside every person, department and promise, and the tools' own logos (Sam, October 23) */
.pf-value { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pf-value span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pf-value span:not(:last-child)::after { content: none; }
.pf-value svg, .pf-value img { flex: none; width: 16px; height: 16px; }
.pf-value svg[data-lucide], .pf-value .lucide { stroke-width: 1.75; color: var(--turquoise); }
.pf-value svg.tool-logo { fill: currentColor; color: var(--ink); }
.pf-value img.tool-logo { border-radius: 3px; }
.pf-base li { align-items: baseline; }
.pf-base li .lucide { flex: none; width: 16px; height: 16px; stroke-width: 1.75; color: var(--turquoise); align-self: center; }
/* The profile lines up with the bottom of the list of organizations; its box of promises sits last. */
.v5-index { align-items: end; }
.v5-index .ix-profile { position: relative; top: 0; }
.pf-base { margin: 18px 0 0; }
.pf-value .tool-mono { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--accent-soft); color: var(--turquoise); font-size: 10px; font-weight: 700; line-height: 1; }

/* Paragraphs spread out (Sam, October 23): wider lines, natural line breaks instead of short balanced ones, a little more line spacing */
.lead { max-width: 58rem; text-wrap: pretty; line-height: 1.7; }
.section-head { max-width: 64rem; }
.hero:not(.hero-one) .lead { max-width: 54rem; }
.fork-main p { max-width: 46rem; }
.pf-value { line-height: 1.6; }

/* How it starts: the three stages side by side, compact (Sam, October 23) */
.v5-stages.v5-stages-row { display: block; }
.v5-stages-row .st-num { display: none; }
.v5-stages-row .st-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); counter-reset: stage; }
.v5-stages-row .stage { min-height: 0; justify-content: flex-start; padding: 26px 0 0; border-top: 1px solid var(--line-strong); color: var(--ink); cursor: default; counter-increment: stage; }
.v5-stages-row .stage:first-child { border-top: 1px solid var(--line-strong); }
.v5-stages-row .stage::before { content: counter(stage); display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--turquoise); }
.v5-stages-row .stage h3 { font-size: clamp(22px, 2vw, 30px); }
.v5-stages-row .stage p { color: var(--muted); font-size: 16.5px; }
.v5-stages-row .stage:hover h3 { transform: none; }
@media (max-width: 860px) { .v5-stages-row .st-items { grid-template-columns: 1fr; } }
.v5-stages-row .stage .split { margin-top: auto; padding-top: 16px; }
.v5-stages-row .stage p { margin-bottom: 26px; }
/* The label and title sit lower, centered beside the video (Sam, October 23) */
.has-ix-video .section-head { grid-template-rows: 1fr auto auto 1fr; padding-top: 24px; }
.has-ix-video .section-head > .kicker { grid-row: 2; }
.has-ix-video .section-head > h2 { grid-row: 3; }
.has-ix-video .section-head > .lead { grid-row: 4; align-self: start; }
.ix-video { grid-row: 1 / 5; }
/* The list of organizations stays put (so the name under the mouse never changes); only the profile sits at the bottom. */
.v5-index { align-items: start; }
.v5-index .ix-list { align-self: start; }
.v5-index .ix-profile { align-self: end; }

/* How it starts: two paths side by side, each with its three steps and its buttons (Sam, October 23) */
.v5-starts .kicker { margin-bottom: 28px; }
.paths2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.path2 { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 44px); border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(180deg, rgba(241, 238, 231, 0.035), rgba(241, 238, 231, 0.01)); transition: border-color 0.4s, transform 0.5s var(--ease); }
.path2:hover { border-color: var(--accent); transform: translateY(-3px); }
.path2 .path-who { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.path2 h2 { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; }
.path2 .lead { margin: 0 0 22px; font-size: 16.5px; }
.p2-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: p2; }
.p2-steps li { counter-increment: p2; position: relative; display: grid; gap: 2px; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); }
.p2-steps li::before { content: counter(p2); position: absolute; left: 0; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--turquoise); transition: border-color 0.3s, background 0.3s; }
.p2-steps li:hover::before { border-color: var(--accent); background: var(--accent-soft); }
.p2-steps b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.p2-steps span { font-size: 15px; line-height: 1.55; color: var(--muted); }
.path2 .hero-actions { margin-top: auto; justify-content: flex-start; }
.paths2-promise { max-width: 58rem; margin: 32px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
@media (max-width: 900px) { .paths2 { grid-template-columns: 1fr; } }
/* The turquoise capital-letter labels, bigger so they are seen (Sam, October 23) */
.path2 .path-who, .pf-label, .ix-kind { font-size: 16.5px; letter-spacing: 0.07em; line-height: 1.4; }
.ix-list .picker-label { font-size: 17px; }
@media (max-width: 640px) { .path2 .path-who, .pf-label, .ix-kind { font-size: 15px; } }
/* What every organization gets: the five promises made prominent, as tiles with large capital titles (Sam, October 23) */
.pf-base { padding: 26px 26px 24px; border-color: var(--accent); background: linear-gradient(180deg, rgba(88, 150, 189, 0.09), rgba(88, 150, 189, 0.02)); }
.pf-base ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-base li { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(241, 238, 231, 0.025); transition: border-color 0.3s, background 0.3s; }
.pf-base li:hover { border-color: var(--accent); background: var(--accent-soft); }
.pf-base li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pf-base li .lucide { grid-row: 1 / 3; width: 26px; height: 26px; stroke-width: 1.6; margin-top: 1px; }
.pf-base li b { font-size: 16px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--ink); }
.pf-base li span { font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) { .pf-base ul { grid-template-columns: 1fr; } .pf-base li b { font-size: 15px; } }

/* "Ready when you are": every tool in the catalog tumbles loose, then settles into one grid around Ulmero
   (logos-art.js; Sam, October 23). Feathered edges like the organization video. The closing words sit at the left. */
.close-band.has-logos .container { max-width: var(--container) !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(32px, 4vw, 80px); align-items: center; text-align: left; }
.close-band.has-logos .container > * { grid-column: 1; }
.close-band.has-logos .container > .ix-logos { grid-column: 2; grid-row: 1 / span 7; align-self: center; aspect-ratio: 16 / 10; }
.close-band.has-logos h2, .close-band.has-logos .transformation, .close-band.has-logos .lead { margin-left: 0; margin-right: 0; }
.close-band.has-logos .hero-actions { justify-content: flex-start; }
.close-band.has-logos .end-mark { justify-self: start; margin-left: 0; }
.ix-logos { opacity: 0.9; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.ix-logos .lg-tile { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px;
  background: rgba(241, 238, 231, 0.06); border: 1px solid var(--line-strong); will-change: transform, opacity;
  border-color: rgba(132, 181, 210, calc(0.18 + 0.7 * var(--lit, 0))); box-shadow: 0 0 calc(18px * var(--lit, 0)) rgba(132, 181, 210, calc(0.5 * var(--lit, 0))); }
.ix-logos .lg-tile svg { width: 20px; height: 20px; fill: currentColor; color: var(--ink); }
.ix-logos .lg-tile img { width: 20px; height: 20px; border-radius: 4px; }
.ix-logos .lg-hub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 22px;
  background: var(--raised); border: 1px solid var(--accent);
  box-shadow: 0 0 calc(10px + 44px * var(--glow, 0)) rgba(132, 181, 210, calc(0.15 + 0.45 * var(--glow, 0))); }
.ix-logos .lg-hub img { width: 44px; height: auto; }
@media (max-width: 900px) { .close-band.has-logos .container { display: block; max-width: 780px !important; } }

/* "Not another chatbot": the same request given to a chat window and to Ulmero, side by side beside the reading text
   (stakes-art.js; Sam, October 23). */
.v5-stakes.has-art > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(40px, 5vw, 96px); }
.v5-stakes.has-art > .container > * { grid-column: 1 / -1; }
.v5-stakes.has-art > .container > .section-head { grid-column: 1; grid-row: 1; }
.v5-stakes.has-art > .container > .v5-read { grid-column: 1; grid-row: 2; }
.v5-stakes.has-art > .container > .sk-stage { grid-column: 2; grid-row: 1 / span 2; }
.sk-sticky { position: sticky; top: 130px; }
.sk-label { margin: 0 0 18px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
@media (max-width: 900px) { .v5-stakes.has-art > .container { display: block; } .sk-stage { display: none; } }

.sk-pair { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 18px; align-items: stretch; }
.sk-card { display: flex; flex-direction: column; padding: 22px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--panel); }
.sk-card-h { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sk-card-h img { width: 18px; height: auto; }
.sk-work { border-color: var(--accent); box-shadow: 0 0 48px rgba(132, 181, 210, 0.14); }
.sk-work .sk-card-h { color: var(--turquoise); }
.sk-bubble { margin: 0 0 12px; padding: 12px 15px; border-radius: 16px; font-size: 16px; line-height: 1.45; max-width: 94%; }
.sk-you { margin-left: auto; background: rgba(241, 238, 231, 0.1); color: var(--ink); border-bottom-right-radius: 5px; }
.sk-bot { background: rgba(241, 238, 231, 0.04); border: 1px solid var(--line); color: var(--muted); border-bottom-left-radius: 5px; }
.sk-typing { display: inline-flex; gap: 5px; width: max-content; margin: 0 0 12px; padding: 13px 15px; border-radius: 16px; background: rgba(241, 238, 231, 0.05); }
.sk-typing b { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: sk-dot 1s ease-in-out infinite; }
.sk-typing b:nth-child(2) { animation-delay: 0.15s; } .sk-typing b:nth-child(3) { animation-delay: 0.3s; }
@keyframes sk-dot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sk-foot { margin: auto 0 0; padding-top: 14px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sk-foot-off { color: var(--faint); }
.sk-foot-on { color: var(--turquoise); }
.sk-tasks { list-style: none; margin: 0; padding: 0; }
.sk-tasks li { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.35; color: var(--ink); }
.sk-tasks li em { grid-column: 2; font-style: normal; font-size: 13px; color: var(--faint); }
.sk-check { grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); }
.sk-check svg { width: 14px; height: 14px; fill: none; stroke: var(--ground); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* The timeline: both get the request; the chat window types, then says it cannot; Ulmero ticks off the work. */
.sk-versus .sk-you, .sk-versus .sk-bot, .sk-versus .sk-foot, .sk-versus .sk-typing { opacity: 0; transform: translateY(8px); }
.sk-versus .sk-typing { height: 0; padding-block: 0; margin: 0; overflow: hidden; }
.sk-versus .sk-tasks li { opacity: 0.25; }
.sk-versus.play .sk-you { opacity: 1; transform: none; transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }
.sk-versus.play .sk-typing { animation: sk-typing 1.9s ease 0.9s both; }
@keyframes sk-typing { 0% { opacity: 0; transform: translateY(8px); height: 0; padding-block: 0; margin-bottom: 0; }
  15%, 85% { opacity: 1; transform: none; height: 33px; padding-block: 13px; margin-bottom: 12px; }
  100% { opacity: 0; height: 0; padding-block: 0; margin-bottom: 0; } }
.sk-versus.play .sk-bot { opacity: 1; transform: none; transition: opacity 0.45s ease 2.8s, transform 0.45s ease 2.8s; }
.sk-versus.play .sk-foot-off { opacity: 1; transform: none; transition: opacity 0.4s ease 3.6s, transform 0.4s ease 3.6s; }
.sk-versus.play .sk-chat { opacity: 0.45; transition: opacity 1.2s ease 4.6s; }
.sk-versus.play .sk-tasks li { opacity: 1; transition: opacity 0.35s ease calc(1.2s + var(--n) * 0.7s); }
.sk-versus.play .sk-tasks li .sk-check { background: var(--turquoise); border-color: var(--turquoise); transition: background 0.3s ease calc(1.45s + var(--n) * 0.7s), border-color 0.3s ease calc(1.45s + var(--n) * 0.7s); }
.sk-versus.play .sk-foot-on { opacity: 1; transform: none; transition: opacity 0.4s ease 4.4s, transform 0.4s ease 4.4s; }
@media (prefers-reduced-motion: reduce) { .sk-versus *, .sk-versus { transition: none !important; animation: none !important; } .sk-versus .sk-typing { display: none; } }

/* Audience pages: the organization video sits under the list of organizations (Sam, October 24). */
.ix-video.ix-video-under { grid-column: auto; grid-row: auto; width: 100%; max-width: 560px; margin-top: 28px; aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .ix-video.ix-video-under { display: none; } }

/* Header: the cursive Ulmero wordmark in place of the square mark (Sam, October 25). */
.logo-mark.logo-word { height: 30px; width: auto; }
@media (max-width: 560px) { .logo-mark.logo-word { height: 26px; } }

/* Homepage hero: a large cursive Ulmero wordmark, then the tagline in blue (Sam, October 25). */
.hero-one .hero-logo { display: block; width: auto; height: clamp(64px, 7.5vw, 116px); margin: 0 auto 14px; }
.hero-one .kicker.hero-tagline { margin-bottom: 26px; font-size: clamp(19px, 1.7vw, 26px); font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--turquoise); }
.hero-one .kicker.hero-tagline::before { display: none; }
@media (max-width: 560px) { .hero-one .kicker.hero-tagline { font-size: 17px; } }
/* The tagline in capitals (Sam, October 25). */
.hero-one .kicker.hero-tagline { text-transform: uppercase; font-size: clamp(15px, 1.45vw, 22px); font-weight: 600; letter-spacing: 0.08em; }
@media (max-width: 560px) { .hero-one .kicker.hero-tagline { font-size: 14px; letter-spacing: 0.06em; line-height: 1.5; } }

/* Customer strip (Sam, October 25): on phones the progress dashes become favicons, the one on show in color and the
   rest in grayscale, and the logo row at the bottom goes away. Wide screens keep the dashes and the logo row. */
.pl-bars .pl-fav { display: none; }
.pl-bars span { cursor: pointer; }
.pl-bars span:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 640px) {
  .pl-bars { flex-wrap: wrap; gap: 10px 8px; margin-bottom: 24px; }
  .pl-bars span { flex: 0 0 40px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; background: none; overflow: visible; }
  .pl-bars .pl-fav { display: block; width: 40px; height: 40px; padding: 6px; box-sizing: border-box; border-radius: 10px; background: #f1eee7; object-fit: contain; filter: grayscale(1); opacity: 0.45; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s var(--ease); }
  .pl-bars span.on .pl-fav { filter: none; opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 2px var(--accent); }
  .pl-bars span.done .pl-fav { opacity: 0.6; }
  .pl-bars i { width: 100%; height: 2px; border-radius: 2px; background: var(--line-strong); }
  .pl-bars span.on i { background: var(--accent); }
  .v5-player .pl-foot { display: none; }
}
@media (max-width: 640px) { .v5-iv .iv-body { min-height: 0; } }
@media (max-width: 640px) { .v5-player:has(.pl-fav) .story .pl-logo { display: none; } }

/* Header on narrower screens (Sam, October 25): a three-line menu button left of the logo; the header's action at
   the right. The width matches the menu breakpoint in styles.css. */
@media (max-width: 1280px) {
  .site-header .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; margin-left: -9px; }
  .site-header .menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s var(--ease), opacity 0.2s ease; }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header .header-left { gap: 4px; }
  .site-header .header-actions .btn-secondary { display: inline-flex; }
  .site-header .header-actions .btn-primary { order: -1; }
}
@media (max-width: 640px) {
  .site-header .container { gap: 6px; }
  .site-header .header-left, .site-header .header-actions { flex: 0 1 auto; }
  .site-header .header-actions { gap: 6px; }
  .site-header .header-actions .btn { padding: 7px 10px; font-size: 13px; }
  .logo-mark.logo-word { height: 22px; }
}
@media (max-width: 380px) {
  .site-header .header-actions .btn { padding: 7px 8px; font-size: 12.5px; }
  .logo-mark.logo-word { height: 19px; }
}

/* Comparison tables on phones (Sam, October 25): each row's statement spans the full width, with its marks in a row
   underneath, one per column; the column names stay pinned under the header while the rows scroll past. */
@media (max-width: 640px) {
  .table-wrap:has(table.compare-marks) { overflow: visible; border: 0; }
  table.compare-marks, table.compare-marks thead, table.compare-marks tbody { display: block; width: 100%; }
  table.compare-marks tr { display: flex; flex-wrap: wrap; align-items: center; }
  table.compare-marks thead { position: sticky; top: var(--header); z-index: 4; background: var(--ground-alt); }
  section:not(.band) table.compare-marks thead { background: var(--ground); }
  table.compare-marks thead th { flex: 1 1 0; min-width: 0; padding: 10px 4px 10px; font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
  table.compare-marks thead th:first-child { display: none; }
  table.compare-marks thead th .th-eg { display: none; }
  table.compare-marks tbody td { flex: 1 1 0; min-width: 0; padding: 4px 4px 16px; border-bottom: 0; text-align: center; }
  table.compare-marks tbody td:first-child { flex: 1 1 100%; padding: 16px 0 10px; text-align: left; border-top: 1px solid var(--line); }
  table.compare-marks tbody td:first-child b { font-size: 16.5px; line-height: 1.35; }
  table.compare-marks tbody tr:first-child td:first-child { border-top: 0; }
  table.compare-marks td:last-child { border-radius: 8px; }
  table.compare-marks .mark svg { width: 22px; height: 22px; }
}
@media (max-width: 640px) {
  table.compare-marks thead th { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; overflow-wrap: normal; hyphens: auto; }
  table.compare-marks tbody td:not(:first-child) { font-size: 13px; line-height: 1.3; }
}
/* Phones: the whole row (statement and marks) highlights as one even block on hover or tap. */
@media (max-width: 640px) {
  table.compare-marks tr { padding: 0 10px; }
  table.compare-marks tbody tr { border-top: 1px solid var(--line); border-radius: 10px; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
  table.compare-marks tbody tr:first-child { border-top: 0; }
  table.compare-marks tbody td:first-child { border-top: 0; padding: 14px 0 8px; }
  table.compare-marks tbody tr:hover { background: rgba(241, 238, 231, 0.05); box-shadow: inset 3px 0 0 var(--accent); border-top-color: transparent; }
  table.compare-marks tbody tr:hover + tr { border-top-color: transparent; }
  table.compare-marks tbody tr:hover td:first-child { box-shadow: none; }
  table.compare-marks .col-hover, table.compare-marks tbody tr:hover .col-hover { background-image: none; }
  table.compare-marks thead .col-hover { box-shadow: none; }
}
@media (max-width: 640px) { table.compare-marks thead th { border-bottom: 0; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; } table.compare-marks thead tr { border-bottom: 1px solid var(--line-strong); } }
@media (max-width: 640px) { table.compare-marks thead th { text-align: center; padding: 10px 3px; } table.compare-marks:has(thead th:nth-child(6)) thead th { font-size: 10.5px; } }

/* Phone usability pass (Sam, October 25): no wasted indents, readable small labels, and easy-to-tap links. */
@media (max-width: 640px) {
  /* Quote-style asides use the full width instead of starting a third of the way across */
  .v5-aside { margin-left: 0; padding-left: 18px !important; }
  /* Small labels: at least 13px */
  .kicker, .tn-tag, .tag, .soon, .path-who, .story-ai small, .pl-label, .th-eg { font-size: 13px !important; }
  /* Text links get a taller tap area without moving the text */
  .text-link, .checklist-pdf, .footer-link, .pl-again, .hero-actions .text-link { display: inline-block; padding-block: 12px; margin-block: -8px; }
  /* Header buttons a little taller to tap */
  .site-header .header-actions .btn { min-height: 38px; }
}
/* Pricing grid: tool logos under "Nearly any tool connects" stay small tiles on every screen (they grew to about 300px on desktop). */
#tiers .tool-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-width: 420px; }
#tiers .tool-logos span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--ground); border: 1px solid var(--line); }
#tiers .tool-logos svg { width: 16px; height: 16px; fill: var(--ink); }
#tiers .tool-logos img { width: 16px; height: 16px; object-fit: contain; }

.for-pick .fp-short { display: none; }
@media (max-width: 640px) {

  .for-pick .fp-long { display: none; }
  .for-pick .fp-short { display: inline; }
}

/* Pricing, "Nearly any tool connects": the mouse over a logo shows the company's name right away (Sam, October 26). */
#tiers .tool-logos span { position: relative; cursor: default; }
#tiers .tool-logos span::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 5; padding: 4px 9px; border-radius: 6px; background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity 0.12s, transform 0.12s; }
#tiers .tool-logos span:hover { border-color: var(--line-strong); }
#tiers .tool-logos span:hover::after { opacity: 1; transform: translate(-50%, 0); }