/* ------------------------------------------------------------------
   Motion tokens. motion.js reads the same curves, so a scrubbed move
   and a triggered transition that share a name share a shape.
   ------------------------------------------------------------------ */
:root {
  --t-micro: 120ms;   /* press, hover */
  --t-state: 240ms;   /* a control changes state */
  --t-bind: 520ms;    /* data arrives in a component */
  --t-exit: 180ms;    /* exits run about a third of the entrance */
  --stagger: 70ms;    /* between siblings; capped at 4 */

  --e-out: cubic-bezier(.16, 1, .3, 1);    /* arrivals: fast start, long settle */
  --e-in: cubic-bezier(.7, 0, .84, 0);     /* exits: accelerate away */
  --e-move: cubic-bezier(.65, 0, .35, 1);  /* travel from A to B */
  /* --spring and --spring-bouncy are written by motion.js as linear() curves */

  --ink: #0b0b0c; --ink-2: #505055; --ink-3: #a1a1a6; --line: #e6e6ea;
  --bg: #fff; --bg-2: #f5f5f7; --blue: #0a7cff; --green: #1fa65a; --red: #ff3b30;
  --warm: #f7f5f1;
}

@font-face { font-family: Sohne; src: url(assets/soehne-buch.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: Sohne; src: url(assets/soehne-kraftig.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: Roboto; src: url(assets/roboto-latin-var.woff2) format("woff2"); font-weight: 100 900; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font: 400 17px/1.45 Sohne, -apple-system, system-ui, sans-serif; color: var(--ink); background: var(--bg); overflow-x: hidden; }
.mono, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
b, strong, h1, h2 { font-weight: 600; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.dim { color: var(--ink-3); }
.glyph { width: 1em; height: 1.15em; fill: currentColor; display: inline-block; vertical-align: -0.15em; }

/* ---------------- nav ---------------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(6vw, 32px); background: rgba(255,255,255,.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  transition: background var(--t-state) var(--e-out), color var(--t-state) var(--e-out); }
.nav.on-dark { background: rgba(10,10,11,.6); color: #fff; }
.logo { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 18px; }
.logo .glyph { font-size: 20px; }
.links { display: flex; gap: 26px; font-size: 14px; font-weight: 600; }

/* ---------------- scenes ---------------- */
.scene { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 104px max(6vw, 32px) 40px; }
.plain { padding: 140px max(6vw, 32px); }
.head h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.03em; }
.head p { margin-top: 18px; color: var(--ink-2); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; letter-spacing: -.012em; max-width: 720px; }
.head.center { text-align: center; }
.head.center p { margin-left: auto; margin-right: auto; }
.dark { background: #0a0a0b; color: #f5f5f7; }
.dark .head p { color: #a1a1a6; }

/* narration: the body copy, split into beats, lit in step with the scene */
.narr { list-style: none; display: grid; gap: .5em; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.28; letter-spacing: -.015em; }
.narr li { position: relative; padding-left: 20px; opacity: .2; transition: opacity var(--t-state) var(--e-out); }
.narr li::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--blue); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--t-exit) var(--e-in); }
.narr li.past { opacity: .4; }
.narr li.on { opacity: 1; }
.narr li.on::before { transform: none; transition: transform var(--t-bind) var(--e-out); }
.head > .narr { margin-top: 26px; }
.head.split { display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; column-gap: 5vw; align-items: start; max-width: 1280px; }
.head.split .narr { padding-top: 6px; }

.btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 23px; font-weight: 600; font-size: 16px; background: #ececef;
  transition: transform var(--t-micro) var(--e-out), background var(--t-micro); }
.btn.primary { background: var(--blue); color: #fff; }
.btn:active { transform: scale(.96); }
.ctas { display: flex; gap: 10px; margin-top: 28px; }

.ph-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.ph-title .mono { font-weight: 400; font-size: 12px; }

/* ---------------- 1 · hero ---------------- */
.hero .stage { display: grid; grid-template-columns: minmax(400px, 620px) minmax(380px, 1fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 0; }
.brow { color: var(--blue); font-weight: 600; font-size: 17px; }
.hero h1 { margin-top: 10px; font-size: clamp(46px, 4.5vw, 68px); line-height: 1; letter-spacing: -.04em; }
.intro { overflow: hidden; }
.lede { padding-top: 22px; font-size: 19px; color: #2a2a2e; max-width: 540px; }
/* the story lines take the lede's slot at full size once the story starts; nothing narrates in fine print */
.hero .beats { font-size: clamp(22px, 2.1vw, 30px); overflow: hidden; height: 0; opacity: 0; }
.hero .beats li:first-child { margin-top: 26px; }

/* The phone is drawn at iPhone 17 points (402 × 874) inside Apple's device frame,
   with SF Pro and SF Symbols, so the depicted app is built from the real parts. */
.device-wrap { position: relative; height: 100%; }
.device-scale { position: absolute; left: 50%; top: 50%; width: 402px; height: 874px; margin: -437px 0 0 -201px; transform: scale(var(--s, .85)); perspective: 2400px; }
.device { position: absolute; inset: 0; transform-style: preserve-3d; }
.frame { position: absolute; left: -24px; top: -23px; width: 450px; height: 920px; max-width: none; transform: translateZ(1px); pointer-events: none; }
.device::after { content: ""; position: absolute; inset: 10px 20px -30px; border-radius: 60px; box-shadow: 0 50px 80px -30px rgba(40,30,10,.35); transform: translateZ(-4px); opacity: var(--shadow, 1); pointer-events: none; }
.screen { position: absolute; inset: 0; border-radius: 55px; transform-style: preserve-3d; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #1c1c1e; letter-spacing: -.01em; }
.screen.flat { overflow: hidden; transform-style: flat; }
.layer { position: absolute; inset: 0; }
.l-bg { background: #eee8d8; border-radius: 55px; }
.status { height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 54px; }
.time { font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.sb-r { display: flex; gap: 6px; align-items: center; }
.sb-r .sf { height: 12px; }
.sb-r .sf-battery-100percent { height: 13px; margin-left: 1px; }
.home-ind { position: absolute; left: 134px; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: #1c1c1e; }
.api-plate { position: absolute; left: 24px; right: 24px; top: 740px; height: 30px; border-radius: 10px; border: 1.5px dashed #b9b2a3; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  font-size: 12px; opacity: 0; transition: opacity var(--t-exit) var(--e-in); }
.exploded .api-plate { opacity: 1; transition: opacity var(--t-bind) var(--e-out) 120ms; }
.api-plate .tag { position: static; }

.glass { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,253,248,.74); color: #1c1c1e;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.9), 0 0 0 .5px rgba(60,50,30,.08), 0 6px 18px -8px rgba(60,50,30,.28); }
.glass.circ { width: 44px; height: 44px; border-radius: 22px; }
.glass.circ .sf { height: 16px; }
.glass.circ.big { width: 62px; height: 62px; border-radius: 31px; }
.glass.circ.big .sf { height: 21px; }
.glass.pill { height: 44px; border-radius: 22px; padding: 0 15px; gap: 20px; }
.glass.pill .sf { height: 18px; }
.glass.pill.sm { height: 32px; border-radius: 16px; padding: 0 12px; gap: 6px; font-size: 14px; font-weight: 500; }
.glass.pill.sm .sf { height: 12px; }
.grow { flex: 1; }

.strip { position: absolute; left: 0; right: 0; display: flex; align-items: center; transition: background var(--t-exit), box-shadow var(--t-exit); }
.exploded .strip { background: rgba(250,247,240,.72); border-radius: 18px; box-shadow: 0 18px 40px -14px rgba(40,30,10,.3), 0 0 0 .5px rgba(40,30,10,.1); transition: background var(--t-bind) var(--e-out), box-shadow var(--t-bind) var(--e-out); }
.nav-strip { top: 56px; height: 48px; padding: 0 16px; }
.cats-strip { top: 110px; padding: 0 16px 6px; flex-direction: column; align-items: stretch; }
.cats-strip h3 { font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 41px; }
.chips { display: flex; gap: 8px; margin-top: 10px; font-size: 15px; }
.chips span { height: 34px; padding: 0 14px; border-radius: 17px; background: rgba(255,255,255,.62); display: flex; align-items: center; }
.chips .on { background: #1c1c1e; color: #fff; font-weight: 600; }
.promo { top: 208px; left: 16px; right: 16px; height: 78px; padding: 0 18px; border-radius: 20px; background: #3e3228; color: #f3ecdf; justify-content: space-between; }
.exploded .promo { background: #3e3228; }
.promo b { display: block; font-size: 17px; }
.promo span { font-size: 14px; opacity: .78; }
.promo .sf { height: 13px; }
.filter-strip { top: 294px; height: 36px; padding: 0 16px; gap: 8px; }
.filter-strip b { font-weight: 400; font-size: 14px; color: #8a857b; }
.tabbar { position: absolute; top: 780px; left: 16px; right: 12px; height: 62px; display: flex; gap: 10px; }
.tabs { flex: 1; height: 62px; border-radius: 31px; justify-content: space-between; padding: 0 5px; }
.tabs span { width: 70px; height: 52px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; }
.tabs .sf { height: 19px; }
.tabs .on { color: #0a84ff; background: rgba(60,50,30,.07); }
.l-tabbar .tag { left: 414px; }

.tag { position: absolute; left: 414px; background: var(--ink); color: #fff; font: 600 12px Sohne, system-ui, sans-serif; padding: 4px 9px; border-radius: 6px; white-space: nowrap; letter-spacing: 0;
  opacity: 0; transform: translateX(-6px); transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.exploded .tag { opacity: 1; transform: none; transition: opacity var(--t-bind) var(--e-out), transform var(--t-bind) var(--e-out); }
.exploded .l-cats .tag { transition-delay: 50ms; } .exploded .l-promo .tag { transition-delay: 100ms; } .exploded .l-filters .tag { transition-delay: 150ms; } .exploded .l-tabbar .tag { transition-delay: 200ms; }
.api-plate .tag { opacity: 1; transform: none; }

.l-brand .wordmark { position: absolute; top: 56px; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 17px; letter-spacing: -.02em; }

/* the product card: one element, three lives (grid tile, de-bound component, agent answer) */
.pc { position: absolute; background: #fff; border-radius: 22px; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 1px 2px rgba(60,50,30,.06), 0 12px 28px -16px rgba(60,50,30,.3); will-change: transform; }
.pimg { aspect-ratio: 4 / 3; border-radius: 15px; background: #ece6da; overflow: hidden; margin-bottom: 7px; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ln { align-self: flex-start; max-width: 100%; border-radius: 5px; line-height: 1.3; padding: 0 4px; margin: 0 -4px; }
.ln > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln.n { font-weight: 600; font-size: 15px; }
.ln.p { font-size: 15px; color: #8a857b; }
.chip { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 10px; padding: 3px 6px; border-radius: 5px; background: #fff; color: var(--blue); box-shadow: 0 0 0 1px rgba(10,124,255,.25); }

/* bind / unbind: the one state change every component makes on this page.
   Unbinding is an exit (short, ease-in, no stagger). Binding is an arrival
   (long, ease-out, staggered image → name → price → action). */
.pc img, .mc img, .ncard img { transition: opacity var(--t-exit) var(--e-in), filter var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.ln { transition: background-color var(--t-exit) var(--e-in); }
.ln > span { transition: opacity var(--t-exit) var(--e-in); }
.chip, .nbtn { transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.unbound img { opacity: 0; filter: blur(12px); transform: scale(1.08); }
.unbound .ln { background-color: #e9e4d9; }
.unbound .ln > span { opacity: 0; }
.unbound .nbtn { opacity: 0; transform: translateY(4px); }
.chip { opacity: 0; transform: translateY(3px); }
.unbound .chip { opacity: 1; transform: none; transition-duration: var(--t-state); transition-timing-function: var(--e-out); }
:not(.unbound) > .pimg img, :not(.unbound) > .mimg img, :not(.unbound) > .nimg img { transition-duration: var(--t-bind); transition-timing-function: var(--e-out); transition-delay: calc(var(--ci, 0) * var(--stagger)); }
.pc:not(.unbound) .ln, .mc:not(.unbound) .ln, .ncard:not(.unbound) .ln { transition-duration: var(--t-bind); transition-timing-function: var(--e-out); transition-delay: calc(var(--ci, 0) * var(--stagger) + 90ms); }
:not(.unbound) > .ln > span { transition-duration: var(--t-bind); transition-timing-function: var(--e-out); transition-delay: calc(var(--ci, 0) * var(--stagger) + 90ms); }
:not(.unbound) > .ln.p > span { transition-delay: calc(var(--ci, 0) * var(--stagger) + 160ms); }
.ncard:not(.unbound) .nbtn { transition-duration: var(--t-bind); transition-timing-function: var(--e-out); transition-delay: calc(var(--ci, 0) * var(--stagger) + 230ms); }

.l-under .car-bg { position: absolute; left: 12px; right: 12px; top: 240px; height: 306px; border-radius: 28px; background: rgba(255,255,255,.42); opacity: 0; transition: opacity var(--t-exit) var(--e-in); }
.l-under.on .car-bg { opacity: 1; transition: opacity var(--t-bind) var(--e-out); }
.car-bg i { position: absolute; bottom: 13px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #c3bcae; }
.l-chat > * { position: absolute; }
.hdr-l { left: 16px; top: 58px; } .hdr-r { right: 16px; top: 58px; }
.hdr-l .sf { height: 22px; }
.bubble { top: 120px; right: 16px; max-width: 300px; color: #1c1c1e; font-size: 17px; padding: 11px 15px; border-radius: 20px; opacity: 0; }
.typing { top: 182px; left: 20px; display: flex; gap: 5px; padding: 13px 14px; border-radius: 19px; background: rgba(255,255,255,.72); opacity: 0; transition: opacity var(--t-exit) var(--e-in); }
.typing i { width: 7px; height: 7px; border-radius: 4px; background: #9b968c; }
.typing.on { opacity: 1; transition: opacity var(--t-state) var(--e-out); }
.typing.on i { animation: dot 1.1s infinite ease-in-out; }
.typing.on i:nth-child(2) { animation-delay: .15s; } .typing.on i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.reply { top: 180px; left: 20px; width: 362px; font-size: 17px; line-height: 1.32; color: #3a3833; opacity: 0; transform: translateY(6px); transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.reply.on { opacity: 1; transform: none; transition: opacity var(--t-bind) var(--e-out), transform var(--t-bind) var(--e-out); }
.followups { top: 562px; left: 16px; right: 16px; display: grid; gap: 10px; }
.followups > * { opacity: 0; transform: translateY(6px); transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.followups.on > * { opacity: 1; transform: none; transition: opacity var(--t-bind) var(--e-out), transform var(--t-bind) var(--spring); }
.followups.on > * + * { transition-delay: var(--stagger); }
.sugg { display: flex; gap: 7px; align-items: center; font-size: 15px; color: #8a857b; padding-left: 4px; }
.sugg .sf { height: 7px; }
.followups span { height: 44px; border-radius: 22px; background: rgba(255,255,255,.75); font-size: 16px; display: flex; align-items: center; padding: 0 18px; }
.composer { left: 16px; right: 16px; top: 780px; height: 48px; display: flex; gap: 8px; opacity: 0; }
.composer .field { flex: 1; position: relative; background: #fbf8f0; border-radius: 24px; padding: 0 18px; font-size: 17px; display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(60,50,30,.08), 0 6px 16px -10px rgba(60,50,30,.3); }
.composer .ph { color: #aaa597; position: absolute; left: 18px; }
.composer .field.has .ph { display: none; }
.caret { width: 2px; height: 21px; background: #0a84ff; margin-left: 1px; opacity: 0; }
.composer .field.has .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.send { width: 48px; height: 48px; border-radius: 24px; background: #0a84ff; color: #fff; display: grid; place-items: center; }
.send .sf { height: 18px; }

/* the ratchet: the glyph is a hexagon, so a 60° turn lands on the same silhouette.
   Each tick springs past and settles, then waits. Metabind's own surfaces only; the
   customer's app is white-labeled and shows its own typing dots. */
@keyframes ratchet { 0% { transform: rotate(0); animation-timing-function: var(--spring-bouncy); } 60%, 100% { transform: rotate(60deg); } }
@keyframes blink { 50% { opacity: 0; } }
.tick-once { animation: ratchet-once 700ms var(--spring-bouncy); }
@keyframes ratchet-once { from { transform: rotate(-60deg); } to { transform: rotate(0); } }

/* ---------------- 2 · text → UI ---------------- */
.s-answer .stage { display: grid; grid-template-columns: minmax(340px, 440px) 1fr; gap: 5vw; align-items: center; }
/* the host is drawn in the site's schematic style (as on metabind.ai), not as an imitation of a real chat app */
.chatwin { justify-self: center; width: 700px; max-width: 100%; height: min(730px, 82vh); background: #ececec; border-radius: 26px; padding: 20px 32px; overflow: hidden; }
.lights { display: flex; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 6px; background: #ff736a; opacity: .7; }
.lights i + i { background: #ffc94d; } .lights i + i + i { background: #5fd068; }
.host-title { margin-top: 10px; font-weight: 600; font-size: 34px; letter-spacing: -.03em; color: #a0a0a0; }
.cw-body { padding-top: 8px; }
.ubub { margin-left: auto; width: fit-content; background: #fff; border-radius: 14px; padding: 10px 16px; font-size: 16px; }
.answer { position: relative; margin-top: 18px; height: 460px; }
.para { position: absolute; top: 0; left: 0; width: 600px; font-size: 18px; line-height: 1.62; }
.para .w { opacity: 0; }
.para .fact { white-space: nowrap; border-radius: 4px; background: linear-gradient(rgba(10,124,255,.16), rgba(10,124,255,.16)) no-repeat 0 0 / calc(var(--hl, 0) * 100%) 100%; }
.compare { position: absolute; top: 0; left: 0; width: 600px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.compare .col { border-radius: 16px; padding: 12px; background: rgba(255,255,255,0); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0); transition: box-shadow var(--t-exit) var(--e-in), background var(--t-exit); }
.compare.frame .col { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px -18px rgba(0,0,0,.25); transition: box-shadow var(--t-bind) var(--e-out), background var(--t-bind) var(--e-out); }
.cimg { aspect-ratio: 16 / 8.5; border-radius: 10px; overflow: hidden; background: #efede9; opacity: 0; margin-bottom: 8px; transition: opacity var(--t-exit) var(--e-in); }
.compare.frame .cimg { opacity: 1; transition: opacity var(--t-bind) var(--e-out); }
.cimg { position: relative; }
.cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; filter: blur(12px); transform: scale(1.08); transition: opacity var(--t-exit) var(--e-in), filter var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.compare.bound .cimg img { opacity: 1; filter: none; transform: none; transition: opacity var(--t-bind) var(--e-out), filter var(--t-bind) var(--e-out), transform var(--t-bind) var(--e-out); }
.compare.bound .col + .col .cimg img { transition-delay: var(--stagger); }
.slot { position: relative; width: fit-content; }
.slot::before { content: ""; position: absolute; inset: 1px -2px; border-radius: 4px; background: #eceae6; opacity: calc(var(--bar, 0)); }
.slot > span { position: relative; opacity: var(--txt, 0); }
.s-name { font-weight: 600; font-size: 16px; }
.s-price { font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid rgba(0,0,0,0); transition: border-color var(--t-exit); }
.compare.frame .row { border-top-color: #f0efec; transition: border-color var(--t-bind) var(--e-out); }
.row .k { color: var(--ink-3); opacity: 0; transition: opacity var(--t-exit); }
.compare.frame .row .k { opacity: 1; transition: opacity var(--t-bind) var(--e-out); }
.s-spec { font-size: 13px; }
.cbtn { margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: #fff; background: #1c1c1e; border-radius: 18px; padding: 8px; opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.compare.bound .cbtn { opacity: 1; transform: none; transition: opacity var(--t-bind) var(--e-out) 200ms, transform var(--t-bind) var(--spring) 200ms; }
.flyers { position: absolute; inset: 0; pointer-events: none; }
.flyer { position: absolute; font-size: 18px; line-height: 1.62; white-space: nowrap; transform-origin: 0 0; border-radius: 4px;
  background: linear-gradient(rgba(10,124,255,.16), rgba(10,124,255,.16)) no-repeat 0 0 / calc(var(--hl, 0) * 100%) 100%; opacity: 0; will-change: transform; }

/* ---------------- 3 · governance ---------------- */
.gov { position: relative; margin-top: 44px; display: grid; grid-template-columns: 420px 290px 1fr; gap: 64px; align-items: stretch; max-width: 1240px; }
.panel { border-radius: 18px; padding: 18px 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 50px -30px rgba(0,0,0,.25); position: relative; min-height: 380px; }
.panel.dark { background: #161618; color: #e8e8ea; box-shadow: none; }
.call { position: absolute; left: 20px; right: 20px; top: 52px; font-size: 14px; line-height: 1.75; }
.call .cl { display: block; opacity: 0; }
k { color: #9ecbff; } s { color: #ffc68a; text-decoration: none; } n { color: #d9a6ff; } f { color: #7fd8c2; } c { color: #6d6d73; }
.tick { display: inline-block; width: 16px; height: 16px; border-radius: 8px; margin-left: 10px; vertical-align: -3px; background: var(--green); transform: scale(0); opacity: 0;
  transition: transform var(--t-exit) var(--e-in), opacity var(--t-exit); position: relative; }
.tick::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tick.x { background: var(--red); }
.tick.x::after { left: 7px; top: 3px; width: 0; height: 10px; border-width: 0 2px 0 0; transform: rotate(45deg); box-shadow: none; }
.tick.x::before { content: ""; position: absolute; left: 7px; top: 3px; width: 2px; height: 10px; background: #fff; transform: rotate(-45deg); }
.tick.on { transform: scale(1); opacity: 1; transition: transform 420ms var(--spring-bouncy), opacity var(--t-state); }
.allow ul { list-style: none; display: grid; gap: 4px; position: relative; z-index: 1; }
.allow li { display: flex; gap: 10px; align-items: center; height: 38px; padding: 0 12px; border-radius: 9px; font-size: 15px; transition: background var(--t-exit), color var(--t-exit); }
.allow li .glyph { font-size: 12px; color: var(--ink-3); transition: color var(--t-exit); }
.allow li.hit { background: rgba(10,124,255,.1); color: var(--blue); transition: background var(--t-state) var(--e-out), color var(--t-state) var(--e-out); }
.allow li.hit .glyph { color: var(--blue); }
.scan { position: absolute; left: 20px; right: 20px; height: 38px; top: 52px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px rgba(10,124,255,.5); opacity: 0; }
.verdict { position: absolute; left: 20px; bottom: 18px; font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 8px; opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.verdict.ok { background: rgba(31,166,90,.12); color: var(--green); }
.verdict.no { background: rgba(255,59,48,.1); color: var(--red); }
.verdict.on { opacity: 1; transform: none; transition: opacity var(--t-state) var(--e-out), transform 420ms var(--spring); }
.allow.reject { animation: reject 520ms linear; }
/* reject: a damped shake. Three swings, each smaller, all inside half a second. */
@keyframes reject { 0% { transform: none; } 12% { transform: translateX(-10px); } 28% { transform: translateX(8px); } 44% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 76% { transform: translateX(-1px); } 100% { transform: none; } }
.render { background: #ededed; box-shadow: none; }
.mini-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc { background: #fff; border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -10px rgba(0,0,0,.18); opacity: 0; transform: scale(.96);
  transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.render.shown .mc { opacity: 1; transform: none; transition: opacity var(--t-state) var(--e-out), transform var(--t-bind) var(--spring); }
.render.shown .mc + .mc { transition-delay: var(--stagger); }
.mimg { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #ecebe8; }
.mimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc .ln { font-size: 13px; font-weight: 600; }
.mc .ln.p { font-weight: 400; color: var(--ink-2); }
.packet { position: absolute; left: 0; top: 0; z-index: 5; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--blue); color: #fff; white-space: nowrap; opacity: 0;
  box-shadow: 0 8px 20px -6px rgba(10,124,255,.6); transition: background var(--t-state); }
.packet .pk2 { display: none; }
.packet.two .pk1 { display: none; } .packet.two .pk2 { display: inline; }
.packet.bad { background: var(--red); box-shadow: 0 8px 20px -6px rgba(255,59,48,.6); }

/* ---------------- 4 · data tools ---------------- */
.lanes { position: relative; margin-top: 64px; height: 360px; display: grid; grid-template-columns: 260px 1fr 260px; gap: 48px; max-width: 1240px; }
.zone { position: relative; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.zlabel { position: absolute; top: 14px; left: 18px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.z-client, .z-api { background: var(--bg-2); }
.zcard { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 15px; }
.z-mb { border: 1.5px dashed #b9c9e6; background: rgba(10,124,255,.03); }
.z-mb .zlabel { color: var(--blue); }
.sandbox { width: 78%; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 40px -24px rgba(0,0,0,.3); padding: 14px 16px; position: relative; z-index: 1; }
.sb-head { display: flex; justify-content: space-between; font-size: 13px; }
.secret-slot { margin-top: 110px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.keyhome { width: 104px; height: 30px; border-radius: 8px; border: 1.5px dashed #d7d7dc; }
.wire { position: absolute; left: 130px; right: 130px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #cfd3da 0 6px, transparent 6px 12px); z-index: 0; }
.dpacket { position: absolute; left: 0; top: 0; z-index: 3; height: 32px; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 10px 24px -10px rgba(0,0,0,.35); display: grid; align-items: center; font-size: 12px; white-space: nowrap; }
.dpacket > span { grid-area: 1 / 1; transition: opacity var(--t-state) var(--e-out); }
.dpacket .res { opacity: 0; color: var(--green); }
.dpacket.back .req { opacity: 0; } .dpacket.back .res { opacity: 1; }
/* .key is positioned by its transform; the dock pop lives on .key-in so the scale can't also scale the position */
.key { position: absolute; left: 0; top: 0; z-index: 4; }
.key-in { height: 30px; padding: 0 10px 0 8px; border-radius: 8px; background: #ffd66b; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.key svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.key.dock .key-in { animation: dock 420ms var(--spring-bouncy); }
@keyframes dock { from { scale: 1.25; } to { scale: 1; } }

/* ---------------- 5 · native ---------------- */
.native { position: relative; margin: 72px auto 0; max-width: 1280px; display: grid; grid-template-columns: 460px 1fr; gap: 44px; align-items: center; }
.bindjs { background: #161618; color: #e8e8ea; border-radius: 18px; padding: 20px 22px; font-size: 12.5px; line-height: 1.7; position: relative; z-index: 2; }
.bindjs .cl { display: block; opacity: 0; }
.bindjs .add-line { opacity: 1; display: grid; grid-template-rows: 0fr; overflow: hidden; border-radius: 4px; transition: grid-template-rows var(--t-exit) var(--e-in), background 600ms; }
.bindjs .add-line.in { grid-template-rows: 1fr; background: rgba(127,216,194,.16); transition: grid-template-rows var(--t-bind) var(--e-out), background 1400ms var(--e-in) 400ms; }
.bindjs .add-line > span { min-height: 0; display: block; }
.fan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.fan path { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.devices { display: flex; gap: 16px; justify-content: flex-end; align-items: stretch; }
/* platform panels in the site's schematic style; the card is the brand's, and only the platform's own text rendering differs */
.plat { width: 226px; background: #ededed; border-radius: 24px; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.plat figcaption { display: grid; gap: 4px; padding: 0 4px; }
.plat figcaption b { font-size: 24px; letter-spacing: -.03em; color: #a0a0a0; }
.plat figcaption span { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.plat figcaption img { height: 15px; }
.ncard { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(0,0,0,.25); color: #1c1c1e; }
.ios .ncard { font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; }
.android .ncard { font-family: Roboto, sans-serif; }
.web .ncard { font-family: system-ui, sans-serif; }
.nimg { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #ece6da; margin-bottom: 7px; }
.nimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncard .ln.n { font-size: 15px; font-weight: 600; }
.ncard .ln.p { font-size: 14px; color: #8a857b; }
.badge { align-self: flex-start; display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows var(--t-exit) var(--e-in), opacity var(--t-exit); }
.badge > span { min-height: 0; display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: #2f6b3f; background: #e4efe2; border-radius: 8px; padding: 3px 8px; }
.badged .badge { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--t-bind) var(--e-out), opacity var(--t-bind) var(--e-out) 120ms; }
.nbtn { margin-top: 9px; height: 36px; border-radius: 18px; background: #1c1c1e; color: #fff; font-size: 14px; font-weight: 600; display: grid; place-items: center; }

/* ---------------- 6 · studio ---------------- */
.studio { margin: 56px auto 0; max-width: 1180px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; }
.sp-left, .sp-right { border-radius: 22px; padding: 22px; }
.sp-left { background: #161618; color: #e8e8ea; }
.sp-right { background: var(--warm); box-shadow: 0 0 0 1px var(--line); }
.draft { color: #7fd8c2; }
.src { font-size: 14px; line-height: 1.8; }
.src .cl { display: block; }
.tok { border-radius: 4px; transition: background 900ms var(--e-in); }
.tok.flash { background: rgba(255,214,107,.35); transition: none; }
.controls { margin-top: 26px; display: grid; gap: 18px; font-size: 14px; color: #c7c7cc; }
.controls label { display: grid; gap: 8px; }
input[type=range] { accent-color: var(--blue); width: 100%; }
.swatches { display: flex; gap: 10px; }
.swatches button { width: 28px; height: 28px; border-radius: 14px; background: var(--c); box-shadow: 0 0 0 2px #161618, 0 0 0 3px transparent; transition: box-shadow var(--t-state) var(--e-out), transform var(--t-micro) var(--e-out); }
.swatches button.on { box-shadow: 0 0 0 2px #161618, 0 0 0 4px #fff; }
.swatches button:active { transform: scale(.9); }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #2a2a2d; border-radius: 10px; padding: 3px; width: 240px; }
.seg button { position: relative; z-index: 1; height: 32px; font-size: 13px; font-weight: 600; color: #a1a1a6; transition: color var(--t-state); }
.seg button.on { color: var(--ink); }
.seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: #fff; border-radius: 8px; transition: transform 460ms var(--spring); }
.seg.grid i { transform: translateX(100%); }
.pg { position: relative; height: 470px; overflow: hidden; }
.pg .ubub.sm { background: var(--pg-accent, var(--blue)); color: #fff; font-size: 15px; transition: background var(--t-state) var(--e-out); }
.pg-cards { position: relative; margin-top: 18px; }
.pgc { position: absolute; top: 0; left: 0; width: 200px; background: #fff; padding: 8px; border-radius: var(--pg-r, 16px); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 22px -10px rgba(0,0,0,.2); will-change: transform; }
.pgc .pimg { border-radius: calc(var(--pg-r, 16px) * .6); }
.pgc b { font-size: 14px; margin-top: 3px; } .pgc span { font-size: 13px; color: var(--ink-2); }
.pgc em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pg-accent, var(--blue)); transition: color var(--t-state) var(--e-out); }

/* ---------------- 7 · server ---------------- */
.s-server .stage { background: #0a0a0b; }
.srv { position: relative; margin-top: 30px; height: 470px; max-width: 1260px; }
.tools { position: absolute; left: 0; top: 40px; display: grid; gap: 10px; }
.tchip { font: 13px ui-monospace, "SF Mono", Menlo, monospace; padding: 9px 13px; border-radius: 10px; background: #1b1b1e; box-shadow: inset 0 0 0 1px #2c2c30; width: fit-content; will-change: transform; }
.tchip.i::before { content: "UI  "; color: #7fb6ff; } .tchip.d::before { content: "DATA  "; color: #7fd8c2; }
.publish { position: absolute; left: 290px; top: 150px; height: 50px; padding: 0 22px 0 18px; border-radius: 25px; background: var(--blue); color: #fff; font-weight: 600; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.publish.press { animation: press 520ms var(--spring); }
@keyframes press { 0% { transform: scale(1); } 20% { transform: scale(.93); } 100% { transform: scale(1); } }
.publish.press .glyph { animation: ratchet-once 700ms var(--spring-bouncy); }
.server-box { position: absolute; left: 470px; top: 110px; width: 340px; height: 130px; }
.server-box .outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.server-box rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: rgba(10,124,255,0); stroke: var(--blue); stroke-width: 1.5; transition: fill var(--t-exit); }
.server-box.on rect { fill: rgba(10,124,255,.07); transition: fill var(--t-bind) var(--e-out); }
.sb-rows { position: absolute; inset: 0; padding: 22px; display: grid; gap: 6px; align-content: center; }
.sb-rows > * { opacity: 0; transform: translateY(6px); transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.sb-rows b { font-size: 18px; } .sb-rows span { font-size: 12px; color: #a1a1a6; }
.server-box.on .sb-rows > * { opacity: 1; transform: none; transition: opacity var(--t-bind) var(--e-out), transform var(--t-bind) var(--e-out); }
.server-box.on .sb-rows > :nth-child(2) { transition-delay: var(--stagger); } .server-box.on .sb-rows > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.versions { position: absolute; left: 470px; top: 290px; width: 300px; height: 150px; }
.ver { position: absolute; left: 0; width: 150px; height: 36px; border-radius: 9px; background: #1b1b1e; box-shadow: inset 0 0 0 1px #2c2c30; display: flex; align-items: center; padding: 0 12px; font-size: 13px; transition: opacity var(--t-state); }
.ver[data-v="1.0.1"] { top: 100px; } .ver[data-v="1.0.2"] { top: 56px; } .ver[data-v="1.0.3"] { top: 12px; }
.ver.new { opacity: 0; transform: translateY(-26px); transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in); }
.ver.new.in { opacity: 1; transform: none; transition: opacity var(--t-state) var(--e-out), transform 560ms var(--spring-bouncy); }
.ver.new.in.dimmed { opacity: .35; }
.prod-ptr { position: absolute; left: 164px; top: 0; height: 36px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7fd8c2; will-change: transform; }
.prod-ptr::before { content: ""; width: 0; height: 0; border: 7px solid transparent; border-right: 9px solid #7fd8c2; border-left: 0; }
.rollback { position: absolute; right: 0; top: 104px; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: #1b1b1e; color: #e8e8ea; box-shadow: inset 0 0 0 1px #2c2c30; opacity: 0; transition: opacity var(--t-state); }
.rollback.show { opacity: 1; }
.rollback.press { animation: press 520ms var(--spring); background: #2c2c30; }
.fanout { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fanout path { fill: none; stroke: #3a3a40; stroke-width: 1.5; }
.fanout path.hot { stroke: var(--blue); }
.hosts { position: absolute; right: 0; top: 30px; display: grid; gap: 14px; }
.hosts span { font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 12px; background: #161618; box-shadow: inset 0 0 0 1px #2c2c30; width: 240px; opacity: .15; transform: scale(.97);
  transition: opacity var(--t-exit) var(--e-in), transform var(--t-exit) var(--e-in), box-shadow var(--t-exit); }
.hosts span.on { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px var(--blue); transition: opacity var(--t-state) var(--e-out), transform 480ms var(--spring-bouncy), box-shadow var(--t-state); }

/* ---------------- 8 · steps ---------------- */
.steps { margin: 56px auto 0; max-width: 1180px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.term { background: #111113; border-radius: 16px; overflow: hidden; color: #e8e8ea; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4); }
.tbar { height: 36px; display: flex; gap: 7px; align-items: center; padding: 0 14px; background: #1b1b1e; }
.tbar i { width: 11px; height: 11px; border-radius: 6px; background: #3a3a3e; }
.term pre { padding: 20px 22px; font-size: 14px; line-height: 1.8; min-height: 280px; white-space: pre-wrap; }
.term .ok { color: #7fd8c2; } .term .pr { color: #6d6d73; }
.steplist { list-style: none; display: grid; gap: 22px; counter-reset: s; }
.steplist li { display: grid; gap: 4px; padding-left: 46px; position: relative; opacity: .35; transition: opacity var(--t-bind) var(--e-out); }
.steplist li.on { opacity: 1; }
.steplist li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 15px; background: var(--bg-2); display: grid; place-items: center; font-weight: 600; font-size: 14px; transition: background var(--t-state), color var(--t-state); }
.steplist li.on::before { background: var(--blue); color: #fff; }
.steplist b { font-size: 19px; } .steplist span { color: var(--ink-2); font-size: 16px; }

/* ---------------- 9 · close ---------------- */
.s-close .stage { display: grid; place-items: center; }
.evidence, .finale { grid-area: 1 / 1; text-align: center; }
.evidence p { font-size: clamp(34px, 4vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.evidence .w { opacity: .12; }
.evidence .you { margin-top: 26px; color: var(--blue); }
.finale { opacity: 0; }
.finale .big { font-size: 64px; color: var(--ink); }
.finale h2 { margin-top: 20px; font-size: clamp(48px, 6vw, 88px); letter-spacing: -.045em; line-height: 1; }
.finale p { margin-top: 18px; font-size: 19px; color: var(--ink-2); }
.finale .ctas { justify-content: center; }
.foot { display: flex; justify-content: space-between; padding: 40px max(6vw, 32px); border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.foot span { display: flex; gap: 8px; align-items: center; }

.debug { position: fixed; right: 10px; bottom: 10px; z-index: 99; font: 11px ui-monospace, monospace; background: rgba(0,0,0,.75); color: #fff; padding: 4px 7px; border-radius: 5px; display: none; }
.debug.on { display: block; }
.swatches button[data-c="#1C1C1E"] { outline: 1px solid #48484a; }