/* ==========================================================================
   Slake — "the stack descent". A continuous-world scroll page on scrollcraft.
   Light canvas, drawn-DOM world, commit-trace rail.
   ========================================================================== */

:root {
  --sc-canvas:      #EDF1F6;   /* cool paper, not pure white            */
  --sc-surface:     #FFFFFF;
  --sc-ink:         #0E1626;
  --sc-ink-soft:    #55657C;
  --sc-accent:      #0369A1;   /* sky-700: white text on it passes 4.5:1 */
  --sc-accent-ink:  #FFFFFF;
  --sc-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Cascadia Code", ui-monospace, "SF Mono", Consolas, monospace;

  --sky:   #0EA5E9;   /* decorative sky inside the world */
  --sky-lt:#BAE6FD;
  --indigo:#0369A1;   /* deep ocean — gradient partner (palette stays in blue family) */
  --ok:    #0E9F6E;
  --err:   #D6453D;
  --warn:  #D97706;
  --codebg:#0E1626;   /* the one dark object: the code editor */
}

/* ---------------------------------------------------------------- chrome */

.topbar {
  position: fixed; inset: 12px var(--sc-gutter) auto; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 0 10px 0 20px; height: 58px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 10%, transparent);
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 34px color-mix(in oklab, var(--sc-ink) 10%, transparent);
}
.topbar { height: 62px; }
.topbar__brand { display: flex; align-items: center; text-decoration: none; color: var(--sc-ink); }
.topbar__brand img { display: block; height: 40px; width: auto; }
.topbar__nav { display: flex; gap: var(--sc-5); margin-left: auto; margin-right: 8px; }
.topbar__nav a {
  position: relative; padding-block: 4px;
  color: var(--sc-ink-soft); text-decoration: none; font-size: 1.01rem; font-weight: 600;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.topbar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--indigo));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 240ms var(--sc-ease-out);
}
.topbar__nav a:hover { color: var(--sc-ink); }
.topbar__nav a:hover::after { transform: scaleX(1); }

.btn-main {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(120deg, var(--sc-accent) 15%, var(--indigo) 135%); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.95rem;
  line-height: 1; padding: 0.85em 1.5em; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 22px color-mix(in oklab, var(--sky) 32%, transparent);
  transition: transform 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.btn-main::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left 540ms var(--sc-ease-out);
  pointer-events: none;
}
.btn-main:hover::before { left: 135%; }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in oklab, var(--sky) 42%, transparent); }
.btn-main:active { transform: scale(0.97); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sc-ink); background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 600; font-size: 0.95rem; line-height: 1; padding: 0.85em 1.4em;
  border: 1px solid var(--sc-hairline-strong); border-radius: 999px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.btn-ghost:hover { border-color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); transform: translateY(-2px); }
.btn-ghost:active { transform: scale(0.97); }
.topbar__cta { padding: 0.7em 1.2em; }

/* mobile burger + slide-down menu (desktop hides both) */
.topbar__burger { display: none; }
.mnav {
  position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) - 1);
  display: flex; flex-direction: column; gap: 2px;
  padding: 92px clamp(1.25rem, 6vw, 2.5rem) 40px;
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  transform: translateY(-102%); visibility: hidden;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.36s;
}
.mnav.is-open { transform: none; visibility: visible; }
.mnav a {
  display: flex; align-items: center; padding: 15px 4px;
  color: var(--sc-ink); text-decoration: none;
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em;
  border-bottom: 1px solid var(--sc-hairline);
  opacity: 0; translate: 0 14px;
  transition: opacity 0.3s ease, translate 0.3s var(--sc-ease-out), color 160ms ease;
}
.mnav a::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-top: 2px solid color-mix(in oklab, var(--sc-ink) 35%, transparent);
  border-right: 2px solid color-mix(in oklab, var(--sc-ink) 35%, transparent);
  transform: rotate(45deg);
}
.mnav a:hover { color: var(--sky); }
.mnav.is-open a { opacity: 1; translate: 0 0; }
.mnav.is-open a:nth-child(1) { transition-delay: 0.05s; }
.mnav.is-open a:nth-child(2) { transition-delay: 0.09s; }
.mnav.is-open a:nth-child(3) { transition-delay: 0.13s; }
.mnav.is-open a:nth-child(4) { transition-delay: 0.17s; }
.mnav.is-open a:nth-child(5) { transition-delay: 0.21s; }
.mnav.is-open a:nth-child(6) { transition-delay: 0.25s; }
.mnav .mnav__cta { justify-content: center; margin-top: 22px; border-bottom: 0; color: var(--sc-accent-ink); font-size: 1.05rem; }
.mnav .mnav__cta::after { display: none; }
@media (min-width: 861px) { .mnav { display: none; } }
.mnav-lock { overflow: hidden; }

/* scroll progress: the gradient thread across the top of the pill */
[data-sc-progress] {
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--indigo));
  box-shadow: 0 1px 8px color-mix(in oklab, var(--sky) 40%, transparent);
}

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--sc-ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 0.875rem; text-decoration: none;
  transition: top 180ms var(--sc-ease-out);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------- the commit trace rail */

.rail {
  position: fixed; left: 18px; top: 50%; translate: 0 -50%;
  z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  transition: opacity 300ms var(--sc-ease-out);
}
.rail__depth {
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sc-ink-soft); line-height: 1.5;
}
.rail__depth-num { display: block; font-size: 0.85rem; color: var(--sc-ink); font-weight: 700; }
.rail__track { position: relative; height: 56vh; width: 76px; }
.rail__line {
  position: absolute; left: 5px; top: 0; bottom: 0; width: 1px;
  background: var(--sc-hairline-strong);
}
.rail__fill {
  position: absolute; left: 5px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--sky), var(--indigo));
  border-radius: 2px;
  transform-origin: 50% 0; transform: scaleY(0);
}
.rail__head {
  position: absolute; left: 5px; top: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--sc-accent);
  translate: -4px -4px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent);
}
.rail__nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail__node {
  position: absolute; left: 0; translate: 0 -50%;
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--sc-font-mono); text-align: left;
}
.rail__dot {
  order: 0;
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--sc-ink-soft); background: var(--sc-canvas);
  transition: background 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.rail__msg {
  order: 2;
  font-size: 0.68rem; color: var(--sc-canvas); white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; padding: 3px 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sc-ink) 92%, transparent);
  translate: -6px 0;
  transition: max-width 300ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out),
              padding 300ms var(--sc-ease-out), translate 240ms var(--sc-ease-out);
}
.rail__msg b { font-weight: 700; color: var(--sky); }
.rail__node.is-stamped .rail__dot { background: var(--sc-accent); border-color: var(--sc-accent); }
.rail__node.is-current .rail__dot {
  transform: scale(1.35);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sky) 20%, transparent);
}
.rail__node.is-current .rail__msg,
.rail__node:hover .rail__msg,
.rail__node:focus-visible .rail__msg {
  max-width: 280px; opacity: 1; padding: 3px 10px; translate: 0 0;
}
.rail__node:hover .rail__dot { border-color: var(--sc-accent); }
.rail__node:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.rail__node--tag .rail__msg { font-weight: 700; }

/* ------------------------------------------------------------- the world */

.scene {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1000vh; /* total track 9.0 + 1 rest viewport */
  will-change: transform;
  background:
    linear-gradient(180deg, #EDF1F6 0%, #E7EDF4 34%, #E1E9F1 62%, #D8E2EC 100%);
}
.scene__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(color-mix(in oklab, var(--sc-ink) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sc-ink) 4.5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* cutaway walls */
.bore { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.bore--l { left: clamp(20px, 6vw, 110px); }
.bore--r { right: clamp(20px, 6vw, 110px); }

/* edge ornaments — solid shapes half-buried in the walls, drifting past the camera */
.deco { position: absolute; pointer-events: none; }

/* solid gradient sphere — the unmistakable one */
.deco--orb {
  width: var(--ds, 16vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--sky-lt) 0%, var(--sky) 55%, #0369A1 115%);
  box-shadow:
    0 30px 70px -20px color-mix(in oklab, var(--sky) 60%, transparent),
    inset 0 -14% 30% -10% rgb(15 23 42 / 0.25);
  opacity: 0.85;
}
.deco--orb--deep {
  background: radial-gradient(circle at 34% 30%, #7DD3FC 0%, #0284C7 55%, #0C4A6E 115%);
  box-shadow:
    0 30px 70px -20px color-mix(in oklab, #0284C7 60%, transparent),
    inset 0 -14% 30% -10% rgb(15 23 42 / 0.3);
}

/* thick open ring */
.deco--ring {
  width: var(--ds, 20vw); aspect-ratio: 1; border-radius: 50%;
  border: clamp(10px, 1.05vw, 16px) solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
}
.deco--ring.deco--sky { border-color: color-mix(in oklab, var(--sky) 55%, transparent); }
.deco--ring.deco--deep { border-color: color-mix(in oklab, #0369A1 55%, transparent); }

/* blurred colour wash */
.deco--blob {
  width: var(--ds, 24vw); aspect-ratio: 1.4; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab, var(--sky) 42%, transparent), transparent 72%);
  filter: blur(26px);
}
.deco--blob--deep {
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab, #0369A1 36%, transparent), transparent 72%);
}

/* dot-grid patch */
.deco--dots {
  width: var(--ds, 14vw); aspect-ratio: 1.45;
  background-image: radial-gradient(color-mix(in oklab, var(--sc-ink) 34%, transparent) 2px, transparent 2.1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 42%, transparent 100%);
}

/* surveyor tick */
.deco--plus { width: 22px; height: 22px; }
.deco--plus::before, .deco--plus::after {
  content: ""; position: absolute; background: color-mix(in oklab, var(--sc-ink) 42%, transparent);
}
.deco--plus::before { left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; }
.deco--plus::after { top: 50%; left: 0; right: 0; height: 2px; translate: 0 -50%; }

.stratum-label {
  position: absolute; left: clamp(20px, 6vw, 110px); translate: 0 -50%;
  margin: 0; padding: 0 10px 0 0;
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
  background: linear-gradient(90deg, var(--sc-canvas) 0%, transparent 130%);
}

.slice { position: absolute; left: 0; right: 0; overflow: visible; }

/* shared drawn-object primitives --------------------------------------- */

.panel {
  position: absolute;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.chip {
  position: absolute; display: inline-flex; align-items: center;
  font-family: var(--sc-font-mono); font-size: clamp(0.6rem, 0.75vw, 0.78rem);
  padding: 0.5em 0.9em; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--sc-hairline);
  background: var(--sc-surface); color: var(--sc-ink-soft);
  box-shadow: var(--sc-e1);
}
.chip--sky { background: var(--sky); border-color: var(--sky); color: #fff; font-weight: 600; }
.chip--card { font-weight: 600; color: var(--sc-ink); }

.wire { border-radius: 6px; background: color-mix(in oklab, var(--sc-ink) 9%, transparent); }
.wire--h1 { height: 9%; width: 58%; margin: 5% 6% 2.4%; background: color-mix(in oklab, var(--sc-ink) 16%, transparent); }
.wire--h1.wire--short { width: 40%; margin-top: 0; }
.wire--p { height: 4.5%; width: 66%; margin: 0 6% 1.6%; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.wire--p.wire--short2 { width: 48%; }
.wire__row { display: flex; gap: 3%; margin: 4% 6% 0; height: 9%; }
.wire__btn { width: 20%; border-radius: 7px; background: color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.wire__btn--accent { background: var(--sky); }
.wire__btn--err { background: var(--err); }
.wire--nav {
  display: flex; align-items: center; gap: 2.5%;
  height: 8%; margin: 4% 6% 0; padding-bottom: 1.8%;
  background: none;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 7%, transparent);
}
.wire--eyebrow {
  height: 3.2%; width: 20%; margin: 3.6% 6% 0; border-radius: 999px;
  background: color-mix(in oklab, var(--sky) 45%, transparent);
}
.wire--accentword {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-ink) 16%, transparent) 0 52%,
    var(--sky) 52%);
}
.heroshape {
  position: absolute; right: 2%; top: 16%; width: 24%; aspect-ratio: 1;
  border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%;
  background: linear-gradient(140deg, var(--sky) 5%, var(--indigo) 110%);
  box-shadow: 0 26px 56px -18px color-mix(in oklab, var(--sky) 55%, transparent);
}
.heroshape::after {
  content: ""; position: absolute; left: -10%; bottom: -8%;
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--sky) 40%, transparent);
}
.wire--nav i {
  height: 42%; width: 8%; border-radius: 3px;
  background: color-mix(in oklab, var(--sc-ink) 11%, transparent);
}
.wire--nav i:nth-of-type(3) { width: 6.5%; }
.wire--nav i:nth-of-type(4) { width: 9.5%; }
.wire--nav i:nth-of-type(5) { width: 7%; }
.wire--nav i:nth-of-type(2) {
  position: relative;
  background: color-mix(in oklab, var(--sc-ink) 20%, transparent);
}
.wire--nav i:nth-of-type(2)::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -52%;
  height: 2px; border-radius: 2px; background: var(--sky);
}
.wire--nav .wire__logo {
  width: 15%; height: 78%; background: none; border-radius: 0;
  display: flex; align-items: center; gap: 9%;
}
.wire__logo::before {
  content: ""; height: 100%; aspect-ratio: 1; border-radius: 28%;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--sky) 60%, transparent),
    color-mix(in oklab, var(--indigo) 50%, transparent));
}
.wire__logo::after {
  content: ""; flex: 1; height: 38%; border-radius: 3px;
  background: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
.wire--nav .wire__cta { margin-left: auto; height: 100%; width: 14%; border-radius: 6px; background: var(--sky); }

/* --- hero fake site: real muted micro-text (sells the wireframe) --- */
.browser .wire--nav i {
  width: auto; height: auto; background: none; border-radius: 0;
  font-style: normal; font-family: var(--sc-font-text);
  font-size: 1.05cqw; font-weight: 600; letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--sc-ink) 36%, transparent);
  white-space: nowrap;
}
.browser .wire--nav i:nth-of-type(2) {
  color: color-mix(in oklab, var(--sc-ink) 60%, transparent);
}
.browser .wire--nav i:nth-of-type(2)::after { bottom: -90%; }
.browser .wire--nav .wire__logo {
  width: auto; height: auto; gap: 0.4em;
  font-family: var(--sc-font-display); font-size: 1.45cqw; font-weight: 800;
  letter-spacing: -0.02em; font-style: normal;
  color: color-mix(in oklab, var(--sc-ink) 48%, transparent);
}
.browser .wire--nav .wire__logo::before { height: 1.05em; width: 1.05em; }
.browser .wire--nav .wire__logo::after { display: none; }
.browser .wire--nav .wire__cta {
  width: auto; height: auto; padding: 0.5em 1.2em; border-radius: 7px;
  font-family: var(--sc-font-text); font-size: 1.05cqw; font-weight: 700;
  color: rgba(255,255,255,0.92); white-space: nowrap;
  display: flex; align-items: center;
}
.wire--eyebrow {
  display: flex; align-items: center; justify-content: center;
}
.wire--eyebrow span {
  font-family: var(--sc-font-mono); font-size: 0.78cqw; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--indigo) 75%, transparent);
}
.wire--h1t {
  margin: 0 6% 1.1%;
  font-family: var(--sc-font-display); font-size: 4.4cqw; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; white-space: nowrap;
  color: color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
.wire--eyebrow + .wire--h1t { margin-top: 3%; }
.wire--h1t em {
  font-style: normal;
  color: color-mix(in oklab, var(--sky) 80%, transparent);
}
.wire--pt {
  margin: 0 6% 1.1%;
  font-family: var(--sc-font-text); font-size: 1.35cqw; font-weight: 500;
  line-height: 1.5; white-space: nowrap;
  color: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
.browser .wire__btn {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-text); font-size: 1.05cqw; font-weight: 600;
  color: color-mix(in oklab, var(--sc-ink) 38%, transparent);
  white-space: nowrap;
}
.browser .wire__btn--accent, .browser .wire__btn--err { color: rgba(255,255,255,0.94); }

/* ------------------------------------------------------------------ s0 -- */

/* soft chromatic glows behind the key stages — depth without darkening */
.slice--surface::before {
  content: ""; position: absolute; left: 14%; top: 4%; width: 68%; height: 80%;
  pointer-events: none;
  background: radial-gradient(46% 42% at 52% 44%,
    color-mix(in oklab, var(--sky) 20%, transparent),
    color-mix(in oklab, var(--indigo) 9%, transparent) 48%, transparent 72%);
  filter: blur(30px);
}
.slice--fracture::before {
  content: ""; position: absolute; left: 18%; top: 14%; width: 62%; height: 66%;
  pointer-events: none;
  background: radial-gradient(44% 42% at 50% 46%,
    color-mix(in oklab, var(--err) 13%, transparent), transparent 70%);
  filter: blur(30px);
}
.slice--keel::before {
  content: ""; position: absolute; left: 22%; top: 16%; width: 56%; height: 62%;
  pointer-events: none;
  background: radial-gradient(44% 44% at 50% 46%,
    color-mix(in oklab, var(--sky) 20%, transparent),
    color-mix(in oklab, var(--indigo) 9%, transparent) 50%, transparent 74%);
  filter: blur(36px);
}
.slice--fix::before {
  content: ""; position: absolute; left: 48%; top: 48%; width: 50%; height: 56%;
  pointer-events: none;
  background: radial-gradient(46% 44% at 55% 42%,
    color-mix(in oklab, var(--sky) 18%, transparent),
    color-mix(in oklab, #0369A1 10%, transparent) 52%, transparent 74%);
  filter: blur(34px);
}
.slice--build::before {
  content: ""; position: absolute; left: 50%; top: 60%; width: 50%; height: 44%;
  pointer-events: none;
  background: radial-gradient(46% 46% at 55% 50%,
    color-mix(in oklab, var(--sky) 18%, transparent),
    color-mix(in oklab, var(--indigo) 10%, transparent) 52%, transparent 74%);
  filter: blur(34px);
}
.slice--foundation::before {
  content: ""; position: absolute; left: 2%; top: 32%; width: 58%; height: 54%;
  pointer-events: none;
  background: radial-gradient(46% 44% at 46% 46%,
    color-mix(in oklab, var(--indigo) 14%, transparent),
    color-mix(in oklab, var(--sky) 8%, transparent) 50%, transparent 72%);
  filter: blur(36px);
}

.slice--surface .browser { left: 24%; top: 14%; width: 56%; height: 62%; }
.browser__bar {
  display: flex; align-items: center; gap: 12px;
  height: 11%; padding: 0 4%;
  border-bottom: 1px solid var(--sc-hairline);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.browser__url {
  flex: 1; max-width: 46%;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.7vw, 0.75rem);
  color: var(--sc-ink-soft); text-align: center;
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border-radius: 999px; padding: 0.45em 1em;
}
.browser__url::before {
  content: ""; display: inline-block; width: 0.62em; height: 0.62em;
  border-radius: 50%; margin-right: 0.55em; vertical-align: -0.06em;
  background: linear-gradient(135deg, var(--sky), var(--indigo));
}
.browser__url--err { color: var(--err); background: color-mix(in oklab, var(--err) 10%, transparent); }
.browser__url--err::before { background: var(--err); }
.browser__body { position: relative; height: 89%; overflow: hidden; border-radius: 0 0 var(--sc-r-md) var(--sc-r-md); container-type: inline-size; }
.browser__heroimg {
  position: absolute; right: 6%; top: 30%; width: 30%; height: 44%;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, var(--sky-lt), var(--sky) 130%);
  box-shadow: var(--sc-e1);
}
.heroimg__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
/* the same photo, broken: desaturated + red-washed inside the fracture */
.browser__heroimg--broken { right: 3%; top: 24%; width: 45%; height: 62%; }
.browser__heroimg--broken .heroimg__photo { filter: grayscale(0.75) contrast(1.05) brightness(0.9); }
.browser__heroimg--broken { box-shadow: inset 0 0 0 999px rgb(214 69 61 / 0.16), var(--sc-e1); }
.chip--float1 { left: -18%; top: -8%; }
.chip--float2 { left: -30%; bottom: 6%; }
.slice--surface .chip--a { left: 9%; top: 34%; }
.slice--surface .chip--b { left: auto; right: 9%; top: 44%; }
.slice--surface .chip--c { right: 8%; top: 30%; }

/* ------------------------------------------------------------------ s1 -- */

.slice--fracture .browser { left: 24%; top: 32%; width: 56%; height: 46%; }
.slice--fracture .browser__body { overflow: visible; }
.pane { position: absolute; inset: 0; }
.pane--l {
  clip-path: polygon(0 0, 52% 0, 44% 38%, 56% 62%, 47% 100%, 0 100%);
  transform: translate(calc(var(--slice-p, 0) * -2.2%), calc(var(--slice-p, 0) * -1.5%)) rotate(calc(var(--slice-p, 0) * -1.4deg));
}
.pane--r {
  clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%, 56% 62%, 44% 38%);
  transform: translate(calc(var(--slice-p, 0) * 2.2%), calc(var(--slice-p, 0) * 1.2%)) rotate(calc(var(--slice-p, 0) * 1.1deg));
}
.wire--tilt { transform: rotate(-2.5deg); }
.wire--tilt2 { transform: rotate(1.5deg); width: 52%; }
.crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crack__line {
  fill: none; stroke: color-mix(in oklab, var(--sc-ink) 55%, transparent); stroke-width: 1.6;
  stroke-dasharray: 140; stroke-dashoffset: calc(140 * (1 - var(--slice-p, 0)));
}
.crack__line--b { stroke-dasharray: 40; stroke-dashoffset: calc(40 * (1 - var(--slice-p, 0))); }
.crack__line--c, .crack__line--d { stroke-dasharray: 46; stroke-dashoffset: calc(46 * (1 - var(--slice-p, 0))); }

.errchip {
  position: absolute;
  font-family: var(--sc-font-mono); font-size: clamp(0.6rem, 0.8vw, 0.8rem); font-weight: 600;
  color: var(--err); background: color-mix(in oklab, var(--err) 9%, var(--sc-surface));
  border: 1px solid color-mix(in oklab, var(--err) 30%, transparent);
  border-radius: 8px; padding: 0.55em 0.95em; white-space: nowrap;
  box-shadow: var(--sc-e1);
  opacity: clamp(0, calc((var(--slice-p, 0) - var(--tp, 0.2)) * 5), 1);
  transform: translateY(calc((1 - clamp(0, (var(--slice-p, 0) - var(--tp, 0.2)) * 5, 1)) * 14px));
}
.errchip--1 { --tp: 0.15; left: 16%; top: 26%; }
.errchip--2 { --tp: 0.32; right: 14%; top: 42%; }
.errchip--3 { --tp: 0.48; left: 12%; top: 60%; }
.errchip--4 { --tp: 0.62; right: 18%; top: 74%; }

.slice--fracture .console {
  left: 24%; top: 80%; width: 56%; height: 16%;
  padding: 1.4% 2%; overflow: hidden;
  background: var(--codebg); border-color: transparent;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.72vw, 0.78rem);
  color: #F3B4AE; line-height: 1.75;
}
.console p { margin: 0; white-space: nowrap; }
.console em { font-style: normal; color: var(--err); margin-right: 8px; }
.console .console__dim { color: #7C8BA1; }

/* ------------------------------------------------------------------ s2 -- */

.slice--fix .diff {
  left: 10%; top: 40%; width: 44%; height: 46%;
  padding: 1.6% 1.8%; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.78vw, 0.82rem);
}
.diff__head, .diff__foot { margin: 0; color: var(--sc-ink-soft); font-size: 0.82em; letter-spacing: 0.08em; }
.diff__foot { margin-top: auto; padding-top: 0.8em; }
.diff__row {
  display: flex; align-items: center; gap: 10px; padding: 0.45em 0.7em; margin-top: 0.5em;
  border-radius: 6px; white-space: nowrap; overflow: hidden; flex: 1;
}
.diff__row span { font-weight: 700; }
.diff__row--del {
  background: color-mix(in oklab, var(--err) 9%, transparent); color: color-mix(in oklab, var(--err) 80%, var(--sc-ink));
  opacity: calc(1 - clamp(0, (var(--slice-p, 0) - var(--tp, 0.3)) * 5, 1));
  transform: translateX(calc(clamp(0, (var(--slice-p, 0) - var(--tp, 0.3)) * 5, 1) * -10px));
}
.diff__row--add {
  background: color-mix(in oklab, var(--ok) 10%, transparent); color: color-mix(in oklab, var(--ok) 80%, var(--sc-ink));
  opacity: clamp(0, calc((var(--slice-p, 0) - var(--tp, 0.3)) * 5), 1);
  transform: translateX(calc((1 - clamp(0, (var(--slice-p, 0) - var(--tp, 0.3)) * 5, 1)) * 10px));
}
.diff__row--ctx { color: var(--sc-ink-soft); }
.slice--fix .diff .diff__row:nth-of-type(1) { --tp: 0.22; }
.slice--fix .diff .diff__row:nth-of-type(2) { --tp: 0.30; }
.slice--fix .diff .diff__row:nth-of-type(3) { --tp: 0.42; }
.slice--fix .diff .diff__row:nth-of-type(4) { --tp: 0.50; }
.slice--fix .diff .diff__row:nth-of-type(5) { --tp: 0.58; }

.checklist { position: absolute; left: 58%; top: 30%; width: 30%; display: flex; flex-direction: column; gap: 2.6vh; }
.checkchip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sc-font-text); font-weight: 600; font-size: clamp(0.7rem, 1vw, 0.98rem);
  color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: 10px; padding: 0.9em 1.1em; box-shadow: var(--sc-e1);
  opacity: clamp(0, calc((var(--slice-p, 0) - var(--tp, 0.3)) * 4), 1);
  transform: translateX(calc((1 - clamp(0, (var(--slice-p, 0) - var(--tp, 0.3)) * 4, 1)) * 18px));
}
.checkchip i {
  font-style: normal; font-weight: 800; color: #fff;
  background: var(--ok); border-radius: 50%;
  width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8em; flex: none;
}
.checkchip:nth-child(1) { --tp: 0.30; }
.checkchip:nth-child(2) { --tp: 0.44; }
.checkchip:nth-child(3) { --tp: 0.58; }
.checkchip:nth-child(4) { --tp: 0.72; }

/* ------------------------------------------------------------------ s3 -- */

.slice--build .editor {
  left: 8%; top: 36%; width: 42%; height: 44%;
  background: var(--codebg); border-color: transparent;
  display: flex; flex-direction: column; overflow: hidden;
}
.editor__tabs {
  display: flex; gap: 2px; padding: 10px 12px 0;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.7vw, 0.72rem);
  color: #8B99AE;
}
.editor__tabs span { padding: 0.55em 1em; border-radius: 8px 8px 0 0; }
.editor__tabs .is-on { background: color-mix(in oklab, #fff 8%, transparent); color: #DDE6F2; }
.editor__code {
  margin: 0; padding: 5% 6%; flex: 1;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.82vw, 0.86rem);
  line-height: 2.1; color: #C7D3E4; overflow: hidden;
}
.editor__code b { color: var(--sky-lt); font-weight: 600; }
.editor__code s { color: #8FD3A9; text-decoration: none; }
.editor__term {
  margin: 0; padding: 10px 16px; border-top: 1px solid color-mix(in oklab, #fff 8%, transparent);
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.72vw, 0.75rem);
  color: #8B99AE; display: flex; justify-content: space-between; gap: 12px;
}
.editor__term i { font-style: normal; color: #8FD3A9; }

.blueprint { position: absolute; left: 56%; top: 44%; width: 36%; height: 32%; }
.bp__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp__frame rect {
  fill: none; stroke: color-mix(in oklab, var(--sc-ink) 30%, transparent);
  stroke-width: 1.5; stroke-dasharray: 5 4;
}
.bp {
  --bsc: clamp(0, calc((var(--slice-p, 0) - var(--tp, 0.2)) / 0.35), 1);
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.72vw, 0.75rem);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
  border: 1.5px dashed color-mix(in oklab, var(--sc-ink) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in oklab, var(--sc-surface) 80%, transparent);
  opacity: var(--bsc);
  transform: translate(calc(var(--dx, 0px) * (1 - var(--bsc))), calc(var(--dy, 0px) * (1 - var(--bsc)))) scale(calc(0.92 + var(--bsc) * 0.08));
}
.bp--nav  { --tp: 0.10; --dx: -60px; left: 6%; top: 6%;  width: 88%; height: 13%; }
.bp--hero { --tp: 0.24; --dx: 80px;  left: 6%; top: 24%; width: 55%; height: 34%; }
.bp--grid { --tp: 0.38; --dy: 60px;  left: 65%; top: 24%; width: 29%; height: 34%; }
.bp--cart { --tp: 0.52; --dx: -70px; left: 6%; top: 63%; width: 88%; height: 15%; }
.bp--foot { --tp: 0.66; --dy: 50px;  left: 6%; top: 82%; width: 88%; height: 11%; }

/* ------------------------------------------------------------------ s4 -- */

.phone {
  position: absolute; width: 15.5%; height: 74%;
  background: var(--sc-ink); border-radius: clamp(18px, 2vw, 30px);
  padding: 0.55%; box-shadow: var(--sc-e3), var(--sc-edge);
}
.phone__notch {
  position: absolute; left: 50%; top: 2.2%; translate: -50% 0;
  width: 34%; height: 2.6%; border-radius: 999px; background: var(--sc-ink);
  z-index: 2;
}
.phone__screen {
  position: absolute; inset: 0.8%; border-radius: clamp(14px, 1.7vw, 24px);
  background: var(--sc-surface); overflow: hidden;
}
.phone--a { left: 30%; top: 34%; transform: rotate(-5deg) translateY(calc((1 - var(--slice-p, 0)) * 6%)); }
.phone--b { left: 52%; top: 42%; transform: rotate(4deg)  translateY(calc((1 - var(--slice-p, 0)) * 9%)); }

.mwire { position: absolute; border-radius: 6px; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.mwire--hero { left: 8%; top: 8%; width: 84%; height: 26%; overflow: hidden; background: linear-gradient(150deg, var(--sky-lt), var(--sky) 140%); }
.mwire--row { left: 8%; top: 40%; width: 84%; height: 9%; display: flex; gap: 6%; background: none; }
.mwire--row i {
  flex: 1; border-radius: 5px; background: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12%;
}
.mwire--row i::before { content: ""; width: 30%; aspect-ratio: 1; border-radius: 4px; }
.mwire--row i::after { content: ""; width: 55%; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.mwire--row i:nth-child(1)::before { background: rgb(14 165 233 / 0.55); }
.mwire--row i:nth-child(2)::before { background: rgb(14 159 110 / 0.55); }
.mwire--row i:nth-child(3)::before { background: rgb(217 119 6 / 0.55); }
.mwire--card { left: 8%; top: 55%; width: 84%; height: 16%; }
.mwire--card.mwire--accent {
  top: 75%; height: 10%; background: var(--sky);
  display: flex; align-items: center; justify-content: center;
}
.mwire--accent::after { content: ""; width: 42%; height: 26%; border-radius: 999px; background: rgb(255 255 255 / 0.92); }
.mwire--tab {
  left: 8%; bottom: 4%; width: 84%; height: 7%;
  border-radius: 999px; background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  display: flex; align-items: center; justify-content: space-evenly; padding: 0 5%;
}
.mwire--tab i { width: 10%; height: 34%; border-radius: 4px; background: color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.mwire--tab i:nth-child(2) { background: var(--sky); }
.mwire--map { left: 0; top: 0; width: 100%; height: 46%; border-radius: 0; overflow: hidden; background: linear-gradient(140deg, #DCE9F5, var(--sky-lt)); }
.mwire__mapimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
/* "you are here" marker — blue dot, white ring, soft halo */
.mwire--pin {
  left: 45%; top: 19%; width: 10%; height: auto; aspect-ratio: 1;
  border-radius: 50%; transform: none;
  background: var(--sky); border: 2.5px solid #fff;
  box-shadow: 0 0 0 7px color-mix(in oklab, var(--sky) 18%, transparent),
    0 2px 8px rgb(15 23 42 / 0.3);
}
.mwire--loc {
  left: 6%; top: 52%; width: 88%; height: 15%;
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: 10px; box-shadow: var(--sc-e1);
  display: flex; align-items: center; gap: 5%; padding: 0 5%;
}
.mloc__ava {
  flex: none; width: 15%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(140deg, var(--sky), #0369A1);
}
.mloc__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mloc__lines i { display: block; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--sc-ink) 12%, transparent); }
.mloc__lines i + i { width: 62%; }
.mloc__pill {
  flex: none; font-family: var(--sc-font-mono); font-size: clamp(0.45rem, 0.6vw, 0.62rem);
  font-weight: 700; color: #fff; background: var(--sky);
  border-radius: 999px; padding: 0.35em 0.7em;
}
.mwire--track {
  left: 6%; top: 73%; width: 88%; height: 4.5%;
  border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 8%, transparent);
  overflow: hidden;
}
.mwire--track i { display: block; height: 100%; width: 62%; border-radius: 999px; background: linear-gradient(90deg, var(--sky), #0369A1); }

.chip--m1 { left: 14%; top: 50%; }
.chip--m2 { right: 12%; top: 60%; }
.chip--m3 { right: 16%; top: 78%; }
.chip--m4 { left: 16%; top: 88%; }

/* ------------------------------------------------------------------ s5 -- */

.erd { position: absolute; left: 9%; top: 44%; width: 46%; height: 34%; overflow: hidden; }
.erd__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.3;
  filter: saturate(0.85) brightness(0.92);
  -webkit-mask-image: radial-gradient(115% 105% at 50% 46%, #000 52%, transparent 96%);
  mask-image: radial-gradient(115% 105% at 50% 46%, #000 52%, transparent 96%);
}
.erbox {
  position: absolute; width: 27%; padding: 2.2% 2.6%;
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  border-radius: 8px; box-shadow: var(--sc-e1);
  font-family: var(--sc-font-mono); font-size: clamp(0.5rem, 0.68vw, 0.72rem);
}
.erbox b { display: block; color: var(--sc-ink); font-size: 1.15em; margin-bottom: 4px; }
.erbox i { font-style: normal; color: var(--sc-ink-soft); }
.erbox--users    { left: 0;  top: 8%; }
.erbox--orders   { left: 38%; top: 34%; }
.erbox--products { right: 0; top: 8%; }
.erbox--sessions { left: 0;  top: 62%; }
.erd__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.erd__lines path {
  fill: none; stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: 1.4;
  stroke-dasharray: 240; stroke-dashoffset: calc(240 * (1 - clamp(0, var(--slice-p, 0) * 1.6, 1)));
}

.pipeline {
  position: absolute; left: 9%; top: 76%; width: 56%; height: 14%;
  display: flex; align-items: center; gap: 4.5%;
}
.pl__node {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.72vw, 0.75rem);
  color: var(--sc-ink-soft);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline);
  border-radius: 10px; padding: 0.8em 1.2em; box-shadow: var(--sc-e1);
}
.pl__node i {
  font-style: normal; font-weight: 800; font-size: 0.75em; color: #fff;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--ok); display: inline-flex; align-items: center; justify-content: center;
}
.pl__line { position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; width: 92%; }
.pl__line line {
  stroke: color-mix(in oklab, var(--ok) 60%, transparent); stroke-width: 2;
  stroke-dasharray: 300; stroke-dashoffset: calc(300 * (1 - var(--slice-p, 0)));
}

.stats { position: absolute; right: 8%; top: 56%; width: 28%; display: grid; gap: 2vh; }
.stats span {
  font-family: var(--sc-font-mono); font-size: clamp(0.6rem, 0.78vw, 0.82rem);
  color: var(--sc-ink-soft); border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: 1vh;
}
.stats b { color: var(--sc-ink); font-size: 1.2em; margin-right: 0.6em; }

/* ------------------------------------------------------------------ s6 -- */

.keel__stack { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; translate: -50% 0; }
.strat {
  --collapse: clamp(0, calc(var(--slice-p, 0) / 0.5), 1);
  position: absolute; left: 50%; top: 50%;
  width: 220px; height: 26px; border-radius: 7px;
  translate: -50% -50%;
  transform: translateY(calc(var(--spread, 0px) * (1 - var(--collapse)) + var(--rest, 0px))) rotate(calc(var(--rot, 0deg) * (1 - var(--collapse))));
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--sc-e1);
}
.strat::after { content: ""; position: absolute; inset: 7px 10px; border-radius: 4px; }
.strat--surface    { --spread: -260px; --rot: -7deg; --rest: -17.5px; }
.strat--surface::after    { background: linear-gradient(90deg, var(--sky) 30%, var(--sky-lt)); }
.strat--fracture   { --spread: -156px; --rot: 5deg; --rest: -10.5px; }
.strat--fracture::after   { background: repeating-linear-gradient(115deg, var(--err) 0 6px, transparent 6px 12px); opacity: 0.7; }
.strat--fix        { --spread: -78px;  --rot: -3deg; --rest: -3.5px; }
.strat--fix::after        { background: linear-gradient(90deg, var(--ok) 55%, transparent 55%); }
.strat--build      { --spread: 78px;   --rot: 4deg; --rest: 3.5px; }
.strat--build::after      { background: repeating-linear-gradient(90deg, var(--sc-ink) 0 26px, transparent 26px 34px); opacity: 0.5; }
.strat--mobile     { --spread: 156px;  --rot: -5deg; --rest: 10.5px; }
.strat--mobile::after     { background: linear-gradient(90deg, transparent 42%, var(--sky) 42% 58%, transparent 58%); }
.strat--foundation { --spread: 260px;  --rot: 6deg; --rest: 17.5px; }
.strat--foundation::after { background: repeating-linear-gradient(0deg, color-mix(in oklab, var(--sc-ink) 40%, transparent) 0 2px, transparent 2px 6px); }

.keel__ring { position: absolute; inset: -8%; width: 116%; height: 116%; }
.keel__ring circle {
  fill: none; stroke: var(--sc-accent); stroke-width: 1.5;
  stroke-dasharray: 553;
  stroke-dashoffset: calc(553 * (1 - clamp(0, (var(--slice-p, 0) - 0.3) / 0.45, 1)));
}
.keel__tag {
  position: absolute; left: 50%; bottom: -14%; translate: -50% 0;
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--sc-accent); border: 1px solid var(--sc-accent); border-radius: 999px;
  padding: 0.5em 1.1em; white-space: nowrap; background: var(--sc-canvas);
  opacity: clamp(0, calc((var(--slice-p, 0) - 0.62) * 6), 1);
  transform: translateY(calc((1 - clamp(0, (var(--slice-p, 0) - 0.62) * 6, 1)) * 10px));
}
.keel__plate { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; }
.keel__mini {
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin: 0;
}

/* ------------------------------------------------- rich scene content -- */

/* tinted stat tiles — the same grammar as the inner-page skin */
.stile {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 0.55em 0.85em; border-radius: 10px;
  border: 1px solid rgb(15 23 42 / 0.07);
  font-family: var(--sc-font-text);
}
.stile b { font-size: clamp(0.62rem, 0.85vw, 0.9rem); font-weight: 800; letter-spacing: -0.02em; color: var(--sc-ink); line-height: 1.1; }
.stile i { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.62em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.stile--sky   { background: rgb(14 165 233 / 0.10); }
.stile--mint  { background: rgb(14 159 110 / 0.10); }
.stile--amber { background: rgb(217 119 6 / 0.10); }
.stile--iris  { background: rgb(99 102 241 / 0.10); }
.stile--err   { background: rgb(214 69 61 / 0.09); }
.stile--err b { color: var(--err); }

/* s0 — stat tiles inside the product page */
.strow { display: flex; gap: 5%; margin: 4% 6% 0; width: 52%; height: 15%; }
.strow .stile { flex: 1; }

/* s0 — white product card embedded in the gradient hero "image" */
.heroimg__card {
  position: absolute; left: 10%; bottom: 10%; width: 56%; height: 30%;
  background: var(--sc-surface); border-radius: 9px; box-shadow: var(--sc-e2);
  padding: 5% 7%; display: flex; flex-direction: column; justify-content: center; gap: 16%;
}
.heroimg__card b { display: block; height: 34%; border-radius: 4px; background: linear-gradient(90deg, var(--sky), var(--indigo)); }
.heroimg__card i { display: block; height: 20%; width: 70%; border-radius: 4px; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.browser__heroimg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(60% 45% at 72% 18%, rgb(255 255 255 / 0.4), transparent 62%);
}

/* s0 — floating revenue chart card overlapping the browser edge */
.mchart {
  left: 13%; top: 68%; width: 15%; height: 15%;
  padding: 0.8% 1%; display: flex; flex-direction: column; z-index: 2;
}
.mchart__label {
  margin: 0; font-family: var(--sc-font-mono); font-size: clamp(0.5rem, 0.62vw, 0.66rem);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.mchart__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 7%; padding: 5% 1% 3%; }
.mchart__bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--sky), var(--indigo)); opacity: 0.85; }
.mchart__bars i:nth-child(1) { height: 38%; }
.mchart__bars i:nth-child(2) { height: 62%; }
.mchart__bars i:nth-child(3) { height: 48%; }
.mchart__bars i:nth-child(4) { height: 78%; }
.mchart__bars i:nth-child(5) { height: 56%; }
.mchart__bars i:nth-child(6) { height: 92%; }
.mchart__bars i:nth-child(7) { height: 70%; }
.mchart__val { margin: 0; font-weight: 800; font-size: clamp(0.6rem, 0.8vw, 0.85rem); letter-spacing: -0.02em; color: var(--sc-ink); }
.mchart__val em { font-style: normal; font-size: 0.75em; font-weight: 700; color: var(--ok); }

/* s0 — floating mini testimonial (avatar + quote over the scene) */
.mquote {
  right: 9%; top: 74%; width: 17%; z-index: 2;
  display: flex; align-items: center; gap: 0.8em;
  padding: 0.85% 1.1%;
}
.mquote__ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 4px 10px rgb(15 23 42 / 0.15); }
.mquote__txt p { margin: 0; font-weight: 700; font-size: clamp(0.6rem, 0.75vw, 0.8rem); letter-spacing: -0.01em; color: var(--sc-ink); }
.mquote__txt i {
  font-style: normal; font-family: var(--sc-font-mono);
  font-size: clamp(0.5rem, 0.6vw, 0.62rem); letter-spacing: 0.04em; color: var(--sc-ink-soft);
}

/* s1 — the same tiles, broken */
.strow--err { width: 46%; height: 14%; margin-top: 3%; }

/* s1 — error toast card, stacked on the incident */
.errtoast {
  right: 11%; top: 20%; width: 17%; padding: 0.9% 1.1%;
  border-left: 3px solid var(--err); z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  opacity: clamp(0, calc((var(--slice-p, 0) - 0.35) * 5), 1);
  transform: translateY(calc((1 - clamp(0, (var(--slice-p, 0) - 0.35) * 5, 1)) * 14px));
}
.errtoast b { font-size: clamp(0.6rem, 0.8vw, 0.85rem); color: var(--sc-ink); }
.errtoast i { font-style: normal; font-family: var(--sc-font-mono); font-size: clamp(0.5rem, 0.62vw, 0.66rem); color: var(--err); }

/* s3 — test chip floats beside the preview card */
.chip--b3 { right: 8%; top: 74%; }

/* s4 — tinted tiles inside the app UI */
.mwire--row i:nth-child(1) { background: rgb(14 165 233 / 0.16); }
.mwire--row i:nth-child(2) { background: rgb(14 159 110 / 0.16); }
.mwire--row i:nth-child(3) { background: rgb(217 119 6 / 0.16); }
.mdonut {
  position: absolute; left: 7%; top: 16%; height: 68%; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--sky) 0 76%, rgb(15 23 42 / 0.08) 76% 100%);
  display: flex; align-items: center; justify-content: center;
}
.mdonut::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: var(--sc-surface); }
.mdonut b { position: relative; z-index: 1; font-size: clamp(0.5rem, 0.75vw, 0.8rem); font-weight: 800; color: var(--sc-ink); }
.mcard-lines { position: absolute; left: 42%; top: 26%; width: 48%; height: 50%; display: flex; flex-direction: column; gap: 20%; }
.mcard-lines i { display: block; height: 26%; border-radius: 4px; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.mcard-lines i + i { width: 72%; }
.mchip {
  position: absolute; left: 6%; top: 8%;
  font-family: var(--sc-font-mono); font-size: clamp(0.45rem, 0.6vw, 0.62rem); font-weight: 600;
  background: var(--sc-surface); color: var(--sc-ink);
  border-radius: 999px; padding: 0.45em 0.8em; box-shadow: var(--sc-e1);
  white-space: nowrap;
}
.mchip--hero { top: auto; bottom: 9%; }
.stile--m5 { position: absolute; left: 71%; top: 60%; z-index: 2; box-shadow: var(--sc-e1); }

/* s5 — the proof numbers are tiles too */
.stats span {
  border-bottom: none; padding: 1.1vh 1vw;
  border-radius: 14px;
  border: 1px solid rgb(15 23 42 / 0.07);
  background: rgb(14 165 233 / 0.08);
  box-shadow: var(--sc-e1);
  display: flex; align-items: baseline; gap: 0.7em;
}
.stats span:nth-child(2) { background: rgb(14 159 110 / 0.09); }
.stats span:nth-child(3) { background: rgb(217 119 6 / 0.09); }
.stats span:nth-child(4) { background: rgb(99 102 241 / 0.09); }
.stats b { font-size: 1.45em; letter-spacing: -0.02em; }

/* s5 — accent spine on the schema boxes */
.erbox { overflow: hidden; }
.erbox::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sky); }
.erbox--orders::before   { background: var(--indigo); }
.erbox--sessions::before { background: var(--ok); }

/* -------------------------------------------------------- depth strata */

.stratum { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.stratum--far  { height: 900vh; }
.stratum--near { height: 1150vh; }
.floatel { position: absolute; border-radius: 10px; }
.floatel::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 42%; height: 16%;
  border-radius: 3px; background: color-mix(in oklab, var(--sc-ink) 12%, transparent);
}
.floatel::before {
  content: ""; position: absolute; left: 12%; top: 26%; width: 30%; height: 10%;
  border-radius: 3px; background: var(--sky);
}
.floatel--f1 { left: 4%;  top: 12%;  width: 13%; height: 2.6%; border: 1px solid var(--sc-hairline); }
.floatel--f2 { right: 5%; top: 58%;  width: 10%; height: 2%;   border: 1px solid var(--sc-hairline); }
.floatel--1 { right: 6%;  top: 9%;   width: 9%;  height: 1.6%; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.floatel--2 { left: 5%;   top: 36%;  width: 7%;  height: 1.3%; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.floatel--3 { right: 10%; top: 71%;  width: 8%;  height: 1.4%; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.floatel--4 { left: 8%;   top: 92%;  width: 6%;  height: 1.2%; background: var(--sc-surface); box-shadow: var(--sc-e2); }

/* ------------------------------------------------------------ copy side */

.copy .sc-display { margin: 0; font-weight: 800; }
.copy .sc-display, .copy .sc-body, .copy__kicker, .copy__meta, .copy__foot {
  text-shadow: 0 1px 16px var(--sc-canvas), 0 0 6px var(--sc-canvas);
}
.copy h1.sc-display--xl { font-size: clamp(2.6rem, 4.6vw, 4.4rem); max-width: 12ch; }
.hgrad {
  font-style: normal;
  background: linear-gradient(96deg, var(--sky) 0%, #0369A1 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.copy .sc-body { max-width: 46ch; margin-top: 1.6rem; }
.copy__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 1rem;
  padding: 0.5em 0.95em; border-radius: 999px;
  border: 1px solid var(--sc-hairline-strong);
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.copy__kicker::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sky) 16%, transparent);
}
@media (min-width: 861px) {
  /* keep copy clear of the commit rail */
  .sc-copy--lead { left: calc(var(--sc-gutter) + 56px); }
}
.copy__ctas { display: flex; gap: 12px; margin: 1.6rem 0 0; }
.copy__ctas--center { justify-content: center; }
.copy__meta {
  margin: 1rem 0 0; font-size: 0.8rem; color: var(--sc-ink-soft);
  font-family: var(--sc-font-mono); letter-spacing: 0.02em;
}
.copy h2 { max-width: 15ch; text-wrap: balance; }
.sc-copy--trail h2, .sc-copy--trail .sc-body { margin-left: auto; }
.copy--finale { text-align: center; }
.copy--finale.sc-copy--center { top: auto; bottom: 5%; translate: -50% 0; }
.copy--finale {
  width: min(880px, 92vw);
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3.4vw, 2.8rem);
  border-radius: 26px;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
  background: rgba(237, 242, 248, 0.72); /* plain rgba: color-mix computes to
    color(srgb …) which downstream contrast tooling misreads as near-black */
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 24px 60px color-mix(in oklab, var(--sc-ink) 14%, transparent);
}
.copy--finale .sc-display, .copy--finale .sc-body, .copy--finale .copy__meta,
.copy--finale .copy__foot, .copy--finale .copy__links a { text-shadow: none; }
.copy--finale .sc-body { margin: 1rem auto 0; max-width: 46ch; }

/* finale form — a real card, not a bare input row */
.keel-form {
  display: flex; flex-direction: column; gap: 12px;
  margin: 1.8rem auto 0; max-width: 560px; width: 100%;
  padding: 1.3rem 1.4rem;
  background: rgb(255 255 255 / 0.6);
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgb(15 23 42 / 0.08);
}
.keel-form__hp { position: absolute; left: -9999px; }
.keel-form__lead {
  margin: 0; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  color: var(--sc-ink); text-align: left;
}
.keel-form__lead span { font-weight: 500; color: var(--sc-ink-soft); }
.keel-form__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.keel-form input {
  font: inherit; font-size: 0.95rem; color: var(--sc-ink);
  background: rgb(255 255 255 / 0.85);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 14px; padding: 0.85em 1.1em; min-width: 0; width: 100%;
}
.keel-form__issue { width: 100%; }
.keel-form input:focus { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
.keel-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.keel-form__note {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.68rem;
  letter-spacing: 0.05em; color: var(--sc-ink-soft);
}

.copy__links { display: flex; gap: 22px; justify-content: center; margin-top: 2.2rem; }
.copy__links a {
  color: var(--sc-ink-soft); text-decoration: none; font-size: 0.85rem; font-weight: 500;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.copy__links a:hover { color: var(--sc-accent); }
.copy__foot {
  margin: 1.6rem 0 0; font-family: var(--sc-font-mono);
  font-size: 0.7rem; letter-spacing: 0.06em; color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------ ambience --
   Idle drift so the world feels alive between scrolls. `translate` (the
   property) is used on purpose: it composes with the scroll-driven
   `transform`s instead of fighting them. */
@media (prefers-reduced-motion: no-preference) {
  .chip--float1 { animation: sc-bob 5.2s ease-in-out infinite; }
  .chip--float2 { animation: sc-bob 6.4s ease-in-out -1.2s infinite; }
  .slice--surface .chip--a { animation: sc-bob 5.8s ease-in-out -0.7s infinite; }
  .slice--surface .chip--b { animation: sc-bob 6.9s ease-in-out -2.1s infinite; }
  .slice--surface .chip--c { animation: sc-bob 5.5s ease-in-out -1.5s infinite; }
  .chip--m1 { animation: sc-bob 6.1s ease-in-out -0.9s infinite; }
  .chip--m2 { animation: sc-bob 5.6s ease-in-out -0.4s infinite; }
  .chip--m3 { animation: sc-bob 6.7s ease-in-out -1.9s infinite; }
  .chip--m4 { animation: sc-bob 5.9s ease-in-out -2.6s infinite; }
  .mchart { animation: sc-bob 6.6s ease-in-out -0.5s infinite; }
  .mquote { animation: sc-bob 7.4s ease-in-out -3.1s infinite; }
  .errtoast { animation: sc-bob 7.2s ease-in-out -1.8s infinite; }
  .stile--m5 { animation: sc-bob 6.3s ease-in-out -1.1s infinite; }
  .chip--b3 { animation: sc-bob 5.7s ease-in-out -2.3s infinite; }
  .floatel--1 { animation: sc-bob 9.0s ease-in-out infinite; }
  .floatel--2 { animation: sc-bob 8.2s ease-in-out -2.2s infinite; }
  .floatel--3 { animation: sc-bob 9.6s ease-in-out -4.1s infinite; }
  .floatel--4 { animation: sc-bob 7.6s ease-in-out -1.3s infinite; }
  .floatel--f1 { animation: sc-bob 11s ease-in-out -0.8s infinite; }
  .floatel--f2 { animation: sc-bob 10.2s ease-in-out -3.4s infinite; }
  .phone { animation: sc-bob 8.4s ease-in-out infinite; }
  .phone--b { animation-duration: 9.2s; animation-delay: -3.6s; }
  .scrollcue svg { animation: sc-bob 1.7s ease-in-out infinite; }
  .rail__head { animation: sc-pulse 2.6s ease-out infinite; }
  .editor__term::after {
    content: "▍"; color: var(--sky); margin-left: 6px;
    animation: sc-blink 1.2s steps(2, jump-none) infinite;
  }
}
@keyframes sc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sc-pulse {
  0% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
  70% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--sc-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 0%, transparent); }
}
@keyframes sc-blink { 50% { opacity: 0.25; } }

/* ------------------------------------------------------------ mechanics */

/* The scene is the film; posters are the reduced-motion print of it. While
   the camera is live the posters step aside; if JS never runs, the poster
   crossfade still tells the story. */
@media (prefers-reduced-motion: no-preference) {
  .camera-on .sc-world__poster { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .stratum { display: none; }
  .rail__fill, .rail__head { transition: none; }
}

/* Poster-render mode: a pinned frame of the scene for the still camera. */
.is-still .rail, .is-still .topbar, .is-still .mnav, .is-still .sc-grain,
.is-still [data-sc-progress], .is-still [data-sc-copy],
.is-still .sc-world__seg, .is-still .sc-world__scrim,
.is-still .skip-link { display: none !important; }
.is-still .scene, .is-still .stratum { display: block !important; }

/* ---------------------------------------------------------------- mobile */

@media (max-width: 860px) {
  .topbar { inset: 10px 12px auto; height: 52px; gap: 10px; padding: 0 6px 0 14px; }
  .topbar__nav { display: none; }
  .topbar__brand { margin-right: auto; }
  .topbar__brand img { height: 30px; }
  .topbar__cta { padding: 0.62em 1em; font-size: 0.88rem; }
  .topbar__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 10px; flex: none;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  }
  .topbar__burger span {
    display: block; height: 2px; border-radius: 2px; background: var(--sc-ink);
    transition: transform 0.3s var(--sc-ease-out), opacity 0.22s ease;
  }
  .topbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .topbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the rail becomes a horizontal strip along the bottom */
  .rail {
    left: 0; right: 0; top: auto; bottom: 0; translate: none;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 16px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--sc-canvas) 85%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--sc-hairline);
  }
  .rail__depth { white-space: nowrap; }
  .rail__track { position: relative; flex: 1; height: 30px; width: auto; }
  .rail__line { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .rail__fill { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; transform: scaleX(0); }
  .rail__head { left: 0; top: 50%; }
  .rail__nodes { inset: 0; }
  .rail__node { left: var(--nx, 0%); top: 50% !important; translate: -50% -50%; padding: 8px; }
  .rail__msg { display: none; }
  .rail__node.is-current .rail__dot { transform: scale(1.3); }

  /* scene recomposition: elements stay distributed through each slice so the
     camera always has something to fly past, but they skew to the upper band —
     and the copy becomes a frosted card, so anything drifting beneath reads
     as layering, not collision */
  .bore--l { left: 14px; } .bore--r { right: 14px; }
  .stratum-label, .scrollcue, .ambient, .mquote { display: none; }

  /* one hero object per leg — secondary chrome hidden so nothing collides
     at small viewport heights; primaries sit mid-band of their copy window */
  .slice--surface .mchart, .slice--surface .chip--a, .slice--surface .chip--b,
  .slice--surface .chip--c, .slice--surface .trustwire,
  .slice--fracture .console, .errtoast, .errchip,
  .slice--fix .diff, .checklist,
  .slice--build .editor, .chip--b3,
  .chip--m1, .chip--m2, .chip--m3, .chip--m4, .stile--m5,
  .pipeline, .stats { display: none; }

  .slice--surface .browser { left: 6%; width: 88%; top: 14%; height: 48%; }

  .slice--fracture .browser { left: 6%; width: 88%; top: 70%; height: 32%; }

  .slice--fix .diff { font-size: 0.62rem; }

  .slice--build .editor { left: 6%; width: 88%; top: 26%; height: 24%; }
  .blueprint { display: none; }

  .phone { width: 38%; height: 44%; }
  .phone--a { left: 11%; top: 55%; } .phone--b { left: 53%; top: 63%; }

  .erd { left: 6%; width: 88%; top: 66%; height: 40%; }

  .keel__stack { top: 52%; transform: scale(0.6); }
  .keel__plate { bottom: 14%; }

  .copy h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); letter-spacing: -0.03em; }
  .copy h1.sc-display--xl { font-size: clamp(1.85rem, 8.6vw, 2.4rem); max-width: none; }
  .copy__ctas .btn-main, .copy__ctas .btn-ghost { font-size: 0.88rem; padding: 0.85em 1.05em; }
  .hgrad { background: none; color: var(--sc-ink); -webkit-text-fill-color: var(--sc-ink); }

  /* the copy card: frosted panel so scene drift behind it reads as depth */
  .sc-copy {
    left: 12px; right: 12px;
    padding: 1.05rem 1.1rem;
    border-radius: 20px;
    border: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
    background: rgba(237, 242, 248, 0.80);
    backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3);
    box-shadow: 0 18px 44px color-mix(in oklab, var(--sc-ink) 12%, transparent);
  }
  .sc-copy--lead, .sc-copy--trail { bottom: calc(50px + env(safe-area-inset-bottom)); }
  .copy .sc-display, .copy .sc-body, .copy__kicker, .copy__meta, .copy__foot { text-shadow: none; }
  .copy__meta { display: none; }
  .footer__logo { max-height: 44px; }
  .copy h2 { max-width: none; font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .copy--finale { text-align: left; }
  .copy--finale.sc-copy--center { left: 50%; right: auto; translate: -50% 0; bottom: 4%; width: min(94vw, 880px); padding: 1.3rem 1.2rem; border-radius: 20px; }
  .copy__ctas { flex-wrap: wrap; }
  .copy__ctas--center { justify-content: flex-start; }
  .keel-form { max-width: none; padding: 1.1rem 1rem; }
  .keel-form__row { grid-template-columns: 1fr; }
  .keel-form__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .keel-form__foot .btn-main { width: 100%; }
  .copy__links { flex-wrap: wrap; justify-content: flex-start; gap: 14px 20px; }
}

.trustwire {
  position: absolute; left: 24%; top: 86%; width: 56%; height: 8%;
  display: flex; align-items: center; gap: 3%;
}
.trustwire i {
  flex: 1; height: 34%; border-radius: 6px;
  background: color-mix(in oklab, var(--sc-ink) 7%, transparent);
}
.scrollcue {
  position: absolute; left: 50%; bottom: 3.5%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.scrollcue svg { width: 12px; height: 18px; }

/* s2 restored card — the healed site, full-bleed photo with frosted overlays */
.restored {
  left: 56%; top: 60%; width: 37%; height: 38%;
  overflow: hidden; transform: rotate(1.5deg);
  box-shadow: 0 34px 70px -28px color-mix(in oklab, var(--sky) 48%, transparent),
    var(--sc-e2), var(--sc-edge);
}
.restored__thumb {
  position: absolute; left: 0; right: 0; top: 13%; bottom: 0;
  width: 100%; height: 87%; object-fit: cover;
}
.restored__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  height: 13%; padding: 0 4%;
  border-bottom: 1px solid var(--sc-hairline);
  background: var(--sc-surface);
}
.restored__bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.restored__bar span {
  margin-left: 6px; font-family: var(--sc-font-mono); font-size: clamp(0.5rem, 0.62vw, 0.68rem);
  color: var(--sc-ink-soft);
}
.restored__status {
  position: absolute; z-index: 2; left: 5%; top: 20%;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.7vw, 0.74rem);
  font-weight: 600; color: var(--ok); white-space: nowrap;
  background: color-mix(in oklab, var(--sc-surface) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--ok) 32%, transparent);
  border-radius: 999px; padding: 0.45em 0.85em;
  box-shadow: var(--sc-e1);
}
.restored__status b { font-size: 0.9em; }
.restored__tiles {
  position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 6%;
  display: flex; gap: 3%; padding: 0;
}
.restored__tiles .stile {
  flex: 1;
  background: color-mix(in oklab, var(--sc-surface) 80%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: color-mix(in oklab, #fff 42%, transparent);
}

/* s3 preview card — staging site, full-bleed photo */
.preview {
  left: 55%; top: 71%; width: 40%; height: 26%;
  overflow: hidden; transform: rotate(-1.4deg);
  box-shadow: 0 34px 70px -26px color-mix(in oklab, var(--sky) 42%, transparent),
    var(--sc-e2), var(--sc-edge);
}
.preview__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px; height: 21%;
  padding: 0 4%; border-bottom: 1px solid var(--sc-hairline);
  background: var(--sc-surface);
}
.preview__bar i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.preview__bar span {
  margin-left: 6px; font-family: var(--sc-font-mono); font-size: clamp(0.5rem, 0.62vw, 0.68rem);
  color: var(--sc-ink-soft);
}
.preview__body { position: relative; height: 79%; overflow: hidden; }
.preview__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* ambient top-of-slice marks: what the camera sees arriving at a layer */
.ambient {
  position: absolute; left: 12%; top: 9%;
  margin: 0; font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.72vw, 0.75rem);
  letter-spacing: 0.08em; color: var(--sc-ink-soft);
}
.ambient em { font-style: normal; color: var(--err); font-weight: 600; }
.ambient--chips { left: auto; right: 10%; top: 8%; display: flex; gap: 8px; }
.ambient--chips span {
  font-family: var(--sc-font-mono); font-size: clamp(0.55rem, 0.68vw, 0.72rem);
  color: var(--sc-ink-soft); border: 1px solid var(--sc-hairline-strong);
  border-radius: 999px; padding: 0.45em 1em; background: color-mix(in oklab, var(--sc-surface) 70%, transparent);
}
.ambient--chips .is-on { color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
.ambient--center { left: 50%; top: 12%; translate: -50% 0; }

/* picture-wrapped posters keep the seg's full-bleed behaviour */
.sc-world__seg > picture { position: absolute; inset: 0; display: block; }
.sc-world__seg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== shared site footer (in-flow; slides over the frozen world) ===== */
.container { max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.site-footer {
  position: relative; z-index: 30;
  background: #0f172a; color: #cbd5e1;
  padding: 3.2rem 0 1.8rem;
}
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; align-items: start; }
.footer__logo { display: block; max-height: 70px; width: auto; object-fit: contain; margin-bottom: 0.75rem; }
.footer__text { font-size: 0.875rem; line-height: 1.6; color: #94a3b8; }
.footer__heading {
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #fff; margin: 0 0 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 0.5rem; }
.footer__list a { color: #94a3b8; text-decoration: none; font-size: 0.875rem; transition: color 150ms ease; }
.footer__list a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid #334155; margin-top: 2rem; padding-top: 1.5rem;
  font-size: 0.875rem; color: #94a3b8;
}
.footer__bottom p { margin: 0; }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) {
  .site-footer { padding: 2.5rem 0 1.4rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* past the world the rail's job is done — retire it over the footer */
.is-parked .rail { opacity: 0; pointer-events: none; }

/* mobile positions for the photo cards — must follow their base rules */
@media (max-width: 860px) {
  .restored { left: 8%; top: 72%; width: 84%; height: 32%; transform: rotate(1deg); }
  .preview { display: block; left: 10%; top: 62%; width: 80%; height: 36%; transform: rotate(-1deg); }
  .ambient { display: none; }
}

/* ===== mobile hero: portrait phone version of the acme site ===== */
.mhero { display: none; }
@media (max-width: 860px) {
  .slice--surface .browser { display: none; }
  .mhero {
    display: block; left: 50%; top: 11%;
    width: 54%; height: 50%;
    transform: translateX(-50%) rotate(-1.5deg) translateY(calc((1 - var(--slice-p, 0)) * 4%));
  }
  .mhero__screen { container-type: inline-size; display: flex; flex-direction: column; }
  .mhero__img { flex: 1 1 auto; min-height: 30cqw; }
  .mhero__nav { display: flex; align-items: center; gap: 2.5cqw; padding: 5cqw 5.5cqw 0; }
  .mhero__mark {
    width: 4.6cqw; aspect-ratio: 1; border-radius: 28%;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--sky) 62%, transparent),
      color-mix(in oklab, var(--indigo) 52%, transparent));
  }
  .mhero__name {
    font-family: var(--sc-font-display); font-size: 4.4cqw; font-weight: 800;
    letter-spacing: -0.02em; color: color-mix(in oklab, var(--sc-ink) 50%, transparent);
  }
  .mhero__bars { margin-left: auto; display: flex; flex-direction: column; gap: 1.3cqw; }
  .mhero__bars i { width: 4.4cqw; height: 0.55cqw; border-radius: 2px; background: color-mix(in oklab, var(--sc-ink) 32%, transparent); }
  .mhero__eyebrow {
    margin: 4.5cqw 5.5cqw 0; align-self: flex-start; padding: 1.3cqw 3.2cqw;
    border-radius: 999px; background: color-mix(in oklab, var(--sky) 14%, transparent);
    display: inline-flex;
  }
  .mhero__eyebrow span {
    font-family: var(--sc-font-mono); font-size: 2.3cqw; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: color-mix(in oklab, var(--indigo) 78%, transparent); white-space: nowrap;
  }
  .mhero__h {
    margin: 3.5cqw 5.5cqw 0; font-family: var(--sc-font-display);
    font-size: 8.6cqw; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
    color: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  }
  .mhero__h em { font-style: normal; color: color-mix(in oklab, var(--sky) 82%, transparent); }
  .mhero__p {
    margin: 2.6cqw 5.5cqw 0; font-family: var(--sc-font-text);
    font-size: 3.1cqw; font-weight: 500; line-height: 1.45;
    color: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  }
  .mhero__cta {
    margin: 3.6cqw 5.5cqw 0; align-self: flex-start;
    padding: 2.4cqw 5.5cqw; border-radius: 999px;
    background: linear-gradient(135deg, var(--sky), var(--indigo));
    font-family: var(--sc-font-text); font-size: 3.4cqw; font-weight: 700; color: #fff;
    box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--sky) 60%, transparent);
  }
  .mhero__img { position: relative; margin: 4.5cqw 5.5cqw 0; height: 33cqw; }
  .mhero__img img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 3.2cqw;
  }
  .mhero__blob {
    position: absolute; right: -7%; top: -13%; width: 46%; aspect-ratio: 1;
    border-radius: 58% 42% 55% 45% / 52% 48% 60% 40%;
    background: linear-gradient(140deg, var(--sky) 5%, var(--indigo) 110%);
    box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--sky) 55%, transparent);
  }
  .mhero__tiles { display: flex; gap: 2.4cqw; margin: 3.6cqw 5.5cqw 0; }
  .mhero__tiles span {
    flex: 1; border-radius: 2.6cqw; padding: 2.4cqw 3cqw;
    background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  }
  .mhero__tiles b {
    display: block; font-family: var(--sc-font-display);
    font-size: 4cqw; font-weight: 800; color: var(--sky); letter-spacing: -0.01em;
  }
  .mhero__tiles i {
    font-family: var(--sc-font-mono); font-size: 2cqw; font-style: normal;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
  }
  .mhero__quote {
    display: flex; align-items: center; gap: 2.6cqw;
    margin: 3.6cqw 5.5cqw 0; padding: 2.6cqw 3cqw;
    border: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
    border-radius: 2.8cqw;
    background: color-mix(in oklab, #fff 55%, transparent);
  }
  .mhero__ava {
    width: 7.5cqw; height: 7.5cqw; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--sky), var(--indigo));
  }
  .mhero__stars {
    display: block; font-size: 2.6cqw; letter-spacing: 0.18em;
    color: color-mix(in oklab, var(--sky) 80%, transparent);
  }
  .mhero__quote p {
    margin: 0.4cqw 0 0; font-size: 2.9cqw; line-height: 1.35;
    color: color-mix(in oklab, var(--sc-ink) 48%, transparent);
  }
  .mhero__logos {
    display: flex; gap: 2.6cqw; margin: 4cqw 5.5cqw 5cqw;
  }
  .mhero__logos span {
    flex: 1; height: 3.4cqw; border-radius: 1.7cqw;
    background: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  }
}