/* Kipso marketing site, v5 "calm editorial".
   White and near-black, very generous space, soft rounded UI and pill buttons.
   Typography carries the page (Inter Tight headlines, Inter body). The signature
   artwork is the project-agent orb: one soft colored sphere per project. */
:root {
  --bg: #ffffff;
  --soft: #f5f5f5;
  --soft-2: #ececec;
  --ink: #0d0d0d;
  --ink-2: #3a3a3a;
  --muted: #5e5e5e;
  --hair: #e5e5e5;
  --hair-2: #d4d4d4;
  --accent: #0b5a5f;
  --accent-2: #0f7f86;
  --accent-soft: #e3f1ef;
  --p-orange: #fbe2cf;
  --p-sky: #d9e9f7;
  --p-mint: #d3eee8;
  --p-pink: #f7dde5;
  --p-lilac: #e5e1f7;
  /* project-agent orb colors (from the product) */
  --o-teal: #0f7f86; --o-indigo: #5b5bd6; --o-rust: #c2410c; --o-rose: #be185d; --o-green: #15803d; --o-violet: #7c3aed; --o-blue: #0369a1; --o-gold: #a16207;
  --good: #1f6b3f; --good-soft: #e2f1e6;
  --warn: #7f4d07; --warn-soft: #f8ecd4;
  --bad: #a1301f; --bad-soft: #f8e1dc;
  --deep: #0d0d0d; --deep-2: #1f1f1f; --nav-ink: #c9c9c9; --stone: #8fd0cc;
  /* names older components and the scenes still use */
  --paper: var(--bg); --paper-2: var(--soft); --card: #fff; --line: var(--hair); --line-2: var(--hair-2); --rule: var(--hair-2); --rule-soft: var(--hair);
  --accent-dark: var(--accent); --nav: #222; --nav-2: #333; --tint: var(--soft); --tint-2: var(--soft-2); --sand-2: var(--hair); --bone: var(--soft); --oat: var(--soft-2); --stone-n: var(--soft-2); --white: #fff; --stone-2: var(--stone); --amber: #c98a2b; --stone-shape: 50%;
  --radius: 20px;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Inter Tight", var(--font);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--hair-2); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0 0 0.4em; color: var(--ink); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.6vw, 88px); letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(32px, 3.8vw, 48px); }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.9em; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.hl { color: inherit; font-style: normal; }
.section-dark .hl { color: inherit; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { top: 12px; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.section-tint { background: var(--soft); }
.section-white { background: var(--bg); }
.section-dark { background: var(--soft); }
.section-dark p { color: var(--ink-2); }
.eyebrow, .chapter { display: block; font: 500 14px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 16px; }
.lede { font-size: clamp(18px, 1.5vw, 20px); color: var(--muted); max-width: 40em; line-height: 1.55; }
.section-head { max-width: 860px; margin: 0 auto 64px; text-align: center; }
.section-head .lede { margin-left: auto; margin-right: auto; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head.left .lede { margin-left: 0; }
.hero-note { color: var(--muted); }
.caption, figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.links-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 15px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; font: 500 15px/1.2 var(--font); text-decoration: none; cursor: pointer; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #333; color: #fff; }
.btn-outline, .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn-outline:hover, .btn-ghost:hover { background: var(--soft); color: var(--ink); }
.btn-text { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px var(--font); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-2); }
.btn-text:hover { text-decoration-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--hair); }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.mark { width: 34px; height: 34px; flex: none; }
.mark rect { fill: var(--ink); }
.mark path { fill: var(--stone); }
.mark .smile { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.mark g { transform-origin: 16px 18px; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.brand:hover .mark g { transform: rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .brand:hover .mark g { transform: none; } }
.wordmark { font: 600 25px var(--display); letter-spacing: -0.035em; }
@media (max-width: 599px) { .mark { width: 30px; height: 30px; } .wordmark { font-size: 22px; } }
.site-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.site-nav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 450; }
.site-nav ul a:hover { color: var(--ink); background: var(--soft); }
.site-nav ul a[aria-current="page"] { color: var(--ink); background: var(--soft-2); }
.nav-toggle { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; background: transparent; border: 1px solid var(--hair-2); border-radius: 999px; font: 500 14px var(--font); color: var(--ink); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 15px; height: 1.5px; background: currentColor; border-radius: 2px; position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
@media (max-width: 1023px) {
  .js .nav-toggle { display: inline-flex; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 4px 0 20px; margin-left: 0; }
  .site-nav ul { flex-direction: column; }
  .site-nav ul a { padding: 12px 4px; font: 500 24px var(--display); letter-spacing: -0.02em; border-radius: 10px; }
  .js .site-nav:not(.open) { display: none; }
}

/* ---------- home hero ---------- */
.hero { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px); text-align: center; }
.hero h1 { margin: 0 auto 0.35em; max-width: 15em; font-size: clamp(40px, 5.4vw, 76px); }
.hero h1 .line2 { display: block; color: var(--muted); }
.hero .lede { margin: 0 auto; max-width: 36em; }
.hero .btn-row { justify-content: center; margin-top: 32px; }
.media-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 88px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; text-align: left; }
.media-row::-webkit-scrollbar { height: 6px; }
.media-row::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 6px; }
@media (max-width: 1100px) { .media-row { grid-auto-columns: 62%; } }
@media (max-width: 600px) { .media-row { grid-auto-columns: 82%; } }
.mcard { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; scroll-snap-align: start; text-decoration: none; color: var(--ink); background: var(--soft); isolation: isolate; }
.mcard picture, .mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.mcard:hover img { transform: scale(1.03); }
.mcard .mcard-label { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(255,255,255,0.92); border-radius: 999px; font: 500 15px var(--font); }
.mcard .mcard-label::after { content: "→"; color: var(--muted); }
.mcard.art { display: grid; place-items: center; }
.mcard.c-mint { background: var(--p-mint); } .mcard.c-sky { background: var(--p-sky); } .mcard.c-orange { background: var(--p-orange); } .mcard.c-pink { background: var(--p-pink); } .mcard.c-lilac { background: var(--p-lilac); }
.mcard .art-inner { width: 78%; margin-bottom: 52px; }

/* Project-agent orbs, as artwork */
.orb-art { --c: var(--o-teal); display: block; border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 22%, #fff) 0%, color-mix(in srgb, var(--c) 85%, #fff) 30%, var(--c) 62%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--c) 45%, transparent); }
.orb-cluster { position: relative; aspect-ratio: 1; width: 100%; }
.orb-cluster .orb-art { position: absolute; }
.orb-cluster .o1 { --c: var(--o-teal); width: 54%; left: 8%; top: 22%; }
.orb-cluster .o2 { --c: var(--o-indigo); width: 30%; right: 8%; top: 12%; }
.orb-cluster .o3 { --c: var(--o-rust); width: 22%; right: 16%; bottom: 14%; }
.orb-cluster .o4 { --c: var(--o-rose); width: 13%; left: 18%; bottom: 8%; }
@media (prefers-reduced-motion: no-preference) {
  .orb-cluster .orb-art { animation: float 9s ease-in-out infinite; }
  .orb-cluster .o2 { animation-delay: -3s; } .orb-cluster .o3 { animation-delay: -6s; } .orb-cluster .o4 { animation-delay: -1.5s; }
  @keyframes float { 50% { translate: 0 -6px; } }
}
.orb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: #fff; border-radius: 999px; font: 500 13px var(--font); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.orb-chip .orb-art { width: 20px; box-shadow: none; }

.page-hero { padding: clamp(80px, 10vw, 140px) 0 clamp(48px, 6vw, 80px); text-align: center; }
.page-hero h1 { max-width: 14em; margin-left: auto; margin-right: auto; font-size: clamp(40px, 5.6vw, 72px); }
.page-hero .lede { margin-left: auto; margin-right: auto; }
.page-hero .btn-row { justify-content: center; margin-top: 30px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero-photo { margin: 56px auto 0; max-width: 1100px; border-radius: 28px; overflow: hidden; }
.page-hero-photo img { width: 100%; max-height: 560px; object-fit: cover; }
.page-hero + .section, .page-hero + .post-feature { padding-top: clamp(40px, 5vw, 64px); }
.hero-photo, .pebbles, .card-icon, .promise-strip { display: none; }

/* ---------- frames ---------- */
.frame { background: #fff; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18); }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #fafafa; border-bottom: 1px solid var(--hair); }
.frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e2de; }
.frame-bar em { margin-left: 10px; font: 400 12px var(--font); font-style: normal; color: var(--muted); }
.stage-soft { background: var(--soft); border-radius: 28px; padding: clamp(20px, 4vw, 56px); }
figure { margin: 0; }
.demo-tag { display: inline-block; padding: 1px 8px; margin-right: 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font: 500 12px/1.6 var(--font); }

/* ---------- layouts ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.reverse > :first-child { order: 2; }
.split > *, .grid-2 > * { min-width: 0; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .grid-2, .grid-3, .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
}
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--soft); border-radius: var(--radius); padding: 28px; transition: background-color .2s; }
.card:hover { background: var(--soft-2); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card .card-n { display: none; }

.outcomes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.outcomes li { background: var(--soft); border-radius: var(--radius); padding: 32px 28px; }
.outcomes strong { display: block; font: 500 22px/1.25 var(--display); letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ink); }
.outcomes p { color: var(--muted); margin: 0; }
@media (max-width: 900px) { .outcomes { grid-template-columns: 1fr; } }

.loop { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.loop li { counter-increment: step; background: var(--soft); border-radius: 18px; padding: 20px 18px; }
.loop li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font: 500 13px var(--font); margin-bottom: 22px; }
.loop strong { display: block; font: 500 18px var(--display); margin-bottom: 4px; }
.loop span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; }
.loop a { text-decoration: none; }
@media (max-width: 1060px) { .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .loop { grid-template-columns: 1fr 1fr; } }

/* "We made them free" */
.free-list { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; border-top: 1px solid var(--hair); }
.free-list li { display: grid; grid-template-columns: 1fr auto 7em; gap: 6px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.free-list .what { font: 500 clamp(19px, 2vw, 24px)/1.3 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.free-list .was { font-size: 15px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.free-list .was s { text-decoration-color: var(--muted); }
.free-list .was small { display: block; font-size: 12px; }
.free-list .now { justify-self: end; padding: 3px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 14px var(--font); }
@media (max-width: 640px) { .free-list li { grid-template-columns: 1fr auto; } .free-list .was { grid-column: 1; text-align: left; white-space: normal; } .free-list .now { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }

/* ---------- role tabs ---------- */
.roles { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.role-list { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.role-tab { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 18px 0; cursor: pointer; font: inherit; color: var(--muted); }
.role-tab .role-name { display: block; font: 500 20px/1.3 var(--display); letter-spacing: -0.015em; color: inherit; }
.role-tab .role-desc { display: none; margin-top: 8px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.role-tab[aria-selected="true"] { color: var(--ink); }
.role-tab[aria-selected="true"] .role-desc { display: block; }
.role-tab:hover { color: var(--ink); }
.role-pane { border-radius: 28px; overflow: hidden; background: var(--soft); }
.role-panel[hidden] { display: none; }
.role-media { position: relative; aspect-ratio: 16 / 10; background: var(--soft-2); }
.role-media img, .role-media video { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.role-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: center; padding: 16px 22px; font-size: 14px; color: var(--muted); }
.vid-toggle { position: absolute; right: 14px; bottom: 14px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); font: 500 13px var(--font); cursor: pointer; }
.vid-toggle { display: none; }
.watch-full { gap: var(--s2); display: none; }
.js .watch-full { display: inline-flex; }
.watch-len { font-weight: 400; opacity: .8; }
.hv-sound { position: absolute; left: var(--s4); bottom: var(--s4); display: none; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: 999px; background: rgba(13,13,13,0.86); color: #fff; font: 500 14px var(--font); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.js .hv-sound { display: inline-flex; }
.hv-sound:hover { background: rgba(13,13,13,0.86); }

/* Full narrated walkthrough, in a modal dialog */
.player { width: min(1080px, calc(100vw - 2 * var(--s4))); max-width: none; max-height: calc(100dvh - 2 * var(--s4)); padding: 0; border: 0; border-radius: var(--radius); background: var(--deep); color: #fff; overflow: auto; }
.player::backdrop { background: rgba(10, 10, 10, 0.72); }
.player-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s3) var(--s3) var(--s5); }
.player-title { margin: 0; font: 500 17px/1.3 var(--display); letter-spacing: -0.01em; color: #fff; }
.player-close { flex: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.player-close:hover { background: rgba(255,255,255,0.22); }
.player-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.player-note { margin: 0; padding: var(--s3) var(--s5) 0; font-size: 14px; color: var(--nav-ink); }
.player-transcript { padding: var(--s2) var(--s5) var(--s4); font-size: 14px; color: var(--nav-ink); }
.player-transcript summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: #fff; }
.player-transcript p { margin: 0; max-width: 70em; line-height: 1.6; }
.player :focus-visible { outline-color: var(--stone); }
@media (max-width: 560px) { .player-head { padding-left: var(--s4); } .player-note, .player-transcript { padding-left: var(--s4); padding-right: var(--s4); } }
.js .vid-toggle { display: block; }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } }

/* ---------- segmented platform toggle ---------- */
.seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; background: var(--soft); border-radius: 999px; margin: 0 auto 28px; }
.seg button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 15px var(--font); cursor: pointer; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.platform { text-align: center; }
.platform-panel[hidden] { display: none; }
.platform-panel > p { max-width: 40em; margin: 0 auto 10px; color: var(--muted); }
.platform-panel .links-inline { margin-bottom: 32px; }
.platform-panel .stage-soft { text-align: left; max-width: 1080px; margin: 0 auto; }
@media (max-width: 600px) { .seg { border-radius: 22px; } }

/* ---------- explore cards ---------- */
.explore { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.explore a { display: block; text-decoration: none; color: var(--ink); }
.explore .tile { aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.explore a:hover .tile { transform: translateY(-3px); }
.explore .tile svg { width: 62%; height: auto; }
.explore strong { display: block; margin-top: 14px; font: 500 17px var(--display); }
.explore span { display: block; font-size: 14px; color: var(--muted); }
.explore .t-orange { background: var(--p-orange); } .explore .t-sky { background: var(--p-sky); } .explore .t-mint { background: var(--p-mint); } .explore .t-pink { background: var(--p-pink); }
.explore .t-lilac { background: var(--p-lilac); }
.explore { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .explore { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .explore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pay app proof block */
.payapp { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
.payapp-head { padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
.payapp-totals { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hair); }
.payapp-totals div { padding: 16px 20px; }
.payapp-totals div + div { border-left: 1px solid var(--hair); background: var(--accent-soft); }
.payapp-totals small { display: block; font-size: 12px; color: var(--muted); }
.payapp-totals b { display: block; font: 500 28px var(--display); }
.findings { list-style: none; margin: 0; padding: 0; }
.findings li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hair); font-size: 15px; }
.tag { align-self: start; text-align: center; padding: 2px 8px; border-radius: 999px; font: 500 12px/1.5 var(--font); }
.tag-block { background: var(--bad-soft); color: var(--bad); }
.tag-review { background: var(--warn-soft); color: var(--warn); }

@keyframes bump { 40% { transform: scale(1.04); } }
@media (max-width: 560px) {
}

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 28px; margin-bottom: 14px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }

.status { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 500 12px/1.6 var(--font); white-space: nowrap; vertical-align: 2px; }
.status-now { background: var(--good-soft); color: var(--good); }
.status-building { background: var(--accent-soft); color: var(--accent); }
.status-planned { background: var(--soft-2); color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; padding: 18px 20px 0; font-weight: 500; }
th, td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
thead th { font-size: 13px; font-weight: 500; color: var(--muted); background: #fafafa; }
tbody th { font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.us { background: #f4faf9; }
.cmp-table thead th:last-child { color: var(--accent); }
.cmp-table tbody th { width: 18%; }
@media (max-width: 700px) {
  .stack-table thead { display: none; }
  .stack-table tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table th, .stack-table td { display: block; padding: 4px 0; border: 0; }
  .stack-table tbody th { font-size: 17px; padding-bottom: 8px; }
  .stack-table td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  .stack-table td.us { background: transparent; }
}

/* Pricing */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tier { background: var(--soft); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; text-align: left; }
.tier h3 { font-size: 15px; color: var(--muted); margin-bottom: 20px; font-family: var(--font); }
.tier .price { font: 500 clamp(40px, 3.6vw, 52px)/1 var(--display); letter-spacing: -0.04em; margin-bottom: 0; }
.tier .price small { font: 400 14px var(--font); color: var(--muted); letter-spacing: 0; }
.tier .annual { font-size: 14px; color: var(--muted); margin: 10px 0 24px; }
.tier .btn { margin-top: auto; }
.tier.featured { background: var(--accent-soft); }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.included { columns: 2; column-gap: 48px; }
.included li { break-inside: avoid; }
@media (max-width: 700px) { .included { columns: 1; } }

/* FAQ: rendered by the build from src/faq/<page>.json (the same text feeds the FAQPage schema). */
.faq-list { margin-top: var(--s7); border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; min-height: 44px; padding: var(--s5) 0; font: 500 19px/1.35 var(--display); letter-spacing: -0.015em; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 300; font-size: 24px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq summary:hover::after { color: var(--ink); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); max-width: 46em; margin: 0 0 var(--s5); }
@media (max-width: 560px) { .faq summary { font-size: 17px; padding: var(--s4) 0; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

.callout { background: var(--soft); padding: 24px 28px; border-radius: var(--radius); }
.callout p:last-child { margin-bottom: 0; }
.callout-plain { background: var(--soft); }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.stat-row > div { background: var(--soft); border-radius: var(--radius); padding: 26px; }
.stat-row dt { font-size: 14px; color: var(--muted); }
.stat-row dd { margin: 14px 0 0; font: 500 clamp(28px, 3vw, 40px)/1.05 var(--display); letter-spacing: -0.035em; }
.stat-row dd small { display: block; font: 400 14px/1.45 var(--font); letter-spacing: 0; color: var(--muted); margin-top: 10px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; } }

.promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: promise; }
.promises li { counter-increment: promise; background: var(--soft); border-radius: var(--radius); padding: 28px 24px; }
.promises li::before { content: counter(promise); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font: 500 13px var(--font); margin-bottom: 28px; }
.promises strong { display: block; font: 500 22px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.promises span { display: block; color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promises { grid-template-columns: 1fr; } }

.video-placeholder { aspect-ratio: 16 / 9; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink); text-align: center; padding: 16px; background: linear-gradient(135deg, var(--p-mint), var(--p-sky) 50%, var(--p-lilac)); }
.video-play { width: 64px; height: 64px; border-radius: 50%; background: #fff; position: relative; }
.video-play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-label { font: 500 18px var(--display); }

.cta-band { text-align: center; }
.cta-band h2 { max-width: 16em; margin-left: auto; margin-right: auto; }
.cta-band p { max-width: 38em; margin-left: auto; margin-right: auto; color: var(--muted); }
.cta-band .btn-row { justify-content: center; margin-top: 28px; }

/* ---------- films ---------- */
.film { margin: 0; }
.film-screen { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px 20px 0 0; background: linear-gradient(160deg, #f4f6f6, #f5f5f7); }
.section-tint .film-screen, .stage-soft .film-screen, .section-dark .film-screen { background: linear-gradient(160deg, #ffffff, #f7f7f5); }
.stage { position: absolute; inset: 0; font-size: 1.9cqw; font-family: var(--font); color: var(--ink); line-height: 1.35; }
.film-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: #fff; border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 20px 20px; }
.film-toggle { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; visibility: hidden; }
.js .film-toggle { visibility: visible; }
.film-toggle::before { content: ""; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.film.is-playing .film-toggle::before { border: 0; margin: 0; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.film-progress { flex: 1; height: 3px; background: var(--hair); border-radius: 3px; overflow: hidden; }
.film-progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(1); }
.film-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.film-caption { display: none; min-height: 3.2em; margin: 12px 4px 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: left; }
.js .film-caption { display: block; }
.js .film-caption[hidden] { display: none; }
.film-cues { margin: 12px 0 0; padding-left: 1.2em; font-size: 15px; color: var(--muted); }
.js .film-cues { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .film-label { display: none; } }
.film-track { flex: 1; position: relative; display: flex; align-items: center; min-height: 34px; }
.film-track .film-progress { flex: 1; }
.film-scrub { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.film-track:has(.film-scrub:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.film-sound { flex: none; display: inline-flex; align-items: center; gap: var(--s1); min-height: 34px; padding: 0 var(--s3); border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; color: var(--ink); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; }
.film-sound:hover { background: var(--soft); }
.film-sound[hidden] { display: none; }
.film-sound[aria-pressed="true"].film-mute { background: var(--ink); color: #fff; border-color: var(--ink); }
.film-cc[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.film-subs { margin: var(--s3) var(--s1) 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 15px; line-height: 1.45; text-align: center; }
.film-subs[hidden] { display: none; }
@media (max-width: 560px) { .film-sound-long { display: none; } .film-sound { min-height: 44px; } .film-track { min-height: 44px; } }

.fx { opacity: 0; transform: translateY(0.6em); transition: opacity .45s ease, transform .55s cubic-bezier(.3,1.3,.5,1); }
.fx-pop { transform: scale(0.7); }
.fx-left { transform: translateX(-1.5em); }
.fx-right { transform: translateX(1.5em); }
.fx-stamp { transform: scale(1.8) rotate(-12deg); }
.fx.in, .film:not(.is-ready) .fx { opacity: 1; transform: none; }
.fx-stamp.in, .film:not(.is-ready) .fx-stamp { transform: rotate(-6deg); }
.ui { position: absolute; background: #fff; border-radius: 0.8em; box-shadow: 0 0.6em 1.6em rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.06); }
.ui-pad { padding: 0.9em 1em; }
.ui-title { font-weight: 500; font-size: 1.02em; letter-spacing: -0.015em; line-height: 1.2; }
.ui-k { display: block; font-size: 0.6em; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ui-v { font-weight: 500; }
.ui-big { font: 500 1.8em/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ui-row { display: flex; justify-content: space-between; gap: 0.8em; align-items: center; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em 1em; margin-top: 0.7em; }
.chip { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.64em; font-weight: 500; white-space: nowrap; }
.chip-block { background: var(--bad-soft); color: var(--bad); }
.chip-review { background: var(--warn-soft); color: var(--warn); }
.chip-ok { background: var(--good-soft); color: var(--good); }
.chip-agent { background: var(--accent-soft); color: var(--accent); }
.stamp { position: absolute; padding: 0.3em 0.9em; border: 0.12em solid var(--good); color: var(--good); border-radius: 999px; font: 600 0.9em var(--font); letter-spacing: .04em; text-transform: uppercase; background: #fff; }
.typing::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wave { display: flex; gap: 0.18em; align-items: center; height: 2em; }
.wave i { display: block; width: 0.22em; background: var(--accent-2); border-radius: 1em; height: 30%; }
.film.is-playing .wave.in i { animation: wave 0.9s ease-in-out infinite; }
.wave i:nth-child(3n) { animation-delay: -.3s !important; }
.wave i:nth-child(3n+1) { animation-delay: -.6s !important; }
@keyframes wave { 50% { height: 100%; } }
.bar { height: 0.55em; border-radius: 1em; background: #ececea; overflow: hidden; }
.bar b { display: block; height: 100%; border-radius: 1em; background: var(--accent-2); transform-origin: left; transform: scaleX(var(--from, 0)); transition: transform 1.2s cubic-bezier(.3,1,.4,1); }
.bar b.in, .film:not(.is-ready) .bar b { transform: scaleX(var(--to, 1)); }
.scan { position: absolute; left: 0; right: 0; height: 2em; background: linear-gradient(180deg, transparent, rgba(15,127,134,0.18), transparent); top: 0; opacity: 0; pointer-events: none; }
.film.is-playing .scan.in { opacity: 1; animation: scan 3s linear forwards; }
@keyframes scan { from { top: 0; } to { top: 100%; } }
.prow { display: grid; grid-template-columns: 2.4em 1fr 5em 3em 4.6em; gap: 0.5em; padding: 0.45em 1em; border-top: 1px solid #f0f0ee; font-size: 0.8em; align-items: center; transition: background-color .4s; }
.prow > :nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.prow-head { font-weight: 500; color: var(--muted); font-size: 0.6em; letter-spacing: .03em; text-transform: uppercase; border-top: 0; }
.row-flag.in, .film:not(.is-ready) .row-flag { background: #fdf1ee; }
.row-warn.in, .film:not(.is-ready) .row-warn { background: #fdf7ea; }
.avatar { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 500; font-size: 0.8em; margin: 0 auto 0.4em; }
.node { position: absolute; text-align: center; width: 9em; }
.node .ui-k { margin-top: 0.2em; }
.tick { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--good); color: #fff; font-size: 0.8em; font-weight: 700; }
.track { position: absolute; height: 0.2em; border-radius: 1em; background: #e6e6e3; overflow: hidden; }
.track b { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .9s ease; }
.track b.in, .film:not(.is-ready) .track b { transform: scaleX(1); }
.file { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.8em; font-size: 0.85em; }
.file i { width: 1.8em; height: 2.2em; border-radius: 0.3em; display: grid; place-items: center; font-style: normal; font-size: 0.55em; font-weight: 600; color: #fff; flex: none; }
.clock { position: absolute; right: 1.2em; top: 1em; padding: 0.3em 0.8em; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 0.85em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .fx, .bar b, .track b { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn { transition: background-color .15s, color .15s, border-color .15s; }
}

/* ---------- real cost page ---------- */
.findings-list { list-style: none; counter-reset: f; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.findings-list li { counter-increment: f; background: var(--soft); border-radius: var(--radius); padding: 30px 28px; }
.findings-list li::before { content: counter(f); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font: 500 13px var(--font); margin-bottom: 22px; }
.findings-list h3 { margin-bottom: 8px; }
.findings-list p { color: var(--ink-2); margin: 0; }
@media (max-width: 800px) { .findings-list { grid-template-columns: 1fr; } }
sup { line-height: 0; font-size: 0.7em; }
sup a { text-decoration: none; padding: 0 1px; color: var(--accent); }
.sources { padding-left: 1.6em; font-size: 15px; }
.sources li { margin-bottom: 10px; scroll-margin-top: 90px; }
.sources li::marker { color: var(--muted); }
.sources li:target { background: var(--accent-soft); border-radius: 6px; }

.calc { background: #fff; color: var(--ink); padding: 24px; border-radius: 24px; border: 1px solid var(--hair); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.2); }
.calc fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.calc legend { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.calc-spend { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--soft); border-radius: 999px; }
.calc-spend label { position: relative; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--muted); }
.calc-spend input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-spend label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.calc-spend label:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.calc-migrate { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; cursor: pointer; font-size: 15px; }
.calc-migrate input { width: 20px; height: 20px; accent-color: var(--ink); }
.calc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .calc-cols { grid-template-columns: 1fr; } }
.calc-col { padding: 18px; display: flex; flex-direction: column; background: var(--soft); border-radius: 16px; }
.calc-col h3 { font-size: 15px; margin-bottom: 12px; color: var(--ink); font-family: var(--font); }
.calc-col dl { margin: 0 0 14px; display: grid; gap: 12px; }
.calc-col dt { font-size: 12px; color: var(--muted); }
.calc-col dd { margin: 2px 0 0; font-weight: 500; font-size: 15px; }
.calc-us { background: var(--accent-soft); }
.calc-sum { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--hair-2); color: var(--ink); }
.calc-sum small { display: block; font-size: 12px; color: var(--muted); }
.calc-sum b, .calc-sum output { display: block; font: 500 clamp(20px, 2.2vw, 26px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-us .calc-sum output { color: var(--accent); }
.calc-note { color: var(--muted); font-size: 13px; margin: 14px 0 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field label, .field legend { display: block; font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid #8e8e8a; border-radius: 12px; background: #fff; font: 16px/1.4 var(--font); color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent-2); }
.field [aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
.field .error { color: var(--bad); font-size: 14px; font-weight: 500; margin-top: 6px; }
.field .error:empty { display: none; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; min-height: 32px; }
.choices input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ink); }
.form-status { padding: 16px 18px; border-radius: 14px; background: var(--good-soft); color: #1a5a35; font-weight: 500; }
.form-status[hidden] { display: none; }
.form-note { font-size: 14px; color: var(--muted); }
.card form { margin: 0; }
.card:has(form) { background: #fff; border: 1px solid var(--hair); }

/* Newsletter: centered */
.newsletter { max-width: 640px; margin: 0 auto; text-align: center; }
.newsletter h2 { margin-bottom: 10px; }
.newsletter p { color: var(--muted); }
.newsletter .chapter, .newsletter .nl-label:first-child { display: none; }
.nl-form { display: grid; gap: 10px; margin-top: 24px; justify-items: center; }
.nl-row { display: flex; gap: 8px; width: 100%; max-width: 480px; }
.nl-row[hidden] { display: none; }
.nl-row input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 18px; border: 1px solid #8e8e8a; border-radius: 999px; background: #fff; font: 16px var(--font); color: var(--ink); }
.nl-row input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.nl-row input[aria-invalid="true"] { border: 2px solid var(--bad); }
.nl-row .btn { flex: none; min-height: 48px; }
.nl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-label { font-size: 14px; color: var(--muted); }
.nl-form > .nl-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl-error { color: var(--bad); font-size: 14px; font-weight: 500; margin: 0; }
.nl-error:empty { display: none; }
.nl-status { padding: 12px 16px; border-radius: 14px; background: var(--good-soft); color: #1a5a35; font-weight: 500; margin: 0; }
.nl-status[hidden] { display: none; }
.nl-privacy { font-size: 13px; color: var(--muted); margin: 0; }
@media (max-width: 460px) { .nl-row { flex-direction: column; } }
.site-footer .newsletter { padding: clamp(64px, 8vw, 112px) 0; }

/* ---------- footer: light, multi-column ---------- */
.site-footer { background: var(--soft); color: var(--muted); padding: 0 0 40px; font-size: 14px; }
.footer-big { display: none; }
.footer-cols { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 28px; padding: 56px 0 40px; border-top: 1px solid var(--hair-2); }
.footer-cols h3 { font: 500 14px var(--font); color: var(--ink); margin-bottom: 14px; letter-spacing: 0; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-cols a { color: var(--muted); text-decoration: none; }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand p { margin: 12px 0 0; max-width: 22em; }
@media (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-inner { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--hair-2); }
.brand-footer { color: var(--ink); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.footer-note { margin: 0; font-size: 13px; max-width: 70em; }
.footer-links { display: none; }

/* ---------- blog ---------- */
.blog-filter { display: none; justify-content: center; gap: 4px; padding: 4px; background: var(--soft); border-radius: 999px; width: max-content; max-width: 100%; margin: 0 auto 40px; flex-wrap: wrap; }
.js .blog-filter { display: flex; }
.blog-filter button { font: 500 14px var(--font); padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; min-height: 40px; }
.blog-filter button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.post-row[hidden] { display: none; }
.post-row a { display: grid; gap: 14px; text-decoration: none; color: var(--ink); }
.post-row-n { display: none; }
.post-row-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.post-row a:hover img { transform: scale(1.015); }
.post-row-text { display: grid; gap: 6px; }
.post-row-cat { font-size: 13px; color: var(--muted); }
.post-row-title { font: 500 20px/1.3 var(--display); letter-spacing: -0.015em; }
.post-row a:hover .post-row-title { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 4px; }
.post-row-desc { color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-list { grid-template-columns: 1fr; } }

.post-hero h1 { max-width: 16em; font-size: clamp(36px, 4.8vw, 60px); }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.post-feature figure { max-width: 1100px; margin: 0 auto; }
.post-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; }
.post-feature figcaption { text-align: center; }
.post-section { padding-top: clamp(48px, 6vw, 80px); }
.post-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; max-width: 1000px; margin: 0 auto; }
.post-aside { position: sticky; top: 88px; }
.post-aside dl { margin: 0 0 18px; display: grid; gap: 14px; }
.post-aside dt { font-size: 13px; color: var(--muted); }
.post-aside dd { margin: 2px 0 0; font-size: 14px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } .post-aside { position: static; } }
.post-main { min-width: 0; max-width: 42em; }
.prose { font-size: 18px; line-height: 1.7; color: #1d1d1d; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 1.8em 0 0.5em; }
.prose h3 { font-size: 21px; margin: 1.6em 0 0.4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--hair-2); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2em 0; }
.prose code { font: 0.85em var(--mono); background: var(--soft); padding: 2px 5px; border-radius: 5px; }
.prose .table-wrap { margin: 1.4em 0; font-size: 15px; }
.post-newsletter { margin: 56px 0; padding: 40px 28px; border-radius: 24px; background: var(--soft); }
.post-sources { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hair); }
.post-sources h2 { font: 500 15px var(--font); margin-bottom: 14px; letter-spacing: 0; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; }
.post-nav a { display: grid; gap: 6px; padding: 20px; border-radius: 18px; background: var(--soft); text-decoration: none; font: 500 16px/1.3 var(--display); }
.post-nav a:hover { background: var(--soft-2); }
.post-nav a span { font: 400 13px var(--font); color: var(--muted); }
.post-nav .next { text-align: right; }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav .next { text-align: left; } }
/* fewer lines: rows become soft fills */
.free-list { border-top: 0; display: grid; gap: 8px; }
.free-list li { border-bottom: 0; background: #fff; border-radius: 16px; padding: 18px 24px; }
.role-list { border-top: 0; gap: 4px; }
.role-tab { border-bottom: 0; border-radius: 16px; padding: 16px 18px; }
.role-tab[aria-selected="true"] { background: #fff; }
.prose blockquote { border-left: 0; background: var(--soft); border-radius: 14px; padding: 16px 20px; }
.post-sources { border-top: 0; }

/* hero product video */
.hero-video { max-width: 1120px; margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(14px, 2.5vw, 32px); border-radius: 32px; background: linear-gradient(160deg, var(--p-mint), var(--p-sky) 55%, var(--p-lilac)); text-align: left; }
.hero-video .frame { border-radius: 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.35); }
.hv-wrap { position: relative; aspect-ratio: 1440 / 900; background: #f4f4f4; }
.hv-wrap video { width: 100%; height: 100%; object-fit: cover; }
.hero-video figcaption { margin: 14px 4px 0; color: var(--ink-2); }
.section .media-row { margin-top: 0; }

/* wider media: break out of the text column */
.hero-video, .platform-panel .stage-soft, .section .media-row, .roles, .explore, .post-list, .tiers {
  width: min(var(--wide, 1400px), calc(100vw - 2 * var(--gutter)));
  max-width: none; position: relative; left: 50%; translate: -50% 0; }
.platform-panel .stage-soft { --wide: 1320px; }
.roles, .explore, .post-list, .tiers { --wide: 1320px; }
.platform-panel .stage-soft[style] { --wide: 1040px; }

/* stone photo backgrounds: one section per page, text on a soft white panel */
.stone-bg { background-color: #e9e9e7; background-image: var(--sj); background-image: image-set(var(--sw) type("image/webp"), var(--sj) type("image/jpeg")); background-size: cover; background-position: center; }
.stone-bg > .wrap { max-width: 820px; background: rgba(255,255,255,0.95); border-radius: 32px; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); box-shadow: 0 30px 80px -40px rgba(0,0,0,0.4); }
.stone-bg h2 { color: var(--ink); }
.stone-bg p { color: var(--ink-2); }
@media (max-width: 600px) { .stone-bg { padding-left: 12px; padding-right: 12px; } }

/* chat mockup for the MCP section (generic, no assistant branding) */
.chat-window { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.22); border: 1px solid var(--hair); }
.chat-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.chat-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e2e2e2; }
.chat-bar em { margin-left: 8px; font: 400 13px var(--font); font-style: normal; color: var(--muted); }
.chat-body { padding: 24px; display: grid; gap: 16px; font-size: 15px; line-height: 1.55; }
.msg { margin: 0; }
.msg.me { justify-self: end; max-width: 80%; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 20px 20px 6px 20px; }
.msg.ai { max-width: 94%; }
.msg.ai p { margin: 0 0 10px; color: var(--ink); }
.msg .tool { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted) !important; background: var(--soft); padding: 4px 12px 4px 6px; border-radius: 999px; }
.msg .tool .orb-art { width: 16px; box-shadow: none; }
.chat-card { background: var(--soft); border-radius: 16px; padding: 14px 16px; margin: 4px 0 12px; display: grid; gap: 4px; }
.chat-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-wait { font: 500 12px var(--font); background: var(--warn-soft); color: var(--warn); padding: 2px 10px; border-radius: 999px; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-actions span { font-size: 13px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hair-2); }

/* ---------- motion (only with .motion, i.e. not prefers-reduced-motion) ---------- */
[id] { scroll-margin-top: 84px; }
.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.motion .reveal.is-visible { opacity: 1; transform: none; }
.motion .reveal-scale { opacity: 0; transform: scale(.96); transform-origin: 50% 60%; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.motion .reveal-scale.is-visible { opacity: 1; transform: none; }
.motion .hero-video { animation: settle .9s cubic-bezier(.2,.7,.2,1) .35s both; }
@keyframes settle { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.motion h1.lines:not([data-lines]) { opacity: 0; }
h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
h1 .line > span { display: inline-block; }
.motion h1.lines .line > span { transform: translateY(105%); opacity: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease; transition-delay: var(--d, 0ms); }
.motion h1.lines.lines-in .line > span { transform: none; opacity: 1; }
.motion h1.lines.no-anim .line > span { transition: none; transform: none; opacity: 1; }
.count { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.motion .platform-panel:not([hidden]), .motion .role-panel:not([hidden]) { animation: xfade .45s ease-out both; }
@keyframes xfade { from { opacity: 0; } to { opacity: 1; } }
.explore .tile { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.explore a:hover .tile, .explore a:focus-visible .tile { transform: translateY(-6px); }
.mcard { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.mcard:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .hero-video, h1 .line > span, .platform-panel, .role-panel { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .explore a:hover .tile, .mcard:hover { transform: none; }
}

/* nav: secondary "Try the demo" link */
.nav-try { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-2); padding: 8px 4px; white-space: nowrap; }
.nav-try:hover { text-decoration-color: currentColor; }
@media (max-width: 1023px) { .nav-try { font: 500 18px var(--font); padding: 6px 4px; } }

/* near-full-bleed imagery: text keeps its measure, images go wide */
:root { --edge: clamp(12px, 1.6vw, 24px); }
.page-hero-photo, .post-feature figure, .hero-video, .platform-panel .stage-soft, .section .media-row {
  width: min(var(--bleed, 2200px), calc(100vw - 2 * var(--edge))); max-width: none; position: relative; left: 50%; translate: -50% 0; margin-left: 0; margin-right: 0; }
.hero-video, .platform-panel .stage-soft { --bleed: 1680px; }
.platform-panel .stage-soft[style] { --bleed: 1100px; }
.page-hero-photo { border-radius: 20px; margin-top: 64px; }
.page-hero-photo img { width: 100%; height: clamp(320px, 52vw, 860px); max-height: none; object-fit: cover; object-position: var(--focus, 50% 55%); }
.post-feature figure { margin-top: 0; }
.post-photo img { border-radius: 20px; aspect-ratio: 21 / 9; object-position: var(--focus, 50% 50%); }
.hero-video { border-radius: 28px; }
.section .media-row { grid-auto-columns: minmax(280px, 1fr); }
@media (max-width: 700px) {
  .page-hero-photo img { height: 62vw; min-height: 260px; }
  .post-photo img { aspect-ratio: 4 / 3; }
  .page-hero-photo, .post-feature figure { border-radius: 16px; }
}
/* the hero sits inside .wrap; let its video break out without changing the text column */
.hero .wrap { overflow: visible; }
.site-nav ul a, .site-nav .btn { white-space: nowrap; }
.site-nav ul a { padding: 8px 10px; }
@media (max-width: 1023px) {
  .js .nav-toggle { display: inline-flex; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 4px 0 20px; margin-left: 0; }
  .site-nav ul { flex-direction: column; }
  .site-nav ul a { padding: 12px 4px; font: 500 24px var(--display); letter-spacing: -0.02em; border-radius: 10px; }
  .js .site-nav:not(.open) { display: none; }
  .nav-try { font: 500 18px var(--font); }
}

/* form sending state */
.form [hidden], .nl-form [hidden] { display: none !important; }
.btn.is-busy { opacity: .75; cursor: progress; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; transform: none; }
.btn.is-busy:hover::after { transform: none; }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.form-error { color: var(--bad); font-weight: 500; margin: 0; }
.form-error:empty { display: none; }
.form-error a, .nl-error a { color: inherit; }

/* ======================================================================
   Spacing system (v5.1). One scale, used everywhere below:
   4 8 12 16 24 32 48 64 96 128. Section padding: 128 desktop, 96 tablet,
   64 phone. Two radii for surfaces: 24 (cards, media, panels) and 12
   (inner frames, inputs, chips). Pills are fully round.
   ====================================================================== */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: var(--s10);
  --stack-gap: var(--s8);      /* section intro -> content */
  --split-gap: var(--s9);      /* two-column layouts */
  --card-pad: var(--s6);
  --grid-gap: var(--s4);
  --gutter: var(--s7);
  --r-lg: 24px; --r-sm: 12px;
  --btn-h: 48px;
}
@media (max-width: 1023px) { :root { --section-y: var(--s9); --split-gap: var(--s8); --gutter: var(--s6); } }
@media (max-width: 599px)  { :root { --section-y: var(--s8); --stack-gap: var(--s7); --split-gap: var(--s7); --card-pad: var(--s5); --gutter: 20px; } }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* sections: identical top and bottom everywhere */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section.flush-top { padding-top: 0; }
.hero { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.page-hero { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) / 2); }
.page-hero + .section, .page-hero + .post-feature + .section, .page-hero + .post-feature { padding-top: calc(var(--section-y) / 2); }
.post-feature { padding-bottom: 0; }
.post-section { padding-top: var(--s8); }

/* intro stacks: eyebrow 16 -> heading 24 -> subline 32 -> actions */
.eyebrow, .chapter { margin: 0 0 var(--s4); line-height: 1.4; }
h1, h2 { margin: 0 0 var(--s5); }
h3 { margin: 0 0 var(--s3); }
.lede { margin: 0; }
.lede + .lede { margin-top: var(--s4); }
.lede + p, p + .lede { margin-top: var(--s4); }
.hero .btn-row, .page-hero .btn-row, .cta-band .btn-row, .section-head .btn-row, .split > div > .btn-row { margin-top: var(--s6); }
.hero-note, .page-hero .small { margin: var(--s5) 0 0; }
.section-head { margin-bottom: var(--stack-gap); }
.section-head > :last-child, .page-hero .wrap > :last-child, .cta-band .wrap > :last-child { margin-bottom: 0; }
.split > div > :last-child, .grid-2 > div > :last-child { margin-bottom: 0; }
.split > div > h2 + p, .split > div > h2 + .lede { margin-top: 0; }

/* layout gaps */
.grid-2, .split { gap: var(--split-gap); }
.grid-3, .grid-4, .outcomes, .promises, .tiers, .findings-list, .stat-row, .explore, .loop { gap: var(--grid-gap); }
.post-list { gap: var(--s7) var(--s5); }
.media-row { gap: var(--s4); }
.free-list { gap: var(--s2); }

/* cards: equal internal padding and heights within a row */
.card, .outcomes li, .promises li, .findings-list li, .stat-row > div, .tier { padding: var(--card-pad); border-radius: var(--r-lg); }
.loop li { padding: var(--s5); border-radius: var(--r-lg); }
.outcomes, .promises, .findings-list, .grid-3, .grid-4, .tiers, .explore, .loop, .stat-row { align-items: stretch; }
.promises li::before, .findings-list li::before, .loop li::before { margin-bottom: var(--s5); }
.tier h3 { margin-bottom: var(--s5); }
.tier .annual { margin: var(--s3) 0 var(--s5); }
.free-list li { padding: var(--s5); border-radius: var(--r-lg); gap: var(--s2) var(--s6); }

/* radii: 24 for surfaces and media, 12 for inner frames and inputs */
.frame, .hero-video .frame, .stage-soft .frame { border-radius: var(--r-sm); }
.hero-video, .stage-soft, .role-pane, .mcard, .chat-window, .calc, .explore .tile, .page-hero-photo, .post-photo img, .post-row-photo img, .video-placeholder, .table-wrap, .post-newsletter, .stone-bg > .wrap, .callout, .card:has(form) { border-radius: var(--r-lg); }
.film-screen { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.film-bar { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.field input, .field select, .field textarea { border-radius: var(--r-sm); }
.stage-soft { padding: var(--s7); }
.hero-video { padding: var(--s6); margin-top: var(--s8); }
@media (max-width: 599px) { .stage-soft, .hero-video { padding: var(--s3); } .hero-video { margin-top: var(--s7); } }

/* figures: one caption gap */
figcaption, .caption { margin-top: var(--s3); }
.hero-video figcaption { margin: var(--s3) 0 0; }

/* buttons: one height; text links match it */
.btn { min-height: var(--btn-h); padding: 0 var(--s5); }
.btn-sm, .site-nav .btn { min-height: 40px; padding: 0 var(--s4); }
.btn-text { min-height: var(--btn-h); }
.btn-row { gap: var(--s3) var(--s5); }

/* stone panel */
.stone-bg > .wrap { padding: var(--s8) var(--s7); }
@media (max-width: 599px) { .stone-bg > .wrap { padding: var(--s7) var(--s5); } }

/* phone: 44px tap targets */
@media (max-width: 1023px) {
  .brand { min-height: 44px; }
  .nav-toggle { min-height: 44px; }
  .site-nav .btn { min-height: 44px; }
  .nav-try { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 599px) {
  .vid-toggle, .film-toggle, .watch-full.btn-sm { min-height: 44px; min-width: 44px; }
  .seg button, .blog-filter button, .calc-spend label { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-cols a, .links-inline a, .role-foot a, .post-aside a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-cols ul { gap: 0; }
}

/* utilities on the scale (replace former inline styles) */
.top { align-items: start; }
.mt-4 { margin-top: var(--s4) !important; } .mt-5 { margin-top: var(--s5) !important; } .mt-6 { margin-top: var(--s6) !important; } .mt-7 { margin-top: var(--s7) !important; }
.flush-bottom { padding-bottom: 0 !important; }
.flush-top { padding-top: 0 !important; }
.measure { max-width: 720px; }
.measure-wide { max-width: 960px; }
.block-center { margin-left: auto; margin-right: auto; }
.stack-after { margin-bottom: var(--stack-gap); }
.links-inline.left { justify-content: flex-start; }
main dl dd { margin: var(--s1) 0 var(--s4); }
.section-tint .promises li { background: #fff; }
.flush { margin: 0; } main dl dd:last-child { margin-bottom: 0; }
.hero h1 { margin: 0 auto var(--s5); }
.post-meta { margin-top: var(--s5); }
.newsletter h2 { margin-bottom: var(--s3); }
.post-sources { margin-top: var(--s8); padding-top: 0; }
.post-sources h2 { margin-bottom: var(--s4); }
.post-nav { margin-top: var(--s8); }
.post-newsletter { margin: var(--s8) 0; padding: var(--s7) var(--s5); }
.post-grid { gap: var(--s8); }
.page-hero .eyebrow, .hero .eyebrow { margin-bottom: var(--s4); }

/* QA fixes */
.findings-list, .outcomes, .promises, .grid-3, .grid-4, .stat-row { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.outcomes, .grid-3 { --cols: 3; } .promises, .grid-4 { --cols: 4; } .stat-row { --cols: 3; }
@media (max-width: 1000px) { .promises, .grid-4 { --cols: 2; } }
@media (max-width: 900px) { .findings-list, .outcomes, .grid-3, .stat-row { --cols: 1; } }
@media (max-width: 560px) { .promises, .grid-4 { --cols: 1; } }
.findings-list li, .findings-list p { min-width: 0; overflow-wrap: break-word; }
.count { white-space: normal; max-width: 100%; }
@media (max-width: 700px) { .stack-table tbody th, .cmp-table tbody th { width: auto; } }
input::placeholder, textarea::placeholder { color: #6b6b6b; opacity: 1; }
.ext { display: inline-block; margin-left: 0.3em; font-size: 0.9em; line-height: 1; }
.wrap > .section-head:last-child { margin-bottom: 0; }


/* Integrations page */
.int-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--s5); margin: 0; padding: var(--s7); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--p-lilac), var(--p-sky) 55%, var(--p-mint)); }
.int-col { display: flex; flex-direction: column; gap: var(--s3); }
.int-chip { display: block; padding: var(--s3) var(--s4); border-radius: 8px; background: rgba(255,255,255,0.75); font: 500 15px var(--font); text-align: center; color: var(--ink-2); }
.int-dest { background: #fff; color: var(--ink); border-left: 3px solid var(--accent); }
.int-arrow { width: var(--s8); height: 2px; background: var(--ink); position: relative; }
.int-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.int-core { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; padding: var(--s6) var(--s5); border-radius: var(--r-lg); background: rgba(255,255,255,0.75); }
.int-core strong { font: 600 20px var(--display); letter-spacing: -0.02em; }
.int-core span:last-child { font-size: 14px; color: var(--ink-2); }
.int-orb { --c: var(--o-indigo); width: var(--s9); }
.int-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.int-steps .card { display: flex; flex-direction: column; gap: var(--s2); }
.int-steps h3 { margin: 0; }
.int-steps p { margin: 0; }
.int-ico { display: grid; place-items: center; width: var(--s9); height: var(--s9); border-radius: var(--r-sm); background: var(--p-sky); margin-bottom: var(--s3); }
.int-ico svg { width: 48px; height: 48px; }
.int-n { font: 500 13px var(--font); color: var(--muted); }
@media (max-width: 1000px) { .int-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .int-flow { grid-template-columns: 1fr; padding: var(--s5); gap: var(--s4); }
  .int-arrow { width: 2px; height: var(--s6); justify-self: center; }
  .int-arrow::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0; }
  .int-steps { grid-template-columns: 1fr; }
}

/* Early preview: one-line banner above the header, and a pill next to the wordmark. */
.preview-banner { background: var(--ink); color: #fff; font-size: 14px; line-height: 1.45; }
.preview-banner .wrap { padding-top: var(--s2); padding-bottom: var(--s2); text-align: center; }
.preview-banner p { margin: 0; }
.preview-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.preview-pill { flex: none; margin-left: var(--s2); padding: 2px var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 12px var(--font); white-space: nowrap; }
.hero .eyebrow .status { margin-right: var(--s2); }
@media (max-width: 560px) { .preview-banner { font-size: 13px; } .preview-pill { display: none; } }

.calc-example { margin: var(--s3) 0 0; font-size: 14px; }
.calc-example[hidden] { display: none; }
.calc-note p { margin: 0 0 var(--s2); }
.calc-note p:last-child { margin-bottom: 0; }

/* Header submenu (Onboarding → Bridge) */
.site-nav .has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle { display: inline-grid; place-items: center; width: 24px; height: 32px; margin-left: -6px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.sub-toggle::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sub-toggle[aria-expanded="true"]::before { transform: translateY(1px) rotate(225deg); }
.sub-toggle:hover { background: var(--soft); color: var(--ink); }
.site-nav .sub { display: none; position: absolute; top: 100%; left: 0; z-index: 60; flex-direction: column; min-width: 220px; margin: 0; padding: var(--s2); list-style: none; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-sm); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.18); }
.site-nav .has-sub:hover > .sub, .site-nav .has-sub:focus-within > .sub, .site-nav .has-sub.is-open > .sub { display: flex; }
.site-nav .has-sub[data-closed] > .sub { display: none; }
.site-nav .has-sub.is-current > a { color: var(--ink); }
@media (max-width: 1023px) {
  .site-nav .has-sub { flex-wrap: wrap; }
  .sub-toggle { display: none; }
  .site-nav .sub, .site-nav .has-sub:hover > .sub, .site-nav .has-sub[data-closed] > .sub { display: flex; position: static; flex-basis: 100%; min-width: 0; padding: 0 0 0 var(--s5); border: 0; box-shadow: none; background: transparent; }
  .site-nav .sub a { font-size: 19px; }
}

/* Link cards (Who it's for hub) and the indented submenu item */
.card-link { display: block; color: inherit; text-decoration: none; transition: background-color .2s, transform .3s; }
.card-link:hover { background: var(--soft-2); }
.card-link h3::after { content: " →"; color: var(--muted); }
.card-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.site-nav .sub .sub-indent a { padding-left: var(--s6); font-size: 13px; color: var(--muted); }
@media (max-width: 1023px) { .site-nav .sub .sub-indent a { padding-left: var(--s5); font-size: 16px; } }

/* ---------- Header fit, 1024–1279px: inline nav stays, a little tighter ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-inner { gap: var(--s4); }
  .preview-pill { display: none; }
  .site-nav { gap: var(--s2); }
  .site-nav ul a { padding: 8px 7px; }
  .sub-toggle { margin-left: -4px; }
  .site-nav .btn-sm { padding: 0 var(--s3); }
}
/* With JS, phones and tablets use the panel below instead of the inline nav. */
@media (max-width: 1023px) { .js .site-nav { display: none !important; } }

/* ---------- Menu panel (below 1024px) ---------- */
.mnav { position: fixed; inset: 0; z-index: 200; }
.mnav[hidden] { display: none; }
.mnav-backdrop { position: absolute; inset: 0; background: rgba(13,13,13,0.45); opacity: 0; transition: opacity .2s ease; }
.mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -24px 0 48px -24px rgba(0,0,0,0.25); transform: translateX(24px); opacity: 0; transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.mnav.is-open .mnav-backdrop { opacity: 1; }
.mnav.is-open .mnav-panel { transform: none; opacity: 1; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: 0 var(--s4) 0 var(--s5); border-bottom: 1px solid var(--hair); }
.mnav-close { position: relative; width: 44px; height: 44px; border: 1px solid var(--hair-2); border-radius: 999px; background: #fff; cursor: pointer; }
.mnav-close span::before, .mnav-close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.mnav-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.mnav-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mnav-close:hover { background: var(--soft); }
.mnav-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) var(--s5) var(--s5); }
.mnav-label { margin: var(--s5) 0 var(--s1); font: 500 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mnav-body ul { list-style: none; margin: 0; padding: 0; }
.mnav-body a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); margin: 0 calc(var(--s3) * -1); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font: 500 17px/1.3 var(--font); }
.mnav-body a:hover { background: var(--soft); }
.mnav-body a[aria-current="page"] { background: var(--soft-2); }
.mnav-foot { display: grid; gap: var(--s2); padding: var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: #fff; }
.mnav-foot .btn { width: 100%; justify-content: center; }
html.menu-open, html.menu-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mnav-backdrop, .mnav-panel { transition: none; } }
@media (min-width: 1024px) { .mnav { display: none !important; } }

/* Footer: the prominent "Talk to us" (moved out of the desktop header) */
.footer-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); color: var(--ink); font-weight: 500; }
.footer-cols .footer-cta .btn { color: #fff; }

/* Home: Bridge flow */
.bridge-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.bridge-flow li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--r-sm); background: #fff; font: 500 15px/1.3 var(--font); color: var(--ink); }
.bridge-flow li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.bridge-out { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s4) 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bridge-out strong { color: var(--ink-2); font-weight: 500; }
.bridge-out-icon { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .bridge-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Brand illustrations (transparent WebP; PNG fallback) */
.art { display: block; }
.art img { display: block; width: 100%; height: auto; }
.art-hero-stone { width: clamp(200px, 24vw, 340px); margin: 0 auto var(--s4); }
.art-bridge-hero { width: min(440px, 80%); margin: 0 auto var(--s5); }
.art-bridge-home { width: min(520px, 100%); margin: 0 auto var(--s5); }
.art-404 { width: min(320px, 70%); margin: 0 0 var(--s5); }
.art-contact { width: min(300px, 70%); margin-top: var(--s6); }
.art-page-hero { width: min(360px, 70%); margin: 0 auto var(--s5); }
.art-section { width: clamp(160px, 18vw, 240px); margin: 0 0 var(--s4); }
.section-head .art-section, .center .art-section { margin-left: auto; margin-right: auto; }
.art-section.art-wide { width: min(420px, 80%); }
.art-card { width: 160px; margin: 0 0 var(--s3); }
.art-newsletter { width: 120px; margin: 0 0 var(--s3); }
.newsletter .art-newsletter { margin-left: auto; margin-right: auto; }
.grid-stretch { align-items: stretch; }

/* ---------- two-door home hero ---------- */
.hero-split h1 { max-width: none; text-wrap: balance; }
.hero-split .lede { text-wrap: balance; }
/* Two set lines from tablet up; on phones the headline wraps naturally. */
@media (min-width: 768px) { .hero-split .hl-line { display: block; white-space: nowrap; } }
.doors { display: grid; gap: var(--s5); margin: var(--s8) auto 0; max-width: 1120px; text-align: left; }
.door { display: flex; flex-direction: column; gap: var(--s5); padding: clamp(28px, 3.2vw, 44px); border: 1px solid var(--hair); border-radius: 24px; background: #fff; }
.door-main { background: var(--soft); border-color: transparent; }
.door h2 { margin: 0 0 var(--s3); font-size: clamp(28px, 2.6vw, 36px); }
.door p { margin: 0; color: var(--ink-2); max-width: 32em; }
.door .btn-row { justify-content: flex-start; margin-top: var(--s5); gap: var(--s3); }
.door-main > .btn-row { margin-top: 0; }
.door-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; color: var(--ink); text-underline-offset: 4px; }
.door-kicker { font: 500 14px/1.4 var(--font); color: var(--accent) !important; margin-bottom: var(--s2) !important; }
.door-text { flex: 1; min-width: 0; }
.door-art { width: 168px; flex: none; }
.door-main .door-art { order: -1; }
.proof-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); margin: var(--s6) auto 0; padding: 0; color: var(--muted); font-size: 15px; }
.proof-strip li { display: inline-flex; align-items: center; gap: var(--s2); }
.proof-strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 1024px) {
  .doors { grid-template-columns: 11fr 9fr; }
  .door { padding: 36px; }
  .door-main { display: grid; grid-template-columns: 1fr auto; align-items: center; align-content: center; column-gap: var(--s6); row-gap: 0; }
  .door-main .door-art { order: 0; width: 220px; }
  .door-main > .btn-row { grid-column: 1 / -1; margin-top: var(--s6); }
  .door-bridge .door-art { width: 200px; }
}

/* ---------- header "Try" button and its menu ---------- */
.try-menu { position: relative; }
.try-chev { width: 12px; height: 12px; margin-right: -4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.try-toggle[aria-expanded="true"] .try-chev { transform: rotate(180deg); }
.site-nav .try-list { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 264px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 18px 48px -18px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.04); }
.site-nav .try-menu.is-open .try-list { display: block; }
.site-nav .try-item { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.site-nav .try-item:hover, .site-nav .try-item:focus-visible { background: var(--soft); }
.try-name { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.35 var(--font); white-space: nowrap; }
.try-name .ext { color: var(--muted); font-size: 12px; }
.try-desc { font-size: 13px; line-height: 1.35; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .try-chev { transition: none; } }

/* ---------- "Works with" (home Bridge section) ---------- */
.works-with { margin-top: var(--s8); padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #fff; }
.works-with h3 { margin: 0 0 var(--s2); font-size: 22px; }
.works-with > p:first-of-type { margin: 0 0 var(--s5); color: var(--ink-2); max-width: 40em; }
.ww-groups { display: grid; gap: var(--s4); margin: 0 0 var(--s5); }
.ww-groups > div { display: grid; gap: var(--s2); }
.ww-groups dt { font: 500 13px/1.4 var(--font); color: var(--muted); }
.ww-groups dd { margin: 0; }
.ww-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.ww-chips li { padding: 4px 10px; border-radius: 6px; font: 500 14px/1.3 var(--font); color: var(--ink-2); background: var(--soft); }
.ww-chips li:has(.ww-own) { background: var(--accent-soft); color: var(--accent); }
.works-with .small { margin: 0 0 var(--s2); }
@media (min-width: 1024px) { .ww-groups > div { grid-template-columns: 180px 1fr; align-items: baseline; } }

/* ---------- home page trims ---------- */
.promises.promises-3 { --cols: 3; }
@media (max-width: 767px) { .promises.promises-3 { --cols: 1; } }
.faq-more { margin: var(--s5) 0 0; font-weight: 500; }
/* Compact newsletter strip at the top of the footer */
.site-footer .newsletter-compact { display: grid; gap: var(--s4) var(--s7); max-width: none; padding: var(--s7) 0; border-bottom: 1px solid var(--hair); text-align: left; }
.newsletter-compact h2 { margin: 0 0 var(--s1); font-size: 22px; }
.newsletter-compact p { margin: 0; }
.newsletter-compact .nl-form { width: 100%; max-width: 460px; }
.newsletter-compact .nl-privacy { margin-top: var(--s2); font-size: 13px; }
@media (min-width: 1024px) { .site-footer .newsletter-compact { grid-template-columns: 1fr 460px; align-items: start; } }

/* ---------- no hover dimming on video ---------- */
/* The browser's own controls on the modal player draw a dark gradient over the picture on hover.
   Keep the controls, drop the gradient; the play button scaling is the only hover cue. */
.player-video::-webkit-media-controls-panel { background-image: none !important; background-color: transparent !important; }
.player-video::-webkit-media-controls-enclosure { background: none !important; }
.player-video::-webkit-media-controls-overlay-enclosure { background: none !important; }
.hv-wrap video, .role-media video, .role-media img { filter: none !important; }
.hv-sound, .vid-toggle { transition: transform .15s ease; }
.hv-sound:hover, .vid-toggle:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .hv-sound:hover, .vid-toggle:hover { transform: none; } }

/* Role cards on Who it's for */
#roles .card { background: #fff; }
#roles .links-inline { justify-content: flex-start; margin-top: auto; }
#roles .card { display: flex; flex-direction: column; }

/* Brand film button in the home hero, on its own row */
.hero-story { margin: var(--s5) 0 0; display: flex; justify-content: center; }
#roles .role-watch { margin: auto 0 0; padding-top: var(--s4); }
#roles .role-watch + .links-inline { margin-top: var(--s3); }

/* Home hero: the company line under the headline reads as its own line */
.hero-split .hl-sub { display: block; color: var(--ink); font-weight: 500; }
.footer-tagline { margin: var(--s3) 0 var(--s1); font-weight: 500; color: var(--ink); }

/* ---------- home: pay-app proof ---------- */
.proof { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) { .proof { grid-template-columns: 5fr 7fr; } }
.proof-text h2 { margin-top: 0; }
.proof-notes { list-style: none; counter-reset: pin; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s3); }
.proof-notes li { counter-increment: pin; position: relative; padding-left: 40px; color: var(--ink-2); }
.proof-notes li::before { content: counter(pin); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 13px/26px var(--font); text-align: center; }
.proof-shot { margin: 0; }
.proof-frame { position: relative; border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.3); background: #fff; }
.proof-frame img { display: block; width: 100%; height: auto; border-radius: 14px; }
.proof-pin { position: absolute; left: -13px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 13px/26px var(--font); text-align: center; box-shadow: 0 0 0 3px #fff; }
.proof-shot figcaption { margin-top: var(--s3); font-size: 14px; color: var(--muted); }
.proof-text .links-inline { justify-content: flex-start; }
.proof-pin { left: -10px; width: 20px; height: 20px; margin-top: -10px; font-size: 11px; line-height: 20px; box-shadow: 0 0 0 2px #fff; }
@media (min-width: 1024px) { .proof-pin { left: -36px; width: 26px; height: 26px; margin-top: -13px; font-size: 13px; line-height: 26px; } }

.footer-email { margin: var(--s3) 0 0; }
.footer-email a { color: var(--ink); }

/* platform tabs on wide screens: tabs and text on the left (30%), centered against the screen on the right (70%).
   The empty 1fr rows above and below the left column do the centering.
   Each open panel spans the grid as a subgrid, so its text sits under the tabs and its screen beside them. */
@media (min-width: 960px) {
  .platform-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto auto 1fr auto;
    column-gap: clamp(32px, 4vw, 64px); align-items: start; text-align: left;
    width: min(1440px, calc(100vw - 2 * var(--gutter))); position: relative; left: 50%; translate: -50% 0; }
  .platform-split .seg { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    margin: 0 0 16px; padding: 0; background: none; border-radius: 0; }
  .platform-split .seg button { justify-content: flex-start; text-align: left; min-height: 44px; padding: 10px 18px; border-radius: 14px; font-size: 16px; }
  .platform-split .seg button:not([aria-selected="true"]):hover { color: var(--ink); background: rgba(255,255,255,0.5); }
  .platform-split .platform-panel:not([hidden]) { grid-column: 1 / -1; grid-row: 1 / 6; display: grid;
    grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none; }
  .platform-split .platform-panel > * { pointer-events: auto; }
  .platform-split .platform-panel > p { grid-column: 1; grid-row: 3; max-width: none; margin: 0 0 12px; padding: 0 18px; font-size: 16px; line-height: 1.55; }
  .platform-split .platform-panel > .links-inline { grid-row: 4; margin: 0; justify-content: flex-start; text-align: left; }
  .platform-split .platform-panel .stage-soft { grid-column: 2; grid-row: 1 / 6; width: auto; max-width: none; left: auto; translate: none; margin: 0; padding: var(--s5); }
  .platform-split > .caption { grid-column: 2; grid-row: 6; text-align: left; }
}

/* Skip-link target: focus moves to <main>, which needs no visible ring. */
#main:focus { outline: none; }
/* Long page headlines (e.g. /bridge/) wrap to fewer lines on phones. */
.page-hero h1.h1-long { font-size: clamp(32px, 5.2vw, 64px); max-width: 18em; margin-left: auto; margin-right: auto; }
/* Links under the role videos: full tap height. */
.role-foot a { display: inline-flex; align-items: center; min-height: 44px; }