/* ==========================================================================
   Salesplix — landing
   Plix-family instrument (dark + ember) with Belkins-scale type and footer,
   and the Astrosia workspace skeleton underneath.
   ========================================================================== */

:root {
  --ink: #141414;
  --ink-1: #1c1c1c;
  --ink-2: #292929;
  /* Warm cream, not neutral grey. Sits in the same family as crm.astrosia.com's
     --cream and is what stops the serif reading cold and stock. */
  --paper: #f7f2ec;
  --paper-2: #efe8df;
  --fg: #141414;
  --fg-on-ink: #f5f5f5;
  --dim: #525252;
  --dim-d: #a3a3a3;
  --line: #e5ddd3;
  --line-d: rgba(255, 255, 255, .12);
  --ember: #e8501f;
  /* Solid buttons carry paper cream, not cold white. #d1440f only cleared AA
     with #fff (4.62:1); cream needs this darker step — 4.76:1 on #c43a10. */
  --ember-strong: #c43a10;
  --ember-lo: #b8400c;
  --ember-bg: #fbe7db;
  --ember-line: #f3cdb6;
  --line-graph: #d9cec2;
  --good: #1f6b4a;
  --good-mid: #2a8f62;
  --good-bg: #E6F5EF;
  --good-tint: #7dcea0;
  --radius: 8px;
  --radius-lg: 16px;
  /* Numeric display scale. Every figure on the page — proof stats, prices, the
     call timer — uses one of these three steps with identical width, tracking,
     and tabular figures, so they read as one system. */
  --num-lg: clamp(2.1rem, 3.2vw, 2.75rem);
  --num-md: 1.95rem;
  --num-sm: 1.25rem;
  --shadow-xs: 0 1px 2px rgba(20, 20, 20, .04);
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .04), 0 8px 18px -12px rgba(20, 20, 20, .16);
  --shadow-md: 0 1px 2px rgba(20, 20, 20, .04), 0 18px 36px -18px rgba(20, 20, 20, .20);
  --shadow-lg: 0 2px 6px rgba(20, 20, 20, .05), 0 34px 70px -28px rgba(20, 20, 20, .30);
  --max: 1160px;
  --nav-h: 72px;
  --gutter: clamp(1.15rem, 4vw, 2rem);
  /* The same stack youspot.com uses: a plain Georgia serif for display and Geist
     for body. Georgia is the point — it is warm and classical without reading as
     a trend, and its italic is what carries the accent word in the hero.
     Noto Serif is the Android fallback, which has no Georgia. */
  --display: Georgia, "Noto Serif", "Times New Roman", serif;
  --body: "Geist", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.2rem);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, svg { max-width: 100%; height: auto; }
img.brand-logo, svg.brand-logo {
  max-width: none;
  width: 32px;
  height: 32px;
  overflow: visible;
}
img.brand-wordmark, svg.brand-wordmark {
  max-width: none;
  display: block;
  height: 48px;
  width: auto;
  overflow: visible;
}
a { color: var(--ember-lo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: rgba(255, 83, 24, .18); }
:focus-visible {
  outline: 2px solid #f54e20;
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 100;
  width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #FF7A3D, var(--ember));
  pointer-events: none;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-family: var(--body);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good-mid); box-shadow: 0 0 0 0 rgba(42, 143, 98, .55);
  animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(42, 143, 98, .45); }
  100% { box-shadow: 0 0 0 8px rgba(42, 143, 98, 0); }
}

/* Display type is Georgia, set at its regular weight and large. Georgia ships
   only 400 and 700, so anything in between synthesises a fake bold. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.08;
}
/* Card titles sit close to body copy, so they take the real bold cut. */
h3 { font-size: 1.14rem; font-weight: 700; letter-spacing: -.012em; }
h4 { font-size: 1.01rem; font-weight: 700; letter-spacing: -.01em; }

.section {
  padding: clamp(4.2rem, 8vw, 6.5rem) var(--gutter);
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
}
/* Full-bleed tint. `.section` is a centred max-width box, so putting a
   background on it alone paints a floating white panel with paper showing down
   both edges. Drop the cap and push the padding out instead, so the colour
   reaches the viewport while the content stays on the same 1160px measure. */
.section-alt {
  background: #fff;
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.section-head { max-width: 40rem; margin: 0 0 2.4rem; }
.section-head h2 { margin: 0 0 .85rem; }
.lede { margin: 0; color: var(--dim); font-size: 1.12rem; line-height: 1.55; }

.reveal { opacity: 1; }
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Reduced motion: stop the movement, but never hide content. Several elements
   below start at opacity 0 and are revealed *by* their animation, so killing
   the animation alone would leave them permanently invisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot, .lt-pulse, .ctx-core-halo, .ctx-core-disc, .ctx-core-ring,
  .ctx-node circle, .ctx-packet,
  .scr-wave i, .scr-call-av, .scr-node, .wa-typing span,
  .hero-line > span, .hero-content .eyebrow, .hero-lede, .hero-ctas, .hero-facts,
  .hero-facts > div,
  .ctx-cap, .marquee-track, .scr-node::after {
    animation: none;
  }
  .hero-facts > div { opacity: 1; transform: none; }
  .js .feat-card .feat-ico { opacity: 1; transform: none; transition: none; }
  .feat-ring-val, .js .feat-card.is-in .feat-ring-val {
    animation: none; stroke-dashoffset: 18;
  }
  .ctx-packets { display: none; }
  /* animation-revealed content — force the finished state */
  .scr-table > .scr-row:not(.scr-head),
  .wa-b,
  .wa-typing,
  .ctx-node,
  .ctx-core {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* the graph draws itself in via stroke-dashoffset — show it already drawn,
     and drop the travelling pulses entirely */
  .ctx-wire { animation: none; stroke-dashoffset: 0; opacity: .85; }
  .ctx-node circle { transform: none; }
  .hero h1 .hero-mark-from { animation: none; color: var(--ink); }
  .hero h1 .hero-mark { animation: none; color: var(--ember); }
  /* the stage/owner swap cycles opacity — pin it to the first state */
  .scr-swap > * { animation: none; }
  .scr-swap > *:last-child { display: none; }
}

/* Buttons: Belkins rectangles, not Voiceplix pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  padding: .85rem 1.45rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
  min-height: 3rem;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-ember {
  background: var(--ember-strong); color: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn-ember:hover { background: #b8390a; color: var(--paper); }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #000; color: #fff; }
.btn-ghost {
  background: #fff; color: var(--ink); border-color: #292929;
}
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.02rem; min-height: 3.25rem; }
.btn-arrow { transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.hero-ctas {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .9rem;
  animation: fadeUp .9s var(--ease) .4s both;
}
.hero-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.35rem;
}
.hero-link {
  color: var(--dim); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(82,82,82,.35); padding-bottom: 2px;
}
.hero-link:hover { border-bottom-color: var(--ember); color: var(--ember); }
.hero-proof {
  display: flex; align-items: center; gap: .7rem;
  margin: 0;
  font-size: .82rem; font-weight: 500; color: var(--dim);
}
.hero-proof-dots { display: flex; align-items: center; }
.hero-proof-dots img {
  display: block;
  position: relative;
  max-width: none;
  width: 1.55rem; height: 1.55rem;
  margin-left: -.4rem;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover; object-position: center top;
  background: #fff;
}
.hero-proof-dots img:first-child { margin-left: 0; z-index: 3; }
.hero-proof-dots img:nth-child(2) { z-index: 2; }
.hero-proof-dots img:nth-child(3) { z-index: 1; }

/* Header: always light, Belkins-style */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 0 var(--gutter);
  background: rgba(247, 242, 236, .92);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-solid,
body.has-hero-nav .site-header.is-solid {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(20, 20, 20, .35);
}
.header-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--nav-h);
}
/* Wordmark: gradient dual-arc S as the capital, extra-bold rounded sans “alesplix”. */
.brand {
  display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
  line-height: 0;
  overflow: visible;
}
.brand:hover { text-decoration: none; opacity: .82; }
.brand-logo { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.site-nav {
  display: flex; align-items: center; gap: .15rem;
  flex-wrap: nowrap;
}
.site-nav > a {
  font-size: .9rem; font-weight: 500; color: #3d3d3d;
  text-decoration: none; padding: .45rem .7rem;
}
.site-nav > a:not(.btn):hover { color: var(--ink); }
.site-nav .btn { margin-left: .35rem; padding: .65rem 1.15rem; min-height: 2.6rem; font-size: .88rem; font-weight: 700; }
.site-nav > a.btn-ember,
.site-nav > a.btn-ember:hover { color: var(--paper); }
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; color: var(--ink);
}

body.has-hero-nav .site-header {
  position: fixed; left: 0; right: 0; width: 100%;
}

/* Hero */
.hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: calc(var(--nav-h) + 3.2rem) var(--gutter) 4.5rem;
  overflow: hidden;
  min-height: min(86vh, 820px);
  display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46rem 28rem at 88% -8%, rgba(255, 94, 0, .14), transparent 62%),
    radial-gradient(36rem 22rem at 6% 108%, rgba(20, 20, 20, .04), transparent 64%);
}
.hero-grid {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; width: 100%;
  display: grid; gap: 2.75rem; align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 4rem; }
}
.hero-content .eyebrow { color: var(--dim); animation: lineUp .9s var(--ease) both; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.03;
  margin: 0 0 1.5rem;
  color: var(--ink);
  text-wrap: balance;
}
/* Lead is ember first; after a beat the colour hands off to italic “win.” */
.hero h1 .hero-mark-from {
  font-weight: 500;
  color: var(--ember);
  animation: markHandoffFrom .7s var(--ease) 1.55s both;
}
.hero h1 .hero-mark {
  font-style: italic;
  font-weight: 500;
  color: var(--ember);
  animation: markHandoffTo .7s var(--ease) 1.55s both;
}
@keyframes markHandoffFrom {
  from { color: var(--ember); }
  to   { color: var(--ink); }
}
@keyframes markHandoffTo {
  from { color: var(--ink); }
  to   { color: var(--ember); }
}
.hero-line {
  display: block; overflow: hidden;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.hero-line > span { display: block; animation: lineUp 1.05s var(--ease) both; }
.hero-line:nth-child(2) > span { animation-delay: .09s; }
.hero-line:nth-child(3) > span { animation-delay: .18s; }
@keyframes lineUp {
  from { transform: translateY(105%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hero-lede {
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--dim);
  line-height: 1.65;
  animation: fadeUp .9s var(--ease) .3s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2.75rem 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.hero-facts > div {
  padding: 1.15rem 1.1rem 0 0;
  animation: fadeUp .8s var(--ease) both;
}
.hero-facts > div:nth-child(1) { animation-delay: .5s; }
.hero-facts > div:nth-child(2) { animation-delay: .62s; }
.hero-facts > div:nth-child(3) { animation-delay: .74s; }
.hero-facts > div + div { padding-left: 1.1rem; border-left: 1px solid var(--line); }
.hero-facts dt {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .45rem; font-weight: 600;
  font-family: var(--body);
}
.hero-fact-ico { flex: none; color: var(--ember-lo); }
.hero-facts dd { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.45; }

/* ------------------------------------------------------------------
   Hero context graph
   Channels flow into one lead. Wires draw in, packets travel inward,
   nodes light as a packet leaves, the core breathes as they arrive.
   ------------------------------------------------------------------ */
.ctx { margin: 0; position: relative; }
.ctx-svg { display: block; width: 100%; height: auto; overflow: visible; }

.ctx-wire {
  stroke: var(--line-graph); stroke-width: 1.25; fill: none;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  animation: ctxDraw .9s var(--ease) forwards;
  animation-delay: calc(.25s + var(--d, 0) * .09s);
}
.ctx-wire.is-dashed { stroke-dasharray: 5 6; stroke-dashoffset: 0; opacity: 0; animation: ctxFade .7s var(--ease) forwards; }
@keyframes ctxDraw { to { stroke-dashoffset: 0; } }
@keyframes ctxFade { to { opacity: .85; } }

.ctx-packet { fill: var(--ember); }

.ctx-node { opacity: 0; animation: ctxPop .7s var(--ease) forwards; animation-delay: calc(.45s + var(--d, 0) * .09s); }
.ctx-node circle {
  fill: var(--ember-bg); stroke: var(--ember-line); stroke-width: 1;
  transform-origin: center; transform-box: fill-box;
  animation: ctxNodeLive 3.1s ease-in-out infinite;
  animation-delay: calc(.4s + var(--d, 0) * .38s);
}
.ctx-node text {
  font-family: var(--body); font-size: 12.5px; font-weight: 500;
  fill: var(--ink); text-anchor: middle; letter-spacing: .01em;
}
.ctx:hover .ctx-node circle { fill: #fff; stroke: var(--ember); }
@keyframes ctxPop { to { opacity: 1; } }
@keyframes ctxNodeLive {
  0%, 16%, 100% { fill: var(--ember-bg); stroke: var(--ember-line); transform: scale(1); }
  7% { fill: #fff; stroke: var(--ember); transform: scale(1.06); }
}

.ctx-core { opacity: 0; animation: ctxPop .8s var(--ease) .15s forwards; }
.ctx-core-disc {
  fill: var(--ember);
  transform-origin: center; transform-box: fill-box;
  animation: ctxCoreBeat 3.1s ease-in-out infinite;
  animation-delay: 1.5s;
}
.ctx-core-ring {
  fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0;
  transform-origin: center; transform-box: fill-box;
  animation: ctxCoreRing 3.1s ease-out infinite;
  animation-delay: 1.5s;
}
.ctx-core-halo {
  fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: .28;
  transform-origin: center; transform-box: fill-box;
  animation: ctxHalo 3.4s ease-out infinite;
}
@keyframes ctxHalo {
  0%       { transform: scale(.92); opacity: .34; }
  70%,100% { transform: scale(1.22); opacity: 0; }
}
@keyframes ctxCoreBeat {
  0%, 68%, 100% { transform: scale(1); }
  78% { transform: scale(1.07); }
}
@keyframes ctxCoreRing {
  0% { transform: scale(.95); opacity: .0; }
  72% { transform: scale(.95); opacity: 0; }
  78% { opacity: .55; }
  100% { transform: scale(1.28); opacity: 0; }
}

.ctx-cap {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin-top: .55rem;
  font-size: .84rem; color: var(--dim);
  animation: fadeUp .8s var(--ease) 1.2s both;
}

.lt-pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ember);
  animation: ltPulse 2.2s ease-in-out infinite;
}
@keyframes ltPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 83, 24, .5); }
  70% { box-shadow: 0 0 0 9px rgba(255, 83, 24, 0); }
}
/* used by the workspace demo rows further down */
@keyframes ltRow { to { opacity: 1; transform: none; } }

/* Trust / marquee */
/* One line: the label sits inline at the grid's left edge and the marquee runs
   off the right edge from there. It stacks to two lines on mobile, where there
   is no room for both. */
.trust-strip {
  --strip-bg: #fbf7f2;
  display: flex; align-items: center; gap: 1.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--strip-bg);
  padding: .95rem 0 .95rem max(var(--gutter), calc((100% - var(--max)) / 2));
  overflow: hidden;
}
.trust-label {
  flex: none; margin: 0; padding: 0; white-space: nowrap;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); font-weight: 600;
}
.marquee { position: relative; display: flex; overflow: hidden; flex: 1 1 auto; min-width: 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; width: 4%; background: linear-gradient(to right, var(--strip-bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--strip-bg), transparent); }
.marquee-track {
  display: flex; flex: none; gap: 2.75rem; padding-right: 2.75rem; align-items: center;
  animation: marquee 42s linear infinite;
}
.marquee-item { white-space: nowrap; font-size: .88rem; color: #4a453f; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Feature band — five more jobs Salesplix does, not the hero three */
.feat-band {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.feat-inner {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 2.2rem var(--gutter) 2.5rem;
}
.feat-kicker {
  margin: 0 0 1.15rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
.feat-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.15rem 1.25rem;
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 94, 0, .32);
  box-shadow: var(--shadow-sm);
}
.feat-ico {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: .9rem;
  border-radius: 10px;
  background: var(--ember-bg); color: var(--ember-lo);
}
.js .feat-card .feat-ico {
  opacity: 0; transform: scale(.7);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(.12s + var(--d, 0) * 70ms);
}
.js .feat-card.is-in .feat-ico { opacity: 1; transform: none; }
.feat-card h3 {
  margin: 0 0 .4rem;
  font-family: var(--body);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.feat-card p { margin: 0; color: var(--dim); font-size: .88rem; line-height: 1.45; }
.feat-card-stat { background: var(--ink); border-color: var(--ink); color: var(--fg-on-ink); }
.feat-card-stat:hover { border-color: #3a3a3a; }
.feat-card-stat h3 { color: #fff; }
.feat-card-stat p { color: var(--dim-d); }
.feat-stat {
  position: relative;
  display: grid; place-items: center;
  width: 4.4rem; height: 4.4rem; margin: 0 0 .85rem;
}
.feat-stat strong {
  font-family: var(--body);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.04em; color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.feat-stat strong > span { font: inherit; }
.feat-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.feat-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 2.2; }
.feat-ring-val {
  fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 97.4;
}
.js .feat-card.is-in .feat-ring-val {
  animation: featRing 1.4s var(--ease) .2s forwards;
}
@keyframes featRing { to { stroke-dashoffset: 18; } }
/* One treatment for every figure on the page. Tabular digits matter here:
   the proof stats count up on scroll and the prices re-render on every
   tenure/currency change, and proportional digits make both jitter. */
/* Figures are set in the SANS, not the display serif. Georgia's figures are
   oldstyle — 3, 4, 7 and 9 hang below the baseline and the heights vary — which
   makes a row of stats look ragged and mis-sized. Geist gives lining, tabular
   digits so every figure shares one cap height and one advance width. */
.proof-item strong,
.amount strong,
.scr-call-timer,
.plan-total strong,
.how-steps strong {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1;
}
.proof-item strong {
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -.03em;
  color: var(--ink);
}
/* Direct child only. The counting <span data-count> lives INSIDE the <strong>,
   so an unscoped `.proof-item span` gave it display:block and .92rem — which is
   what split "<60s" onto three lines at two different sizes. */
.proof-item > span { display: block; margin-top: .45rem; color: var(--dim); font-size: .92rem; line-height: 1.45; }
/* defensive: keep the counter inline and matching its <strong> whatever else
   lands on `span` later. Set explicitly — the `font` shorthand would reset
   font-variant-numeric and lose the tabular figures. */
.proof-item strong > span {
  display: inline;
  font-size: inherit; font-weight: inherit; font-family: inherit;
  letter-spacing: inherit; color: inherit; margin: 0;
}

/* Why */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.why-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.4rem;
  box-shadow: var(--shadow-xs);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.why-card:hover {
  transform: translateY(-3px); border-color: rgba(255, 94, 0, .32); box-shadow: var(--shadow-sm);
}
.why-metric {
  display: inline-block; margin-bottom: .7rem;
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember-lo);
}
.why-card h3 { margin-bottom: .5rem; }
.why-card p { margin: 0; color: var(--dim); }

/* Demo */
.demo-stage {
  position: relative;
  background: linear-gradient(165deg, #12151c 0%, #0c0e13 100%);
  color: var(--fg-on-ink);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 1.25rem 1.25rem 1.5rem;
}
.demo-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 20rem at 80% -10%, rgba(255, 83, 24, .16), transparent 60%);
}
.demo-chrome {
  position: relative; display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
}
.demo-chrome span { width: 9px; height: 9px; border-radius: 50%; background: #3d4450; }
.demo-chrome em { margin-left: .6rem; font-style: normal; font-size: .72rem; opacity: .5; letter-spacing: .05em; text-transform: uppercase; }
.demo-tabs { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.25rem; }
.demo-tabs button {
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); color: #b6c0cc;
  border-radius: 999px; padding: .42rem .95rem;
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.demo-tabs button:hover { color: #fff; border-color: rgba(255, 255, 255, .22); }
.demo-tabs button.is-active {
  background: var(--ember); color: #fff; border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(255, 83, 24, .9);
}
.demo-panels { position: relative; }
.demo-panel { display: none; min-height: 300px; animation: panelFade .5s var(--ease); }
.demo-panel.is-active { display: block; }
@keyframes panelFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-caption { margin: .85rem 0 0; color: var(--dim-d); font-size: .88rem; }
.scr {
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
  overflow: hidden;
}
.scr-table { font-size: .84rem; }
.scr-row {
  display: grid; align-items: center;
  grid-template-columns: 1.5fr 1fr .9fr .8fr 1fr;
  gap: .75rem; padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.scr-row:last-child { border-bottom: 0; }
.scr-head {
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  color: rgba(244, 245, 248, .38); background: rgba(255, 255, 255, .025);
  padding-top: .6rem; padding-bottom: .6rem;
}
.scr-table > .scr-row:not(.scr-head) {
  opacity: 0; transform: translateY(6px);
  animation: ltRow .6s var(--ease) forwards;
  animation-delay: calc(.1s + var(--i, 0) * .12s);
}
.scr-row.is-live { background: rgba(255, 83, 24, .07); }
.scr-lead { display: flex; align-items: center; gap: .55rem; font-weight: 500; min-width: 0; }
.scr-lead i {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  font-size: .68rem; font-weight: 700;
  background: rgba(255, 83, 24, .3); color: #ffd4c2;
}
.scr-dim { color: rgba(244, 245, 248, .5); font-size: .8rem; }
.st {
  display: inline-block; font-size: .64rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .24rem .55rem; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.st-new { color: #a9b6ae; }
.st-connected { color: #85c1e9; }
.st-qualified { color: var(--good-tint); }
.st-proposal { color: #e8b96b; }
.scr-swap { position: relative; display: inline-grid; }
.scr-swap > * { grid-area: 1 / 1; animation: swapA 7s steps(1, end) infinite; }
.scr-swap > *:last-child { animation-name: swapB; }
@keyframes swapA { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes swapB { 0%, 45% { opacity: 0; } 50%, 100% { opacity: 1; } }

.scr-wa-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.scr-wa-head i {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: none; font-style: normal;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: rgba(255, 83, 24, .32); color: #ffd4c2;
}
.scr-wa-head span { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.scr-wa-head b { font-size: .88rem; font-weight: 600; }
.scr-wa-head small { font-size: .68rem; color: var(--good-tint); }
.scr-wa-head em {
  font-style: normal; flex: none; font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 245, 248, .38);
}
.scr-wa-body { padding: 1rem; display: grid; gap: .5rem; justify-items: start; }
.wa-b {
  max-width: 82%; padding: .6rem .8rem .45rem; border-radius: 14px;
  font-size: .855rem; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  animation: ltRow .6s var(--ease) forwards;
  animation-delay: calc(.15s + var(--i, 0) * .28s);
}
.wa-b.out { background: rgba(255, 83, 24, .28); border-bottom-left-radius: 5px; }
.wa-b.in { background: rgba(255, 255, 255, .06); justify-self: end; border-bottom-right-radius: 5px; }
.wa-b time { display: block; margin-top: .3rem; font-size: .62rem; color: rgba(244, 245, 248, .45); }
.wa-typing {
  display: flex; gap: .28rem; padding: .65rem .8rem; border-radius: 14px;
  background: rgba(255, 83, 24, .2); border-bottom-left-radius: 5px;
  opacity: 0; animation: ltRow .5s var(--ease) 1.1s forwards;
}
.wa-typing span {
  width: 5px; height: 5px; border-radius: 50%; background: #FFB08A;
  animation: typing 1.3s ease-in-out infinite;
}
.wa-typing span:nth-child(2) { animation-delay: .18s; }
.wa-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.scr-flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem 1.6rem; counter-reset: fnode;
  padding: 1.35rem 1.25rem; background: none; border: 0;
}
.scr-node {
  position: relative;
  display: grid; gap: .15rem; padding: .7rem 2.1rem .7rem .85rem;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  animation: nodeRun 6.6s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * 1.1s);
}
.scr-node::before {
  counter-increment: fnode; content: counter(fnode, decimal-leading-zero);
  position: absolute; top: .6rem; right: .75rem;
  font-size: .56rem; font-weight: 600; letter-spacing: .1em;
  color: rgba(244, 245, 248, .28);
}
.scr-node em {
  font-style: normal; font-size: .58rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 245, 248, .4);
}
.scr-node b { font-size: .8rem; font-weight: 500; white-space: nowrap; }
.scr-node.n-trigger em { color: #e8b96b; }
.scr-node.n-cond em { color: #85c1e9; }
@keyframes nodeRun {
  0%, 12% {
    background: rgba(255, 83, 24, .22);
    border-color: rgba(255, 176, 138, .45);
    box-shadow: 0 0 0 3px rgba(255, 83, 24, .1);
  }
  22%, 100% {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(255, 83, 24, 0);
  }
}
.scr-node:not(:nth-child(3n)):not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 1.6rem; height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--ember), transparent) no-repeat,
    rgba(255, 255, 255, .14);
  background-size: 45% 100%; background-position: -60% 0;
  animation: wireRun 6.6s linear infinite;
  animation-delay: calc(var(--i, 0) * 1.1s + .5s);
}
@keyframes wireRun {
  0% { background-position: -60% 0; }
  9% { background-position: 160% 0; }
  10%, 100% { background-position: 160% 0; }
}

.scr-call { padding: 1.15rem 1.25rem 1.25rem; }
.scr-call-main { display: flex; align-items: center; gap: .8rem; }
.scr-call-av {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  font-family: var(--display);
  background: linear-gradient(150deg, #FF7A3D, #C43A10); color: #fff;
  animation: dialPulse 2.2s ease-in-out infinite;
}
@keyframes dialPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 83, 24, .35); }
  70% { box-shadow: 0 0 0 10px rgba(255, 83, 24, 0); }
}
.scr-call-id { display: grid; gap: .12rem; flex: 1; min-width: 0; }
.scr-call-id b { font-size: .95rem; font-weight: 600; }
.scr-call-id small { font-size: .74rem; color: rgba(244, 245, 248, .5); }
.scr-call-timer { font-size: var(--num-sm); color: #FFB08A; }
.scr-wave {
  display: flex; align-items: center; justify-content: space-between;
  gap: 3px; height: 58px; margin: 1.25rem 0;
}
.scr-wave i {
  flex: 0 1 3px; min-width: 2px; max-width: 4px;
  border-radius: 2px; background: rgba(255, 176, 138, .45);
  height: 24%; transform-origin: 50% 50%;
  animation: wave 1.25s ease-in-out infinite;
}
.scr-wave i:nth-child(3n)   { animation-delay: .12s; }
.scr-wave i:nth-child(3n+1) { animation-delay: .28s; }
.scr-wave i:nth-child(4n)   { animation-delay: .42s; }
.scr-wave i:nth-child(5n)   { animation-delay: .6s; }
.scr-wave i:nth-child(7n)   { animation-delay: .8s; }
.scr-wave i:nth-child(11n)  { animation-delay: .95s; }
@keyframes wave {
  0%, 100% { height: 18%; opacity: .5; }
  50% { height: 92%; opacity: 1; }
}
.scr-call-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.scr-tag {
  font-size: .64rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); color: rgba(244, 245, 248, .6);
}
.scr-outcome {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
  font-size: .78rem; color: #FFB08A;
}

/* Caps — each card carries a miniature workspace scene. The rest state is a
   readable screenshot; looping motion starts once the card is in view. */
.cap-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.cap-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 0 1.2rem;
  box-shadow: var(--shadow-xs);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.cap-card:hover {
  transform: translateY(-3px); border-color: rgba(255, 94, 0, .32); box-shadow: var(--shadow-sm);
}
.cap-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: var(--ember);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .45s var(--ease);
}
.cap-card:hover::after { transform: scaleY(1); }
.cap-card > h4 { margin: 0 0 .4rem; padding: 0 1.15rem; }
.cap-card > p { margin: 0; padding: 0 1.15rem; color: var(--dim); font-size: .95rem; }

.cap-stage {
  position: relative; isolation: isolate;
  height: auto; min-height: 9.4rem; margin: 0 0 .95rem; padding: .85rem .8rem .95rem;
  background: linear-gradient(165deg, #16181f 0%, #0e1015 100%);
  color: #f4f5f8;
  overflow: hidden; pointer-events: none;
}
.cap-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(16rem 8rem at 90% -20%, rgba(255, 83, 24, .22), transparent 62%);
}
.cap-stage > * { position: relative; z-index: 1; }
.cap-stage i, .cap-stage em, .cap-stage b { font-style: normal; }
.cs-head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; min-width: 0;
}
.cs-head.tight { margin-bottom: .45rem; }
.cs-head i, .cs-call i, .cs-id i, .cs-lead i, .cap-st-dial li i {
  flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #FF7A3D, #C43A10);
  color: #fff; font-size: .68rem; font-weight: 700; font-family: var(--display);
}
.cs-head span, .cs-call span, .cs-id span, .cs-lead span { min-width: 0; }
.cs-head b, .cs-call b, .cs-id b, .cs-lead b {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-head small, .cs-call small, .cs-id small, .cs-lead small {
  display: block; font-size: .62rem; color: rgba(244, 245, 248, .48);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tag {
  display: inline-flex; margin-top: .4rem;
  font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12); color: #FFB08A;
}
.cs-live {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 245, 248, .5);
}
.cs-wave {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 3px; height: 2.45rem; margin: .3rem 0 .15rem;
}
.cs-wave i {
  flex: none; width: 3px; height: 42%;
  border-radius: 2px; background: rgba(255, 176, 138, .7);
}
.cs-wave i:nth-child(3n) { height: 62%; }
.cs-wave i:nth-child(4n) { height: 78%; }
.cs-wave i:nth-child(5n) { height: 36%; }
.cap-card.is-in .cs-wave i { animation: csWave 1.25s ease-in-out infinite; }
@keyframes csWave {
  0%, 100% { height: 28%; opacity: .5; }
  50% { height: 96%; opacity: 1; }
}
.cs-wave i:nth-child(3n) { animation-delay: .12s; }
.cs-wave i:nth-child(3n+1) { animation-delay: .28s; }
.cs-wave i:nth-child(4n) { animation-delay: .42s; }
.cs-wave i:nth-child(5n) { animation-delay: .6s; }

.cs-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.cs-tl li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; color: rgba(244, 245, 248, .78);
  padding: .12rem .4rem; border-radius: 6px;
}
.cs-tl em {
  flex: none; width: 2.3rem; font-size: .56rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #FFB08A;
}
.cap-card.is-in .cs-tl li { animation: csHit 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
@keyframes csHit {
  0%, 8% { background: transparent; }
  14%, 28% { background: rgba(255, 83, 24, .18); }
  40%, 100% { background: transparent; }
}

.cs-chat { display: grid; gap: .28rem; justify-items: start; }
.cs-chat p {
  margin: 0; max-width: 88%; padding: .32rem .55rem;
  border-radius: 10px; font-size: .7rem; line-height: 1.35; color: #f4f5f8;
}
.cs-chat .out { background: rgba(255, 83, 24, .28); border-bottom-left-radius: 4px; }
.cs-chat .in { background: rgba(255, 255, 255, .08); justify-self: end; border-bottom-right-radius: 4px; }
.cs-type { display: flex; gap: .22rem; padding: .35rem .5rem; }
.cs-type span {
  width: 4px; height: 4px; border-radius: 50%; background: #FFB08A;
}
.cap-card.is-in .cs-chat p { animation: csBubble 6s var(--ease) infinite; animation-delay: calc(var(--i) * .55s); }
.cap-card.is-in .cs-type span { animation: typing 1.3s ease-in-out infinite; }
.cs-type span:nth-child(2) { animation-delay: .18s; }
.cs-type span:nth-child(3) { animation-delay: .36s; }
@keyframes csBubble {
  0%, 6% { opacity: .4; }
  16%, 78% { opacity: 1; }
  90%, 100% { opacity: .4; }
}

.cs-call { display: flex; align-items: center; gap: .5rem; }
.cs-call strong {
  margin-left: auto; font-size: .92rem; font-weight: 600; color: #FFB08A;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em;
}
.cap-card.is-in .cs-call i { animation: dialPulse 2.2s ease-in-out infinite; }

.cap-st-dial ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; }
.cap-st-dial li {
  display: flex; align-items: center; gap: .45rem;
  padding: .28rem .4rem; border-radius: 8px;
  font-size: .75rem; color: rgba(244, 245, 248, .82);
  border: 1px solid transparent;
}
.cap-st-dial li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-st-dial li em {
  font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244, 245, 248, .35);
}
.cap-card.is-in .cap-st-dial li { animation: csQueue 6s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes csQueue {
  0%, 26% {
    background: rgba(255, 83, 24, .2); border-color: rgba(255, 176, 138, .35);
  }
  32%, 100% { background: transparent; border-color: transparent; }
}
.cap-card.is-in .cap-st-dial li em { animation: csQueueLbl 6s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes csQueueLbl {
  0%, 26% { color: #FFB08A; }
  32%, 100% { color: rgba(244, 245, 248, .35); }
}

.cs-tr { margin: .35rem 0 0; font-size: .7rem; line-height: 1.4; color: rgba(244, 245, 248, .82); }
.cs-tr em {
  display: block; margin-bottom: .2rem;
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFB08A;
}
.cs-tr b {
  display: block; font-weight: 500; overflow: hidden; white-space: nowrap;
  max-width: 100%;
}
.cap-card.is-in .cap-st-rec .cs-tr b,
.cap-card.is-in .cap-st-voice .cs-tr b {
  max-width: 0;
  animation: csType 6s steps(28, end) infinite;
}
@keyframes csType {
  0%, 10% { max-width: 0; }
  48%, 82% { max-width: 100%; }
  94%, 100% { max-width: 0; }
}

.cap-st-flow {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; align-content: center;
  min-height: 6.6rem; padding-top: .15rem;
}
.cs-node {
  position: relative;
  padding: .55rem .45rem .5rem;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
}
.cs-node em {
  display: block; font-size: .52rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(244, 245, 248, .4); margin-bottom: .18rem;
}
.cs-node b { display: block; font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-card.is-in .cs-node { animation: nodeRun 5.4s var(--ease) infinite; animation-delay: calc(var(--i) * 1.15s); }

.cs-id { display: flex; align-items: center; gap: .55rem; }
.cap-card.is-in .cs-id i { animation: dialPulse 2.2s ease-in-out infinite; }
.cap-card.is-in .cap-st-id .cs-live { animation: csBlink 2.4s ease-in-out infinite; }
@keyframes csBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.cap-st-ingest { display: grid; align-content: center; gap: .55rem; }
.cs-src {
  display: inline-flex; width: fit-content;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 999px;
  background: rgba(255, 83, 24, .22); color: #FFB08A;
}
.cs-lead {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.cs-lead em {
  margin-left: auto; font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9b6ae;
}
.cap-card.is-in .cs-src { animation: csArrive 5.2s var(--ease) infinite; }
.cap-card.is-in .cs-lead { animation: csSettle 5.2s var(--ease) infinite; }
@keyframes csArrive {
  0% { opacity: 0; transform: translateX(-12px); }
  18%, 78% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes csSettle {
  0%, 14% { opacity: .4; }
  28%, 82% { opacity: 1; }
  94%, 100% { opacity: .4; }
}

.cap-st-phone { display: grid; align-content: stretch; }
.cs-mobi {
  display: flex; flex-direction: column; gap: .45rem; min-height: 6.6rem; min-width: 0;
}
.cs-mobi header {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 245, 248, .42);
}
.cs-mobi header b { color: #FFB08A; letter-spacing: 0; font-size: .78rem; }
.cs-mobi-card {
  flex: 1; min-width: 0;
  background: rgba(255, 83, 24, .16); border: 1px solid rgba(255, 176, 138, .25);
  border-radius: 8px; padding: .55rem .6rem .5rem;
}
.cs-mobi-card small {
  display: block; font-size: .56rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #FFB08A; margin-bottom: .2rem;
}
.cs-mobi-card b {
  display: block; font-size: .88rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-mobi-card span {
  display: block; margin-top: .18rem; font-size: .68rem;
  color: rgba(244, 245, 248, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-card.is-in .cs-mobi-card { animation: csPhone 4.4s var(--ease) infinite; }
@keyframes csPhone {
  0%, 12% { opacity: .55; }
  28%, 72% { opacity: 1; }
  88%, 100% { opacity: .55; }
}

.cs-camps { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; align-content: center; min-height: 6.4rem; }
.cs-camps li {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .45rem;
  min-width: 0; padding: .32rem .45rem; border-radius: 8px;
  font-size: .72rem; color: rgba(244, 245, 248, .82);
}
.cs-camps em {
  font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #FFB08A;
}
.cs-camps span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-camps b {
  font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244, 245, 248, .38);
}
.cap-card.is-in .cs-camps li { animation: csCamp 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * .85s); }
@keyframes csCamp {
  0%, 12% { background: transparent; }
  18%, 36% { background: rgba(255, 83, 24, .2); }
  48%, 100% { background: transparent; }
}
.cap-card.is-in .cs-camps li b { animation: csCampLbl 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * .85s); }
@keyframes csCampLbl {
  0%, 12% { color: rgba(244, 245, 248, .38); }
  18%, 36% { color: #FFB08A; }
  48%, 100% { color: rgba(244, 245, 248, .38); }
}

.cap-st-pipe {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem;
  min-height: 7.8rem;
}
.cs-col {
  min-height: 6.6rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px; padding: .4rem .35rem;
}
.cs-col em {
  display: block;
  font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 245, 248, .4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-move {
  position: absolute; left: .8rem; top: 2.85rem;
  width: calc((100% - 1.9rem) / 3 - .15rem);
  font-size: .68rem; font-weight: 600;
  padding: .28rem .45rem; border-radius: 6px;
  background: rgba(255, 83, 24, .28); color: #fff;
  box-shadow: 0 6px 16px -10px rgba(255, 83, 24, .8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-card.is-in .cs-move { animation: csPipe 5.6s var(--ease) infinite; }
@keyframes csPipe {
  0%, 12% { transform: translateX(0); opacity: 1; }
  38%, 62% { transform: translateX(calc(100% + .4rem)); opacity: 1; }
  88%, 100% { transform: translateX(calc(200% + .8rem)); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-card.is-in .cs-tl li,
  .cap-card.is-in .cs-chat p,
  .cap-card.is-in .cs-type span,
  .cap-card.is-in .cs-wave i,
  .cap-card.is-in .cs-call i,
  .cap-card.is-in .cap-st-dial li,
  .cap-card.is-in .cap-st-dial li em,
  .cap-card.is-in .cap-st-rec .cs-tr b,
  .cap-card.is-in .cap-st-voice .cs-tr b,
  .cap-card.is-in .cs-node,
  .cap-card.is-in .cs-id i,
  .cap-card.is-in .cap-st-id .cs-live,
  .cap-card.is-in .cs-src,
  .cap-card.is-in .cs-lead,
  .cap-card.is-in .cs-mobi-card,
  .cap-card.is-in .cs-camps li,
  .cap-card.is-in .cs-camps li b,
  .cap-card.is-in .cs-move {
    animation: none;
  }
  .cap-card.is-in .cap-st-rec .cs-tr b,
  .cap-card.is-in .cap-st-voice .cs-tr b { max-width: 100%; }
  .cs-move { transform: translateX(calc(100% + .4rem)); opacity: 1; }
}

.int-row {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
  margin: 1.8rem 0 0; padding: 0;
}
.int-row li {
  font-size: .82rem; padding: .35rem .7rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: #3a3f4a;
}

/* How */
.how-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem; list-style: none; margin: 0; padding: 0;
}
.how-steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.how-steps li:hover {
  transform: translateY(-4px); border-color: rgba(255, 94, 0, .32); box-shadow: var(--shadow-md);
}
.how-steps strong {
  display: block; font-size: 1.05rem;
  margin-bottom: .45rem;
}
.how-steps p { margin: 0; color: var(--dim); }

/* Stories */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.story-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.2rem 1.3rem;
  box-shadow: var(--shadow-xs);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.story-card:hover {
  transform: translateY(-4px); border-color: rgba(255, 94, 0, .32); box-shadow: var(--shadow-md);
}
.story-metric {
  margin: 0 0 .55rem;
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ember-lo);
}
.story-kicker {
  margin: 0 0 .45rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.story-card h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.story-card p:last-child { margin: 0; color: var(--dim); font-size: .95rem; }
.quote-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 1.6rem;
}
.quote-grid blockquote {
  margin: 0; padding: 1.2rem 1.15rem;
  background: var(--ink); color: var(--fg-on-ink); border-radius: var(--radius);
}
.quote-grid p { margin: 0 0 .8rem; font-size: 1.02rem; line-height: 1.45; }
.quote-grid footer { color: var(--dim-d); font-size: .82rem; }

/* Pricing */
.tenure-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-bottom: 1.6rem;
}
.pricing-save { margin: 0; font-weight: 600; }
.form-control {
  font-family: var(--body); font-size: .95rem;
  padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.ccy-toggle { margin: 0; color: var(--dim); font-size: .9rem; }
.text-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ember-lo);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.price-plan {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.35rem 1.35rem;
  display: flex; flex-direction: column; gap: .75rem;
  min-height: 100%;
  box-shadow: var(--shadow-xs);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.price-plan:hover {
  transform: translateY(-4px); border-color: rgba(255, 94, 0, .45); box-shadow: var(--shadow-md);
}
.price-plan.is-featured {
  border-color: var(--ember);
  box-shadow: 0 18px 40px -24px rgba(255, 94, 0, .45);
}
.price-plan.is-featured:hover {
  box-shadow: 0 26px 56px -26px rgba(255, 94, 0, .6);
}
.plan-badge {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ember); color: #fff; padding: .28rem .55rem; border-radius: 4px;
}
.amount { font-size: 1rem; color: var(--dim); }
.amount strong { font-size: var(--num-md); color: var(--ink); }
.plan-features { list-style: none; margin: 0; padding: 0; flex: 1; }
.plan-features li {
  padding: .4rem 0 .4rem 1.1rem; position: relative; font-size: .92rem; color: #3d3d3d;
}
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: .78rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
}
.plan-foot {
  display: grid; gap: .7rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.plan-total { margin: 0; font-size: .82rem; color: var(--dim); }
.plan-total strong { font-size: .95rem; color: var(--ink); }
.price-plan .btn {
  width: 100%;
  min-height: 3.1rem;
  justify-content: center;
}
.voice-strip {
  margin-top: 1.4rem; padding: 1.3rem 1.4rem;
  background: var(--ink); color: var(--fg-on-ink); border-radius: var(--radius);
  display: flex; justify-content: space-between; gap: 1.2rem; align-items: center;
}
.voice-strip h3 { margin: .2rem 0 .4rem; }
.voice-strip p { margin: 0; color: var(--dim-d); max-width: 38rem; }
.pricing-note { margin: 1.1rem 0 0; color: var(--dim); font-size: .9rem; }
.fup-star {
  font-weight: 700; color: var(--ember-lo); text-decoration: none;
  margin-left: .12em;
}
.fup-star:hover { text-decoration: none; color: var(--ember); }
.fup-wrap { overflow-x: auto; margin: 1.1rem 0 1.3rem; }
.fup-table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  min-width: 32rem;
}
.fup-table th, .fup-table td {
  text-align: left; padding: .55rem .65rem;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.fup-table thead th {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.fup-table tbody th { color: var(--ink); font-weight: 700; font-size: .92rem; }
.fup-table td { color: var(--dim); }
.legal-doc .btn { margin: .2rem 0 1rem; }

/* Legal docs */
.legal-doc {
  max-width: 46rem; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.4rem) clamp(2rem, 4vw, 2.8rem);
}
.legal-doc h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 .4rem; }
.legal-meta { margin: 0 0 1.7rem; font-size: .85rem; color: var(--dim); }
.legal-doc h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 2rem 0 .6rem; color: var(--ink); }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: .95rem; margin: 1.2rem 0 .45rem; }
.legal-doc p { margin: 0 0 .9rem; color: var(--dim); }
.legal-doc p strong { color: var(--ink); font-weight: 700; }
.legal-doc ul, .legal-doc ol { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--dim); }
.legal-doc li { margin: 0 0 .45rem; }
.legal-doc a { color: var(--ember-lo); }
.legal-doc a.btn-ember,
.legal-doc a.btn-ember:hover { color: var(--paper); }
.legal-doc code { font-family: var(--mono); font-size: .85em; background: var(--paper-2); padding: .1em .35em; border-radius: 4px; }
.legal-nav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-width: 46rem; margin: 0 auto 1.2rem;
}
.legal-nav a {
  font-size: .82rem; font-weight: 600; padding: .4rem .75rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--dim); text-decoration: none;
}
.legal-nav a.is-current { color: #fff; background: var(--ink); border-color: var(--ink); }
.legal-nav a:hover { color: var(--ink); text-decoration: none; border-color: #292929; }
.contact-card {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem;
}
.contact-card img { flex: none; }
.contact-card .brand-wordmark { height: 40px; width: auto; }
.contact-card h1 { margin: 0; }

/* FAQ */
@media (min-width: 980px) {
  .section.faq .section-head {
    margin-inline: auto;
    text-align: center;
  }
  .faq-list { margin-inline: auto; }
}
.faq-list { display: grid; gap: .55rem; max-width: 48rem; }
.faq-list details {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .2rem 1rem;
  box-shadow: var(--shadow-xs);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq-list details:hover { border-color: rgba(255, 94, 0, .32); }
.faq-list details[open] { border-color: rgba(255, 94, 0, .32); box-shadow: var(--shadow-sm); }
/* the default marker is hidden, so the chevron is the only open/closed cue */
.faq-list summary {
  cursor: pointer; font-weight: 600; padding: .9rem 2rem .9rem 0; list-style: none;
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: .15rem; top: 50%;
  width: .5rem; height: .5rem; margin-top: -.35rem;
  border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  border-radius: 1px;
  transform: rotate(45deg);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.faq-list summary:hover::after { border-color: var(--ember); }
.faq-list details[open] > summary::after {
  transform: rotate(-135deg); margin-top: -.15rem; border-color: var(--ember);
}
.faq-list details p { margin: 0 0 1rem; color: var(--dim); }

/* Prefooter: Belkins "ready to start" band */
.prefooter {
  background: #fff;
  color: var(--ink);
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--line);
}
.prefooter-inner { max-width: 46rem; margin: 0 auto; }
.prefooter .eyebrow { color: var(--dim); }
.prefooter h2 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  margin: 0 0 1rem;
  color: var(--ink);
}
.prefooter p { color: var(--dim); margin: 0 0 1.7rem; font-size: 1.08rem; }
.prefooter .hero-ctas {
  flex-direction: row; flex-wrap: wrap;
  justify-content: center; align-items: center;
}

.site-footer {
  background: #141414;
  color: rgba(245,245,245,.78);
  padding: 3.2rem var(--gutter) 1.6rem;
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 2rem 1.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--line-d);
}
.footer-brand-col .brand { color: #fff; }
.footer-tag { margin: .9rem 0 1.1rem; color: var(--dim-d); font-size: .92rem; max-width: 22rem; }
.footer-tag a { color: #f7a06e; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; }
.footer-contact a { color: rgba(244,245,248,.88); }
.text-muted { color: var(--dim-d); }
.footer-col h4 {
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244,245,248,.5);
  margin: 0 0 .85rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.footer-col a { color: rgba(244,245,248,.82); font-size: .92rem; }
.footer-col a:hover { color: #fff; }

.footer-family { padding: 1.6rem 0; border-bottom: 1px solid var(--line-d); }
.footer-family-label {
  margin: 0 0 .7rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244,245,248,.45);
}
.footer-family-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.family-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-d); color: #fff; font-weight: 600; font-size: .9rem;
  text-decoration: none;
}
.family-chip:hover { text-decoration: none; border-color: var(--ember); }
.family-chip.is-here { background: rgba(255,83,24,.14); border-color: rgba(255,83,24,.4); }

.footer-badges {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.4rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line-d);
}
.footer-badges-label {
  margin: 0 0 .55rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244,245,248,.45);
}
.footer-badges-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Partner badges — same component as crm.astrosia.com: white pill, official
   Meta glyph. On this dark footer the white surface is what makes them read. */
.partner-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem .5rem .7rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-xs);
  color: var(--ink); text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.partner-badge:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--shadow-sm); border-color: rgba(255, 255, 255, .32);
}
.partner-badge-mark { display: flex; flex: none; }
.partner-badge-mark svg { display: block; }
.partner-badge-pay .partner-badge-mark { color: var(--good); }
.partner-badge-sec .partner-badge-mark { color: var(--good); }
.partner-badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.partner-badge-text em {
  font-style: normal; font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.partner-badge-text strong {
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}

/* App store badges */
.app-stores { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.store-badge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; text-decoration: none;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
a.store-badge:hover, button.store-badge:hover { text-decoration: none; opacity: .88; transform: translateY(-2px); }
.store-badge img { display: block; height: 40px; width: auto; pointer-events: none; }
.store-badge-play img { height: 58px; margin: -9px; /* official Play badge has large transparent padding */ }
.store-badge-soon img { opacity: .5; filter: grayscale(.4); }
.store-soon-popup {
  position: absolute; left: 50%; bottom: calc(100% + .45rem);
  transform: translateX(-50%) translateY(4px);
  padding: .42rem .75rem; border-radius: 8px;
  background: #fff; color: var(--ink);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  line-height: 1.2; white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 5;
}
.store-soon-popup::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
.store-badge-soon.is-open .store-soon-popup {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.4rem;
  padding-top: 1.2rem; font-size: .82rem; color: var(--dim-d);
}
.footer-copy { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.footer-links a { color: var(--dim-d); }

/* --------------------------------------------------------------------------
   Responsive
   The hero stacks as soon as the two columns stop being comfortable — a big
   display headline next to the thread card needs real width, so it drops to
   one column well before the general card grids do.
   -------------------------------------------------------------------------- */
/* Five footer columns stop fitting well before the nav breaks: give the brand
   block its own full-width row and let the four link columns share the next. */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand-col { grid-column: 1 / -1; max-width: 30rem; }
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-nav {
    display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: .7rem; flex-direction: column; align-items: stretch;
    box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav > a { padding: .7rem .8rem; }
  .site-nav > a:not(.btn) { color: var(--ink) !important; }
  .site-nav > a.btn-ember { color: var(--paper) !important; }
  .site-nav .btn { margin: .25rem 0 0; width: 100%; }
  .header-inner { position: relative; }

  /* hero goes single-column here, not two cramped halves */
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ctx { max-width: 34rem; width: 100%; margin-inline: auto; }

  .why-grid, .cap-grid, .how-steps, .story-grid, .quote-grid, .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scr-row { grid-template-columns: 1.3fr .9fr .8fr; }
  .scr-row span:nth-child(4), .scr-row span:nth-child(5) { display: none; }
  .scr-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-node:not(:nth-child(3n)):not(:last-child)::after { display: none; }
}

@media (max-width: 720px) {
  .cap-stage { min-height: 10.5rem; padding: 1rem .85rem 1.1rem; }
  .cap-st-pipe { min-height: 8.6rem; }
  .cs-col { min-height: 7.2rem; }
  .cs-move { top: 3.15rem; left: .85rem; }
  .cap-st-flow { min-height: 7.2rem; }
  .cs-camps { min-height: 7.2rem; }
  .cs-mobi { min-height: 7.2rem; }
  .cs-wave { height: 2.7rem; }
  .hero { padding-top: calc(var(--nav-h) + 2.2rem); padding-bottom: 3.25rem; }
  .why-grid, .cap-grid, .how-steps, .story-grid, .quote-grid, .pricing-grid {
    grid-template-columns: 1fr;
  }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts > div { padding: .9rem 0; border-top: 1px solid var(--line); }
  .hero-facts > div:first-child { border-top: 0; }
  .hero-facts > div + div { padding-left: 0; border-left: 0; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .voice-strip { flex-direction: column; align-items: flex-start; }
  .voice-strip .btn { width: 100%; }
  .scr-row { grid-template-columns: 1.2fr .8fr; }
  .scr-row span:nth-child(3) { display: none; }
  .scr-flow { grid-template-columns: 1fr; }
  .footer-badges { flex-direction: column; align-items: flex-start; gap: 1.35rem; }
  .footer-badges-group { width: 100%; }
  .legal-nav { gap: .4rem; }
  /* no room for label + marquee side by side — stack to two lines here */
  .trust-strip { display: block; padding: 1.1rem 0; }
  .trust-label { padding: 0 var(--gutter); margin-bottom: .7rem; }
  .marquee::before { width: 8%; }
}

@media (max-width: 560px) {
  .ctx {
    max-width: none;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
  }
  .ctx-node text { font-size: 13.5px; }
  img.brand-wordmark, svg.brand-wordmark { height: 40px; }
  .footer-top { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .demo-tabs button { flex: 1 1 auto; }
  /* 48 waveform bars will not fit a narrow phone; thin them out */
  .scr-wave { height: 46px; }
  .scr-wave i:nth-child(n+29) { display: none; }
  .cs-wave i:nth-child(n+17) { display: none; }
  .footer-badges-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
  }
  .partner-badge {
    width: auto;
    min-width: 0;
    padding: .45rem .6rem .45rem .5rem;
    gap: .45rem;
  }
  .footer-badges-row .partner-badge:last-child {
    grid-column: 1 / -1;
    width: calc(50% - .25rem);
    justify-self: center;
  }
  .partner-badge-text { min-width: 0; flex: 1; }
  .partner-badge-text strong {
    min-width: 0;
    max-width: 100%;
    font-size: .72rem;
    white-space: normal;
  }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* Brand kit — lab sheets of downloadable marks, posters, slides */
.bk-page {
  scroll-padding-top: calc(var(--nav-h) + 4.5rem);
}
.bk-hero {
  position: relative;
  background: var(--ink);
  color: var(--fg-on-ink);
  padding: 4.2rem var(--gutter) 4.4rem;
  overflow: hidden;
}
.bk-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48rem 28rem at 88% -10%, rgba(255,83,24,.32), transparent 58%);
}
.bk-hero-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
}
.bk-hero .eyebrow { color: var(--dim-d); }
.bk-hero h1 {
  color: var(--paper);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  margin: 0 0 1rem;
}
.bk-lede {
  max-width: 38rem;
  margin: 0 0 1.6rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--dim-d);
}
.bk-hero .hero-cta-row { margin-bottom: .9rem; }
.bk-hero .hero-link { color: var(--dim-d); border-bottom-color: rgba(163,163,163,.4); }
.bk-hero-note { margin: 0; font-size: .88rem; color: #8a8278; }
.bk-jump {
  display: flex; flex-wrap: wrap; gap: .45rem .2rem;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: var(--nav-h); z-index: 8;
}
.bk-jump a {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  padding: .4rem .7rem; text-decoration: none;
}
.bk-jump a:hover { color: var(--ink); text-decoration: none; }
.bk-section .section-head { max-width: 42rem; }
.bk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}
.bk-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xs);
}
.bk-preview {
  display: grid; place-items: center;
  aspect-ratio: 1;
  padding: 1.15rem;
  text-decoration: none;
}
.bk-preview.is-ink { background: #141414; }
.bk-preview.is-cream { background: #f7f2ec; }
.bk-preview.is-ember { background: #c43a10; }
.bk-preview img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.bk-sheet-meta {
  padding: .85rem .95rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.bk-filename { margin: 0 0 .25rem; }
.bk-filename code {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--dim);
  word-break: break-all;
}
.bk-label {
  margin: 0 0 .2rem;
  font-size: .92rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.bk-kind { margin: 0 0 .7rem; font-size: .78rem; color: var(--dim); }
.bk-dl {
  font-size: .82rem; font-weight: 700;
  color: var(--ember-lo);
}
.bk-svg-note { margin: 1.2rem 0 0; font-size: .9rem; color: var(--dim); }
.bk-svg-note code {
  font-family: var(--mono); font-size: .82em;
  background: var(--paper-2); padding: .1em .35em; border-radius: 4px;
}
.bk-deck {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.6rem;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bk-deck-copy { padding: clamp(1.4rem, 3vw, 2.1rem); }
.bk-deck-copy h3 {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 400;
  margin: .2rem 0 1rem;
}
.bk-deck-copy ol {
  margin: 0 0 1.4rem; padding-left: 1.15rem;
  color: var(--dim);
}
.bk-deck-copy li { margin: 0 0 .4rem; }
.bk-deck-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--ink);
}
.bk-deck-previews img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bk-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.bk-swatch {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bk-swatch-chip {
  display: block; height: 5.4rem;
  background: var(--sw);
}
.bk-swatch h3 { margin: .9rem 1rem .15rem; }
.bk-swatch p { margin: 0 1rem .85rem; font-size: .88rem; color: var(--dim); }
.bk-swatch code { font-family: var(--mono); font-size: .85em; color: var(--ink); }
.bk-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.bk-rules article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem 1.2rem;
}
.bk-rules h3 { margin: 0 0 .7rem; }
.bk-rules ul { margin: 0; padding-left: 1.15rem; color: var(--dim); }
.bk-rules li { margin: 0 0 .5rem; }
.bk-legal { margin: 1.6rem 0 0; max-width: 42rem; color: var(--dim); }
@media (max-width: 1080px) {
  .bk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bk-grid, .bk-swatches, .bk-rules, .bk-deck { grid-template-columns: 1fr 1fr; }
  .bk-deck { grid-template-columns: 1fr; }
  .bk-hero { padding-top: 2.6rem; }
  .bk-jump { top: var(--nav-h); }
}
@media (max-width: 560px) {
  .bk-grid, .bk-swatches, .bk-rules { grid-template-columns: 1fr; }
}

/* ── Launch film ──────────────────────────────────────────────────────────
   Sits directly under the hero, on the same paper ground as the rest of the
   page. Language is chosen from the visitor's IP (Hindi across most of India,
   English elsewhere and in the south) and can be overridden with the toggle,
   which then sticks.                                                        */
.film {
  background: var(--paper);
  padding: clamp(3.4rem, 6vw, 5.4rem) var(--gutter);
}
.film-inner { width: min(1100px, 100%); margin: 0 auto; }

.film-head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.film-head h2 { margin: 0 0 1.35rem; }
.film-head h2 i { font-style: italic; color: var(--ember); }

/* toggle — centred under the headline. The thumb is exactly half the track,
   so both buttons must be equal width: "हिंदी" and "English" have very
   different natural widths, which is what threw the alignment before. */
.film-lang {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(20, 20, 20, .05); border: 1px solid rgba(20, 20, 20, .1);
}
.film-lang-btn {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 78px;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; text-align: center; white-space: nowrap;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: var(--dim); transition: color .2s ease;
}
.film-lang-btn[aria-pressed="true"] { color: var(--ink); }
.film-lang-btn:hover[aria-pressed="false"] { color: var(--ink); }
.film-lang-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.film-lang-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 20, .14);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.film-lang[data-active="en"] .film-lang-thumb { transform: translateX(100%); }
.no-js .film-lang-thumb { display: none; }

.film-stage {
  position: relative; margin: 0; padding: 10px; border-radius: 22px; background: #fff;
  border: 1px solid var(--line, rgba(20, 20, 20, .1));
  box-shadow: 0 30px 70px -34px rgba(20, 20, 20, .38);
}
.film-video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: 13px;
}

/* The stream is not attached until this is pressed — otherwise hls.js buffers
   frame 0 and the poster gets replaced by it, which on this film is black. */
.film-play {
  position: absolute; inset: 10px; z-index: 2;
  display: grid; place-items: center;
  appearance: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 13px; background: transparent;
}
.film-play::before {
  content: ""; position: absolute; inset: 0; border-radius: 13px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .26), rgba(0, 0, 0, .1));
}
.film-play::after {
  content: ""; position: absolute; width: 84px; height: 84px; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .5);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.film-play svg {
  position: relative; z-index: 1; width: 30px; height: 30px;
  fill: var(--ink); margin-left: 4px;
}
.film-play:hover::after { transform: scale(1.07); }
.film-play:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.film-play[hidden] { display: none; }