/* =========================================================
   Flo design system: tokens + components
   Every surface on flo.co is built only from this file.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --cobalt: #1D3AD6;
  --cobalt-deep: #142BA8;
  --cobalt-tint: #E4E8FB;
  --pistachio: #E6F2B8;
  --pistachio-deep: #D2E496;
  --chalk: #FAF8F2;
  --paper: #FFFFFF;
  --ink: #18213A;
  --ink-2: #3B4460;
  --muted: #5E6680;
  --rule: #E4E2D8;
  --red: #E54B37;          /* signal: a visitor, or something live. Never decoration. */

  /* Type */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display: clamp(52px, 8.2vw, 124px);
  --t-h2: clamp(40px, 5.4vw, 76px);
  --t-h3: clamp(20px, 1.7vw, 24px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 17px;
  --t-small: 14px;
  --t-label: 12.5px;

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;

  /* Shape */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --r-field: 44px;

  /* The line */
  --stroke: 12px;          /* the line that connects sections, loops and steps */
  --stroke-ribbon: 8px;    /* ribbons inside a diagram */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 200ms;
  --med: 600ms;
  --slow: 1400ms;

  /* Layout */
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --gutter: 12px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--chalk); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- 3. Layout ---------- */
.wrap { position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: center; }
.split--flip > :first-child { order: 2; }
.stack > * + * { margin-top: var(--s5); }
.stack-s > * + * { margin-top: var(--s3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.mt-s { margin-top: var(--s3); }
.mt-l { margin-top: var(--s7); }
.mt-xl { margin-top: var(--s9); }

/* ---------- 4. Field: a rounded color field ---------- */
.field {
  position: relative; margin: var(--gutter) var(--gutter) 0;
  border-radius: var(--r-field);
  padding: clamp(72px, 9vw, 136px) 0;
  --bg: var(--chalk); --line: var(--cobalt); --text-2: var(--ink-2); --em: var(--cobalt);
  background: var(--bg); color: var(--ink);
}
.field--pistachio { --bg: var(--pistachio); }
.field--paper { --bg: var(--paper); }
.field--cobalt { --bg: var(--cobalt); --line: var(--pistachio); --text-2: rgba(255,255,255,.84); --em: var(--pistachio); color: #fff; }
.field--ink { --bg: var(--ink); --line: var(--pistachio); --text-2: rgba(255,255,255,.78); --em: var(--pistachio); color: #fff; }

/* ---------- 5. Type ---------- */
.display { font-size: var(--t-display); line-height: .94; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: var(--t-h2); line-height: .98; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
/* The stronger italic: narrower, heavier, tighter. Emphasis is where the type moves. */
.display em, .h2 em, .statement em { font-style: italic; font-weight: 700; font-stretch: 84%; letter-spacing: -0.05em; color: var(--em); }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--text-2, var(--ink-2)); max-width: 36ch; }
.small { font-size: var(--t-small); color: var(--text-2, var(--muted)); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--line, var(--cobalt)); }
.statement { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }

/* ---------- 6. Button: every action ends in an "o" ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 8px 0 26px;
  border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.btn-o { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pistachio); color: var(--ink); transition: transform var(--med) var(--ease); }
.btn-o svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn-o { transform: translateX(4px) rotate(-12deg); }
.btn:hover { background: #0F1528; }
.btn--light { background: var(--pistachio); color: var(--ink); }
.btn--light .btn-o { background: var(--cobalt); color: #fff; }
.btn--light:hover { background: #F0F8CF; }
.btn--sm { height: 44px; padding: 0 6px 0 18px; font-size: 15px; gap: 10px; }
.btn--sm .btn-o { width: 32px; height: 32px; }
.btn--sm .btn-o svg { width: 15px; height: 15px; }

/* Text link: the underline is a short stroke of the line */
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--line, var(--cobalt)), var(--line, var(--cobalt))) 0 100% / 28px 4px no-repeat; transition: background-size var(--med) var(--ease); }
.link:hover { background-size: 100% 4px; }

/* ---------- 7. Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,248,242,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-inner { display: flex; align-items: center; gap: var(--s6); height: 76px; }
.nav-logo img { height: 40px; width: auto; }
.nav.is-top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-links { display: flex; gap: var(--s6); margin-left: auto; }
.nav-links a { font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

/* ---------- 8. Node: the bold "o" ---------- */
.node-o { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; border: var(--stroke) solid var(--line, var(--cobalt)); background: var(--bg, var(--chalk)); position: relative; z-index: 1; }
.node-o--s { width: 28px; height: 28px; border-width: 8px; }
.node-o--xl { width: 64px; height: 64px; }

/* ---------- 9. Chip: where visitors come from ---------- */
.chip { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 0 rgba(24,33,58,.06), 0 14px 28px -18px rgba(24,33,58,.45); position: relative; z-index: 1; }
.chip img, .chip-ic { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.chip-ic { display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt); }
.chip-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chip-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chalk); flex: none; }
.chip .chip-logo img { width: 24px; height: 24px; border-radius: 0; object-fit: contain; }
.chip-txt { display: grid; line-height: 1.2; }
.chip-txt small { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* ---------- 10. URL: the one link ---------- */
.url { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 68px; padding: 10px 26px; border-radius: 999px; background: var(--ink); color: #fff; position: relative; z-index: 1; box-shadow: 0 20px 40px -24px rgba(24,33,58,.7); }
.url-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pistachio); }
.url-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.url-v { font-size: 17px; font-weight: 600; white-space: nowrap; }

/* ---------- 11. Version: one version of a page ---------- */
.ver { position: relative; z-index: 1; background: var(--paper); color: var(--ink); border-radius: var(--r-m); padding: 8px; box-shadow: 0 1px 0 rgba(24,33,58,.06), 0 18px 36px -24px rgba(24,33,58,.5); }
.ver { container-type: inline-size; }
.ver-t { display: block; padding: 10px 6px 2px; font-size: 16px; font-weight: 600; line-height: 1.25; }
.ver-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 4px; min-height: 34px; }
.ver-pct { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--cobalt); font-variant-numeric: tabular-nums; }

/* ---------- 11b. Page: a version, drawn as a page ---------- */
/* No photos: photos read as products, not pages. Every Page has the same address bar.
   The layout, headline and button inside change. Sized in em, so one font-size scales it. */
.pv { position: relative; z-index: 1; display: flex; flex-direction: column; width: 28.2em; height: 33em; overflow: hidden; font-size: 10px; background: var(--paper); color: var(--ink); border-radius: 1.6em; box-shadow: 0 1px 0 rgba(24,33,58,.06), 0 18px 36px -24px rgba(24,33,58,.5); }
.pv-bar { display: flex; align-items: center; gap: .5em; flex: none; height: 3em; padding: 0 1.2em; border-bottom: 1px solid var(--rule); }
.pv-bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--rule); flex: none; }
.pv-bar span { min-width: 0; margin-left: .6em; font-size: 1.1em; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-body { display: grid; align-content: start; gap: 1em; padding: 1em; }
.pv-h { font-size: 1.8em; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.pv-btn { display: inline-flex; align-items: center; height: 2.3em; padding: 0 1.05em; border-radius: 999px; background: var(--ink); color: #fff; font-size: 1.05em; font-weight: 600; white-space: nowrap; }
/* Page sections: a hero, text lines, a product grid, a quote, a band */
.wf-hero { display: grid; align-content: end; justify-items: start; gap: 1em; min-height: 11em; padding: 1.4em; border-radius: 1em; background: rgba(24,33,58,.05); }
.wf-hero--split { grid-template-columns: minmax(0, 1fr) 38%; align-items: center; align-content: stretch; }
.wf-hero--split > div { display: grid; justify-items: start; gap: 1em; }
.wf-media { align-self: stretch; justify-self: stretch; min-height: 8em; border-radius: .8em; background: var(--pistachio); }
.wf-hero--cobalt { background: var(--cobalt); color: #fff; }
.wf-hero--cobalt .pv-btn { background: #fff; color: var(--ink); }
.wf-hero--ink { background: var(--ink); color: var(--pistachio); }
.wf-hero--ink .pv-btn { background: var(--pistachio); color: var(--ink); }
.wf-hero--plain { min-height: 0; padding: 1em .4em .6em; background: none; }
.wf-hero--plain .pv-btn { background: var(--cobalt); }
.wf-k { display: block; width: 3em; height: .5em; border-radius: 999px; background: var(--cobalt); }
.wf-lines { display: grid; gap: .6em; padding: .2em .4em; }
.wf-lines i { display: block; height: .7em; border-radius: 999px; background: rgba(24,33,58,.1); }
.wf-lines i:nth-child(2) { width: 82%; }
.wf-lines i:nth-child(3) { width: 58%; }
.wf-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .7em; }
.wf-grid i { display: block; aspect-ratio: 1; border-radius: .8em; background: rgba(24,33,58,.07); }
.wf-grid--2 { --n: 2; }
.wf-grid--2 i { aspect-ratio: 4 / 3; }
.wf-quote { display: flex; align-items: center; gap: .9em; padding: 1em; border: 1px solid var(--rule); border-radius: 1em; }
.wf-quote b { flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--pistachio); }
.wf-quote .wf-lines { flex: 1; padding: 0; }
.wf-band { height: 4em; border-radius: 1em; background: var(--pistachio); }
/* A Page with its audience underneath */
.pv-fig { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; }
.pv-for { font-size: 14px; font-weight: 600; text-align: center; }
/* A small Page inside a version card */
.ver .pv { width: auto; height: 21em; font-size: calc(100cqi / 28.2); border-radius: 1em; box-shadow: none; border: 1px solid var(--rule); }

/* ---------- 12. Pill: version status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.pill--best { background: var(--cobalt); color: #fff; }
.pill--rising { background: var(--pistachio); color: var(--ink); }
.pill--new { background: var(--ink); color: #fff; }
.pill--new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* ---------- 13. The line (connector layer) ---------- */
[data-flow-scope] { position: relative; }
.flow-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.flow-path { fill: none; stroke: var(--cobalt); stroke-width: var(--stroke); stroke-linecap: round; }
.flow-path--alt { stroke: var(--pistachio); }
.flow-seg .flow-path { transition: stroke-dashoffset var(--slow) var(--ease); }

/* Ribbons inside diagrams */
.ribbon { fill: none; stroke: var(--line); stroke-width: var(--stroke-ribbon); stroke-linecap: round; transition: stroke-width 1.8s var(--ease); }

/* ---------- 14. Fan: many channels -> one URL -> a page for each audience ---------- */
.fan { --fan: col; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 120px auto 120px auto; justify-items: center; }
.fan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.fan-col { position: relative; z-index: 1; }
.fan-src { grid-row: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fan-mid { grid-row: 3; position: relative; z-index: 1; }
.fan-ver { grid-row: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; container-type: inline-size; }
.fan-ver .pv { width: auto; font-size: calc((100cqi - 72px) / 4 / 28.2); }
.fan-exit { grid-row: 6; display: block; width: 1px; height: 1px; }
.chip-glyph { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 15. Loop: the agent's cycle ---------- */
.loop { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 0 auto; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-svg circle { fill: none; stroke: var(--line); stroke-width: var(--stroke); vector-effect: non-scaling-stroke; }
.loop-step { position: absolute; left: calc(50% + cos(var(--a)) * 34%); top: calc(50% + sin(var(--a)) * 34%); width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; }
.loop-step .node-o { position: absolute; left: -14px; top: -14px; transition: transform var(--fast) var(--ease), background-color var(--fast); }
.loop-step b { position: absolute; font-size: 16px; font-weight: 600; white-space: nowrap; opacity: .72; transition: opacity var(--fast); }
.loop-step[data-side="top"] b { left: 0; bottom: 22px; transform: translateX(-50%); }
.loop-step[data-side="left"] b { right: 26px; top: 0; transform: translateY(-50%); }
.loop-step[data-side="right"] b { left: 26px; top: 0; transform: translateY(-50%); }
.loop-step[data-side="bottom"] b { left: 0; top: 22px; transform: translateX(-50%); }
.loop-step.is-on .node-o { background: var(--line); transform: scale(1.18); }
.loop-step.is-on b, .loop-step:hover b { opacity: 1; }
.loop-center { position: absolute; inset: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.loop-name { font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.loop-line { font-size: 15px; line-height: 1.35; color: var(--text-2); max-width: 15ch; }

/* ---------- 16. Switch: how far the agent goes ---------- */
.switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.field--paper .switch, .field--pistachio .switch, .switch--light { background: rgba(24,33,58,.07); }
.switch button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: 15px; font-weight: 600; cursor: pointer; opacity: .8; transition: background-color var(--fast), opacity var(--fast); }
.switch button:hover { opacity: 1; }
.switch button[aria-checked="true"] { background: var(--line); color: var(--ink); opacity: 1; }
.field--paper .switch button[aria-checked="true"], .field--pistachio .switch button[aria-checked="true"] { color: #fff; }
.switch-desc { margin-top: var(--s3); font-size: 15.5px; color: var(--text-2); min-height: 3em; max-width: 42ch; }

/* ---------- 18. Steps: the line runs through them ---------- */
.steps { position: relative; }
.step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s5); padding-bottom: var(--s7); }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::after { content: ""; position: absolute; left: calc(18px - var(--stroke) / 2); top: 18px; width: var(--stroke); height: 100%; background: var(--line); }
.step .h3 { padding-top: 4px; }
.step p { margin-top: 4px; color: var(--text-2); }

/* ---------- 19. End: the line arrives ---------- */
.end { display: flex; align-items: center; gap: var(--s5); }

/* ---------- 20. Footer ---------- */
.foot { padding: var(--s8) 0 var(--s7); }
.foot-inner { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.foot img { height: 28px; width: auto; }
.foot-links { display: flex; gap: var(--s5); margin-left: auto; }
.foot a, .foot p { font-size: 14.5px; color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

[hidden] { display: none !important; }

/* ---------- 23. Source note: which version you're seeing, and why ---------- */
.src-note { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 16px 7px 13px; border-radius: 999px; background: rgba(24,33,58,.07); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.src-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.field--cobalt .src-note, .field--ink .src-note { background: rgba(255,255,255,.13); color: #fff; }

/* ---------- 24. Live hero: one URL, a version for each source ---------- */
.field:has(> .wrap > .hero) { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: end; gap: var(--s6); }
.hero-h { max-width: 16ch; font-size: clamp(46px, 6.9vw, 100px); }
.hero .lead { max-width: 40ch; text-wrap: pretty; }
.hero[data-layout="center"] .lead { text-wrap: balance; }
.hero-q { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); }
.hero-co { display: inline-flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.hero-co img { height: 32px; width: auto; }
.hero-co b { font-weight: 500; opacity: .55; }
.hero[data-layout="center"] { justify-items: center; text-align: center; }
.hero[data-layout="center"] .hero-h { max-width: 18ch; }
.hero[data-layout="split"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr auto; column-gap: var(--s8); }
.hero[data-layout="split"] .src-note { grid-column: 1 / -1; }
.hero[data-layout="split"] .hero-h { grid-column: 1; grid-row: 2 / span 2; max-width: 12ch; font-size: clamp(44px, 6.2vw, 90px); }
.hero[data-layout="split"] .lead { grid-column: 2; grid-row: 2; align-self: end; }
.hero[data-layout="split"] .actions { grid-column: 2; grid-row: 3; }
.hero[data-layout="answer"] { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s8); }
.hero[data-layout="answer"] .src-note, .hero[data-layout="answer"] .hero-q, .hero[data-layout="answer"] .hero-h { grid-column: 1 / -1; }
.hero[data-layout="answer"] .hero-h { max-width: 12ch; font-size: clamp(52px, 8vw, 116px); }
.hero[data-layout="answer"] .actions { justify-self: end; }
/* The switch sits on top, like this page's own address bar, so it never moves when the version below changes. */
.hero-try { display: flex; margin-bottom: var(--s7); }
/* One smooth move between versions: parts glide to their new places, text crossfades. No loops. */
.hero .src-note { view-transition-name: hero-note; }
.hero .hero-q { view-transition-name: hero-q; }
.hero .hero-co { view-transition-name: hero-co; }
.hero .hero-h { view-transition-name: hero-h; }
.hero .lead { view-transition-name: hero-lead; }
.hero .actions { view-transition-name: hero-act; }
::view-transition-group(*) { animation-duration: var(--med); animation-timing-function: var(--ease); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(*) { animation-duration: 220ms; }

/* ---------- 25. Source switch: flip the source, watch the page reshape ---------- */
.src-switch { position: relative; z-index: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -24px rgba(24,33,58,.6); }
.src-url { display: grid; gap: 2px; padding: 4px 22px 4px 18px; margin-right: 4px; border-right: 1px solid rgba(255,255,255,.16); }
.src-url .url-v { font-size: 17px; }
.src-switch button { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 6px; border: 0; border-radius: 999px; background: none; color: #fff; font-size: 15.5px; font-weight: 600; white-space: nowrap; cursor: pointer; opacity: .82; transition: background-color var(--fast), color var(--fast), opacity var(--fast); }
.src-switch button:hover { opacity: 1; background: rgba(255,255,255,.08); }
.src-switch button[aria-checked="true"] { background: var(--pistachio); color: var(--ink); opacity: 1; }
.src-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; }
.src-logo img { width: 22px; height: 22px; object-fit: contain; }
.src-logo svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field--ink .src-switch { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* ---------- 26. Brand page: a version drawn in the store's own style ---------- */
.bp {
  --bp-bg: #fff; --bp-ink: var(--ink); --bp-accent: var(--ink); --bp-on-accent: #fff;
  --bp-hfont: var(--font); --bp-bfont: var(--font); --bp-hweight: 600; --bp-case: none; --bp-track: -0.02em;
  --bp-r: .8em; --bp-btn-r: 999px; --bp-btn-case: none; --bp-btn-track: 0;
  position: relative; z-index: 1; display: flex; flex-direction: column; width: 30em; height: 38em; overflow: hidden;
  font-size: 10px; line-height: 1.3; background: var(--bp-bg); color: var(--bp-ink); font-family: var(--bp-bfont);
  border-radius: 1.6em; box-shadow: 0 1px 0 rgba(24,33,58,.06), 0 18px 36px -24px rgba(24,33,58,.5);
}
.bp .pv-bar { background: rgba(255,255,255,.6); border-bottom-color: rgba(0,0,0,.06); font-family: var(--font); }
.bp-nav { display: flex; align-items: center; gap: 1.4em; flex: none; padding: 1.3em 1.8em 1.1em; }
.bp-logo { margin-right: auto; font-family: var(--bp-hfont); font-weight: var(--bp-hweight); font-size: 1.8em; line-height: 1; letter-spacing: var(--bp-track); text-transform: var(--bp-case); white-space: nowrap; }
.bp-nav span { font-size: 1.1em; opacity: .7; }
.bp-hero { position: relative; flex: 1; min-height: 0; display: grid; gap: 1.4em; padding: 0 1.8em 1.8em; }
.bp-img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--bp-r); }
.bp-copy { display: grid; justify-items: start; align-content: end; gap: 1.1em; min-width: 0; }
.bp-k { font-size: 1.15em; font-weight: 500; opacity: .72; }
.bp-h { font-family: var(--bp-hfont); font-weight: var(--bp-hweight); font-size: 3em; line-height: 1; letter-spacing: var(--bp-track); text-transform: var(--bp-case); text-wrap: balance; }
.bp-btn { display: inline-flex; align-items: center; height: 3.2em; padding: 0 1.5em; border-radius: var(--bp-btn-r); background: var(--bp-accent); color: var(--bp-on-accent); font-size: 1.15em; font-weight: 600; white-space: nowrap; letter-spacing: var(--bp-btn-track); text-transform: var(--bp-btn-case); }
.bp-foot { display: flex; justify-content: space-between; gap: 1em; flex: none; padding: 1.1em 1.8em 1.3em; border-top: 1px solid rgba(0,0,0,.08); font-size: 1.05em; opacity: .75; }
.bp-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bp-hero--stack { grid-template-rows: minmax(0, 1fr) auto; }
.bp-hero--over .bp-copy { position: absolute; left: 3em; right: 3em; bottom: 3em; padding: 1.6em; border-radius: var(--bp-r); background: var(--bp-bg); }
/* Three example stores, three identities */
.bp--hollis { --bp-bg: #F4EDE3; --bp-ink: #2B211B; --bp-accent: #B4532A; --bp-on-accent: #FFF7EE; --bp-hfont: "Instrument Serif", Georgia, serif; --bp-hweight: 400; --bp-track: -0.01em; --bp-r: .3em; --bp-btn-r: .3em; }
.bp--hollis .bp-h { font-size: 3.5em; }
.bp--velia { --bp-bg: #F5ECE8; --bp-ink: #3A2532; --bp-accent: #3A2532; --bp-on-accent: #F5ECE8; --bp-hfont: "Jost", sans-serif; --bp-bfont: "Jost", sans-serif; --bp-hweight: 300; --bp-case: lowercase; --bp-track: -0.01em; --bp-r: 1.8em; }
.bp--velia .bp-btn { font-weight: 500; }
.bp--wayfell { --bp-bg: #ECE8DF; --bp-ink: #1F2D25; --bp-accent: #E8622A; --bp-on-accent: #1F2D25; --bp-hfont: "Oswald", Impact, sans-serif; --bp-hweight: 600; --bp-case: uppercase; --bp-track: .005em; --bp-r: 0; --bp-btn-r: 0; --bp-btn-case: uppercase; --bp-btn-track: .06em; }
.bp--wayfell .bp-h { font-size: 3.3em; line-height: .96; }
.bp--wayfell .bp-hero--split .bp-h { font-size: 2.7em; }
.bp--wayfell .bp-btn { font-family: "Oswald", sans-serif; font-weight: 600; }
/* Caption: who sees this version */
.bp-fig { display: grid; gap: 14px; justify-items: start; }
.bp-for { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.bp-for img, .bp-for svg { width: 20px; height: 20px; flex: none; object-fit: contain; }
.bp-for svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bp-for small { display: block; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.fan-ver--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fan-ver--3 .bp { width: 100%; font-size: calc((100cqi - 64px) / 3 / 30); }
.ver .bp { width: 100%; height: 34em; font-size: calc(100cqi / 30); box-shadow: none; border-radius: calc(var(--r-m) - 8px); }
.fan .url { view-transition-name: brand-url; }
.fan-ver--3 { view-transition-name: brand-pages; }

.h2--narrow { max-width: 12ch; }

/* ---------- 27. Brand tabs: one switch, three stores ---------- */
.brand-tabs button[data-brand="hollis"] { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 19px; }
.brand-tabs button[data-brand="velia"] { font-family: "Jost", sans-serif; font-weight: 400; font-size: 17px; }
.brand-tabs button[data-brand="wayfell"] { font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .06em; font-size: 15px; }

/* ---------- 28. Waypoint: an invisible bend in the line ---------- */
/* Sits in the field's left margin, halfway between the field edge and the content. */
.flow-wp { position: absolute; display: block; width: 1px; height: 1px; left: calc(((100% - min(100%, var(--wrap) + var(--pad) * 2)) / 2 + var(--pad)) / 2); pointer-events: none; }
.flow-wp--r { left: auto; right: calc(((100% - min(100%, var(--wrap) + var(--pad) * 2)) / 2 + var(--pad)) / 2); }
.ver .bp-foot { display: none; }

/* ---------- 29. Signature: the wordmark writes itself, then becomes the line ---------- */
.js .sig img { animation: flo-sign 900ms var(--ease) 150ms both; }
@keyframes flo-sign {
  from { clip-path: polygon(-30% -10%, -30% -10%, -45% 110%, -45% 110%); }
  to { clip-path: polygon(-30% -10%, 145% -10%, 130% 110%, -45% 110%); }
}

@media (max-width: 980px) {
  .hero[data-layout="split"], .hero[data-layout="answer"] { grid-template-columns: minmax(0, 1fr); }
  .hero[data-layout="split"] .hero-h, .hero[data-layout="split"] .lead, .hero[data-layout="split"] .actions { grid-column: 1; grid-row: auto; }
  .hero[data-layout="answer"] .actions { justify-self: start; }
  .fan-ver--3 { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 420px; margin: 0 auto; }
  .fan-ver--3 .bp { font-size: calc(100cqi / 30); }
  .brand-tabs { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .src-switch { border-radius: 28px; }
  .src-url { width: 100%; margin: 0 0 4px; padding: 8px 14px 10px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .src-switch button { height: 46px; padding: 0 14px 0 4px; font-size: 14.5px; gap: 8px; }
  .src-logo { width: 36px; height: 36px; }
  .src-note { font-size: 14px; border-radius: 20px; align-items: flex-start; }
  .src-note i { margin-top: 6px; }
  .hero-co { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sig img { animation: none; }
}

/* ---------- 30. Match: every version finds its audience ---------- */
/* Audiences on the left, versions of the same page on the right. Ribbon width is the share of an
   audience each version gets. It starts even, then sorts itself out while the agent adds versions. */
.match { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); row-gap: var(--s6); align-items: center; }
.match-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.match-k { grid-column: 1; grid-row: 1; align-self: end; font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.match-top { grid-column: 3; grid-row: 1; justify-self: start; }
.match-top .url { min-height: 60px; padding: 8px 24px; }
.match-top .url-v { font-size: 15px; }
.match-aud { grid-column: 1; grid-row: 2; display: grid; gap: 14px; justify-items: start; position: relative; z-index: 1; }
.match-aud .chip { height: 52px; }
.match-ver { grid-column: 3; grid-row: 2; display: grid; gap: 12px; position: relative; z-index: 1; }
.match-rb { transition: stroke-width 1.2s var(--ease), opacity 1.2s var(--ease); }
.mv { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 66px; padding: 6px 14px 6px 6px; border: 1.5px solid transparent; border-radius: 14px; background: var(--bp-bg); color: var(--bp-ink); box-shadow: 0 1px 0 rgba(24,33,58,.06), 0 14px 28px -22px rgba(24,33,58,.55); transition: background var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease); }
.mv > * { transition: opacity var(--med) var(--ease); }
.mv-img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; display: block; }
.mv-sw { width: 52px; height: 52px; border-radius: 9px; background: var(--bp-accent); color: var(--bp-on-accent); display: grid; place-items: center; font-family: var(--bp-hfont); font-size: 17px; }
.mv-txt { display: grid; gap: 1px; min-width: 0; }
.mv-k { font-size: 12px; font-weight: 600; color: var(--muted); }
.mv-h { font-family: var(--bp-hfont); font-weight: var(--bp-hweight, 400); font-size: 23px; line-height: 1.05; letter-spacing: var(--bp-track, 0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv .pill { opacity: 0; }
.mv.is-new .pill { opacity: 1; }
.mv.is-empty { background: transparent; box-shadow: none; border: 1.5px dashed #C9C5B8; }
.mv.is-empty > * { opacity: 0; }
.mv::after { content: "The agent's next version"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity var(--med) var(--ease); pointer-events: none; }
.mv.is-empty::after { opacity: 1; }
.match-foot { margin-top: var(--s6); font-size: var(--t-small); color: var(--muted); }

/* ---------- 31. Pace: ads keep improving, so should the page ---------- */
/* Two curves over the same three months, with no numbers on purpose. The thin one is ads improving on a
   page that stays as it was at launch. The thick one is the page's own line: ads and pages improving
   together. Every ad lands on a page, so the two multiply and the gap keeps widening. */
.pace { position: relative; padding-bottom: 36px; --pace-plot: .74; }
.pace-box { position: relative; height: clamp(300px, 30vw, 420px); }
.pace-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pace-in, .pace-out { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.pace-base { stroke: currentColor; stroke-opacity: .22; stroke-width: 1.5; }
.pace-ads { fill: none; stroke: currentColor; stroke-opacity: .62; stroke-width: 3; stroke-linecap: round; }
.pace-flo { fill: none; stroke: var(--line); stroke-width: var(--stroke); stroke-linecap: round; }
.pace-gap { fill: var(--line); fill-opacity: .22; }
.pace-dot { fill: var(--bg); stroke: var(--line); stroke-width: 4; }
.pace-x { position: absolute; top: calc(100% + 12px); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
.pace-x--r { transform: translateX(-100%); }
.pace-gap-k { position: absolute; transform: translate(-50%, -50%); font-size: 13px; font-weight: 650; color: var(--em); white-space: nowrap; }
.pace-labs { position: absolute; inset: 0 0 36px; pointer-events: none; }
.pace-lab { position: absolute; display: grid; gap: 2px; font-size: 16px; line-height: 1.2; }
.pace-lab b { font-weight: 650; }
.pace-lab small { font-size: 13px; color: var(--text-2); }
.pace-lab--flo { color: var(--em); }
.pace-lab--ads { transform: translateY(-50%); }
.pace-foot { margin-top: var(--s7); font-size: var(--t-small); color: var(--text-2); max-width: 64ch; }
/* Motion: both curves draw once, left to right, when the chart comes into view. Then it rests. */
.pace-ads, .pace-flo { transition: stroke-dashoffset 1.8s var(--ease); }
.pace-gap, .pace-dot, .pace-gap-k, .pace-lab { transition: opacity var(--med) var(--ease); }
.pace:not(.is-drawn) .pace-gap, .pace:not(.is-drawn) .pace-dot,
.pace:not(.is-drawn) .pace-gap-k, .pace:not(.is-drawn) .pace-lab { opacity: 0; }
.pace.is-drawn .pace-gap-k, .pace.is-drawn .pace-lab { transition-delay: 1.5s; }

/* ---------- 32. Notify: the one form, shaped like the button ---------- */
/* Same pill as the button, so leaving an email reads as the same action as "Book a demo".
   It still ends in an "o". Once you're on the list the pill turns ink and the o becomes a
   check. Errors are said in words: red stays a signal, never a warning color. */
.notify { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; width: min(100%, 540px); height: 68px; padding: 6px 6px 6px 26px; border-radius: 999px; background: var(--paper); box-shadow: 0 20px 40px -24px rgba(24,33,58,.35), inset 0 0 0 1px rgba(24,33,58,.08); transition: background-color var(--med) var(--ease), box-shadow var(--fast) var(--ease); }
.notify:focus-within { box-shadow: 0 20px 40px -24px rgba(24,33,58,.35), inset 0 0 0 2px var(--cobalt); }
.notify input[type="email"] { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; border: 0; padding: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); outline: none; }
.notify input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.notify > input, .notify > .btn { transition: opacity var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.notify .btn { flex: 0 0 auto; }
.notify-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.notify-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 6px 0 26px; font-size: 17px; font-weight: 600; color: #fff; opacity: 0; pointer-events: none; transition: opacity var(--med) var(--ease); }
.notify-done .btn-o { margin-left: auto; width: 56px; height: 56px; }
.notify-done .btn-o svg { width: 22px; height: 22px; }
.notify[data-state="sending"] .btn { opacity: .55; cursor: progress; }
.notify[data-state="error"] { box-shadow: 0 20px 40px -24px rgba(24,33,58,.35), inset 0 0 0 2px var(--ink); }
.notify[data-state="done"] { background: var(--ink); box-shadow: 0 20px 40px -24px rgba(24,33,58,.35); }
.notify[data-state="done"] > input, .notify[data-state="done"] > .btn { opacity: 0; pointer-events: none; }
.notify[data-state="done"] .notify-done { opacity: 1; }
.notify-msg { min-height: 1.5em; margin-top: var(--s3); font-size: var(--t-small); font-weight: 500; color: var(--text-2, var(--ink-2)); }
@media (max-width: 640px) {
  .notify { flex-wrap: wrap; height: auto; padding: 6px; border-radius: 34px; }
  .notify input[type="email"] { flex-basis: 100%; height: 52px; padding: 0 20px; }
  .notify .btn { width: 100%; justify-content: space-between; }
  .notify-done { padding: 0 6px 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .notify, .notify-done, .notify > input, .notify > .btn { transition: none; }
}

/* ---------- 21. Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 22. Responsive ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: var(--s7); }
  .split--flip > :first-child { order: 0; }
  [data-flow-scope] { --flow: off; }
  .fan { grid-template-rows: auto 72px auto 72px auto; }
  .fan .url { padding: 10px 18px; min-height: 60px; }
  .fan .url-v { font-size: 13px; }
  .fan-src { flex-wrap: nowrap; gap: 8px; }
  .fan-src .chip { height: auto; padding: 4px; gap: 0; }
  .fan-src .chip-n { display: none; }
  .fan-ver:not(.fan-ver--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  #brandFan { grid-template-rows: auto 28px auto 28px auto; }
  #brandFan .fan-svg { display: none; }
  .fan-ver .pv { font-size: calc((100cqi - 12px) / 2 / 28.2); }
  .pv-for { font-size: 13px; }
  .match { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 5fr); }
  .match-top { grid-column: 1 / -1; justify-self: end; }
  .match-k { display: none; }
  .pace { --pace-plot: .72; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-inner .btn { margin-left: auto; }
  .loop-step b { font-size: 14px; }
  .fan-src { gap: 5px; }
  .fan-src .chip { padding: 3px; }
  .fan-src .chip-logo { width: 40px; height: 40px; }
  .pv-bar span { display: none; }
  .loop-line { font-size: 13px; }
  .end { flex-direction: column; align-items: flex-start; }
  .foot-links { margin-left: 0; }
  .match { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.05fr); row-gap: var(--s5); }
  .match-top { justify-self: stretch; }
  .match-top .url { width: 100%; padding: 8px 18px; }
  .match-top .url-v { font-size: 12.5px; white-space: normal; }
  .match-aud { gap: 10px; }
  .match-aud .chip { height: 54px; width: 100%; padding: 4px 6px 4px 4px; gap: 6px; font-size: 12px; line-height: 1.15; white-space: normal; border-radius: 14px; }
  .match-aud .chip-logo, .match-aud .chip-ic { width: 30px; height: 30px; }
  .match-aud .chip .chip-logo img { width: 17px; height: 17px; }
  .match-aud .chip-ic svg { width: 15px; height: 15px; }
  .match-aud .chip-txt small { font-size: 10.5px; }
  .match-ver { gap: 10px; }
  .mv { height: 54px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 4px 8px 4px 4px; border-radius: 12px; }
  .mv-img, .mv-sw { width: 38px; height: 38px; border-radius: 7px; font-size: 13px; }
  .mv-k { font-size: 10.5px; }
  .mv-h { font-size: 15.5px; white-space: normal; }
  .mv .pill { position: absolute; top: -13px; right: -4px; height: 20px; font-size: 10.5px; padding: 0 8px; }
  .mv::after { font-size: 11px; text-align: center; padding: 0 6px; }
  .pace { --pace-plot: 1; padding-bottom: 0; }
  .pace-box { height: 230px; margin-bottom: 40px; }
  .pace-gap-k { display: none; }
  .pace-flo { stroke-width: 8px; }
  .pace-dot { r: 5.5px; stroke-width: 3px; }
  .pace-labs { position: static; display: grid; gap: 14px; }
  .pace-lab { position: relative; left: auto !important; top: auto !important; bottom: auto !important; transform: none; padding-left: 36px; font-size: 15px; }
  .pace-lab::before { content: ""; position: absolute; left: 0; top: 7px; width: 24px; border-radius: 4px; background: currentColor; }
  .pace-lab--flo::before { height: 8px; background: var(--line); }
  .pace-lab--ads::before { height: 3px; top: 9px; opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}