/* Swiatowid, design tokens
   Default = OBSIDIAN (dark), palette synced with the printed wizytówka. */
:root {
  --bg: #06070A;
  --bg-2: #0B0D12;
  --bg-3: #12151C;
  --nav-height: 76px;
  --ticker-height: 112px; /* the partner logo strip under the hero */
  --fg: #E8E4D8;
  --fg-dim: #8A8778;
  --fg-faint: #4A4840;
  --line: rgba(232, 228, 216, 0.10);
  --line-2: rgba(232, 228, 216, 0.18);
  --amber: oklch(0.78 0.14 75);
  --amber-dim: oklch(0.55 0.10 75);
  --amber-glow: oklch(0.78 0.14 75 / 0.28);
  --signal: oklch(0.72 0.18 35);
  --ok: oklch(0.75 0.14 150);

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Shared display scale: page heroes stay dominant while section headings
     form a clearly smaller, consistent second tier across every document. */
  --type-hero: clamp(44px, 6.8vw, 104px);
  --type-hero-long: clamp(38px, 5.4vw, 80px);
  --type-section: clamp(32px, 4.5vw, 64px);
  --type-section-long: clamp(28px, 4.1vw, 56px);
  --type-display-word-spacing: -0.24em;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme="bone"] {
  --bg: #EDEAE0;
  --bg-2: #E3DFD2;
  --bg-3: #D7D2C3;
  --fg: #1A1812;
  --fg-dim: #55524A;
  --fg-faint: #8A8778;
  --line: rgba(26, 24, 18, 0.10);
  --line-2: rgba(26, 24, 18, 0.18);
  --amber: oklch(0.55 0.14 55);
  --amber-dim: oklch(0.42 0.10 55);
  --amber-glow: oklch(0.55 0.14 55 / 0.18);
  /* The dark themes' green is a light 0.75, which almost vanishes on bone. */
  --ok: oklch(0.50 0.13 150);
}

[data-theme="steel"] {
  --bg: #0A0D11;
  --bg-2: #0F1319;
  --bg-3: #151A22;
  --amber: oklch(0.82 0.11 220);
  --amber-dim: oklch(0.60 0.10 220);
  --amber-glow: oklch(0.82 0.11 220 / 0.22);
  --signal: oklch(0.78 0.14 200);
}

[data-theme="blood"] {
  --bg: #08060A;
  --bg-2: #0E0A10;
  --bg-3: #150F18;
  --amber: oklch(0.70 0.18 20);
  --amber-dim: oklch(0.48 0.14 20);
  --amber-glow: oklch(0.70 0.18 20 / 0.22);
  --signal: oklch(0.80 0.14 40);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { font-size: 15px; line-height: 1.5; letter-spacing: -0.005em; }

/* JetBrains Mono gives spaces the same full advance as every other glyph.
   At display sizes that leaves conspicuous holes between words, so large
   headings share a tighter word rhythm while keeping their letter spacing. */
h1.hero-h1,
.sec-title,
.cta-final h2,
.legal-hero h1,
.cap-faq h2,
.cap-hero h1,
.cap-section h2,
.of-product h2,
.blog-hero h1,
.careers-hero h1,
.k-hero h1 {
  word-spacing: var(--type-display-word-spacing);
  font-kerning: normal;
}

.mono { font-family: var(--mono); letter-spacing: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }

/* Grain */
.grain {
  display: none;
}

/* Scanline overlay */
.scanlines {
  display: none;
}

/* === NAV === */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: 28px;
  min-height: var(--nav-height);
  padding: 14px 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
nav.top .brand { display: flex; align-items: center; gap: 8px; }
nav.top .brand .brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
nav.top .brand .brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.5);
  transform-origin: left center;
}
nav.top .brand .word {
  margin-left: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
nav.top .links { display: flex; gap: 32px; justify-self: center; }
nav.top .links a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 200ms ease;
  position: relative;
  padding: 6px 0;
}
nav.top .links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}
nav.top .links a:hover { color: var(--fg); }
nav.top .links a:hover::after { transform: scaleX(1); }
nav.top .links a.active { color: var(--fg); }
nav.top .links a.active::after { transform: scaleX(1); }
nav.top .right { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* Language and theme are utilities and sit together; the call to action is a
   different kind of control, so a hairline and a wider gap set it apart. */
nav.top .right .clearance {
  margin-left: 8px;
  position: relative;
}
nav.top .right .clearance::before {
  content: ""; position: absolute; left: -9px; top: 50%;
  width: 1px; height: 20px; margin-top: -10px;
  background: var(--line-2);
}
nav.top .right .status { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); }
nav.top .right .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2s infinite; }
nav.top .right .clearance {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  height: 34px;
  padding: 0 18px 0 26px;
  border: 1px solid var(--amber);
  color: var(--amber);
  text-decoration: none;
  background: transparent;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
nav.top .right .clearance:hover {
  background: var(--amber);
  color: var(--bg);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.theme-toggle:hover { border-color: var(--amber); color: var(--amber); }
.theme-toggle:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="bone"] .theme-toggle .icon-moon { display: none; }
[data-theme="bone"] .theme-toggle .icon-sun  { display: block; }

/* Hamburger + mobile drawer */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.nav-burger:hover { border-color: var(--amber); }
.nav-burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--fg);
  transition: transform 240ms var(--ease), opacity 200ms ease;
  transform-origin: center;
}
.nav-burger.open { border-color: var(--amber); }
.nav-burger.open span { background: var(--amber); }
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: none;
  flex-direction: column;
  padding: 14px 18px 20px;
  gap: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 24px 40px -24px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms ease, transform 240ms var(--ease);
  pointer-events: none;
  z-index: 49;
}
[data-theme="bone"] .nav-drawer { box-shadow: 0 24px 40px -24px rgba(138,90,30,0.22); }
.nav-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-drawer a {
  padding: 16px 10px;
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, padding-left 200ms ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-drawer a::before {
  content: '';
  width: 0; height: 1px;
  background: var(--amber);
  transition: width 200ms ease;
}
.nav-drawer a:hover,
.nav-drawer a.active { color: var(--fg); }
.nav-drawer a:hover::before,
.nav-drawer a.active::before { width: 14px; }
.nav-drawer a.drawer-cta {
  margin-top: 10px;
  justify-content: center;
  border: 1px solid var(--amber);
  color: var(--amber);
  background: transparent;
  letter-spacing: 0.16em;
  font-weight: 500;
  padding: 14px 10px;
}
.nav-drawer a.drawer-cta::before { display: none; }
.nav-drawer a.drawer-cta:hover {
  background: var(--amber);
  color: var(--bg);
}

@media (max-width: 1200px) {
  nav.top { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  nav.top .links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-drawer { display: flex; }
}

/* Language switcher */
.lang-switch { position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; background: transparent; color: var(--fg-dim);
  border: 1px solid var(--line-2); cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  transition: color 200ms, border-color 200ms;
}
.lang-btn:hover, .lang-btn.open { color: var(--amber); border-color: var(--amber); }
.lang-btn .lang-caret { font-size: 9px; opacity: 0.7; transition: transform 200ms; }
.lang-btn.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 180px; background: var(--bg-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.lang-opt {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; background: transparent; color: var(--fg-dim);
  border: none; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  transition: color 150ms, background 150ms;
}
.lang-opt:last-child { border-bottom: none; }
.lang-opt:hover { color: var(--amber); background: var(--bg-3); }
.lang-opt.active { color: var(--amber); }
.lang-opt-code { min-width: 24px; font-weight: 600; }
.lang-opt-name { font-size: 11px; letter-spacing: 0.05em; text-transform: none; font-family: var(--sans); color: inherit; opacity: 0.85; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* === HERO === */
.hero {
  position: relative;
  margin-top: var(--nav-height);
  /* The hero and the partner logo strip under it fill the first screen at any
     resolution; everything else starts below the fold. svh keeps mobile
     browser bars from cropping it. */
  height: calc(100vh - var(--nav-height) - var(--ticker-height));
  height: calc(100svh - var(--nav-height) - var(--ticker-height));
  min-height: 520px;
  overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
}
/* Reticle frame — an asymmetric targeting bracket (top-left + bottom-right)
   that echoes the corner-mark motif on the capability cards and reads as
   "instrument viewport" rather than decoration. Sits above the video veil,
   below the headline and case controls; never intercepts clicks. */
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: 3;
  width: clamp(22px, 3vw, 34px); height: clamp(22px, 3vw, 34px);
  border: 0 solid var(--amber); opacity: 0.85;
  pointer-events: none;
}
.hero::before { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.hero::after { bottom: 84px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }
/* On bone the reticle reads with the case tag, so it takes the same black. */
[data-theme="bone"] .hero::before,
[data-theme="bone"] .hero::after { border-color: #000; opacity: 0.9; }
@media (max-width: 720px) {
  .hero::before { top: 16px; left: 14px; }
  .hero::after { bottom: 72px; right: 14px; }
}

.hero .video-wrap {
  position: absolute; inset: 0;
  background: var(--bg);
  overflow: hidden;
}
.hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.20) contrast(1.05) brightness(0.98) saturate(0.80);
  transition: opacity 600ms;
}
[data-theme="bone"] .hero video {
  filter: sepia(0.15) contrast(1.02) brightness(1.0) saturate(0.85);
}
.hero .video-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.35) 35%, rgba(6,7,10,0.55) 70%, rgba(6,7,10,0.92) 100%);
}
[data-theme="bone"] .hero .video-wrap::after {
  background:
    linear-gradient(180deg, rgba(237,234,224,0.6) 0%, rgba(237,234,224,0.4) 30%, rgba(237,234,224,0.7) 70%, rgba(237,234,224,0.95) 100%);
}
.hero .video-wrap::before {
  content: none;
}

/* === HERO CASE REEL === */
.hero-case-nav {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  font-family: var(--mono);
}
.hero-case-pip {
  all: unset;
  cursor: pointer;
  display: block;
  padding: 10px 0;
  color: var(--fg-dim);
  transition: color 200ms;
}
/* Case overlays inside the hero video */
.hero-case-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.hero-case-overlay-tag {
  position: absolute;
  /* The word shares the corner mark's box -- same top, same height -- so it
     centres on the mark however the mark scales. Left is a deliberate inset:
     the word used to start further in, after a 24px rule and its 12px gap. */
  top: 22px;
  height: clamp(22px, 3vw, 34px);
  left: 44px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  letter-spacing: 0.28em;
  font-weight: 500;
  display: flex;
  align-items: center;
  animation: heroOverlayIn 600ms cubic-bezier(.16,1,.3,1) both;
}
[data-theme="bone"] .hero-case-overlay-tag {
  color: #000;
  text-shadow: 0 1px 10px rgba(237, 234, 224, 0.85);
}
@keyframes heroOverlayIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-case-overlay-tag { animation: none; }
  .hero-case-pip.active .hero-case-pip-fill {
    animation: none;
    transform: scaleX(1);
  }
}
@media (max-width: 720px) {
  .hero-case-overlay-tag {
    top: 16px;
    left: 26px;
    font-size: 10px;
    letter-spacing: 0.22em;
  }
}
[data-theme="bone"] .hero-case-pip { color: #5a5548; }
.hero-case-pip:hover { color: var(--fg); }
[data-theme="bone"] .hero-case-pip:hover { color: #0a0806; }
.hero-case-pip.active { color: var(--amber); }
[data-theme="bone"] .hero-case-pip.active { color: #8A5A1E; }
.hero-case-pip-track {
  display: block;
  position: relative;
  height: 2px;
  background: rgba(140, 140, 140, 0.25);
  overflow: hidden;
}
[data-theme="bone"] .hero-case-pip-track { background: rgba(26, 24, 18, 0.2); }
.hero-case-pip-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 100%;
  background: var(--amber);
  transform-origin: left center;
  transform: scaleX(0);
}
[data-theme="bone"] .hero-case-pip-fill { background: #8A5A1E; }
.hero-case-pip.active .hero-case-pip-fill {
  animation-name: caseFill;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.hero-case-pip-label {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@keyframes caseFill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@media (max-width: 720px) {
  .hero-case-nav { left: 14px; right: 14px; gap: 8px; }
  .hero-case-pip-label { font-size: 9px; letter-spacing: 0.1em; }
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 600ms ease;
}
/* Three of the four mobile clips are landscape (960x506 and 960x540) inside a
   portrait hero, so cover shows about a third of their width. Nothing in CSS
   can show more of a wide frame in a tall box, but it can decide which third:
   centred, the trading chart, the words "HOME INSURANCE POLICY" and the
   typewriter all fell outside the strip. Only the bookmakers clip is genuinely
   portrait (406x720) and keeps the default. Real fix: portrait footage. */
@media (max-width: 900px) {
  .hero-video[data-case="heavy"]   { object-position: 30% center; }
  .hero-video[data-case="pharma"]  { object-position: 32% center; }
  .hero-video[data-case="defense"] { object-position: 40% center; }
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  padding: 0 28px 148px;
  height: 100%;
}

.hero-hud {
  position: absolute;
  inset: 92px 28px 60px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.hero-hud .corner { position: absolute; display: flex; flex-direction: column; gap: 6px; }
.hero-hud .tl { top: 0; left: 0; }
.hero-hud .tr { top: 0; right: 0; text-align: right; }
.hero-hud .bl { bottom: 0; left: 0; }
.hero-hud .br { bottom: 0; right: 0; text-align: right; }
.hero-hud .corner .k { color: var(--fg-faint); }
.hero-hud .corner .v { color: var(--fg); }
.hero-hud .amber { color: var(--amber); }

.hero-hud .bracket::before, .hero-hud .bracket::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--amber);
}
.hero-hud .tl.bracket::before { top: -4px; left: -4px; border-right: none; border-bottom: none; }
.hero-hud .tr.bracket::before { top: -4px; right: -4px; border-left: none; border-bottom: none; }
.hero-hud .bl.bracket::before { bottom: -4px; left: -4px; border-right: none; border-top: none; }
.hero-hud .br.bracket::before { bottom: -4px; right: -4px; border-left: none; border-top: none; }

.hero-title {
  max-width: 1320px;
  display: grid;
  gap: clamp(22px, 2.4vw, 34px);
}
/* Orchestrated hero entrance: headline, tagline, then CTAs rise in sequence.
   Elements sit at the keyframe's `from` state until their delay elapses
   (animation-fill-mode: both), so nothing flashes unstyled first. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero-title > h1,
.hero-title > .hero-tagline,
.hero-title > .hero-ctas {
  animation: heroRise 1000ms var(--ease) both;
  will-change: transform;
}
.hero-title > h1 { animation-delay: 140ms; }
.hero-title > .hero-tagline { animation-delay: 340ms; }
.hero-title > .hero-ctas { animation-delay: 500ms; margin-top: clamp(4px, 1vw, 14px); }
@media (prefers-reduced-motion: reduce) {
  .hero-title > h1,
  .hero-title > .hero-tagline,
  .hero-title > .hero-ctas { animation: none; will-change: auto; }
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amber);
}

h1.hero-h1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--type-hero);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 0 26px rgba(0,0,0,0.35);
}
/* Every language gets the smaller long-headline size, so the hero reads the
   same in English as in the languages whose words run longer. */
html[lang] h1.hero-h1 {
  font-size: var(--type-hero-long);
  letter-spacing: -0.03em;
}
[data-theme="bone"] h1.hero-h1 {
  color: #0a0806;
  text-shadow: 0 1px 3px rgba(237,234,224,0.92), 0 2px 22px rgba(237,234,224,0.6);
}
[data-theme="bone"] h1.hero-h1 .thin { color: #3a3830; }
[data-theme="bone"] h1.hero-h1 em { color: #8A5A1E; }
[data-theme="bone"] .hero-sub {
  color: #1a1812;
  background: rgba(237, 234, 224, 0.78);
  backdrop-filter: blur(8px);
  padding: 18px 22px;
  border-left: 2px solid #8A5A1E;
  text-shadow: none;
  font-weight: 500;
  font-size: 16px;
}
[data-theme="bone"] .hero-sub b { color: #0a0806; font-weight: 700; }
[data-theme="bone"] .hero-ctas .btn {
  background: rgba(237, 234, 224, 0.92);
  border-color: #8A5A1E;
  color: #0a0806;
  font-weight: 600;
}
[data-theme="bone"] .hero-ctas .btn.primary {
  background: #8A5A1E;
  color: #EDEAE0;
  border-color: #8A5A1E;
}
[data-theme="bone"] .hero-ctas .btn.primary:hover {
  background: rgba(237, 234, 224, 0.95);
  color: #8A5A1E;
}
h1.hero-h1 .thin { font-weight: 300; color: var(--fg-dim); }
h1.hero-h1 em { font-style: normal; color: var(--amber); font-weight: 400; }

.hero-sub {
  max-width: 620px;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-dim);
}
.hero-sub b { color: var(--fg); font-weight: 500; }

.hero-tagline {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--fg);
  max-width: 900px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6), 0 0 22px rgba(0,0,0,0.3);
}
html[lang] .hero-tagline {
  font-size: clamp(20px, 2.7vw, 40px);
}
[data-theme="bone"] .hero-tagline {
  color: #2a2620;
  text-shadow: 0 1px 10px rgba(237,234,224,0.55);
}

.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: transparent; color: var(--fg);
  cursor: pointer; text-decoration: none;
  transition: all 200ms var(--ease);
  position: relative;
}
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 40%, var(--amber-glow) 100%);
  opacity: 0; transition: opacity 200ms;
}
.btn:hover { border-color: var(--amber); color: var(--amber); }
.btn:hover::after { opacity: 1; }
.btn.primary { background: var(--amber); color: #0a0a0a; border-color: var(--amber); }
/* On bone the amber is a mid-dark brown, so near-black text on it sits at about
   3:1 — the label has to be light there, as it is on every other filled control. */
[data-theme="bone"] .btn.primary { color: var(--bg); }
.btn.primary:hover { background: transparent; color: var(--amber); }
.btn .arrow { font-family: var(--mono); }

/* Cohesive keyboard focus — one amber ring on every interactive surface.
   .hero-case-pip uses `all: unset`, which strips the UA outline, so this is
   the only focus affordance those tab stops get. Mouse users never see it
   (:focus-visible), so it costs the pointer UI nothing. */
.btn:focus-visible,
nav.top .links a:focus-visible,
nav.top .right .clearance:focus-visible,
.lang-btn:focus-visible,
.lang-opt:focus-visible,
.hero-case-pip:focus-visible,
a.voice-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.hero-footstrip {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(6,7,10,0.6); backdrop-filter: blur(10px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
}
[data-theme="bone"] .hero-footstrip {
  background: rgba(255, 253, 245, 0.85);
}
.hero-footstrip > div {
  padding: 18px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.hero-footstrip > div:last-child { border-right: none; }
.hero-footstrip .k { color: var(--fg-faint); }
[data-theme="bone"] .hero-footstrip .k { color: #6a6658; }
.hero-footstrip .v { color: var(--fg); font-size: 14px; letter-spacing: 0; }
[data-theme="bone"] .hero-footstrip .v { color: #0a0806; font-weight: 500; }
.hero-footstrip .v.amber { color: var(--amber); }
[data-theme="bone"] .hero-footstrip .v.amber { color: #8A5A1E; font-weight: 600; }

/* Scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 100px;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg-dim);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .track { width: 1px; height: 40px; background: linear-gradient(180deg, var(--fg-dim), transparent); position: relative; }
.scroll-cue .track::after { content:""; position:absolute; top:0; left:0; width:1px; height:12px; background: var(--amber); animation: drop 1.8s infinite var(--ease); }
@keyframes drop { 0% { top: 0; opacity: 1; } 80% { opacity: 0; } 100% { top: 40px; opacity: 0; } }

/* === SECTIONS === */
section { position: relative; padding: 72px 28px; }

.sec-head {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 40px; align-items: start;
}
.sec-index {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amber);
}
.sec-index .id { display: block; margin-top: 4px; color: var(--fg-faint); }
.sec-title {
  font-family: var(--mono); font-size: var(--type-section); line-height: 1; letter-spacing: -0.025em;
  font-weight: 500; text-transform: uppercase; color: var(--fg);
  max-width: 24ch;
}
html[lang] .sec-title {
  font-size: var(--type-section-long);
  letter-spacing: -0.02em;
}
.sec-title .thin { color: var(--fg-dim); font-weight: 300; }
.dataflow-title {
  max-width: 1320px;
  color: var(--fg);
}
[data-theme="bone"] .dataflow-title {
  color: #0a0806;
}
.sec-desc { color: var(--fg-dim); font-size: 16px; line-height: 1.55; max-width: 620px; }

/* Running body copy is justified site-wide. Hyphenation goes with it: at these
   measures an unhyphenated justified line opens rivers, worst in the German and
   Polish builds where the words are longest. The <html lang> attribute tracks
   the active language, so the browser hyphenates by the right rules. */
.lede,
.sec-desc,
.of-info .desc,
.legal-body p,
.job .body .pitch,
.cap-faq-a,
.cap-deploy-card p,
.cap-impact-card .impact-desc {
  text-align: justify;
  text-justify: inter-word;
  /* Words stay whole at the line end; no "ko-mercyjnych". */
  hyphens: manual;
}
@media (max-width: 640px) {
  /* A phone column is too narrow to justify without hyphens: the gaps
     between words open up, so the same blocks set ragged right there. */
  .sec-desc,
  .of-info .desc,
  .legal-body p,
  .job .body .pitch,
  .cap-faq-a,
  .cap-deploy-card p,
  .cap-impact-card .impact-desc { text-align: left; }
}

/* Stacked under the headline, but a 620px measure looks pinched against a
   headline several times its width. Past 1280px give the paragraph a wider
   column and larger type together — widening alone would push the line past
   the length a reader can track back from. */
@media (min-width: 1280px) {
  .sec-desc {
    max-width: 800px;
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Capability grid */
.cap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border: 1px solid var(--line); }
.cap {
  grid-column: span 4;
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 260px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  position: relative;
  transition: background 200ms;
}
.cap:hover { background: var(--bg-2); }
.cap:nth-child(3n) { border-right: none; }
.cap:nth-last-child(-n+3) { border-bottom: none; }
.cap .num { font-family: var(--mono); font-size: 10px; color: var(--amber); letter-spacing: 0.15em; }
.cap h3 { font-family: var(--mono); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; }
.cap p { color: var(--fg-dim); font-size: 14px; line-height: 1.55; }
.cap .tag { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.15em; text-transform: uppercase; }

.cap.big { grid-column: span 8; min-height: 320px; }
.cap.big h3 { font-size: 28px; }

/* Data sources section */
.sources {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line);
}
.source-col { padding: 0; }
.source-col:first-child { border-right: 1px solid var(--line); }
.source-col h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  color: var(--amber);
  display: flex; justify-content: space-between; align-items: center;
}
.source-col h4 .count { color: var(--fg-faint); }
.source-row {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  align-items: center;
  transition: background 150ms;
}
.source-row:last-child { border-bottom: none; }
.source-row:hover { background: var(--bg-2); }
.source-row .idx { color: var(--fg-faint); font-size: 10px; }
.source-row .name { color: var(--fg); }
.source-row .volume { color: var(--fg-dim); font-size: 10px; }
.source-row .latency { color: var(--amber); font-size: 10px; }
.source-row .live { width: 6px; height: 6px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 6px var(--ok); }

/* Dual use, two columns */
.dual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line);
}
.dual-panel {
  padding: 48px 40px;
  display: grid; gap: 28px; align-content: start;
  position: relative; min-height: 520px;
  overflow: hidden;
}
.dual-panel:first-child { border-right: 1px solid var(--line); }
.dual-panel .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  color: var(--amber);
}
.dual-panel h3 {
  font-family: var(--mono); font-size: 36px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  font-weight: 400;
}
.dual-panel h3 .thin { color: var(--fg-dim); font-weight: 300; display: block; }
.dual-panel p { color: var(--fg-dim); font-size: 15px; line-height: 1.55; max-width: 440px; }
.dual-panel .bullets { display: grid; gap: 10px; font-family: var(--mono); font-size: 12px; }
.dual-panel .bullets li { list-style: none; display: grid; grid-template-columns: 16px 1fr; gap: 10px; color: var(--fg); }
.dual-panel .bullets li::before { content: "—"; color: var(--amber); }

.dual-panel .mini-demo {
  margin-top: auto;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 16px;
  font-family: var(--mono); font-size: 11px;
}
.dual-panel .mini-demo .hdr {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px; margin-bottom: 12px;
  color: var(--fg-faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px;
}
.mini-demo .bar-row {
  display: grid; grid-template-columns: 1fr 80px 50px; gap: 10px; align-items: center;
  padding: 6px 0;
}
.mini-demo .bar-row .name { color: var(--fg); font-size: 11px; }
.mini-demo .bar-row .bar { height: 4px; background: var(--bg-3); position: relative; }
.mini-demo .bar-row .bar-fill { height: 100%; background: var(--amber); transition: width 800ms var(--ease); }
.mini-demo .bar-row .pct { color: var(--amber); text-align: right; font-size: 11px; }

/* Signals ticker */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bg-2);
}
.ticker.logo-ticker {
  background: var(--fg);
  border-top-color: rgba(6, 7, 10, 0.18);
  border-bottom-color: rgba(6, 7, 10, 0.18);
}
.ticker.logo-ticker.logo-ticker-black {
  background: var(--bg);
  border-top-color: rgba(232, 228, 216, 0.1);
  border-bottom-color: rgba(232, 228, 216, 0.1);
}
.ticker.logo-ticker.logo-ticker-black img {
  filter: url(#ticker-logo-fg);
}
.ticker.logo-ticker.logo-ticker-black img.preserve-color {
  filter: none;
}
.ticker .track {
  display: inline-flex;
  width: max-content;
  min-width: max-content;
  gap: 60px;
  padding: 18px 0;
  white-space: nowrap;
  animation: tick 140s linear infinite;
  will-change: transform;
}
.ticker.logo-ticker .track {
  padding: 28px 0;
  gap: 24px;
  align-items: center;
  height: calc(var(--ticker-height) - 2px);
  box-sizing: border-box;
}
.ticker.logo-ticker img {
  max-height: 54px;
}
.ticker.logo-ticker .logo-chip {
  flex: 0 0 auto;
  padding: 0 28px;
  background: transparent;
  border: none;
  box-shadow: none;
}
[data-theme="bone"] .ticker.logo-ticker {
  background: var(--bg-2);
}
[data-theme="bone"] .ticker.logo-ticker .logo-chip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 28px;
}
[data-theme="bone"] .ticker.logo-ticker img {
  filter: none;
}
.ticker .item { display: inline-flex; gap: 10px; align-items: center; color: var(--fg-dim); }
.ticker .item .amber { color: var(--amber); }
.ticker .item .sep { color: var(--fg-faint); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Partner voices */
.voices-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.voices-static {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.voices-static .voice-card { width: auto; min-width: 0; }
.voices-track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 32px 12px;
  animation: voices-scroll 60s linear infinite;
  will-change: transform;
}
.voices-marquee:hover .voices-track { animation-play-state: paused; }
.voice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding: 30px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
a.voice-card {
  text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
}
a.voice-card:hover { border-color: var(--amber); background: var(--bg-3); transform: translateY(-2px); }
.voice-quote {
  margin: 0;
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.55;
  color: var(--fg);
  position: relative;
  padding-left: 18px;
  border-left: 1px solid var(--amber);
}
.voice-meta {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.voice-avatar {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.voice-who {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.voice-name {
  font-family: var(--mono); font-size: clamp(12px, 0.95vw, 13px); font-weight: 500;
  letter-spacing: 0.02em; color: var(--fg);
}
.voice-role {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-dim);
}
.voice-logo {
  height: 22px; width: auto; max-width: clamp(72px, 7vw, 110px);
  justify-self: end;
  background: #fff;
  padding: 6px 9px;
  border-radius: 6px;
  box-sizing: content-box;
  object-fit: contain;
}
.voice-card-betfan .voice-logo {
  height: 52px;
  max-width: 56px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.voices-caption {
  width: 100%;
  margin: 0 auto 44px;
  display: grid;
  justify-items: center;
  max-width: none;
  font-family: var(--mono);
  font-size: clamp(20px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
  text-wrap: balance;
}
[data-theme="bone"] .voices-caption {
  color: #0a0806;
}
@keyframes voices-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 1050px) {
  .voices-static { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices-static .voice-card:last-child { grid-column: 1 / -1; }
  .voice-quote { font-size: 16px; }
}

@media (max-width: 700px) {
  .voices-static { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .voices-static .voice-card:last-child { grid-column: auto; }
  .voice-card { padding: 24px; gap: 22px; }
  .voice-quote { font-size: 15px; }
}

@media (max-width: 640px) {
  :root {
    --type-hero: clamp(36px, 10.5vw, 56px);
    --type-hero-long: clamp(34px, 9.5vw, 48px);
    --type-section: clamp(32px, 9vw, 44px);
    --type-section-long: clamp(30px, 8.4vw, 40px);
  }

  .voices-caption { font-size: 22px; }
}

/* Forecast chart */
.forecast-block {
  border: 1px solid var(--line);
  display: grid; grid-template-columns: 1.4fr 1fr;
}
.forecast-chart { padding: 40px; border-right: 1px solid var(--line); min-height: 420px; position: relative; }
.forecast-chart .title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; }
.forecast-chart .q { font-family: var(--mono); font-size: 18px; color: var(--fg); margin-bottom: 24px; }
.forecast-chart svg { width: 100%; height: 280px; display: block; }

.forecast-meta { padding: 40px; display: grid; gap: 20px; align-content: start; }
.forecast-meta .kv { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
.forecast-meta .kv .k { color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.forecast-meta .kv .v { color: var(--fg); letter-spacing: 0; }
.forecast-meta .kv .v.amber { color: var(--amber); }

/* === SUPPORTED MODELS === */
/* Compute section: the headline and its paragraph on the left, the machine
   itself on the right, so the claim and the thing it refers to sit together. */
.cap-heart {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.cap-heart .cap-heart-text h2 { margin-bottom: 24px; }
.cap-heart .cap-heart-text p.sec-desc { margin-bottom: 0; max-width: none; }
.heart-photo {
  position: relative;
  display: block;
  align-self: stretch;
  min-height: 340px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 240ms ease;
}
.heart-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.04) brightness(0.92) saturate(0.95);
  transform: scale(1.02);
  transition: transform 900ms var(--ease), filter 700ms ease;
}
.heart-photo:hover { border-color: var(--amber); }
.heart-photo:hover img { transform: scale(1.06); filter: contrast(1.08) brightness(1) saturate(1); }
.heart-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(6,7,10,0.45) 100%);
  pointer-events: none;
}
[data-theme="bone"] .heart-photo-veil {
  background: linear-gradient(90deg, transparent 60%, rgba(20,18,14,0.18) 100%);
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
}

.model-card {
  position: relative;
  padding: 36px 24px 28px;
  display: grid; gap: 14px; align-content: start; justify-items: center;
  text-align: center;
  border-right: 1px solid var(--line);
  min-height: 260px;
  background: transparent;
  color: inherit; text-decoration: none;
  cursor: pointer;
  transition: background 240ms ease, box-shadow 240ms ease;
  opacity: 0; transform: translateY(8px);
  animation: modelIn 620ms cubic-bezier(.16,1,.3,1) forwards;
}
.model-card:last-child { border-right: none; }
.model-card:hover {
  background: rgba(184, 130, 46, 0.055);
  box-shadow: inset 0 -1px 0 var(--amber);
}
[data-theme="bone"] .model-card:hover { background: rgba(138, 90, 30, 0.06); }

@keyframes modelIn {
  to { opacity: 1; transform: translateY(0); }
}

.model-corner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--amber);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.model-corner.tl { top: 10px; left: 10px; border-left: 1px solid; border-top: 1px solid; }
.model-corner.br { bottom: 10px; right: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.model-card:hover .model-corner { opacity: 0.9; }

.model-logo {
  flex: none;
  width: 96px; height: 96px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(245, 241, 230, 0.9);
  border: 1px solid var(--line);
  margin-top: 8px;
  transition: transform 240ms var(--ease), border-color 240ms ease;
}
[data-theme="bone"] .model-logo { background: #fff; border-color: rgba(138, 90, 30, 0.18); }
.model-logo img {
  display: block;
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
}
.model-card:hover .model-logo {
  transform: scale(1.05);
  border-color: var(--amber);
}
.model-name {
  font-family: var(--mono);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1;
  margin-top: 4px;
}
.model-tag {
  font-size: 13px; line-height: 1.45;
  color: var(--fg-dim);
  max-width: 220px;
}
.model-pub {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: auto;
  padding-top: 8px;
}

@media (max-width: 1000px) {
  .model-card:nth-child(3) { border-right: none; }
  .model-card:nth-child(1), .model-card:nth-child(2), .model-card:nth-child(3) { border-bottom: 1px solid var(--line); }
  .model-card:nth-child(4) { border-right: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cap-heart { grid-template-columns: 1fr; gap: 32px; }
  .heart-photo { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .models-grid { grid-template-columns: repeat(1, 1fr); }
  .model-card { border-right: none; border-bottom: 1px solid var(--line); min-height: 140px; padding: 24px 18px; }
  .model-card:last-child { border-bottom: none; }
  .model-name { font-size: 22px; }
}

/* === HEART OF SWIATOWID === */





@media (max-width: 900px) {
}
@media (max-width: 640px) {
}

/* === PARTNERS === */
.partners-grid {
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.partner-card {
  position: relative;
  padding: 36px 28px 32px;
  display: grid; gap: 12px; align-content: start;
  border-right: 1px solid var(--line);
  background: transparent;
  transition: background 260ms ease;
  opacity: 0; transform: translateY(10px);
  animation: partnerIn 620ms cubic-bezier(.16,1,.3,1) forwards;
  min-height: 200px;
  cursor: default;
}
.partners-grid:not(.is-ready) .partner-card { animation-play-state: paused; }
.partner-card:last-child { border-right: none; }
.partner-card:hover {
  background: rgba(184, 130, 46, 0.055);
}
[data-theme="bone"] .partner-card:hover { background: rgba(138, 90, 30, 0.055); }

.partner-corner {
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--amber);
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.partner-corner.tl { top: 10px;    left: 10px;  border-left: 1px solid; border-top: 1px solid;    transform: translate(4px, 4px); }
.partner-corner.tr { top: 10px;    right: 10px; border-right: 1px solid; border-top: 1px solid;   transform: translate(-4px, 4px); }
.partner-corner.bl { bottom: 10px; left: 10px;  border-left: 1px solid; border-bottom: 1px solid; transform: translate(4px, -4px); }
.partner-corner.br { bottom: 10px; right: 10px; border-right: 1px solid; border-bottom: 1px solid; transform: translate(-4px, -4px); }
.partner-card:hover .partner-corner {
  opacity: 0.9;
  transform: translate(0, 0);
}

@keyframes partnerIn {
  to { opacity: 1; transform: translateY(0); }
}

.partner-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.partner-num {
  font-family: var(--mono);
  font-size: 56px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.partner-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-dim);
}

@media (max-width: 1000px) {
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .partner-card:nth-child(3) { border-right: none; }
  .partner-card:nth-child(1), .partner-card:nth-child(2), .partner-card:nth-child(3) {
    border-bottom: 1px solid var(--line);
  }
  .partner-card:nth-child(4) { border-right: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-card { min-height: 180px; padding: 26px 20px 22px; }
  .partner-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .partner-card:nth-child(even) { border-right: none; }
  .partner-card:not(:last-child) { border-bottom: 1px solid var(--line); }
  .partner-num { font-size: 44px; }
}

/* CTA */
.cta-final {
  padding: 140px 28px 140px;
  text-align: center;
  border-top: 1px solid var(--line);
  position: relative;
}
.cta-final h2 {
  font-family: var(--mono); font-size: clamp(40px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase; font-weight: 400;
  max-width: 900px; margin: 0 auto 28px;
}
.cta-final h2 .thin { color: var(--fg-dim); font-weight: 300; }
.cta-final h2 em { font-style: normal; color: var(--amber); }
.cta-final p { color: var(--fg-dim); max-width: 520px; margin: 0 auto 36px; font-size: 16px; }

/* Legal pages: privacy, terms, cookies. The hero is the one every other
   subpage uses (left-aligned two-line title, lede), then a contents column
   beside a reading-width text. */
.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-hero { padding: 150px 28px 56px; }
.legal-hero-inner { max-width: 1400px; margin: 0 auto; }
.legal-hero h1 {
  font-family: var(--mono); font-weight: 500;
  font-size: var(--type-hero-long); line-height: 0.96; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--fg);
  max-width: 1200px; margin: 0 0 28px;
}
.legal-hero h1 .thin { color: var(--fg-dim); font-weight: 300; }
.legal-hero .lede { font-size: 17px; line-height: 1.6; color: var(--fg-dim); max-width: 720px; margin: 0 0 22px; }
.legal-hero .meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint);
}

.legal-body { flex: 1; padding: 72px 28px 96px; border-top: 1px solid var(--line); }
.legal-body-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 280px minmax(0, 780px); gap: 72px;
}
.legal-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
.legal-toc-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 16px;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.legal-toc a {
  display: flex; gap: 12px; margin-left: -1px; padding: 7px 0 7px 16px;
  border-left: 1px solid transparent;
  font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-dim); text-decoration: none;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.legal-toc a:hover { color: var(--amber); border-left-color: var(--amber); }
.legal-toc .num { color: var(--fg-faint); flex: none; }

.legal-doc section { scroll-margin-top: 96px; margin-top: 44px; padding: 28px 0 0; border-top: 1px solid var(--line); }
.legal-doc section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h2 {
  font-family: var(--mono); font-weight: 500;
  font-size: 20px; letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 14px;
}
.legal-body h2 .num { color: var(--amber); font-size: 12px; letter-spacing: 0.2em; font-weight: 400; flex-shrink: 0; }
.legal-body p, .legal-body li {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.72;
  color: var(--fg-dim);
}
.legal-body p { margin: 0 0 14px; }
.legal-body p b, .legal-body li b { color: var(--fg); font-weight: 500; }
.legal-doc a,
.legal-hero .lede a,
.legal-inline-btn {
  color: var(--amber); text-decoration: none;
  border-bottom: 1px solid rgba(184,130,46,0.4);
  transition: border-color 200ms var(--ease);
}
.legal-doc a:hover, .legal-hero .lede a:hover, .legal-inline-btn:hover { border-bottom-color: var(--amber); }
.legal-inline-btn {
  appearance: none; background: none; border-top: 0; border-left: 0; border-right: 0;
  padding: 0; font: inherit; cursor: pointer;
}
.legal-body ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.legal-body ul li { position: relative; padding-left: 30px; font-size: 15px; }
.legal-body ul li::before {
  position: absolute; left: 0; top: 0;
  content: "—"; color: var(--amber); font-family: var(--mono);
}
.legal-body .callout {
  margin: 24px 0; padding: 22px 24px;
  border-left: 2px solid var(--amber); background: var(--bg-2);
  font-size: 14.5px; line-height: 1.6; color: var(--fg);
}

/* The company card: hairlines between cells, a faint label over each value,
   the way the contact page lays out its offices. */
.legal-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin: 20px 0 8px;
}
.legal-fact { background: var(--bg); padding: 16px 20px; min-width: 0; }
.legal-fact-name, .legal-fact-address, .legal-fact-court, .legal-fact-email { grid-column: 1 / -1; }
.legal-fact dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px;
}
.legal-fact dd { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }

.legal-table { overflow-x: auto; margin: 16px 0 24px; }
.legal-table table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.legal-table th {
  font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); border-bottom-color: var(--amber);
}
.legal-table td { color: var(--fg-dim); line-height: 1.55; }
.legal-table td:first-child { color: var(--fg); overflow-wrap: anywhere; min-width: 150px; }

@media (max-width: 900px) {
  .legal-body-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-toc { display: none; }
}
@media (max-width: 640px) {
  .legal-hero { padding: 130px 20px 44px; }
  .legal-body { padding: 48px 20px 80px; }
  .legal-body h2 { font-size: 17px; flex-direction: column; gap: 6px; }
  .legal-facts { grid-template-columns: minmax(0, 1fr); }
  /* Four columns do not fit a phone, so each row becomes a card and each cell
     carries its column name. */
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-table td { display: block; padding: 3px 0; border: 0; }
  .legal-table td::before {
    content: attr(data-label); display: block;
    font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint);
  }
  .legal-table td:first-child::before { display: none; }
}

/* Dataflow hover, no transforms or dot scaling so the nodes never overlap
   the connecting lines when hovered. Hover just tints stroke/fill/text. */
.df-node {
  cursor: pointer;
}
.df-node-shape {
  transition: stroke 200ms var(--ease), stroke-width 200ms var(--ease), fill 200ms var(--ease);
}
.df-input:hover .df-node-shape,
.df-output:hover .df-node-shape {
  stroke: var(--amber);
  stroke-width: 1.6;
  fill: rgba(184, 130, 46, 0.06);
}
[data-theme="bone"] .df-input:hover .df-node-shape,
[data-theme="bone"] .df-output:hover .df-node-shape {
  fill: rgba(138, 90, 30, 0.08);
}
.df-input:hover text,
.df-output:hover text {
  fill: var(--amber);
}
.df-core:hover .df-node-shape {
  fill: rgba(184, 130, 46, 0.1);
}

/* === PROBABILITY CONSOLE ===
   One monitored event, its probability over the selected horizon, and the
   textual explainability behind the last move. Nothing animates on its own —
   the panel only changes when the visitor picks another horizon. */
.pc {
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
}
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.pc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pc-cell {
  padding: 24px 24px 26px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.pc-cell:last-child { border-right: none; }
.pc-cell-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pc-cell-head h4 {
  margin: 0;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--amber);
}
.pc-cell-meta {
  font-size: 11px; letter-spacing: 0;
  color: var(--fg-faint); font-family: var(--sans);
  max-width: 32ch; text-align: right;
}


.pc-headline { display: flex; align-items: stretch; justify-content: space-between; gap: 28px; }
.pc-question {
  margin: 0; align-self: center;
  font-family: var(--sans); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35;
  color: var(--fg); max-width: 30ch;
}
/* The probability as a labelled reading, set off by a hairline, the way the
   explainability column labels its signals. */
.pc-prob {
  flex: none; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding-left: 26px; border-left: 1px solid var(--line);
}
.pc-prob-k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); }
.pc-prob-v {
  font-family: var(--mono); color: var(--fg); font-weight: 500;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 0.9; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-prob-v span { font-size: 0.45em; margin-left: 4px; color: var(--fg-dim); font-weight: 300; letter-spacing: 0; }
@media (max-width: 560px) {
  /* A phone gives the question the full width; the reading sits under it. */
  .pc-headline { flex-direction: column; gap: 16px; }
  .pc-prob {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    padding: 14px 0 0; border-left: none; border-top: 1px solid var(--line);
  }
}
/* Stretched to one height: labels share the top line, values the bottom one. */

/* Chart: a fixed 0-100 scale, the threshold the rule watches, the window the
   move happened inside and the moment the alert fired. Labels are HTML over a
   stretched SVG, so they share the 10px tracked mono of the column beside it. */
/* The event cell is a column and the chart takes whatever height the taller
   explainability column leaves, so both cells end on the same line. */
.pc-event { display: flex; flex-direction: column; }
.pc-chart { position: relative; margin: 30px 0 26px; padding: 12px 0 0 30px; flex: 1; display: flex; flex-direction: column; }
.pc-plot { position: relative; flex: 1; min-height: 188px; }
.pc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-grid-line { stroke: var(--line); stroke-width: 1; }
.pc-alert-line { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.pc-line-calm { fill: none; stroke: var(--fg-faint); stroke-width: 1.5; stroke-linejoin: round; }
.pc-line-alert { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }

.pc-axis {
  position: absolute; right: calc(100% + 10px); transform: translateY(-50%);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.pc-mark { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.pc-mark-fire {
  width: 12px; height: 12px; background: var(--amber);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--amber), 0 0 14px var(--amber);
}
.pc-fire-label {
  position: absolute; transform: translate(calc(-100% - 14px), -50%);
  padding: 3px 6px; background: var(--bg);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber);
  line-height: 1; white-space: nowrap;
}
.pc-mark-head { width: 8px; height: 8px; background: var(--amber); }

/* Clock time along the bottom: a tick every half hour, a label every hour,
   and the right end marked as now. */
.pc-xaxis { position: relative; height: 26px; margin-top: 4px; border-top: 1px solid var(--line); }
.pc-tick { position: absolute; top: 0; width: 1px; height: 5px; background: var(--line-2); transform: translateX(-0.5px); }
.pc-xaxis span {
  position: absolute; top: 10px; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); white-space: nowrap;
}
/* The time zone sits in the gutter under the y-axis numbers. */
.pc-xaxis-unit {
  position: absolute; top: 10px; right: calc(100% + 10px);
  font-style: normal; font-size: 10px; letter-spacing: 0.06em; color: var(--fg-faint);
}
.pc-xaxis .pc-now { transform: translateX(-100%); color: var(--amber); }
@media (max-width: 360px) {
  /* Too narrow for the last hour and a long "now": the tick stays. */
  .pc-xaxis span:nth-of-type(3) { display: none; }
}



/* Composition: one bar the signals add up to, not five unrelated facts. */
.pc-comp { padding-top: 20px; border-top: 1px solid var(--line); }
.pc-comp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 10px;
  color: var(--fg-faint);
}
/* A sentence, not a label: it explains the bar under it, so it keeps sentence
   case and the reading face rather than being shouted in tracked-out mono. */
.pc-comp-label {
  font-family: var(--sans); font-size: 12px; line-height: 1.4;
  letter-spacing: 0; text-transform: none;
  max-width: 46ch;
}
.pc-comp-total { font-size: 13px; font-family: var(--mono); white-space: nowrap; color: var(--fg); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.pc-comp-bar { display: flex; height: 10px; background: var(--line); overflow: hidden; }
.pc-seg { display: block; height: 100%; }
.pc-seg + .pc-seg { border-left: 1px solid var(--bg); }
.pc-seg-0 { background: var(--amber); }
.pc-seg-1 { background: var(--amber); opacity: 0.76; }
.pc-seg-2 { background: var(--amber); opacity: 0.54; }
.pc-seg-3 { background: var(--amber); opacity: 0.42; }
.pc-seg-4 { background: var(--amber); opacity: 0.26; }
.pc-seg-neg { background: repeating-linear-gradient(135deg, var(--fg-faint) 0 2px, transparent 2px 5px); }

/* Contribution, source, one clear line, then the bar. Rows are separated by air
   rather than rules, so five of them read as one list and not as a grid. */
.pc-drivers { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pc-drivers li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas: 'pp src' '. note' '. bar';
  gap: 5px 16px;
  align-items: baseline;
}
.pc-driver-pp {
  grid-area: pp;
  font-size: 14px; color: var(--amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-drivers li.neg .pc-driver-pp { color: var(--fg-dim); }
.pc-driver-src {
  grid-area: src;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
}
.pc-driver-txt {
  grid-area: note;
  margin: 0;
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  color: var(--fg-dim);
}
/* All five bars share one scale, so their lengths compare to each other. */
.pc-driver-bar {
  grid-area: bar;
  height: 3px; background: var(--line); position: relative;
  margin-top: 6px;
}
.pc-driver-bar > span { position: absolute; inset: 0 auto 0 0; }

@media (max-width: 860px) {
  .pc-grid { grid-template-columns: 1fr; }
  /* Three columns will not hold at phone width, so the note drops to its own
     line under the name and the value stays on the right where the eye is. */
  /* The 74px value column is dead weight at phone width, so the value rides
     the source line and the text runs the full measure underneath. */
  .pc-drivers li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'src pp' 'note note' 'bar bar';
    gap: 5px 12px;
  }
  .pc-comp-label { max-width: none; }
  .pc-cell {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 20px 16px 22px;
  }
  .pc-cell:last-child { border-bottom: none; }
  .pc-cell-meta { text-align: left; max-width: none; }
}

/* === DUAL-USE TOPOLOGY ===
   One engine on top, two delivery circuits below. Replaces the drag-to-reveal
   split, whose divider cut both headlines in half. */
.du { font-family: var(--mono); }
/* Same construction as the offer cards: one border around the whole thing,
   hairlines between the cells, nothing filled and nothing outlined on its own.
   The core spans the full width of both panels because it is the engine they
   are both deployed from. */

.du-lanes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line);
}
.du-lane {
  padding: 28px 24px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: background 200ms;
}
.du-lane:last-child { border-right: none; }
.du-lane:hover { background: var(--bg-2); }
.du-lane-kicker {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.du-lane-h {
  margin: 0 0 14px;
  font-size: 17px; line-height: 1.22;
  letter-spacing: -0.005em; text-transform: uppercase; font-weight: 500;
  color: var(--fg);
}
.du-lane-h em { font-style: normal; font-weight: 500; }
.du-lane-p {
  margin: 0 0 20px;
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--fg-dim);
}
/* Both panels carry the same four rows in the same order, so the reader can
   compare them line by line instead of reading two unrelated feature lists. */
.du-lane-foot {
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.du-lane-foot-label {
  display: block; margin-bottom: 10px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}
/* Plain type separated by a middot, the way the industry labels read on the
   offer cards; bordered pills were the only ones on the site. */
/* Every item carries its separator in front; the list is pulled left by one
   separator and clipped there, so a line never starts with a dot. */
.du-chips {
  list-style: none; margin: 0 0 0 -20px; padding: 0; display: flex; flex-wrap: wrap;
  clip-path: inset(-4px -4px -4px 20px);
}
.du-chips li {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-dim);
}
.du-chips li::before { content: "·"; display: inline-block; width: 20px; text-align: center; color: var(--fg-faint); }

@media (max-width: 900px) {
  .du-lanes { grid-template-columns: 1fr; }
  .du-lane { border-right: none; border-bottom: 1px solid var(--line); }
  .du-lane:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  .du-lane { padding: 24px 18px 20px; }
}

/* Request access modal */
.reqa-backdrop {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(6, 7, 10, 0.65);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  animation: reqaFadeIn 220ms var(--ease);
}
[data-theme="bone"] .reqa-backdrop { background: rgba(20, 16, 8, 0.55); }
@keyframes reqaFadeIn { from { opacity: 0; } to { opacity: 1; } }
.reqa-modal {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-2);
  padding: 40px 44px 36px;
  animation: reqaSlideUp 320ms var(--ease);
}
@keyframes reqaSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reqa-corner {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--amber);
  pointer-events: none;
}
.reqa-corner.tl { top: 10px; left: 10px; border-left: 1px solid; border-top: 1px solid; }
.reqa-corner.tr { top: 10px; right: 10px; border-right: 1px solid; border-top: 1px solid; }
.reqa-corner.bl { bottom: 10px; left: 10px; border-left: 1px solid; border-bottom: 1px solid; }
.reqa-corner.br { bottom: 10px; right: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.reqa-close {
  appearance: none; background: transparent; border: none;
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  font-size: 24px; line-height: 1; color: var(--fg-faint);
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.reqa-close:hover { color: var(--amber); }
.reqa-head { display: grid; gap: 10px; margin-bottom: 24px; }
.reqa-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--amber);
}
.reqa-title {
  font-family: var(--mono); font-weight: 500;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg);
}
.reqa-lede {
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  color: var(--fg-dim); margin: 4px 0 0;
}
.reqa-form {
  display: grid; gap: 16px;
}
.reqa-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.reqa-field { display: grid; gap: 6px; }
.reqa-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-faint);
}
.reqa-field input,
.reqa-field textarea,
.reqa-field select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.reqa-field textarea {
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  resize: vertical; min-height: 96px;
}
.reqa-field input:focus,
.reqa-field textarea:focus,
.reqa-field select:focus {
  outline: none; border-color: var(--amber);
}
.reqa-select-wrap { position: relative; }
.reqa-select-wrap select {
  padding-right: 38px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  cursor: pointer;
}
.reqa-select-caret {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--amber); pointer-events: none;
  font-family: var(--mono); font-size: 11px;
}
.reqa-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.reqa-routing {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-faint);
}
.reqa-routing b { color: var(--amber); font-weight: 500; }

@media (max-width: 600px) {
  .reqa-backdrop { padding: 16px; }
  .reqa-modal { padding: 32px 24px 28px; }
  .reqa-row { grid-template-columns: 1fr; }
  .reqa-title { font-size: 22px; }
  .reqa-foot { flex-direction: column; align-items: stretch; }
  .reqa-foot .btn { width: 100%; justify-content: center; }
}

/* Footer, multi-column, company-grade */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
  color: var(--fg-dim);
}

/* ── Newsletter / CRM signup (lives inside footer brand column) ── */
.footer-brand-newsletter {
  display: grid;
  /* minmax(0, 1fr): an auto column grows to the form's min-content (the email
     field's default 20-character width plus the button), wider than a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-content: start;
  justify-items: stretch;
  text-align: left;
  max-width: 580px;
}
.footer-brand-newsletter .footer-brand-row {
  justify-content: flex-start;
  font-size: 23px;
  letter-spacing: 0.16em;
}
.footer-newsletter-pitch p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-dim);
  margin: 12px 0 0;
  max-width: 46ch;
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.footer-newsletter-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--amber);
  background: rgba(212, 167, 84, 0.04);
}
.footer-newsletter-row input[type="email"] {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  padding: 14px 15px;
  outline: none;
  letter-spacing: 0.02em;
}
.footer-newsletter-row input[type="email"]::placeholder {
  color: rgba(232, 228, 216, 0.45);
  font-family: var(--mono);
}
.footer-newsletter-row input[type="email"]:disabled { opacity: 0.55; cursor: not-allowed; }
.footer-newsletter-row button {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--amber);
  background: var(--amber);
  color: #0a0806;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, color 160ms;
}
.footer-newsletter-row button:hover:not(:disabled) {
  background: #e3b765;
}
.footer-newsletter-row button:disabled { opacity: 0.7; cursor: default; }
/* Turnstile draws nothing here unless Cloudflare asks for a click. */
.footer-newsletter-ts { max-width: 100%; overflow: hidden; }
.footer-newsletter-ts iframe { display: block; max-width: 100%; }
.footer-newsletter-fineprint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(232, 228, 216, 0.5);
  margin: 0;
  line-height: 1.5;
}
.footer-newsletter-fineprint a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms;
}
.footer-newsletter-fineprint a:hover { border-bottom-color: var(--amber); }

.footer-social-icons {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.site-footer .footer-contact-v.footer-social-icons {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.site-footer .footer-social-icons a {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  transition: color 160ms, transform 160ms;
}
.site-footer .footer-social-icons a:hover {
  color: var(--amber);
  transform: translateY(-1px);
}
.footer-social-icons svg {
  width: 100%;
  height: 100%;
  display: block;
}
[data-theme="bone"] .footer-social-icons a { color: rgba(26, 24, 18, 0.7); }
[data-theme="bone"] .footer-social-icons a:hover { color: #8A5A1E; }

.footer-newsletter-social .footer-col-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.footer-newsletter-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-newsletter-social a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-dim);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color 160ms, border-color 160ms;
  display: inline-block;
}
.footer-newsletter-social a:hover { color: var(--fg); border-bottom-color: var(--amber); }

[data-theme="bone"] .footer-newsletter-row {
  border-color: #8A5A1E;
  background: rgba(138, 90, 30, 0.04);
}
[data-theme="bone"] .footer-newsletter-row input[type="email"] { color: #1A1812; }
[data-theme="bone"] .footer-newsletter-row input[type="email"]::placeholder { color: rgba(26, 24, 18, 0.45); }
[data-theme="bone"] .footer-newsletter-row button {
  background: #8A5A1E;
  color: #EDEAE0;
  border-left-color: #8A5A1E;
}
[data-theme="bone"] .footer-newsletter-row button:hover:not(:disabled) { background: #a06a26; }
[data-theme="bone"] .footer-newsletter-fineprint { color: rgba(26, 24, 18, 0.55); }
[data-theme="bone"] .footer-newsletter-fineprint a { color: #8A5A1E; }
[data-theme="bone"] .footer-newsletter-social .footer-col-head { color: #8A5A1E; }
[data-theme="bone"] .footer-newsletter-social a { color: rgba(26, 24, 18, 0.7); }
[data-theme="bone"] .footer-newsletter-social a:hover { color: #1A1812; border-bottom-color: #8A5A1E; }

@media (max-width: 880px) {
  .footer-brand-newsletter { max-width: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 104px 28px 52px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 64px 88px;
  align-items: start;
}
.site-footer .footer-brand {
  display: grid; gap: 18px; align-content: start; justify-items: center;
  max-width: 320px;
  text-align: center;
  min-width: 0;
}
.site-footer .footer-brand-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase; color: var(--fg);
  font-weight: 500;
}
.site-footer .footer-brand-row > :first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.site-footer .footer-brand-row > :last-child {
  display: block;
  line-height: 1;
}
.site-footer .footer-tagline {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--fg-dim); letter-spacing: 0; text-transform: none;
}
.site-footer .footer-status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-faint);
  padding: 8px 12px;
  border: 1px solid var(--line);
  width: fit-content;
}
.site-footer .footer-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px rgba(184,130,46,0.65);
  animation: pulse 2.4s ease-in-out infinite;
}
.site-footer .footer-col {
  display: grid; gap: 20px; align-content: start;
  min-width: 0;
}
.site-footer .footer-col-head {
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--amber);
}
.site-footer .footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 18px;
}
.site-footer .footer-col a {
  font-size: 18px; letter-spacing: 0.03em;
  color: var(--fg-dim); text-decoration: none;
  transition: color 200ms var(--ease), transform 200ms var(--ease);
  display: inline-block;
}
.site-footer .footer-col a:hover { color: var(--amber); transform: translateX(2px); }
.site-footer .footer-contact { display: grid; gap: 9px; }
.site-footer .footer-contact-k {
  font-size: 12px; letter-spacing: 0.2em; color: var(--fg-faint);
  text-transform: uppercase;
}
.site-footer .footer-contact-v {
  font-size: 17px; color: var(--fg); letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  display: block;
  max-width: 100%;
}
.site-footer .footer-contact-v a { font-size: inherit; color: inherit; overflow-wrap: anywhere; word-break: break-word; display: inline-block; max-width: 100%; }
.site-footer-bar {
  border-top: 1px solid var(--line);
  max-width: 1400px; margin: 0 auto;
  padding: 22px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
}
.site-footer-bar .meta { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.site-footer-bar .meta .dot { color: var(--amber); }
.site-footer-bar .legal-links { display: flex; gap: 22px; }
.site-footer-bar .legal-links a,
.site-footer-bar .legal-links button {
  color: var(--fg-faint); text-decoration: none;
  transition: color 200ms var(--ease);
}
.site-footer-bar .legal-links button { appearance: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.site-footer-bar .legal-links a:hover,
.site-footer-bar .legal-links button:hover { color: var(--amber); }

@media (max-width: 1000px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px 48px;
  }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }
  .site-footer .footer-brand-newsletter .footer-newsletter-form {
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }
}
@media (max-width: 640px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr never shrinks below its widest item
     (the social icons, the careers address), so on a narrow phone the grid
     grew past the screen and the newsletter form was cut off. */
  .site-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 60px 20px 28px;
    gap: 40px 28px;
  }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  /* Stretch the newsletter block to the padded container so the pitch text
     and signup form can never exceed the viewport (body uses overflow-x: clip). */
  .site-footer .footer-brand-newsletter {
    justify-items: stretch;
    text-align: center;
    max-width: 100%;
  }
  .footer-brand-newsletter .footer-brand-row { justify-content: center; }
  .footer-newsletter-pitch p { max-width: 100%; }
  .site-footer-bar {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 400px) {
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer-bar .legal-links { flex-wrap: wrap; gap: 12px 22px; }
}

/* Tweaks panel */
.tweaks {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px;
  display: none;
}
.tweaks.on { display: block; }
.tweaks .head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--amber); letter-spacing: 0.2em; text-transform: uppercase; font-size: 9px; }
.tweaks .row { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.tweaks .row:last-child { border-bottom: none; }
.tweaks label { color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase; font-size: 9px; }
.tweaks .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks .opt {
  flex: 1; min-width: 0; padding: 6px 8px; text-align: center;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-dim);
  cursor: pointer; transition: all 150ms; font-size: 10px;
}
.tweaks .opt.active { background: var(--amber); color: #000; border-color: var(--amber); }
.tweaks .opt:hover:not(.active) { color: var(--fg); border-color: var(--line-2); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Motion accessibility: honour the OS "reduce motion" setting globally.
   Freeze the infinite marquees (partner ticker, partner voices) at their
   start frame and let scroll reveals appear instantly instead of sliding. */
@media (prefers-reduced-motion: reduce) {
  .ticker .track,
  .voices-track { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* === SHARED FAQ SECTION (used across capabilities, careers, home) === */
.cap-faq {
  padding: 120px 28px;
  border-top: 1px solid var(--line);
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 64px;
}
.cap-faq-head { position: static; align-self: start; padding-right: 18px; }
.cap-faq h2 {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 0.98; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--fg);
  margin-bottom: 28px;
  overflow-wrap: anywhere; word-break: normal; hyphens: none;
}
html[lang] .cap-faq h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  letter-spacing: -0.03em;
}
.cap-faq h2 .thin { color: var(--fg-dim); font-weight: 300; }
.cap-faq .sec-desc {
  font-size: 15px; line-height: 1.6; color: var(--fg-dim);
  max-width: 320px;
}
.cap-faq-list { border-top: 1px solid var(--line); padding-left: 18px; }
.cap-faq-item { border-bottom: 1px solid var(--line); }
.cap-faq-q {
  appearance: none; background: transparent; border: 0;
  width: 100%; padding: 26px 0;
  display: grid; grid-template-columns: 44px 1fr 28px;
  align-items: start; gap: 18px;
  cursor: pointer; text-align: left; color: inherit;
  transition: color 200ms;
}
.cap-faq-q:hover { color: var(--amber); }
.cap-faq-q-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--amber);
  text-transform: uppercase; padding-top: 4px;
}
.cap-faq-q-text {
  font-family: var(--mono); font-size: 18px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.35;
  text-transform: uppercase; color: var(--fg);
  transition: color 200ms;
}
.cap-faq-q:hover .cap-faq-q-text { color: var(--amber); }
.cap-faq-q-chevron {
  font-family: var(--mono); font-weight: 400;
  font-size: 26px; line-height: 0.9; color: var(--amber);
  text-align: right;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cap-faq-item.open .cap-faq-q-chevron { transform: rotate(45deg); }
.cap-faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cap-faq-item.open .cap-faq-a-wrap { grid-template-rows: 1fr; }
.cap-faq-a {
  overflow: hidden;
  font-size: 15px; line-height: 1.65;
  color: var(--fg-dim);
  padding: 0 62px 4px;
}
.cap-faq-item.open .cap-faq-a { padding-bottom: 28px; }
@media (max-width: 900px) {
  .cap-faq { grid-template-columns: 1fr; gap: 48px; padding: 80px 22px; }
  .cap-faq-head { position: static; padding-right: 0; }
  .cap-faq-list { padding-left: 0; }
  .cap-faq-q { grid-template-columns: 36px 1fr 24px; gap: 14px; padding: 20px 0; }
  .cap-faq-q-text { font-size: 15px; }
  .cap-faq-a { padding: 0 50px 4px; font-size: 14px; }
  .cap-faq-item.open .cap-faq-a { padding-bottom: 22px; }
}

@media (max-width: 1180px) {
  .cap-faq { grid-template-columns: 1fr; gap: 44px; }
  .cap-faq-head { position: static; padding-right: 0; }
  .cap-faq-list { padding-left: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .cap { grid-column: span 6; }
  .cap:nth-child(3n) { border-right: 1px solid var(--line); }
  .cap:nth-child(2n) { border-right: none; }
  .dual, .sources, .forecast-block { grid-template-columns: 1fr; }
  .dual-panel:first-child, .source-col:first-child, .forecast-chart { border-right: none; border-bottom: 1px solid var(--line); }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  nav.top .links { display: none; }
  .hero-footstrip { grid-template-columns: repeat(2, 1fr); font-size: 9px; }
}

/* ---- Phone layout ---- */
@media (max-width: 640px) {
  /* Nav: collapse to brand + lang switcher only */
  nav.top {
    grid-template-columns: 1fr auto;
    min-height: 64px;
    padding: 11px 14px;
    font-size: 10px;
  }
  nav.top .brand { gap: 7px; }
  nav.top .brand .brand-link { gap: 8px; }
  nav.top .brand .brand-mark { transform: scale(1.42); }
  nav.top .brand .word { margin-left: 9px; font-size: 12px; letter-spacing: 0.12em; }
  nav.top .right { gap: 10px; }
  nav.top .right .clearance { display: none; }
  .lang-btn { padding: 5px 8px; font-size: 10px; }

  /* Hero: content-sized (no dead video below the CTAs). Title top,
     breathing gap, CTAs, then pip strip, no empty space after. */
  .hero {
    height: calc(100vh - 64px - var(--ticker-height));
    height: calc(100svh - 64px - var(--ticker-height));
    min-height: 480px;
    max-height: none;
    margin-top: 64px;
    padding: 14px 0 18px;  /* override section{} 72px bottom */
    grid-template-rows: 1fr auto;
  }
  /* The reticle's lower arm is anchored to the hero box, and a content-sized
     hero ends just under the full-width CTAs — so it lands on the second
     button instead of open video. Only the upper arm still has room. */
  .hero::after { content: none; }
  h1.hero-h1 {
    font-size: var(--type-hero);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }
  [data-theme="bone"] h1.hero-h1 .thin { color: #2a2620; }
  .hero-inner {
    padding: 58px 18px 20px;
    align-content: start;
    height: auto;
  }
  .hero-title {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: none;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 18px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  /* Hero pip nav: in flow under the CTAs (no dead video gap), with the
     amber category in the top-left and the human label at the bottom. */
  .hero-case-nav {
    position: relative;
    left: auto; right: auto; bottom: auto;
    margin: 14px 18px 0;
    padding: 0;
    gap: 6px;
  }
  .hero-case-pip {
    padding-top: 4px;
    gap: 6px;
  }
  .hero-case-pip-track { height: 3px; }
  .hero-case-pip-code {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .hero-case-pip-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* Sections: less horizontal padding, tighter vertical rhythm */
  section { padding: 72px 18px; }
  .sec-desc { font-size: 14px; line-height: 1.55; }

  /* CTA final: stacked */
  .cta-final { padding: 80px 18px 80px; }
  .cta-final h2 { font-size: clamp(32px, 9vw, 56px); }
  .cta-final p { font-size: 14px; }
}

@media (max-height: 900px) and (min-width: 641px) {
  nav.top {
    min-height: 68px;
    padding: 10px 24px;
  }

  .hero {
    margin-top: 68px;
    height: calc(100vh - 68px - var(--ticker-height));
    height: calc(100svh - 68px - var(--ticker-height));
    min-height: 0;
    max-height: none;
    padding-top: 0;
  }

  .hero video {
    object-position: center 50%;
  }

  .hero-inner {
    align-content: end;
    padding: 0 28px 96px;
  }

  .hero-title {
    gap: 18px;
  }

  h1.hero-h1 {
    font-size: clamp(34px, 4.6vw, 72px);
    line-height: 0.98;
  }

  .hero-tagline {
    font-size: clamp(18px, 2.1vw, 30px);
    max-width: 720px;
  }

  .hero-ctas {
    gap: 10px;
  }

  .hero-ctas .btn {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .hero-case-nav {
    bottom: 12px;
    gap: 10px;
  }

  .hero-case-pip {
    gap: 4px;
    padding-top: 6px;
  }

  .hero-case-pip-label {
    font-size: 9px;
  }

  .ticker.logo-ticker .track {
    padding: 16px 0;
    gap: 20px;
  }

  .ticker.logo-ticker .logo-chip {
    padding: 0 20px;
  }

  .ticker.logo-ticker img {
    max-height: 42px;
  }
}

/* Very narrow (small phones) */
@media (max-width: 380px) {
  h1.hero-h1 { font-size: 30px; }
  .sec-title { font-size: 30px; }
  nav.top { padding: 10px 12px; }
  nav.top .brand .word { font-size: 11px; }
}