@charset "UTF-8";
/* ==========================================================================
   Superchat — superchat.in
   Hand-built. No framework, no utility soup, no component library.

   Structure
     01  Tokens
     02  Reset
     03  Typography
     04  Layout primitives & tone
     05  Navigation
     06  Buttons & links
     07  Motion / reveal
     08  Hero + scrubbed canvas stage
     09  Story acts
     10  Stand-for (pinned cross-fade)
     11  Doors, products, rails
     12  Figures, stats, proof
     13  People
     14  Forms
     15  End CTA + footer
     16  Accessibility & print
   ========================================================================== */

/* -- 01  Tokens ---------------------------------------------------------- */
:root {
  --ink:        #06070b;
  --ink-soft:   #0d0f17;
  --ink-lift:   #14161f;
  --paper:      #fbfaf7;
  --paper-2:    #f1efe9;
  --haze:       #edebf7;
  --indigo:     #232873;
  --violet:     #7a2bf5;
  --magenta:    #c6379b;
  --ember:      #f2621f;

  --grad: linear-gradient(96deg, var(--violet) 0%, var(--magenta) 52%, var(--ember) 100%);

  /* Resolved per tone — every component reads these, never a raw colour. */
  --fg:      #0a0b10;
  --fg-mid:  #4b4f5c;
  --fg-dim:  #83879a;
  --rule:    rgba(10, 11, 16, .12);

  /* Elevation. Two layers each: a tight contact shadow so the edge reads, and
     a wide ambient one so the surface feels lifted rather than outlined. */
  --lift-1: 0 1px 2px rgba(16, 12, 40, .06), 0 2px 8px rgba(16, 12, 40, .05);
  --lift-2: 0 2px 4px rgba(16, 12, 40, .07), 0 8px 24px rgba(16, 12, 40, .08);
  --lift-3: 0 4px 8px rgba(16, 12, 40, .08), 0 18px 48px rgba(16, 12, 40, .11);
  --lift-4: 0 8px 16px rgba(16, 12, 40, .10), 0 36px 90px rgba(16, 12, 40, .16);
  --rule-2:  rgba(10, 11, 16, .06);
  --surface: rgba(10, 11, 16, .035);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Inter,
          system-ui, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Minimums are set so the longest display line ("Nobody else's cloud.")
     still fits a 360px viewport without clipping. */
  --t-display: clamp(2.05rem, 8.8vw, 7.4rem);
  --t-h1:      clamp(1.8rem, 6.6vw, 5.2rem);
  --t-h2:      clamp(1.55rem, 5vw, 3.7rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.85rem);
  --t-h4:      clamp(1.05rem, 1.35vw, 1.25rem);
  --t-lead:    clamp(1.06rem, 1.5vw, 1.38rem);
  --t-body:    clamp(0.97rem, 1.02vw, 1.06rem);
  --t-small:   clamp(0.84rem, 0.9vw, 0.9rem);
  --t-eyebrow: clamp(0.72rem, 0.76vw, 0.78rem);

  --wrap: min(92vw, 1480px);
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --sec: clamp(4rem, 8vh, 7rem);
  --nav-h: 52px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .02, .28, 1);
}

/* -- 02  Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--violet); color: #fff; }

/* -- 03  Typography ------------------------------------------------------ */
.display, .h1, .h2 {
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.display { font-size: var(--t-display); }
.h1      { font-size: var(--t-h1); }
.h2      { font-size: var(--t-h2); letter-spacing: -0.036em; line-height: 1.04; }
.h3      { font-size: var(--t-h3); font-weight: 650; letter-spacing: -0.026em; line-height: 1.12; }
.h4      { font-size: var(--t-h4); font-weight: 650; letter-spacing: -0.018em; line-height: 1.25; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.44;
  letter-spacing: -0.017em;
  color: var(--fg-mid);
  text-wrap: pretty;
}
.small { font-size: var(--t-small); color: var(--fg-mid); }
.dim   { color: var(--fg-dim); }
.mid   { color: var(--fg-mid); }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The clip box follows the line box, so tight leading would shear
     descenders off. Grow the box, then take the space back. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.measure    { max-width: 34ch; }
.measure-lg { max-width: 56ch; }

/* -- 04  Layout primitives & tone ---------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec  { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }

[data-tone="dark"] {
  --fg: #ffffff;
  --fg-mid: rgba(255, 255, 255, .66);
  --fg-dim: rgba(255, 255, 255, .42);
  --rule: rgba(255, 255, 255, .16);
  --lift-1: inset 0 1px 0 rgba(255, 255, 255, .06);
  --lift-2: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 24px rgba(0, 0, 0, .35);
  --lift-3: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 48px rgba(0, 0, 0, .45);
  --lift-4: inset 0 1px 0 rgba(255, 255, 255, .10), 0 36px 90px rgba(0, 0, 0, .55);
  --rule-2: rgba(255, 255, 255, .07);
  --surface: rgba(255, 255, 255, .045);
  background: var(--ink);
  color: var(--fg);
}
[data-tone="light"]  { background: var(--paper); }
[data-tone="paper2"] { --fg: #0a0b10; background: var(--paper-2); }
[data-tone="haze"]   { --fg: #0a0b10; background: linear-gradient(180deg, var(--haze), #fbfaff 70%); }

/* Pastel tones. Light enough to keep body copy at full contrast, saturated
   enough to give each act its own air — the site should not read as one long
   black page. */
[data-tone="lilac"] { --fg: #0a0b10; background: linear-gradient(165deg, #f4f1fd, #fbfaff 62%, #f7f4fd); }
[data-tone="mint"]  { --fg: #0a0b10; background: linear-gradient(165deg, #eef7f4, #fbfdfc 60%, #f2f8f7); }
[data-tone="peach"] { --fg: #0a0b10; background: linear-gradient(165deg, #fdf3ec, #fffbf7 60%, #fdf2e9); }
[data-tone="sky"]   { --fg: #0a0b10; background: linear-gradient(165deg, #edf3fb, #fbfcff 62%, #f0f5fc); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

/* Two-column editorial split used across the story pages. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .split--tight { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
  /* A half-width column cannot carry a full display size — at 5rem a long
     heading collapses to one or two words per line. Step it down here. */
  .split .h1  { font-size: clamp(1.8rem, 3.5vw, 3.15rem); }
  .split .display { font-size: clamp(2.4rem, 5vw, 4.6rem); }
}

.cols {
  display: grid;
  gap: clamp(1.75rem, 3.4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* A quiet chapter index for very wide screens. It gives the long home-page
   story a visible spine without taking space away from the content column. */
.storyrail { display: none; }
@media (min-width: 1500px) and (min-height: 650px) {
  .storyrail {
    position: fixed;
    z-index: 42;
    top: 50%;
    right: 1.15rem;
    translate: 0 -50%;
    display: grid;
    gap: .15rem;
    padding: .6rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(6, 7, 11, .72);
    color: #fff;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
  .storyrail a {
    display: grid;
    grid-template-columns: 7px 0fr;
    align-items: center;
    gap: .5rem;
    min-height: 1.75rem;
    padding-inline: .15rem;
    border-radius: 8px;
    opacity: .42;
    transition: opacity .3s var(--ease), grid-template-columns .35s var(--ease), background .3s;
  }
  .storyrail a:hover,
  .storyrail a:focus-visible,
  .storyrail a.is-active {
    grid-template-columns: 7px 5.25rem;
    opacity: 1;
    background: rgba(255, 255, 255, .07);
  }
  .storyrail i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(185, 147, 255, .6);
    transition: box-shadow .3s, background .3s;
  }
  .storyrail a.is-active i {
    background: #b993ff;
    box-shadow: 0 0 0 4px rgba(185, 147, 255, .15);
  }
  .storyrail span {
    overflow: hidden;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* -- 05  Navigation ------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--nav-h);
  color: #fff;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease), color .3s linear;
}
.nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.nav--stuck {
  background: rgba(6, 7, 11, .62);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nav--stuck::after { opacity: .14; }
.nav.nav--onlight { color: var(--ink); }
/* No colour transition until the bar has settled once, so a page that opens on
   a pale section paints dark immediately rather than fading in from white. */
.nav:not(.nav--ready) { transition: none; }
.nav--onlight.nav--stuck {
  background: rgba(251, 250, 247, .72);
}

.nav__in {
  height: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; }
.nav__word {
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.mark { color: currentColor; }

.nav__list { display: none; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav__list a {
  font-size: .8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .72;
  transition: opacity .25s;
  position: relative;
}
.nav__list a:hover { opacity: 1; }
.nav__list a[aria-current="page"] { opacity: 1; }
.nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -7px;
  height: 1.5px;
  background: currentColor;
}
.nav__cta {
  display: none;
  font-size: .8rem;
  line-height: 1;
  align-items: center;
  font-weight: 600;
  padding: .42rem .9rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .9;
  transition: opacity .25s, transform .25s var(--ease);
}
.nav__cta:hover { opacity: 1; transform: translateY(-1px); }
.nav__login {
  display: none;
  font-size: .8rem;
  line-height: 1;
  align-items: center;
  font-weight: 600;
  opacity: .76;
  transition: opacity .25s;
}
.nav__login { position: relative; }
.nav__login:hover,
.nav__login[aria-current="page"] { opacity: 1; }
/* The login link sits outside .nav__list, so it never picked up the current-page
   underline the other five get. It is a primary destination and should mark
   itself the same way. */
.nav__login[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -7px;
  height: 1.5px;
  background: currentColor;
}

.nav__burger {
  width: 44px; height: 44px;
  margin-right: -.5rem;          /* keep the bars optically on the gutter */
  display: grid; align-content: center; gap: 6px;
  justify-items: end;
  padding-right: .5rem;
}
.nav__burger span {
  display: block; width: 20px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 860px) {
  .nav__list { display: flex; }
  .nav__login { display: inline-flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(6, 7, 11, .96);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  padding: calc(var(--nav-h) + 6vh) var(--gut) 0;
  color: #fff;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.sheet[hidden] { display: none; }
.sheet--open { opacity: 1; }
.sheet__list { display: grid; gap: 1.1rem; }
.sheet__list a {
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet--open .sheet__list a { opacity: 1; transform: none; }
.sheet--open .sheet__list li:nth-child(2) a { transition-delay: .05s; }
.sheet--open .sheet__list li:nth-child(3) a { transition-delay: .1s; }
.sheet--open .sheet__list li:nth-child(4) a { transition-delay: .15s; }
.sheet--open .sheet__list li:nth-child(5) a { transition-delay: .2s; }
body.is-locked { overflow: hidden; }

/* -- 06  Buttons & links ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .82rem 1.6rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background-color .3s, border-color .3s, opacity .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn--grad  { background: var(--grad); color: #fff; }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--ghost { border-color: var(--rule); color: var(--fg); }
.btn--ghost:hover { border-color: currentColor; }

.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--violet);
}
[data-tone="dark"] .arrowlink { color: #b993ff; }
.arrowlink::after {
  content: "›";
  font-size: 1.25em;
  line-height: 0;
  transform: translateY(-.02em);
  transition: transform .3s var(--ease);
}
.arrowlink:hover::after { transform: translate(4px, -.02em); }

.btnrow { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Obfuscated addresses. Until JS rewrites it the link shows a readable
   "name [at] domain [dot] tld", which a human can still use. */
.mailto { cursor: pointer; }
.mailto__raw { white-space: nowrap; }

/* -- 07  Motion / reveal ------------------------------------------------- *
   Everything here is opt-in via the `js` class set in <head>. Without
   scripting the page is simply visible — an animation must never be the
   reason content cannot be read.                                           */
.r { display: block; }

.js .r {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .is-in .r, .js .r.is-in { opacity: 1; transform: none; }
.js .is-in .r:nth-child(2) { transition-delay: .08s; }
.js .is-in .r:nth-child(3) { transition-delay: .16s; }
.js .is-in .r:nth-child(4) { transition-delay: .24s; }

.js .fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
.js .fade.is-in { opacity: 1; transform: none; }

/* Groups reveal in reading order rather than appearing as a single slab. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-stagger].is-staggered > * { opacity: 1; transform: none; }
.js [data-stagger].is-staggered > *:nth-child(2) { transition-delay: .07s; }
.js [data-stagger].is-staggered > *:nth-child(3) { transition-delay: .14s; }
.js [data-stagger].is-staggered > *:nth-child(4) { transition-delay: .21s; }
.js [data-stagger].is-staggered > *:nth-child(5) { transition-delay: .28s; }

/* -- 08  Hero + scrubbed canvas stage ------------------------------------ */
.hero {
  position: relative;
  min-height: min(100svh, 54rem);
  display: grid;
  align-content: center;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 3rem) clamp(3rem, 8vh, 5rem);
}
/* On a wide monitor the copy is left-aligned and shorter than the container,
   so the right third read as dead space rather than composition. Hold the
   copy to a deliberate measure and let the glow sit behind and to the right of
   it, so the emptiness becomes the subject instead of an accident. */
@media (min-width: 1200px) {
  .hero .wrap { max-width: 76rem; }
  .hero--home .wrap { max-width: 92.5rem; }
}
.hero__glow {
  position: absolute;
  width: min(150vw, 1500px);
  aspect-ratio: 1;
  left: 50%;
  top: 58%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(122, 43, 245, .30), rgba(198, 55, 155, .10) 42%, transparent 68%);
  pointer-events: none;
  animation: breathe 13s var(--ease-io) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.hero .wrap { position: relative; z-index: 2; }
.hero__eyebrow { margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.hero__h {
  /* Width alone makes display type too tall on short laptop windows. The
     height cap keeps the full hero, CTAs and scroll cue in one viewport. */
  font-size: clamp(2.05rem, min(8.8vw, 14svh), 7.4rem);
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.hero__h .r:nth-child(2) { color: rgba(255, 255, 255, .55); }
.hero__sub { max-width: 46ch; margin-bottom: clamp(2rem, 5vh, 3rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__engines { display: grid; gap: 1rem; }
.heroengine {
  position: relative;
  display: grid;
  gap: .65rem;
  min-width: 0;
  padding: clamp(1.2rem, 2vw, 1.65rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .035));
  box-shadow: 0 5px 0 rgba(0, 0, 0, .22), 0 20px 50px rgba(0, 0, 0, .2);
  transition: transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s;
}
.heroengine::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad);
}
.heroengine--swayam::before { background: linear-gradient(180deg, var(--magenta), var(--ember)); }
.heroengine:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .3);
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
  box-shadow: 0 8px 0 rgba(0, 0, 0, .2), 0 28px 65px rgba(0, 0, 0, .26);
}
.heroengine__kicker {
  color: rgba(255, 255, 255, .58);
  font-size: var(--t-eyebrow);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.heroengine strong {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.heroengine__note { color: rgba(255, 255, 255, .68); font-size: var(--t-small); line-height: 1.5; }
.heroengine__link { margin-top: .25rem; color: #c7a9ff; font-size: .86rem; font-weight: 650; }
.heroengine__link i { display: inline-block; margin-left: .3rem; font-style: normal; transition: transform .3s var(--ease); }
.heroengine:hover .heroengine__link i { transform: translateX(4px); }
@media (min-width: 1050px) {
  .hero--home .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); }
  .hero--home .hero__h { font-size: clamp(3rem, min(6.2vw, 12.5svh), 6.5rem); }
}
@media (min-width: 680px) and (max-width: 1049px) {
  .hero--home { min-height: auto; }
  .hero--home .hero__engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--home .hero__foot { display: none; }
}
@media (max-width: 679px) {
  .hero--home { min-height: auto; }
  .hero--home .hero__engines { margin-top: .5rem; }
  .hero--home .hero__foot { display: none; }
}
.hero__foot {
  position: absolute;
  inset: auto 0 clamp(1.5rem, 4vh, 2.75rem);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero__foot { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero__foot.is-gone { opacity: 0; transform: translateY(8px); pointer-events: none; }
.scrollcue {
  display: grid;
  justify-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.scrollcue i {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  animation: cue 2.4s var(--ease-io) infinite;
  transform-origin: top;
}

/* Short desktop and landscape windows need a denser vertical rhythm. */
@media (max-height: 820px) {
  .hero {
    padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3rem));
    padding-bottom: clamp(4rem, 9vh, 4.75rem);
  }
  .hero__eyebrow { margin-bottom: clamp(1rem, 3vh, 1.5rem); }
  .hero__h { margin-bottom: clamp(1.25rem, 3vh, 1.75rem); }
  .hero__sub { margin-bottom: clamp(1.5rem, 4vh, 2rem); }
}

/* At very short heights keep the cue compact so it remains visible without
   competing with the actions above it. */
@media (max-height: 700px) {
  .hero {
    align-content: center;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 2rem;
  }
  .hero__eyebrow { margin-bottom: 1rem; }
  .hero__h { margin-bottom: 1.25rem; }
  .hero__sub { margin-bottom: 1.5rem; }
  .hero__foot { inset-block-end: .65rem; }
  .scrollcue { gap: .25rem; font-size: .7rem; }
  .scrollcue i { height: 20px; }
}

@keyframes cue {
  0%   { transform: scaleY(0);   opacity: 0; }
  35%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; }
}

/* The scroll-scrubbed canvas: pinned while the story runs through it.
   The tall height is the scroll budget the story is scrubbed across. */
.stage { position: relative; background: var(--ink); height: 260svh; }
html:not(.js) .stage { height: auto; }
.stage__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  pointer-events: none;
}
/* The panels share one cell so they cross-fade in place rather than stacking. */
.stage__copy > .wrap { display: grid; }
.stage__panel { grid-area: 1 / 1; color: #fff; }
.js .stage__panel {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .stage__panel.is-on { opacity: 1; transform: none; }
/* No script: the panels cannot cross-fade, so show only the first. */
html:not(.js) .stage__panel + .stage__panel { display: none; }
.stage__panel .lead { color: rgba(255, 255, 255, .68); max-width: 40ch; }
.stage__meter {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  flex-wrap: wrap;
}
.stage__meter div { min-width: 6.5rem; }
.stage__meter b {
  display: block;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stage__meter span {
  display: block;
  margin-top: .5rem;
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

/* -- 09  Story acts ------------------------------------------------------ */
.act__eyebrow { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.act__h { margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem); }

/* A single sentence, alone on the screen. Used sparingly — twice. */
.beat {
  min-height: 60svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-inline: var(--gut);
}
.beat p {
  font-size: clamp(1.8rem, 5.2vw, 4.2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 18ch;
  text-wrap: balance;
}

/* Numbered work items — "twelve months, zero shortcuts". */
.work { counter-reset: w; }
.work__item { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.work__item .num {
  display: block;
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  color: var(--violet);
  margin-bottom: 1rem;
  font-weight: 600;
}
[data-tone="dark"] .work__item .num { color: #b993ff; }
.work__item p { color: var(--fg-mid); margin-top: .6rem; font-size: var(--t-small); }

/* -- 09b  Evidence register --------------------------------------------- */
.benchmark { overflow: hidden; }
.bench__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vh, 3.5rem);
}
@media (min-width: 980px) {
  .bench__layout { grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .65fr); align-items: start; }
}
.benchboard {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--ink);
  color: #fff;
  box-shadow: 0 28px 80px rgba(14, 24, 22, .16);
}
.benchboard__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .52);
}
.benchboard__head div { display: flex; align-items: center; gap: .55rem; }
.benchboard__head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b993ff;
  box-shadow: 0 0 0 5px rgba(185, 147, 255, .1);
}
.benchboard__state { color: #a9e8cd; text-align: right; }
.benchboard__scan {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #b993ff 25%, #f2621f 75%, transparent);
  box-shadow: 0 0 18px rgba(185, 147, 255, .65);
}
.benchboard.is-running .benchboard__scan { animation: benchscan 2.8s var(--ease-io) .15s both; }
@keyframes benchscan {
  0% { opacity: 0; top: 3.1rem; }
  12% { opacity: .85; }
  88% { opacity: .55; }
  100% { opacity: 0; top: calc(100% - 1px); }
}
.benchlist { position: relative; z-index: 1; }
.benchrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, .34fr);
  gap: clamp(.75rem, 2vw, 1.4rem);
  padding: clamp(1.3rem, 2.5vw, 2rem) clamp(1rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, 0);
  transition: background .5s var(--ease);
}
.benchrow:last-child { border-bottom: 0; }
.benchrow::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
}
.benchboard.is-running .benchrow::after { animation: benchline .65s var(--ease) both; }
.benchboard.is-running .benchrow:nth-child(2)::after { animation-delay: .26s; }
.benchboard.is-running .benchrow:nth-child(3)::after { animation-delay: .52s; }
.benchboard.is-running .benchrow:nth-child(4)::after { animation-delay: .78s; }
@keyframes benchline { to { transform: scaleX(1); } }
.benchrow:hover { background: rgba(255, 255, 255, .035); }
.benchrow__main { display: grid; gap: .52rem; }
.benchrow__title { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.benchrow__title span,
.benchrow__tests,
.benchrow__source {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .025em;
}
.benchrow__title span { color: rgba(255, 255, 255, .4); }
.benchrow__tests { color: #a9e8cd; }
.benchrow__body { max-width: 58ch; font-size: var(--t-small); color: rgba(255, 255, 255, .6); }
.benchrow__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin-top: .18rem;
}
.benchrow__results li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .16rem .55rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .025);
}
.benchrow__results li.is-winner {
  border-color: rgba(169, 232, 205, .38);
  background: rgba(169, 232, 205, .07);
}
.benchrow__results span,
.benchrow__results b,
.benchrow__results small {
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1.35;
}
.benchrow__results span { color: rgba(255, 255, 255, .56); }
.benchrow__results b { color: #fff; font-weight: 600; text-align: right; }
.benchrow__results small { grid-column: 1 / -1; color: rgba(255, 255, 255, .38); }
.benchrow__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.benchrow__source { width: fit-content; color: rgba(255, 255, 255, .48); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.benchrow__record { color: #a9e8cd; border-bottom-color: rgba(169, 232, 205, .3); }
a.benchrow__source:hover { color: #fff; }
.benchrow__score {
  align-self: start;
  justify-self: end;
  max-width: 12ch;
  padding: .38rem .6rem;
  border: 1px solid rgba(242, 98, 31, .38);
  border-radius: 999px;
  color: #ffad86;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
.benchrow__score.is-verified {
  display: grid;
  justify-self: stretch;
  gap: .3rem;
  max-width: none;
  padding: .72rem .78rem;
  border-color: rgba(169, 232, 205, .4);
  border-radius: .65rem;
  background: linear-gradient(145deg, rgba(169, 232, 205, .12), rgba(185, 147, 255, .07));
  color: #fff;
  text-align: left;
}
.benchrow__score.is-verified > span,
.benchrow__score.is-verified > small {
  color: rgba(255, 255, 255, .5);
  font-size: .58rem;
  letter-spacing: .02em;
}
.benchrow__score.is-verified > strong {
  color: #a9e8cd;
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -.025em;
}
.benchproof { padding-top: .25rem; }
.benchproof > .eyebrow { margin-bottom: 1.5rem; }
.benchproof ol { display: grid; gap: 0; }
.benchproof li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .85rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
}
.benchproof li > span { font-family: var(--mono); font-size: .7rem; color: var(--violet); }
.benchproof li p { font-size: var(--t-small); color: var(--fg-mid); }
.benchproof li b { display: block; margin-bottom: .25rem; color: var(--fg); font-size: var(--t-body); }
.benchproof__note {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--ember);
  background: rgba(242, 98, 31, .055);
  font-size: var(--t-small);
  color: var(--fg-mid);
}
.benchhardware { display: grid; gap: .6rem; margin-top: 1.7rem; }
.benchhardware > .eyebrow { margin-bottom: .25rem; }
.benchhardware article {
  display: grid;
  gap: .22rem;
  padding: .85rem .95rem;
  border: 1px solid var(--rule);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .42);
}
.benchhardware h3 { font-size: .92rem; }
.benchhardware p:not(.eyebrow) { font-family: var(--mono); font-size: .64rem; color: var(--fg-mid); }
.benchpending { display: grid; gap: .45rem; margin-top: 1.5rem; }
.benchpending > .eyebrow { margin-bottom: .25rem; }
.benchpending a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .72rem .8rem;
  border: 1px solid var(--rule);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .3);
}
.benchpending a:hover { border-color: rgba(122, 43, 245, .45); }
.benchpending span { display: grid; gap: .1rem; min-width: 0; color: var(--fg-mid); font-family: var(--mono); font-size: .61rem; }
.benchpending b { color: var(--fg); font-family: var(--sans); font-size: .79rem; }
.benchpending em { flex: 0 0 auto; color: var(--ember); font-family: var(--mono); font-size: .59rem; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 680px) {
  .benchrow { grid-template-columns: 1fr; }
  .benchrow__score { justify-self: start; max-width: none; }
  .benchrow__score.is-verified { justify-self: stretch; }
  .benchrow__results { grid-template-columns: 1fr; }
}

/* -- 09c  Unplug demonstration ----------------------------------------- */
.unplug { overflow: hidden; }
.unplug__layout { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 920px) {
  .unplug__layout { grid-template-columns: minmax(0, .82fr) minmax(28rem, 1.18fr); }
}
.unplug__demo {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 68% 38%, rgba(122, 43, 245, .14), transparent 38%),
    var(--ink-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 24px 70px rgba(0, 0, 0, .28);
}
.unplug__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .44);
}
.unplug__clock { color: #b993ff; }
.unplug__cable { position: relative; height: clamp(7rem, 18vw, 9.5rem); }
.unplug__port,
.unplug__plug {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: #171a24;
}
.unplug__port { left: 4%; width: 58px; height: 54px; box-shadow: inset 0 0 0 5px #0b0d13; }
.unplug__plug { left: calc(4% + 42px); z-index: 2; width: 64px; height: 42px; transform-origin: left center; }
.unplug__port i,
.unplug__plug i { height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.unplug__line {
  position: absolute;
  top: calc(50% - 3px);
  left: calc(4% + 96px);
  right: 2%;
  height: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #292d3c, #43485a 65%, #292d3c);
}
.unplug__spark {
  position: absolute;
  z-index: 3;
  top: calc(50% - 3px);
  left: calc(4% + 55px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: #f2621f;
  box-shadow: 0 0 20px 7px rgba(242, 98, 31, .42);
}
.unplug.is-played .unplug__plug { animation: unplugpull .9s var(--ease) .45s both; }
.unplug.is-played .unplug__spark { animation: unplugspark .55s ease-out .62s both; }
@keyframes unplugpull { to { transform: translateX(clamp(3.2rem, 9vw, 5.4rem)); } }
@keyframes unplugspark { 0%, 100% { opacity: 0; scale: .4; } 35% { opacity: 1; scale: 1; } }
.unplug__telemetry { display: grid; border-block: 1px solid rgba(255, 255, 255, .1); }
.unplug__telemetry > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .72rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--mono);
  font-size: .72rem;
}
.unplug__telemetry > div:last-child { border-bottom: 0; }
.unplug__telemetry dt { color: rgba(255, 255, 255, .42); }
.unplug__telemetry dd { display: flex; align-items: center; gap: .55rem; margin: 0; color: rgba(255, 255, 255, .82); text-align: right; }
.unplug__telemetry dd i { width: 7px; height: 7px; border-radius: 50%; background: #a9e8cd; box-shadow: 0 0 0 4px rgba(169, 232, 205, .08); }
.unplug.is-unplugged .unplug__telemetry > div:first-child dd { color: #ffad86; }
.unplug.is-unplugged .unplug__telemetry > div:first-child dd i { background: var(--ember); box-shadow: 0 0 0 4px rgba(242, 98, 31, .1); }
.unplug__response { display: flex; align-items: center; gap: 5px; min-height: 3.1rem; overflow: hidden; }
.unplug__response span { height: 4px; width: 14%; border-radius: 9px; background: rgba(255, 255, 255, .12); transform-origin: left; }
.unplug.is-unplugged .unplug__response span { animation: localresponse 1.5s var(--ease-io) infinite alternate; }
.unplug.is-unplugged .unplug__response span:nth-child(2) { animation-delay: .1s; width: 8%; }
.unplug.is-unplugged .unplug__response span:nth-child(3) { animation-delay: .2s; width: 19%; }
.unplug.is-unplugged .unplug__response span:nth-child(4) { animation-delay: .3s; width: 11%; }
.unplug.is-unplugged .unplug__response span:nth-child(5) { animation-delay: .4s; width: 17%; }
.unplug.is-unplugged .unplug__response span:nth-child(6) { animation-delay: .5s; width: 10%; }
@keyframes localresponse { from { opacity: .22; transform: scaleX(.18); } to { opacity: .9; transform: scaleX(1); background: #b993ff; } }
.unplug__caption { font-size: .7rem; color: rgba(255, 255, 255, .4); }

/* -- 10  Stand-for (pinned cross-fade) ----------------------------------- */
.stand { position: relative; background: var(--ink); color: #fff; height: 250svh; }
html:not(.js) .stand { height: auto; }
.stand__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
}
.stand__viz { grid-area: 1 / 1; position: relative; }
.stand__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.js .stand__scene {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 1.3s var(--ease);
  will-change: opacity, transform;
}
.js .stand__scene.is-on { opacity: 1; transform: scale(1); }
html:not(.js) .stand__scene + .stand__scene { display: none; }
.stand__scene svg { width: min(78vw, 620px); height: auto; }

/* Wide enough for two columns: art to the right, statement to the left,
   so nothing has to be read through a picture. */
@media (min-width: 940px) {
  .stand__scene { place-items: center end; padding-right: clamp(2rem, 6vw, 6rem); }
  .stand__scene svg { width: min(46vw, 600px); }
}

.stand__copy {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: end;
  padding: 0 var(--gut) clamp(3rem, 9vh, 6rem);
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 7, 11, .82) 78%);
}
.stand__text { grid-area: 1 / 1; max-width: 32rem; }
@media (min-width: 940px) {
  .stand__copy { align-content: center; background: none; }
  .stand__text { max-width: min(30rem, 44vw); }
}
.js .stand__text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .stand__text.is-on { opacity: 1; transform: none; }
/* No script: stack the four statements as ordinary prose instead of overlaying. */
html:not(.js) .stand__pin { position: static; height: auto; }
html:not(.js) .stand__copy { position: static; background: none; display: block; padding-block: var(--sec); }
html:not(.js) .stand__text { max-width: 56ch; margin-bottom: 2.5rem; }
html:not(.js) .stand__viz, html:not(.js) .stand__rail { display: none; }
.stand__text .eyebrow { color: rgba(255, 255, 255, .48); margin-bottom: 1rem; }
.stand__text p { color: rgba(255, 255, 255, .7); margin-top: .9rem; font-size: var(--t-lead); }

/* The progress rail lives in the outer margin of the content column, so it is
   only shown once the viewport is wider than the column plus real gutter.
   Anchoring it to the viewport instead put it exactly on the text's left edge
   at every width between the column max and about 940px. */
.stand__rail {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  gap: .6rem;
  z-index: 3;
}
.stand__rail i {
  display: block;
  width: 2px; height: 26px;
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
  transition: background .5s;
}
.stand__rail i.is-on { background: #fff; }
@media (min-width: 1320px) { .stand__rail { display: grid; } }

/* Scene primitives — abstract, drawn, never stock imagery. */
.sc-dots circle { fill: rgba(255, 255, 255, .5); }
.sc-line { stroke: rgba(255, 255, 255, .22); stroke-width: 1; fill: none; }
.sc-hot  { stroke: url(#gradStroke); stroke-width: 2; fill: none; }
.sc-glow { filter: url(#softGlow); }
.sc-pulse { animation: pulse 3.4s var(--ease-io) infinite; transform-origin: center; }
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
.sc-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.is-on .sc-draw { animation: draw 2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* -- 10b  Moments (full-bleed scenes) ------------------------------------ *
   Where the product actually has to work. Full-bleed original artwork with
   the claim sitting in the dark part of the frame — the picture carries the
   feeling, the line carries the argument.
   ---------------------------------------------------------------------- */
.moment {
  position: relative;
  min-height: clamp(30rem, 82svh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.moment__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.moment__img picture {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--moment-y, 0), 0);
  will-change: transform;
}
.moment__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.8s var(--ease);
}
.moment.is-in .moment__img img { transform: scale(1.045); }
/* The artwork is pale, so the copy sits on a light scrim in ink — the whole
   sequence reads as daylight rather than another dark slab. */
.moment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .52) 42%, transparent 68%),
    linear-gradient(0deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .12) 44%, transparent 70%);
}
.moment__in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(2.75rem, 7vh, 5rem);
  color: var(--ink);
}
.moment__time {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: .16em;
  color: #5a5f70;
  margin-bottom: 1rem;
}
.moment__h {
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 22ch;
  text-wrap: balance;
}
.moment__p {
  margin-top: 1rem;
  max-width: 44ch;
  color: #3f4453;
  font-size: var(--t-lead);
}
.moment__tag {
  margin-top: 1.5rem;
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6b7080;
}

/* A single plate used to open or close a chapter. */
.plate { position: relative; overflow: hidden; background: var(--paper); }
.plate img { width: 100%; height: clamp(18rem, 48svh, 30rem); object-fit: cover; }
.plate__cap {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.5rem, 4vh, 3rem) var(--gut);
  background: linear-gradient(0deg, rgba(255, 255, 255, .88), transparent);
  color: #3f4453;
  font-size: var(--t-small);
}
.plate__cap span { max-width: var(--wrap); margin-inline: auto; display: block; }

/* -- 10c  Lab (research register) ---------------------------------------- *
   A different voice for the research work: monospace references, a faint
   engineering grid, open questions instead of claims. It should read like a
   notebook page that happens to be well set — not like more marketing.
   ---------------------------------------------------------------------- */
.lab {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--ink);
}
.lab__note {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--fg-dim);
}
.lab__grid { display: grid; gap: 1px; background: var(--rule-2); margin-top: clamp(2.5rem, 6vh, 4rem); }
@media (min-width: 780px)  { .lab__grid { grid-template-columns: repeat(2, 1fr); } }
.lab__item {
  background: var(--ink);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: grid;
  gap: .75rem;
  align-content: start;
  transition: background .4s var(--ease);
}
.lab__item:hover { background: var(--ink-lift); }
.lab__head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.lab__state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--fg-dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .16rem .6rem .2rem;
  white-space: nowrap;
}
.lab__q {
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
  text-wrap: pretty;
}
.lab__q::before { content: "“"; opacity: .35; }
.lab__q::after  { content: "”"; opacity: .35; }
.lab__body { font-size: var(--t-small); color: var(--fg-mid); }

/* Figure caption used under technical diagrams. */
.figref {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--fg-dim);
  margin-top: 1rem;
}
.figref b { color: var(--fg-mid); font-weight: 500; }


/* -- 10d  Section motion primitives -------------------------------------- *
   Each of these exists to make one argument legible, not to decorate. They
   are CSS-driven; superchat.js only adds `.is-on` when the block is scrolled
   to, using the same rect test as every other reveal. All of them inherit the
   global reduced-motion clamp further down the file.
   ---------------------------------------------------------------------- */

/* FLOW — "a memory problem wearing a compute costume".
   Bytes queue, squeeze through a narrow gate, and trickle out the far side.
   The pile-up before the gate is the whole point. */
.flow { display: grid; gap: .5rem; margin-top: clamp(2rem, 4vh, 3rem); }
.flow__track {
  position: relative; height: 56px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--rule);
  overflow: hidden;
}
.flow__gate {
  position: absolute; left: 58%; top: 0; bottom: 0; width: 2px;
  background: var(--grad); opacity: .9;
}
.flow__gate::before, .flow__gate::after {
  content: ""; position: absolute; left: -7px; width: 16px; height: 34%;
  background: var(--fg); opacity: .16; border-radius: 3px;
}
.flow__gate::before { top: 0; }
.flow__gate::after  { bottom: 0; }
.flow__byte {
  position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 2px; background: var(--fg); opacity: .34;
}
.js .flow__byte { animation: flowbyte 4.6s linear infinite; animation-play-state: paused; }
.js .flow.is-on .flow__byte { animation-play-state: running; }
@keyframes flowbyte {
  0%   { left: -3%;  opacity: .12; }
  38%  { left: 52%;  opacity: .55; }        /* the queue builds here */
  56%  { left: 57.4%; opacity: .95; }       /* one at a time, through the gate */
  60%  { left: 59%;  opacity: .95; }
  100% { left: 104%; opacity: .12; }
}
.flow__legend { display: flex; justify-content: space-between; font-size: var(--t-eyebrow);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }

/* DOORS — light passes through each door in turn, one backbone behind all three. */
.js [data-doors] .door { position: relative; overflow: hidden; }
.js [data-doors] .door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(122,43,245,.14) 50%, transparent 60%);
  transform: translateX(-120%);
}
.js [data-doors].is-on .door::after { animation: doorsweep 1.15s var(--ease) forwards; }
.js [data-doors].is-on .door:nth-child(2)::after { animation-delay: .30s; }
.js [data-doors].is-on .door:nth-child(3)::after { animation-delay: .60s; }
@keyframes doorsweep { to { transform: translateX(120%); } }

/* LAYERS — balance to brain. Ignites in the order the machine itself resolves:
   the ankle steadies before the sentence is planned. */
.js [data-layers] .work__item { position: relative; opacity: .38; transition: opacity .6s var(--ease); }
/* The igniting bar is drawn at the item's left edge, so the text needs an
   inset or it sits directly on the rule. Applied unconditionally, not under
   .js, so the spacing is the same whether or not the animation runs. */
[data-layers] .work__item { padding-left: 1.35rem; }
.js [data-layers] .work__item::before {
  content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 0;
  background: var(--ember); transition: height .55s var(--ease);
}
.js [data-layers].is-on .work__item { opacity: 1; }
.js [data-layers].is-on .work__item::before { height: 100%; }
.js [data-layers].is-on .work__item:nth-child(2),
.js [data-layers].is-on .work__item:nth-child(2)::before { transition-delay: .20s; }
.js [data-layers].is-on .work__item:nth-child(3),
.js [data-layers].is-on .work__item:nth-child(3)::before { transition-delay: .40s; }
.js [data-layers].is-on .work__item:nth-child(4),
.js [data-layers].is-on .work__item:nth-child(4)::before { transition-delay: .60s; }

/* SNAP — "the answers are unusually short". Deliberately abrupt: no easing,
   no drift, each answer simply arrives. The timing is the argument. */
.js [data-snap] .work__item { opacity: 0; transform: none; }
.js [data-snap].is-on .work__item { animation: snapin .01s linear forwards; }
.js [data-snap].is-on .work__item:nth-child(2) { animation-delay: .16s; }
.js [data-snap].is-on .work__item:nth-child(3) { animation-delay: .32s; }
.js [data-snap].is-on .work__item:nth-child(4) { animation-delay: .48s; }
@keyframes snapin { to { opacity: 1; } }

/* CONVERGE — voice, text and vision arriving at one core, and nothing leaving
   the ring. The boundary is drawn last, and it closes. */
.converge { position: relative; margin-top: clamp(2rem, 4vh, 3rem); }
.converge svg { width: 100%; height: auto; max-width: 560px; }
.js .converge .cv-feed { stroke-dasharray: 220; stroke-dashoffset: 220; }
.js .converge.is-on .cv-feed { animation: cvdraw 1s var(--ease) forwards; }
.js .converge.is-on .cv-feed:nth-of-type(2) { animation-delay: .15s; }
.js .converge.is-on .cv-feed:nth-of-type(3) { animation-delay: .30s; }
.js .converge .cv-ring { stroke-dasharray: 760; stroke-dashoffset: 760; }
.js .converge.is-on .cv-ring { animation: cvdraw 1.4s var(--ease) .55s forwards; }
.js .converge .cv-core { opacity: 0; }
.js .converge.is-on .cv-core { animation: cvcore 1.1s var(--ease) .5s forwards; }
@keyframes cvdraw { to { stroke-dashoffset: 0; } }
@keyframes cvcore { to { opacity: 1; } }

/* HALVE — "half the price". The struck-through figure collapses to half width. */
.js [data-halve] .price__was { display: inline-block; transform-origin: left center; }
.js [data-halve].is-on .price__was { animation: halve 1s var(--ease) .2s both; }
@keyframes halve {
  0%   { transform: scaleX(1);   opacity: .85; }
  100% { transform: scaleX(.5);  opacity: .45; }
}

/* FLATLINE — "most of our best weeks look like a graph that did not move."
   It draws, and pointedly stays flat. */
.flatline { margin: clamp(1.75rem, 3vh, 2.5rem) 0 0; }
.flatline svg { width: 100%; max-width: 460px; height: auto; display: block; margin-block: .5rem; }
.flatline figcaption { color: var(--fg-dim); }
.flatline .small { max-width: 44ch; }
.js .flatline .fl-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .flatline.is-on .fl-line { animation: cvdraw 2.6s linear forwards; }

/* SEVER — a link that cuts, and the thing on the far side carries on. */
.js [data-sever] .sv-link { stroke-dasharray: 6 6; }
.js [data-sever].is-on .sv-link { animation: severcut .9s var(--ease) .3s forwards; }
.js [data-sever] .sv-body { opacity: .4; }
.js [data-sever].is-on .sv-body { animation: cvcore .8s var(--ease) 1.1s forwards; }
@keyframes severcut { to { stroke-dashoffset: 60; opacity: .18; } }

/* -- 10e  What we make ---------------------------------------------------- *
   The plain-language strip under the hero. It is a list of links, not a card
   grid: a stranger should be able to run an eye down the left-hand column and
   read six nouns, then stop at the one that is their problem.
   ---------------------------------------------------------------------- */
.makes__list { list-style: none; margin: clamp(2rem, 4vh, 3rem) 0 0; padding: 0;
  border-top: 1px solid var(--rule); }
.makes__i { border-bottom: 1px solid var(--rule); }
.makes__i > a {
  display: grid; gap: .15rem .5rem; align-items: baseline;
  padding: clamp(.9rem, 1.6vh, 1.2rem) 0; text-decoration: none; color: inherit;
  transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
.makes__i > a:hover, .makes__i > a:focus-visible { background: var(--surface); padding-inline: .9rem; }
.makes__kind { font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-dim); }
.makes__name { font-weight: 650; font-size: var(--t-h4); }
.makes__line { color: var(--fg-dim); }
@media (min-width: 800px) {
  .makes__i > a { grid-template-columns: 8.5rem 15rem 1fr; gap: 1.5rem; }
  .makes__kind { padding-top: .28rem; }
}
/* An arrow that only leans in on hover — the row is already a link. */
.makes__line::after { content: " \2192"; opacity: 0; transition: opacity .25s var(--ease); }
.makes__i > a:hover .makes__line::after,
.makes__i > a:focus-visible .makes__line::after { opacity: .55; }

/* -- 10f  Developer surface: code sample and rate card -------------------- *
   Two components that only the API page uses. A developer reads a request
   before they read a paragraph, so the sample is set at a size you can
   actually scan, and the rate card is a real table — sortable by eye, sane in
   a screen reader, and horizontally scrollable rather than squeezed.
   ---------------------------------------------------------------------- */
/* A grid or flex child is min-width:auto by default, so a `pre` full of
   unbreakable text pushes its whole track wider and the page scrolls
   sideways. The scroll belongs inside the block, not on the document. */
.split > * { min-width: 0; }
.code {
  margin: 0; padding: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 100%; min-width: 0;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--rule); border-radius: 14px;
  font: 400 clamp(12px, 1.05vw, 13.5px)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg); overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: pre; tab-size: 2;
}
.code code { font: inherit; color: inherit; background: none; }
.code:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
[data-tone="light"] .code, [data-tone="paper2"] .code, [data-tone="haze"] .code { background: rgba(0, 0, 0, .045); }
:where(p, li) > code {
  font: 400 .92em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(122, 43, 245, .09); border-radius: 5px; padding: .12em .38em;
}

.ratecard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ratecard table { width: 100%; min-width: 40rem; border-collapse: collapse; text-align: left; }
.ratecard th, .ratecard td { padding: clamp(.8rem, 1.4vh, 1.05rem) 1rem; border-bottom: 1px solid var(--rule); }
.ratecard thead th {
  font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 600; border-bottom-color: var(--fg);
}
.ratecard tbody th { font-weight: 400; padding-left: 0; }
.ratecard tbody th b { display: block; font-weight: 650; font-size: var(--t-h4); }
.ratecard tbody th span { display: block; margin-top: .2rem; color: var(--fg-dim); font-size: .92em; max-width: 42ch; }
.ratecard .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ratecard tbody td.num { font-weight: 600; }
/* The volume a customer is most likely to start at, given the most weight. */
.ratecard tbody td.num:first-of-type { color: var(--fg); }
.ratecard tbody td.num:not(:first-of-type) { color: var(--fg-dim); }
.ratecard tbody tr:hover td, .ratecard tbody tr:hover th { background: var(--surface); }

/* -- 10g  Touch ergonomics ------------------------------------------------ *
   Inline links sit at their line height, which on a phone is a target of
   16-24px against the 44px both platforms ask for. Rather than pad every link
   and wreck the typography, grow the hit area only where the pointer is
   coarse, using a pseudo-element so the visible text does not move at all.
   ---------------------------------------------------------------------- */
@media (pointer: coarse) {
  .arrowlink, .mailto, .nav__login, .foot__col a, .storyrail a, .sheet__list a {
    position: relative;
  }
  .arrowlink::before, .mailto::before, .nav__login::before, .foot__col a::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%; height: 44px;
    transform: translateY(-50%);
    /* Behind the text, so it never intercepts selection or hover styling. */
    z-index: -1;
  }
  /* Footer links stack tightly; give them real spacing rather than overlapping
     invisible targets, which is worse than a small one. */
  .foot__col li + li { margin-top: .35rem; }
}


/* -- 10h  Elevation applied ---------------------------------------------- *
   Surfaces that hold their own content get lifted off the page, and lift a
   step further on hover so the whole grid feels responsive rather than only
   the item under the cursor. Cards keep a hairline as well as a shadow: on a
   pale tone the shadow alone is too subtle to define an edge.
   ---------------------------------------------------------------------- */
.card, .person, .door, .work__item.is-boxed, .price, .benchboard, .lab__item,
.maps__apis article, .ratecard, .prod__specs, .form, .moment__in {
  box-shadow: var(--lift-2);
}
.card, .maps__apis article {
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.card:hover, .maps__apis article:hover {
  box-shadow: var(--lift-4);
  transform: translateY(-3px);
  border-color: rgba(122, 43, 245, .28);
}
[data-tone="dark"] .card, [data-tone="dark"] .maps__apis article {
  background: rgba(255, 255, 255, .04);
}
/* The primary action should look pressable, not painted on. */
.btn--grad { box-shadow: var(--lift-3), 0 6px 22px rgba(122, 43, 245, .35); }
.btn--grad:hover { box-shadow: var(--lift-4), 0 10px 30px rgba(122, 43, 245, .45); }
.nav--stuck { box-shadow: var(--lift-2); }
.chat__launcher, .chat__panel { box-shadow: var(--lift-4); }
.plate img, .moment__img img { box-shadow: var(--lift-3); }

/* -- 11  Doors, products, rails ------------------------------------------ */
.doors { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 860px) { .doors { grid-template-columns: repeat(3, 1fr); } }
/* Surfaces inherit from the tone rather than being listed per tone — adding a
   new pastel tone must never mean hunting down every card rule. */
.door {
  background: var(--paper);
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid;
  align-content: start;
  gap: .9rem;
  transition: background .4s;
}
.door:hover { background: #fff; }
[data-tone="dark"] .door { background: var(--ink); }
[data-tone="dark"] .door:hover { background: var(--ink-lift); }
.door__n { font-size: var(--t-eyebrow); letter-spacing: .2em; font-weight: 600; }
.door:nth-child(1) .door__n { color: var(--indigo); }
.door:nth-child(2) .door__n { color: var(--violet); }
.door:nth-child(3) .door__n { color: var(--ember); }
[data-tone="dark"] .door:nth-child(1) .door__n { color: #8b93ff; }
.door p { color: var(--fg-mid); font-size: var(--t-small); }

/* Product blocks — full-bleed alternating rows. */
.prod { border-top: 1px solid var(--rule); }
.prod__in {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vh, 7rem);
}
@media (min-width: 900px) {
  .prod__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prod--flip .prod__art { order: -1; }
}
.prod__eyebrow { margin-bottom: 1rem; }
.prod__name { margin-bottom: .75rem; }
.prod__line { font-size: var(--t-lead); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 1rem; }
.prod__body { color: var(--fg-mid); max-width: 46ch; }
.prod__specs {
  margin-top: 1.75rem;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 0 rgba(35, 40, 115, .055), var(--lift-2);
}
.prod__specs div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 0;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--rule-2);
  font-size: var(--t-small);
}
.prod__specs div:first-child { border-top: 0; }
.prod__specs dt, .prod__specs span:first-child { color: var(--fg-dim); }
.prod__specs span { min-width: 0; overflow-wrap: anywhere; }
.prod__specs span:last-child { font-weight: 600; text-align: right; }
@media (max-width: 520px) {
  .prod__specs div { display: grid; gap: .25rem; padding: .9rem 1rem; }
  .prod__specs span:last-child { text-align: left; }
}

.prod__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--ink-soft), #1a1430 55%, #2a1140);
  display: grid;
  place-items: center;
}
.prod__art img { width: 100%; height: 100%; object-fit: cover; }
.prod__art svg { width: 62%; height: auto; }

/* Genie Maps — a provider-neutral, browser-local interaction preview. */
.maps { overflow: hidden; }
.maps [hidden] { display: none !important; }
.maps__intro { align-items: end; }
.maps__layout {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vh, 4rem);
}
@media (min-width: 940px) {
  .maps__layout { grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: stretch; }
}
.mapdemo,
.mapagent {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 22px 70px rgba(35, 40, 115, .08);
}
.mapdemo__head,
.mapagent__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.6rem;
}
.mapdemo__head > div,
.mapagent__head > div { min-width: 0; }
.mapdemo__head .eyebrow,
.mapagent__head .eyebrow { margin-bottom: .28rem; }
.mapdemo__privacy,
.mapagent__live {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .28rem .55rem;
  border: 1px solid rgba(24, 117, 72, .22);
  border-radius: 999px;
  color: #187548;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mapagent__live { display: inline-flex; align-items: center; gap: .4rem; }
.mapagent__live i { width: 5px; height: 5px; border-radius: 50%; background: #32a66a; box-shadow: 0 0 0 4px rgba(50, 166, 106, .1); }
.mapdemo__canvas {
  position: relative;
  overflow: hidden;
  height: clamp(16rem, 36vw, 23rem);
  margin-top: 1.1rem;
  border-radius: 14px;
  background:
    linear-gradient(rgba(35, 40, 115, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(35, 40, 115, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    #edf1f4;
}
.mapdemo__road { position: absolute; z-index: 2; display: block; background: #fff; box-shadow: 0 0 0 1px rgba(35, 40, 115, .08); }
.mapdemo__road--a { width: 145%; height: 18px; left: -22%; top: 38%; rotate: -18deg; }
.mapdemo__road--b { width: 16px; height: 135%; left: 61%; top: -18%; rotate: 10deg; }
.mapdemo__road--c { width: 100%; height: 10px; left: 2%; top: 72%; rotate: 8deg; }
.mapdemo__road--d { width: 10px; height: 90%; left: 28%; top: 10%; rotate: -8deg; }
.mapdemo__block { position: absolute; z-index: 1; border-radius: 8px; background: rgba(35, 40, 115, .08); border: 1px solid rgba(35, 40, 115, .07); }
.mapdemo__block--a { width: 23%; height: 18%; left: 6%; top: 10%; }
.mapdemo__block--b { width: 26%; height: 20%; right: 6%; top: 12%; }
.mapdemo__block--c { width: 21%; height: 16%; right: 12%; bottom: 7%; }
.mapdemo__route {
  position: absolute;
  z-index: 4;
  width: 42%;
  height: 42%;
  left: 49%;
  top: 31%;
  border-top: 4px solid var(--violet);
  border-right: 4px solid var(--violet);
  border-radius: 0 55% 0 0;
  opacity: 0;
  transform: scale(.72);
  transform-origin: left bottom;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.mapdemo__canvas.has-route .mapdemo__route { opacity: 1; transform: none; }
.mapdemo__marker,
.mapdemo__destination { position: absolute; z-index: 6; display: grid; justify-items: center; gap: .3rem; color: var(--ink); font-size: .67rem; font-weight: 700; }
.mapdemo__marker { left: 44%; top: 56%; }
.mapdemo__destination { right: 7%; top: 26%; }
.mapdemo__marker > i,
.mapdemo__destination > i { width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: var(--violet); box-shadow: 0 5px 18px rgba(35, 40, 115, .3); }
.mapdemo__destination > i { background: var(--ember); }
.mapdemo__marker > b,
.mapdemo__destination > b { padding: .18rem .42rem; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 12px rgba(20, 20, 30, .1); }
.mapdemo__gridnote { position: absolute; z-index: 7; inset: auto .65rem .55rem; color: #717685; font-family: var(--mono); font-size: .55rem; text-align: right; }
.mapdemo__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: .85rem; border-block: 1px solid var(--rule); }
.mapdemo__facts div { min-width: 0; padding: .65rem .45rem; border-right: 1px solid var(--rule); }
.mapdemo__facts div:first-child { padding-left: 0; }
.mapdemo__facts div:last-child { border-right: 0; }
.mapdemo__facts dt { color: var(--fg-dim); font-size: .62rem; }
.mapdemo__facts dd { margin: .2rem 0 0; overflow: hidden; color: var(--fg); font-family: var(--mono); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.mapdemo__status { margin-top: .7rem; color: var(--fg-mid); font-size: .7rem; }
.mapdemo__status.is-error { color: #9a2323; }

.mapagent { display: flex; flex-direction: column; background: var(--ink); color: #fff; }
.mapagent__orb { width: 2.35rem; height: 2.35rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--grad); }
.mapagent .eyebrow { color: rgba(255, 255, 255, .46); }
.mapagent__live { color: #a9e8cd; border-color: rgba(169, 232, 205, .22); }
.mapagent__chat { min-height: 14rem; max-height: 21rem; display: grid; align-content: start; gap: .7rem; overflow-y: auto; margin-top: 1.1rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .035); }
.mapagent__message { width: fit-content; max-width: 88%; padding: .72rem .8rem; border-radius: 11px; font-size: .77rem; line-height: 1.5; }
.mapagent__message--genie { background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .78); }
.mapagent__message--user { justify-self: end; background: linear-gradient(120deg, rgba(122, 43, 245, .92), rgba(198, 55, 155, .9)); color: #fff; }
.mapagent__form { margin-top: auto; padding-top: 1rem; }
.mapagent__form label { display: block; margin-bottom: .42rem; color: rgba(255, 255, 255, .52); font-size: .68rem; font-weight: 650; }
.mapagent__form > div { display: flex; gap: .55rem; }
.mapagent__form input { min-width: 0; flex: 1; padding: .74rem .8rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; outline: 0; background: rgba(255, 255, 255, .08); color: #fff; }
.mapagent__form input::placeholder { color: rgba(255, 255, 255, .36); }
.mapagent__form input:focus { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .11); }
.mapagent__actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.mapagent__actions .btn--ghost { border-color: rgba(255, 255, 255, .22); color: #fff; }
.mapagent__note { margin-top: .8rem; color: rgba(255, 255, 255, .4); font-size: .65rem; }
.maps__apis { display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem); margin-top: 1rem; }
@media (min-width: 720px) { .maps__apis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .maps__apis { grid-template-columns: repeat(3, 1fr); } }
.maps__apis article { min-height: 12rem; display: grid; align-content: start; padding: 1.2rem; background: rgba(255, 255, 255, .7); }
.maps__apis article > span { color: var(--violet); font: .64rem/1 var(--mono); }
.maps__apis h3 { margin-top: .75rem; font-size: .96rem; }
.maps__apis p { margin-top: .42rem; color: var(--fg-mid); font-size: .75rem; }
.maps__apis small { align-self: end; margin-top: 1.1rem; color: var(--fg-dim); font: .59rem/1.5 var(--mono); }
@media (max-width: 620px) {
  .mapdemo__facts { grid-template-columns: 1fr; }
  .mapdemo__facts div { padding: .55rem 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .mapdemo__facts div:last-child { border-bottom: 0; }
  .mapagent__form > div { align-items: stretch; flex-direction: column; }
  .mapagent__form button { width: 100%; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .7rem .32rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ember);
}
.badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Card grid for the product overview on the home page. */
.cards { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--5, .cards--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  /* Five across only once each column can still hold a two-word product name. */
  .cards--5 { grid-template-columns: repeat(5, 1fr); }
  .cards--6 { grid-template-columns: repeat(3, 1fr); }
  .cards--5 .card, .cards--6 .card { padding: clamp(1.35rem, 1.9vw, 1.8rem); gap: 1.75rem; min-height: 15.5rem; }
}
.card {
  background: var(--paper);
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  display: grid;
  align-content: space-between;
  gap: 2.5rem;
  min-height: 17rem;
  transition: background .4s var(--ease);
}
.card:hover { background: #fff; }
[data-tone="dark"] .card { background: var(--ink); }
[data-tone="dark"] .card:hover { background: var(--ink-lift); }
.card__top .eyebrow { margin-bottom: .8rem; }
.card__top p { color: var(--fg-mid); font-size: var(--t-small); margin-top: .55rem; }


/* -- 11b  Section menus --------------------------------------------------- *
   A shortcut into a page, not a gate in front of it: the parent link always
   navigates, so touch, keyboard and no-JS all still work. Shown on hover and
   on focus-within, which is what makes it keyboard-reachable without script.
   ---------------------------------------------------------------------- */
.nav__item { position: relative; }
.nav__drop {
  position: absolute;
  top: 100%; left: 50%;
  translate: -50% 0;
  min-width: 13.5rem;
  margin-top: .55rem;
  padding: .45rem;
  display: grid;
  gap: .1rem;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--lift-3);
  /* Hidden without display:none so it can transition and stay focusable-in-order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 5;
}
/* A gap between link and panel would drop the hover on the way down. */
.nav__drop::before { content: ""; position: absolute; inset: -.6rem 0 auto; height: .6rem; }
.nav__item--has:hover .nav__drop,
.nav__item--has:focus-within .nav__drop {
  opacity: 1; visibility: visible; transform: none;
}
.nav__drop a {
  display: block;
  padding: .5rem .7rem;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  opacity: .82;
  white-space: nowrap;
  transition: background .18s, opacity .18s;
}
.nav__drop a:hover, .nav__drop a:focus-visible { background: var(--surface); opacity: 1; }
/* The bar is white over dark sections; the panel is always the pale surface,
   so its links must not inherit the bar's colour. */
.nav:not(.nav--onlight) .nav__drop a { color: var(--ink); }

@media (max-width: 859px) { .nav__drop { display: none; } }
/* On a touch device hover is a tap, which would swallow the first tap on the
   parent link. Leave the menu out entirely; the sheet already lists the pages. */
@media (hover: none) { .nav__drop { display: none; } }

/* -- 12  Figures, stats, proof ------------------------------------------- */
.stats {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.stat { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.stat b {
  display: block;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: .7rem; font-size: var(--t-small); color: var(--fg-mid); }
.stat--grad b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.proof { display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem); }
@media (min-width: 640px)  { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof__i {
  border-radius: 14px;
  border: 1px solid var(--rule);
  box-shadow: var(--lift-1); background: var(--paper); padding: 1.6rem 1.4rem 1.8rem; }
[data-tone="dark"] .proof__i { background: var(--ink); }
[data-tone="paper2"] .proof__i { background: var(--paper-2); }
.proof__i b { display: block; font-size: var(--t-h4); font-weight: 650; letter-spacing: -0.02em; }
.proof__i span { display: block; margin-top: .35rem; font-size: var(--t-small); color: var(--fg-mid); }

/* Price comparison — the "half the price" moment. */
.price { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .price { grid-template-columns: repeat(2, 1fr); } }
.price__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  /* The two prices are set at different sizes, so aligning their boxes leaves
     the struck-through one visibly riding high — 11px at desktop. Align the
     last baseline instead, which is the price line in both cells. `end` stays
     as the fallback for engines without last-baseline support. */
  align-items: end;
  align-items: last baseline;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}
.price__was { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.04em; color: var(--fg-dim); text-decoration: line-through; }
.price__is  { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.045em; color: var(--indigo); line-height: 1; }
[data-tone="dark"] .price__is { color: #8b93ff; }
.price__is small { font-size: .38em; font-weight: 600; letter-spacing: -0.01em; }
/* "From" is the honest qualifier — small, but never optional. */
.price__from {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: .3rem;
}
.price__note {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  max-width: 62ch;
  font-size: var(--t-small);
  color: var(--fg-dim);
}

/* -- 13  People ---------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .38rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--fg-mid);
}
.people { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
@media (min-width: 700px)  { .people { grid-template-columns: repeat(2, 1fr); } }
.person { background: var(--paper); padding: clamp(1.5rem, 2.6vw, 2.2rem); border-radius: 18px; }
[data-tone="paper2"] .person { background: var(--paper-2); }
[data-tone="dark"] .person { background: var(--ink); }
.person { transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.person:hover { box-shadow: var(--lift-4); transform: translateY(-3px); }
.person .eyebrow { color: var(--violet); margin-bottom: .7rem; }
[data-tone="dark"] .person .eyebrow { color: #b993ff; }
.person p { color: var(--fg-mid); font-size: var(--t-small); margin-top: .6rem; }

/* -- 13b  Prose (legal and long-form pages) ------------------------------ */
.prose { max-width: 68ch; display: grid; gap: clamp(2rem, 4vh, 3rem); }
.prose h2 { margin-bottom: .85rem; }
.prose p { color: var(--fg-mid); }
.prose p + p { margin-top: .9rem; }
.prose strong { color: var(--fg); font-weight: 650; }
.prose a { color: var(--violet); border-bottom: 1px solid currentColor; }
[data-tone="dark"] .prose a { color: #b993ff; }

/* -- 13c  Legal ---------------------------------------------------------- *
   Long numbered documents. Set for reading, not for scanning: one column,
   generous leading, section numbers in the margin where there is room.
   ---------------------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal__meta {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--fg-dim);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.legal__intro { font-size: var(--t-lead); color: var(--fg-mid); line-height: 1.55; }
.legal section { margin-top: clamp(2.5rem, 5vh, 3.5rem); }
.legal h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
  display: flex;
  gap: .8rem;
}
.legal h2 span { color: var(--violet); font-variant-numeric: tabular-nums; flex: none; }
.legal h3 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 1.75rem 0 .6rem;
}
.legal p, .legal li { color: var(--fg-mid); line-height: 1.75; }
.legal p + p { margin-top: .9rem; }
.legal ul { margin: .9rem 0 0; display: grid; gap: .6rem; }
.legal ul li { padding-left: 1.4rem; position: relative; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: .2rem; top: .68em;
  width: 5px; height: 1px;
  background: var(--fg-dim);
}
.legal strong { color: var(--fg); font-weight: 650; }
.legal a { color: var(--violet); border-bottom: 1px solid currentColor; }

/* -- 14  Forms ----------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
@media (min-width: 700px) {
  .form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
}
/* A field is label + control + optional error, stacked tight. Without this
   the control absorbs any extra row height and the label floats away. */
.field { align-content: start; }
.field input, .field select { min-height: 0; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--fg-mid); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--fg);
  transition: border-color .25s, background .25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--violet);
  background: transparent;
}

/* The form sits on a dark tone, so the control inherits near-white text. The
   option list, though, is drawn by the operating system — and it paints a
   light popup unless told otherwise, which left white text on a white sheet
   and a dropdown that looked empty. Declare the popup's colours outright, and
   tell the platform this control is dark so the native arrow, scrollbar and
   highlight follow. Both mechanisms are stated because browsers honour one or
   the other, never reliably both. */
.field select { color-scheme: dark; }
.field select option,
.field select optgroup {
  background-color: #14161c;
  color: #f3f4f7;
}
/* Supply our own chevron: `appearance` is reset so no platform draws a dark
   arrow onto a dark control. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.field select:focus { background-color: transparent; }
.form__alert {
  display: grid;
  gap: .45rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(242, 98, 31, .55);
  border-radius: 14px;
  background: rgba(242, 98, 31, .08);
}
.form__alert a { color: #ff9c72; text-decoration: underline; text-underline-offset: .18em; }
.field textarea { min-height: 8rem; resize: vertical; }
.form__note { font-size: var(--t-small); color: var(--fg-dim); }

/* -- 15  End CTA + footer ------------------------------------------------ */
.endcta { padding-block: clamp(6rem, 16vh, 12rem); }
.endcta__h { margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.endcta__act { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.endcta__note { margin-top: 1.75rem; font-size: var(--t-small); color: var(--fg-dim); max-width: 46ch; }

/* A quote in someone's own voice — the one place on the page a person speaks. */
.pullquote {
  margin: clamp(2rem, 4vh, 2.75rem) 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--violet);
}
.pullquote p {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-wrap: pretty;
}
.pullquote cite {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-size: var(--t-small);
  color: var(--fg-dim);
}

.foot { padding-block: clamp(3.5rem, 7vh, 5.5rem) 2.25rem; border-top: 1px solid var(--rule); }
.foot__grid { display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
@media (min-width: 640px)  { .foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.foot__tag { margin-top: 1.1rem; color: var(--fg-dim); font-size: var(--t-small); max-width: 24ch; }
.foot__mail { margin-top: 1rem; font-size: var(--t-small); }
.foot__mail a { color: var(--fg-mid); border-bottom: 1px solid var(--rule); transition: color .25s, border-color .25s; }
.foot__mail a:hover { color: var(--fg); border-color: currentColor; }
.foot__h {
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.foot__col ul { display: grid; gap: .65rem; }
.foot__col a { font-size: var(--t-small); color: var(--fg-mid); transition: color .25s; }
.foot__col a:hover { color: var(--fg); }

.foot__caveat {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-2);
  max-width: 78ch;
  font-size: .78rem;
  line-height: 1.65;
  color: var(--fg-dim);
}
.foot__base {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--fg-dim);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot__legal a { color: var(--fg-dim); transition: color .25s; }
.foot__legal a:hover { color: var(--fg); }

/* -- 15a  Demo ----------------------------------------------------------- */
.demo__box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 11, 16, .04), 0 12px 34px rgba(10, 11, 16, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  max-width: 40rem;
}
[data-tone="dark"] .demo__box { background: var(--ink-lift); }
.demo__box:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(90, 30, 160, .10), 0 18px 44px rgba(90, 30, 160, .16);
}
.demo__mark { display: inline-flex; color: var(--violet); flex: none; }
.demo__prompt { flex: 1; color: var(--fg-dim); font-size: var(--t-lead); letter-spacing: -0.015em; }
.demo__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.demo__arrow { font-size: .95em; }
@media (max-width: 620px) {
  .demo__box { flex-wrap: wrap; border-radius: 20px; }
  .demo__prompt { flex: 1 0 100%; order: 2; }
  .demo__go { order: 3; }
}

.demo__hints {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.demo__hints li {
  font-size: var(--t-small);
  color: var(--fg-mid);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .4rem .9rem;
}
.demo__note { margin-top: clamp(2rem, 4vh, 2.75rem); max-width: 62ch; }

/* -- 15b  Live chat ------------------------------------------------------ *
   Genie Live Chat, the product, running on this site. The launcher is the
   Superchat mark — which is already a speech bubble — so the widget reads as
   ours rather than as a bolted-on third-party bubble.
   ---------------------------------------------------------------------- */
.chat {
  position: fixed;
  /* embed.js anchors its launcher bottom-right and owns that corner, so this
     one sits clear of it rather than under it. The offset is the widget's
     launcher width plus a gap; if it ever grows, this is the number to change. */
  right: calc(clamp(1rem, 2.5vw, 2rem) + 210px);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 79;
  display: grid;
  justify-items: end;
  gap: .75rem;
}
/* Two offers, side by side: ask about this site, or go and use the product.
   They wrap rather than shrink, because a launcher that has been squeezed
   until its label truncates is worse than one on its own line. */
.chat__row { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: .6rem; }
@media (max-width: 700px) {
  /* Not enough width for both launchers on one line: sit above the widget
     instead of beside it, so neither is covered. */
  .chat { right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 2.5vw, 2rem) + 62px); }
  .chat__launch--ghost { padding-inline: .9rem; }
}
.chat__launch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.15rem .7rem .95rem;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  box-shadow: 0 10px 30px rgba(90, 30, 160, .30), 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

/* The secondary launcher: same shape, opposite weight, so the pair reads as
   one primary action and one alternative rather than two competing buttons.
   Declared after .chat__launch because it overrides its gradient. */
.chat .chat__launch--ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(10, 11, 16, .14);
  box-shadow: var(--lift-2);
}
.chat .chat__launch--ghost:hover { box-shadow: var(--lift-3); transform: translateY(-2px); }
.chat__launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(90, 30, 160, .38); }
.chat__icon { display: inline-flex; }
/* embed.js parks its launcher 20px off the bottom-right. That is fine on a bare
   page and tight here, where it lands against the scrollbar and, on a laptop,
   the OS taskbar — it reads as sitting on the edge rather than floating above
   it. !important because the widget injects its stylesheet at runtime, so it
   lands after this file and wins any tie on specificity.

   Only the widget is moved: chatAlign() measures the launcher and centres
   .chat--try on whatever it finds, so Try Genie follows it up and the two stay
   level without a second number to keep in step. */
.gnw-fab { bottom: clamp(1.5rem, 3vh, 2.25rem) !important; }
/* Both fixed launchers are deliberately visible: .chat--try opens the live
   demo, .gnw-fab is the Genie widget's own button from embed.js. They were
   hidden in b718b63 on the argument that a fixed launcher covers copy on a
   long page — restored on request, because losing both removed every
   floating route into the product. If the overlap becomes a problem again,
   move them out of the reading column rather than hiding them, or the page
   silently loses its demo and its chat at the same time. */

.chat__panel {
  width: min(92vw, 400px);
  height: min(72svh, 620px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 24px 70px rgba(10, 11, 16, .28), 0 2px 10px rgba(10, 11, 16, .12);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.chat__panel[hidden] { display: none; }
.chat--open .chat__panel { opacity: 1; transform: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(10, 11, 16, .1);
  background: #fbfaf7;
  color: var(--ink);
}
.chat__title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .95rem; }
.chat__note { font-size: .7rem; color: #6b7080; margin-left: auto; }
.chat__close { font-size: 1.4rem; line-height: 1; color: #6b7080; padding: 0 .2rem; }
.chat__close:hover { color: var(--ink); }
.chat__frame { position: relative; background: #fbfaf7; }
.chat__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.chat__frame p {
  padding: 1.5rem;
  font-size: var(--t-small);
  color: #4b4f5c;
}

@media print { .chat { display: none !important; } }

/* -- 16  Accessibility & print ------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #fff;
  color: #000;
  padding: .75rem 1.25rem;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

@media (max-width: 620px) {
  .sec { padding-block: clamp(3.5rem, 7vh, 4.5rem); }
  .stage { height: 250svh; }
  .stand { height: 250svh; }
  .beat { min-height: 44svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .r, .fade, .stage__panel, .stand__scene, .stand__text,
  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .stage, .stand { height: auto; }
  .stage__pin, .stand__pin { position: static; height: auto; min-height: 0; overflow: visible; }
  .stage__canvas, .stand__viz, .stand__rail { display: none; }
  .stage__copy { position: static; display: block; pointer-events: auto; }
  .stage__copy > .wrap, .stand__copy { display: block; padding-block: var(--sec); }
  .stage__panel, .stand__text { max-width: 56ch; margin-bottom: 2.5rem; }
  .stand__copy { position: static; background: none; }
  .benchboard__scan { display: none; }
  .benchrow::after { transform: scaleX(1); }
  .unplug__plug { animation: none !important; transform: translateX(clamp(3.2rem, 9vw, 5.4rem)); }
  .unplug__spark { display: none; }
  /* The section diagrams still have to make their point standing still, so
     each one is posed at the frame that carries the argument rather than at
     whichever frame the clamped animation happens to end on. */
  .flow__byte { animation: none !important; }
  .flow__byte:nth-of-type(1) { left: 6%; }   .flow__byte:nth-of-type(2) { left: 15%; }
  .flow__byte:nth-of-type(3) { left: 24%; }  .flow__byte:nth-of-type(4) { left: 32%; }
  .flow__byte:nth-of-type(5) { left: 39%; }  .flow__byte:nth-of-type(6) { left: 45%; }
  .flow__byte:nth-of-type(7) { left: 50%; }  .flow__byte:nth-of-type(8) { left: 54%; }
  .flow__byte:nth-of-type(9) { left: 56.5%; }
  .flow__byte:nth-of-type(n+10) { left: 72%; opacity: .18; }  /* the trickle beyond the gate */
  [data-doors] .door::after { display: none; }
  [data-layers] .work__item { opacity: 1 !important; }
  [data-layers] .work__item::before { height: 100% !important; }
  [data-snap] .work__item { opacity: 1 !important; }
  [data-halve] .price__was { animation: none !important; transform: none !important; }
  .converge .cv-feed, .converge .cv-ring, .flatline .fl-line { stroke-dashoffset: 0 !important; }
  .converge .cv-core, [data-sever] .sv-body { opacity: 1 !important; }
  .unplug__response span { animation: none !important; opacity: .8; transform: none; background: #b993ff; }
  .moment__img picture { transform: none !important; }
}

@media print {
  .nav, .sheet, .storyrail, .stage, .stand, .endcta, .hero__glow, .scrollcue { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}