/* ============================================================
   NLOS — about.nlos.ai
   The definitive about page. Flat, precise, calm.
   Tokens from NLOS-Style @nlos-hub/style 0.13.0 (NLOS-HUB/NLOS-Style tag style-v0.13.0, 4aa0fee):
   Exchange Navy #004874 + Meridian Gold #F5BB61 lead; NLOS cyan #22D3EE; slate ink #141D23; Geist body + Noto Sans display.
   Light + dark from the same variables.
   ============================================================ */

/* ---------- Geist (NLOS-Style 0.13.0 type; self-hosted, SIL OFL 1.1) ---------- */
@font-face { font-family: "Geist"; src: url("assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Noto Sans: headline/display only (SIL OFL 1.1; see NotoSans-OFL-LICENSE.txt). Latin subset from @fontsource/noto-sans 5.3.0. */
@font-face { font-family: "Noto Sans"; src: url("assets/fonts/NotoSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("assets/fonts/NotoSans-500-Italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("assets/fonts/NotoSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --deep: #141D23;   /* brand.ink (slate ink) */
  --field: #1E2C35;  /* brand.slate */
  --cyan: #22D3EE;   /* brand.cyan */
  --navy: #004874;   /* brand.navy, Exchange Navy */
  --gold: #F5BB61;   /* brand.gold, Meridian Gold */
  --blue: #0E7490;   /* light accent (cyan.700) */
  --mist: #EFF4F6;
  --slate: #A6B6BF;  /* brand.slate-muted */
  --ink: #141D23;

  --r-rec: #0A6EBD;  /* module.recruiting */
  --r-ops: #66700A;  /* module.operations */
  --r-mar: #7C3AED;  /* module.marketing */
  --r-lrn: #8B1A8A;  /* module.education */

  /* layer identity — the true brand hue (rules, swatches, 1px borders) */
  --l1: #2456D8;
  --l2: #A6B6BF;
  --l3: #22D3EE;
  --l4: #3DDC97;
  --l5: #A78BFA;
  --l6: #F5BB61;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --head-h: 70px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Noto Sans: self-hosted headline face (OFL). Distinct from Geist body; real italic for accent spans. */
  --font-display: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root, html[data-theme="dark"] {
  --wash-a: color-mix(in srgb, #3eb8e8 58%, transparent);  /* stronger robot / 3D glow */
  --wash-b: color-mix(in srgb, #3eb8e8 32%, transparent);
  --wash-c: color-mix(in srgb, #4fd8f9 26%, transparent);
  --wash-d: color-mix(in srgb, #a855f7 16%, transparent);  /* magenta from JTK LLM bar */
  --px-o: .12;   /* BrandBackground pixels: marketing max 12% on slate ink */
  --px-faint: .06;
  --light-navy: #3eb8e8;
  --bg: var(--deep);
  --surface: var(--field);
  --surface-quiet: #19242A;
  --raise: #2A3A41;
  --text: var(--mist);
  --text-2: #C9D5DB;
  --text-3: #A6B6BF;
  --line: #2C3940;
  --line-2: #3D4B51;
  --line-3: rgba(239, 244, 246, .06);
  --accent: var(--cyan);
  --link: #67E8F9;
  --focus: #22D3EE;
  --accent-text: #67E8F9;
  --on-accent: var(--ink);
  --chip-line: #3D4B51;
  --mark-tag: #A6B6BF;
  color-scheme: dark;
  --shade: rgba(13, 20, 24, .62);
  --dot: rgba(239, 244, 246, .11);
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23EFF4F6' fill-opacity='0.11'/%3E%3C/svg%3E");
  --stage: #0D1418;

  /* accessible text tint per layer on dark surfaces */
  --l1-t: #7FA2FF;
  --l2-t: #C9D5DB;
  --l3-t: #67E8F9;
  --l4-t: #3DDC97;
  --l5-t: #A78BFA;
  --l6-t: #F5BB61;
  --l6-wash: rgba(245, 187, 97, .09);
}

html[data-theme="light"] {
  --wash-a: color-mix(in srgb, #004874 12%, transparent);  /* 0.13.0 page glow, light */
  --wash-b: color-mix(in srgb, #004874 7%, transparent);
  --wash-c: color-mix(in srgb, #004874 5%, transparent);
  --wash-d: color-mix(in srgb, #7C3AED 4%, transparent);
  --px-o: .05;
  --px-faint: .03;
  --light-navy: #004874;
  --bg: #F7FAFB;
  --surface: #FFFFFF;
  --surface-quiet: #EFF4F6;
  --raise: #FFFFFF;
  --text: var(--ink);
  --text-2: #475963;
  --text-3: #5E717C;
  --line: #E1E9ED;
  --line-2: #C9D5DB;
  --line-3: #EFF4F6;
  --accent: var(--blue);
  --link: #0E7490;
  --focus: #0891B2;
  --accent-text: #0E7490;
  --on-accent: var(--ink);
  --chip-line: #C9D5DB;
  --mark-tag: #5E717C;
  color-scheme: light;
  --shade: rgba(11, 16, 24, .34);
  --dot: rgba(11, 16, 24, .10);
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1' cy='1' r='1' fill='%230B1018' fill-opacity='0.1'/%3E%3C/svg%3E");
  --stage: #0B1018;

  --l1-t: #1F4FD8;
  --l2-t: #475963;
  --l3-t: #0E7490;
  --l4-t: #116344;
  --l5-t: #573BB8;
  --l6-t: #7A5410;
  --l6-wash: rgba(245, 187, 97, .16);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 95% 70% at 50% -14%, var(--wash-a), transparent 74%),
    radial-gradient(ellipse 55% 45% at 82% 12%, var(--wash-c), transparent 68%),
    radial-gradient(ellipse 48% 42% at 12% 28%, var(--wash-d), transparent 72%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--wash-b), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--cyan); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* In-page nav focuses the section headline (tabindex=-1); skip the blue ring there. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}


.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(-160%);
  visibility: hidden;
  transition: transform .18s var(--ease);
}
.skip:focus, .skip:focus-visible { transform: none; visibility: visible; }

/* ---------- the official lockup ---------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--text);
}
.lockup__type { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lockup__tag {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mark-tag);
  white-space: nowrap;
  line-height: 1.2;
}
.logo { flex: none; width: auto; }
html[data-theme="dark"] .logo--onLight,
html[data-theme="light"] .logo--onDark { display: none; }
.lockup--head .logo { height: 30px; }
.lockup--foot .logo { height: 24px; }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-head.is-scrolled { border-bottom-color: var(--line-2); }
.head {
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a {
  font-size: 14.5px;
  letter-spacing: .01em;
  color: var(--text-2);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--text);
  transition: right .28s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 0; }
.subnav { display: none; border-top: 1px solid var(--line-3); }
.subnav__in {
  display: flex;
  gap: 20px;
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__in::-webkit-scrollbar { display: none; }
.subnav__in a {
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  letter-spacing: .01em;
}
.subnav__in a:hover { color: var(--text); }

.head__right { display: flex; align-items: center; gap: 10px; margin-left: 32px; }  /* 24px .head gap + 32px = 56px between FAQ and the theme toggle */
@media (max-width: 1080px) { .head__right { margin-left: auto; } }
html[data-theme="light"] 
.theme {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.theme:hover { color: var(--text); border-color: var(--line-2); }
.theme svg { width: 16px; height: 16px; }
html[data-theme="dark"] .theme__sun { display: none; }
html[data-theme="dark"] .theme__moon { display: block; }
html[data-theme="light"] .theme__sun { display: block; }
html[data-theme="light"] .theme__moon { display: none; }


/* ---------- kicker (section label: sentence case, one square) ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--accent-text);
}
.kicker__sq { width: 7px; height: 7px; background: var(--cyan); flex: none; }
/* long hero label: if it wraps, keep the square on the first line and balance the lines */
.kicker--gold { align-items: flex-start; line-height: 1.4; text-wrap: balance; }
.kicker--gold .kicker__sq { margin-top: calc(.7em - 3.5px); }
html[data-theme="light"] .kicker__sq { background: var(--blue); }
.kicker--gold { color: var(--gold); text-shadow: 0 0 22px color-mix(in srgb, var(--gold) 36%, transparent); }
.kicker--gold .kicker__sq { background: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 65%, transparent); }
/* Soft exclusivity underline under gold kickers (hero + what you get). */
.kicker--gold {
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--gold) 75%, transparent), color-mix(in srgb, var(--gold) 15%, transparent) 70%, transparent);
  background-repeat: no-repeat;
  background-size: min(12ch, 55%) 1px;
  background-position: 1.35em 100%;
}
html[data-theme="light"] .kicker--gold { color: #B0791A; }
html[data-theme="light"] .kicker--gold .kicker__sq { background: var(--gold); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(44px, 6.5vh, 76px) 0 clamp(56px, 7vh, 84px);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4.6vw, 68px);
  align-items: center;
}
.hero__copy { max-width: 560px; }
.hero h1 {
  margin-top: 18px;
  max-width: 14ch;
  font-size: clamp(2.72rem, 4.85vw, 4.41rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 500;
  margin-left: -.02em;
  text-wrap: balance;
}

.hero__accent {
  font-style: italic;
  color: var(--cyan);
  white-space: nowrap;
}
.hero__sub {
  margin-top: clamp(18px, 2vw, 24px);
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.55;
  color: var(--text-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.8vw, 34px); }
.hero__copy .hero__actions + .kicker--gold { margin-top: clamp(20px, 2.2vw, 28px); }

.hero__film { min-width: 0; position: relative; border-radius: 12px; }
.hero__film::before {   /* cyan robot glow behind the film (no purple) */
  content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, #4fd8f9 48%, transparent), transparent 72%);
  opacity: .95;
  filter: blur(2px);
}
html[data-theme="light"] .hero__film::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--navy) 14%, transparent), transparent 75%); filter: none; opacity: .7; }
.hero__film .film {
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, #4fd8f9 35%, var(--line-2)),
    0 0 42px -8px color-mix(in srgb, #3eb8e8 55%, transparent),
    0 30px 70px -28px rgba(0, 0, 0, .7);
}
html[data-theme="light"] .hero__film .film { box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 72, 116, .45); }
.film-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: end center;
  padding-bottom: clamp(18px, 6.5%, 32px);
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
}
.film-play__btn {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #22D3EE;
  color: #0B1018;
  box-shadow: 0 0 0 10px rgba(34, 211, 238, .16), 0 12px 36px rgba(0, 0, 0, .4);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.film-play__btn svg { width: 42px; height: 42px; margin: 0; display: block; fill: currentColor; }
.film-play:hover .film-play__btn,
.film-play:focus-visible .film-play__btn {
  transform: scale(1.06);
  box-shadow: 0 0 0 12px rgba(34, 211, 238, .22), 0 14px 40px rgba(0, 0, 0, .45);
}
.hero__film.is-playing .film-play { opacity: 0; pointer-events: none; }
.film::-webkit-media-controls-overlay-play-button,
.film::-webkit-media-controls-start-playback-button {
  display: none !important;
  appearance: none;
  opacity: 0;
  pointer-events: none;
}
.film {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--stage);
  color-scheme: dark;
}
.film__fallback { color: #EFF4F6; font-size: 14px; padding: 24px; }
.film__fallback a { color: #67E8F9; text-decoration: underline; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size-adjust: from-font; /* stable x-height across Noto Sans → system sans fallbacks */
}
.hero h1,
.sec-head h2,
.sra-intro h2,
.next h2,
#stack-title,
#wf-title,
#always-title {
  text-wrap: balance;
}
.hero h1 {
  text-shadow: 0 0 40px color-mix(in srgb, var(--cyan) 18%, transparent);
}
html[data-theme="light"] .hero h1 {
  text-shadow: 0 0 28px color-mix(in srgb, var(--navy) 12%, transparent);
}
.vision p em,
.vision p .nl {
  font-style: italic;
}
/* Section headings (h2): shared scale from benefits baseline so same-level sections match and fit grids. */
h2 {
  font-size: clamp(1.92rem, 3.15vw, 2.52rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 500;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 44ch;
}
.tlink {
  color: var(--link);
  border-bottom: 1px solid color-mix(in srgb, var(--link) 42%, transparent);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
.tlink:hover { border-bottom-color: var(--link); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .005em;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn__ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.btn:hover .btn__ic { transform: translateX(3px); }
.btn__play { width: 0; height: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }
.btn--primary { background: var(--cyan); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in srgb, #67E8F9 40%, transparent), 0 0 28px -4px rgba(34, 211, 238, .75), 0 10px 30px -10px rgba(34, 211, 238, .7); }
.btn--primary:hover { background: #67E8F9; box-shadow: 0 0 0 1px color-mix(in srgb, #67E8F9 55%, transparent), 0 0 36px -2px rgba(79, 216, 249, .85), 0 12px 34px -10px rgba(34, 211, 238, .8); }
html[data-theme="light"] .btn--primary { background: var(--navy); color: #FFF; box-shadow: 0 8px 22px -12px rgba(0, 72, 116, .7); }
html[data-theme="light"] .btn--primary:hover { background: #00385A; }
.btn--ghost { color: var(--text); border-color: var(--line-2); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.btn--ghost:hover { border-color: var(--text-2); background: color-mix(in srgb, var(--text) 5%, transparent); }
.btn:active { transform: translateY(1px); }

/* ---------- sections ---------- */
.section {
  padding: clamp(68px, 8vw, 116px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
/* ruled hairline: a faint tick ruler under each section's top edge */
.section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 64px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  opacity: .7;
}
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(34px, 4.2vw, 54px);
}
.sec-head h2 { margin-top: 14px; max-width: 20ch; }
/* FAQ: title alone on the heading row after intro removal; keep one line when width allows. */
.sec-head--solo {
  grid-template-columns: 1fr;
}
#faq-title {
  max-width: none;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  text-wrap: nowrap;
}
@media (max-width: 720px) {
  /* Prefer one line via a local fluid size; wrap only if still too narrow. */
  #faq-title {
    font-size: clamp(1.55rem, 6.2vw, 2.52rem);
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  #faq-title {
    white-space: normal;
    text-wrap: balance;
  }
}

/* Benefits heading: explicit two desktop lines via <br>; inherits section h2 scale. */
#outcomes-title {
  max-width: none;
  text-wrap: wrap; /* balance would fight the forced two-line break */
}


#stack-title { max-width: min(100%, 28ch); }
#stack-title .stack-title__lead { white-space: nowrap; }
#stack-title .stack-title__sub { display: block; }

.sec-head .lede { padding-bottom: 6px; }

/* ---------- what it is: three-step flow ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  counter-reset: none;
}
.flow__step {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-top: 3px solid var(--step, var(--line-2));
}
.flow__step--before { --step: var(--navy); } /* colored top bar: Exchange Navy */
.flow__step--with {
  --step: var(--cyan);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 70%, transparent);
}
.flow__step--you { --step: var(--gold); }
html[data-theme="light"] .flow__step--with { --step: var(--blue); }
.flow__step:not(:last-child)::after {   /* arrow to the next step */
  content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(28px, 3.4vw, 48px) / 2 - 6px);
  width: 10px; height: 10px; border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3);
  transform: translateY(-50%) rotate(45deg);
}
.flow__k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.flow__step--with .flow__k { color: var(--accent-text); }
.flow__step--you .flow__k { color: var(--cyan); }
html[data-theme="light"] .flow__step--you .flow__k { color: #7A5410; }
/* Card / subsection titles (h3): one scale by role across flow, tenets, modules. */
.flow__step h3,
.tenet h3,
.mod h3 {
  font-size: clamp(1.22rem, 1.7vw, 1.48rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
}
.flow__step h3 {
  margin-top: 12px;
}
.flow__step p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.flow__step--before h3 { color: var(--text-2); }

/* racetrack highlight: on hover, one light runs the card's rounded perimeter.
   A 2px ring (::before) sits exactly on the card border; its fill is a conic
   gradient with one short bright arc, rotated by an animated @property angle.
   The ring is cut out with a content-box/border-box mask, so it inherits the
   card's real 14px radius. Paused + faded when not hovered. */
@property --race {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.flow__step { --race-c: var(--cyan); }
.flow__step--you { --race-c: var(--gold); }
html[data-theme="light"] .flow__step { --race-c: var(--navy); }
html[data-theme="light"] .flow__step--you { --race-c: #B7791F; }
.flow__step::before {
  content: "";
  position: absolute;
  inset: -3px -1px -1px;            /* outer edge: 3px top rule, 1px elsewhere */
  border-radius: 15px;              /* card radius 14px + 1px border */
  padding: 2px;
  pointer-events: none;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-c) 40%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.flow__step:hover::before,
.flow__step:focus-within::before { opacity: 1; animation-play-state: running; }
@keyframes flow-race { to { --race: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .flow__step::before {
    animation: none !important;
    background: linear-gradient(var(--race-c), var(--race-c));
    filter: none;
  }
  .flow__step:hover::before { opacity: .85; }
}

.diff {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px 0;
  border-block: 1px solid var(--line);
  padding-block: 16px;
  font-size: 15px;
  color: var(--text-2);
}
.diff li { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--line); }
.diff li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.diff__k { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E11D48; margin-right: 8px; }
.diff__yes { color: var(--text); }
.diff__yes .diff__k { color: var(--accent-text); }
.diff__k--yes, .diff__yes .diff__k { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- stack ---------- */
.section--stack {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-quiet) 70%, transparent), transparent 70%);
}
.stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: clamp(30px, 4.4vw, 68px);
  align-items: start;
}
.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
}
.stack::before,
.stack::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.stack::before {
  left: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #4fd8f9 28%, transparent), var(--line) 45%, color-mix(in srgb, #4fd8f9 18%, transparent));
  box-shadow: 0 0 6px color-mix(in srgb, #4fd8f9 18%, transparent);
}
.stack::after { left: 8px; background: var(--line-3); }

.band {
  position: relative;
  display: block;
  width: calc(100% - var(--i) * var(--taper, 4.4%));
  margin-inline: auto;
  text-align: left;
  background: var(--lc);
  border: 0;
  border-radius: 10px;
  color: var(--on);
  transition: outline-color .35s var(--ease), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
  outline: 2px solid transparent;
  outline-offset: -1px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  /* softer layer edge glow */
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.band__head {
  display: grid;
  grid-template-columns: 24px 22px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  min-height: 64px;
}
.band__ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--on); }
.band__ic svg { width: 21px; height: 21px; display: block; }
.band__idx {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--on);
  opacity: .75;
}
.band__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.band__name {
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--on);
}
.band__tag { font-size: 14px; line-height: 1.35; color: var(--on); opacity: .82; }
.band__sign {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--on);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.band__sign svg { width: 11px; height: 11px; }
.band[aria-expanded="true"] .band__sign { transform: rotate(45deg); }

/* Stack layers: grid 0fr→1fr height; panel ignores pointer so expanding geometry
   does not steal hover from heads / siblings. Content fades out fast on close,
   fades in after height is underway on open. */
.band__panel {
  display: grid;
  grid-template-rows: 0fr;
  pointer-events: none;
  transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1);
}
.band__panelIn {
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0 26px 0 76px;
  opacity: 0;
  transform: translateY(-6px);
  /* default = closing path: fade/slide out quickly, no delay */
  transition:
    opacity .18s ease,
    transform .28s cubic-bezier(.4, 0, .2, 1),
    padding-bottom .45s cubic-bezier(.22, 1, .36, 1);
}
.band[aria-expanded="true"] .band__panel { grid-template-rows: 1fr; }
.band[aria-expanded="true"] .band__panelIn {
  opacity: 1;
  transform: none;
  padding-bottom: 20px;
  /* opening path: let height lead, then reveal copy */
  transition:
    opacity .32s ease .16s,
    transform .4s cubic-bezier(.22, 1, .36, 1) .1s,
    padding-bottom .55s cubic-bezier(.22, 1, .36, 1);
}
.band__head { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .band__panel,
  .band__panelIn,
  .band,
  .band__sign {
    transition: none !important;
  }
  .band__panelIn { opacity: 1; transform: none; }
  .band[aria-expanded="false"] .band__panelIn { opacity: 0; }
}
.band__desc { display: block; font-size: 14.5px; line-height: 1.55; color: var(--on); max-width: 60ch; }
.band__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--chip-line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--text-2);
  white-space: nowrap;
}
.band .chip { border-color: var(--on-32); color: var(--on); background: color-mix(in srgb, var(--on) 8%, transparent); box-shadow: 0 0 12px -4px color-mix(in srgb, var(--on) 35%, transparent); }

/* layer colours: solid fill + one on-colour per band */

/* You crown above numbered layers (not numbered; non-expanding) */
.stack__you {
  width: calc(100% - 6 * var(--taper, 4.4%));
  margin: 0 auto 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-2));
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  box-shadow: 0 0 24px -10px color-mix(in srgb, var(--gold) 62%, transparent);
}
.stack__you-k {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--gold);
}
.stack__you-v { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
html[data-theme="light"] .stack__you {
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2));
}

.band--l1 { --lc: var(--l1); --on: #FFFFFF; --on-32: rgba(255,255,255,.36); --on-30: rgba(255,255,255,.3); }
.band--l2 { --lc: var(--l2); }
.band--l3 { --lc: var(--l3); }
.band--l4 { --lc: var(--l4); }
.band--l5 { --lc: var(--l5); }
.band--l6 { --lc: var(--l6); }
.band--l2, .band--l3, .band--l4, .band--l5, .band--l6 { --on: #0B1018; --on-32: rgba(11,16,24,.32); --on-30: rgba(11,16,24,.3); }
html[data-theme="light"] .band--l2 { border: 1px solid #6F7B8D; }

/* open / hover: glow only — no translate/scale (those shift hit targets mid-gesture). */
.band:hover {
  box-shadow: var(--edge), 0 8px 20px rgba(0, 0, 0, .22);
}
.band.is-open {
  outline-color: var(--on-30);
  box-shadow: var(--edge), 0 12px 28px -16px var(--lc);
}

/* ---------- layer fill: solid hue → sweep → pixels ----------
   Left ~40% is the plain, full-strength layer hue (title + tag live there).
   From 40% a horizontal gradient sweep lifts the SAME hue toward a luminous
   tint at the right edge, and the pixel field is masked on the same ramp
   (starts at 44%, full by 90%), so the pixels read as where the sweep ends.
   Kept: top-edge sheen, ruled hairline ticks, one slow drifting light,
   inset hairline edge, open-layer glow.
   Light hues sweep toward white (raises contrast with near-black type).
   The blue layer sweeps only to a brighter electric blue (#3A6CEB, white
   type still 4.6:1) and keeps deep-blue pixels so white type never sits
   on a light square. */
.band {
  --sweep: color-mix(in srgb, var(--lc) 58%, #FFFFFF);   /* right-edge tint, same hue */
  --hi: rgba(255, 255, 255, .38);                          /* brighter glass sheen */
  --px: #FFFFFF;                                           /* pixel colour */
  --px-a: .68;
  --tick: rgba(11, 16, 24, .16);
  --drift: rgba(255, 255, 255, .42);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(11, 16, 24, .14);
  /* softer multi-stop fade: longer dissolve from solid hue into pixels (no hard wall) */
  --ramp: linear-gradient(90deg, transparent 18%, rgba(0,0,0,.02) 32%, rgba(0,0,0,.08) 44%, rgba(0,0,0,.2) 56%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.82) 88%, rgba(0,0,0,.94) 95%, #000 100%);
  background:
    linear-gradient(180deg, var(--hi), transparent 42%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 14px) 0 100% / 100% 5px no-repeat,
    linear-gradient(90deg, var(--lc) 0%, var(--lc) 34%, color-mix(in srgb, var(--lc) 78%, var(--sweep)) 52%, color-mix(in srgb, var(--lc) 42%, var(--sweep)) 72%, var(--sweep) 100%) 0 0 / 100% 100% no-repeat,
    var(--lc);
  box-shadow: var(--edge);
  isolation: isolate;
}
.band::before,
.band::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.band::before {   /* pixel field: the end of the sweep */
  inset: 0;
  background: var(--px);
  opacity: var(--px-a);
  -webkit-mask: url("assets/brand/layer-pixels.svg?v=2") right top / 640px 96px repeat-y, var(--ramp);
  -webkit-mask-composite: source-in;
          mask: url("assets/brand/layer-pixels.svg?v=2") right top / 640px 96px repeat-y, var(--ramp);
          mask-composite: intersect;
  transition: opacity .55s var(--ease);
}
.band::after {    /* one slow drifting light */
  top: -60%; bottom: -60%; left: -10%;
  width: 46%;
  background: radial-gradient(closest-side, var(--drift), transparent);
  animation: band-drift 34s cubic-bezier(.37, .01, .23, 1) infinite alternate;
  animation-delay: calc(var(--i) * -5.2s);
}
.band__head, .band__panel { position: relative; z-index: 1; }
.band:hover::before, .band.is-open::before { opacity: calc(var(--px-a) + .14); }
@media (max-width: 760px) {
  .band { --ramp: linear-gradient(90deg, transparent 28%, rgba(0,0,0,.04) 46%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.45) 74%, rgba(0,0,0,.78) 88%, #000 100%); }
  .band {
    background:
      linear-gradient(180deg, var(--hi), transparent 42%) 0 0 / 100% 100% no-repeat,
      repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 14px) 0 100% / 100% 5px no-repeat,
      linear-gradient(90deg, var(--lc) 0%, var(--lc) 46%, color-mix(in srgb, var(--lc) 45%, var(--sweep)) 72%, var(--sweep) 100%) 0 0 / 100% 100% no-repeat,
      var(--lc);
  }
}
@keyframes band-drift {
  from { transform: translate3d(0, 0, 0); opacity: .75; }
  50%  { opacity: 1; }
  to   { transform: translate3d(132%, 3%, 0); opacity: .82; }
}

/* blue layer: sweep to electric blue, deep pixels (white type) */
.band--l1 {
  --sweep: #3A6CEB;
  --hi: rgba(255, 255, 255, .08);
  --px: #0B2A7A;
  --px-a: .5;
  --tick: rgba(255, 255, 255, .16);
  --drift: rgba(130, 170, 255, .08);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 20, 70, .35);
}
/* slate: sweep a little further so it doesn't read grey-flat */
.band--l2 { --sweep: color-mix(in srgb, var(--lc) 48%, #FFFFFF); }
.band--l5 { --sweep: color-mix(in srgb, var(--lc) 42%, #E9D5FF); --drift: rgba(233, 213, 255, .45); }
.band--l3 { --sweep: color-mix(in srgb, var(--lc) 40%, #A5F3FC); --drift: rgba(165, 243, 252, .4); }
.band:hover .band__sign { transform: scale(1.15); }
.band[aria-expanded="true"]:hover .band__sign { transform: rotate(45deg) scale(1.15); }

/* aside */
.aside { position: sticky; top: calc(var(--head-h) + 32px); padding-top: 4px; }
.aside__fig {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.aside__line {
  margin-top: 18px;
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
  max-width: 18ch;
}
.aside__cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); max-width: 25ch; }
.cap-tap { display: none; }
@media (hover: none), (max-width: 900px) {
  .cap-hover { display: none; }
  .cap-tap { display: inline; }
}
.gauge { margin-top: 26px; display: flex; flex-direction: column; gap: 7px; }
.gauge__row { display: flex; align-items: center; gap: 9px; }
.gauge__row span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--text-3);
  width: 14px;
}
.gauge__row i {
  display: block;
  height: 2px;
  background: var(--line-2);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.gauge__row.is-lit i { box-shadow: 0 0 10px -2px currentColor; }
.gauge__row span { transition: color .45s var(--ease); }
.gauge__row[data-g="5"] i { width: 72%; }
.gauge__row[data-g="4"] i { width: 77.6%; }
.gauge__row[data-g="3"] i { width: 83.2%; }
.gauge__row[data-g="2"] i { width: 88.8%; }
.gauge__row[data-g="1"] i { width: 94.4%; }
.gauge__row[data-g="0"] i { width: 100%; }
.gauge__row[data-g="5"].is-lit i { background: var(--l6); }
.gauge__row[data-g="4"].is-lit i { background: var(--l5); }
.gauge__row[data-g="3"].is-lit i { background: var(--l4); }
.gauge__row[data-g="2"].is-lit i { background: var(--l3); }
.gauge__row[data-g="1"].is-lit i { background: var(--l2); }
.gauge__row[data-g="0"].is-lit i { background: var(--l1); }
.gauge__row.is-lit span { color: var(--text); }

/* ---------- integrations ---------- */
.integrations {
  margin-top: clamp(44px, 5.4vw, 72px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  gap: 24px clamp(26px, 4vw, 64px);
  align-items: start;
}
/* Integrations title: same section h2 type scale as other section titles. */
.integrations__line {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(1.92rem, 3.15vw, 2.52rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 500;
  text-wrap: balance;
}
.integrations__sub { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 40ch; }
.intg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.intg__item {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px 20px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 12px;
  align-content: start;
  transition: border-color .2s var(--ease);
}
.intg__item:hover { border-color: var(--line-2); }
.intg__ic {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}
.intg__ic svg { width: 19px; height: 19px; display: block; }
html[data-theme="light"] .intg__ic { color: #0E7490; background: color-mix(in srgb, #0E7490 10%, transparent); }
.intg__k { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); align-self: center; }
.intg__v { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.intg__v strong { font-weight: 500; color: var(--text); }
.intg__status {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme="light"] .intg__status {
  border-color: color-mix(in srgb, #78500C 40%, transparent);
  background: color-mix(in srgb, #F5BB61 24%, transparent);
  color: #78500C;
}
.intg__status--coming {
  border-color: var(--line-2);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--text-2);
}
.intg__foot {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 40ch;
}
.intg__footK { font-weight: 600; color: var(--text); margin-right: 0; }

/* racetrack: integration cards (same conic ring as .flow__step) */
.intg__item { position: relative; --race-c: var(--cyan); --race-t: var(--cyan); }
html[data-theme="light"] .intg__item { --race-c: var(--navy); --race-t: var(--navy); }
.intg__item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;              /* card radius 12px + 1px border */
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-t) 45%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.intg__item:hover::before,
.intg__item:focus-within::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .intg__item::before { animation: none !important; background: linear-gradient(var(--race-c), var(--race-c)); filter: none; }
  .intg__item:hover::before { opacity: .85; }
}

/* ---------- promises ---------- */
.tenets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.tenet {
  position: relative;
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.tenet::after {   /* hairline glow along the top edge */
  content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .7;
}
html[data-theme="light"] .tenet::after { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.tenet__ic {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent), 0 0 28px -4px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.tenet__ic svg { width: 24px; height: 24px; display: block; }
html[data-theme="light"] .tenet__ic { color: #0E7490; background: color-mix(in srgb, #0E7490 8%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #0E7490 30%, transparent); }
.tenet h3 { margin-top: 20px; } /* type from shared subsection h3 rule */
.tenet p { margin-top: 10px; font-size: 14.5px; line-height: 1.58; color: var(--text-2); max-width: 38ch; }

/* racetrack: feature / promise cards (.tenet already uses ::after for the top hairline,
   and clips overflow, so the ring sits just inside the 1px border via ::before). */
.tenet { --race-c: var(--cyan); --race-t: var(--cyan); }
html[data-theme="light"] .tenet { --race-c: var(--navy); --race-t: var(--navy); }
.tenet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;              /* card radius 16px - 1px */
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-t) 45%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.tenet:hover::before,
.tenet:focus-within::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .tenet::before { animation: none !important; background: linear-gradient(var(--race-c), var(--race-c)); filter: none; }
  .tenet:hover::before { opacity: .85; }
}


.section--benefits { padding-top: clamp(36px, 5vw, 56px); }
.gets__list--benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .gets__list--benefits { grid-template-columns: 1fr; }
  .gets__list--benefits li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stack__you { width: 100%; flex-direction: column; gap: 4px; }
}

.gets { margin-top: clamp(36px, 4.4vw, 56px); }
.gets__title {
  /* unused in current markup; kept aligned to subsection h3 scale */
  font-size: clamp(1.22rem, 1.7vw, 1.48rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
  margin-bottom: 14px;
}
.gets__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--line-2);
}
.gets__list li { padding: 18px 20px 20px 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.gets__list li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.gets__list strong { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; font-size: 15.5px; margin-bottom: 6px; letter-spacing: -.01em; }
.gets__list strong::before { content: ""; width: 7px; height: 7px; background: var(--gold); flex: none; }

/* ---------- workflows: four rooms ---------- */
.mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mod {
  --mod: var(--accent);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
html[data-theme="dark"] .mod {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mod) 22%, transparent), 0 0 28px -12px color-mix(in srgb, var(--mod) 40%, transparent);
}
html[data-theme="dark"] .mod:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mod) 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mod) 45%, transparent), 0 0 40px -8px color-mix(in srgb, var(--mod) 65%, transparent), 0 18px 36px -20px rgba(0,0,0,.55);
}
.mod--r { --mod: var(--r-rec); }
.mod--o { --mod: var(--r-ops); }
.mod--m { --mod: var(--r-mar); }
.mod--l { --mod: var(--r-lrn); }
/* racetrack on the four module cards (same pattern as the What it is cards).
   .mod clips overflow, so the 2px ring sits just inside the 1px border with
   the inner 13px radius. One hue per module; Marcom gets a gold tail. */
.mod { position: relative; }
.mod--r { --race-c: var(--cyan);  --race-t: var(--cyan); }
.mod--o { --race-c: #B9C93A;      --race-t: #B9C93A; }
.mod--m { --race-c: #A78BFA;      --race-t: var(--gold); }
.mod--l { --race-c: #E07ADE;      --race-t: #E07ADE; }
html[data-theme="light"] .mod--r { --race-c: var(--navy); --race-t: var(--navy); }
html[data-theme="light"] .mod--o { --race-c: #66700A;     --race-t: #66700A; }
html[data-theme="light"] .mod--m { --race-c: #7C3AED;     --race-t: #B7791F; }
html[data-theme="light"] .mod--l { --race-c: #8B1A8A;     --race-t: #8B1A8A; }
.mod::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-t) 45%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.mod:hover::after { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .mod::after { animation: none !important; background: linear-gradient(var(--race-c), var(--race-c)); filter: none; }
  .mod:hover::after { opacity: .85; }
}
.mod__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px 18px 18px;
  border-top: 4px solid var(--mod);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mod) 24%, transparent), transparent);
  border-bottom: 1px solid var(--line);
}
.mod__mark { width: 34px; height: 34px; flex: none; }
/* .mod h3 type from shared subsection h3 rule */
.mod__code { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--text-3); margin-bottom: 3px; }
.mod__line { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.mod__tiles { padding: 6px; display: flex; flex-direction: column; }

.tile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px 8px 8px;
  text-align: left;
  border-radius: 9px;
  transition: background-color .2s var(--ease);
}
.tile__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background-color: var(--stage);
  background-image: var(--dots), linear-gradient(135deg, color-mix(in srgb, var(--mod) 55%, transparent), transparent 80%);
  background-size: 10px 10px, auto;
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tile__ic { display: grid; place-items: center; color: #EFF4F6; }
.tile__ic svg { width: 18px; height: 18px; }
.tile__title { font-size: 14.5px; font-weight: 500; letter-spacing: -.008em; line-height: 1.3; color: var(--text); }
.tile__dur { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.tile:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.tile:hover .tile__frame { border-color: var(--accent); transform: scale(1.04); }
.tile:focus-visible { outline-offset: -2px; }
/* the one workflow with a clip: poster thumbnail + play mark */
.tile--live .tile__frame {
  background-image: linear-gradient(rgba(11, 16, 24, .28), rgba(11, 16, 24, .28)), var(--thumb);
  background-size: cover, cover;
  background-position: center;
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--line-2));
}
.tile__play {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .22);
  display: grid; place-items: center;
}
.tile__play::before { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 7px solid #0B1018; border-block: 4.5px solid transparent; }
.tile--live .tile__title { font-weight: 600; }
.tile--live .tile__dur { color: var(--accent-text); }
@media (min-width: 1181px) { .tile { grid-template-columns: 60px minmax(0, 1fr); } .tile__dur { display: none; } }

.wf__note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-3);
}
.wf__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 0 rgba(245, 187, 97, .5); animation: nl-pulse 2.4s ease-out infinite; }
@keyframes nl-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 187, 97, .55); } 100% { box-shadow: 0 0 0 9px rgba(245, 187, 97, 0); } }

/* ---------- SRA ---------- */
.section--sra { background: var(--surface); border-bottom: 1px solid var(--line); }
.sra-intro { max-width: 720px; }
.sra-intro h2 { margin-top: 14px; max-width: 18ch; }
.sra-intro h2#sra-title {
  text-shadow: 0 0 28px color-mix(in srgb, var(--gold) 22%, transparent);
}
html[data-theme="light"] .sra-intro h2#sra-title {
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 18%, transparent);
}
.sra__lead { margin-top: clamp(16px, 2vw, 22px); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.6; color: var(--text-2); max-width: 56ch; }
.paths { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 620px; }
.paths li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
}
.paths__k { font-size: 14.5px; font-weight: 600; color: var(--text); }
.paths__v { font-size: 14px; color: var(--text-2); }

/* racetrack: exclusive-section path / CTA mini-cards */
.paths li { position: relative; --race-c: var(--gold); --race-t: var(--gold); }
html[data-theme="light"] .paths li { --race-c: #B7791F; --race-t: #B7791F; }
.paths li::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px;              /* card radius 10px + 1px */
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-t) 45%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.paths li:hover::before,
.paths li:focus-within::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .paths li::before { animation: none !important; background: linear-gradient(var(--race-c), var(--race-c)); filter: none; }
  .paths li:hover::before { opacity: .85; }
}

.sra-cols {
  margin-top: clamp(36px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  align-items: stretch;
}
.sra-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  border-top: 3px solid var(--line-2);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.sra-col--sra { border-top-color: #990000; }  /* SRA crimson highlight */
.sra-col--ds { border-top-color: var(--gold); }
html[data-theme="light"] .sra-col--ds { border-top-color: #B7791F; }
.sra-col--sfp { border-top-color: var(--cyan); }
.sra-col__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 34ch;
  flex: 1 1 auto;
}
.sra-col .sra__logo {
  width: 168px;
  height: auto;
  margin-top: 2px;
  align-self: center;          /* center logos in the card */
  margin-inline: auto;
}
/* stacked DS wordmark: same display width as SRA lockup so visual scale matches */
.sra-col--ds .sra__logo { width: 168px; height: auto; }
.sra__logo--white { display: block; }
.sra__logo--color { display: none; }
html[data-theme="light"] .sra__logo--white { display: none; }
html[data-theme="light"] .sra__logo--color { display: block; }

/* racetrack: network cards (SRA / DS / Starfish) — same outer ring as .flow__step;
   top rule is 3px so the inset opens 3px on top. */
.sra-col { position: relative; --race-c: var(--cyan); --race-t: var(--cyan); }
.sra-col--sra { --race-c: #990000; --race-t: #990000; }
.sra-col--ds  { --race-c: var(--gold); --race-t: var(--gold); }
.sra-col--sfp { --race-c: var(--cyan); --race-t: var(--cyan); }
html[data-theme="light"] .sra-col--ds { --race-c: #B7791F; --race-t: #B7791F; }
html[data-theme="light"] .sra-col--sfp { --race-c: var(--navy); --race-t: var(--navy); }
.sra-col::before {
  content: "";
  position: absolute;
  inset: -3px -1px -1px;            /* outer edge: 3px top rule, 1px elsewhere */
  border-radius: 15px;              /* card radius 14px + 1px border */
  padding: 2px;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from var(--race),
      transparent 0deg 210deg,
      color-mix(in srgb, var(--race-t) 45%, transparent) 285deg,
      var(--race-c) 348deg,
      transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--race-c) 16%, transparent), color-mix(in srgb, var(--race-c) 16%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--race-c) 55%, transparent));
  opacity: 0;
  animation: flow-race 2.6s linear infinite paused;
  transition: opacity .45s var(--ease);
}
.sra-col:hover::before,
.sra-col:focus-within::before { opacity: 1; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .sra-col::before { animation: none !important; background: linear-gradient(var(--race-c), var(--race-c)); filter: none; }
  .sra-col:hover::before { opacity: .85; }
}

/* branded network website CTAs (SRA / DS / SFP) */
.brand-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 0 22px 0 18px;
  height: 62px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #FFFFFF;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.brand-btn__logo { width: 54px; height: auto; flex: none; }
.brand-btn--sfp .brand-btn__logo { width: 34px; }
.brand-btn--ds .brand-btn__logo { width: 34px; }
.brand-btn__logo--color { display: none; }
.brand-btn__logo--white { display: block; }
.brand-btn__label { white-space: nowrap; }
.brand-btn__ext { width: 13px; height: 13px; flex: none; opacity: .85; color: #FFFFFF; }
.brand-btn__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.brand-btn:active { transform: translateY(1px); }
/* SRA crimson */
.brand-btn--sra {
  background: #990000;
  border: 1px solid #990000;
  box-shadow: 0 0 28px -10px rgba(153, 0, 0, .55);
}
.brand-btn--sra:hover { background: #7F0000; border-color: #7F0000; }
/* DS navy */
.brand-btn--ds {
  background: #004874;
  border: 1px solid #004874;
  box-shadow: 0 0 28px -10px rgba(0, 72, 116, .55);
}
.brand-btn--ds:hover { background: #00385A; border-color: #00385A; }
/* Starfish deep teal */
.brand-btn--sfp {
  background: #0F5C5C;
  border: 1px solid #0F5C5C;
  box-shadow: 0 0 28px -10px rgba(15, 92, 92, .55);
}
.brand-btn--sfp:hover { background: #0A4545; border-color: #0A4545; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 4px 22px 0;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary:hover .faq__q { color: var(--cyan); }
html[data-theme="light"] .faq__item summary:hover .faq__q { color: var(--accent-text); }
.faq__q {
  flex: 1 1 auto;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.36;
  transition: color .2s var(--ease);
}
.faq__sign {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--text-3);
  transition: transform .3s var(--ease), color .2s var(--ease);
}
.faq__sign svg { width: 10px; height: 10px; }
.faq__item[open] .faq__sign { transform: rotate(45deg); color: var(--text-2); }
.faq__a {
  padding: 0 44px 24px 0;
  max-width: 78ch;
}
.faq__a p { font-size: 15px; line-height: 1.68; color: var(--text-2); }
.faq__a p + p { margin-top: 12px; }
.faq__a a { word-break: break-word; }
.faq__item[open] .faq__q { color: var(--text); }

/* ---------- close ---------- */
.section--next { padding-bottom: clamp(76px, 9vw, 128px); }
.next {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
}
.next h2 { max-width: 14ch; } /* inherits section h2 type scale */
.next p { margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.62; color: var(--text-2); max-width: 50ch; }
.next__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vision { padding-top: 22px; position: relative; }
.vision p {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(1.31rem, 2.18vw, 1.75rem);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -.015em;
  color: var(--text);
  max-width: 28ch;
  font-size-adjust: from-font;
}
.vision__nl { white-space: nowrap; font-style: italic; color: var(--cyan); }
.vision footer { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text-3); }
.vision__q { display: block; width: 13px; height: 13px; margin-bottom: 16px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: clamp(30px, 3.6vw, 42px) 0 28px; }
.foot__top {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.foot__line {
  font-size: 12.5px;
  color: var(--text-2);
  letter-spacing: .005em;
  flex: 1 1 300px;
  min-width: 0;
}
.foot__site {
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__site:hover { color: var(--text); border-color: var(--text); }
.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line-3);
  flex-wrap: wrap;
}
.foot__fine {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.foot__fine--r { max-width: 46ch; }

/* ---------- modal ---------- */
.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.modal::backdrop { background: var(--shade); }
.modal__in { position: relative; padding: 28px 28px 26px; }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.modal__close:hover { color: var(--text); border-color: var(--line-2); }
.modal__close svg { width: 12px; height: 12px; }
.modal__kick {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.modal__title {
  margin-top: 14px;
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  line-height: 1.16;
  letter-spacing: -.025em;
  font-weight: 600;
  padding-right: 30px;
}
.modal__body { margin-top: 12px; font-size: 14px; line-height: 1.62; color: var(--text-2); max-width: 44ch; }
.modal__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; }
.modal[open] { animation: modal-in .22s var(--ease); }
/* workflow clip in the dialog */
.modal--video { width: min(960px, calc(100vw - 32px)); }
.modal__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
  border-radius: 10px;
  background: var(--stage);
  box-shadow: 0 0 0 1px var(--line-2);
  color-scheme: dark;
}
.modal__video[hidden] { display: none; }
.modal--video .modal__body { max-width: 72ch; }
html.is-locked, html.is-locked body { overflow: hidden; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- stack entrance ----------
   One named view timeline on the stack so bands build from the bottom
   up (01 first, 06 last), rising 18px. Falls back to fully visible
   where scroll-driven animation isn't supported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .stack {
      view-timeline-name: --nlos-stack;
      view-timeline-axis: block;
    }
    .js .band {
      animation: band-rise-y cubic-bezier(.22, .61, .36, 1) both;
      animation-timeline: --nlos-stack;
      animation-range: entry calc(1% + var(--i) * 5.5%) entry calc(48% + var(--i) * 5%);
    }
    .js .band__head,
    .js .band__panel {
      animation: band-rise-o cubic-bezier(.22, .61, .36, 1) both;
      animation-timeline: --nlos-stack;
      animation-range: entry calc(3% + var(--i) * 6%) entry calc(58% + var(--i) * 5%);
    }
  }
}
@keyframes band-rise-y {
  from { translate: 0 22px; }
  to { translate: 0 0; }
}
@keyframes band-rise-o {
  from { opacity: 0; filter: blur(.2px); }
  to { opacity: 1; filter: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sra-cols { grid-template-columns: 1fr; gap: 16px; }
  .stack-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 38px; }
  .nav { gap: 14px; }
  .nav a { font-size: 14px; }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .subnav { display: block; }
}
@media (max-width: 1020px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero__copy { max-width: 640px; }
  .hero h1 { max-width: 16ch; }
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .sec-head .lede { max-width: 60ch; padding-bottom: 0; }
  .next { grid-template-columns: 1fr; gap: 30px; }
  .sra-cols { grid-template-columns: 1fr; gap: 16px; }
  .integrations { grid-template-columns: 1fr; gap: 22px; }
  .gets__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gets__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .gets__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  :root { --head-h: 62px; }
  .stack-grid { grid-template-columns: 1fr; gap: 26px; }
  .aside {
    position: static; order: -1;
    display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: end;
    padding: 0 0 14px; border-bottom: 1px solid var(--line);
  }
  .aside__fig { grid-column: 1 / -1; border: 0; padding-bottom: 6px; }
  .aside__line { margin-top: 0; max-width: none; font-size: 1.06rem; }
  .aside__cap { margin-top: 0; max-width: 22ch; text-align: right; }
  .gauge { display: none; }
  .stack { padding-left: 18px; }
  .stack::after { left: 7px; }
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow__step:not(:last-child)::after { display: none; }
  .tenets { grid-template-columns: 1fr; gap: 14px; }
  .tenet { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 22px 20px; }
  .tenet__ic { grid-row: span 2; }
  .tenet h3 { margin-top: 2px; }
}
@media (max-width: 760px) {
  .mods { grid-template-columns: 1fr; }
  .intg { grid-template-columns: 1fr; }
  .paths { grid-template-columns: 1fr; }
  .diff { grid-template-columns: 1fr; gap: 8px; }
  .diff li { border-right: 0; margin-right: 0; padding-right: 0; }
  .foot__top { gap: 14px; }
  .foot__line { flex-basis: 100%; order: 3; }
  .foot__site { margin-left: auto; }
  .foot__bottom { flex-direction: column; gap: 6px; }
  .band__head { grid-template-columns: 20px 18px minmax(0, 1fr) 18px; gap: 10px; padding: 14px 14px; min-height: 60px; }
  .band__ic, .band__ic svg { width: 18px; height: 18px; }
  .band__txt { flex-direction: column; align-items: flex-start; }
  .band__tag { font-size: 13px; }
  .band__panelIn { padding-left: 62px; padding-right: 16px; }
  /* height via grid-template-rows; no max-height cap */
  .band__desc { font-size: 13.5px; }
  .stack { padding-left: 0; gap: 7px; --taper: 1.6%; }
  .stack::before, .stack::after { display: none; }
  .modal__in { padding: 24px 20px 22px; }
  .faq__a { padding-right: 12px; }
  .brand-btn { height: 58px; padding: 0 18px 0 14px; gap: 12px; font-size: 13.5px; }
}
@media (max-width: 460px) {
  .hero h1 { font-size: 2.62rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .btn { height: 46px; padding: 0 18px; font-size: 13.5px; }
  .lockup--head .logo { height: 26px; }
  .gets__list { grid-template-columns: 1fr; }
  .gets__list li, .gets__list li + li { padding-left: 0; border-left: 0; }
  .gets__list li + li { border-top: 1px solid var(--line); }
  .aside { display: block; }
  .aside__cap { text-align: left; margin-top: 8px; max-width: none; }
  .band__panelIn { padding-left: 16px; }
  .brand-btn { width: 100%; justify-content: flex-start; }
  .next__actions .btn { width: 100%; }
}

/* ---------- nlos.ai design elements (decorative background only) ---------- */
.hero, .has-pixels { position: relative; isolation: isolate; }
.fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx__pixels {
  position: absolute; inset: 0;
  background: url("assets/brand/nlos-bg-pixels.svg") 100% 100% / cover no-repeat;  /* 0.13.0 BrandBackground pixels */
  opacity: var(--px-o);
}
.has-pixels--faint .fx__pixels { opacity: var(--px-faint); }
/* 0.13.0: brand backgrounds sit on slate ink only, never in light mode */
html[data-theme="light"] .fx__pixels { display: none; }
.fx__light { position: absolute; border-radius: 50%; will-change: transform; }
.fx__light--cyan { width: 760px; height: 760px; top: -340px; right: -220px; opacity: .42;
  background: radial-gradient(circle, #4fd8f9, transparent 62%); animation: nl-drift-a 18s ease-in-out infinite alternate; }
.fx__light--navy { width: 780px; height: 780px; bottom: -460px; left: -300px; opacity: .4;
  background: radial-gradient(circle, var(--light-navy), transparent 62%); animation: nl-drift-b 22s ease-in-out infinite alternate; }
.fx__light--gold { width: 360px; height: 360px; top: 35%; left: 42%; opacity: .14;
  background: radial-gradient(circle, var(--gold), transparent 65%); animation: nl-drift-c 26s ease-in-out infinite alternate; }
.fx__light--violet { width: 520px; height: 520px; top: 18%; left: -120px; opacity: .22;
  background: radial-gradient(circle, #a855f7, transparent 65%); animation: nl-drift-c 24s ease-in-out infinite alternate-reverse; }
.section--next .fx__light--gold { top: auto; bottom: -120px; left: auto; right: 12%; }
html[data-theme="light"] .fx__light--cyan { opacity: .08; }
html[data-theme="light"] .fx__light--gold { opacity: .07; }
html[data-theme="light"] .fx__light--navy { opacity: .12; }
html[data-theme="light"] .fx__light--violet { opacity: .06; }
@keyframes nl-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.06); } }
@keyframes nl-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, -30px) scale(1.05); } }
@keyframes nl-drift-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 20px) scale(.94); } }

/* hero entrance: one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > *, .js .hero__film { animation: nl-rise .7s var(--ease) both; }
  .js .hero__copy > :nth-child(2) { animation-delay: .06s; }
  .js .hero__copy > :nth-child(3) { animation-delay: .12s; }
  .js .hero__copy > :nth-child(4) { animation-delay: .18s; }
  .js .hero__film { animation-delay: .14s; }
}
@keyframes nl-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .band { opacity: 1 !important; translate: 0 0 !important; transform: none !important; animation: none !important; filter: none !important; }
  .band__head, .band__panel { opacity: 1 !important; animation: none !important; }
  .tile:hover .tile__frame { transform: none; }
  .fx__light, .wf__dot, .band::after { animation: none !important; }
  .mod:hover { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .site-head, .modal, .film, .film-play { display: none; }
  body { background: #FFF; color: #000; }
}

/* ---------- no-JS: everything readable ---------- */
html:not(.js) .band__panel { max-height: 360px; }
html:not(.js) .band__panelIn { opacity: 1; transform: none; padding-bottom: 20px; }
html:not(.js) .band__sign,
html:not(.js) .theme { display: none; }
html:not(.js) .band { cursor: default; }
html:not(.js) .faq__a { display: block; }
.band:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Jeff site feedback, 2026-11-07: consistent benefits and partner alignment. */
.gets__list.gets__list--benefits li {
  padding: 18px 20px 20px;
  border-left: 1px solid var(--line);
}
.stack__you { align-items: center; }
.stack__you-k { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.stack__you-ic { width: 24px; height: 24px; flex: none; }
.sra-col { align-items: center; text-align: center; gap: 24px; }
.sra-col .sra__logo {
  width: 168px;
  max-width: 100%;
  height: 140px;
  object-fit: contain;
  object-position: center;
  margin-top: 0;
  flex: none;
}
.sra-col__note { width: 100%; text-align: center; }
.sra-col .brand-btn {
  width: 100%;
  min-height: 62px;
  height: auto;
  justify-content: center;
  padding: 14px 12px;
  gap: 10px;
}
.sra-col .brand-btn__label { white-space: normal; text-align: center; }
@media (max-width: 760px) {
  .gets__list.gets__list--benefits { grid-template-columns: 1fr; }
  .gets__list.gets__list--benefits li {
    padding-inline: 0;
    border-left: 0;
  }
}

/* ---------- UX fixes, Nov 10 (contrast, focus, tap targets, nav state, lazy thumbs) ---------- */
/* #31 light theme accent text */
html[data-theme="light"] .hero__accent,
html[data-theme="light"] .vision__nl { color: #0E7490; }
/* #32 light theme gold text */
html[data-theme="light"] .kicker--gold { color: #8A5A00; }
html[data-theme="light"] .stack__you-k { color: #8A5A00; }
/* #33 IT'S NOT label per theme */
.diff li:not(.diff__yes) > .diff__k { color: #FB7185; }
html[data-theme="light"] .diff li:not(.diff__yes) > .diff__k { color: #BE123C; }
/* #34 skip link reachable by keyboard: off screen until focused */
.skip { visibility: visible; }
.skip:not(:focus):not(:focus-visible) { transform: translateY(-200%); box-shadow: none; }
/* #36 popup kicker clears the close button */
.modal__kick { padding-right: 44px; }
/* #39 current section in nav */
.nav a.is-active { color: var(--text); }
.nav a.is-active::after { right: 0; }
.subnav__in a.is-active { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .nav a, .nav a::after, .subnav__in a { transition: none; }
}
/* #40 tile thumbnails load when near the viewport */
html.js .tile--live:not(.is-near) .tile__frame {
  background-image: linear-gradient(rgba(11, 16, 24, .28), rgba(11, 16, 24, .28));
}
/* #37 and #38 touch layouts */
@media (max-width: 1080px) {
  .subnav { position: relative; }
  .subnav__in { gap: 16px; padding-block: 0; }
  .subnav__in a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; flex: none; }
  .subnav__in.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  html[data-theme] .theme { width: 44px; height: 44px; }
  .lockup--head, .lockup--foot { min-height: 44px; display: inline-flex; align-items: center; }
  .foot__site { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .modal__close { width: 44px; height: 44px; top: 10px; right: 10px; }
}