/* ==========================================================================
   Silence AI — Oneh landing page
   Implementation of "Oneh Landing v2.dc.html" (Claude Design).
   RTL-first. Design tokens mirror the source document exactly.
   ========================================================================== */

:root {
  /* ground */
  --bg:        #F7F6F3;
  --bg-alt:    #F2F0EB;
  --surface:   #FBFAF8;

  /* ink */
  --ink:       #111113;
  --body:      #5A5A55;
  --body-2:    #3F3F3A;
  --muted:     #63635C;   /* was #8C8C84 — 3.1:1, failed AA */
  --faint:     #6E6E67;   /* was #A3A39A — 2.4:1, failed AA */

  /* rules */
  --line:        #DDDBD3;
  --line-soft:   #E6E4DC;
  --line-strong: #C9C7BE;

  /* accent */
  --acc:        #3A34E8;
  --acc-dark:   #2A24C4;
  --acc-tint:   #DEDCFC;
  --green:      #1D7A4D;

  /* dark panel */
  --dark-line:  #28282B;
  --dark-line-2:#3B3B3E;
  --dark-dim:   #85857D;   /* 4.5:1 on the ink ground */
  --mint:       #4ED08C;

  /* ── supporting-copy scale ────────────────────────────────────────────
     Three tiers, used site-wide. Every gray supporting paragraph resolves
     to one of these — no per-component font sizes. */
  --text-lead:     clamp(17px, 1.5vw, 19px);   /* 17px mobile -> 19px @1280 */
  --text-lead-lh:  1.55;
  --text-body:     16px;                       /* card & component copy     */
  --text-body-lh:  1.6;
  --text-meta:     13.5px;                     /* fine print, captions      */
  --text-meta-lh:  1.5;
  --measure:       660px;                      /* max line length for copy  */

  /* ── vertical rhythm ──────────────────────────────────────────────── */
  --gap-head-copy: 28px;   /* headline  → supporting text */
  --gap-copy-next: 36px;   /* supporting text → CTA / content */
  --gap-title-desc: 12px;  /* card title → description */

  /* ── section grounds ──────────────────────────────────────────────────
     Six grounds, assigned by conceptual chapter — never alternated
     mechanically. Same brand hue throughout; only the value shifts. */
  --ground-warm:  #F7F6F3;   /* hero + framing  */
  --ground-white: #FFFFFF;   /* product, industries */
  --ground-tint:  #EFF0F5;   /* process (blue-gray, brand hue) */
  --ground-soft:  #F2F0EB;   /* integrations pause, footer */
  --ground-ink:   #111113;   /* before / after contrast */
  --ground-brand: #221D9B;   /* final CTA — brand indigo, darkened */

  /* ── layout system ───────────────────────────────────────────────────
     One page anchor, one grid, one spacing scale. Every chapter aligns to
     the same 12 columns so composition can vary without drift. */
  --shell:   1240px;
  --gutter:  clamp(20px, 4.2vw, 56px);
  --col-gap: clamp(16px, 1.8vw, 28px);

  /* section rhythm — three densities, never arbitrary padding */
  --sect-sm: clamp(46px, 5.5vw, 84px);    /* a pause            */
  --sect-md: clamp(72px, 8.5vw, 124px);   /* the default        */
  --sect-lg: clamp(92px, 11vw, 168px);    /* a held beat        */

  /* hairlines: used sparingly, as structure — not as card outlines */
  --hair: color-mix(in srgb, var(--ink) 12%, transparent);
  --r-sm:  7px;
  --r-md:  10px;
  --r-lg:  12px;
  --r-xl:  14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Heebo", "Archivo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: inherit;
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
p  { margin: 0; }
a  { color: var(--ink); text-decoration: none; }
a:hover { color: var(--acc); }
button, input, select { font-family: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
::selection { background: var(--acc-tint); }

/* --- primitives ---------------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
/* A section carries no divider by default — the ground change IS the
   boundary. `.sect--rule` is added only where two sections share a ground. */
.sect { position: relative; }
.sect--rule   { border-top: 1px solid var(--line); }
.sect--white  { background: var(--ground-white); }
.sect--tint   { background: var(--ground-tint); }
.sect--soft   { background: var(--ground-soft); }
.sect--alt    { background: var(--bg-alt); }

/* dark chapters — invert the text roles rather than restating colors */
.sect--ink, .sect--brand { color: var(--bg); }
.sect--ink  { background: var(--ground-ink); }
.sect--brand{ background: var(--ground-brand); color: #fff; }
.sect--ink h2, .sect--brand h2 { color: inherit; }

.sect__inner { max-width: var(--shell); margin: 0 auto; padding: var(--sect-md) var(--gutter); }
.sect__inner--tight { padding-block: var(--sect-md); }
.sect__inner--pause { padding-block: var(--sect-sm); }
.sect__inner--airy  { padding-block: var(--sect-lg); }

/* the shared 12-column grid — the page's alignment contract */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
@media (max-width: 900px) { .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* column spans used across chapters — declared once, reused everywhere */
.c-full { grid-column: 1 / -1; }
.c-nar  { grid-column: span 4; }
.c-mid  { grid-column: span 6; }
.c-wide { grid-column: span 8; }
@media (max-width: 900px) { .c-nar, .c-mid, .c-wide { grid-column: 1 / -1; } }

/* an editorial eyebrow that replaces a container: a rule + a label */
.chapter {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 18px; margin-bottom: clamp(28px, 3.5vw, 52px);
  border-bottom: 1px solid var(--hair);
}
.chapter__n {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--acc); font-variant-numeric: tabular-nums;
}
.chapter__l {
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  color: var(--muted);
}
/* the same eyebrow on a dark chapter */
.chapter--dark { border-bottom-color: rgba(255,255,255,.16); }
.chapter--dark .chapter__l { color: #9C9C95; }
.chapter--dark .chapter__n { color: var(--mint); }

/* ── the supporting-copy system ──────────────────────────────────────────
   .u-lead  section supporting copy sitting under a section headline
   .u-body  descriptions inside cards, cells and panels
   .u-meta  fine print: notes, disclaimers, captions
   Component rules below compose these rather than redefining sizes. */
.u-lead {
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
  font-weight: 400;
  color: var(--body);
  max-width: min(100%, var(--measure));
  text-wrap: balance;
}
.u-body {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: 400;
  color: var(--body);
  text-wrap: pretty;
}
.u-meta {
  font-size: var(--text-meta);
  line-height: var(--text-meta-lh);
  color: var(--muted);
  text-wrap: pretty;
}

.kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  color: var(--muted);
}
.kicker--sm   { font-size: 11px; letter-spacing: .15em; color: var(--faint); }
.kicker--acc  { color: var(--acc); font-size: 12px; letter-spacing: .16em; }
.kicker--green{ color: var(--green); font-size: 11px; letter-spacing: .15em; }

.h-sect { font-size: clamp(32px, 4.4vw, 62px); }
.lede   { font-size: var(--text-lead); line-height: var(--text-lead-lh); font-weight: 400;
          color: var(--body); max-width: min(100%, var(--measure)); text-wrap: balance; }
.num    { font-variant-numeric: tabular-nums; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.split--end   { align-items: end; }
.split--start { align-items: start; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 17px; padding: 15px 26px;
  border-radius: 11px; cursor: pointer; border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn--primary:hover { background: var(--acc-dark); color: #fff; }
.btn--outline { color: var(--ink); border-color: var(--line-strong); padding: 15px 24px; gap: 11px; }
.btn--outline:hover { background: #EDEBE5; color: var(--ink); }

.chip {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 11px; font-size: 13px; color: var(--body);
}

/* check dot used across the agent-action lists */
.dot {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; border: 1px solid #CFCDC4;
  transition: all .35s ease;
}
.dot svg { opacity: 0; transition: opacity .2s ease; }
.is-done .dot { background: var(--green); border-color: var(--green); }
.is-done .dot svg { opacity: 1; }

.act {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.45; font-weight: 400;
  color: #6E6E67; transition: color .35s ease;
}
.act.is-done { font-weight: 500; color: var(--ink); }
.act .dot { margin-top: 2px; }

/* --- announcement + header ---------------------------------------------- */

.announce {
  background: var(--ink); color: var(--bg);
  font-size: 13.5px; font-weight: 500; text-align: center;
  padding: 9px 20px; letter-spacing: -0.01em;
}

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 246, 243, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__bar {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter);
  height: 74px; display: flex; align-items: center; gap: 32px;
}
/* ── brand lockup ──────────────────────────────────────────────────────
   "Radial": a circular voice meter whose amplitude falls to nothing over
   one arc — the bars there collapse into dots. Bars inherit currentColor
   so the mark travels onto ink and indigo grounds; only --brand-dot needs
   re-pointing. Ring centre is 18.38,16 in the 32-unit box (the artwork is
   optically centred, not geometrically). */
.brand {
  --brand-dot: var(--acc);
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 22px; letter-spacing: -0.04em;
}
.brand__mark { width: 1.5em; height: 1.5em; flex: none; }
.brand__dots { color: var(--brand-dot); }
.brand__word { display: flex; align-items: baseline; gap: 3px; }
.brand__word span { color: var(--brand-dot); }

/* On hover the loud bars settle inward and the quiet dots lift — the room
   going quiet, rather than a voice starting up. */
@media (prefers-reduced-motion: no-preference) {
  .brand__bars, .brand__dots {
    transform-box: view-box; transform-origin: 18.38px 16px;
    transition: transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .brand:hover .brand__bars { transform: scale(.93); }
  .brand:hover .brand__dots { transform: scale(1.14); }
}

/* Inverted grounds (ink / indigo) */
.sect--ink .brand, .sect--brand .brand { --brand-dot: #8B7BFF; }
.hdr__nav { display: flex; align-items: center; gap: 30px; margin-inline-start: 20px; }
.hdr__nav a { font-size: 15.5px; font-weight: 500; color: var(--body-2); }
.hdr__spacer { flex: 1; }
.hdr__login { font-size: 15.5px; font-weight: 500; color: var(--body-2); }
.hdr__ghost {
  font-size: 15px; font-weight: 600; padding: 10px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: background .18s ease;
}
.hdr__ghost:hover { background: #EDEBE5; color: var(--ink); }
.hdr__cta {
  font-size: 15px; font-weight: 600; padding: 10px 18px;
  border-radius: var(--r-md); background: var(--acc); color: #fff;
  border: 1px solid var(--acc); transition: background .18s ease;
}
.hdr__cta:hover { background: var(--acc-dark); color: #fff; }
.hdr__links a, .hdr__login, .hdr__cta { white-space: nowrap; }

.burger {
  display: none; width: 42px; height: 42px; flex: 0 0 42px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); cursor: pointer; padding: 0;
}
.burger span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .25s ease;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

.hdr__menu {
  display: none; border-top: 1px solid var(--line); background: var(--bg);
  padding: 8px var(--gutter) 24px; max-height: 72vh; overflow-y: auto;
}
.hdr__menu.is-open { display: block; }
.hdr__menu a {
  display: block; padding: 15px 0; font-size: 18px; font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.hdr__menu a:last-child { color: var(--acc); border-bottom: 0; }

@media (max-width: 1120px) {
  .hdr__nav, .hdr__login, .hdr__ghost { display: none !important; }
  .burger { display: flex !important; }
}

@media (max-width: 520px) {
  .hdr__bar { gap: 14px; }
  .hdr__cta { padding: 10px 14px; font-size: 14px; }
}

/* --- hero ---------------------------------------------------------------- */

.hero { max-width: var(--shell); margin: 0 auto; padding: var(--sect-md) var(--gutter) var(--sect-lg); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(44px, 5vw, 80px); align-items: center;
}

/* headline — static "Voice AI" over a rotating business category.
   Sized so the longest category (לעסקי שירות.) always stays on one line
   inside the hero's text column: 54px on mobile, 96px at 1280, 100px at 1440+. */
.hero__title {
  font-size: clamp(54px, 7.5vw, 100px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: var(--gap-head-copy);
}
.hero__title-static { display: block; color: var(--ink); }

/* Fixed height: the box never resizes when the category changes, so the
   paragraph, CTAs and the rest of the hero never shift. The extra block
   padding gives Hebrew descenders (ן, ק) room while overflow clips the
   vertical travel; matching negative margins keep the line spacing tight. */
.hero__rotator {
  display: block;
  position: relative;
  /* content-box on purpose: the page sets border-box globally, which would make
     height:1em swallow the padding below instead of extending the clip window. */
  box-sizing: content-box;
  height: 1em;
  padding-block: 0.10em 0.20em;
  margin-block: -0.10em -0.20em;
  overflow: hidden;
}
.hero__rot-item {
  position: absolute;
  top: 0.10em;
  inset-inline-start: 0;
  width: 100%;
  color: var(--acc);
  line-height: 1;
  white-space: nowrap;
  /* resting state for every inactive item: below, blurred, invisible.
     No transition here, so an item that finished leaving snaps back silently. */
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
}
.hero__rot-item.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 400ms cubic-bezier(.22, .61, .36, 1),
              transform 400ms cubic-bezier(.22, .61, .36, 1),
              filter 400ms cubic-bezier(.22, .61, .36, 1);
}
.hero__rot-item.is-leaving {
  opacity: 0;
  transform: translateY(-26px);
  filter: blur(5px);
  transition: opacity 400ms cubic-bezier(.4, 0, .7, .35),
              transform 400ms cubic-bezier(.4, 0, .7, .35),
              filter 400ms cubic-bezier(.4, 0, .7, .35);
}

/* ── skip link (IS 5568) — logical inset so it works in RTL ───────────── */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  font-size: 15px; font-weight: 600; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus {
  inset-inline-start: 0;
  outline: 2px solid var(--acc); outline-offset: 2px; color: #fff;
}

/* ── form errors and hints ────────────────────────────────────────────── */
.form__hint { font-size: 12px; color: var(--muted); }
.form__err {
  display: block; font-size: 12.5px; font-weight: 600; color: #B3261E;
}
.form__field input.is-invalid,
.form__field select.is-invalid { border-color: #B3261E; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hero__lede {
  font-size: var(--text-lead); line-height: var(--text-lead-lh); font-weight: 400;
  color: var(--body); max-width: min(100%, var(--measure));
  margin-bottom: var(--gap-copy-next); text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero__note { font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--muted); }

/* live-call panel */
/* embedded, not floating: no outline, no radius — the hairlines inside
   do the structuring and the panel sits directly on the page ground. */
.panel {
  border: 0; border-radius: 0; background: transparent;
  border-top: 1px solid var(--ink);
}
.panel__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--hair);
}
.panel__pip { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); flex: 0 0 9px; }
.panel__who { flex: 1; }
.panel__label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); margin-bottom: 2px; }
.panel__name  { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.panel__timer { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--body-2); }
.panel__cols  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--hair); }
.panel__col   { padding: 22px 0; display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.panel__col--side {
  gap: 13px; background: transparent;
  border-inline-start: 1px solid var(--hair);
  padding-inline-start: 22px;
}

/* waveform */

.wave {
  display: flex; align-items: center; gap: 3px; height: 64px;
  padding: 0; background: transparent;
}
.wave span {
  flex: 1 1 0; min-width: 3px; max-width: 6px; border-radius: 2px;
  background: #B6B3A9; transform-origin: center;
  animation: wf 1s ease-in-out infinite;
}
.wave span.is-acc { background: var(--acc); }
.wave--mini span { min-width: 2px; max-width: 4px; background: #C6C3BA; }
.wave--mini span.is-acc { background: var(--acc); }

@keyframes wf  { 0%, 100% { transform: scaleY(.12); } 50% { transform: scaleY(1); } }
@keyframes fade{ from { opacity: 0; } to { opacity: 1; } }

/* transcript bubbles */
.turn {
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  align-items: flex-end;
}
.turn.is-shown { opacity: 1; transform: translateY(0); }
.turn--ai { align-items: flex-start; }
.turn__who { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--faint); }
.turn--ai .turn__who { color: var(--acc); }
.turn__text {
  font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 94%;
  border-radius: var(--r-lg); padding: 11px 14px;
  color: #2F2F2A; background: transparent; border: 1px solid var(--line);
}
.turn--ai .turn__text { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.typing {
  display: flex; gap: 5px; align-items: center; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  width: fit-content; animation: fade .3s ease;
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: fade 1s ease-in-out infinite alternate;
}
.typing span:nth-child(2) { animation-delay: .25s; }
.typing span:nth-child(3) { animation-delay: .5s; }

/* --- stats --------------------------------------------------------------- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--ink);
}
.stat { padding: 32px 0 0; padding-inline-end: 32px; }
.stat + .stat { padding-inline: 32px; border-inline-start: 1px solid var(--line); }
.stat:last-child { padding-inline-end: 0; padding-inline-start: 32px; }
.stat__n {
  font-size: clamp(60px, 9vw, 124px); font-weight: 900;
  letter-spacing: -0.055em; line-height: .92; font-variant-numeric: tabular-nums;
}
.stat__n--acc { color: var(--acc); }
.stat__l { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--body); margin-top: 14px; }
.disclaimer {
  font-size: var(--text-meta); line-height: var(--text-meta-lh);
  color: var(--faint); margin-top: 26px;
  max-width: min(100%, var(--measure));
}

/* --- live demo ----------------------------------------------------------- */

/* ── product chapter: asymmetric, demo-dominant ──────────────────────────
   Narrow editorial rail beside a wide live product surface. Deliberately
   NOT a card grid — this is the one section that shows the real product. */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.72fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.pd__aside { position: sticky; top: 104px; }
.pd__title {
  font-size: clamp(30px, 2.9vw, 44px);
  line-height: 1.04; letter-spacing: -0.035em;
  margin-bottom: var(--gap-head-copy);
}
.pd__lede { margin-bottom: 0; }
@media (max-width: 1000px) {
  .pd { grid-template-columns: 1fr; }
  .pd__aside { position: static; }
}

.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 14px 22px 13px; font-size: 16px; font-weight: 500;
  cursor: pointer; margin-bottom: -1px; letter-spacing: -0.01em;
  transition: color .18s ease;
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }

/* vertical scenario rail — replaces the horizontal tab strip */
.tabs--rail {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  border-bottom: 0; border-top: 1px solid var(--line);
  margin-top: 32px;
}
.tabs--rail .tab {
  text-align: right; padding: 14px 14px 14px 4px;
  border-bottom: 1px solid var(--line);
  border-inline-start: 0;
  box-shadow: inset -2px 0 0 0 transparent;  /* RTL: rail hugs the right edge */
  margin-bottom: 0;
  transition: color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tabs--rail .tab:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.tabs--rail .tab[aria-selected="true"] {
  border-bottom-color: var(--line);
  box-shadow: inset -2px 0 0 0 var(--acc);
}

.demo { border: 0; border-top: 1px solid var(--ink); background: transparent; }
.demo__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.demo__stage {
  padding: clamp(22px, 3vw, 38px) 0; display: flex; flex-direction: column;
  gap: 18px; min-height: 500px;
}
.demo__status {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.demo__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 8px; }
.demo__live { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.demo__timer { margin-inline-start: auto; font-size: 14px; color: var(--muted); }
.demo__side {
  padding: clamp(22px, 3vw, 38px) 0; background: transparent;
  border-inline-start: 1px solid var(--hair);
  padding-inline-start: clamp(22px, 2.6vw, 38px);
  display: flex; flex-direction: column; gap: 15px;
}
.demo__card {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 11px;
  padding: 20px; background: var(--surface); opacity: .3;
  transform: translateY(4px);
  transition: all .45s cubic-bezier(.2, .7, .3, 1);
}
.demo__card.is-on { opacity: 1; transform: translateY(0); border-color: var(--green); }
.demo__card-k { margin-bottom: 12px; }
.demo__card-t { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; margin-bottom: 10px; }
.demo__card-b { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--body); }
.demo__replay-wrap { margin-top: auto; padding-top: 18px; }
.replay {
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s ease;
}
.replay:hover { background: var(--line-soft); }

/* --- capabilities: one call, five states ---------------------------------
   No cards. A hairline rail carries five typographic states; a single stage
   below shows what was said and what the system did. The composition is the
   product behaviour, not a grid of boxes. */
.states__head { margin-bottom: clamp(36px, 4.5vw, 64px); }

.states__rail {
  list-style: none; margin: 0 0 clamp(32px, 4vw, 56px); padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  border-top: 1px solid var(--hair);
}
.states__rail::after {                 /* progress through the call */
  content: ""; position: absolute; top: -1px; inset-inline-start: 0;
  width: var(--progress, 20%); height: 1px; background: var(--acc);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.states__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 0 0; padding-inline-end: 16px;
}
.states__n {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--faint); transition: color .35s ease;
}
.states__k {
  font-size: clamp(17px, 1.7vw, 22px); font-weight: 800; letter-spacing: -0.025em;
  color: #77776F; transition: color .35s ease;
}
.states__item.is-past .states__k { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.states__item.is-past .states__n { color: color-mix(in srgb, var(--acc) 55%, transparent); }
.states__item.is-on   .states__k { color: var(--ink); }
.states__item.is-on   .states__n { color: var(--acc); }

.states__stage { align-items: start; }
.states__cap {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 14px;
}
.states__quote {
  font-size: clamp(20px, 2.2vw, 29px); font-weight: 500;
  line-height: 1.32; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance; margin: 0; min-height: 2.7em;
}
.states__quote::before { content: "\201D"; color: var(--acc); margin-inline-end: 2px; }
.states__what {
  font-size: var(--text-body); line-height: var(--text-body-lh);
  color: var(--body); margin: 0; min-height: 2.7em;
  padding-top: 6px; text-wrap: pretty;
}
.states__did { border-inline-start: 1px solid var(--hair); padding-inline-start: clamp(20px, 2.5vw, 40px); }

@media (max-width: 900px) {
  .states__rail { grid-template-columns: repeat(2, 1fr); row-gap: 4px; }
  .states__did { border-inline-start: 0; padding-inline-start: 0; padding-top: 22px; }
  .states__quote, .states__what { min-height: 0; }
}
@media (max-width: 560px) { .states__rail { grid-template-columns: 1fr; } }

/* ── process chapter: a numbered sequence on a shared rail ───────────────
   Large numerals + one continuous line carry the progression, so this
   reads as a process — not as three more cards. */
.steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.steps::before {                       /* the shared rail */
  content: ""; position: absolute; inset-inline: 0; top: 27px; height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.step { position: relative; padding-top: 68px; }
.step__n {
  position: absolute; top: 0; inset-inline-start: 0;
  font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -0.05em; color: var(--acc);
  font-variant-numeric: tabular-nums;
  background: var(--ground-tint);      /* punch a gap in the rail */
  padding-inline-end: 16px;
}
.step h3 { font-size: 22px; margin-bottom: var(--gap-title-desc); }
.step p  { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--body); text-wrap: pretty; }

@media (max-width: 860px) {
  /* vertical timeline on mobile */
  .steps::before { display: none; }
  .step { padding-top: 0; padding-inline-start: 70px; min-height: 56px; }
  .step__n { font-size: 38px; padding-inline-end: 0; background: none; }
}

/* --- integrations: an understated architecture ---------------------------
   No tiles, no boxes. A hub, a hairline spine, and three branches naming
   where Silence sits in the business workflow. Marks stay; chrome goes. */
.int { align-items: start; }
.int__h {
  font-size: clamp(21px, 2.1vw, 28px); line-height: 1.15;
  letter-spacing: -0.03em; margin-bottom: 14px; text-wrap: balance;
}
.int__note { max-width: 34ch; }

.int__map { position: relative; padding-inline-start: 22px; }
.int__map::before {                       /* the spine */
  content: ""; position: absolute; inset-inline-start: 3px; top: 8px; bottom: 18px;
  width: 1px; background: var(--hair);
}
.int__hub {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.int__hub-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  margin-inline-start: -22px;
  box-shadow: 0 0 0 4px var(--ground-soft);
}
.int__branch { display: flex; align-items: baseline; gap: 20px; padding: 13px 0; }
.int__branch + .int__branch { border-top: 1px solid var(--hair); }
.int__branch-l {
  flex: 0 0 108px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted);
}
.int__tools {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.int__tool {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--body-2);
}
.int__tool .integ__icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  display: flex; align-items: center; justify-content: center;
}
.int__tool .integ__icon svg { width: 100%; height: 100%; display: block; }
.int__tool .integ__icon--mono {
  font-size: 11px; font-weight: 800; line-height: 1; color: #4E4E48;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 4px;
}

@media (max-width: 900px) {
  .int__map { margin-top: 30px; }
  .int__branch { flex-direction: column; gap: 10px; }
  .int__branch-l { flex: none; }
}

/* --- industries: a list and one scenario ---------------------------------
   Six businesses as a plain typographic list; selecting one rewrites a
   single large scenario beside it. One composition instead of six cards. */
.ind__head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.ind { align-items: start; }

.ind__list { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.ind__item {
  appearance: none; background: transparent; border: 0;
  border-bottom: 1px solid var(--hair);
  text-align: right; cursor: pointer;
  padding: 15px 0; padding-inline-end: 14px;
  font: inherit; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500;
  letter-spacing: -0.02em; color: var(--muted);
  box-shadow: inset -2px 0 0 0 transparent;
  transition: color .2s ease, box-shadow .2s ease, font-weight .2s ease;
}
.ind__item:hover { color: var(--ink); }
.ind__item.is-on {
  color: var(--ink); font-weight: 800;
  box-shadow: inset -2px 0 0 0 var(--acc);
  padding-inline-end: 18px;
}
.ind__item:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

.ind__stage { padding-inline-start: clamp(0px, 3vw, 44px); }
.ind__cap {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--muted); margin-bottom: 12px;
}
.ind__call { margin-bottom: clamp(26px, 3vw, 40px); }
.ind__quote {
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; line-height: 1.3;
  letter-spacing: -0.03em; color: var(--ink); margin: 0; text-wrap: balance;
  max-width: 22ch;
}
.ind__quote::before { content: "\201D"; color: var(--acc); margin-inline-end: 2px; }

.ind__reads { padding-block: 20px; border-top: 1px solid var(--hair); }
.ind__intent {
  font-size: var(--text-lead); line-height: 1.45; color: var(--body);
  margin: 0; font-weight: 500;
}
.ind__done { padding-top: 20px; border-top: 1px solid var(--hair); }
.ind__acts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
}
.ind__act {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-body); line-height: 1.45; color: var(--body);
  opacity: 0; transform: translateY(4px);
}
.ind__acts.is-in .ind__act {
  animation: indIn .38s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes indIn { to { opacity: 1; transform: none; } }
.ind__act-dot {
  width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px;
  border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ind__act-dot svg { width: 9px; height: 9px; }

@media (max-width: 900px) {
  .ind__stage { padding-inline-start: 0; margin-top: 28px; }
  .ind__list { flex-direction: row; flex-wrap: wrap; border-top: 0; gap: 6px; }
  .ind__item {
    border-bottom: 0; box-shadow: none; padding: 8px 14px;
    border: 1px solid var(--hair); border-radius: var(--r-md); font-size: 15px;
  }
  .ind__item.is-on { box-shadow: none; border-color: var(--acc); color: var(--acc); padding-inline-end: 14px; }
  .ind__acts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ind__act { opacity: 1; transform: none; }
  .ind__acts.is-in .ind__act { animation: none; }
}

/* --- before / after: split screen ----------------------------------------
   A dark full-bleed chapter with two flows meeting at a seam. No cards —
   the contrast between the halves is the whole point. */
.ba-sect__title {
  max-width: 18ch;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.ba {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--dark-line-2);
}
.ba__side { padding: clamp(28px, 3.4vw, 52px) 0; }
.ba__side--without { padding-inline-end: clamp(28px, 3.4vw, 52px); }
.ba__side--with {
  padding-inline-start: clamp(28px, 3.4vw, 52px);
  border-inline-start: 1px solid var(--dark-line-2);   /* the seam */
}
.ba__label {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: #9C9C95; margin-bottom: 28px;   /* legible on near-black */
}
.ba__label--acc { color: var(--mint); }
.ba__rows { display: flex; flex-direction: column; }

/* left flow — stalls out */
.ba__row {
  padding: 16px 0; border-top: 1px solid var(--dark-line);
  font-size: var(--text-body); line-height: var(--text-body-lh);
  font-weight: 500; color: #8E8E88;
}
.ba__row:first-child { border-top: 0; }
.ba__row--dead { color: #85857F; text-decoration: line-through; text-decoration-thickness: 1px; }

/* right flow — completes */
.ba__step {
  display: flex; align-items: center; gap: 13px; padding: 16px 0;
  border-top: 1px solid var(--dark-line);
  font-size: var(--text-body); line-height: var(--text-body-lh);
  font-weight: 400; color: var(--dark-dim); transition: all .4s ease;
}
.ba__step:first-child { border-top: 0; }
.ba__step.is-on { border-top-color: var(--dark-line-2); font-weight: 600; color: var(--bg); }
.ba__step .dot { color: #0B1F14; border-color: var(--dark-line-2); transition: all .4s ease; }
.ba__step.is-on .dot { background: var(--mint); border-color: var(--mint); }
.ba__step .dot svg { opacity: 0; }
.ba__step.is-on .dot svg { opacity: 1; }

@media (max-width: 720px) {
  .ba { grid-template-columns: 1fr; }
  .ba__side--without { padding-inline-end: 0; }
  .ba__side--with {
    padding-inline-start: 0; border-inline-start: 0;
    border-top: 1px solid var(--dark-line-2);
  }
}

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; background: transparent; border: 0; cursor: pointer; padding: 26px 4px;
  font-size: clamp(18px, 2vw, 23px); font-weight: 700; letter-spacing: -0.025em;
  color: var(--ink); text-align: right;
}
.faq__q svg { color: var(--muted); transition: transform .25s ease; }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { display: none; padding: 0 4px; }
.faq__a.is-open { display: block; }
.faq__a p {
  font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--body);
  max-width: min(100%, var(--measure)); padding-bottom: 26px; text-wrap: pretty;
}

/* --- closing CTA + form -------------------------------------------------- */

.cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(36px, 5vw, 72px); align-items: start; }
.cta h2 { font-size: clamp(32px, 4.4vw, 60px); margin-bottom: var(--gap-head-copy); }
.cta__lede { font-size: var(--text-lead); line-height: var(--text-lead-lh); font-weight: 400;
             color: var(--body); max-width: min(100%, var(--measure));
             margin-bottom: var(--gap-copy-next); text-wrap: balance; }
.cta__list { border-top: 1px solid var(--line); }
.cta__li {
  display: flex; gap: 12px; align-items: center; padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-body); line-height: var(--text-body-lh);
}

/* ── final CTA: brand ground, inverted type, form stays a light surface ── */
.sect--brand .cta h2 { color: #fff; }
.sect--brand .cta__lede { color: #C9C6F7; }
.cta__list--invert { border-top-color: rgba(255,255,255,.22); }
.cta__list--invert .cta__li { border-bottom-color: rgba(255,255,255,.14); color: #EDECFC; }
.cta__list--invert .cta__li svg { stroke: var(--mint); }
/* the form is a light surface inside a dark chapter — reset the inherited
   white text, or its headings vanish against the card. */
.sect--brand .form {
  background: var(--ground-white); border-color: transparent;
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.sect--brand .form h3, .sect--brand .thanks h3 { color: var(--ink); }

.form {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: clamp(24px, 3vw, 36px);
}
.form h3 { font-size: 24px; margin-bottom: var(--gap-title-desc); }
.form__sub { font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--muted); margin-bottom: 28px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field > label {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted);
}
.form__field--wide { grid-column: 1 / -1; }
.form__field input,
.form__field select {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 12px 14px;
  font-size: 15.5px; background: #fff; color: var(--ink);
}
.form__submit {
  margin-top: 24px; width: 100%; background: var(--acc); color: #fff;
  border: 1px solid var(--acc); border-radius: 11px; padding: 15px;
  font-size: 17px; font-weight: 600; cursor: pointer; transition: background .18s ease;
}
.form__submit:hover { background: var(--acc-dark); }
.form__fine { text-align: center; font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--faint); margin-top: 14px; }

.thanks { padding: 48px 8px; text-align: center; }
.thanks__mark {
  width: 48px; height: 48px; border: 1px solid var(--green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; color: var(--green);
}
.thanks h3 { font-size: 26px; margin-bottom: var(--gap-title-desc); }
.thanks p  { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--body); }
[hidden] { display: none !important; }

/* --- footer -------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--line); background: var(--bg-alt); }
.ftr__inner { max-width: var(--shell); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; }
.ftr__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 36px; margin-bottom: 56px;
}
.ftr__brand { grid-column: span 2; }
.ftr__brand .brand { margin-bottom: 14px; }
.ftr__brand p { font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--muted); max-width: 30ch; }
.ftr__h { font-size: 11.5px; font-weight: 700; letter-spacing: .15em; color: var(--faint); margin-bottom: 18px; }
.ftr__links { display: flex; flex-direction: column; gap: 11px; }
.ftr__links a { font-size: 15px; color: var(--body-2); }
.ftr__base {
  border-top: 1px solid var(--line); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}
.ftr__base p { font-size: var(--text-meta); line-height: var(--text-meta-lh); color: var(--faint); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --measure: 100%;        /* copy already sits in a single narrow column */
    --gap-head-copy: 20px;
    --gap-copy-next: 28px;
  }
  .stat, .stat + .stat, .stat:last-child {
    padding-inline: 0; border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  .stats > .stat:first-child { border-top: 0; }
  .panel__col--side, .demo__side { border-inline-start: 0; border-top: 1px solid var(--line-soft); }
  .ftr__brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* JS stops the rotation; make sure the visible item sits square and sharp */
  .hero__rot-item.is-active { transform: none; filter: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ── document pages (accessibility statement, legal) ───────────────────── */
.doc { max-width: 760px; margin-inline: auto; }
.doc__h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 26px; }
.doc__lead {
  font-size: var(--text-lead); line-height: var(--text-lead-lh);
  color: var(--body); margin-bottom: 40px; text-wrap: pretty;
}
.doc h2 {
  font-size: 21px; margin: 38px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--hair);
}
.doc p { font-size: var(--text-body); line-height: 1.7; color: var(--body); margin-bottom: 12px; }
.doc__list { margin: 0 0 12px; padding-inline-start: 20px; }
.doc__list li {
  font-size: var(--text-body); line-height: 1.7; color: var(--body); margin-bottom: 8px;
}
.doc a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--ink); }
.doc__back { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair); }