/* STI dark overlay — implementation of
   /workspace/webdesign/theme/sti/STI-DARK-THEME-SPEC-2026-11-13.md
   Applies only when <html> has .sti-black-on (not on held /waitlist routes).
   Remaps live --rn-* / page chrome to the spec. Does not edit roicp-compute.css
   or held 31xx/33xx/35xx files. Not deployed in this run. */

html.sti-black-on {
  --sti-bg: #000000;
  --sti-bg-2: #111111;
  --sti-card: #111111;
  --sti-ink: #F6F9FC;
  --sti-ink-2: #E3EBF2;
  --sti-muted: #94A3B8;
  --sti-faint: #94A3B8;
  --sti-line: #2A2A2A;
  --sti-accent: #3E9BC9;
  --sti-accent-hover: #A8D4EA;
  --sti-btn: #0B74DE;
  --sti-btn-hover: #095CAD;
  --sti-btn-ink: #FFFFFF;
  --sti-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sti-radius: 16px;
  --sti-radius-sm: 12px;
  --sti-text-body: clamp(16px, 0.247vw + 15.04px, 18px);
  --sti-text-h1: clamp(28px, 2vw + 22px, 42px);
  --sti-text-h2: clamp(22px, 1.2vw + 18px, 30px);
  --sti-text-h3: clamp(18px, 0.6vw + 16px, 22px);
  --sti-container: 1160px;

  --sti-link: #3E9BC9;
  --sti-link-hover: #A8D4EA;
  --sti-pill-bg: #0D56A0;
  --sti-pill-text: #FFFFFF;
  --sti-focus-ring: #3E9BC9;
  --sti-chart: #0B74DE;
  --sti-accent-ink: #FFFFFF;

  --rn-paper: #000000;
  --rn-night: #000000;
  --rn-surface: #111111;
  --rn-mist: #111111;
  --rn-line: #2A2A2A;
  --rn-ink: #F6F9FC;
  --rn-ink-2: #E3EBF2;
  --rn-mut: #94A3B8;
  --rn-serif: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rn-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rn-mono: Inter, ui-sans-serif, system-ui, "SF Mono", ui-monospace, Menlo, monospace;
  --rn-moss: var(--sti-btn);
  --rn-moss-2: var(--sti-btn-hover);
  --rn-fern: var(--sti-accent);
  --rn-lake: var(--sti-accent);
  --rn-lake-2: var(--sti-accent-hover);
  --rn-gold: var(--sti-btn);
  --rn-gold-ink: var(--sti-btn-ink);
  --rn-info: var(--sti-accent);
  --rn-info-soft: color-mix(in srgb, var(--sti-accent) 16%, transparent);
  --rn-ok: #16A34A;
  --rn-warn: #D97706;
  --rn-bad: #FDECEC;
  --rn-max: 1160px;
  --rn-r-md: 12px;
  --rn-r-lg: 16px;
  --rn-r-xl: 16px;
  --rn-fs-md: clamp(16px, 0.247vw + 15.04px, 18px);
  --rn-fs-h1: clamp(28px, 2vw + 22px, 42px);
  --rn-fs-h2: clamp(22px, 1.2vw + 18px, 30px);
  --rn-fs-h3: clamp(18px, 0.6vw + 16px, 22px);
  --rn-focus: 0 0 0 2px #000000, 0 0 0 4px var(--sti-focus-ring);
  --rn-hairline: linear-gradient(90deg, transparent, var(--sti-accent), transparent);
  --nv-black: #000000;
  --nv-panel: #111111;
  --nv-panel-2: #111111;
  --nv-green: var(--sti-btn);
  --nv-green-2: var(--sti-btn-hover);
  --nv-glow: color-mix(in srgb, var(--sti-btn) 35%, transparent);
  --brand-accent: var(--sti-btn);
  --brand-accent-2: var(--sti-btn-hover);
  --brand-accent-rgb: 11, 116, 222;

  --ink: #F6F9FC;
  --mut: #94A3B8;
  --acc: var(--sti-btn);
  --acc2: var(--sti-btn-hover);
  --pop: var(--sti-accent);
  --tint: #111111;
  --ok: #16A34A;
  --warn: #D97706;
  --bad: #FDECEC;
}

html.sti-black-on[data-app="sti"] {
  /* STI accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#0B74DE;
  --sti-btn-hover:#095CAD;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#0B74DE;
  --sti-blue-dark:#095CAD;
  --sti-accent:#3E9BC9;
  --sti-accent-hover:#A8D4EA;
  --sti-link:#3E9BC9;
  --sti-link-hover:#A8D4EA;
  --sti-pill-bg:#0D56A0;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#3E9BC9;
  --sti-chart:#0B74DE;
}
html.sti-black-on[data-app="roicp"] {
  /* ROICP accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#088474;
  --sti-btn-hover:#046054;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#088474;
  --sti-blue-dark:#046054;
  --sti-accent:#47AEA1;
  --sti-accent-hover:#90C1BB;
  --sti-link:#47AEA1;
  --sti-link-hover:#90C1BB;
  --sti-pill-bg:#0B6256;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#47AEA1;
  --sti-chart:#088474;
}
html.sti-black-on[data-app="callverdict"] {
  /* CallVerdict accent — sti-black v0.3.0. Buttons, links, pills, focus, charts only. */
  --sti-btn:#9552E0;
  --sti-btn-hover:#802BDF;
  --sti-btn-ink:#FFFFFF;
  --sti-accent-ink:#FFFFFF;
  --sti-blue:#9552E0;
  --sti-blue-dark:#802BDF;
  --sti-accent:#B281E9;
  --sti-accent-hover:#E0D0F0;
  --sti-link:#B281E9;
  --sti-link-hover:#E0D0F0;
  --sti-pill-bg:#6D3EA2;
  --sti-pill-text:#FFFFFF;
  --sti-focus-ring:#B281E9;
  --sti-chart:#9552E0;
}


html.sti-black-on,
html.sti-black-on body,
html.sti-black-on body.rn,
html.sti-black-on body.rn-grain,
html.sti-black-on #root,
html.sti-black-on header.top,
html.sti-black-on header.top .wrap,
html.sti-black-on footer,
html.sti-black-on .wrap {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #F6F9FC !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

html.sti-black-on body {
  font-size: clamp(16px, 0.247vw + 15.04px, 18px);
  line-height: 1.5;
  max-width: 100%;
  overflow-x: hidden;
}

html.sti-black-on h1 { font-size: clamp(28px, 2vw + 22px, 42px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }
html.sti-black-on h2 { font-size: clamp(22px, 1.2vw + 18px, 30px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }
html.sti-black-on h3 { font-size: clamp(18px, 0.6vw + 16px, 22px); line-height: 1.25; color: #F6F9FC !important; font-family: inherit !important; }

html.sti-black-on a { color: var(--sti-accent) !important; text-decoration: none; }
html.sti-black-on a:hover,
html.sti-black-on a:focus-visible { color: var(--sti-accent-hover) !important; text-decoration: underline; }

/* Primary buttons: spec fill var(--sti-btn), label #FFFFFF, radius 12. Don't leave paper-white on blue. */
html.sti-black-on .btn,
html.sti-black-on .sti-btn,
html.sti-black-on a.btn,
html.sti-black-on button.btn,
html.sti-black-on .rn-btn,
html.sti-black-on .rn-button,
html.sti-black-on a[class*="btn-primary"],
html.sti-black-on button[class*="btn-primary"] {
  background: var(--sti-btn) !important;
  background-color: var(--sti-btn) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-weight: 650;
  text-decoration: none !important;
}
html.sti-black-on .btn:hover,
html.sti-black-on .rn-btn:hover,
html.sti-black-on a.btn:hover {
  background: var(--sti-btn-hover) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
html.sti-black-on .btn.alt,
html.sti-black-on .rn-btn-secondary,
html.sti-black-on .sti-btn-secondary {
  background: #111111 !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  box-shadow: none !important;
}

html.sti-black-on .rn-card,
html.sti-black-on .card,
html.sti-black-on .panel,
html.sti-black-on .sti-card {
  background: #111111 !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 16px !important;
  color: #F6F9FC !important;
}

html.sti-black-on input,
html.sti-black-on textarea,
html.sti-black-on select {
  background: #111111 !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 12px !important;
  font-family: inherit;
}
html.sti-black-on input:focus,
html.sti-black-on textarea:focus,
html.sti-black-on select:focus,
html.sti-black-on a:focus-visible,
html.sti-black-on button:focus-visible,
html.sti-black-on .btn:focus-visible {
  outline: 2px solid var(--sti-accent) !important;
  outline-offset: 2px;
}

html.sti-black-on img, html.sti-black-on svg, html.sti-black-on video, html.sti-black-on iframe {
  max-width: 100%;
  height: auto;
}

html.sti-black-on .wrap,
html.sti-black-on .rn-wrap,
html.sti-black-on .site-wrap,
html.sti-black-on main {
  max-width: 1160px;
  box-sizing: border-box;
}


/* --- visual QA fixes 2026-11-13 (after looking at 390/768/1280/1920 shots) --- */

/* Do not clamp the hero/header/footer to 1160px — that left a large empty
   right column at 1920. Only inner wraps are centered at the marketing width. */
html.sti-black-on main {
  max-width: none;
  width: 100%;
}
html.sti-black-on .wrap,
html.sti-black-on .rn-wrap {
  max-width: 1160px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
html.sti-black-on .site-hero,
html.sti-black-on header,
html.sti-black-on header.top,
html.sti-black-on footer,
html.sti-black-on .site-footer {
  max-width: none;
  width: 100%;
}

/* Pre-existing hero lead / product-card overlap at desktop. Keep the lead
   above the scene and give it a solid stop so letters don't run under the card. */
@media (min-width: 900px) {
  html.sti-black-on .site-hero__copy,
  html.sti-black-on .site-hero .rn-wrap { z-index: 2; }
  html.sti-black-on .site-hero .rn-lead {
    position: relative;
    z-index: 3;
    max-width: 32rem;
    padding: 0 1.25rem 0.25rem 0;
    background: linear-gradient(90deg, var(--sti-bg, #000) 72%, transparent 100%);
  }
  html.sti-black-on .site-hero__scene,
  html.sti-black-on .site-hero__glow,
  html.sti-black-on .site-hero__grid,
  html.sti-black-on .site-hero__scan { display: none !important; }
}

/* Secondary / alt buttons must not be painted as primary blue. */
html.sti-black-on a.rn-btn.alt,
html.sti-black-on .rn-btn.alt,
html.sti-black-on .btn.alt {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sti-accent) !important;
  border: 1px solid #2A2A2A !important;
  box-shadow: none !important;
}
html.sti-black-on a.rn-btn.alt:hover,
html.sti-black-on .btn.alt:hover {
  background: #111111 !important;
  color: var(--sti-accent-hover) !important;
  text-decoration: none !important;
}

/* Nature comic chrome uses 3px ink borders and ink-colored offset shadows.
   After ink remaps to #F6F9FC those shadows read as cream slabs on black. */
html.sti-black-on header.top,
html.sti-black-on .hero,
html.sti-black-on .card,
html.sti-black-on .card.price,
html.sti-black-on .disc,
html.sti-black-on .band,
html.sti-black-on .tabs button {
  border-color: #2A2A2A !important;
  box-shadow: none !important;
}
html.sti-black-on .hero {
  background: #000000 !important;
  background-image: none !important;
  border-bottom: 1px solid #2A2A2A !important;
}
html.sti-black-on .card,
html.sti-black-on .card.price,
html.sti-black-on #pricing .card,
html.sti-black-on .disc {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
}
html.sti-black-on .band,
html.sti-black-on .rn-band,
html.sti-black-on .site-band {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
  border: 1px solid #2A2A2A !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
html.sti-black-on .band a,
html.sti-black-on .rn-band a:not(.rn-btn):not(.btn) {
  color: var(--sti-accent) !important;
}
html.sti-black-on .price .amt { color: #F6F9FC !important; }
html.sti-black-on header.top {
  background: #000000 !important;
  border-bottom: 1px solid #2A2A2A !important;
}
html.sti-black-on .site-section.alt,
html.sti-black-on section.alt {
  background: #000000 !important;
  background-image: none !important;
  border-color: #2A2A2A !important;
}
html.sti-black-on .site-band:before,
html.sti-black-on .rn-band:before {
  background: none !important;
  content: none !important;
}

/* Band is #111 — keep the primary button blue with a white label (spec). */
html.sti-black-on .band .btn,
html.sti-black-on .band a.btn,
html.sti-black-on .band .rn-btn,
html.sti-black-on .rn-band .rn-btn:not(.alt),
html.sti-black-on .site-band .rn-btn:not(.alt) {
  background: var(--sti-btn) !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
}
html.sti-black-on .band .btn:hover,
html.sti-black-on .band a.btn:hover,
html.sti-black-on .rn-band .rn-btn:not(.alt):hover {
  background: var(--sti-btn-hover) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
html.sti-black-on .band .btn.alt,
html.sti-black-on .rn-band .rn-btn.alt,
html.sti-black-on .site-band .rn-btn.alt {
  background: transparent !important;
  color: var(--sti-accent) !important;
  border: 1px solid #2A2A2A !important;
}
html.sti-black-on #what-you-get .card,
html.sti-black-on #what-you-get .disc {
  background: #111111 !important;
  background-image: none !important;
  color: #F6F9FC !important;
  border-color: #2A2A2A !important;
}



/* Fake dashboard/list SVGs in the SPA heroes — replaced by the Product Lead Edo skyline. */
html.sti-black-on .site-hero__scene,
html.sti-black-on .site-hero__glow,
html.sti-black-on .site-hero__grid,
html.sti-black-on .site-hero__scan {
  display: none !important;
}
/* Product Lead Edo Chicago skyline — dissolve into #000, no box edges. */
html.sti-black-on .hero,
html.sti-black-on .site-hero {
  position: relative;
  overflow: hidden;
  background-color: #000000 !important;
}
html.sti-black-on .hero .scene,
html.sti-black-on .hero picture.scene,
html.sti-black-on .site-hero .edo-skyline,
html.sti-black-on .edo-skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  top: auto;
  width: min(58vw, 720px);
  height: auto;
  max-height: 100%;
  pointer-events: none;
  z-index: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}
html.sti-black-on .hero picture.scene img,
html.sti-black-on .edo-skyline img,
html.sti-black-on .site-hero .edo-skyline img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* extra dissolve on the left into the #000 field; art already fades at the edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
html.sti-black-on .hero .wrap,
html.sti-black-on .site-hero .rn-wrap,
html.sti-black-on .site-hero__copy {
  position: relative;
  z-index: 2;
}
/* 9:16 crop arrives as chicago-edo-skyline-9x16-1080.webp; keep object-position as a fallback. */
@media (max-width: 500px) {
  html.sti-black-on .hero .scene,
  html.sti-black-on .hero picture.scene,
  html.sti-black-on .site-hero .edo-skyline,
  html.sti-black-on .edo-skyline {
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0.55;
  }
  html.sti-black-on .hero picture.scene img,
  html.sti-black-on .edo-skyline img,
  html.sti-black-on .site-hero .edo-skyline img {
    object-fit: cover;
    object-position: center 70%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  }
}

/* SPA heroes: Edo skyline as a masked layer, not a boxed photo, so it dissolves into #000. */
html.sti-black-on .site-hero {
  background-image: none !important;
  background-color: #000000 !important;
}
html.sti-black-on .site-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58vw, 720px);
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: image-set(
    url("/art/chicago-edo-skyline-900.webp") 1x,
    url("/art/chicago-edo-skyline-1600.webp") 2x
  );
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
@media (max-width: 500px) {
  html.sti-black-on .site-hero::after {
    width: 100%;
    left: 0;
    right: 0;
    opacity: 0.55;
    background-image: url("/art/chicago-edo-skyline-9x16-1080.webp");
    background-position: center 70%;
    background-size: cover;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  }
}

/* Alpha skyline on #111 cards / empty states — ink in the alpha channel, no edge. */
html.sti-black-on .edo-skyline--alpha,
html.sti-black-on .crm-empty .edo-skyline,
html.sti-black-on .crm-header-art {
  background-color: transparent !important;
}

/* Price cards are ~50px taller than the grid box, so they paint over the note. */
html.sti-black-on .price-grid {
  padding-bottom: 4.5rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}
html.sti-black-on .price-grid + .rn-note,
html.sti-black-on .price-grid + .site-cta-row {
  position: relative;
  z-index: 2;
  background: #000000;
  margin-top: 0.25rem;
  padding-top: 0.35rem;
}


/* Canonical chrome: wrap long nav/footer link rows */
html.sti-black-on header.top { flex-wrap: wrap; }
html.sti-black-on header.top .wrap { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
html.sti-black-on header.top nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; }
html.sti-black-on .canon-footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
html.sti-black-on .site-nav-links { flex-wrap: wrap; }


/* P0/P1: stack price and tool cards to 1 column below 900px. No fixed heights or negative margins. */
html.sti-black-on .price-grid,
html.sti-black-on .app-link-list,
html.sti-black-on #pricing .grid,
html.sti-black-on .grid.price,
html.sti-black-on .price-cards {
  display: grid !important;
  gap: var(--sti-grid-gap, 18px) !important;
  align-items: stretch !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
html.sti-black-on .price-card,
html.sti-black-on .card.price,
html.sti-black-on .app-link-list .rn-card,
html.sti-black-on .app-link-list li,
html.sti-black-on #pricing .card {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  transform: none !important;
}
html.sti-black-on .price-card .rn-btn,
html.sti-black-on .price-card .btn,
html.sti-black-on .card.price .btn,
html.sti-black-on .card.price .rn-btn {
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
@media (max-width: 899px) {
  html.sti-black-on .price-grid,
  html.sti-black-on .app-link-list,
  html.sti-black-on #pricing .grid,
  html.sti-black-on .grid.price,
  html.sti-black-on .price-cards {
    grid-template-columns: 1fr !important;
  }
}

/* P2: accent labels use --sti-accent on #111 (>= 4.5:1), never button fill; min 12px. */
html.sti-black-on .pill,
html.sti-black-on .rn-pill,
html.sti-black-on .price-card .rn-eyebrow,
html.sti-black-on .price-card .eyebrow,
html.sti-black-on .rn-card .rn-eyebrow,
html.sti-black-on .app-link-list .pill,
html.sti-black-on .kicker {
  color: var(--sti-accent) !important;
  font-size: max(12px, 0.75rem) !important;
}

/* P2: secondary hero CTA on a solid #000 so type doesn't sit on skyline linework. */
@media (max-width: 767px) {
  html.sti-black-on .site-cta-row .rn-btn.alt,
  html.sti-black-on a.rn-btn.alt,
  html.sti-black-on .hero a.btn.alt {
    background: #000000 !important;
    background-color: #000000 !important;
  }
}

/* CallVerdict waitlist labels: ink on #111, not #000. */
html.sti-black-on #waitlist label,
html.sti-black-on form#wl label,
html.sti-black-on .band label,
html.sti-black-on form label {
  color: var(--sti-ink-2, #E3EBF2) !important;
}