/* Silong Strategies: monochrome editorial on a cool canvas.
   Atkinson Hyperlegible Next at a light weight for display, Atkinson Mono for everything functional, one violet for links,
   black pills for actions. Token names below the first block are kept from the earlier
   theme so existing markup keeps working. */
:root {
  /* ---- Palette ---- */
  --paper: #ffffff;        /* cards, panels */
  --canvas: #f3f6f9;       /* page background */
  --bone: #e9edf3;         /* hairlines, card outlines */
  --fog: #dce2ea;          /* secondary borders, inputs, table rules */
  --pencil: #a8b4bf;       /* decorative only: fails AA as text */
  --steel: #516880;        /* secondary text */
  --lampblack: #1b2128;    /* primary text */
  --graphite-surface: #262626; /* dark cards and bands */
  --violet: #0027b3;       /* links, focus: the only chromatic UI color */
  --sky-wash: #95d0ff;

  /* ---- Legacy names, remapped ---- */
  --parchment: var(--canvas);
  --periwinkle: var(--bone);
  --off-black: var(--lampblack);
  --ink: #000000;
  --graphite: var(--steel);
  --smoke: #5d6f83;        /* labels: 4.9:1 on canvas */
  --ash: var(--fog);
  --ash-soft: var(--bone);
  --lake-blue: var(--violet);

  /* ---- Market-view hues (data, not chrome) ---- */
  --bull: #1f7a4d;
  --neutral: #9a6b1f;
  --bear: #34558c;
  --loss: #b3402e;

  /* ---- Type ---- */
  --display: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono: var(--sans);     /* legacy name: body and UI text */

  /* ---- Elevation ---- */
  --shadow-card: rgba(0, 0, 0, 0.08) 0px 1px 10px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.06) 0px 24px 24px 0px;
  --shadow-glow: rgba(255, 196, 250, 0.25) 8px -8px 20px 0px, rgba(56, 205, 255, 0.25) -8px 8px 30px 0px;

  /* ---- Layout ---- */
  --page: 1248px;          /* 1200 content + gutters */
  --gutter: 24px;
  --radius-card: 16px;
  --radius-sm: 4px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--lampblack);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  color: #000;
}
h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: #000;
}
h1 em, h2 em { font-style: italic; }

a { color: inherit; }
main p a:not(.btn), .faq a, .table-note a, .callout a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
img { max-width: 100%; display: block; }

/* Visible keyboard focus (WCAG 2.4.7) */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 100;
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
}
/* Primary: matte black pill, the only element with a colored glow */
.btn-primary { background: #000; color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { background: var(--lampblack); transform: translateY(-1px); }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: var(--lampblack); }
/* Ghost: white fill, black outline */
.btn-ghost { background: var(--paper); color: #000; border-color: #000; }
.btn-ghost:hover { background: #000; color: #fff; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Eyebrow: a small sentence-case tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--steel);
  background: var(--paper);
  border: 1px solid var(--bone);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: 20px;
}

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(243, 246, 249, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--bone); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand .logo { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand .name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #000;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  color: var(--lampblack);
  white-space: nowrap;
  transition: opacity .2s var(--ease);
}
/* Dim siblings while one link is hovered */
.nav-links:hover a:not(.btn):not(:hover) { opacity: .55; }
.nav-links .btn { display: none; }
.nav-links .btn-primary { color: #fff; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-links .login {
  border: 1.5px solid #000;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: 600;
  background: var(--paper);
}
.nav-links .login:hover { background: #000; color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .btn { min-height: 40px; padding: 10px 20px; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--fog);
  border-radius: var(--radius-pill);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: #000; }

/* ===================== Hero ===================== */
.hero {
  position: relative;
  padding: 112px 0 80px;
}
.hero .wash { display: none; }  /* flat system: no decorative gradients */
.hero-inner { position: relative; text-align: center; max-width: 920px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(44px, 7vw, 80px);
  line-height: 1.05;
  margin: 0 0 24px;
}
.hero .sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--steel);
  max-width: 620px;
  margin: 0 auto 32px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
/* Feature row under the CTAs: plain inline labels, no chrome */
.hero-note {
  font-size: 14px;
  color: var(--steel);
  margin: 0;
  text-wrap: balance;
}

/* ---- Three market-view cards ---- */
.views {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.view-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.view-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.vdot { width: 8px; height: 8px; border-radius: 50%; }
.view-name { font-size: 14px; font-weight: 500; color: #000; }
.view-count { font-family: var(--display); font-weight: 300; font-size: 48px; line-height: 1; margin-bottom: 8px; }
.view-count span { font-family: var(--sans); font-size: 14px; color: var(--steel); margin-left: 8px; }
.view-desc { font-size: 14px; color: var(--steel); margin: 0; }

/* ===================== Stat strip ===================== */
.stats { padding: 0 0 96px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.stat { padding: 32px 28px; border-left: 1px solid var(--bone); }
.stat:first-child { border-left: 0; }
.stat .num { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4vw, 52px); line-height: 1; color: #000; margin-bottom: 10px; }
.stat .num span { color: var(--pencil); }
.stat .label { font-size: 14px; color: var(--steel); }

/* ===================== Sections ===================== */
.section { padding: 96px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 18px; }
.section-head p { font-size: 16px; line-height: 1.55; color: var(--steel); margin: 0 auto; max-width: 600px; }

.rule { border: 0; border-top: 1px solid var(--fog); margin: 0; }

/* ---- Intro + three points ---- */
.about-intro { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.about-intro h2 { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 20px; }
.about-intro .lede { font-size: 17px; line-height: 1.6; color: var(--steel); margin: 0 auto; max-width: 620px; }
.about-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-point {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.about-point .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--canvas);
  border-radius: 50%;
  margin-bottom: 20px;
}
.about-point .ic svg { width: 16px; height: 16px; }
.about-point strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #000;
  margin-bottom: 8px;
}
.about-point span { display: block; font-size: 14px; line-height: 1.55; color: var(--steel); }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.step .n {
  font-family: var(--display);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--pencil);
  margin-bottom: 28px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0; }

/* Steps sit on a dark band on .approach sections */
.section.approach { background: var(--graphite-surface); color: #fff; }
/* Only headings that sit directly on the dark band; white cards inside it keep dark text */
.section.approach .section-head h2, .section.approach .about-intro h2,
.section.approach .step h3, .section.approach .feature h3 { color: #fff; }
.section.approach .section-head p { color: #b9c4cf; }
.section.approach .eyebrow { background: transparent; border-color: rgba(255,255,255,.18); color: #c9d2db; }
.section.approach .step,
.section.approach .feature { background: rgba(255,255,255,.06); box-shadow: none; border: 1px solid rgba(255,255,255,.10); }
.section.approach .step .n { color: #7d8b99; }
.section.approach .step p,
.section.approach .feature p { color: #b9c4cf; }
.section.approach .feature .fic { background: rgba(255,255,255,.10); }
.section.approach .feature .fic svg { stroke: #fff; }
.section.approach a:not(.btn) { color: #fff; }
.section.approach .explorer { color: var(--lampblack); }

/* ---- Feature grid ---- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.feature .fic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--canvas);
  border-radius: 50%;
  margin-bottom: 20px;
}
.feature .fic svg { width: 16px; height: 16px; stroke: #000; fill: none; }
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.feature p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0; }

/* ===================== Explorer ===================== */
.explorer {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.exp-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--canvas);
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.exp-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--steel);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.exp-toggle button:hover { color: #000; }
.exp-toggle button.active { background: #000; color: #fff; }
.exp-toggle .edot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.exp-toggle button.active .edot { background: var(--thesis, #fff); }

.exp-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }

.exp-visual {
  border: 1px solid var(--bone);
  border-radius: 12px;
  padding: 24px;
}
.exp-vhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.exp-name { font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1.1; color: #000; }
.exp-cap { text-align: right; }
.exp-cap label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin-bottom: 6px;
}
.exp-cap-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fog);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--paper);
}
.exp-cap-field span { color: var(--steel); font-size: 14px; }
.exp-cap-field input {
  width: 82px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #000;
  text-align: right;
  padding: 0;
}
.exp-cap-field input:focus { outline: none; }
.exp-cap-field:focus-within { border-color: #000; }

.exp-desc { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0 0 20px; max-width: 54ch; }
.exp-chart { display: block; width: 100%; height: auto; font-family: var(--sans); }
.exp-chart text { font-size: 0.95em; }
.exp-chart .be-cap { font-size: 0.85em; }

.exp-scn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.exp-scn-card {
  border: 1px solid var(--bone);
  border-radius: 12px;
  padding: 14px 16px;
}
.exp-scn-card > span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin-bottom: 8px;
}
.exp-scn-card b { display: block; font-family: var(--display); font-size: 28px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exp-scn-card em { display: block; font-style: normal; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.exp-scn-card em.pos { color: var(--bull); }
.exp-scn-card em.neg { color: var(--loss); }
.exp-scn-card em.zero { color: var(--steel); }

.exp-list { border: 1px solid var(--bone); border-radius: 12px; padding: 20px 16px; }
.exp-list-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--steel);
  margin: 0 8px 12px;
}
.exp-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 12px 14px;
  margin-bottom: 4px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.exp-row:hover { border-color: var(--bone); }
.exp-row.active { background: var(--thesis-tint, var(--bone)); border-color: transparent; }
.exp-row b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  margin-bottom: 4px;
}
.exp-row span { display: block; font-size: 13px; color: var(--steel); }
.exp-more { font-size: 13px; color: var(--steel); padding: 10px 14px 0; }
.exp-foot { font-size: 12px; color: var(--steel); margin: 20px 0 0; }

/* ===================== CTA ===================== */
.cta-card {
  background: var(--graphite-surface);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-card h2 { font-size: clamp(34px, 4.2vw, 48px); color: #fff; margin-bottom: 16px; }
.cta-card > div > p { font-size: 16px; line-height: 1.55; color: #b9c4cf; margin: 0; max-width: 46ch; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta-card .btn-dark { background: #fff; color: #000; }
.cta-card .btn-dark:hover { background: var(--bone); }
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #b9c4cf;
}
.contact-line svg { width: 16px; height: 16px; stroke: #b9c4cf; fill: none; flex: none; }
.contact-line a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.contact-line a:hover { text-decoration-color: #fff; }

/* ===================== Footer ===================== */
footer { border-top: 1px solid var(--fog); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 16px 0 0; max-width: 46ch; }
.footer-col h2 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #000;
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--steel);
  text-decoration: none;
  margin-bottom: 10px;
}
.footer-col a:hover { color: #000; }
.disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--steel);
  border-top: 1px solid var(--fog);
  padding-top: 28px;
  margin: 0 0 28px;
}
.disclaimer strong { color: var(--lampblack); font-weight: 600; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--fog);
  padding-top: 24px;
}
.footer-bottom p { font-size: 12px; color: var(--steel); margin: 0; }

/* ===================== Reveal ===================== */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ===================== Signature motion ===================== */
/* 1. Order-fill headlines (classes added by site.js, never without JS) */
.fill { --w-dim: var(--pencil); --w-bar: #000; }
.section.approach .fill, .cta-card .fill { --w-dim: rgba(255,255,255,.32); --w-bar: #fff; }
.fill .w {
  position: relative;
  display: inline-block;
  color: var(--w-dim);
  transition: color .45s var(--ease) calc(var(--i) * 70ms + 260ms);
}
.fill .w::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 2px;
  background: var(--w-bar);
  clip-path: inset(0 100% 0 0);
}
.fill.filled .w { color: inherit; }
.fill.filled .w::after { animation: order-fill .7s var(--ease) calc(var(--i) * 70ms) both; }
@keyframes order-fill {
  0%   { clip-path: inset(0 100% 0 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* 2. Steps as a pipeline */
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  border-radius: 2px;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
}
.section.approach .step::before { background: #fff; }
.steps.run .step::before { transform: scaleX(1); transition: transform .6s var(--ease) calc(var(--i) * 450ms + 200ms); }
.step .n { transition: color .4s var(--ease) calc(var(--i) * 450ms + 500ms); }
.steps.run .step .n { color: #000; }
.section.approach .steps.run .step .n { color: #fff; }
@media (min-width: 1041px) {
  /* Connector across the 24px gap, with a pulse that walks the chain */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px; right: -25px;
    width: 26px; height: 2px;
    background:
      linear-gradient(90deg, transparent, var(--pulse, #000) 50%, transparent) no-repeat -26px 0 / 26px 2px,
      var(--fog);
  }
  .section.approach .step:not(:last-child)::after {
    --pulse: #fff;
    background:
      linear-gradient(90deg, transparent, var(--pulse) 50%, transparent) no-repeat -26px 0 / 26px 2px,
      rgba(255,255,255,.16);
  }
  .steps.run .step:not(:last-child)::after { animation: pipe-pulse 4.5s linear calc(var(--i) * 1.5s + 2s) infinite; }
}
@keyframes pipe-pulse {
  0%       { background-position: -26px 0, 0 0; }
  22%, 100% { background-position: 26px 0, 0 0; }
}

/* 3. Live status dot next to Manila */
.live-dot {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1f9d5c;
  vertical-align: 1px;
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1f9d5c;
  animation: live-ring 2.8s var(--ease) infinite;
}
@keyframes live-ring {
  0%   { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* 4. Payoff line draws itself the first time the explorer comes into view */
#spChart.pre-draw #spCurve { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
#spChart.pre-draw #spRibPos, #spChart.pre-draw #spRibNeg, #spChart.pre-draw #spDots, #spChart.pre-draw #spBand { opacity: 0; }
#spChart.drawing #spCurve { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1); }
#spChart.drawing #spBand { opacity: .07; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spRibPos { opacity: .14; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spRibNeg { opacity: .11; transition: opacity .6s ease 1.1s; }
#spChart.drawing #spDots { opacity: 1; transition: opacity .4s ease 1.4s; }

/* 5. Limits first: outline drawn, then the card fills (classes from site.js) */
.limit { position: relative; }
.limit-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.limit-line rect {
  x: 0.75px; y: 0.75px;
  width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  rx: 16px;
  fill: none;
  stroke: #000;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.section.approach .limit-line rect { stroke: #fff; }
.limit:not(.set) { background-color: transparent !important; box-shadow: none !important; }
.limit:not(.set) > :not(.limit-line) { opacity: 0; }
.limit.set .limit-line rect { animation: limit-draw 1.3s cubic-bezier(.6, 0, .3, 1) calc(var(--k) * 110ms) backwards; }
.limit.set { animation: limit-fill .45s var(--ease) calc(var(--k) * 110ms + .5s) backwards; }
.limit.set > :not(.limit-line) { animation: limit-content .45s var(--ease) calc(var(--k) * 110ms + .55s) backwards; }
@keyframes limit-draw {
  0%   { stroke-dashoffset: 1; opacity: .75; }
  50%  { stroke-dashoffset: 0; opacity: .75; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes limit-fill { from { background-color: transparent; box-shadow: none; } }
@keyframes limit-content { from { opacity: 0; transform: translateY(4px); } }

/* 6. Netting: the two sides of a position meet in the middle */
.net-wrap { overflow-x: clip; }
.net:not(.set) > * { opacity: 0; }
.net.set > :nth-child(1) { animation: net-left .8s var(--ease) backwards; }
.net.set > :nth-child(2) { animation: net-mid .6s var(--ease) .25s backwards; }
.net.set > :nth-child(3) { animation: net-right .8s var(--ease) backwards; }
@keyframes net-left  { from { opacity: 0; transform: translateX(-56px); } }
@keyframes net-right { from { opacity: 0; transform: translateX(56px); } }
@keyframes net-mid   { from { opacity: 0; transform: scale(.96); } }

/* 7. Ledger: rows post one at a time with a faint flash */
.ledger:not(.set) > * { opacity: 0; }
.ledger.set > * { animation: ledger-post .9s var(--ease) calc(var(--r) * 90ms) backwards; }
@keyframes ledger-post {
  0%   { opacity: 0; background-color: rgba(0, 39, 179, .09); }
  30%  { opacity: 1; background-color: rgba(0, 39, 179, .09); }
  /* no 100%: it eases back to whatever the row's own background is (phone tier cards are white) */
}

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .step::after { animation: none !important; }
  .step::before { transform: scaleX(1); }
}

/* ===================== Sub-page additions ===================== */
.hero.page { padding: 96px 0 64px; }
.hero.page h1 { font-size: clamp(40px, 6vw, 72px); }

/* Two-column text block */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.split .section-head { margin: 0; text-align: left; }
.split .section-head p { margin: 0; }
.facts {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 4px 24px;
  margin: 0;
}
.fact { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--bone); }
.fact:last-child { border-bottom: 0; }
.fact dt { font-size: 14px; font-weight: 500; color: #000; }
.fact dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--steel); }
.fact dd strong { color: #000; font-weight: 600; }

/* Tier table */
.table-wrap { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow-x: auto; }
.tier-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.tier-table th, .tier-table td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--bone); }
.tier-table thead th { font-size: 12px; font-weight: 600; color: var(--steel); }
.tier-table tbody tr:last-child td, .tier-table tbody tr:last-child th { border-bottom: 0; }
.tier-table tbody th { font-size: 16px; font-weight: 500; color: #000; }
.tier-table td { color: var(--steel); }
.tier-table td.num { font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.table-note { font-size: 13px; line-height: 1.6; color: var(--steel); margin: 16px auto 0; max-width: 90ch; text-align: center; }

/* Callout */
.callout { background: var(--paper); border-left: 3px solid #000; border-radius: 0 12px 12px 0; box-shadow: var(--shadow-card); padding: 20px 24px; font-size: 14px; line-height: 1.6; color: var(--steel); margin-top: 32px; }
.callout strong { color: #000; font-weight: 600; }

/* Page cards linking the offerings */
.page-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.page-cards.four { grid-template-columns: repeat(2, 1fr); }
.page-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.page-card .k { align-self: flex-start; font-size: 12px; font-weight: 500; color: var(--steel); border: 1px solid var(--bone); border-radius: var(--radius-sm); padding: 4px 10px; margin-bottom: 20px; }
.page-card h3 { font-family: var(--display); font-weight: 300; font-size: 36px; line-height: 1.1; margin-bottom: 12px; }
.page-card p { font-size: 14px; line-height: 1.55; color: var(--steel); margin: 0 0 20px; flex: 1; }
.page-card .go { font-size: 14px; font-weight: 600; color: var(--violet); }
.page-card:hover .go .arrow { transform: translateX(3px); }
.page-card .go .arrow { display: inline-block; transition: transform .2s var(--ease); }

/* FAQ */
.faq { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0 24px; }
.faq details { border-bottom: 1px solid var(--bone); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: 16px; font-weight: 500; color: #000; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 300; color: var(--steel); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 20px; max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--steel); }

/* Tag list */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span { font-size: 12px; font-weight: 500; border: 1px solid var(--bone); border-radius: var(--radius-sm); padding: 4px 10px; color: var(--steel); background: var(--paper); }

/* Investor-portal link under the home hero buttons */
.hero-login { font-size: 14px; color: var(--steel); margin: -4px 0 20px; }
.hero-login a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hero-login .arrow { display: inline-block; transition: transform .2s var(--ease); }
.hero-login a:hover .arrow { transform: translateX(3px); }
.hero-note span { white-space: nowrap; }
.hero-note .sep { font-style: normal; color: var(--pencil); }

/* ===================== Responsive ===================== */
@media (min-width: 1440px) {
  :root { --gutter: 32px; --page: 1264px; }
}
@media (max-width: 1180px) and (min-width: 1081px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
}
@media (max-width: 1040px) {
  .exp-body { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split .section-head { text-align: center; margin: 0 auto; }
  .split .section-head p { margin: 0 auto; }
  .page-cards, .page-cards.four { grid-template-columns: 1fr; }
}
/* Hamburger nav: five links no longer fit on one line below ~1080px */
@media (max-width: 1080px) {
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--fog);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid var(--bone); font-size: 16px; }
  .nav-links:hover a:not(.btn):not(:hover) { opacity: 1; }
  .nav-links .login { border: 1.5px solid #000; border-radius: var(--radius-pill); padding: 12px 24px; margin-top: 20px; text-align: center; }
  .nav-links .btn { display: inline-flex; margin-top: 12px; border-bottom: 0; }
  .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 880px) {
  .views { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px 20px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--bone); }
  .about-points { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  :root { --gutter: 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 64px 0 48px; }
  .hero.page { padding: 56px 0 40px; }
  .section-head, .about-intro { margin-bottom: 40px; }
  .why-grid, .steps { grid-template-columns: 1fr; }
  .exp-chart .x-cap { display: none; }
  .explorer { padding: 16px; }
  .exp-visual, .exp-list { padding: 18px 14px; }
  .exp-vhead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .exp-cap { text-align: left; }
  .exp-scn { grid-template-columns: 1fr; }
  .exp-toggle { width: 100%; justify-content: space-between; }
  .exp-toggle button { flex: 1; justify-content: center; padding: 10px; }
  .fact { grid-template-columns: 1fr; gap: 4px; }
  .hero-login { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 24px; }
  .hero-note { line-height: 1.8; }
  .hero-note .sep { display: none; }
  .hero-note span { display: block; }

  /* Tier table becomes stacked cards on phones */
  .table-wrap { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .tier-table { min-width: 0; }
  .tier-table thead { display: none; }
  .tier-table, .tier-table tbody, .tier-table tr, .tier-table th, .tier-table td { display: block; }
  .tier-table tr { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 8px 20px; margin-bottom: 12px; }
  .tier-table tbody th { padding: 14px 0 10px; border-bottom: 1px solid var(--bone); }
  .tier-table td { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bone); }
  .tier-table tbody tr td:last-child { border-bottom: 0; }
  .tier-table td::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: var(--steel); }
}