/* ==========================================================================
   Sentavo page. Loaded after styles.css on sentavo.html only.

   Sentavo is Halvyn's second product and takes its own accent: teal, on a
   page that opens as a dark monitoring console. Halvyn and Planvio stay
   violet. Everything here is scoped to body.sv (set on sentavo.html), so
   nothing leaks into the other pages, and the shared sheet's layout, type,
   radius rules and motion hooks still apply underneath.

   Sections, in page order:
     1. Palette override (tokens, then the hard-coded violet tints)
     2. Header and footer on ink
     3. Type accents (signal-label eyebrows, tabular figures)
     4. Hero console: gauge, stats, signal feed
     5. Signal-group strip, proof row, marquee
     6. The register, product tour (vertical rail), tour steps
     7. Modules index, reader band on ink
     8. Timeline, audiences, comparison table, pricing, FAQ, demo
     9. App mock: light chrome, Sentavo screen parts
    10. Motion (all under prefers-reduced-motion: no-preference)
   ========================================================================== */

/* ---------- 1. palette ---------- */

body.sv {
  --accent:      #0F766E;
  --accent-deep: #0B5C56;
  --accent-wash: #E6F4F2;
  --accent-line: #CDE7E3;

  --ink:         #0E1F1D;
  --ink-2:       #14302C;
  --ink-line:    rgba(255, 255, 255, .10);
  --on-ink:      #E7F1EF;
  --on-ink-mute: #9DB8B3;
  --accent-on-ink: #7FD1C5;   /* teal that reads on ink; the accent itself is too dark there */

  /* Neutrals lose their plum cast and take a faint green-grey one. */
  --paper:     #F8FBFA;
  --surface:   #FFFFFF;
  --surface-2: #F1F6F5;
  --surface-3: #E4ECEA;
  --line:      #DCE6E3;
  --line-soft: #E9F0EE;
  --text:      #10201E;
  --text-mid:  #34504B;
  --text-mute: #5B716D;

  --shadow-sm: 0 1px 2px rgba(14, 31, 29, .05);
  --shadow:    0 6px 20px rgba(14, 31, 29, .08);
  --shadow-lg: 0 18px 46px rgba(14, 31, 29, .12);
}

/* Hard-coded violet tints in styles.css, retinted. */
body.sv .btn--ghost:hover { border-color: #C9DAD6; }
body.sv .tile__icon { border-color: var(--accent-line); }
body.sv .plan--feature { border-color: var(--accent-line); }
body.sv .plan__chip { border-color: var(--accent-line); }
body.sv .plan__chip--quiet { border-color: var(--line); }
body.sv .chip { border-color: var(--accent-line); }
body.sv .form__status.is-ok { border-color: var(--accent-line); }
body.sv .field input, body.sv .field select, body.sv .field textarea { border-color: #CBDAD6; }
body.sv .field input::placeholder, body.sv .field textarea::placeholder { color: #7A908C; }
body.sv .field input:focus, body.sv .field select:focus, body.sv .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .18);
}
body.sv .tour__tab:focus-visible { outline-color: rgba(15, 118, 110, .4); }

/* ---------- 2. header and footer on ink ---------- */

body.sv .header {
  background: rgba(14, 31, 29, .88);
  border-bottom-color: var(--ink-line);
}
body.sv .header.is-scrolled {
  background: rgba(14, 31, 29, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
body.sv .logo { color: var(--on-ink); }
body.sv .nav a { color: var(--on-ink-mute); }
body.sv .nav a:hover { color: #FFFFFF; }
body.sv .nav a::after { background: var(--accent-on-ink); }
body.sv .nav-toggle {
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .16);
  color: var(--on-ink);
}
@media (max-width: 900px) {
  body.sv .nav { background: var(--ink); border-bottom-color: var(--ink-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
  body.sv .nav a { border-top-color: rgba(255, 255, 255, .08); }
}
body.sv .header .btn--primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
/* "Ask for early access" is longer than Planvio's header button; on a
   narrow phone it and the wordmark have to share 327px with the menu. */
@media (max-width: 430px) {
  body.sv .logo { font-size: 19px; gap: 8px; }
  body.sv .logo img { width: 26px; height: 26px; }
  body.sv .header .btn { padding: 8px 10px; font-size: 12.5px; }
  body.sv .header__inner { gap: 12px; }
}

body.sv .footer {
  background: var(--ink);
  border-top-color: var(--ink-line);
  color: var(--on-ink-mute);
}
body.sv .footer .logo { color: var(--on-ink); }
body.sv .footer h4 { color: var(--on-ink-mute); }
body.sv .footer a { color: var(--on-ink-mute); }
body.sv .footer a:hover { color: #FFFFFF; }
body.sv .footer .body-mute { color: var(--on-ink-mute); }
body.sv .footer .body-mute a { color: var(--accent-on-ink) !important; }
body.sv .footer__bottom { border-top-color: var(--ink-line); color: var(--on-ink-mute); }

/* ---------- 3. type accents ---------- */

/* Section eyebrows read as signal labels: a leading dot, mono, teal. */
body.sv .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
body.sv .eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Every figure in a score context lines up. */
body.sv .num,
body.sv .mock__num, body.sv .mock__v, body.sv .sv-score, body.sv .sv-trend,
body.sv .sv-feed__score, body.sv .sv-gauge__val, body.sv .sv-console__stats dd,
body.sv .stat b { font-variant-numeric: tabular-nums; }

/* ---------- 4. hero console ---------- */

.sv-hero {
  background:
    radial-gradient(60% 70% at 82% 10%, rgba(15, 118, 110, .42), transparent 62%),
    radial-gradient(45% 50% at 6% 100%, rgba(15, 118, 110, .22), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--ink);
  color: var(--on-ink);
  /* Room for the signal cards that overlap the bottom edge. */
  padding-bottom: 54px;
}
.sv-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.sv-hero .eyebrow { color: var(--accent-on-ink); margin-bottom: 22px; }
.sv-hero h1 { color: #FFFFFF; max-width: 12ch; }
.sv-hero .lede { color: var(--on-ink-mute); max-width: 48ch; }
.sv-hero .sv-hero-note { color: var(--on-ink-mute); opacity: .85; }
.sv-hero .btn--ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--on-ink);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}
.sv-hero .btn--ghost:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); }
.sv-hero .btn--primary { box-shadow: 0 8px 28px rgba(15, 118, 110, .35); }

/* The console panel. */
.sv-console {
  background: rgba(20, 48, 44, .72);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-media);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  overflow: hidden;
  min-width: 0;
}
.sv-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--on-ink-mute);
  min-width: 0;
}
.sv-console__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-on-ink);
  box-shadow: 0 0 0 4px rgba(127, 209, 197, .18);
  flex: none;
}
.sv-console__title { color: var(--on-ink); font-weight: 500; }
.sv-console__co { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sv-console__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--accent-on-ink);
  flex: none;
}
.sv-console__live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sv-console__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--ink-line);
  align-items: center;
}
.sv-gauge {
  position: relative;
  display: grid;
  grid-template-columns: 86px auto;
  align-items: center;
  gap: 12px;
}
.sv-gauge svg { width: 86px; height: 86px; display: block; }
.sv-gauge__track { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 7; }
.sv-gauge__fill {
  fill: none;
  stroke: #E9A23B;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 251.3;
  stroke-dashoffset: var(--gauge-to, 0);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.sv-gauge__val {
  position: absolute;
  left: 0;
  width: 86px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #FFFFFF;
}
.sv-gauge__lbl { font-size: 12.5px; font-weight: 600; color: var(--on-ink); line-height: 1.35; }
.sv-gauge__lbl em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--on-ink-mute); margin-top: 3px; }

.sv-console__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sv-console__stats > div {
  background: rgba(14, 31, 29, .55);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  padding: 9px 11px 8px;
  min-width: 0;
}
.sv-console__stats dt { font-size: 10.5px; color: var(--on-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-console__stats dd { margin: 3px 0 0; font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: #FFFFFF; line-height: 1.1; }
.sv-console__stats dd.r { color: #FF8A80; }
.sv-console__stats dd.a { color: #F5B95A; }
.sv-console__stats span { display: block; font-size: 10.5px; color: var(--on-ink-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The feed. Fixed height, rows of fixed height, so the loop never moves
   anything outside the panel. */
.sv-feed { height: 264px; overflow: hidden; position: relative; }
.sv-feed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(20, 48, 44, .9));
  pointer-events: none;
}
.sv-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .55s var(--ease);
  will-change: transform;
}
.sv-feed__row {
  height: 44px;
  display: grid;
  grid-template-columns: 44px 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  min-width: 0;
}
.sv-feed__t { font-family: var(--mono); font-size: 11px; color: var(--on-ink-mute); }
.sv-feed__g {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-on-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.sv-feed__g::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.sv-feed__g[data-g="sanctions"] { color: #FF8A80; }
.sv-feed__g[data-g="financial"] { color: #F5B95A; }
.sv-feed__g[data-g="operational"] { color: #9DB8B3; }
.sv-feed__g[data-g="compliance"] { color: #B7C8F5; }
.sv-feed__body {
  font-size: 12.5px;
  color: var(--on-ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sv-feed__body b { color: var(--on-ink); font-weight: 600; }
.sv-feed__score {
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.sv-feed__score s { text-decoration: none; color: var(--on-ink-mute); }
.sv-feed__score s::after { content: "\2192"; margin-left: 6px; opacity: .6; }
.sv-feed__score b {
  font-weight: 500;
  min-width: 30px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
}
.sv-feed__score b.r { color: #FFB4AD; border-color: rgba(220, 38, 38, .6); background: rgba(220, 38, 38, .18); }
.sv-feed__score b.a { color: #FFD48A; border-color: rgba(217, 119, 6, .6); background: rgba(217, 119, 6, .18); }
.sv-feed__score b.g { color: #A7ECBF; border-color: rgba(22, 163, 74, .6); background: rgba(22, 163, 74, .18); }

.sv-console__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-ink-mute);
}

@media (max-width: 940px) {
  .sv-hero__inner { grid-template-columns: 1fr; }
  .sv-hero h1 { max-width: 100%; }
}
@media (max-width: 560px) {
  .sv-console__top { grid-template-columns: 1fr; gap: 14px; }
  .sv-console__co { display: none; }
  .sv-feed__row { grid-template-columns: 40px 12px minmax(0, 1fr) auto; gap: 8px; padding: 0 12px; }
  .sv-feed__g { font-size: 0; gap: 0; }
  .sv-feed__g::before { width: 6px; height: 6px; }
  .sv-feed__score s { display: none; }
  .sv-console__foot { flex-direction: column; gap: 4px; }
}

/* ---------- 5. signal-group strip, proof row, marquee ---------- */

.sv-signals {
  list-style: none;
  margin: -54px 0 0;
  padding: 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.sv-signal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-card);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
.sv-signal:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sv-signal svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 6px; }
.sv-signal b { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.sv-signal span { font-size: 13px; line-height: 1.5; color: var(--text-mute); }

@media (max-width: 900px) {
  .sv-signals {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 10px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .sv-signal { flex: 0 0 228px; scroll-snap-align: start; }
}

/* The four claims under the strip: a quiet row, each with an outlined icon. */
.sv-proof {
  align-items: flex-start;
  gap: 22px 28px;
  padding-block: 40px 30px;
  border-bottom: 1px solid var(--line-soft);
}
.sv-proof .proof__item {
  flex: 1 1 220px;
  align-items: flex-start;
  gap: 12px;
}
.sv-proof .proof__item svg {
  width: 32px; height: 32px;
  padding: 6px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-btn);
  background: var(--accent-wash);
  margin-top: 0;
}
.sv-proof .proof__item b { display: block; font-weight: 700; }
.sv-proof .proof__item small {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-mute);
}
body.sv .marquee { border-top: 0; border-bottom: 1px solid var(--line-soft); }

/* Small line under the hero buttons: early-access status and where it runs. */
.sv-hero-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-mute);
}

/* ---------- 6. the register, product tour ---------- */

.sv-shot { margin: 30px 0 0; }
.sv-shot figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-mute);
}

/* Vertical tour: the module list is a rail on the left, the screens on the
   right. The tab and panel elements are the shared ones; only the layout
   is different here. */
body.sv .tour {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: 36px;
}
body.sv .tour__tabs {
  grid-column: 1;
  grid-row: 1 / span 9;
  position: sticky;
  top: 92px;
  align-self: start;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 4px 0 4px 26px;
  counter-reset: module;
}
body.sv .tour__tabs::before,
body.sv .tour__tabs::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
body.sv .tour__tabs::after {
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--sv-progress, 0));
  transition: transform .5s var(--ease);
}
body.sv .tour__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-mute);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  counter-increment: module;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
body.sv .tour__tab::after {
  content: counter(module, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .7;
}
/* The dot on the rail. */
body.sv .tour__tab::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  box-sizing: border-box;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  z-index: 1;
}
body.sv .tour__tab:hover { background: var(--surface-2); color: var(--text); }
body.sv .tour__tab:has(~ .tour__tab[aria-selected="true"])::before { border-color: var(--accent); }
body.sv .tour__tab[aria-selected="true"] {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}
body.sv .tour__tab[aria-selected="true"]::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .18);
}
body.sv .tour__tab[aria-selected="true"]::after { opacity: 1; }
body.sv .tour__panel { grid-column: 2; grid-row: 1; min-width: 0; }

@media (max-width: 900px) {
  body.sv .tour { grid-template-columns: 1fr; gap: 20px; }
  body.sv .tour__tabs {
    grid-column: 1;
    grid-row: 1;
    top: 68px;
    z-index: 5;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 10px 0;
    margin: 0 -24px;
    padding-inline: 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    scrollbar-width: none;
  }
  body.sv .tour__tabs::-webkit-scrollbar { display: none; }
  body.sv .tour__tabs::before, body.sv .tour__tabs::after, body.sv .tour__tab::before { display: none; }
  body.sv .tour__tab { width: auto; flex: none; padding: 8px 13px; border-radius: var(--r-pill); border-color: var(--line); background: var(--surface); }
  body.sv .tour__tab::after { display: none; }
  body.sv .tour__panel { grid-column: 1; grid-row: 2; }
}

/* Steps inside a panel: the words as a band across the top, the screen
   full width beneath it. */
body.sv .proc { gap: 44px; }
body.sv .proc__step { grid-template-columns: 1fr; gap: 18px; }
body.sv .proc__step > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-areas: "head body" "where body";
  gap: 8px 32px;
  align-items: start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
body.sv .proc__head { grid-area: head; align-items: flex-start; }
body.sv .proc__step p { grid-area: body; margin: 0; }
body.sv .proc__where { grid-area: where; justify-self: start; margin-top: 4px; border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-wash); }
body.sv .proc__n {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  padding: 0;
  flex: none;
}
body.sv .proc__step h4 { padding-top: 2px; }
body.sv .proc__shot .mock { font-size: 10.5px; }
@media (max-width: 720px) {
  body.sv .proc__step > div:first-child { grid-template-columns: 1fr; grid-template-areas: "head" "body" "where"; }
  body.sv .proc__shot .mock { font-size: 9px; }
}

/* ---------- 7. modules index, reader band ---------- */

.sv-modules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 20px;
  margin-top: 48px;
  align-items: start;
}
.sv-modules__lead {
  position: sticky;
  top: 92px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-wash), transparent 62%),
    var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-card);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-sm);
}
.sv-modules__lead h3 { font-size: 1.5rem; }
.sv-modules__lead > p { margin-top: 12px; color: var(--text-mute); font-size: 15px; line-height: 1.6; }
.sv-modules__lead .tile__stats { margin-top: 22px; }

.sv-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sv-index__item {
  display: grid;
  grid-template-columns: 34px 38px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 22px;
  border-top: 1px solid var(--line-soft);
  transition: background .18s var(--ease);
}
.sv-index__item:first-child { border-top: 0; }
.sv-index__item:hover { background: var(--surface-2); }
.sv-index__n { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 10px; }
.sv-index__item .tile__icon { margin: 0; }
.sv-index__item h3 { font-size: 1.05rem; }
.sv-index__item p { margin-top: 4px; color: var(--text-mute); font-size: 14.5px; line-height: 1.55; }
.sv-index__item.is-reader { background: var(--accent-wash); }
.sv-index__item.is-reader .tile__icon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sv-index__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
}
.sv-index__link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .sv-modules { grid-template-columns: 1fr; }
  .sv-modules__lead { position: static; }
}
@media (max-width: 480px) {
  .sv-index__item { grid-template-columns: 30px minmax(0, 1fr); padding: 16px 18px; }
  .sv-index__item .tile__icon { display: none; }
}

/* The band on ink. */
.sv-band {
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(15, 118, 110, .35), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--ink);
  color: var(--on-ink);
  padding-block: clamp(64px, 8vw, 104px);
}
/* Words across the top (title left, lede and rules right), then the
   document and the fields side by side at full width. */
.sv-band__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.sv-band .eyebrow { color: var(--accent-on-ink); }
.sv-band h2 { color: #FFFFFF; }
.sv-band__lede { color: var(--on-ink-mute); font-size: 15.5px; max-width: 58ch; }
.sv-band__rules { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px 24px; justify-content: start; }
.sv-band__rules li {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv-band__rules li::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-on-ink);
  background: linear-gradient(-45deg, transparent 44%, var(--accent-on-ink) 44% 56%, transparent 56%);
  flex: none;
}

.sv-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: start;
}
.sv-band__doc {
  background: #FFFFFF;
  color: var(--text-mid);
  border-radius: 12px;
  padding: 18px 20px 20px;
  font-size: 12.5px;
  line-height: 1.65;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  position: relative;
}
.sv-band__doctop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.sv-band__doc h6 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.sv-band__doc p { margin: 0 0 8px; }
.sv-band__doc b { color: var(--text); }
.sv-band__doc mark { background: var(--accent-wash); color: inherit; padding: 0 3px; border-radius: 3px; box-shadow: 0 0 0 1px var(--accent-line); }
.sv-band__doc mark.on { background: #FCEFC7; box-shadow: 0 0 0 1px #E9B95C; }

.sv-band__fields {
  background: rgba(20, 48, 44, .72);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  overflow: hidden;
}
.sv-band__fh {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.sv-band__fh b { font-size: 13px; font-weight: 700; }
.sv-band__fh span { font-family: var(--mono); font-size: 10.5px; color: var(--on-ink-mute); }
.sv-band__field {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 46px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 12.5px;
}
.sv-band__field .k { font-weight: 600; color: var(--on-ink); }
.sv-band__field .v { color: var(--on-ink-mute); }
.sv-band__field .pg {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent-on-ink);
  border: 1px solid rgba(127, 209, 197, .4);
  border-radius: 999px;
  padding: 1px 7px;
  text-align: center;
  white-space: nowrap;
}
.sv-band__field .pg--none { color: var(--on-ink-mute); border-color: transparent; }
.sv-band__field .act { display: flex; gap: 4px; justify-self: end; }
.sv-band__field .act i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--on-ink);
  white-space: nowrap;
}
.sv-band__field .act i.p { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.sv-band__field .act i.ok { background: rgba(22, 163, 74, .18); border-color: rgba(22, 163, 74, .55); color: #A7ECBF; }
.sv-band__finding {
  margin: 12px 16px 16px;
  border: 1px solid rgba(217, 119, 6, .5);
  background: rgba(217, 119, 6, .12);
  border-radius: 8px;
  padding: 10px 12px;
}
.sv-band__finding b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #F5B95A; margin-bottom: 4px; }
.sv-band__finding p { font-size: 12.5px; line-height: 1.5; color: var(--on-ink); }

@media (max-width: 880px) {
  .sv-band__grid { grid-template-columns: 1fr; }
  .sv-band__head { grid-template-columns: 1fr; align-items: start; }
  .sv-band__rules { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sv-band__field { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k pg" "v act"; gap: 4px 10px; }
  .sv-band__field .k { grid-area: k; } .sv-band__field .v { grid-area: v; }
  .sv-band__field .pg { grid-area: pg; justify-self: end; } .sv-band__field .act { grid-area: act; }
}

/* ---------- 8. timeline, audiences, comparison table, pricing, faq, demo ---------- */

.sv-timeline {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
/* The track, then the teal line drawn over it (see Motion). */
.sv-timeline::before,
.sv-timeline::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  top: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}
.sv-timeline::after { background: var(--accent); transform-origin: left; }
.sv-tl { position: relative; padding-top: 52px; }
.sv-tl__n {
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 12px;
  box-shadow: 0 0 0 6px var(--paper);
  z-index: 1;
}
.sv-tl h3 { font-size: 1.05rem; margin-bottom: 8px; }
.sv-tl p { color: var(--text-mute); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 720px) {
  .sv-timeline { grid-template-columns: 1fr; gap: 26px; }
  .sv-timeline::before, .sv-timeline::after { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
  .sv-timeline::after { transform-origin: top; }
  .sv-tl { padding: 4px 0 0 54px; }
}

/* Audience cards: the mock sits on a wash. */
body.sv .aud { border-radius: var(--r-card); }
body.sv .aud__media { background: linear-gradient(180deg, var(--accent-wash), transparent); }

/* Comparison table. */
.sv-compare {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sv-table th {
  text-align: left;
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-mute);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.sv-table th:nth-child(2) { color: var(--accent-deep); background: var(--accent-wash); }
.sv-table th + th, .sv-table td + td { border-left: 1px solid var(--line-soft); }
.sv-table td {
  vertical-align: top;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mute);
  border-top: 1px solid var(--line-soft);
}
.sv-table tbody tr:first-child td { border-top: 0; }
.sv-table td:nth-child(2) { color: var(--text); background: rgba(230, 244, 242, .35); }
.sv-table td:nth-child(3) { color: var(--text-mid); }
.sv-table td strong { color: var(--text); font-weight: 600; }
.sv-table tr:hover td { background: var(--surface-2); }
.sv-table tr:hover td:nth-child(2) { background: var(--accent-wash); }
@media (max-width: 720px) {
  .sv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sv-table, .sv-table tbody, .sv-table tr, .sv-table td { display: block; }
  .sv-table tr { border-top: 1px solid var(--line); padding: 6px 0 10px; }
  .sv-table tbody tr:first-child { border-top: 0; }
  .sv-table td, .sv-table td + td { border: 0; padding: 10px 18px 6px; }
  .sv-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .sv-table td:nth-child(2), .sv-table tr:hover td, .sv-table tr:hover td:nth-child(2) { background: none; }
}

/* Pricing: a teal top edge, a labelled header row, the price on a shelf. */
body.sv .plan {
  border-top: 3px solid var(--line);
  border-radius: var(--r-card);
  padding-top: 26px;
}
body.sv .plan--feature { border-top-color: var(--accent); background: var(--surface); }
.sv-plan__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.sv-plan__n {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
body.sv .plan--feature .sv-plan__n { color: var(--accent); }
body.sv .plan__chip { margin-bottom: 0; }
body.sv .plan__price {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 1.45rem;
}
body.sv .plan--feature .plan__price { background: var(--accent-wash); border-color: var(--accent-line); }
body.sv .plan__price small { display: block; margin-top: 4px; }

/* The stats block says its numbers are targets. */
.sv-stat-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-mute);
}

/* Honesty line under the two editions. */
.sv-honesty {
  margin-top: 22px;
  max-width: 72ch;
  font-size: 14.5px;
  color: var(--text-mute);
}

/* FAQ in two columns. */
body.sv .faq {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
body.sv .faq summary { font-size: 1rem; }
body.sv .faq summary::after { border-color: var(--accent); }
@media (max-width: 880px) { body.sv .faq { grid-template-columns: 1fr; } }

/* Demo panel: the tinted corner goes teal via the token; the panel takes the
   same top edge as the plans. */
body.sv .demo { border-top: 3px solid var(--accent); border-radius: var(--r-card); }

/* ---------- 9. app mock: light chrome ----------
   The shared mock draws a dark plum rail down the left. Sentavo's windows
   use a light strip across the top instead: a teal dot, the product name,
   then the modules as tabs. The rail element is kept and re-laid; the
   screen underneath is unchanged. */

body.sv .mock {
  --m-rail: #F4F9F8;
  --m-rail-hi: #E6F4F2;
  --m-rail-tx: #4F6663;
  --m-rail-on: #0B5C56;
  --m-line: #DCE6E3;
  --m-line-2: #EDF3F1;
  --m-tx: #0E1F1D;
  --m-mute: #5F7572;
  --m-accent: #0F766E;

  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border-color: var(--accent-line);
  border-radius: var(--r-card);
}
body.sv .mock__rail {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--m-line);
  background: var(--m-rail);
}
body.sv .mock__brand {
  padding: 0 10px 0 0;
  margin: 0;
  height: 100%;
  border-bottom: 0;
  border-right: 1px solid var(--m-line);
  color: var(--m-tx);
  font-size: 12px;
}
body.sv .mock__brand::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--m-accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
  flex: none;
}
body.sv .mock__brand svg { display: none; }
body.sv .mock__nav {
  display: flex;
  gap: 2px;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  align-items: center;
}
body.sv .mock__nav i {
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9.5px;
  gap: 5px;
  color: var(--m-rail-tx);
}
body.sv .mock__nav i .mock__dot { display: none; }
body.sv .mock__nav i.on { background: var(--m-rail-hi); color: var(--m-rail-on); }
body.sv .mock__nav i.sub { display: none; }
body.sv .mock__main { grid-column: 1; }
body.sv .mock__tile { border-radius: 6px; }
body.sv .mock__panel { border-radius: 6px; }
body.sv .mock__col u.q2 { background: #3F9C93; }
body.sv .mock__col u.q3 { background: #7FC2BA; }
/* Narrow windows (a phone, or the half-width audience cards): labels stay
   only on the current module; the rest collapse to dots. */
@media (max-width: 860px) {
  body.sv .mock { grid-template-columns: minmax(0, 1fr); }
  body.sv .mock__nav i:not(.on) b { display: none; }
  body.sv .mock__nav i:not(.on) .mock__dot { display: block; border-radius: 50%; width: 5px; height: 5px; }
  body.sv .mock__nav i:not(.on) { padding: 0 4px; }
}
body.sv .aud__media .mock { grid-template-columns: minmax(0, 1fr); }
body.sv .aud__media .mock__nav i:not(.on) b { display: none; }
body.sv .aud__media .mock__nav i:not(.on) .mock__dot { display: block; border-radius: 50%; width: 5px; height: 5px; }
body.sv .aud__media .mock__nav i:not(.on) { padding: 0 4px; }
body.sv .aud__media .mock__bar { height: auto; min-height: 34px; padding-block: 6px; flex-wrap: wrap; }
body.sv .aud__media .mock__title, body.sv .aud__media .mock__eyebrow { white-space: nowrap; }
body.sv .aud__media .mock__sub { display: none; }

/* ---------- Sentavo screen parts (inside .mock) ---------- */

/* Score chip: 0 to 100, higher is better. Status colours only, inside mocks. */
.mock .sv-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
}
.mock .sv-score.g { border-color: #16A34A; color: #15803D; background: #EAF7F0; }
.mock .sv-score.a { border-color: #D97706; color: #B45309; background: #FEF6E7; }
.mock .sv-score.r { border-color: #DC2626; color: #B91C1C; background: #FEF2F2; }

/* Trend against 90 days ago. */
.mock .sv-trend { font-family: var(--mono); font-size: 9.5px; white-space: nowrap; }
.mock .sv-trend.d { color: #B91C1C; }
.mock .sv-trend.u { color: #15803D; }
.mock .sv-trend.s { color: var(--m-mute); }

/* Plain text cell in a table row (wraps, unlike .mock__nm). */
.mock .sv-cell { font-size: 9.5px; line-height: 1.4; color: var(--m-tx); }
.mock .sv-off { font-family: var(--mono); font-size: 8.5px; color: var(--m-mute); }

/* Where an answer came from: a quiet underlined link. */
.mock .sv-src {
  font-size: 9px;
  color: var(--m-accent);
  text-decoration: underline;
  text-decoration-color: rgba(15, 118, 110, .4);
  text-underline-offset: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock .sv-srcs { display: grid; gap: 4px; }
.mock .sv-srcs .sv-src { white-space: normal; }

/* Small in-app buttons. */
.mock .sv-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.mock .sv-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--m-line);
  background: #fff;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--m-tx);
  white-space: nowrap;
}
.mock .sv-btn.p { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }

/* Filter chips above a list. */
.mock .sv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mock .sv-filters__n { margin-left: auto; font-family: var(--mono); font-size: 8.5px; color: var(--m-mute); }

/* AI summary on an alert: tinted, labelled, one paragraph. */
.mock .sv-ai {
  background: #E6F4F2;
  border: 1px solid #CDE7E3;
  border-radius: 5px;
  padding: 8px 10px;
}
.mock .sv-ai b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.mock .sv-ai b svg { width: 10px; height: 10px; }
.mock .sv-ai p { font-size: 10px; line-height: 1.5; }

/* A labelled field on a record, with an optional action on the right. */
.mock .sv-field {
  border: 1px solid var(--m-line);
  border-radius: 5px;
  padding: 7px 10px;
  display: grid;
  gap: 3px;
}
.mock .sv-field b {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m-mute);
}
.mock .sv-field b span { letter-spacing: 0; text-transform: none; color: var(--m-accent); }
.mock .sv-field p { font-size: 10px; line-height: 1.5; }

/* Finding card under the extracted fields. */
.mock .sv-finding {
  border: 1px solid #F3C99A;
  background: #FEF6E7;
  border-radius: 5px;
  padding: 7px 10px;
}
.mock .sv-finding b { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B45309; margin-bottom: 3px; }
.mock .sv-finding p { font-size: 9.5px; line-height: 1.5; }

/* Close-alert strip. */
.mock .sv-close { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--m-line); border-radius: 5px; }
.mock .sv-close b { font-size: 9.5px; margin-right: 4px; }
.mock .sv-close__n { flex-basis: 100%; font-size: 8.5px; color: var(--m-mute); }

/* Evidence reader: the document page on the left, the fields on the right. */
.mock .sv-reader { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.mock .sv-doc {
  background: #F7FAF9;
  border: 1px solid var(--m-line);
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 8.5px;
  line-height: 1.6;
  color: #34504B;
}
.mock .sv-doc h6 { margin: 0 0 5px; font-size: 9.5px; font-weight: 700; color: var(--m-tx); }
.mock .sv-doc p { margin: 0 0 6px; }
.mock .sv-doc mark { background: #E6F4F2; color: inherit; padding: 0 2px; border-radius: 2px; }
.mock .sv-doc mark.on { background: #FCEFC7; box-shadow: 0 0 0 1px #E9B95C; }
.mock .sv-doc .pg { margin-top: 4px; text-align: right; font-family: var(--mono); font-size: 8px; color: var(--m-mute); }

/* Ask panel: question, sourced answer, question, sourced answer, input. */
.mock .sv-ask { display: grid; gap: 7px; max-width: 560px; }
.mock .sv-q {
  justify-self: end;
  max-width: 78%;
  padding: 6px 9px;
  border: 1px solid var(--m-line);
  border-radius: 8px 8px 2px 8px;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
}
.mock .sv-a {
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 8px 8px 8px 2px;
  background: #E6F4F2;
  display: grid;
  gap: 5px;
}
.mock .sv-a p { font-size: 10px; line-height: 1.5; }
.mock .sv-a .sv-src { white-space: normal; }
.mock .sv-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #CBDAD6;
  border-radius: 5px;
  font-size: 9.5px;
  color: var(--m-mute);
}
.mock .sv-input b { font-size: 8.5px; font-weight: 700; color: #fff; background: var(--m-accent); padding: 2px 8px; border-radius: 4px; }
.mock .sv-note { font-size: 8.5px; color: var(--m-mute); }

/* Signal groups: five cells, dashed where a group has no data. */
.mock .sv-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mock .sv-group { border: 1px solid var(--m-line); border-radius: 5px; padding: 6px 8px; min-width: 0; }
.mock .sv-group b { display: block; font-size: 9px; font-weight: 700; }
.mock .sv-group span { display: block; margin-top: 2px; font-size: 8.5px; line-height: 1.4; color: var(--m-mute); }
.mock .sv-group.none { border-style: dashed; background: #F7FAF9; }
.mock .sv-group.none b { color: var(--m-mute); }
@media (max-width: 860px) { .mock .sv-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Three narrow panels side by side (concentration by tier, owner, category). */
.mock .sv-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .mock .sv-three { grid-template-columns: 1fr; } }

/* Ninety-day axis in the expiry calendar: the bar runs from today. */
.mock .sv-cal .mock__gbar { background: var(--m-accent); }

/* Score history sparkline. */
.mock .sv-spark svg { display: block; width: 100%; height: auto; }
.mock .sv-spark .ar { fill: rgba(15, 118, 110, .10); }
.mock .sv-spark .ln { fill: none; stroke: var(--m-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock .sv-spark .ln.r { stroke: #DC2626; }
.mock .sv-spark .pt { fill: #fff; stroke: var(--m-accent); stroke-width: 1.5; }
.mock .sv-spark .pt.r { stroke: #DC2626; fill: #DC2626; }
.mock .sv-spark text { font-family: var(--mono); font-size: 8px; fill: var(--m-mute); }
.mock .sv-spark text.v { font-size: 8.5px; fill: var(--m-tx); }
.mock .sv-spark text.v.r { fill: #B91C1C; font-weight: 500; }
.mock .sv-spark text.ev { font-family: var(--font); font-size: 7.5px; fill: #B91C1C; }

/* ---------- 10. motion ----------
   Same rules as styles.css: transform, opacity and stroke-dashoffset only;
   all of it inside prefers-reduced-motion: no-preference; pre-states gated
   on html.js so nothing is hidden without JavaScript. The shared hooks
   (html.is-loaded, .reveal.is-in, .reveal-stagger.is-in, .mock.is-in)
   drive everything here. */

@media (prefers-reduced-motion: no-preference) {

  /* Hero: the eyebrow rises with the headline; the console waits for the
     words (styles.css delays .hero .reveal by .3s), then its ring draws
     and the gauge counts up (page script). */
  html.js:not(.is-loaded) .sv-hero .eyebrow { opacity: 0; }
  html.is-loaded .sv-hero .eyebrow { animation: rise-in .6s var(--ease) both; }
  html.js .sv-gauge__fill { stroke-dashoffset: 251.3; }
  html.is-loaded .sv-gauge__fill { animation: sv-gauge 1.1s var(--ease) .7s both; }
  html.is-loaded .sv-console__dot { animation: sv-blink 2.4s ease-in-out 1.4s infinite; }
  html.is-loaded .sv-console__live i { animation: sv-blink 2.4s ease-in-out 1.4s infinite; }

  /* A row arriving at the top of the feed. */
  .sv-feed__row.is-new { animation: sv-row-in .55s var(--ease) both; }

  /* The console's stat tiles pop in after the panel lands. */
  html.js .sv-console:not(.is-in) .sv-console__stats > div { opacity: 0; }
  .sv-console.is-in .sv-console__stats > div { animation: pop-in .5s var(--ease) .45s both; }
  .sv-console.is-in .sv-console__stats > div:nth-child(2) { animation-delay: .53s; }
  .sv-console.is-in .sv-console__stats > div:nth-child(3) { animation-delay: .61s; }

  /* Tour: the rail's dot grows when a module becomes current. */
  body.sv .tour__tab[aria-selected="true"]::before { animation: sv-dot .4s var(--ease) both; }

  /* Timeline: nodes rise with the stagger; the line draws across after
     the first node has landed. */
  .sv-timeline::after { transform: scaleX(0); }
  .sv-timeline.is-in::after { animation: sv-line-x 1.2s var(--ease) .25s both; }
  @media (max-width: 720px) {
    .sv-timeline::after { transform: scaleY(0); }
    .sv-timeline.is-in::after { animation-name: sv-line-y; }
  }
  .sv-tl__n { transition: transform .2s var(--ease); }
  .sv-tl:hover .sv-tl__n { transform: scale(1.08); }

  /* Reader band: the document lands, then each field slides in with its
     page chip popping just behind it, then the finding. */
  html.js .sv-band__inner:not(.is-in) :is(.sv-band__field, .sv-band__finding) { opacity: 0; }
  html.js .sv-band__inner:not(.is-in) .sv-band__field .pg { opacity: 0; }
  .sv-band__inner.is-in .sv-band__field { animation: sv-field-in .5s var(--ease) both; animation-delay: calc(.35s + var(--f, 0) * 130ms); }
  .sv-band__inner.is-in .sv-band__field .pg { animation: pop-in .4s var(--ease) both; animation-delay: calc(.6s + var(--f, 0) * 130ms); }
  .sv-band__field:nth-child(2) { --f: 0; }
  .sv-band__field:nth-child(3) { --f: 1; }
  .sv-band__field:nth-child(4) { --f: 2; }
  .sv-band__field:nth-child(5) { --f: 3; }
  .sv-band__field:nth-child(6) { --f: 4; }
  .sv-band__field:nth-child(7) { --f: 5; }
  .sv-band__inner.is-in .sv-band__finding { animation: sv-field-in .5s var(--ease) 1.25s both; }
  html.js .sv-band__inner:not(.is-in) .sv-band__doc mark { background: transparent; box-shadow: none; }
  .sv-band__doc mark { transition: background .5s var(--ease) .5s, box-shadow .5s var(--ease) .5s; }

  /* Signal cards lift a little further than the shared cards do. */
  .sv-signal { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }

  /* The sparkline draws itself when its window scrolls into view, in step
     with the bars and rows animated by styles.css. */
  html.js .mock:not(.is-in) .sv-spark :is(.ln, .pt, text.v, text.ev) { opacity: 0; }
  .mock.is-in .sv-spark .ln {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: sv-draw 1s var(--ease) both;
    animation-delay: calc(var(--m-delay) + 200ms);
  }
  .mock.is-in .sv-spark .ln.r { animation-delay: calc(var(--m-delay) + 900ms); animation-duration: .35s; }
  .mock.is-in .sv-spark :is(.pt, text.v, text.ev) { animation: sv-fade .4s var(--ease) both; animation-delay: calc(var(--m-delay) + 1000ms); }

  /* The window strip's module tabs fade in left to right as a mock loads. */
  html.js .mock:not(.is-in) .mock__nav i { opacity: 0; }
  .mock.is-in .mock__nav i { animation: sv-fade .35s var(--ease) both; animation-delay: var(--m-delay); }
  .mock.is-in .mock__nav i:nth-child(2) { animation-delay: calc(var(--m-delay) + 40ms); }
  .mock.is-in .mock__nav i:nth-child(3) { animation-delay: calc(var(--m-delay) + 80ms); }
  .mock.is-in .mock__nav i:nth-child(4) { animation-delay: calc(var(--m-delay) + 120ms); }
  .mock.is-in .mock__nav i:nth-child(5) { animation-delay: calc(var(--m-delay) + 160ms); }
  .mock.is-in .mock__nav i:nth-child(n+6) { animation-delay: calc(var(--m-delay) + 200ms); }
}

@keyframes sv-gauge {
  from { stroke-dashoffset: 251.3; }
  to   { stroke-dashoffset: var(--gauge-to, 0); }
}
@keyframes sv-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes sv-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sv-dot {
  from { transform: scale(.6); }
  to   { transform: scale(1); }
}
@keyframes sv-line-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes sv-line-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes sv-field-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sv-draw {
  from { opacity: 1; stroke-dashoffset: 420; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}