/* ============================================================
   Soro — adonis-clean redesign
   One stylesheet. Montserrat only, no italics anywhere.
   Palette: #778873 sage / #A1BC98 sage-light / #DCCFC0 sand / #FDF6ED cream
   Ground: white with ONE continuous sage wash gradient per page.
   Dark moments: home hero band + footer only. No per-section colors.
   Motion: product demos, reveal-once fades, count-ups, micro hovers.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { line-height: 1.12; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }

/* Brand rule: no italics, ever. Emphasis is weight, never slant. */
em, i, cite, dfn, address { font-style: normal; }
em, i { font-weight: 600; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* four-swatch brand palette */
  --sage: #778873;
  --sage-light: #A1BC98;
  --sand: #DCCFC0;
  --cream: #FDF6ED;

  /* derived greens */
  --pine: #3E4A38;        /* buttons, footer, dark hero floor */
  --pine-deep: #2B3629;   /* dark band gradient depth */
  --pine-soft: #4A5943;   /* dark band gradient lift */
  --ink: #202820;         /* headings on light */
  --text: #3C463A;        /* body on light */
  --muted: #5F6B59;       /* secondary on light (AA on white and wash) */
  --sage-text: #5D6F58;   /* sage as small text on light, AA-safe */
  --mint: #D3E2CA;        /* small labels on dark bands */

  /* ground */
  --wash: #F3F6F0;
  --wash-deep: #E9EFE3;
  --line: #E4E9DF;
  --line-strong: #C8D1C0;

  /* product-mock semantics (used only inside UI mocks) */
  --flag: #A6473E;
  --flag-bg: #F8ECEA;
  --ok: #3D5837;
  --ok-bg: #E7F0E1;

  /* type */
  --font: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* geometry */
  --container: 1600px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 9px;
  --pad-x: clamp(20px, 2.6vw, 32px);   /* ~1/3 inch side gutter */
  --sec: clamp(4rem, 7vw, 5.75rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --pop: cubic-bezier(0.22, 1, 0.36, 1);

  /* elevation (green-tinted, soft) */
  --shadow-sm: 0 1px 2px rgba(32, 40, 32, 0.05), 0 2px 8px rgba(32, 40, 32, 0.05);
  --shadow-md: 0 4px 14px rgba(32, 40, 32, 0.10), 0 1px 3px rgba(32, 40, 32, 0.06);
  --shadow-lg: 0 24px 60px -18px rgba(32, 40, 32, 0.24), 0 6px 18px rgba(32, 40, 32, 0.08);

  /* nav (light-on-dark default; .hero-light flips it) */
  --nav-fg: rgba(255, 255, 255, 0.85);
  --nav-fg-strong: #FFFFFF;
  --nav-border: rgba(255, 255, 255, 0.30);
  --nav-hover-bg: rgba(255, 255, 255, 0.10);
}

/* ---------- Base ---------- */
body.soro-page {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  /* ONE continuous page gradient: white into a faint sage wash.
     Sections stay transparent; nothing re-colors mid-page. */
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFB 36%, var(--wash) 72%, var(--wash-deep) 100%);
  background-color: #FFFFFF;
}
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-x); }
main { display: block; }
::selection { background: var(--sage-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.display {
  font-size: clamp(2.45rem, 5.2vw, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  font-weight: 600;
}
.h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -0.022em; }
.h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.55; color: var(--muted); }
.small { font-size: 0.88rem; }

.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sage-text);
}

.num, [data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (effects preserved from the current site) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font);
  font-weight: 600; font-size: 0.96rem;
  padding: 0.92em 1.55em;
  border-radius: 100px;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* Shine-hover sweep — the site's signature button effect, kept as-is */
.btn-primary, .btn-light { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before, .btn-light::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 220% 0;
  transition: background-position .95s var(--ease); pointer-events: none;
}
.btn-primary:hover::before, .btn-light:hover::before { background-position: -120% 0; }

.btn-primary { background: var(--pine); color: #fff; }
.btn-primary:hover { background: var(--pine-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(119, 136, 115, 0.08); }
.btn-light { background: #fff; color: var(--pine); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-lg { padding: 1.05em 1.9em; font-size: 1.02rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav {
  max-width: var(--container); margin: 0 auto; padding: 14px var(--pad-x);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: 4px; }
.brand .emblem { width: 30px; height: 30px; flex: none; object-fit: contain; display: block; }
/* Dark header (home): show the white emblem. Light headers: show the dark one. */
.brand .emblem--dark { display: none; }
.site-header.hero-light .brand .emblem--white { display: none; }
.site-header.hero-light .brand .emblem--dark { display: block; }
/* Mobile menu open flips a light header to a dark overlay, so use the light emblem */
body.nav-open .site-header.hero-light .brand .emblem--white { display: block; }
body.nav-open .site-header.hero-light .brand .emblem--dark { display: none; }
.wordmark { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--nav-fg-strong); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-links a {
  font-size: 0.94rem; font-weight: 500; color: var(--nav-fg);
  padding: 0.55em 0.9em; border-radius: 100px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--nav-fg-strong); background: var(--nav-hover-bg); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.btn-demo {
  font-family: var(--font); font-weight: 600; font-size: 0.9rem; line-height: 1;
  padding: 0.74em 1.3em; border-radius: 100px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-demo-ghost { background: transparent; color: var(--nav-fg-strong); border: 1px solid var(--nav-border); }
.btn-demo-ghost:hover { background: var(--nav-hover-bg); border-color: var(--nav-fg-strong); transform: translateY(-1px); }
.btn-demo-solid { background: #fff; color: var(--pine); border: 1px solid transparent; }
.btn-demo-solid:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.site-header.scrolled { background: rgba(43, 54, 41, 0.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Interior pages: dark text over the light page */
.site-header.hero-light {
  --nav-fg: var(--text);
  --nav-fg-strong: var(--ink);
  --nav-border: var(--line-strong);
  --nav-hover-bg: rgba(119, 136, 115, 0.10);
}
.site-header.hero-light .btn-demo-solid { background: var(--pine); color: #fff; }
.site-header.hero-light.scrolled { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }

/* Mobile nav */
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--nav-fg-strong); transition: transform .3s var(--ease), opacity .3s; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  position: fixed; inset: 0; z-index: 55; padding: 96px var(--pad-x) 40px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--pine-deep), var(--pine));
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a { color: #fff; font-size: 1.3rem; font-weight: 600; padding: 0.45em 0; }
.mobile-nav .mobile-demo { margin-top: 18px; justify-content: center; font-size: 1rem; background: #fff; color: var(--pine); }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { --nav-fg: rgba(255,255,255,.85); --nav-fg-strong: #fff; background: transparent; box-shadow: none; }

/* ---------- Home hero (dark pine band; the only dark moment above the footer) ---------- */
.hero {
  position: relative; overflow: clip;
  color: #fff;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(161, 188, 152, 0.30), transparent 60%),
    radial-gradient(900px 700px at -8% 112%, rgba(119, 136, 115, 0.45), transparent 55%),
    linear-gradient(168deg, var(--pine-deep) 0%, var(--pine) 55%, #566349 100%);
  padding-top: clamp(112px, 15vh, 160px);
}
/* Brand emblem pushed to the background: same hue, one shade lighter, barely there */
.hero-watermark {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(58vw, 780px); aspect-ratio: 1;
  right: -9%; top: -14%;
  background: rgba(255, 255, 255, 0.05);
  -webkit-mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 68px); align-items: center;
  padding-bottom: clamp(48px, 6vw, 76px);
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, 0.86); max-width: 33rem; margin-top: 20px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { margin-top: 24px; font-size: 0.87rem; color: var(--mint); display: flex; align-items: center; gap: 9px; }
.hero-proof svg { width: 15px; height: 15px; flex: none; }

/* Payer strip: quiet wordmark marquee at the foot of the hero band */
.payers { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 22px 26px; }
.payers-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); text-align: center; margin-bottom: 16px;
}
.payers-track { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.payers-row { display: flex; gap: clamp(40px, 6vw, 84px); width: max-content; animation: payers-slide 46s linear infinite; }
.payers-track:hover .payers-row { animation-play-state: paused; }
.payers-row span { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
@keyframes payers-slide { to { transform: translateX(-50%); } }

/* ---------- Demo card (the product view with the guided cursor) ---------- */
.demo-card {
  position: relative;
  background: #F7F9F5;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(14px, 1.8vw, 22px);
  min-height: 432px;
  display: flex; flex-direction: column;
  background-image:
    linear-gradient(rgba(119, 136, 115, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 136, 115, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.demo-stage { position: relative; flex: 1; }
.demo-panel {
  position: absolute; inset: 0;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2vw, 24px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  display: flex; flex-direction: column;
}
.demo-panel.is-on { opacity: 1; visibility: visible; transform: none; }

.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.demo-title { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.demo-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--pine);
  padding: 0.55em 1em; border-radius: 100px; border: 1px solid var(--line-strong);
  background: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .12s var(--ease);
}
.demo-action svg { width: 13px; height: 13px; }
.demo-action.is-hover { background: var(--wash); border-color: var(--sage); }
.demo-action.is-pressed { background: var(--wash-deep); transform: scale(0.95); }

.demo-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.demo-table th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 8px; border-bottom: 1px solid var(--line);
}
.demo-table td { padding: 12px 8px; border-bottom: 1px solid var(--wash); color: var(--ink); font-weight: 500; }
.demo-table td.code { color: var(--muted); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; }
.demo-table td.amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.demo-table td:last-child { text-align: right; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; line-height: 1;
  padding: 0.5em 0.85em; border-radius: 100px;
  background: var(--wash-deep); color: var(--muted);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.dr .pill .pill-alt { display: none; }
.dr.hit td { background: rgba(248, 236, 234, 0.4); }
.dr.hit .pill { background: var(--flag-bg); color: var(--flag); }
.dr.hit.clear td { background: rgba(231, 240, 225, 0.4); }
.dr.hit.clear .pill { background: var(--ok-bg); color: var(--ok); }
.dr.hit .pill .pill-base { display: none; }
.dr.hit .pill .pill-alt { display: inline; }
.dr td { transition: background .35s var(--ease); }

/* checklist panel */
.demo-check { display: flex; flex-direction: column; gap: 18px; justify-content: center; flex: 1; padding: 8px 6px; }
.demo-check h4 { font-size: 1.04rem; letter-spacing: -0.01em; }
.check-item { display: flex; align-items: center; gap: 12px; font-size: 0.94rem; font-weight: 500; color: var(--muted); transition: color .35s var(--ease); }
.check-item .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wash-deep); flex: none; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.check-item .tick { width: 18px; height: 18px; flex: none; color: var(--ok); opacity: 0; transform: scale(0.6); transition: opacity .3s var(--ease), transform .35s var(--pop); }
.check-item.is-active { color: var(--ink); }
.check-item.is-active .dot { background: var(--sage); box-shadow: 0 0 0 4px rgba(119, 136, 115, 0.18); }
.check-item.is-done { color: var(--ink); }
.check-item.is-done .dot { background: var(--sage-light); }
.check-item.is-done .tick { opacity: 1; transform: none; }

/* result panel */
.demo-result { align-items: center; justify-content: center; text-align: center; gap: 14px; }
.result-meta { font-size: 0.83rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.result-meta .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sage-light); }
.result-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ok-bg); color: var(--ok);
  font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: -0.01em;
  padding: 0.7em 1.15em; border-radius: 100px;
}
.result-pill svg { width: 18px; height: 18px; flex: none; }
.result-sub { font-size: 0.9rem; color: var(--muted); max-width: 25rem; }

/* the guided cursor */
.demo-cursor {
  position: absolute; z-index: 5; width: 21px; height: 21px;
  left: 0; top: 0; pointer-events: none;
  opacity: 0;
  transform: translate(240px, 330px);
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1), opacity .4s var(--ease);
  filter: drop-shadow(0 2px 4px rgba(32, 40, 32, 0.35));
  will-change: transform;
}
.demo-card.live .demo-cursor { opacity: 1; }
.demo-cursor.is-clicking { animation: cursor-click .3s var(--ease); }
@keyframes cursor-click { 50% { scale: 0.8; } }

/* Static fallback: without .live (JS off / reduced motion) the card shows the
   finished result panel; the table and checklist stay hidden. */
.demo-card:not(.live) .demo-panel { opacity: 0; visibility: hidden; }
.demo-card:not(.live) .demo-panel.demo-final { opacity: 1; visibility: visible; transform: none; }

/* ---------- Generic sections ---------- */
.section { padding-block: var(--sec); }
.section-tight { padding-block: calc(var(--sec) * 0.6); }
.section-head { max-width: 44rem; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head .h2 { margin-top: 14px; }
.section-head .lead { margin-top: 14px; max-width: 38rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

/* ---------- Pillars (cycling highlight, adonis-style) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillar {
  position: relative; display: flex; flex-direction: column; gap: 13px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease);
  text-align: left; cursor: pointer;
  font-family: var(--font);
}
.pillar-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sage-text); transition: color .55s var(--ease); }
.pillar-kicker .pk-mark {
  width: 15px; height: 15px; flex: none; background: var(--sage);
  -webkit-mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  transition: background .55s var(--ease);
}
.pillar h3 { font-size: clamp(1.28rem, 1.8vw, 1.56rem); letter-spacing: -0.02em; transition: color .55s var(--ease); }
.pillar > p { font-size: 0.94rem; color: var(--muted); transition: color .55s var(--ease); }
.pillar-mock {
  margin-top: auto; border-radius: var(--r-md); background: var(--cream);
  min-height: 212px; padding: 18px; display: grid; place-items: center;
  transition: background .55s var(--ease);
  overflow: hidden; width: 100%;
}
.pillar.is-active {
  background: linear-gradient(165deg, var(--pine-deep) 0%, var(--pine) 78%, var(--pine-soft) 100%);
  border-color: var(--pine);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.pillar.is-active .pillar-kicker { color: var(--mint); }
.pillar.is-active .pk-mark { background: var(--mint); }
.pillar.is-active h3 { color: #fff; }
.pillar.is-active > p { color: rgba(255, 255, 255, 0.82); }
.pillar.is-active .pillar-mock { background: rgba(255, 255, 255, 0.09); }

/* mini mock: alert card */
.mock-alert { width: min(100%, 296px); background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 16px 18px; text-align: left; }
.mock-alert .ma-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
.mock-alert .ma-time { font-size: 0.68rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.mock-alert .ma-body { font-size: 0.73rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.mock-alert .ma-stat { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.mock-alert .ma-stat b { font-size: 1.75rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mock-alert .ma-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-left: auto; }
.mock-alert .ma-bars span { width: 5px; border-radius: 3px; background: var(--sage-light); height: calc(var(--h) * 1%); }
.mock-alert .ma-bars span:nth-child(even) { background: var(--sage); }

/* mini mock: claim lines */
.mock-lines { width: min(100%, 296px); background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mock-lines .ml-row { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mock-lines .ml-row .skel { flex: 1; height: 7px; border-radius: 6px; background: var(--wash-deep); }
.mock-lines .ml-tag { font-size: 0.64rem; font-weight: 700; padding: 0.4em 0.75em; border-radius: 100px; background: var(--flag-bg); color: var(--flag); white-space: nowrap; }
.mock-lines .ml-tag.ok { background: var(--ok-bg); color: var(--ok); }

/* mini mock: recovery summary */
.mock-recover { width: min(100%, 296px); background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 16px 18px; text-align: left; }
.mock-recover .mr-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-text); }
.mock-recover .mr-amt { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1; }
.mock-recover .mr-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mock-recover .mr-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.73rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mock-recover .mr-row b { color: var(--ok); font-weight: 700; }

/* ---------- Steps (numbered, side-by-side) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step {
  position: relative; padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.step-no { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--sage-text); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 1.2rem; }
.step p { font-size: 0.93rem; color: var(--muted); }
.step-visual { margin-top: auto; padding-top: 16px; }

/* ---------- Split (copy beside artifact) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 76px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.split-copy .h2 { margin-top: 14px; }
.split-copy .lead { margin-top: 14px; }
.split-points { margin-top: 24px; display: flex; flex-direction: column; gap: 15px; }
.split-points li { display: flex; gap: 12px; font-size: 0.96rem; }
.split-points li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--sage); }
.split-points li b { color: var(--ink); font-weight: 600; }

/* ---------- Paper audit artifact (brand object) ---------- */
.paper {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px);
}
.paper-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.paper-head b { font-size: 0.93rem; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.paper-head span { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.paper-rows { display: flex; flex-direction: column; }
.paper-row {
  display: grid; grid-template-columns: 76px 1fr auto auto; gap: 13px; align-items: center;
  padding: 12px 2px; border-bottom: 1px dashed var(--line);
  font-size: 0.84rem; font-variant-numeric: tabular-nums;
}
.paper-row .code { font-weight: 700; color: var(--ink); letter-spacing: 0.04em; font-size: 0.78rem; }
.paper-row .desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.paper-row .charge { font-weight: 600; color: var(--ink); }
.paper-flag { font-size: 0.66rem; font-weight: 700; padding: 0.42em 0.78em; border-radius: 100px; background: var(--flag-bg); color: var(--flag); white-space: nowrap; }
.paper-flag.ok { background: var(--ok-bg); color: var(--ok); }
.paper-total { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; }
.paper-total span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-text); }
.paper-total b { font-size: 1.45rem; font-weight: 700; color: var(--ok); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.paper-note { margin-top: 10px; font-size: 0.74rem; color: var(--muted); }

/* Animated pass: JS adds .anim, then rows, flags, and total reveal in order.
   Without .anim (no JS or reduced motion) everything shows at rest. */
.paper.anim .paper-row { opacity: 0; transform: translateY(9px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.paper.anim .paper-row.in { opacity: 1; transform: none; }
.paper.anim .paper-flag { opacity: 0; transform: scale(.62); transition: opacity .3s var(--ease), transform .45s var(--pop); }
.paper.anim .paper-row.flagged .paper-flag { opacity: 1; transform: none; }
.paper.anim .paper-total { opacity: 0; transition: opacity .5s var(--ease); }
.paper.anim .paper-total.in { opacity: 1; }

/* Scan variant (step 03): two-column rows with wrapping descriptions */
.paper.scan .paper-row { grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.paper.scan .paper-row .desc { white-space: normal; overflow: visible; color: var(--muted); line-height: 1.45; }
.paper.scan .paper-row .desc b { color: var(--ink); font-weight: 600; }

/* Logo end-card: a cream bumper pops the Soro mark, then the loop restarts */
.paper-stamp {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(253, 246, 237, 0.95), rgba(220, 207, 192, 0.93));
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.paper-stamp.show { opacity: 1; visibility: visible; }
.stamp-inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: scale(.86); transition: opacity .5s var(--ease), transform .6s var(--pop);
}
.paper-stamp.show .stamp-inner { opacity: 1; transform: none; }
.stamp-logo { display: inline-flex; align-items: center; gap: 11px; }
.stamp-mark { width: 34px; height: 34px; flex: none; object-fit: contain; }
.stamp-name { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--pine); line-height: 1; }
.stamp-word {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-text);
}
.stamp-word svg { width: 15px; height: 15px; flex: none; color: var(--ok); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stats.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.stack { grid-template-columns: 1fr; }
.stat { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: clamp(2.2rem, 3.8vw, 3rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .stat-label { display: block; margin-top: 10px; font-size: 0.94rem; font-weight: 600; color: var(--ink); }
.stat .stat-cite { display: block; margin-top: 5px; font-size: 0.79rem; color: var(--muted); }

/* ---------- Feature cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.card p { font-size: 0.91rem; color: var(--muted); }
.card-ico {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--cream); border: 1px solid var(--sand); color: var(--sage-text);
}
.card-ico svg { width: 20px; height: 20px; }

/* ---------- Interior page hero (centered panel, a real banner on the gradient) ---------- */
.page-hero { padding-top: clamp(112px, 15vh, 156px); padding-bottom: clamp(28px, 4vw, 52px); }
.page-hero .container {
  max-width: 980px;
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, #fff 78%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(40px, 6vw, 76px) clamp(28px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}
/* faint emblem watermark in the corner, so the panel reads as branded, not empty */
.page-hero .container::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 320px; height: 320px; right: -84px; top: -104px;
  background: var(--sage-light); opacity: 0.14;
  -webkit-mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
}
.page-hero .container > * { position: relative; z-index: 1; }
.page-hero .display { max-width: 18em; margin-inline: auto; }
.page-hero .lead { max-width: 44rem; margin: 18px auto 0; }
.page-hero .eyebrow { margin-bottom: 16px; justify-content: center; }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; justify-content: center; }

/* underlined inline link (product HIPAA reference) */
.link-underline { color: var(--pine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link-underline:hover { color: var(--pine-deep); }

/* ---------- Product: scroll-down hint + scroll-follow spine ---------- */
.scroll-hint {
  margin: 34px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--sage-text);
}
.scroll-hint-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--sage); color: var(--pine);
  background: rgba(255, 255, 255, 0.7);
  animation: scrollBob 1.9s var(--ease) infinite;
}
.scroll-hint-arrow svg { width: 22px; height: 22px; }
.scroll-hint:hover .scroll-hint-arrow { background: var(--sage-light); }
@keyframes scrollBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* The spine runs down the CENTER of the steps region (the gap between the
   two columns of each split). Content sits above it via z-index. */
.pf-flow { position: relative; }
.pf-flow > section { position: relative; z-index: 1; }
.pf-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0;
  width: 3px; border-radius: 3px;
  background: rgba(119, 136, 115, 0.16); pointer-events: none;
}
.pf-spine-fill {
  display: block; width: 100%; height: 0; border-radius: 3px;
  background: linear-gradient(180deg, var(--sage-light) 0%, var(--sage) 45%, var(--pine) 100%);
  box-shadow: 0 0 12px rgba(119, 136, 115, 0.45);
}
/* when the splits stack to one column the center line would cross content */
@media (max-width: 1020px) { .pf-spine { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint-arrow { animation: none; } }

/* ---------- Forms ---------- */
.form-card { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: clamp(24px, 3vw, 36px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  padding: 0.8em 1em; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: #fff; font-size: 0.95rem; color: var(--ink); width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(119, 136, 115, 0.18);
}
.form-note { font-size: 0.79rem; color: var(--muted); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: clamp(26px, 3vw, 36px);
}
.plan.featured { border-color: var(--sage); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, var(--cream) 0%, #fff 42%); }
.plan-badge {
  position: absolute; top: -13px; left: 28px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--pine); color: #fff; padding: 0.55em 1em; border-radius: 100px;
}
.plan h3 { font-size: 1.3rem; }
.plan-fee { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-fee > b { font-size: clamp(2.4rem, 4vw, 3.1rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-fee > span { font-size: 0.94rem; color: var(--muted); }
.plan-desc { font-size: 0.94rem; color: var(--muted); }
.plan-list { display: flex; flex-direction: column; gap: 12px; margin-block: 4px 8px; }
.plan-list li { display: flex; gap: 11px; font-size: 0.92rem; color: var(--text); }
.plan-list li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sage); }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------- Resources ---------- */
.res-list { display: flex; flex-direction: column; }
.res-row {
  display: grid; grid-template-columns: 118px 1fr auto; gap: 22px; align-items: center;
  padding: 22px 6px; border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.res-row:first-child { border-top: 1px solid var(--line); }
.res-row:hover { background: rgba(253, 246, 237, 0.7); }
.res-kind { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-text); }
.res-row h3 { font-size: 1.05rem; }
.res-row p { font-size: 0.88rem; color: var(--muted); margin-top: 4px; }
.res-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.87rem; font-weight: 600; color: var(--pine); white-space: nowrap; }
.res-cta svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.res-row:hover .res-cta svg { transform: translateX(3px); }

/* ---------- Blog grid (adonis-style article cards) ----------
   The thumbs are branded gradient placeholders; drop real photos in by
   swapping each .blog-thumb for an <img> (or setting a background-image). */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 30px); }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--sage); }
.blog-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-thumb::after { content: ""; position: absolute; inset: 0; background: url("../assets/img/soro-emblem-white.png") no-repeat right -8% bottom -14% / 52%; opacity: 0.16; }
.blog-thumb.t-erisa { background: linear-gradient(135deg, #3E4A38, #778873); }
.blog-thumb.t-billing { background: linear-gradient(135deg, #5D6F58, #A1BC98); }
.blog-thumb.t-bench { background: linear-gradient(135deg, #2B3629, #5F6B59); }
.blog-thumb.t-ops { background: linear-gradient(135deg, #778873, #A1BC98); }
.blog-thumb.t-tpa { background: linear-gradient(135deg, #3E4A38, #5F6B59); }
.blog-thumb.t-strategy { background: linear-gradient(135deg, #2B3629, #778873); }
.blog-thumb-tag { position: absolute; left: 14px; top: 14px; z-index: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(32, 40, 32, 0.42); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 100px; padding: 0.34em 0.85em; }
.blog-meta { padding: 16px 20px 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-text); }
.blog-card h3 { padding: 8px 20px 0; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); }
.blog-card p { padding: 8px 20px 22px; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 1020px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq-center { margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 19px 4px; font-weight: 600; color: var(--ink); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; font-weight: 500; color: var(--sage-text); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 19px; font-size: 0.94rem; color: var(--muted); max-width: 42rem; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.3rem; margin-top: 2.2em; margin-bottom: 0.6em; }
.prose h3 { font-size: 1.06rem; margin-top: 1.6em; margin-bottom: 0.5em; }
.prose p, .prose li { font-size: 0.96rem; color: var(--text); }
.prose p { margin-bottom: 1em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.prose li { margin-bottom: 0.45em; }
.prose .updated { font-size: 0.83rem; color: var(--muted); margin-bottom: 2em; }
.prose .note {
  background: var(--cream); border: 1px solid var(--sand);
  border-radius: var(--r-sm); padding: 14px 18px; font-size: 0.88rem; color: var(--muted);
  margin-bottom: 2em;
}

/* ---------- Footer (dark cap: CTA + links in one pine gradient) ---------- */
.site-footer {
  margin-top: var(--sec);
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(161, 188, 152, 0.16), transparent 55%),
    linear-gradient(175deg, var(--pine) 0%, var(--pine-deep) 100%);
  padding-block: clamp(56px, 7vw, 84px) 32px;
}
.footer-cta {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center;
  padding-bottom: clamp(38px, 5vw, 58px); margin-bottom: clamp(38px, 5vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-cta h2 { color: #fff; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.022em; }
.footer-cta p { margin-top: 12px; max-width: 33rem; font-size: 0.97rem; color: rgba(255, 255, 255, 0.76); }
.footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; }
.footer-brand .wordmark { font-size: 1.45rem; color: #fff; }
.footer-brand p { margin-top: 12px; font-size: 0.89rem; max-width: 21rem; color: rgba(255, 255, 255, 0.66); }
.footer-col h4 { color: var(--mint); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 13px; }
.footer-col a { display: block; font-size: 0.91rem; padding-block: 5px; color: rgba(255, 255, 255, 0.72); transition: color .25s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(38px, 5vw, 52px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.81rem; color: rgba(255, 255, 255, 0.56);
}
.legal-mini { display: flex; gap: 18px; }
.legal-mini a:hover { color: #fff; }

/* ---------- Motion: reveal-once + count-ups only ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .demo-cursor { display: none; }
  .payers-row { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  /* collapse the recovery-insights scroll-zoom into a static stack */
  .izm-track { height: auto; }
  .izm-pin { position: static; height: auto; overflow: visible; flex-direction: column; gap: 16px; padding: clamp(28px, 6vw, 44px) 0; }
  .ins-scene { width: 100%; min-height: 0; transform: none !important; }
  .ins-card { position: static; width: 100%; margin-left: 0; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .lead { max-width: 40rem; }
  .demo-card { max-width: 620px; }
  .pillars, .steps, .stats, .stats.cols-4, .cards, .cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip .split-copy { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-cta { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  .pillars, .steps, .stats, .stats.cols-4, .cards, .cards.cols-4, .plans, .form-grid { grid-template-columns: 1fr; }
  .res-row { grid-template-columns: 1fr; gap: 8px; }
  .demo-table .hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SIGNATURE SECTIONS ported from the prior design, recolored to
   sage and calmed down: the scroll-zoom choreography is gone,
   drifts are slow, and everything reveals once. All motion
   collapses under prefers-reduced-motion (global rule above).
     1. Recovery insights - fact cards floating over a soft scene
     2. Methodology       - emblem orbited by audit-signal chips
     3. One live view     - dark pine dashboard mock
     4. Four seats        - solutions persona tabs
   ============================================================ */

/* ---------- 1. Recovery insights (scroll-zoom stage) ----------
   The scene starts scaled up to cover the viewport, then zooms out
   to a card as you scroll (initInsZoom in js/main.js writes the
   inline transforms). The two fact cards slide in from off-stage.
   Ships finished (scene scale 1, cards in place) for no-JS. */
.ins-zoom { padding-block: 0; }
.izm-track { position: relative; height: 200vh; }
.izm-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.ins-scene {
  position: relative; z-index: 1; isolation: isolate; overflow: hidden;
  width: min(700px, 84vw); min-height: min(440px, 58vh);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px);
  border-radius: var(--r-lg); border: 1px solid var(--sand);
  background:
    radial-gradient(120% 90% at 50% 38%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(162deg, var(--cream) 0%, #F4EADD 52%, var(--sand) 100%);
  box-shadow: var(--shadow-lg);
  transform-origin: center center; will-change: transform;
}
.ins-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ins-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; will-change: transform; }
.ins-blob.b1 { width: 48%; height: 62%; left: -9%; top: -18%; background: radial-gradient(circle, rgba(161, 188, 152, 0.55), transparent 70%); animation: insDriftA 34s ease-in-out infinite alternate; }
.ins-blob.b2 { width: 44%; height: 60%; right: -11%; top: 22%; background: radial-gradient(circle, rgba(119, 136, 115, 0.40), transparent 70%); animation: insDriftB 42s ease-in-out infinite alternate; }
.ins-blob.b3 { width: 40%; height: 54%; left: 27%; bottom: -22%; background: radial-gradient(circle, rgba(220, 207, 192, 0.60), transparent 70%); animation: insDriftA 30s ease-in-out infinite alternate -12s; }
@keyframes insDriftA { from { transform: translate(-14px, -10px) scale(1); } to { transform: translate(16px, 14px) scale(1.08); } }
@keyframes insDriftB { from { transform: translate(12px, -12px) scale(1.06); } to { transform: translate(-14px, 10px) scale(1); } }

.ins-scene-copy { position: relative; z-index: 1; text-align: center; max-width: 42ch; }
.ins-scene-copy .eyebrow { justify-content: center; }
.ins-scene-copy .h2 { margin-top: 12px; }

.ins-card {
  position: absolute; z-index: 3; --icw: min(360px, 30vw); width: var(--icw);
  background: linear-gradient(168deg, #AEC6A5 0%, var(--sage-light) 58%);
  border: 1.5px solid var(--pine); border-radius: 20px;
  padding: clamp(22px, 2vw, 28px);
  box-shadow: 0 18px 40px -20px rgba(43, 54, 41, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.ins-card::before {
  content: ""; display: block; width: 30px; height: 3px; border-radius: 3px;
  background: var(--pine); margin-bottom: 14px; opacity: 0.8;
}
.ins-card:hover { box-shadow: 0 26px 54px -22px rgba(43, 54, 41, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ins-card h3 { font-size: 1.16rem; letter-spacing: -0.01em; color: var(--pine-deep); }
.ins-card p { margin-top: 9px; font-size: 0.92rem; color: #24301D; line-height: 1.58; }
.ins-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--pine-deep); }
.ins-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ins-link:hover svg { transform: translateX(3px); }
/* one card flanks each side of the scene, tops aligned */
.ic-l { left: clamp(20px, 4vw, 76px); top: calc(50% - 130px); }
.ic-r { right: clamp(20px, 4vw, 76px); top: calc(50% - 130px); }

/* ---------- 2. Methodology (emblem + drifting audit chips) ---------- */
.meth-stage {
  position: relative; margin-top: clamp(40px, 6vw, 64px);
  display: grid; align-items: center; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(230px, 1fr) minmax(280px, auto) minmax(230px, 1fr);
}
.meth-paths { position: absolute; inset: -4% 0; width: 100%; height: 108%; pointer-events: none; z-index: 0; }
.meth-paths path {
  fill: none; stroke: var(--line-strong); stroke-width: 1.5;
  stroke-dasharray: 3 8; stroke-linecap: round;
  animation: methDash 44s linear infinite;
}
@keyframes methDash { to { stroke-dashoffset: -200; } }

.meth-token { position: relative; display: grid; place-items: center; padding: clamp(10px, 2vw, 20px); }
.meth-token::before {
  content: ""; position: absolute; width: 128%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(119, 136, 115, 0.20) 0%, rgba(161, 188, 152, 0.14) 40%, transparent 68%);
  animation: methGlow 9s ease-in-out infinite alternate;
}
@keyframes methGlow { from { opacity: .7; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
.pedestal {
  position: relative; z-index: 1;
  width: clamp(200px, 22vw, 268px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 26%;
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF2E9 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: methFloat 10s ease-in-out infinite alternate;
}
@keyframes methFloat { from { transform: translateY(-7px) rotate(-1deg); } to { transform: translateY(8px) rotate(1.1deg); } }
.pedestal-mark {
  width: 66%; aspect-ratio: 1; background: #161616;
  -webkit-mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  filter: drop-shadow(0 14px 24px rgba(32, 40, 32, 0.24));
}
.meth-chip {
  position: absolute; z-index: 2; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  color: var(--sage-text);
  animation: methChip var(--cdur, 16s) ease-in-out var(--cdel, 0s) infinite alternate;
}
.meth-chip svg { width: 22px; height: 22px; }
@keyframes methChip {
  from { transform: translate(-6px, -9px) rotate(-3deg); }
  to   { transform: translate(7px, 8px) rotate(3deg); }
}
.meth-chip.mc-1 { left: 30%; top: 4%; }
.meth-chip.mc-2 { left: 33%; bottom: 2%; }
.meth-chip.mc-3 { right: 31%; top: -2%; }
.meth-chip.mc-4 { right: 29%; bottom: 8%; }

.meth-card {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: clamp(20px, 2.2vw, 28px);
}
.meth-card .mk {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sage-text);
}
.meth-card .mk svg { width: 1.3em; height: 1.3em; }
.meth-card ul { margin-top: 1rem; display: grid; gap: 0.75rem; }
.meth-card li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.meth-card li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--sage); }
.meth-foot { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

/* ---------- 3. One live view (dark pine dashboard mock) ---------- */
.dash-app {
  --dl: rgba(255, 255, 255, 0.12);        /* dashboard line */
  --dt: rgba(255, 255, 255, 0.92);        /* dashboard text */
  --dm: rgba(255, 255, 255, 0.62);        /* dashboard muted */
  --ds: rgba(255, 255, 255, 0.42);        /* dashboard subtle */
  width: min(1080px, 100%); margin: clamp(30px, 5vw, 52px) auto 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--dl);
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(161, 188, 152, 0.16), transparent 60%),
    linear-gradient(168deg, var(--pine-deep) 0%, #232C20 60%, #1D2419 100%);
  box-shadow: var(--shadow-lg);
  color: var(--dt);
}
.dash-chrome { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--dl); }
.dc-dots { display: inline-flex; gap: 6px; }
.dc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ds); }
.dc-title { display: inline-flex; align-items: center; gap: 0.42em; font-size: 0.8rem; font-weight: 600; color: var(--dm); }
.dc-word { font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.dc-sub { font-weight: 600; color: var(--dm); }
.dc-mark {
  width: 17px; height: 17px; background: rgba(255, 255, 255, 0.92);
  -webkit-mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
  mask: url("../assets/img/soro-emblem-transparent-hq.png") no-repeat center / contain;
}
.dc-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mint); border: 1px solid var(--dl); border-radius: 100px; padding: 0.34em 0.9em;
}
.dc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage-light); animation: dcLive 2.4s ease-in-out infinite; }
@keyframes dcLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.dash-body { display: flex; align-items: stretch; }
.dash-side { flex: 0 0 168px; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--dl); }
.ds-item { display: flex; align-items: center; gap: 0.65em; font-size: 0.82rem; font-weight: 600; color: var(--ds); padding: 0.55em 0.8em; border-radius: 10px; }
.ds-item svg { width: 15px; height: 15px; flex: none; }
.ds-item.active { color: var(--dt); background: rgba(255, 255, 255, 0.07); box-shadow: inset 2.5px 0 0 var(--sage-light); }

.dash-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding: 16px; }
.dash-card { min-width: 0; overflow: hidden; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dl); }
.dw-donut { grid-column: span 4; }
.dw-bar { grid-column: span 5; }
.dw-stat { grid-column: span 3; }
.dw-line { grid-column: span 5; }
.dw-table { grid-column: span 7; }

.ins-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.ins-card-head .t { font-weight: 600; font-size: 0.92rem; color: var(--dt); }
.ins-card-head .kebab { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px 2px; }
.ins-card-head .kebab i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--ds); }

/* donut */
.dch { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dch-wrap { position: relative; flex: none; }
.dch svg { width: clamp(84px, 30vw, 116px); height: clamp(84px, 30vw, 116px); flex: none; transform: rotate(-90deg); }
.dch .seg { fill: none; stroke-width: 3.8; stroke-dasharray: 0.001 100; transition: stroke-dasharray 1.1s var(--ease) var(--sd, 0s); }
.dash-app.in .dch .seg { stroke-dasharray: var(--seg) 100; }
.dch-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.dch-mid .v { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dt); font-variant-numeric: tabular-nums; }
.dch-mid .l { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds); }
.dch-legend { display: grid; gap: 7px; font-size: 0.78rem; color: var(--dm); min-width: 0; flex: 1 1 132px; }
.dch-legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dch-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dch-legend .pct { margin-left: auto; font-weight: 700; color: var(--dt); font-variant-numeric: tabular-nums; }

/* bar chart */
.bch { display: flex; align-items: flex-end; gap: 9px; height: 128px; padding-top: 6px; }
.bch b { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: rgba(255, 255, 255, 0.28); transform: scaleY(0.05); transform-origin: bottom; transition: transform 0.85s var(--ease) calc(var(--i) * 80ms); }
.bch b.hi { background: linear-gradient(180deg, var(--sage-light) 0%, var(--sage-light) 34%, rgba(255, 255, 255, 0.28) 34%); }
.dash-app.in .bch b { transform: scaleY(1); }
.bch-x { display: flex; gap: 9px; margin-top: 8px; }
.bch-x span { flex: 1; text-align: center; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; color: var(--ds); }
.ins-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dl); font-size: 0.78rem; color: var(--ds); display: flex; justify-content: space-between; gap: 10px; }
.ins-note strong { color: var(--dt); font-weight: 700; }

/* stat card */
.ins-stat .big { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--dt); font-variant-numeric: tabular-nums; }
.ins-stat .big .unit { font-size: 0.45em; font-weight: 500; color: var(--dm); margin-left: 0.18em; letter-spacing: 0; }
.ins-stat .delta { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 10px; font-size: 0.72rem; font-weight: 700; color: var(--mint); background: rgba(161, 188, 152, 0.14); padding: 0.38em 0.8em; border-radius: 100px; }
.ins-stat .delta svg { width: 0.95em; height: 0.95em; }
.spark { margin-top: 14px; }
.spark path { fill: none; stroke: var(--sage-light); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) 0.4s; }
.dash-app.in .spark path { stroke-dashoffset: 0; }

/* line chart */
.lch { position: relative; }
.lch svg { width: 100%; height: auto; display: block; overflow: visible; }
.lch .grid-l { stroke: var(--dl); stroke-width: 1; }
.lch .area { fill: url(#insArea); opacity: 0; transition: opacity 0.9s var(--ease) 0.7s; }
.dash-app.in .lch .area { opacity: 1; }
.lch .trace { fill: none; stroke: var(--sage-light); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) 0.15s; }
.dash-app.in .lch .trace { stroke-dashoffset: 0; }
.lch .tip { opacity: 0; transition: opacity 0.5s var(--ease) 1.4s; }
.dash-app.in .lch .tip { opacity: 1; }
.lch .tip-pulse { animation: dcLive 2.6s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }

/* findings table */
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.dash-table th { text-align: left; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds); padding: 0 10px 8px 0; border-bottom: 1px solid var(--dl); }
.dash-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--dl); color: var(--dm); white-space: nowrap; }
.dash-table tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.dash-table .id { font-weight: 700; color: var(--dt); font-variant-numeric: tabular-nums; }
.dash-table .num, .dash-table th.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--dt); }
.dash-table .chip { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.28em 0.75em; border-radius: 100px; }
.dash-table .chip.ok { color: var(--mint); background: rgba(161, 188, 152, 0.20); }
.dash-table .chip.mid { color: var(--dt); background: rgba(255, 255, 255, 0.10); }
.dash-table .chip.low { color: var(--ds); background: rgba(255, 255, 255, 0.05); }

/* ---------- 4. Four seats (solutions persona tabs) ---------- */
.seats-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: clamp(24px, 3.4vw, 38px); }
.seats-head .eyebrow { justify-content: center; }
.seats-head .h2 { margin-top: 12px; }
.seats-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(22px, 3vw, 32px); }
.seats-tab {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 100px; padding: 0.7em 1.25em; background: #fff;
  scroll-margin-top: 110px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.seats-tab b { font-weight: 700; color: var(--sage-text); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.seats-tab:hover { color: var(--ink); border-color: var(--sage); }
.seats-tab.on { color: var(--ink); border-color: var(--sage); background: rgba(119, 136, 115, 0.10); box-shadow: 0 6px 18px -8px rgba(119, 136, 115, 0.5); }
.seats-tab.on b { color: var(--pine); }

/* Carousel viewport: arrows flank the stage in reserved side rails, never overlapping content */
.seats-viewport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.6vw, 20px); }
.seats-arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line-strong); color: var(--pine);
  box-shadow: var(--shadow-md);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.seats-arrow svg { width: 20px; height: 20px; }
.seats-arrow:hover { color: #fff; background: var(--pine); border-color: var(--pine); transform: scale(1.06); }
.seats-arrow:active { transform: scale(0.95); }
.seats-arrow:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
html:not(.seats-js) .seats-arrow { display: none; }
html:not(.seats-js) .seats-viewport { display: block; }

.seats-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(168deg, #FFFFFF 0%, var(--cream) 130%);
  box-shadow: var(--shadow-md);
}
.seats-word { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.seats-word span {
  position: absolute; right: 3%; top: 6%;
  font-size: clamp(4rem, 11vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(119, 136, 115, 0.14);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.seats-word span.on { opacity: 1; }
html:not(.seats-js) .seats-word { display: none; }

.seats-panel {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4.5vw, 60px); align-items: center;
  padding: clamp(28px, 4vw, 52px);
}
html.seats-js .seats-panel:not(.on) { display: none; }
html:not(.seats-js) .seats-panel + .seats-panel { border-top: 1px solid var(--line); }

.seats-copy .eyebrow { color: var(--sage-text); }
.seats-copy .eyebrow svg { width: 17px; height: 17px; margin-right: 0.45em; }
.seats-title { margin-top: 0.7rem; font-size: clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing: -0.02em; color: var(--ink); max-width: 17ch; }
.seats-lede { margin-top: 0.9rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 50ch; }
.seats-points { margin-top: 1.3rem; display: grid; gap: 0.8rem; }
.seats-points li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.94rem; color: var(--muted); line-height: 1.5; }
.seats-points li b { color: var(--ink); font-weight: 600; }
.seats-points svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sage); }
.seats-copy .btn { margin-top: 1.6rem; }

@media (prefers-reduced-motion: no-preference) {
  html.seats-js .seats-panel.on .seats-copy > * { animation: seatsUp 0.5s var(--ease) both; }
  html.seats-js .seats-panel.on .seats-copy > *:nth-child(2) { animation-delay: 0.06s; }
  html.seats-js .seats-panel.on .seats-copy > *:nth-child(3) { animation-delay: 0.12s; }
  html.seats-js .seats-panel.on .seats-copy > *:nth-child(4) { animation-delay: 0.18s; }
  html.seats-js .seats-panel.on .seats-copy > *:nth-child(5) { animation-delay: 0.24s; }
  html.seats-js .seats-panel.on .seats-art { animation: seatsArt 0.6s var(--ease) 0.1s both; }
}
@keyframes seatsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes seatsArt { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }

/* persona artifacts (light) */
.seats-doc { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow-sm); }
.seats-dochead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.seats-dochead .t { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.seats-pill { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage-text); background: var(--cream); border: 1px solid var(--sand); border-radius: 100px; padding: 0.34em 0.8em; }
.seats-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0.72rem 0; border-bottom: 1px dashed var(--line); font-size: 0.9rem; }
.seats-row .desc { color: var(--ink); }
.seats-row .code { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.seats-row .flag { flex: none; font-weight: 700; font-size: 0.8rem; padding: 0.25em 0.72em; border-radius: 100px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seats-row .f-ok { color: var(--ok); background: var(--ok-bg); }
.seats-row .f-hot { color: var(--flag); background: var(--flag-bg); }
.seats-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.seats-foot .amt { font-size: 1.5rem; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.seats-kv { display: grid; gap: 0.55rem; margin-top: 14px; }
.seats-kv .kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 0.72rem 0.95rem; font-size: 0.92rem; color: var(--ink); background: #fff; }
.seats-kv .val { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--muted); }
.seats-kv .kv.hot { border-color: var(--sage); background: rgba(119, 136, 115, 0.08); }
.seats-kv .kv.hot .val { color: var(--pine); }
.seats-steps { display: grid; gap: clamp(15px, 2vw, 20px); margin-top: 14px; }
.seats-step { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.seats-step .n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-weight: 700; font-size: 0.82rem; color: var(--pine); background: var(--cream); border: 1px solid var(--sand); font-variant-numeric: tabular-nums; }
.seats-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: calc(-1 * clamp(15px, 2vw, 20px)); width: 2px; background: linear-gradient(to bottom, var(--sage-light), transparent); }
.seats-step h4 { font-size: 1rem; color: var(--ink); }
.seats-step p { margin-top: 0.25rem; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.seats-step a { color: var(--pine); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.seats-radar { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: radial-gradient(90% 90% at 50% 50%, rgba(161, 188, 152, 0.12), transparent 70%), var(--cream); box-shadow: var(--shadow-sm); }
.seats-radar .blk { position: absolute; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
.seats-radar .sweep { position: absolute; inset: -28%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(119, 136, 115, 0.16) 96%, rgba(119, 136, 115, 0.34) 100%); animation: seatsSweep 8s linear infinite; }
@keyframes seatsSweep { to { transform: rotate(360deg); } }
.seats-radar .rdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 10px rgba(119, 136, 115, 0.5); animation: dcLive 2.6s var(--ease) infinite; }
.seats-radar .badge { position: absolute; display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.72rem; font-weight: 700; color: var(--ok); background: #fff; border: 1px solid var(--sage); border-radius: 100px; padding: 0.4em 0.8em; box-shadow: var(--shadow-md); }
/* centered focal badge: the recoveries all resolve to one mark */
.seats-radar .badge.center { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font-size: 0.8rem; padding: 0.5em 1em; border-color: var(--pine); box-shadow: var(--shadow-lg); }
.seats-radar.centered::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(119, 136, 115, 0.35); animation: dcLive 2.6s var(--ease) infinite; }
.seats-radar .badge svg { width: 13px; height: 13px; }

/* ---------- Responsive for ported sections ---------- */
@media (max-width: 1100px) {
  .dw-donut, .dw-bar { grid-column: span 6; }
  .dw-stat { grid-column: span 5; }
  .dw-line { grid-column: span 7; }
  .dw-table { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .izm-track { height: auto; }
  .izm-pin { position: static; height: auto; overflow: visible; flex-direction: column; gap: 16px; padding: clamp(28px, 6vw, 44px) 16px; }
  .ins-scene { width: 100%; min-height: 0; align-items: stretch; padding: clamp(28px, 6vw, 44px) 16px; transform: none !important; }
  .ins-scene-copy { max-width: none; margin-inline: auto; }
  .ins-card { position: static; width: 100%; margin-left: 0; box-shadow: var(--shadow-md); transform: none !important; }
  .meth-stage { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .meth-token { order: -1; }
  .meth-card { width: 100%; max-width: 460px; }
  .meth-chip.mc-1 { left: 8%; top: 3%; }
  .meth-chip.mc-2 { left: 12%; top: 24%; bottom: auto; }
  .meth-chip.mc-3 { right: 8%; top: 4%; }
  .meth-chip.mc-4 { right: 11%; top: 25%; bottom: auto; }
  .seats-panel { grid-template-columns: 1fr; gap: 26px; }
  .seats-word span { font-size: clamp(3.2rem, 15vw, 6rem); }
}
@media (max-width: 960px) {
  .dash-side { display: none; }
  .dash-grid { grid-template-columns: 1fr; }
  .dw-donut, .dw-bar, .dw-stat, .dw-line, .dw-table { grid-column: auto; }
  .dash-table { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  .ins-scene-copy .h2 { font-size: 1.7rem; }
  .meth-chip { width: 42px; height: 42px; }
  .meth-chip svg { width: 18px; height: 18px; }
  .seats-tab { padding: 0.6em 1em; font-size: 0.82rem; }
  .seats-panel { padding: 22px 18px; }
  .seats-viewport { gap: 4px; }
  .seats-arrow { width: 38px; height: 38px; }
  .seats-arrow svg { width: 17px; height: 17px; }
}

/* ---------- Security: dark hero + the vault ----------
   The vault is this page's signature: a sticky ring diagram that lights
   one lock per safeguard as the matching item crosses the viewport
   center, echoed by giant rings across the section background that
   light in sync and slowly rotate with scroll (--vspin/--vaultp are
   set from js/main.js). At lock six the vault seals. */
.sec-hero {
  position: relative; overflow: clip; color: #fff; text-align: center;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(161, 188, 152, 0.30), transparent 60%),
    radial-gradient(900px 700px at -8% 112%, rgba(119, 136, 115, 0.45), transparent 55%),
    linear-gradient(168deg, var(--pine-deep) 0%, var(--pine) 55%, #566349 100%);
  padding-top: clamp(112px, 15vh, 156px);
  padding-bottom: clamp(44px, 6vw, 76px);
}
.sec-hero .container { position: relative; }
.sec-hero-fx { position: absolute; inset: 0; pointer-events: none; }
.hero-pulse {
  position: absolute; left: 50%; top: 58%; width: 520px; height: 520px;
  margin: -260px 0 0 -260px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: sec-pulse 7s var(--ease) infinite;
  opacity: 0;
}
.hero-pulse:nth-child(2) { animation-delay: 2.33s; }
.hero-pulse:nth-child(3) { animation-delay: 4.66s; }
@keyframes sec-pulse {
  0% { transform: scale(0.45); opacity: 0; }
  18% { opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero-orbit {
  position: absolute; left: 50%; top: 58%; width: 720px; height: 720px;
  margin: -360px 0 0 -360px;
}
.hero-orbit circle {
  stroke: rgba(255, 255, 255, 0.14); stroke-width: 1;
  stroke-dasharray: 3 14; stroke-linecap: round;
}
.hero-orbit { animation: sec-orbit 80s linear infinite; }
.hero-orbit-b { width: 560px; height: 560px; margin: -280px 0 0 -280px; animation-direction: reverse; animation-duration: 60s; }
.hero-orbit-b circle { stroke: rgba(255, 255, 255, 0.10); stroke-dasharray: 2 10; }
@keyframes sec-orbit { to { transform: rotate(360deg); } }

.sec-hero .eyebrow { color: var(--mint); justify-content: center; margin-bottom: 16px; }
.sec-hero .display { color: #fff; max-width: 18em; margin-inline: auto; }
.sec-hero .lead { color: rgba(255, 255, 255, 0.86); max-width: 44rem; margin: 18px auto 0; }
.sec-hero .scroll-hint { color: var(--mint); }
.sec-hero .scroll-hint-arrow { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: rgba(255, 255, 255, 0.08); }
.sec-hero .scroll-hint:hover .scroll-hint-arrow { background: rgba(255, 255, 255, 0.2); }

.sec-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.sec-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; color: #fff;
  padding: 0.55em 1.05em; border-radius: 100px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
}
.sec-chip svg { width: 15px; height: 15px; color: var(--sage-light); flex: none; }

/* The vault: background layer of giant rings behind everything */
.sec-vault { position: relative; overflow: clip; --vaultp: 0; --vspin: 0; }
.sec-vault .container { position: relative; }
.vault-bg { position: absolute; inset: 0; pointer-events: none; }
.vbg {
  position: absolute; left: 24%; top: 50%;
  width: clamp(900px, 90vw, 1500px); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.vbg-spin {
  transform-box: fill-box; transform-origin: center;
  transform: rotate(calc(var(--vspin) * 1deg));
}
.vbg-spin-rev { transform: rotate(calc(var(--vspin) * -1.6deg)); }
.vault-bring {
  fill: none; stroke: var(--line); stroke-width: 1.4; opacity: 0.5;
  stroke-dasharray: 4 18; stroke-linecap: round;
  transition: stroke .7s var(--ease), opacity .7s var(--ease);
}
.vault-bring.lit { stroke: var(--sage); opacity: 0.55; }
.vault-glow {
  position: absolute; left: 24%; top: 50%; width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(161, 188, 152, 0.22), transparent 70%);
  opacity: calc(var(--vaultp) * 1); transition: opacity .7s var(--ease);
}

.sec-vault .vault-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 84px); align-items: start;
}
.vault-sticky { position: sticky; top: 104px; padding-block: 12px; }
.vault-rings { display: block; width: min(100%, 400px); margin-inline: auto; }
.vault-ring {
  fill: none; stroke: var(--line-strong); stroke-width: 1.5; opacity: 0.55;
  transition: stroke .5s var(--ease), stroke-width .5s var(--ease), opacity .5s var(--ease);
}
.vault-ring.lit { stroke: var(--sage); opacity: 1; }
.vault-ring.now { stroke: var(--pine); stroke-width: 2.5; }
.vault-core { stroke: var(--pine); fill: none; stroke-width: 1.6; }
.vault-caption { position: relative; height: 1.5em; margin-top: 16px; text-align: center; }
.vault-label {
  position: absolute; inset: 0; opacity: 0; transform: translateY(6px);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-text); font-variant-numeric: tabular-nums;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.vault-label.on { opacity: 1; transform: none; }

.vault-meter {
  width: min(72%, 280px); height: 3px; margin: 14px auto 0;
  border-radius: 100px; background: var(--line); overflow: hidden;
}
.vault-meter-fill {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--sage), var(--pine));
  width: calc(var(--vaultp) * 100%);
  transition: width .5s var(--ease);
}
.vault-readout {
  margin-top: 10px; text-align: center;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.vault-sealed-badge {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; margin: 12px auto 0; padding: 0.45em 1em;
  border-radius: 100px; font-size: 0.8rem; font-weight: 700;
  color: var(--pine); background: var(--mint); border: 1px solid var(--sage-light);
  opacity: 0; transform: translateY(6px) scale(0.94);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.vault-sealed-badge svg { width: 15px; height: 15px; }
.sec-vault.sealed .vault-sealed-badge { opacity: 1; transform: none; }
.sec-vault.sealed .vault-core { animation: vault-seal 0.9s var(--ease) 1; }
@keyframes vault-seal {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.sec-vault.sealed .vault-core { transform-box: fill-box; transform-origin: center; }

.vault-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: 26px; }
.vault-kicker { display: flex; align-items: center; gap: 12px; }
.vault-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wash); color: var(--pine); border: 1px solid var(--line);
}
.vault-ico svg { width: 20px; height: 20px; }
.vault-no { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-text); font-variant-numeric: tabular-nums; }
.vault-item h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -0.018em; margin-top: 14px; }
.vault-item p { margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 34rem; }
.vault-item .vault-fact {
  margin-top: 16px; padding: 10px 14px; max-width: 34rem;
  border-left: 3px solid var(--sage); border-radius: 0 10px 10px 0;
  background: var(--wash); color: var(--ink); font-size: 0.92rem; font-weight: 600;
}

/* Stats band */
.sec-stats { background: var(--wash); }

/* Follow one file */
.sj-track {
  position: relative; margin-top: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}
.sj-path {
  position: absolute; left: 26px; right: 26px; top: 26px; height: 2px;
  background: linear-gradient(90deg, var(--sage), var(--pine));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.4s var(--ease) 0.25s;
}
.reveal.in .sj-path { transform: scaleX(1); }
.sj-step { position: relative; }
.sj-node {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--pine);
  border: 1.5px solid var(--sage); box-shadow: var(--shadow-sm);
}
.sj-node svg { width: 22px; height: 22px; }
.sj-step h3 { margin-top: 14px; font-size: 1.05rem; letter-spacing: -0.01em; }
.sj-step p { margin-top: 8px; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

/* Always and never */
.vows-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 26px); margin-top: clamp(26px, 3.5vw, 40px);
}
.vow-card {
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.vow-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; letter-spacing: -0.01em;
}
.vow-title svg { width: 20px; height: 20px; flex: none; }
.vow-always { color: var(--pine); }
.vow-never { color: var(--ink); }
.vow-never svg { color: var(--muted); }
.vow-card ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.vow-card li {
  position: relative; padding-left: 18px;
  color: var(--muted); font-size: 0.96rem; line-height: 1.55;
}
.vow-card li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage-light);
}
.vow-never ~ ul li::before { background: var(--line-strong); }

@media (max-width: 1020px) {
  .sec-vault .vault-grid { grid-template-columns: 1fr; }
  .vault-sticky { display: none; }
  .vault-item { min-height: 0; padding-block: 30px; }
  .vbg, .vault-glow { left: 50%; }
  .sj-track { grid-template-columns: 1fr; gap: 26px; }
  .sj-path {
    left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--sage), var(--pine));
    transform: scaleY(0); transform-origin: top center;
  }
  .reveal.in .sj-path { transform: scaleY(1); }
  .sj-step { padding-left: 0; }
  .vows-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero-pulse { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .hero-orbit { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
  .hero-orbit-b { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
}
@media (prefers-reduced-motion: reduce) {
  .vault-ring, .vault-bring, .vault-label, .vault-meter-fill, .vault-glow, .vault-sealed-badge { transition: none; }
  .hero-pulse, .hero-orbit, .sec-vault.sealed .vault-core { animation: none; }
  .hero-pulse { opacity: 0.25; transform: scale(1); }
  .sj-path, .reveal.in .sj-path { transform: none; transition: none; }
}