/* Nuvestra — public site.

   Dark first, because the app is dark first and the two should feel like one
   product. The light scheme below is its own set of steps, not an inversion.

   Three typographic decisions carry the identity:

   - A serif for display. System sans on a financial site reads as a template;
     a serif reads as something written. No webfont, so no third-party request,
     no layout shift, and nothing to break the content-security policy.
   - Monospace, tabular, for every number. Figures that line up column-wise are
     what makes a financial interface feel like an instrument rather than a
     brochure — and these figures are the whole argument.
   - Hairlines and density over whitespace. Accounts are dense; the page should
     look like it respects that.

   The two chart colours came from the palette validator, re-stepped per mode. */

:root {
  color-scheme: dark;
  --bg: #07090E;
  --bg-2: #0A0E15;
  --surface: #0E131C;
  --card: #111823;
  --card-hi: #161F2C;
  --line: #1C2735;
  --hair: #141C27;
  --ink: #EEF3FA;
  --ink-2: #A9B6C9;
  --muted: #6E7E95;
  --accent: #2DD4BF;
  --accent-2: #F0A500;
  --series-rev: #14A58F;
  --series-pat: #C97A06;
  --max: 1160px;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo,
          Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #FBFAF7;
    --bg-2: #F5F3EE;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --card-hi: #F6F4EF;
    --line: #DED9CF;
    --hair: #E8E4DB;
    --ink: #11161F;
    --ink-2: #3D4757;
    --muted: #6B7585;
    --accent: #0A7C6E;
    --accent-2: #9A6708;
    --series-rev: #00897A;
    --series-pat: #B4700A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A faint grain, so large dark fields are not perfectly flat. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, .group:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

h1, h2, h3 { margin: 0 0 0.6rem; font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }

/* Numbers wear the mono face wherever they carry meaning. */
.num, .hero-stats b, .ratio-row b, .value, .axis, .tip dd,
.table-view td, ul.tax strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Header ─────────────────────────────────────────────────────────────── */

header.site {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
header.site { display: flex; justify-content: center; }
header.site > .brand, header.site > nav { flex: none; }
header.site {
  padding: 0;
}
.bar-inner {
  width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.75rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  color: var(--ink); font-family: var(--serif); font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--accent); align-self: center;
}
header.site nav { display: flex; gap: 1.7rem; font-size: 0.9rem; }
header.site nav a { color: var(--muted); letter-spacing: 0.01em; }
header.site nav a:hover, header.site nav a[aria-current="page"] {
  color: var(--ink); text-decoration: none;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

main { max-width: var(--max); margin: 0 auto; padding: 0 1.75rem; }
.panel { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--hair); }
.section-head { max-width: 60ch; margin-bottom: 2.25rem; }
.section-head p { color: var(--ink-2); }

.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}
.hero::before {
  content: ""; position: absolute; inset: -30% -30% 20% -30%; z-index: -1;
  background:
    radial-gradient(42% 46% at 18% 28%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    radial-gradient(38% 42% at 86% 12%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 72%);
  pointer-events: none;
}
.hero h1 { max-width: 15ch; }
.hero h1 em {
  font-style: italic; color: var(--accent);
}
.lead { font-size: clamp(1.02rem, 1.7vw, 1.14rem); max-width: 54ch; color: var(--ink-2); }
.badge {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.5rem;
  padding: 0.42rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.85rem; color: var(--muted); background: var(--card);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2);
}

/* The terminal panel beside the headline. */
.terminal {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.terminal header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.terminal .sym { font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.02em; }
.terminal .per { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.terminal dl { margin: 0; }
.terminal .row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.62rem 1.1rem; border-bottom: 1px solid var(--hair);
}
.terminal .row:last-child { border-bottom: 0; }
.terminal dt { font-size: 0.86rem; color: var(--muted); }
.terminal dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.95rem; color: var(--ink);
}
.terminal dd.up { color: var(--accent); }
.terminal footer {
  padding: 0.7rem 1.1rem; font-size: 0.74rem; color: var(--muted);
  border-top: 1px solid var(--hair); background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.hero-stats-wrap { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--hair);
}
.hero-stats > div { padding: 1.4rem 1.25rem 1.4rem 0; border-right: 1px solid var(--hair); }
.hero-stats > div:last-child { border-right: 0; }
.hero-stats b {
  display: block; font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.hero-stats span {
  display: block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted);
  letter-spacing: 0.01em;
}

/* ── Chart ──────────────────────────────────────────────────────────────── */

.chart-figure {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(1.25rem, 2.6vw, 1.9rem); position: relative;
}
.chart-figure figcaption { margin-bottom: 1.1rem; }
.chart-figure figcaption h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; }
.chart-figure figcaption p { margin: 0; font-size: 0.86rem; color: var(--muted); }

.legend { display: flex; gap: 1.3rem; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 0.4rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.42rem; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch.rev { background: var(--series-rev); }
.swatch.pat { background: var(--series-pat); }

.chart-scroll { position: relative; overflow-x: auto; }
.chart { width: 100%; min-width: 540px; height: auto; display: block; }
.grid { stroke: var(--hair); stroke-width: 1; }
.axis { fill: var(--muted); font-size: 11px; }
.value { fill: var(--ink); font-size: 12px; }
.bar.rev { fill: var(--series-rev); }
.bar.pat { fill: var(--series-pat); }
.hit { fill: transparent; }
.group:hover .hit, .group:focus-visible .hit { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.group:hover .bar, .group:focus-visible .bar { filter: brightness(1.15); }

.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--card-hi); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.75rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink);
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.9); white-space: nowrap;
}
.tip b { display: block; margin-bottom: 0.3rem; font-family: var(--mono); font-size: 0.8rem; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.4rem; }
.tip .rev { background: var(--series-rev); }
.tip .pat { background: var(--series-pat); }
.tip dl { display: grid; grid-template-columns: auto auto; gap: 0.12rem 1rem; margin: 0; }
.tip dd { margin: 0; text-align: right; }
.tip dt { color: var(--muted); }

.table-view { margin-top: 1.1rem; }
.table-view summary { cursor: pointer; font-size: 0.84rem; color: var(--muted); }
.table-view table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; font-size: 0.85rem; }
.table-view th, .table-view td {
  text-align: right; padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--hair);
}
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { color: var(--muted); font-weight: 500; font-size: 0.78rem; }

.ratio-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin-top: 1.25rem; background: var(--hair);
  border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
}
.ratio-row > div { background: var(--card); padding: 1.15rem 1.25rem; }
.ratio-row b {
  display: block; font-size: 1.7rem; font-weight: 400; letter-spacing: -0.03em;
  color: var(--accent); line-height: 1;
}
.ratio-row span { display: block; margin-top: 0.45rem; font-size: 0.9rem; color: var(--ink-2); }
.ratio-row small { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }

/* ── Split ──────────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.col { padding: 1.5rem; background: var(--card); }
.col.ok { background: linear-gradient(180deg, color-mix(in srgb, var(--series-rev) 7%, var(--card)), var(--card)); }
.col.no { background: linear-gradient(180deg, color-mix(in srgb, var(--series-pat) 7%, var(--card)), var(--card)); }
.col ul { margin: 0; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.95rem; }
.col li { margin-bottom: 0.5rem; }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border-radius: 5px; margin: 0 0 1rem;
}
.tag.ok { background: color-mix(in srgb, var(--series-rev) 20%, transparent); color: var(--accent); }
.tag.no { background: color-mix(in srgb, var(--series-pat) 20%, transparent); color: var(--accent-2); }

/* ── Steps ──────────────────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.steps li { background: var(--card); padding: 1.5rem; }
.step-n {
  display: block; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 0.9rem;
}
.steps h3 { font-family: var(--sans); font-weight: 600; font-size: 0.98rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.9rem; }
ul.tax { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; }
ul.tax li { font-size: 0.84rem; color: var(--ink-2); }
ul.tax strong { color: var(--accent); font-weight: 400; }

/* ── Documents ──────────────────────────────────────────────────────────── */

.doc { padding: clamp(2.5rem, 6vw, 4rem) 1.75rem clamp(3rem, 7vw, 5rem); max-width: 720px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 0.4rem; }
.doc section { margin-bottom: 2.2rem; }
.doc p, .doc li { color: var(--ink-2); }
.doc h2 { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin-top: 0; }
.updated { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 2.5rem; }

address {
  font-style: normal; background: var(--card); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 10px;
  padding: 1rem 1.15rem; color: var(--ink); line-height: 1.7; font-size: 0.95rem;
}

ul.checks { list-style: none; padding: 0; }
ul.checks li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.plain { max-width: 68ch; color: var(--ink-2); }
.closing .links { display: flex; gap: 1.6rem; margin-top: 1.6rem; flex-wrap: wrap; font-size: 0.92rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--hair); margin-top: 3.5rem;
  padding: 3rem 1.75rem; background: var(--bg-2);
}
.footer-grid {
  max-width: var(--max); margin: 0 auto 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.75rem;
}
.footer-grid a { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; }
.footer-grid a:hover { color: var(--ink); }
.footer-brand { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 0.2rem; }
.footer-head {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.75rem;
}
.disclaimer {
  max-width: var(--max); margin: 0 auto; padding-top: 1.75rem;
  border-top: 1px solid var(--hair); font-size: 0.8rem; line-height: 1.7; color: var(--muted);
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stats > div { padding-right: 1rem; }
}
@media (max-width: 560px) {
  .bar-inner { padding: 0.75rem 1.1rem; }
  header.site nav { gap: 1.1rem; font-size: 0.86rem; }
  main { padding: 0 1.1rem; }
  .doc { padding-left: 1.1rem; padding-right: 1.1rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > div:nth-child(2n) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ── Store buttons ──────────────────────────────────────────────────────── */

.store-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.store {
  display: inline-flex; flex-direction: column; line-height: 1.25;
  padding: 0.6rem 1.15rem; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 0.95rem; color: var(--ink);
}
.store small { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-top: 0.15rem; }
.hero-fine { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); }

/* ── Phone ──────────────────────────────────────────────────────────────── */

.hero-art { display: flex; justify-content: center; }
.phone { display: flex; flex-direction: column; align-items: center; }
.phone-frame {
  position: relative; width: 272px; height: 560px; border-radius: 38px;
  padding: 10px; background: linear-gradient(160deg, #2A3444, #10161F);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95),
              0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 20px; border-radius: 0 0 12px 12px; background: #10161F; z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%; border-radius: 29px; overflow: hidden;
  background: #0B1220; color: #E6EDF7; padding: 30px 14px 14px;
  font-size: 11px; line-height: 1.45;
  font-family: var(--sans);
}
.phone-label { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }

.s-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.55rem; }
.s-back, .s-star { color: #94A3B8; font-size: 13px; }
.s-title { font-weight: 650; font-size: 13px; letter-spacing: 0.02em; }
.s-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.7rem; }
.s-price b { font-family: var(--mono); font-size: 19px; font-weight: 500; }
.s-price i { font-style: normal; font-family: var(--mono); font-size: 11px; }
.s-price .up { color: #2DD4BF; }

.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #1E293B;
  border: 1px solid #1E293B; border-radius: 9px; overflow: hidden; margin-bottom: 0.6rem; }
.s-grid > div { background: #162236; padding: 0.45rem 0.55rem; }
.s-grid span { display: block; font-size: 9px; color: #94A3B8; }
.s-grid b { font-family: var(--mono); font-size: 12px; font-weight: 500; }

.s-card { background: #162236; border: 1px solid #1E293B; border-radius: 9px;
  padding: 0.55rem 0.6rem; margin-bottom: 0.55rem; }
.s-h { margin: 0 0 0.45rem; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; }
.s-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.s-bars .sb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; }
.s-bars .sb span { display: block; width: 100%; background: #14A58F; border-radius: 3px 3px 0 0; }
.s-bars .sb em { font-style: normal; font-family: var(--mono); font-size: 7.5px;
  color: #94A3B8; margin-top: 3px; }
.s-src { margin: 0; font-size: 8.5px; color: #94A3B8; line-height: 1.5; }
.s-peer { display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.22rem 0; font-size: 10px; }
.s-peer span { color: #B6C2D4; font-family: var(--mono); }
.s-peer b { font-family: var(--mono); font-weight: 500; }

.s-lead { margin: 0 0 0.6rem; font-size: 10px; color: #94A3B8; }
.s-sc { border: 1px solid #1E293B; border-radius: 9px; padding: 0.5rem 0.6rem; margin-bottom: 0.45rem;
  background: #162236; }
.s-sc-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.2rem; }
.s-sc-h b { font-size: 11px; }
.s-sc-h i { font-style: normal; font-family: var(--mono); font-size: 10px; color: #94A3B8; }
.s-sc p { margin: 0; font-size: 9.5px; color: #B6C2D4; }
.s-sc.bull { border-left: 2px solid #2DD4BF; }
.s-sc.base { border-left: 2px solid #94A3B8; }
.s-sc.bear { border-left: 2px solid #F59E0B; }
.s-warn { margin-top: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px;
  background: rgba(245, 158, 11, 0.12); font-size: 9px; color: #E6EDF7; line-height: 1.55; }
.s-warn b { display: block; }

/* ── Problem & benefit grids ────────────────────────────────────────────── */

.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.pains > div { background: var(--card); padding: 1.4rem; }
.pains b { display: block; margin-bottom: 0.5rem; font-family: var(--serif);
  font-size: 1.08rem; font-weight: 500; }
.pains p { margin: 0; font-size: 0.93rem; color: var(--muted); }

.gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2rem; }
.gets > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.g-n { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.gets p:last-child { margin: 0; font-size: 0.93rem; color: var(--muted); }

.screens { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center; }
.screens-copy p { color: var(--ink-2); max-width: 52ch; }

@media (max-width: 860px) {
  .screens { grid-template-columns: 1fr; justify-items: center; }
  .screens-copy { text-align: left; }
}

/* ── Ticker wall ────────────────────────────────────────────────────────── */

.wall {
  margin: 0 calc(50% - 50vw) clamp(2rem, 5vw, 3rem);
  width: 100vw; padding: 1.5rem 0 1.25rem;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--bg-2);
  overflow: hidden;
  /* Fade the ends rather than cutting them, so the rows read as continuing. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.wall-row { overflow: hidden; }
.wall-row + .wall-row { margin-top: 0.6rem; }
.wall-track {
  display: flex; gap: 0.6rem; width: max-content;
  animation: drift 90s linear infinite;
}
.wall-row.reverse .wall-track { animation-direction: reverse; animation-duration: 110s; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.chip {
  display: inline-flex; align-items: baseline; gap: 0.6rem; white-space: nowrap;
  padding: 0.45rem 0.8rem; border: 1px solid var(--hair); border-radius: 8px;
  background: var(--card); font-family: var(--mono); font-size: 0.78rem;
}
.chip b { color: var(--ink); font-weight: 500; letter-spacing: 0.03em; }
.chip i { color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; }
.chip u { color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
.wall-note {
  max-width: var(--max); margin: 1.1rem auto 0; padding: 0 1.75rem;
  font-size: 0.78rem; color: var(--muted); text-align: center;
}

/* ── Filing to figure ───────────────────────────────────────────────────── */

.transform {
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr);
  gap: 1.25rem; align-items: stretch;
}
.transform .raw, .transform .parsed {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.25rem; min-width: 0;
  display: flex; flex-direction: column;
}
/* Footers sit at the foot, whichever panel the grid stretches. */
.transform .panel-foot { margin-top: auto; padding-top: 0.9rem; }
.transform .raw { background: var(--bg-2); }
.panel-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem;
}
.panel-foot { margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--muted); }
.transform pre {
  margin: 0; font-family: var(--mono); font-size: 0.68rem; line-height: 1.75;
  color: var(--muted);
  /* Wrapped, not scrolled. A tag cut off mid-attribute reads as a broken page
     rather than as real code, and the whole point is that this is verbatim. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.transform pre code { display: block; margin-bottom: 0.7rem; }
.transform pre code:last-child { margin-bottom: 0; }
.transform .t { color: var(--muted); opacity: 0.75; }
.transform .a { color: var(--accent-2); }
.transform .v { color: var(--ink-2); }
.transform .n { color: var(--accent); font-weight: 500; }

.transform .arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); padding: 0 0.4rem;
}
.transform .arrow svg {
  width: 34px; height: 34px; padding: 6px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
}
.transform .parsed dl { margin: 0; }
.transform .parsed dl > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--hair);
}
.transform .parsed dl > div:last-child { border-bottom: 0; }
.transform .parsed dt { font-size: 0.86rem; color: var(--muted); }
.transform .parsed dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.92rem; color: var(--ink);
}
.transform .parsed dd.hi { color: var(--accent); }

@media (max-width: 820px) {
  .transform { grid-template-columns: 1fr; }
  .transform .arrow { transform: rotate(90deg); padding: 0.25rem 0; }
}

/* ── Bars draw themselves when the chart comes into view ────────────────── */

.chart .bar { transform-origin: 50% 100%; }
.chart-figure.reveal .bar {
  transform: scaleY(0);
  animation: grow 820ms cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
}
.chart-figure.reveal .group:nth-child(6)  .bar { animation-delay: 60ms; }
.chart-figure.reveal .group:nth-child(8)  .bar { animation-delay: 140ms; }
.chart-figure.reveal .group:nth-child(10) .bar { animation-delay: 220ms; }
.chart-figure.reveal .group:nth-child(12) .bar { animation-delay: 300ms; }
.chart-figure.reveal .group:nth-child(14) .bar { animation-delay: 380ms; }
@keyframes grow { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  .chart-figure.reveal .bar { animation: none; transform: none; }
}

/* ── Company hub (boursely.ai) ─────────────────────────────────────────── */
.hub { max-width: 860px; margin: 0 auto; padding: 72px 20px 96px; }
.hub-hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.02em; }
.hub-hero .lede { font-size: 1.12rem; line-height: 1.65; max-width: 60ch; margin: 0 0 16px; }
.hub h2 { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 72px 0 20px; }
.hub-products { display: grid; gap: 16px; }
.product { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; }
.product.live:hover { border-color: var(--accent); transform: translateY(-2px); }
.product h3 { font-size: 1.5rem; margin: 12px 0 8px; }
.product p { margin: 0 0 16px; line-height: 1.6; max-width: 56ch; }
.product .pill { display: inline-block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.product .go { font-weight: 600; color: var(--accent); font-size: 0.95rem; }
.product.soon { opacity: 0.62; }
.hub-about p { line-height: 1.7; max-width: 62ch; margin: 0 0 14px; }
@media (min-width: 720px) { .hub-products { grid-template-columns: 1fr 1fr; } }