/* GENV public site.
 *
 * One stylesheet, no framework, no build step beyond copying it. The
 * composition follows the owner's 26 September 2026 reference: a floating
 * white navigation, an open sky with a very large centred heading, a framed
 * product screen resting on a meadow, airy rounded cards in white, pale
 * blue and navy, and a scenic footer. Every word, capture and the artwork
 * (assets/scene/README.md) are GENV's own.
 *
 * The served policy is `style-src 'self'`: nothing here may be moved inline.
 */

:root {
  --navy: #0A2540; --navy-2: #173B5F; --navy-3: #25507A;
  --teal: #00D4B2; --teal-deep: #00786C; --teal-ink: #005E55; --teal-50: #E3FAF5;
  --ink: #0A2540; --muted: #4A5F74; --soft-ink: #5E7185;
  --sky-25: #F7FBFE; --sky-50: #EFF6FC; --sky-100: #E1EEF9; --sky-200: #CCE1F3; --sky-300: #A9CBEA;
  --line: #E1E8EF; --line-2: #D3DDE7; --white: #FFFFFF;
  --warn: #7A4E00; --warn-bg: #FFF3D6; --ok: #0C6A4C; --ok-bg: #DCF7EE;
  --focus: #0062D1;
  --r-sm: 12px; --r: 20px; --r-lg: 28px; --r-xl: 36px;
  --gutter: 24px;
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, .05), 0 4px 14px -4px rgba(10, 37, 64, .08);
  --shadow: 0 1px 2px rgba(10, 37, 64, .05), 0 14px 36px -12px rgba(10, 37, 64, .18);
  --shadow-lg: 0 2px 6px rgba(10, 37, 64, .06), 0 36px 80px -24px rgba(10, 37, 64, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* **No web font, deliberately.** Shipping a font costs a first-time visitor
   more than the typeface is worth here; the system stack paints on the
   first frame with no request. The application keeps its brand face. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--white); color: var(--ink); font-family: var(--font);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
picture { display: block; }
a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 16px; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 650; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 18px; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.012em; margin-bottom: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--sky-50); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-badge { width: 32px; height: 32px; padding: 0; border-radius: 0; background: none;
  color: var(--navy); margin-bottom: 20px; display: block; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: 12px; font-weight: 650; }
.skip:focus { left: 16px; color: #fff; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row.mid { justify-content: center; }

/* ------------------------------------------------------------ buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; border-radius: 999px; font-weight: 650; font-size: 16px; text-decoration: none;
  white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn-primary { background: var(--navy); color: #fff; padding: 6px 6px 6px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 4px rgba(10, 37, 64, .08), 0 10px 24px -8px rgba(10, 37, 64, .55); }
.btn-primary:hover { color: #fff; background: var(--navy-2); transform: translateY(-1px); }
.dot-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: var(--navy);
  display: grid; place-items: center; transition: transform .2s var(--ease); }
.dot-arrow .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.btn-primary:hover .dot-arrow { transform: translateX(2px); }
.btn-secondary { background: var(--white); color: var(--navy); padding: 0 26px; border: 1px solid var(--line-2);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), var(--shadow-sm); }
.btn-secondary:hover { color: var(--navy); background: var(--sky-25); transform: translateY(-1px); }
.btn-small { min-height: 44px; font-size: 15px; padding-left: 18px; gap: 10px; }
.btn-small .dot-arrow { width: 32px; height: 32px; }

/* ------------------------------------------------------------ header */

.top { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding: 0 16px; pointer-events: none; }
.bar { pointer-events: auto; position: relative; max-width: 1120px; margin: 0 auto; display: flex;
  align-items: center; gap: 16px; min-height: 64px; padding: 8px 8px 8px 20px; background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(10, 37, 64, .10); border-radius: 20px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 0 0 6px rgba(10, 37, 64, .06), 0 14px 34px -14px rgba(10, 37, 64, .30);
  transition: box-shadow .25s var(--ease); }
@supports (backdrop-filter: blur(8px)) { .bar { background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px) saturate(1.4); } }
.scrolled .bar { box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), 0 0 0 6px rgba(10, 37, 64, .08), 0 18px 40px -14px rgba(10, 37, 64, .36); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--navy);
  font-weight: 800; font-size: 23px; letter-spacing: -.03em; flex: none; }
.brand:hover { color: var(--navy); }
.brand .mark { width: 21px; height: 28px; }
.brand .dot { color: var(--teal-deep); }
nav.wide { flex: 1; display: flex; justify-content: center; gap: 2px; }
nav.wide a { padding: 9px 14px; border-radius: 12px; text-decoration: none; color: var(--muted);
  font-weight: 560; font-size: 15px; }
nav.wide a:hover, nav.wide a[aria-current] { color: var(--navy); background: var(--sky-50); }
.acts { display: flex; align-items: center; gap: 6px; flex: none; }
.signin { padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15px; }
.signin:hover { background: var(--sky-50); color: var(--navy); }

.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.bars { width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: transform .2s, box-shadow .2s; }
.menu[open] .bars { box-shadow: none; transform: rotate(45deg); }
.menu[open] .bars::after { content: ''; position: absolute; inset: 0; background: currentColor; border-radius: 2px; transform: rotate(90deg); }
.menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Bounded by the screen, so on a short or landscape phone the last action
   scrolls into reach instead of falling below the fold. */
.menu-panel { position: absolute; left: 0; right: 0; top: calc(100% + 12px); display: grid; gap: 2px; padding: 10px;
  max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); }
.menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px;
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: 17px; }
.menu-panel a:hover, .menu-panel a[aria-current] { background: var(--sky-50); }
.menu-panel .btn { justify-content: space-between; margin-top: 8px; color: #fff; padding-left: 20px; }
.menu-panel .btn:hover { background: var(--navy-2); }

/* ------------------------------------------------------------- scene */

.hero-scene, .scenic-scene, .connect-scene, .foot-scene { position: absolute; inset: 0; z-index: 0; }
.hero-scene img, .scenic-scene img, .connect-scene img, .foot-scene img {
  width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- home hero */

.hero { position: relative; overflow: hidden; text-align: center; padding: 136px 0 0; background: #B9D7F1; isolation: isolate; }
.hero .hero-scene img { object-position: 50% 100%; }
/* Lift the sky behind the heading, and fade the meadow into the page. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 42% at 50% 16%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; }
.hero-inner, .hero-preview { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px 7px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  color: var(--navy); font-size: 14px; font-weight: 650; box-shadow: var(--shadow-sm); }
.eyebrow .icon { width: 18px; height: 18px; color: var(--teal-deep); }
.hero h1 { font-size: clamp(42px, 6.6vw, 92px); line-height: 1; letter-spacing: -.05em; font-weight: 680;
  margin: 0 auto 22px; color: var(--navy); }
/* Two deliberate lines wherever they fit; a phone balances them itself. */
.hero h1 .line { display: block; }
.hero .lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: #20384F; max-width: 34em; margin: 0 auto 28px; font-weight: 450; }
.hero-actions { gap: 14px; }
.values { list-style: none; margin: 24px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.values li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1B334B; }
.values li + li::before { content: ''; width: 1px; height: 18px; background: rgba(10, 37, 64, .22); margin-right: 18px; }
.values .icon { width: 18px; height: 18px; color: var(--teal-deep); }
.beta-note { margin: 14px 0 0; font-size: 14px; }
.beta-note a { color: #1B334B; font-weight: 600; background: rgba(255, 255, 255, .6); padding: 6px 12px; border-radius: 999px; }
.beta-note a:hover { background: #fff; color: var(--navy); }
.hero-preview { max-width: 1128px; margin-top: 40px; padding-bottom: 150px; }

/* ------------------------------------------------------ product frame */

.frame { margin: 0; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px; padding: 8px; box-shadow: var(--shadow-lg); }
@supports (backdrop-filter: blur(8px)) { .frame { background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px); } }
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 6px 10px 10px; }
.frame-dots { width: 44px; height: 10px; flex: none;
  position: relative; }
.frame-dots::before { content: ''; position: absolute; left: 1px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: #F2A4A0; box-shadow: 17px 0 #F3D08C, 34px 0 #9AD9B8; }
.frame-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--soft-ink); }
.frame-body { border-radius: 14px; overflow: hidden; background: #F3F6FA; border: 1px solid rgba(10, 37, 64, .08); }
.frame-body img { width: 100%; }
@media (max-width: 600px) { .frame-hero .frame-body img { aspect-ratio: 390 / 760; } }
.frame figcaption { font-size: 13px; color: var(--soft-ink); padding: 10px 8px 2px; text-align: center; }
.frame-hero figcaption { color: #1B334B; }

/* -------------------------------------------------------------- sections */

section { padding: 104px 0; position: relative; }
section.tight { padding-top: 32px; }
section.soft { background: var(--sky-25); }
.label { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--sky-50);
  border: 1px solid var(--line); color: var(--navy-2); font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.lede { font-size: 19px; color: var(--muted); margin: 0 0 32px; max-width: 58ch; }
.center .lede, .section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 48px; }
.section-head.center { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.split-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px 64px; align-items: end; }
.split-head h2 { margin: 0; max-width: 15ch; }
.split-head p { color: var(--muted); font-size: 18px; }

/* ------------------------------------------------------------ bento */

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 32px; min-height: 360px;
  display: flex; flex-direction: column; gap: 24px; }
.tile h3 { font-size: 24px; letter-spacing: -.02em; }
.tile p { color: var(--muted); margin: 0 0 14px; }
.tile .more { font-weight: 650; font-size: 15px; color: var(--teal-ink); }
.tile-copy { position: relative; z-index: 1; }
.tile-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 28px; }
.tile-full { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; min-height: 0; align-items: center; }
.tile-full .setting-list { margin: 0; }
.tile-sky { background: #E8F3FC; }
.tile-white { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tile-navy { background: var(--navy);
  color: #fff; }
.tile-navy h3 { color: #fff; }
.tile-navy p { color: #C9D8E6; }
.tile-navy .more { color: #7FF0DC; }
.tile-navy .more:hover { color: #fff; }
.tile-navy .icon-badge { color: var(--teal); }
.tile-white .icon-badge { color: var(--teal-ink); }
.frame-tile { align-self: end; margin: 0 -56px -56px 0; padding: 6px; border-radius: 18px 0 0 0; background: rgba(255, 255, 255, .7); box-shadow: var(--shadow); }
.frame-tile .frame-bar { padding: 4px 8px 8px; }
.frame-tile .frame-body { border-radius: 12px 0 0 0; }
.mini-trail { list-style: none; margin: auto 0 0; padding: 18px 20px; display: grid; gap: 4px; border-radius: 18px;
  background: var(--sky-25); border: 1px solid var(--line); counter-reset: none; }
.mini-trail li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 6px 0; font-size: 15px; }
.mini-trail li::before { content: ''; grid-row: span 2; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  border: 2px solid var(--line-2); background: #fff; }
.mini-trail li.done::before { background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: inset 0 0 0 3px #fff; }
.mini-trail li.next::before { border-color: var(--navy); }
.mini-trail strong { color: var(--navy); font-weight: 650; }
.mini-trail span { color: var(--soft-ink); font-size: 13px; }
.hold-chips { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 10px; }
.hold-chips li { justify-self: start; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 15px; }
.hold-chips li:nth-child(2) { margin-left: 28px; }
.hold-chips li:nth-child(3) { margin-left: 56px; }
.hold-chips li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F3C35C; margin-right: 10px; vertical-align: 1px; }
.setting-list { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 10px; }
.setting-list li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .8);
  border-radius: 14px; font-weight: 600; font-size: 15px; color: var(--navy); box-shadow: var(--shadow-sm); }
.setting-list .icon { color: var(--teal-deep); }

/* ------------------------------------------------------- scenic overview */

.scenic { overflow: hidden; padding: 120px 0 110px; isolation: isolate; }
.scenic .scenic-scene img { object-position: 50% 82%; }
.scenic::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#fff 0%, rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, .1) 48%, rgba(255, 255, 255, 0) 70%, #fff 97%); }
.scenic .wrap { position: relative; z-index: 2; }
.frame-wide { max-width: 1080px; margin: 0 auto; }
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: -40px; position: relative; padding: 0 12px; }
.benefit { background: rgba(255, 255, 255, .94); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); border: 1px solid #fff; }
.benefit .icon-badge { width: 32px; height: 32px; padding: 0; margin-bottom: 16px; color: var(--teal-ink); }
.benefit p { color: var(--muted); margin: 0; font-size: 16px; }

/* ------------------------------------------------------------ journey */

.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.journey-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journey-steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 52px; border-top: 2px dashed var(--sky-300); }
.journey-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: flex-start; }
.journey-number { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line); }
.journey-step p { color: var(--muted); font-size: 16px; }
.journey-step .chip { margin-top: auto; }

.chip { display: inline-block; font-size: 13px; font-weight: 650; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.chip-available { background: var(--ok-bg); color: var(--ok); }
.chip-beta { background: var(--warn-bg); color: var(--warn); }
.chip-rehearsal { background: #E7F0FF; color: #1A4F94; }
.chip-later { background: #EDF1F5; color: var(--muted); }

/* --------------------------------------------------------- migration band */

.band { padding-top: 0; }
.band-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 64px 0 0 64px; display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: end;
  background: var(--navy); color: #fff; }
.band-copy { padding-bottom: 64px; }
.band-card h2 { color: #fff; }
.band-card .label { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); color: #DCEAF6; }
.band-card .bullets { color: #D5E3EF; margin-bottom: 28px; }
.frame-band { margin: 0 -2px -2px 0; border-radius: 22px 0 0 0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.frame-band .frame-label { color: #C8D8E6; }
.frame-band .frame-body { border-radius: 14px 0 0 0; }

/* ------------------------------------------------------ integrations panel */

.connect { padding-top: 0; }
.connect-panel { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #EEF4F9;
  padding: 80px 32px 230px; text-align: center; isolation: isolate; }
.connect-scene { top: auto; height: 300px;
  -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); }
.connect .connect-scene img { object-position: 50% 92%; }
.connect-copy, .logo-cloud { position: relative; z-index: 1; }
.connect-copy { max-width: 760px; margin: 0 auto 40px; }
.connect-copy .label { background: #fff; }
.logo-cloud { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logo-cloud li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; font-size: 15px; color: var(--navy); }
.provider-mark { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  background: #fff; border: 1px solid var(--line); overflow: hidden; }
.provider-mark img { width: 22px; height: 22px; object-fit: contain; }
.provider-initials { width: 100%; height: 100%; display: grid; place-items: center; background: var(--navy-2); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.provider-mark-large { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 18px; background: var(--sky-25); }
.provider-mark-large img { width: 36px; height: 36px; }
.provider-mark-large .provider-initials { font-size: 16px; border-radius: 17px; }

/* ---------------------------------------------------------------- faq */

.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ask-card { margin-top: 32px; padding: 28px; border-radius: var(--r-lg); background: #EAF4FC; }
.ask-card p { color: var(--muted); }
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: background .2s; }
.faq details[open] { background: var(--sky-25); border-color: var(--line-2); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 22px; font-weight: 650; font-size: 17px; color: var(--navy); border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq-sign { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--navy); position: relative; }
.faq-sign::before, .faq-sign::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: #fff; border-radius: 2px; }
.faq-sign::after { transform: rotate(90deg); transition: transform .2s var(--ease); }
.faq details[open] .faq-sign::after { transform: rotate(0); }
.faq-answer { padding: 0 22px 18px; color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- footer */

.foot { position: relative; overflow: hidden; padding: 140px 0 56px; background: #fff; isolation: isolate; }
.foot .foot-scene img { object-position: 50% 100%; }
.foot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#fff 0%, rgba(255, 255, 255, .78) 20%, rgba(255, 255, 255, .15) 48%, rgba(255, 255, 255, 0) 70%); }
.foot > .wrap { position: relative; z-index: 2; }
.foot-cta { text-align: center; max-width: 820px; margin-bottom: 150px; }
.foot-cta h2 { font-size: clamp(32px, 4.4vw, 56px); }
.foot-cta p { color: #243D55; font-size: 19px; margin-bottom: 28px; }
.foot-card { background: #fff; border-radius: var(--r-xl); padding: 52px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 40px 56px; }
.foot-brand p { color: var(--muted); margin-top: 14px; max-width: 26ch; }
.foot .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot .cols h2 { font-size: 15px; letter-spacing: 0; margin: 0 0 12px; }
.foot .cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot .cols a { color: var(--muted); text-decoration: none; font-size: 15px; display: inline-block; padding: 4px 0; }
.foot .cols a:hover { color: var(--navy); text-decoration: underline; }
.fine { grid-column: 1 / -1; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft-ink); }

/* ---------------------------------------------------------- inner hero */

.page-hero { position: relative; overflow: hidden; padding: 150px 0 88px; text-align: center; background: #C3DDF3; isolation: isolate; }
.page-hero .hero-scene img { object-position: 50% 12%; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 75%),
    linear-gradient(rgba(255, 255, 255, 0) 45%, #fff 100%); }
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.05em; font-weight: 680;
  max-width: 16ch; margin: 0 auto 22px; color: var(--navy); }
.page-hero h1 .kicker, .kicker { display: block; width: fit-content; margin: 0 auto 20px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--navy-2); font-size: 14px; font-weight: 650; letter-spacing: .01em; line-height: 1.4; }
.page-hero .lede { margin-left: auto; margin-right: auto; color: #243D55; font-size: clamp(18px, 1.6vw, 21px); }
.page-hero .row { margin-top: 4px; }
.beta-line { display: inline-flex; align-items: flex-start; gap: 10px; margin: 24px auto 0; max-width: 64ch; text-align: left;
  padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .86); border: 1px solid #fff; color: #243D55; font-size: 15px; box-shadow: var(--shadow-sm); }
.beta-line .icon { color: var(--teal-deep); margin-top: 2px; }
.crumbs { margin: 0 0 22px; }
.crumbs ol { list-style: none; margin: 0 auto; padding: 6px 14px; display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 8px; font-size: 14px; background: rgba(255, 255, 255, .82); border-radius: 999px; max-width: 100%; }
.crumbs li { color: var(--navy); font-weight: 600; }
.crumbs li + li::before { content: '/'; color: #6C8196; margin-right: 8px; font-weight: 400; }
.crumbs a { color: #0B4F48; font-weight: 500; }
.crumbs a:hover { color: var(--navy); }
.crumbs li[aria-current] { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jump { margin-top: 36px; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff;
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: var(--shadow-sm); }
.jump a:hover { background: var(--sky-25); }
.jump .icon { width: 18px; height: 18px; color: var(--teal-deep); }

/* ------------------------------------------------------------- cards */

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.card h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.card p { color: var(--muted); }
.card p:last-child, .card .bullets:last-child { margin-bottom: 0; }
a.card { display: block; color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); color: inherit; }
.card .key { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line); font-size: 15px; font-weight: 650; color: var(--navy-2); }
.go { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.go .icon { width: 18px; height: 18px; }
.family-hosting .icon-badge { color: var(--teal-ink); }
.family-registrar .icon-badge { color: #1B56A0; }
.family-payment .icon-badge { color: #9A4B10; }
.family-theme .icon-badge { color: #5540A0; }
.family-card:nth-child(1) { background: #EDF6FC; }
.family-card:nth-child(4) { background: var(--navy); border-color: transparent; }
.family-card:nth-child(4) h2 { color: #fff; }
.family-card:nth-child(4) p { color: #C9D8E6; }
.family-card:nth-child(4) .key { color: #fff; border-color: rgba(255, 255, 255, .16); }
.family-card:nth-child(4) .go { background: var(--teal); color: var(--navy); }
.family-card:nth-child(4) .icon-badge { color: var(--teal); }
.link-card h3 { font-size: 22px; }

.evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.evidence-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.evidence-card h3 { font-size: 19px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evidence-card p { color: var(--muted); font-size: 15px; margin: 0; }
.evidence-card .provider-mark { width: 44px; height: 44px; }
.evidence-card .provider-mark img { width: 28px; height: 28px; }

.providers { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.provider-card { display: flex; flex-direction: column; align-items: flex-start; }
.provider-card h2 { font-size: 22px; margin-bottom: 10px; }
.provider-card .tag { margin-bottom: 16px; }
.provider-card .key { margin-top: auto; width: 100%; }
.proof { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--teal-50);
  color: #174A44 !important; font-size: 15px; }
.proof .icon { color: var(--teal-ink); margin-top: 2px; }
.brand-card { text-align: left; }

.tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 650; letter-spacing: 0; padding: 4px 11px;
  border-radius: 999px; white-space: nowrap; vertical-align: middle; line-height: 1.4; }
.tag-built { background: var(--ok-bg); color: var(--ok); }
.tag-rehearsal { background: var(--warn-bg); color: var(--warn); }
.tag-practice { background: #EDF1F5; color: #3F5367; }
.tag-reads, .tag-sandbox { background: #DDF5EF; color: #0B5A4F; }
.tag-lab { background: #E7EEFF; color: #23458F; }

/* ---------------------------------------------------------- features */

.feature-row { padding: 96px 0; }
.feature-row.flip { background: var(--sky-25); }
.feature-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.feature-row.flip .feature-copy { order: 2; }
.feature-copy h2 { font-size: clamp(30px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.feature-short { font-size: 20px; color: var(--navy-2); font-weight: 520; }
.feature-copy p { color: var(--muted); }

/* ---------------------------------------------------------- security */

.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sec-card h2 { font-size: 24px; }
.sec-navy { grid-row: span 2; background: var(--navy); border-color: transparent; color: #D5E3EF; }
.sec-navy h2 { color: #fff; }
.sec-navy .icon-badge { color: var(--teal); }
.sec-navy strong { color: #fff; }
.sec-sky { background: #EDF6FC; }
.sec-card .bullets { color: var(--muted); }
.sec-navy .bullets { color: #D5E3EF; }
.after-note { margin-top: 32px; color: var(--muted); }

/* ------------------------------------------------------- get started */

.state-ok .icon-badge { color: var(--ok); }
.state-later .icon-badge { color: var(--muted); }
.stages-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.stages-intro { position: sticky; top: 120px; }
.stages { list-style: none; margin: 0; padding: 8px 28px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stage { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.stage:last-child { border-bottom: 0; }
.stage-number { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-100); color: var(--navy); font-weight: 700; font-size: 14px; }
.stage h3 { font-size: 17px; margin: 5px 0 4px; }
.stage p { margin: 0; color: var(--muted); font-size: 15px; }
.stage .chip { margin-top: 6px; }

/* ------------------------------------------------------------- prose */

.bullets { margin: 0 0 18px; padding-left: 22px; }
.bullets li { margin-bottom: 8px; padding-left: 4px; }
.bullets li::marker { color: var(--teal-deep); }
.notice { border-radius: 16px; padding: 18px 22px; margin: 24px 0; background: var(--sky-50); border: 1px solid var(--line); }
.notice p:last-child { margin: 0; }
.notice.warn { background: var(--warn-bg); border-color: #F1DBA6; color: #3E2A00; }
.scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
caption { text-align: left; padding: 16px 18px 6px; font-weight: 650; color: var(--navy); }
th, td { text-align: left; vertical-align: top; padding: 12px 18px; border-top: 1px solid var(--line); }
thead th { background: var(--sky-25); font-size: 13px; letter-spacing: .02em; color: var(--navy-2); }
tbody th { font-weight: 650; color: var(--navy); }
td { color: var(--muted); }
.reading-card h2 { font-size: 30px; margin-top: 40px; }

/* -------------------------------------------------------------- blog */

.chips-nav { margin-top: 28px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 18px; border-radius: 999px; background: #fff;
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: var(--shadow-sm); border: 1px solid #fff; }
.chips a:hover { border-color: var(--line-2); }
.chips a[aria-current] { background: var(--navy); color: #fff; }
.cover { position: relative; overflow: hidden; height: 176px; display: grid; place-items: center; color: #fff;
  background: #173C60; }
.cover-billing { background: #0A6D70; }
.cover-integrations { background: #2A66A8; }
.cover-migration { background: #0B4A59; }
.cover-platform { background: #263B6D; }
.cover-ring { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); left: -40px; bottom: -110px; }
.cover-ring.two { width: 320px; height: 320px; left: auto; right: -120px; top: -150px; bottom: auto; border-color: rgba(0, 212, 178, .4); }
.cover-icon { width: 64px; height: 64px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25); stroke-width: 1.6; position: relative; }
.cover-num { position: absolute; right: 18px; bottom: 8px; font-size: 44px; font-weight: 700; letter-spacing: -.05em; color: rgba(255, 255, 255, .35); }
.cover-large { height: 100%; min-height: 320px; }
.cover-large .cover-icon { width: 96px; height: 96px; padding: 22px; border-radius: 28px; }
.cover-large .cover-num { font-size: 96px; }
.cover-banner { height: 200px; border-radius: var(--r-lg); margin-bottom: 32px; }
.featured-post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden;
  border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 72px; }
.featured-copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
.featured-copy h2 { font-size: clamp(28px, 3vw, 42px); }
.featured-copy h2 a, .post h2 a, .post h3 a { color: var(--navy); text-decoration: none; }
.featured-copy h2 a::after, .post h2 a::after, .post h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.featured-copy h2 a:hover, .post h2 a:hover, .post h3 a:hover { text-decoration: underline; }
.featured-copy p { color: var(--muted); font-size: 18px; }
.post-category { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 10px; }
.when { font-size: 14px; color: var(--soft-ink); margin: 0; }
.directory-heading { font-size: clamp(26px, 3vw, 36px); margin-bottom: 28px; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.post:hover, .post:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.post h2, .post h3 { font-size: 21px; line-height: 1.28; letter-spacing: -.015em; margin-bottom: 10px; }
.post-body > p:not(.post-category):not(.when) { color: var(--muted); font-size: 16px; }
.post .when { margin-top: auto; }

.article-hero { padding-bottom: 64px; }
.article-hero h1 { font-size: clamp(34px, 4.6vw, 60px); max-width: 22ch; letter-spacing: -.04em; }
.meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 15px; color: #243D55; margin: 0 auto;
  width: fit-content; max-width: 100%; padding: 8px 18px; border-radius: 18px; background: rgba(255, 255, 255, .82); }
.meta span + span::before { content: '·'; margin-right: 18px; color: #6C8196; }
.article-layout { display: grid; grid-template-columns: 250px minmax(0, 740px); justify-content: center; gap: 64px; padding-top: 16px; padding-bottom: 96px; }
.toc-wrap { position: relative; }
.toc { position: sticky; top: 112px; padding: 20px 20px 16px; border-radius: var(--r); background: var(--sky-25); border: 1px solid var(--line);
  max-height: calc(100vh - 140px); overflow: auto; }
.toc-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-2); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4; }
.toc a:hover { color: var(--navy); background: #fff; }
.toc a.here { color: var(--navy); background: #fff; font-weight: 600; }
.article { font-size: 18px; line-height: 1.72; color: #1C3148; min-width: 0; }
.article > h2 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.025em; margin: 56px 0 16px; }
.article > h3 { font-size: 21px; margin: 32px 0 10px; }
.article .answer { padding: 24px 28px; border-radius: var(--r); background: #EAF4FC; border: 1px solid var(--line); margin-bottom: 40px; }
.article .answer h2 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 8px; }
.article .answer p { margin: 0; font-size: 19px; color: var(--navy); }
.article .faq details { background: #fff; }
.article .faq summary { font-size: 17px; }
.sources { margin-top: 56px; padding: 28px; border-radius: var(--r); background: var(--sky-25); border: 1px solid var(--line); font-size: 16px; }
.sources h2 { font-size: 24px; margin-bottom: 12px; }
.sources ol { padding-left: 22px; margin: 0 0 14px; }
.related h2 { margin-bottom: 28px; }
.related .center { margin-top: 36px; }

/* -------------------------------------------------------------- motion */

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-inner > * { animation: lift .9s var(--ease) both; }
  .hero-inner > :nth-child(3) { animation-delay: .06s; }
  .hero-inner > :nth-child(4) { animation-delay: .12s; }
  .hero-inner > :nth-child(5), .hero-inner > :nth-child(6) { animation-delay: .18s; }
  .hero-preview { animation: rise 1.1s .2s var(--ease) both; }
  /* Only what site.js found below the fold is ever held back, and only
     once it is running: without script, or with reduced motion, nothing
     waits for anything. */
  [data-reveal].pending { opacity: 0; transform: translateY(26px); }
  [data-reveal].shown { transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .bento > .shown:nth-child(2), .benefits > .shown:nth-child(2), .journey-steps > .shown:nth-child(2), .posts > .shown:nth-child(3n+2) { transition-delay: .08s; }
  .bento > .shown:nth-child(3), .benefits > .shown:nth-child(3), .journey-steps > .shown:nth-child(3), .posts > .shown:nth-child(3n) { transition-delay: .16s; }
  .journey-steps > .shown:nth-child(4) { transition-delay: .24s; }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  nav.wide a { padding: 9px 10px; }
  .foot-card { grid-template-columns: 1fr; }
  .evidence { grid-template-columns: 1fr; }
  .journey-steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-steps.four::before { display: none; }
  .article-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 960px) {
  nav.wide, .signin { display: none; }
  .bar { justify-content: space-between; }
  .acts { margin-left: auto; }
  .menu { display: block; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile-wide { grid-column: 1 / -1; }
  .split-head, .faq-split, .stages-split, .feature-grid { grid-template-columns: 1fr; }
  .feature-grid { gap: 36px; }
  .feature-row.flip .feature-copy { order: 0; }
  .stages-intro { position: static; }
  .benefits, .journey-steps { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .sec-navy { grid-column: 1 / -1; grid-row: auto; }
  .benefits { margin-top: 20px; padding: 0; }
  .journey-steps::before { left: 52px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 2px dashed var(--line); }
  .band-card { grid-template-columns: 1fr; padding: 48px 0 0 40px; }
  .band-copy { padding: 0 40px 0 0; }
  .featured-post { grid-template-columns: 1fr; }
  .cover-large { min-height: 220px; }
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; max-height: none; margin-bottom: 32px; }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  section { padding: 72px 0; }
  .top { top: 8px; padding: 0 10px; }
  .bar { min-height: 58px; padding: 6px 6px 6px 16px; border-radius: 18px; }
  .hero { padding-top: 124px; }
  .hero h1 { letter-spacing: -.045em; }
  .hero-actions .btn { flex: 1 1 100%; max-width: 360px; }
  .values { flex-direction: column; align-items: center; gap: 8px; }
  .values li + li::before { display: none; }
  .hero-preview { margin-top: 40px; padding-bottom: 96px; max-width: 460px; }
  .page-hero { padding: 120px 0 56px; }
  /* A phone shows the hills higher behind the copy: veil them more. */
  .page-hero .hero-scene img { object-position: 50% 0; }
  .page-hero::before { background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .6) 55%, #fff 100%); }
  .journey-steps.four { grid-template-columns: 1fr; }
  .bento, .cards.two, .sec-grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 26px; }
  .tile-wide, .tile-full { grid-template-columns: 1fr; }
  .frame-tile { margin: 0 -26px -26px 0; }
  .scenic { padding: 80px 0; }
  .band-card { padding: 36px 0 0 24px; border-radius: var(--r-lg); }
  .band-copy { padding-right: 24px; }
  .connect-panel { padding: 56px 18px 200px; border-radius: var(--r-lg); }
  .logo-cloud li { font-size: 14px; }
  .foot { padding-top: 96px; }
  .foot-cta { margin-bottom: 110px; }
  .foot-cta .btn { flex: 1 1 100%; max-width: 360px; }
  .foot-card { padding: 32px 24px; border-radius: var(--r-lg); }
  .card { padding: 26px; }
  .providers { grid-template-columns: 1fr; }
  .stages { padding: 4px 18px; }
  .stage { grid-template-columns: 30px minmax(0, 1fr); }
  .stage .chip { grid-column: 2; justify-self: start; }
  .article { font-size: 17px; }
  .article .answer p { font-size: 17px; }
  .cover-banner { height: 150px; }
  .crumbs li[aria-current] { max-width: 24ch; }
}
@media (max-width: 520px) {
  .acts .btn { display: none; }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .journey-step, .card { border-radius: 22px; }
}

@media print {
  .top, .foot, .skip, .crumbs, .hero-scene, .toc-wrap, .jump { display: none; }
  .page-hero, .hero { padding: 0; background: none; }
  body { font-size: 12pt; }
}

/* -------------------------------------------------------- glyph portal */

/* The home page's opening: a scroll-driven camera through the word GENV
   into the sky artwork (assets/glyph-portal.js, MIT, ported from Christian
   Katzmann's Glyph Portal). These are the component's own rules, moved
   here because the served policy forbids an inline <style>, with the
   field, the front composition and the revealed copy in GENV's language.

   **Without script it is a still page**: the word in navy, its lines, and
   the revealed copy below on pale sky. The script only adds the camera,
   and only once the face has loaded and a frame has been seen. */

@font-face {
  font-family: 'GENV Display';
  /* Geist 800, subset to the four letters of the word (SIL OFL 1.1;
     licence at /marketing/fonts/Geist-OFL.txt). About 1 KB. */
  src: url('/marketing/fonts/geist-800-genv.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

.gp { --gp-paper: #fff; --gp-ink: var(--navy); --gp-field: var(--sky-100); --gp-foreground: var(--navy);
  position: relative; isolation: isolate; background: var(--gp-paper); color: var(--gp-ink); padding: 0; }
.gp > [data-gp-viewport] { position: absolute; inset: 0 auto auto 0; height: 100vh; height: 100svh; width: 0;
  pointer-events: none; visibility: hidden; }
.gp [data-gp-pin] { position: relative; height: var(--gp-height, 100vh); height: var(--gp-height, 100svh);
  min-height: 560px; overflow: clip; isolation: isolate; container-type: size; }
.gp[data-gp-ready] [data-gp-pin] { min-height: 0; }
.gp [data-gp-field] { position: absolute; inset: 0; background: #B9D7F1; opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease); }
.gp[data-gp-ready] [data-gp-field] { opacity: 1; }
.gp .gp-scene { position: absolute; inset: 0; transform: scale(var(--gp-field-scale, 1)); transform-origin: 50% 46%; }
.gp .gp-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.gp [data-gp-art] { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gp .gp-glyph { font-family: 'GENV Display', 'Arial Black', Arial, sans-serif; font-weight: 800; font-size: 100px;
  font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; }
.gp [data-gp-marks] { fill: none; stroke: var(--gp-ink); opacity: .6; visibility: hidden; }

/* Choosing the way in: one invisible button over each letter. The chosen
   one carries a small teal mark under it. */
.gp [data-gp-choices] { position: absolute; inset: 0; visibility: hidden; pointer-events: none; z-index: 3; }
.gp[data-gp-choosing=true] [data-gp-choices] { visibility: visible; }
.gp [data-gp-letter] { box-sizing: border-box; position: absolute; border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer; pointer-events: auto; touch-action: pan-y; border-radius: 10px; }
.gp [data-gp-letter]:disabled { pointer-events: none; }
.gp [data-gp-letter]::after { content: ''; position: absolute; left: 50%; bottom: -22px; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%; background: var(--teal); opacity: 0; transform: scale(.4);
  transition: opacity .25s var(--ease), transform .25s var(--ease); }
.gp [data-gp-letter][aria-checked=true]::after { opacity: 1; transform: none; }
.gp [data-gp-letter]:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }

.gp [data-gp-touch-picker] { display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--soft-ink);
  visibility: hidden; }
.gp[data-gp-choosing=true] [data-gp-touch-picker] { visibility: visible; }
.gp [data-gp-select] { min-height: 44px; min-width: 132px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--white); color: var(--navy); padding: 0 16px; font: inherit; font-weight: 600; }
@media (any-pointer: coarse) { .gp [data-gp-touch-picker] { display: inline-flex; } }

/* The still word: what a visitor without script sees, sized and placed as
   the live one will be. */
.gp [data-gp-fallback] { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%);
  text-align: center; font-family: 'GENV Display', 'Arial Black', Arial, sans-serif; font-weight: 800;
  font-size: min(calc(84cqw / var(--gp-characters, 4) * 1.45), 52cqh); line-height: .74; letter-spacing: 0;
  color: var(--navy); }
.gp[data-gp-ready] [data-gp-fallback] { visibility: hidden; }

/* The front: an eyebrow above the word, a line below it, and the way in.
   The site's own floating header sits above all of it. */
.gp [data-gp-front] { position: absolute; inset: 0; opacity: var(--gp-caption, 1); pointer-events: none; z-index: 2; }
.gp [data-gp-front] a, .gp [data-gp-front] button { pointer-events: var(--gp-caption-hit, auto); }
.gp [data-gp-front]:focus-within { opacity: 1; }
.gp .gp-eyebrow { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--gp-word-top, calc(46% - min(11cqw, 18.7cqh))) + 30px);
  margin: 0; text-align: center; }
.gp .gp-eyebrow span { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px;
  border-radius: 999px; background: var(--sky-50); border: 1px solid var(--line); color: var(--navy);
  font-size: 14px; font-weight: 650; }
.gp .gp-eyebrow .icon { width: 18px; height: 18px; color: var(--teal-deep); }
.gp .gp-support { margin: 0 0 14px; max-width: 34em; text-align: center; font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5; color: #20384F; font-weight: 450; }
.gp [data-gp-caption] { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--gp-word-bottom, calc(46% + min(11cqw, 18.7cqh))) + 30px);
  display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: var(--gp-caption, 1);
  pointer-events: var(--gp-caption-hit, auto); z-index: 4; }
.gp [data-gp-caption]:focus-within { opacity: 1; pointer-events: auto; }
.gp .gp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.gp [data-gp-hint] { display: none; align-items: center; gap: 10px; color: var(--soft-ink); font-size: 14px;
  font-weight: 560; letter-spacing: .01em; }
.gp .gp-wheel { width: 18px; height: 28px; border-radius: 10px; border: 1.6px solid currentColor; position: relative; flex: none; }
.gp .gp-wheel::after { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 2px; background: var(--teal-deep); }
@media (prefers-reduced-motion: no-preference) {
  .gp .gp-wheel::after { animation: gp-wheel 2.2s var(--ease) infinite; }
}
@keyframes gp-wheel { 0% { transform: none; opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 0; } }
.gp [data-gp-enter] .dot-arrow .icon { transform: rotate(90deg); }

/* What the camera arrives at is the hero itself, on the same image. The
   hero sits inside the portal, so while the camera runs the pinned field
   stays put as the hero's background: the hero's own copy of the scene
   steps aside and its words and frame rise over the field as they come
   into view (glyph-portal.js sets --gp-rise on each). The spacer is
   timed so the first of them arrives as the scene fills the screen. Without the
   camera the hero is exactly as it was, with its own scene. */
.gp [data-gp-content] { display: none; }
.gp[data-gp-motion=on] [data-gp-pin] { background: var(--gp-paper); }
.gp[data-gp-motion=on][data-gp-entered=true] [data-gp-pin] { pointer-events: none; }
.gp[data-gp-motion=on] [data-gp-content] { display: block;
  height: max(0px, calc(var(--gp-length) * var(--gp-height) * .44 - .2 * var(--gp-height) - 136px)); }
/* A plain white veil over the field as the hero arrives, so the navy
   headline reads over the meadow as it does over the hero's sky. */
.gp [data-gp-field]::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: calc(var(--gp-veil, 0) * .42); }
.gp[data-gp-motion=on] .hero { background: transparent; overflow: visible; }
.gp[data-gp-motion=on] .hero::before { content: none; }
.gp[data-gp-motion=on] .hero .hero-scene { display: none; }
.gp[data-gp-motion=on] .hero-inner > *, .gp[data-gp-motion=on] .hero-preview { animation: none; }
.gp[data-gp-motion=on] [data-gp-rise] { opacity: var(--gp-rise, 1); translate: 0 calc((1 - var(--gp-rise, 1)) * 36px); }
.gp[data-gp-motion=on] [data-gp-pin] { position: sticky; top: 0; }
.gp[data-gp-motion=on] [data-gp-hint] { display: inline-flex; }
/* The swap is invisible: at that moment the hero's own scene is drawn as
   the field was — one screen tall from the hero's top, the same crop and
   zoom, the same white veil, no extra sky wash — so the picture does not
   change; it only starts scrolling with the page. */
.gp[data-gp-done] .hero { background: transparent; }
.gp[data-gp-done] .hero::before { content: none; }
.gp[data-gp-done] .hero .hero-scene { inset: 0 0 auto 0; height: 100vh; height: 100svh; overflow: hidden; }
.gp[data-gp-done] .hero .hero-scene img { object-position: 50% 70%; transform: scale(1.16); transform-origin: 50% 46%; }
.gp[data-gp-done] .hero .hero-scene::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: .42; }
.gp [data-gp-rise].gp-settling { transition: opacity .45s var(--ease), translate .45s var(--ease); }
/* The hero has already arrived: its own entrance animation must not run a
   second time when the intro hands over. */
.gp[data-gp-done] .hero-inner > *, .gp[data-gp-done] .hero-preview, .gp[data-gp-done] .hero-after { animation: none; }
/* Once the camera has arrived the intro leaves the page: the hero is the top of it, on its own scene, and
   scrolling up stops there instead of flying back through the word. */
.gp[data-gp-done] > [data-gp-viewport], .gp[data-gp-done] [data-gp-pin], .gp[data-gp-done] [data-gp-content] { display: none; }
.gp[data-gp-done] [data-gp-rise] { opacity: 1; translate: none; }

/* The site's header waits until the camera has arrived, then settles in.
   Only the script sets .gp-intro, and never with reduced motion, so
   without it the header is simply there. Focus inside it shows it. */
.top { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.gp-intro .top { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.gp-intro .top:focus-within { opacity: 1; transform: none; pointer-events: auto; }

/* The camera never runs for somebody who has asked for less motion: the
   word stands still in a shorter band and the copy follows on pale sky. */
@media (prefers-reduced-motion: reduce) {
  .gp [data-gp-pin] { position: relative !important; }
  .gp [data-gp-caption] { opacity: 1 !important; }
  .gp [data-gp-hint] { display: none; }
  .gp [data-gp-field] { transition: none; }
  /* The shorter still band starts below the floating header. */
  .gp { padding-top: 92px; }
}
@media (max-width: 700px) {
  .gp .gp-support { font-size: 17px; margin-bottom: 8px; }
  /* A portrait screen frames the artwork by its height, which leaves only
     sky behind a word at this height: lift the scene so the hills show
     through the letters, as they do on a wide screen. */
  .gp .gp-scene { inset: -40% 0 0; }
}

/* -------------------------------------------------------- testimonials */

/* Staggered testimonial cards, after vaib215's "stagger-testimonials"
   pattern on 21st.dev: the centre card raised in navy, its neighbours
   fanned out and tilted, moved by the buttons below or by choosing a card.
   Without script the same cards are one scrolling row. */
.voices { background: var(--sky-25); overflow: hidden; }
.voices .section-head { margin-bottom: 8px; }
.sample-flag { display: flex; width: fit-content; margin-left: auto !important; margin-right: auto !important; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px;
  border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 700;
  border: 1px solid #F1D79A; }
.st-stage { position: relative; }
.st-list { list-style: none; margin: 0; padding: 24px var(--gutter) 32px; display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; }
.st-card { --st-size: 365px; position: relative; flex: none; width: var(--st-size); height: var(--st-size);
  scroll-snap-align: center; padding: 32px; margin: 0; background: var(--white); color: var(--navy);
  border: 2px solid var(--line-2);
  clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, calc(100% - 50px) 100%, 50px 100%, 0 100%, 0 0); }
.st-card::before { content: ''; position: absolute; right: -2px; top: 48px; width: 71px; height: 2px;
  background: var(--line-2); transform-origin: top right; transform: rotate(45deg); }
.st-card figure { margin: 0; }
.st-avatar { width: 48px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 4px;
  background: var(--sky-100); color: var(--navy); font-weight: 750; font-size: 18px; letter-spacing: -.02em;
  box-shadow: 3px 3px 0 var(--white); }
.st-card blockquote { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 560; letter-spacing: -.01em; }
.st-card figcaption { position: absolute; left: 32px; right: 32px; bottom: 28px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.st-card figcaption strong { display: block; color: inherit; font-size: 15px; color: var(--navy); }
.st-card .st-sample { position: absolute; top: 18px; right: 58px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 3px 8px; }
.st-controls { display: none; }

.st-stage[data-st-ready] { height: 600px; }
.st-stage[data-st-ready] .st-list { display: block; overflow: visible; padding: 0; height: 100%; }
.st-stage[data-st-ready] .st-card { position: absolute; left: 50%; top: 50%; cursor: pointer;
  transform: translate(-50%, -50%) translateX(var(--st-x, 0)) translateY(var(--st-y, 0)) rotate(var(--st-r, 0deg));
  transition: transform .5s ease-in-out, background-color .5s ease-in-out, color .5s ease-in-out, border-color .3s, box-shadow .5s; }
.st-stage[data-st-ready] .st-card:hover { border-color: rgba(10, 37, 64, .45); }
.st-stage[data-st-ready] .st-card[data-st-center] { z-index: 2; cursor: default; background: var(--navy); color: #fff;
  border-color: var(--navy); box-shadow: 0 8px 0 4px var(--line-2); }
.st-card[data-st-center]::before { background: var(--navy-3); }
.st-card[data-st-center] .st-avatar { background: var(--teal); color: var(--navy); box-shadow: 3px 3px 0 var(--navy-2); }
.st-card[data-st-center] figcaption, .st-card[data-st-center] figcaption strong { color: #D5E3EF; }
.st-card[data-st-center] figcaption strong { color: #fff; }
.st-stage[data-st-ready] .st-controls { display: flex; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); gap: 10px; z-index: 100; }
.st-btn { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid var(--line-2); background: var(--white);
  color: var(--navy); cursor: pointer; border-radius: 0; transition: background-color .2s, color .2s, border-color .2s; }
.st-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.st-btn .icon { width: 22px; height: 22px; }
.st-btn.prev .icon { transform: rotate(180deg); }
@media (max-width: 640px) {
  .st-card { --st-size: 290px; padding: 22px; }
  .st-avatar { width: 40px; height: 46px; font-size: 16px; margin-bottom: 14px; }
  .st-card blockquote { font-size: 15px; line-height: 1.42; }
  .st-card figcaption { left: 22px; right: 22px; bottom: 18px; font-size: 13px; }
  .st-card figcaption strong { font-size: 14px; }
  .st-card .st-sample { top: 14px; right: 54px; }
  .st-stage[data-st-ready] { height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-stage[data-st-ready] .st-card { transition: none; }
}

/* The hero (owner, 10 Oct 2026): a compact promise and the two ways in, so
   the product picture starts on the first screen; what the values say
   follows the picture. */
.hero-live { padding-top: 112px; }
.hero-live h1 { font-size: clamp(38px, 4.6vw, 70px); margin-bottom: 14px; }
@media (min-width: 1100px) { .hero-live h1 .line { display: inline; } }
.hero-live .lead { margin-bottom: 20px; max-width: 40em; }
.hero-live .hero-preview { max-width: 1280px; margin-top: 26px; padding-bottom: 26px; }
.hero-after { position: relative; z-index: 2; padding-bottom: 130px; text-align: center; }
.hero-after .values { margin-top: 6px; }


/* ------------------------------------------------------- feature story

   Six chapters (pages.mjs stories). Without script each chapter shows its
   scene above its words, finished. With script (stories.js sets
   data-stories-ready) a wide screen keeps the scenes on one sticky stage
   beside the chapters, and each scene plays once its chapter reaches the
   middle of the screen. Reduced motion: finished scenes, no movement. Flat
   surfaces only — the site draws no gradients. */
.stories { position: relative; z-index: 1; background: var(--white); padding: 120px 0 72px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
.story-stage { display: none; }
.story-chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.story-chapters, .story-copy { min-width: 0; }
.story-scene-inline { border-radius: 26px; background: var(--sky-50); border: 1px solid var(--line); padding: 28px;
  display: grid; place-items: center; min-height: 300px; }
.story-copy { max-width: 34em; }
@media (max-width: 600px) { .story-scene-inline { padding: 18px 14px; min-height: 0; } .sc-card, .sc-trail { padding: 18px; } .sc-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--teal-deep); }
.story-label .icon { width: 18px; height: 18px; }
.story-copy h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; color: var(--navy); }
.story-copy > p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.story-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story-facts li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
.story-facts .icon { width: 20px; height: 20px; color: var(--teal-deep); flex: none; }

@media (min-width: 960px) {
  .stories[data-stories-ready] .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .stories[data-stories-ready] .story-stage { display: block; position: sticky; top: 112px; height: min(540px, calc(100vh - 170px));
    border-radius: 30px; background: var(--sky-50); border: 1px solid var(--line); overflow: hidden; }
  .stories[data-stories-ready] .story-stage .story-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px;
    opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
  .stories[data-stories-ready] .story-stage .story-scene.on { opacity: 1; transform: none; }
  .stories[data-stories-ready] .story-scene-inline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; min-height: 0; }
  .stories[data-stories-ready] .story-chapter { min-height: 72vh; align-content: center; }
}

/* The scenes' shared pieces: a white card with the site's soft shadow. */
.sc-card { width: min(100%, 440px); background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .05), 0 24px 48px -28px rgba(10, 37, 64, .35); font-size: 15px; color: var(--navy); }
.sc-title { margin: 0 0 14px; font-weight: 800; }
.sc-card small { color: var(--soft-ink); font-weight: 500; }

/* 1. Order to service: four steps joined by one line. */
.sc-trail { list-style: none; margin: 0; padding: 22px 26px; width: min(100%, 420px); background: var(--white); border-radius: 22px;
  border: 1px solid var(--line); box-shadow: 0 24px 48px -28px rgba(10, 37, 64, .35); display: grid; gap: 18px; position: relative; }
.sc-trail li { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; position: relative; }
.sc-trail li strong { color: var(--navy); }
.sc-trail li span:not(.sc-node) { grid-column: 2; color: var(--soft-ink); font-size: 14px; }
.sc-node { grid-row: span 2; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--teal-deep);
  box-shadow: 0 0 0 4px var(--teal-50); position: relative; }
.sc-trail li:not(:last-child) .sc-node::after { content: ''; position: absolute; left: 7px; top: 20px; width: 2px; height: 44px; background: var(--teal-deep); transform-origin: top; }

/* 2. Holds. */
.sc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sc-state { padding: 2px 10px; border-radius: 999px; background: #FDF1DD; color: #8A5300; font-size: 12.5px; font-weight: 800; }
.sc-holds { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sc-hold { display: grid; padding: 10px 14px; border-radius: 14px; background: var(--sky-50); font-weight: 700; }
.sc-hold-pay { opacity: .45; text-decoration: line-through; }
.sc-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--muted); }
.sc-tick { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--teal-deep); }

/* 3. Stops instead of duplicating. */
.sc-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 800; }
.sc-wire { flex: 1; height: 0; border-top: 2px dashed var(--line-2); }
.sc-ask { margin: 0 0 10px; }
.sc-ask code { background: var(--sky-50); border-radius: 6px; padding: 1px 6px; }
.sc-wait { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--soft-ink); font-size: 14px; }
.sc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--navy); }
.sc-stop { margin: 0; padding: 10px 14px; border-radius: 14px; background: #FDF1DD; color: #6B4100; font-weight: 700; font-size: 14px; }

/* 4. Migration. */
.sc-counts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-counts li { display: grid; padding: 10px 12px; border-radius: 14px; background: var(--sky-50); font-size: 13px; color: var(--soft-ink); }
.sc-counts strong { font-size: 22px; color: var(--navy); font-variant-numeric: tabular-nums; }
.sc-waves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-waves li { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.sc-waves i { display: block; height: 8px; border-radius: 999px; background: var(--teal-deep); }

/* 5. Ask. */
.sc-pill { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-2); }
.sc-orb { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.sc-type { white-space: nowrap; overflow: hidden; font-weight: 600; }
.sc-answer p { margin: 0 0 8px; font-weight: 700; }
.sc-answer ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.sc-answer li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: var(--sky-50); }

/* 6. Shop. */
.sc-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sc-funnel li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; font-weight: 600; }
.sc-funnel i { grid-column: 1 / -1; grid-row: 2; display: block; height: 10px; border-radius: 999px; background: #2F74E8; }
.sc-funnel li:nth-child(1) i { width: 100%; } .sc-funnel li:nth-child(2) i { width: 52%; }
.sc-funnel li:nth-child(3) i { width: 17%; } .sc-funnel li:nth-child(4) i { width: 3%; }
.sc-funnel b { font-variant-numeric: tabular-nums; }

/* Motion: only once the script is running, and never with reduced motion.
   A scene is .on while its chapter is the one being read; each piece plays
   from its start state to the finished state above. */
@media (prefers-reduced-motion: no-preference) {
  [data-stories-ready] .on .sc-trail li { animation: sc-rise .5s var(--ease) both; }
  [data-stories-ready] .on .sc-trail li:nth-child(2) { animation-delay: .35s; } [data-stories-ready] .on .sc-trail li:nth-child(3) { animation-delay: .7s; }
  [data-stories-ready] .on .sc-trail li:nth-child(4) { animation-delay: 1.05s; }
  [data-stories-ready] .on .sc-node::after { animation: sc-grow .4s var(--ease) both .3s; }
  [data-stories-ready] .on .sc-hold-pay { animation: sc-lift .6s var(--ease) both 1.1s; }
  [data-stories-ready] .on .sc-note { animation: sc-rise .5s var(--ease) both 1.6s; }
  [data-stories-ready] .on .sc-state { animation: sc-rise .4s var(--ease) both; }
  [data-stories-ready] .on .sc-wire { animation: sc-pulse 1.2s ease-in-out 3; }
  [data-stories-ready] .on .sc-spin { animation: sc-turn .9s linear 3; }
  [data-stories-ready] .on .sc-wait { animation: sc-rise .4s var(--ease) both .5s; }
  [data-stories-ready] .on .sc-stop { animation: sc-rise .5s var(--ease) both 2.7s; }
  [data-stories-ready] .on .sc-waves i { animation: sc-fill 1s var(--ease) both; transform-origin: left; }
  [data-stories-ready] .on .sc-waves li:nth-child(2) i { animation-delay: .9s; } [data-stories-ready] .on .sc-waves li:nth-child(3) i { animation-delay: 1.8s; }
  [data-stories-ready] .on .sc-type { animation: sc-type 1.6s steps(32, end) both .3s; }
  [data-stories-ready] .on .sc-orb { animation: sc-breathe 1.8s ease-in-out 2; }
  [data-stories-ready] .on .sc-answer { animation: sc-rise .5s var(--ease) both 2.1s; }
  [data-stories-ready] .on .sc-funnel i { animation: sc-fill .9s var(--ease) both; transform-origin: left; }
  [data-stories-ready] .on .sc-funnel li:nth-child(2) i { animation-delay: .25s; } [data-stories-ready] .on .sc-funnel li:nth-child(3) i { animation-delay: .5s; }
  [data-stories-ready] .on .sc-funnel li:nth-child(4) i { animation-delay: .75s; }
}
@keyframes sc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sc-lift { from { opacity: 1; text-decoration-color: transparent; } to { opacity: .45; text-decoration-color: currentColor; } }
@keyframes sc-pulse { 50% { border-top-color: var(--navy); } }
@keyframes sc-turn { to { transform: rotate(360deg); } }
@keyframes sc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-type { from { max-width: 0; } to { max-width: 100%; } }
@keyframes sc-breathe { 50% { box-shadow: 0 0 0 9px var(--teal-50); } }