/**
 * Section-specific layout — ported directly from Javier's redesign
 * proposal (CSG_Website_2026_10.html), same class names/values, colors
 * pointed at tokens.css. Breakpoints validated per csg-qa-gates gate 2:
 * 360px, 768px, 1024px+.
 */

/* ══════════════════════════════════════════════════════════
   NAV
   Always dark, like .mkt-ticker/.rs — fixed values below, not
   var(--*), so the navbar never themes with the page.
══════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  /* Fixed dark in both themes, by explicit direction — same category as
     .mkt-ticker/.rs below (never themed), not var(--nav-glass-solid)
     which would flip to light. footer matches this exact value too. */
  background: rgba(13, 27, 42, 0.98);
  border-bottom: 1px solid rgba(101, 194, 196, 0.12);
}

.nav-in {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-14);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  flex-wrap: nowrap;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: #8a9bb0;
  transition: color 0.15s;
  letter-spacing: 0.01em;
  padding: 4px 0;
}

.nav-links a:hover {
  color: #ffffff;
}

.nav-r {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-ghost {
  font-size: 13px;
  font-weight: 500;
  color: #8a9bb0;
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  transition: color 0.15s;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

.nav-ghost:hover {
  color: #ffffff;
}

.nav-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--t3);
  padding: 9px 22px;
  border-radius: var(--radius-xs);
  border: none;
  min-height: 38px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, box-shadow 0.18s;
}

.nav-cta:hover {
  background: var(--t3-hover);
  box-shadow: 0 0 18px rgba(101, 194, 196, 0.32);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
  transition: transform 0.2s var(--ez), opacity 0.2s var(--ez);
}

.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Duplicate theme/language toggles shown only inside the mobile dropdown
   (see @media 768px) — kept in sync with the nav-r originals since
   theme.ts/locale.ts bind by [data-theme-option]/[data-locale-option]
   and update every matching button, not just the first. */
.nav-links-controls {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   HERO — cinematic ocean
   Layer stack (bottom to top): .h-atm (one continuous gradient) ->
   content. Two separate partial-height overlay layers used to sit here
   — .h-ocean (a repeating-stripe "water texture" band) and .h-haze (an
   "atmospheric glow" band) — both removed 2026-08-07. Flagged directly
   as a stray horizontal color trace partway down the hero: any
   partial-height gradient layer composited over .h-atm's own gradient
   creates a visible Mach-band seam at its top edge (a perceptual
   artifact from the sudden change in gradient slope, not an actual hard
   color jump — softening the edge to fully transparent didn't remove
   it). .h-atm's own radial + linear gradients already carry the
   bottom-darkening/glow mood on their own, in one seamless layer.
══════════════════════════════════════════════════════════ */
.hero {
  /* min-height was 100vh minus 41px, reserved for the market ticker that
     used to sit directly below (2026-08-20: ticker removed — see
     memory/STATE.md). Content stayed flex-start/top-pinned against a
     fixed nav-clearance padding, so reclaiming that 41px just grew the
     dead space at the bottom instead of helping — recentering the
     content in the full viewport instead. */
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(68px + var(--space-8));
  background: var(--bg2);
}

.h-atm {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 55% at 50% 108%, rgba(0, 121, 151, 0.24) 0%, transparent 58%),
    radial-gradient(ellipse 55% 28% at 12% 88%, rgba(5, 123, 150, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 42% 22% at 88% 82%, rgba(101, 194, 196, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, #0b1826 0%, #09141f 45%, #060f18 80%, var(--cd) 100%);
}

/* Container-ship photo — dissolves in from fully transparent on the left
   (behind the copy) to fully opaque on the right, via a mask gradient
   rather than a flat opacity, so the right edge reads at true 100%. */
.h-ship {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url('../img/hero-ship.webp');
  background-size: cover;
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 58%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 58%, #000 78%);
}

/* Mobile hero photo — same source image, shown instead as a full-width
   band above the copy (not the desktop left-to-right dissolve, which has
   no "text-only" zone to stay out of once the text column runs full
   width). Hidden on desktop; the 768px breakpoint below turns it on and
   turns .h-ship off. Positioned (not absolute) so it takes up real flow
   height and pushes .h-body down. */
.h-ship-m {
  display: none;
}

/* Light-mode hero — per explicit instruction this overrides the previous
   "hero always stays dark" rule (see brand/BRAND-RULES.md §5, updated to
   match). Same 4-layer structure, recolored light instead of dark navy;
   horizon line keeps the same brand-signature shape, just
   recontrasted to read against a light surface. The ship photo and
   market ticker need no override here — the photo blends via its own
   mask, and the ticker already reads `var(--cd)`, which tokens.css
   already flips to white in light mode. */
[data-theme='light'] .h-atm {
  background: radial-gradient(ellipse 100% 55% at 50% 108%, rgba(0, 121, 151, 0.1) 0%, transparent 58%),
    radial-gradient(ellipse 55% 28% at 12% 88%, rgba(5, 123, 150, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 42% 22% at 88% 82%, rgba(101, 194, 196, 0.05) 0%, transparent 45%),
    linear-gradient(180deg, #f4f7f9 0%, #eaf1f3 45%, #dfeaee 80%, #d7e6ea 100%);
}

.h-body {
  position: relative;
  z-index: 10;
  padding: 0 var(--space-14) var(--space-10);
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.h-usp {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.h-usp::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--t3);
  flex-shrink: 0;
}

.h-retail {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(101, 194, 196, 0.55);
  margin-bottom: 20px;
  display: block;
}

/* --t3 (used by .h-usp's text, and .h-retail's translucent rgba of the
   same hue) is decorative/fill only in light mode per brand/TOKENS.md —
   both were unreadable against the light hero background. --t1 is the
   text-safe equivalent. .h-usp::before (the small line accent) is
   intentionally left on --t3 — it's a decorative fill, not text. Found
   via full-page contrast audit, 2026-08-07. */
[data-theme='light'] .h-usp {
  color: var(--t1);
}

[data-theme='light'] .h-retail {
  color: rgba(0, 121, 151, 0.7);
}

.h-stats {
  display: flex;
  flex-wrap: wrap;
  padding: calc(var(--space-10) - 12px) 20px;
  margin: 0 -20px;
  /* The ship photo's bright dockside lights/reflection sit directly
     behind this row at some viewport widths, in both themes (the
     underlying photo doesn't change with theme, only the atmosphere
     gradient beside it does). A fixed dark glass backdrop, independent
     of theme like .mkt-ticker/.rs below, guarantees the same reliable
     contrast every stat number already has elsewhere on the page.
     Opaque enough that the photo can't bleed through and wash out the
     text — a half-transparent version let warm photo tones muddy the
     label text right where it sits. RGB matches --bg's dark value. */
  background: rgba(13, 27, 42, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  /* Fade out ONLY in the empty margin after the last stat, not through
     any text — fading while still under "1881"/"Retail trading
     heritage" (the rightmost, widest stat) created exactly the muddy
     half-opaque overlap this backdrop exists to avoid. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}

.hs {
  flex: 0 0 auto;
  padding-right: 36px;
  margin-right: 36px;
  border-right: 1px solid var(--bd);
}

.hs:last-child {
  border-right: none;
  margin-right: 0;
}

.hs-n {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--t3);
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
  margin-bottom: 5px;
}

.hs-l {
  font-size: 12px;
  font-weight: 400;
  /* NOT var(--mu) — that flips to a dark slate in light mode, meant for
     light surfaces. This label sits on .h-stats' fixed dark backdrop in
     BOTH themes, so its color has to stay fixed too, same reasoning as
     .h-stats' own background. Matches --mu's dark-mode RGB. */
  color: rgba(138, 155, 176, 0.95);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   MARKET TICKER (TradingView embed) — always dark, regardless of the
   site's light/dark toggle, per Javier's explicit instruction
   (2026-07-07): this ticker never changes color. Fixed dark-mode token
   values below, not var(--*) — the embedded widget itself is also
   hardcoded to TradingView's dark colorTheme in the iframe config below,
   so a themed wrapper would mismatch it in light mode.
══════════════════════════════════════════════════════════ */
.mkt-ticker {
  background: #0e1e30;
  border-bottom: 1px solid rgba(101, 194, 196, 0.12);
}

/* ══════════════════════════════════════════════════════════
   ROUTE STRIP
   Always dark, like .mkt-ticker — fixed values below, not
   var(--*), so this strip never themes with the page.
══════════════════════════════════════════════════════════ */
.rs {
  background: #0e1e30;
  border-top: 1px solid rgba(101, 194, 196, 0.12);
  border-bottom: 1px solid rgba(101, 194, 196, 0.12);
  padding: 0;
  overflow: hidden;
}

.rs-track {
  display: flex;
  width: max-content;
  animation: rs-scroll 50s linear infinite;
}

.rs-track:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .rs-track {
    animation-play-state: paused;
  }
}

@keyframes rs-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.rs-in {
  padding: 0 var(--space-14);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

.rp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  flex-shrink: 0;
}

.rp-n {
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.rp-c {
  font-size: 12px;
  font-weight: 400;
  color: #8a9bb0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.ra {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.rl {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--t1), var(--t3));
}

.rd {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--t3);
  flex-shrink: 0;
}

.rm {
  display: flex;
  align-items: center;
  padding: 0 22px;
  flex-shrink: 0;
  border-left: 1px solid rgba(101, 194, 196, 0.12);
  border-right: 1px solid rgba(101, 194, 196, 0.12);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t3);
}

/* ══════════════════════════════════════════════════════════
   WHO WE ARE
══════════════════════════════════════════════════════════ */
.who-sec {
  /* Strict --cd / --bg2 alternation across every content section below
     (who/proof/rc = --cd, bco/svc = --bg2) — see brand/TOKENS.md
     Usage rule 8. Previous attempts reordered all 4 near-white tokens
     without widening any of them, which stayed numerically different
     but visually indistinguishable; --bg2 was widened specifically to
     fix that (see TOKENS.md 2026-08-06 note). */
  background: var(--cd);
  border-top: 1px solid var(--bd);
}

/* Light mode specifically: the 1px/15%-opacity --bd seam above still
   read as "no real difference" against these near-white fills — dark
   mode's version already works (much higher contrast against navy), so
   only light mode gets this stronger reinforcement. Still teal (--t1's
   RGB base), just bolder and paired with a soft inset highlight so the
   boundary is unmistakable even where two sections land on tokens close
   in value. */
[data-theme='light'] .who-sec,
[data-theme='light'] .bco-sec,
[data-theme='light'] .proof-sec,
[data-theme='light'] .svc-sec,
[data-theme='light'] .rc-sec,
[data-theme='light'] footer {
  border-top: 2px solid rgba(0, 121, 151, 0.3);
  box-shadow: inset 0 1px 0 rgba(0, 121, 151, 0.12);
}

/* Two intro paragraphs read as repetitive on a narrow column — mobile
   gets one tighter line instead (who.bodyMobile), same facts. Swapped
   at the 768px breakpoint below, not here, so desktop is untouched. */
.who-intro-mobile {
  display: none;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.two.center {
  align-items: center;
}

/* Horizontal heritage timeline — same connecting-line/numbered-node
   language as .steps further down the page, adapted for year labels
   instead of step numbers. Full-width, sits below the two-column intro. */
.htl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
  margin-top: 56px;
}

.htl::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t1), var(--t3), var(--t1), transparent);
}

.htl-item {
  text-align: center;
  padding: 0 8px;
}

.htl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--t3);
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.htl-yr {
  font-size: 22px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

[data-theme='light'] .htl-yr {
  color: var(--t1);
}

.htl-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 6px;
}

.htl-x {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   HOW WE BUY (BCO)
══════════════════════════════════════════════════════════ */
.bco-sec {
  background: var(--bg2);
  border-top: 1px solid var(--bd);
}

.bco-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bco-p {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--bd);
}

.bco-p:last-child {
  border-bottom: none;
}

/* Flush the first pillar's icon to the same top edge as the checklist
   box's header (.ck-h has 11px top padding) — the column now uses
   align-items:start (.two, no longer .two.center) so this is the last
   piece needed for the two columns to start at the same height. */
.bco-pillars .bco-p:first-child {
  padding-top: 11px;
}

.bco-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(101, 194, 196, 0.07);
  border: 1px solid rgba(101, 194, 196, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bco-t {
  font-size: 15px;
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 6px;
}

.bco-x {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.7;
}

.ck {
  border: 1px solid var(--bd);
  border-radius: 9px;
  overflow: hidden;
}

.ck-h {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 11px 20px;
  background: rgba(101, 194, 196, 0.06);
  border-bottom: 1px solid var(--bd);
}

.ck-hc {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}

[data-theme='light'] .ck-hc {
  color: var(--t1);
}

.ck-r {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(101, 194, 196, 0.05);
  align-items: center;
  transition: background 0.15s;
}

.ck-r:last-child {
  border-bottom: none;
}

.ck-r:hover {
  background: rgba(101, 194, 196, 0.04);
}

.ck-f {
  font-size: 14px;
  color: var(--wh);
}

.ck-k {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(101, 194, 196, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mkt {
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 18px 20px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.mkt-n {
  font-size: 32px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: -0.04em;
  line-height: 1;
}

.mkt-x {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.65;
}

.ldr {
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 18px 20px;
  margin-top: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ldr-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--t2), var(--t3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--on-accent);
  overflow: hidden;
}

.ldr-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ldr-n {
  font-size: 14px;
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ldr-title {
  font-weight: 500;
  color: var(--t3);
}

.ldr-li {
  display: inline-flex;
  align-items: center;
  transform: translateY(-1px);
}

.ldr-r {
  font-size: 12px;
  color: var(--mu);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════
   PROOF
══════════════════════════════════════════════════════════ */
.proof-sec {
  background: var(--cd);
  border-top: 1px solid var(--bd);
}

.big-n {
  font-size: clamp(100px, 14vw, 164px);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.86;
  color: var(--t3);
  display: block;
}

[data-theme='light'] .big-n {
  color: var(--t1);
}

.big-l {
  font-size: 17px;
  font-weight: 300;
  color: var(--mu);
  margin-top: 12px;
  line-height: 1.6;
}

.p3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bd);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--bd);
}

.pm {
  background: var(--cd);
  padding: 28px 22px;
  transition: background 0.18s;
}

.pm:hover {
  background: var(--cd2);
}

.pm-n {
  font-size: 44px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 7px;
}

[data-theme='light'] .pm-n {
  color: var(--t1);
}

.pm-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 4px;
}

.pm-s {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-top: 24px;
}

.steps::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t1), var(--t3), var(--t1), transparent);
}

.stp {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}

.stp-n {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cd);
  border: 1.5px solid var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--t3);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  transition: background 0.18s, color 0.18s;
}

.stp:hover .stp-n {
  background: var(--t2);
  /* White specifically, not --on-accent's dark navy, per direct
     instruction — applies in both themes. */
  color: #ffffff;
}

/* .stp-n's default (non-hover) state was --t3 text on --cd (white in
   light mode) — the same 2.1:1 failure as every other --t3-as-text spot
   fixed in the 2026-08-07 contrast audit, missed in that pass since it
   wasn't caught until reported directly. Light mode only — dark mode's
   default --t3-on-dark-navy already passes at 7.4:1. */
[data-theme='light'] .stp-n {
  color: var(--t1);
}

.stp-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--wh);
  margin-bottom: 7px;
}

.stp-x {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
.svc-sec {
  /* Was --cd, matching the intended who=cd/bco=bg2/proof=cd/rc=bg2/svc=cd
     alternation documented on .rc-sec below — that only worked with
     .rc-sec (bg2) sitting between .proof-sec (cd) and this section.
     With Rate Checker hidden (2026-08-20), proof and svc became directly
     adjacent and both cd — a real repeat, not just a numeric one, same
     class of bug the .rc-sec comment already describes once. Switched
     to bg2 so the alternation holds without rc in the sequence. */
  background: var(--bg2);
  border-top: 1px solid var(--bd);
}

.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sc {
  /* Padding/gap tightened 2026-08-20 (was 26px/12px) — cards read as
     "too bulky, too much air" per Javier, and were a real contributor
     to Services exceeding the one-screen target (see .SEC in base.css). */
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s var(--ez), transform 0.2s var(--ez), box-shadow 0.2s var(--ez);
}

.sc:hover {
  border-color: rgba(101, 194, 196, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
}

.sc-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(101, 194, 196, 0.07);
  border: 1px solid rgba(101, 194, 196, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--wh);
}

.sc-x {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.7;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════
   RATE CHECKER SECTION WRAPPER (new section — see Phase 3;
   this is just the section-level padding/background, the embedded
   React/MUI component owns everything inside #csg-rate-checker-root)
══════════════════════════════════════════════════════════ */
.rc-sec {
  /* Real DOM order is who -> bco -> proof -> rc -> svc (verified
     directly in index.html — don't assume from visual position in a
     design mock). proof and rc are adjacent, both were --cd at one
     point — real repeat, not just a numeric one. Strict --cd/--bg2
     alternation: who=cd, bco=bg2, proof=cd, rc=bg2, svc=cd. */
  background: var(--bg2);
  border-top: 1px solid var(--bd);
}

#csg-rate-checker-root {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════ */
.cta-sec {
  background: linear-gradient(145deg, var(--t2) 0%, var(--t1) 55%, #005474 100%);
  position: relative;
  overflow: hidden;
}

.cta-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

.cta-in {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-28) var(--space-14);
  max-width: 720px;
  margin: 0 auto;
}

.cta-eyebrow {
  /* Was rgba(255,255,255,.4) — already flagged as low-contrast for the
     light-mode override below (2026-08-07 audit, 1.08:1), but the base
     value it's overriding was never raised. .cta-sec's background never
     changes with theme, so this is the value that actually renders by
     default — raised for real readability per Javier, 2026-08-20. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}

.cta-q {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  /* Fixed white, not var(--wh) — this section's teal/dark gradient
     background (.cta-sec) never changes with the site theme, so its
     text shouldn't either; var(--wh) flipping to dark navy in light
     mode made this unreadable against the still-dark background. */
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.cta-s {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 44px;
  line-height: 1.72;
}

.cta-det {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 8px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  flex-wrap: wrap;
}

/* Above tablet width, break the contact row out of .cta-in's side
   padding so Email/Phone/Address fit on one line — at the default
   720px measure the three items + gaps (~680px) barely exceed the
   608px content width left after that padding, wrapping Address to
   its own line. */
@media (min-width: 769px) {
  /* .nav-in was flex + justify-content:space-between across 3 unequal
     children (logo, links, controls) — that gives equal GAPS either
     side of the menu, not a menu that's actually centered in the header.
     Measured: menu block sat 34px right of the header's true center
     (logo 140px wide vs controls 72px wide, so equal gaps ≠ equal
     margins from center). Grid's 1fr/auto/1fr fixes this by centering
     the middle column independent of the outer two widths. Scoped to
     769px+ only — below that, .nav-links becomes position:absolute (the
     mobile dropdown, see 768px block above) and is out of grid/flex flow
     either way, so this doesn't touch mobile behavior. */
  .nav-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-logo {
    justify-self: start;
  }
  .nav-links {
    justify-self: center;
  }
  .nav-r {
    justify-self: end;
  }
  .cta-det {
    flex-wrap: nowrap;
    width: calc(100% + (2 * var(--space-14)));
    margin-left: calc(-1 * var(--space-14));
    margin-right: calc(-1 * var(--space-14));
  }
}

.cd2 {
  text-align: center;
}

.cd2-l {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}

.cd2-v {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  display: inline-block;
}

.cd2-link {
  transition: color 0.15s;
}

.cd2-link:hover {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
}

.cd2-d {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
}

/* Marc's leader card, reused here from the "Who We Are" section — this
   section's gradient background is permanently fixed (never themed, see
   .cta-sec above), so the card's normally theme-variable colors are
   overridden to fixed white/rgba-white values. Using var(--wh)/var(--mu)
   as-is here would break in light mode, same bug class already fixed
   once on .nav-cta/.cta-q (see STATE.md) — don't reintroduce it. */
/* Top margin is negative to counteract collapsing with .cta-s's own
   44px margin-bottom (44 + -12 = 32px effective gap) — keeps the space
   above/below this card equal (32px) without touching the shared
   .cta-s class used elsewhere. */
.cta-ldr-wrap {
  margin: -12px auto 32px;
}

.cta-ldr-wrap .ldr {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 0;
  text-align: left;
}

.cta-ldr-wrap .ldr-n,
.cta-ldr-wrap .ldr-title {
  color: #ffffff;
}

.cta-ldr-wrap .ldr-r {
  color: rgba(255, 255, 255, 0.72);
}

/* Light mode override for the whole CTA band, per explicit direction:
   this section (and its fixed-white text, designed for the fixed dark
   gradient above) was previously a deliberate exception that never
   themed — reversed here, no exceptions. Every hardcoded white/rgba-
   white value above needs its own light-mode counterpart, since none of
   them were ever theme-aware to begin with. */
[data-theme='light'] .cta-sec {
  background: linear-gradient(145deg, var(--bg2) 0%, var(--bg) 100%);
}

[data-theme='light'] .cta-sec::before {
  background-image: linear-gradient(rgba(13, 27, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 42, 0.04) 1px, transparent 1px);
}

[data-theme='light'] .cta-eyebrow {
  /* Missed when the rest of the CTA band's fixed-white children got
     their light-mode overrides (2026-08-06) — this one was inline
     styling rather than a class, so it stayed rgba(255,255,255,.4)
     against the now-light background (1.08:1 — nearly invisible).
     Found via full-page contrast audit, 2026-08-07. */
  color: var(--mu);
}

[data-theme='light'] .cta-q {
  color: var(--wh);
}

[data-theme='light'] .cta-s {
  color: var(--mu);
}

[data-theme='light'] .cta-det {
  border-top: 1px solid var(--bd);
}

[data-theme='light'] .cd2-l {
  color: rgba(13, 27, 42, 0.55);
}

[data-theme='light'] .cd2-v {
  color: var(--wh);
}

[data-theme='light'] .cd2-link:hover {
  color: rgba(13, 27, 42, 0.72);
}

[data-theme='light'] .cd2-d {
  background: rgba(13, 27, 42, 0.15);
}

[data-theme='light'] .cta-ldr-wrap .ldr {
  background: rgba(13, 27, 42, 0.04);
  border: 1px solid rgba(13, 27, 42, 0.12);
}

[data-theme='light'] .cta-ldr-wrap .ldr-n,
[data-theme='light'] .cta-ldr-wrap .ldr-title {
  color: var(--wh);
}

[data-theme='light'] .cta-ldr-wrap .ldr-r {
  color: var(--mu);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer {
  /* Exact match to .nav's background, fixed dark in BOTH themes — by
     explicit direction, no light-mode variant for either element. */
  background: rgba(13, 27, 42, 0.98);
  border-top: 1px solid var(--bd);
  padding: 52px 0 0;
}

.ft {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-14);
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}

.ft-brand p {
  font-size: 13px;
  /* Fixed, not var(--mu) — footer's own background is fixed dark in
     both themes now (see footer {} above), so its text can't flip
     either or it goes unreadable in light mode. Dark-mode --mu hex. */
  color: #8a9bb0;
  line-height: 1.75;
  margin-top: 12px;
  max-width: 220px;
}

.ft-logo img {
  /* Matches .nav-logo img exactly — the footer logo reads as the same mark
     as the nav logo, at the same size, on every page. */
  height: 32px;
  width: auto;
}

.ft-t {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ft-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ft-col li {
  font-size: 13px;
  color: #8a9bb0;
}

.ft-col a {
  font-size: 13px;
  color: #8a9bb0;
  transition: color 0.15s;
}

/* Legal column only: it mixes real links (Imprint, Terms/AGB) with
   plain non-functional text (Privacy — no page yet) side by side, so
   only there does a link need to visually stand out from non-link
   text. Every other footer column is 100% real links already, where
   underlining everything would just look noisy. */
.ft-col:last-child a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.ft-col a:hover {
  color: var(--t3);
}

.ft-b {
  max-width: var(--content-width);
  margin: 36px auto 0;
  padding: 18px var(--space-14);
  border-top: 1px solid var(--bd);
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: #8a9bb0;
}

.ft-b a {
  color: #8a9bb0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.ft-b a:hover {
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — validated per csg-qa-gates gate 2
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .W,
  .WN {
    padding: 0 var(--space-8);
  }
  .nav-in,
  .h-body,
  .ft,
  .cta-in {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .two {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .g3 {
    grid-template-columns: 1fr 1fr;
  }
  .p3 {
    grid-template-columns: 1fr 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .steps::before {
    display: none;
  }
  .htl {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-8);
  }
  .htl::before {
    display: none;
  }
  .ft {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .nl-visual {
    order: -1;
    min-height: 220px;
  }
}

@media (max-width: 768px) {
  .W,
  .WN {
    padding: 0 var(--space-6);
  }
  .nav-in,
  .h-body,
  .cta-in,
  .ft {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  /* TradingView's ticker-tape widget stacks symbol name and price on
     narrow screens instead of showing them side by side — the fixed
     40px height (set via inline style on the iframe, matching desktop)
     clips the price row on phones. Override with !important since the
     inline style otherwise wins. Desktop's 40px is untouched. */
  .mkt-ticker iframe {
    height: 58px !important;
  }
  /* Below 768px, the hero text column runs the full viewport width — the
     ship photo's left-to-right mask has no "text-only" zone to stay out
     of. Swap it for .h-ship-m, a full-width band above the copy. */
  .h-ship {
    display: none;
  }
  .h-ship-m {
    display: block;
    position: relative;
    z-index: 6;
    height: 200px;
    background-image: url('../img/hero-ship.webp');
    background-size: cover;
    background-position: 75% 32%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  }
  .who-intro-full {
    display: none;
  }
  .who-intro-mobile {
    display: block;
  }
  .nav-burger {
    display: inline-flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(13, 27, 42, 0.98);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-bottom: 1px solid rgba(101, 194, 196, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s var(--ez), opacity 0.2s var(--ez);
  }
  .nav-open .nav-links {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-6);
  }
  .nav-links a:hover {
    background: rgba(101, 194, 196, 0.08);
  }
  .nav-r > .csg-toggle-group {
    display: none;
  }
  .nav-links-controls {
    display: flex;
    gap: 20px;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(101, 194, 196, 0.12);
    margin-top: var(--space-2);
  }
  .SEC {
    padding: var(--space-20) 0;
  }
  .hs:nth-child(n + 4) {
    display: none;
  }
  /* The 3 remaining stats were wrapping to a 2-then-1 layout on phones —
     the flex row's fixed 36px gaps + full-size numbers didn't fit a
     360-390px viewport. Switch to a 3-column grid with tighter spacing
     and smaller type so all 3 stay on one line, matching desktop's
     single-row intent. Desktop (.h-stats base rule above) is untouched. */
  .h-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .hs {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    min-width: 0;
  }
  .hs-n {
    font-size: 22px;
  }
  .hs-l {
    font-size: 10.5px;
    line-height: 1.35;
  }
  .g3,
  .p3 {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .ft {
    grid-template-columns: 1fr;
  }
  .ft-b {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .rs-in {
    padding: 0 var(--space-6);
  }
}

@media (max-width: 480px) {
  .nav-in {
    flex-wrap: wrap;
    height: auto;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    row-gap: var(--space-2);
  }
  .nav-r {
    width: 100%;
    justify-content: space-between;
  }
  /* The nav wraps to two rows at this width, so its real rendered height
     is taller than the 68px the hero's padding-top assumes — without
     this override the hero's first line renders underneath the fixed
     nav. Value below is measured live (nav ~109px) plus breathing room. */
  .hero {
    padding-top: calc(120px + var(--space-6));
  }
  .h-ship-m {
    height: 160px;
  }
  .nav-cta {
    font-size: 12px;
    padding: 7px 14px;
    min-height: 32px;
  }
}

/* ══════════════════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════════════════ */
.btt {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--t3);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s var(--ez2), transform 0.25s var(--ez2), background 0.18s, box-shadow 0.18s;
}

.btt.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.btt:hover {
  background: var(--t3-hover);
  box-shadow: 0 0 18px rgba(101, 194, 196, 0.32);
}

@media (max-width: 480px) {
  .btt {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ══════════════════════════════════════════════════════════
   LEGAL PAGES (AGB / GTC)
══════════════════════════════════════════════════════════ */
.legal-sec {
  padding-top: calc(68px + var(--space-14));
  padding-bottom: var(--space-20);
  background: var(--bg);
}

.legal-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--t3);
  margin-bottom: var(--space-6);
}

.nl-subtitle {
  font-size: 17px;
  font-weight: 500;
  color: var(--t3);
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

.nl-preview {
  font-size: 15px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.5;
  margin-bottom: var(--space-6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legal-meta {
  font-size: 13px;
  color: var(--mu);
  margin-bottom: var(--space-8);
}

.legal-meta a {
  color: var(--t3);
  font-weight: 500;
}

.legal-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--wh);
  letter-spacing: -0.01em;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.legal-body h2:first-child {
  margin-top: 0;
}

/* Sourced editorial photos come in every lighting condition going —
   daylight, overcast, fluorescent warehouse light — which reads as
   "generic stock" against the rest of the site's one consistent mood
   (dusk/night, warm dockside light against cool dark navy, see .h-ship).
   A shared dark/teal wash + muted filter pulls any photo into that same
   family rather than sitting on the page as a bare, unrelated image. */
.nl-hero-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  border: 1px solid var(--bd);
  overflow: hidden;
  margin-bottom: var(--space-8);
  background: var(--bg2);
}

.nl-hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 27, 42, 0) 40%, rgba(13, 27, 42, 0.62) 100%),
    linear-gradient(0deg, rgba(5, 123, 150, 0.22), rgba(5, 123, 150, 0.22));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.nl-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.82) contrast(1.08);
}

.legal-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: -0.01em;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-body p {
  font-size: 15px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.72;
  margin-bottom: var(--space-4);
}

.legal-body ul {
  margin: 0 0 var(--space-4);
  padding-left: 22px;
}

.legal-body li {
  font-size: 15px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.72;
  margin-bottom: 6px;
}

.legal-foot {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--bd);
  font-size: 13px;
  color: var(--mu);
}

@media (max-width: 768px) {
  .legal-sec {
    padding-top: calc(109px + var(--space-8));
  }
}

@media (max-width: 480px) {
  .legal-sec {
    padding-top: calc(120px + var(--space-6));
  }
}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER PAGE
══════════════════════════════════════════════════════════ */
.nl-two {
  align-items: center;
}

.nl-visual {
  min-height: 340px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--bd);
  background-image: url('../img/hero-ship.webp');
  background-size: cover;
  background-position: center;
}

.nl-intro {
  margin-bottom: var(--space-8);
  max-width: 520px;
}

.nl-form {
  max-width: 480px;
}

.nl-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  margin-bottom: 8px;
}

.nl-row {
  display: flex;
  gap: 12px;
}

.nl-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 var(--space-4);
  font-size: 15px;
  font-family: inherit;
  color: var(--wh);
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: var(--radius-xs);
}

.nl-input:focus {
  outline: none;
  border-color: var(--t3);
  box-shadow: 0 0 0 3px rgba(101, 194, 196, 0.18);
}

.nl-submit {
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--t3);
  padding: 0 22px;
  height: 44px;
  border-radius: var(--radius-xs);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, box-shadow 0.18s;
}

.nl-submit:hover {
  background: var(--t3-hover);
  box-shadow: 0 0 18px rgba(101, 194, 196, 0.32);
}

.nl-error {
  font-size: 13px;
  color: var(--down);
  margin-top: var(--space-2);
}

.nl-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
  cursor: pointer;
}

.nl-consent input {
  margin-top: var(--space-1);
  width: 16px;
  height: 16px;
  accent-color: var(--t3);
  flex-shrink: 0;
  cursor: pointer;
}

.nl-consent a {
  color: var(--t3);
  font-weight: 500;
}

.nl-pending {
  font-size: 15px;
  font-weight: 500;
  color: var(--t3);
  max-width: 480px;
}

@media (max-width: 480px) {
  .nl-row {
    flex-direction: column;
  }
  .nl-submit {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER ARCHIVE
   Latest issue = a full hero block, same visual language as the
   homepage hero (photo + scrim + .D1 title). Everything else lives in
   a fixed 3-column grid + a sticky right-hand filter rail: category
   pills + a real single-month calendar (click a day or a CW number to
   filter — no dropdowns, no search).
   ≤768px: rail moves above the grid, grids collapse to 1 column.
══════════════════════════════════════════════════════════ */
.nl-archive {
  margin-top: var(--space-10);
}

.nl-archive-h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

/* ─── Newsletter hero's "latest issue" callout — sits inside the real
   .h-stats row (see index.html's hero), replacing its 4 fixed .hs
   stat cells with one link to the latest published issue. Reuses
   .hs/.hs-l verbatim; only the title needs its own size (a full
   headline doesn't fit .hs-n's number-sized treatment). ─── */
/* #nl-hero-latest is filled in by JS with the latest issue AFTER the hero's
   scroll-reveal pass has already run, so the animation never reaches it and
   it was left stranded at opacity 0 — the stats band simply never appeared
   on the newsletter home, while the homepage's static band showed normally.
   Forced visible (inline styles from the animation need !important to beat).
   Scoped to this element; the homepage's own band is untouched. */
.csg-js #nl-hero-latest.rv {
  opacity: 1 !important;
  transform: none !important;
}

.nl-hero-stat {
  display: block;
  max-width: 640px;
  text-decoration: none;
  /* Matches the homepage's .hs cell height (96px) so the stats band is
     dimensionally identical sitewide. This card is the newsletter home's
     single latest-issue tile and is naturally shorter (85px), which made
     the band 11px shorter here than on the homepage and article pages. */
  min-height: 96px;
}

.nl-hero-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nl-hero-stat-title {
  display: block;
  margin-top: 6px;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--wh);
  line-height: 1.3;
  transition: color 0.15s;
}

.nl-hero-stat:hover .nl-hero-stat-title {
  color: var(--t3);
}

/* ─── Layout: main grid + rail ─── */
.nl-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.nl-rail {
  /* Offset matches .nl-archive-h2's own height + margin-bottom (measured:
     21px line + 16px margin = 37px) — without it, the rail's top edge
     lines up with the "This week"/"Archive" label above the cards, not
     the cards themselves, since the rail has no heading of its own. */
  margin-top: 37px;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-5);
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
}

.nl-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nl-rail-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nl-rail-clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--t3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nl-pill-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nl-pill-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.nl-pill:hover {
  border-color: var(--t3);
  color: var(--wh);
}

.nl-pill--active {
  border-color: var(--t3);
  background: var(--t3);
  color: var(--on-accent);
  font-weight: 700;
}

.nl-pill--active .nl-cat-icon {
  color: var(--on-accent);
}

/* ─── Calendar ─── */
.nl-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nl-cal-month {
  font-size: 13px;
  font-weight: 700;
  color: var(--wh);
}

.nl-cal-nav {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--mu);
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.nl-cal-nav:hover {
  border-color: var(--t3);
  color: var(--t3);
}

.nl-cal-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nl-cal-row {
  display: grid;
  grid-template-columns: 22px repeat(7, 1fr);
  gap: 3px;
}

.nl-cal-row--head {
  margin-bottom: 2px;
}

.nl-cal-cw-head,
.nl-cal-dayhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--mu);
  text-align: center;
  opacity: 0.7;
}

.nl-cal-cw {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--mu);
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  aspect-ratio: 1;
}

.nl-cal-cw:hover {
  color: var(--t3);
}

.nl-cal-cw--active {
  background: var(--t3);
  color: var(--on-accent);
}

.nl-cal-day {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--mu);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-xs);
  background: none;
}

span.nl-cal-day {
  opacity: 0.35;
}

.nl-cal-day--muted {
  opacity: 0.25;
}

button.nl-cal-day--has-issue {
  color: var(--wh);
  background: var(--cd);
  border: 1px solid var(--bd);
  cursor: pointer;
}

button.nl-cal-day--has-issue:hover {
  border-color: var(--t3);
  color: var(--t3);
}

.nl-cal-day--active {
  background: var(--t3) !important;
  color: var(--on-accent) !important;
  border-color: var(--t3) !important;
}

/* ─── Card grid: fixed 3 columns, square thumbnails ─── */
.nl-current,
.nl-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.nl-current {
  margin-bottom: var(--space-10);
}

.nl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  transition: border-color 0.2s var(--ez), transform 0.2s var(--ez), box-shadow 0.2s var(--ez);
}

.nl-card:hover {
  border-color: rgba(101, 194, 196, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
}

.nl-card--current {
  border-top-color: var(--t3);
}

.nl-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg2);
}

.nl-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 27, 42, 0) 40%, rgba(13, 27, 42, 0.62) 100%),
    linear-gradient(0deg, rgba(5, 123, 150, 0.22), rgba(5, 123, 150, 0.22));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.nl-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.82) contrast(1.08);
}

.nl-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 4px;
}

.nl-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nl-cat-icon {
  color: var(--t3);
  flex-shrink: 0;
}

.nl-card-meta .nl-cat {
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nl-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wh);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.nl-card:hover .nl-card-title {
  color: var(--t3);
}

.nl-empty {
  font-size: 14px;
  color: var(--mu);
  padding: var(--space-3) 0;
}

.nl-month-group {
  margin-bottom: var(--space-10);
}

.nl-month-group h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.nl-subscribe {
  margin-top: var(--space-14);
  padding-top: var(--space-10);
  border-top: 1px solid var(--bd);
}

.nl-subscribe h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--wh);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

@media (max-width: 1024px) {
  .nl-layout {
    grid-template-columns: 1fr 240px;
    gap: 32px;
  }
  .nl-rail {
    top: 88px;
  }
  .nl-current,
  .nl-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nl-layout {
    grid-template-columns: 1fr;
  }
  .nl-rail {
    position: static;
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-8);
  }
  .nl-current,
  .nl-archive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .nl-current,
  .nl-archive-grid {
    grid-template-columns: 1fr;
  }
}


/* ─── Content-format bar ───
   Every content pillar side by side, in the same place on the newsletter
   home and on every article page: below the hero, below the back-link,
   centred on the page. On the home it toggles the category filter; on an
   article it links back to the home pre-filtered and marks the article's
   own pillar current. */
.nl-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-6);
}

/* Newsletter home sits under a full hero, so .legal-sec's 124px top
   padding — there to clear the fixed nav on the legal pages, which have
   no hero — is dead space here. Same reasoning as the article pages. */
.legal-sec--nl {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

.legal-sec--nl .legal-back {
  margin-bottom: var(--space-3);
}

/* .nl-archive carries its own 40px top margin, which collapses with the
   bar's and wins. The bar already sets the gap it wants above the grid. */
.legal-sec--nl .nl-archive {
  margin-top: 0;
}

.nl-format {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  min-height: 38px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.nl-format .nl-cat-icon {
  color: var(--t3);
}

.nl-format:hover {
  color: var(--wh);
  border-color: var(--t3);
}

/* Current pillar (article page) and active filter (home) read the same —
   one "you are here" state, so the bar behaves identically on both. */
.nl-format--current {
  color: var(--on-accent);
  background: var(--t3);
  border-color: var(--t3);
  font-weight: 700;
}

.nl-format--current .nl-cat-icon {
  color: var(--on-accent);
}

/* ─── Newsletter article pages — category / month / day tags ───
   Each article carries the same filterable identity its archive card
   shows: the content pillar, then the month and the day it ran. Styled
   off .nl-pill so the article and the Filters rail read as one system;
   non-interactive by design — these label the article, the rail does the
   filtering. All values come from tokens.css, no new hex. */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.article-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}

.article-tag--cat {
  color: var(--t3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-tag .nl-cat-icon {
  color: var(--t3);
}

/* Article pages: the date is plain text, not a pill — dates are tags in
   the calendar only. It sits directly above the article's first heading,
   inside the body column, not up under the back-link. */
.article-date {
  font-size: 14px;
  font-weight: 400;
  color: var(--mu);
  margin: 0 0 var(--space-2);
}

/* ─── Article page body ───
   These were duplicated in a <style> block on every generated article
   page; they live here now so newsletter.html and every article share one
   definition and can't drift apart. */
.WN--article .nl-archive {
  padding-top: 0;
}

.WN--article .legal-body h2 {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 56px;
  margin-bottom: 20px;
}

/* The date now leads the body column, so the first heading follows it
   directly rather than opening with a stacked top margin. */
.WN--article .legal-body > :first-child,
.WN--article .legal-body .article-date + h2 {
  margin-top: 0;
}

/* The rail is sticky, so a short results column used to let it ride up as
   the list shrank under a filter. Reserving the rail's own height (334px
   measured, plus its 37px top offset) keeps it pinned in exactly one place
   whatever the filter returns — and no more than that, so a filter with
   few results doesn't leave a large empty column. */
.nl-main {
  min-height: 371px;
}

@media (max-width: 900px) {
  .nl-main {
    min-height: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   INTELLIGENCE LAYER PAGE (intelligence-layer.html)

   A deck rendered as a page. It keeps the site's visual language —
   same eyebrow/H2/H2-t type scale, same card chrome as the Services
   grid, same teal accents, same --cd/--bg2 section alternation — but
   drops the homepage's one-section-per-screen rhythm, which does not
   survive 12 sections of deck content.

   The bug this block replaces: .W carries `margin: 0 auto`, and an auto
   cross-axis margin on a flex item overrides `align-items: stretch`.
   With the homepage's `max-width: 1180px` that was invisible (every
   section's content exceeded the cap, so every .W measured 1180). The
   moment this page set `max-width: none`, each .W collapsed to its own
   max-content width and centred itself — measured across the 12
   sections: 967px, 1122px, 1610px, 1920px… every section starting at a
   different left edge, some flush against the viewport, which is the
   "cropped at the edge / no consistency" this fixes. `width: 100%` on
   the shell below is the actual fix.

   Layout contract, identical in every section:
     .il-shell   one width, one left edge, nav → hero → sections → footer
     .il-head    eyebrow + H2 + lead, left-aligned, measure-capped
     .il-grid    the only content container; --cols sets 2/3/4/5
     .il-card    the only content box; every unit is one of these
     .il-take    the closing one-line takeaway, one per section max
══════════════════════════════════════════════════════════ */
.il-page {
  /* Full width, but never flush to the glass: the gutter grows with the
     viewport instead of pinning content to the edge at 1920+. */
  --il-gutter: var(--space-14);
  --il-measure: 820px;
}

@media (min-width: 1600px) {
  .il-page {
    --il-gutter: var(--space-20);
  }
}

.il-page .nav-in,
.il-page .h-body,
.il-page .W,
.il-page .ft,
.il-page .ft-b {
  max-width: none;
  width: 100%;
  padding-left: var(--il-gutter);
  padding-right: var(--il-gutter);
}

/* Deck rhythm. 12 sections at min-height:100vh left large voids wherever
   a slide held less content than a screen; a fixed vertical rhythm keeps
   every section the same distance apart regardless of how much it holds
   (csg-uiux: "if a section has much more content, it must have less
   spacing than others"). */
.il-page .SEC {
  min-height: 0;
  padding: var(--space-24) 0;
  display: block;
}

@media (min-width: 1600px) {
  .il-page .SEC {
    padding: var(--space-28) 0;
  }
}

.il-a {
  background: var(--cd);
  border-top: 1px solid var(--bd);
}

.il-b {
  background: var(--bg2);
  border-top: 1px solid var(--bd);
}

/* ─── Section header ─── left-aligned on the shell edge, so the header
   and the grid below it start on the same line. Centred 700px headers
   over full-width grids were the other half of the inconsistency. */
/* Vertical rhythm inside a section is owned by one rule, not by each
   block's own margin — that is what kept the old page from lining up.
   Every direct child of the section shell gets the same gap from the
   one above it, whatever it is: header, grid, table, takeaway. */
.il-page .W > * + * {
  margin-top: var(--space-12);
}

/* A sub-block starts a new topic inside the section, so it gets more
   air above; its own content then sits closer beneath it. */
.il-page .W > .il-subhead {
  margin-top: var(--space-24);
}

.il-page .W > .il-subhead + * {
  margin-top: var(--space-8);
}

.il-head .H2 {
  max-width: 20ch;
  margin-bottom: var(--space-4);
}

.il-head .L {
  max-width: var(--il-measure);
}

/* ─── The grid ─── one container, column count set per section. */
.il-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

/* Sub-heading inside a section that carries more than one deck slide
   (Quellen holds three). Same type as a section header, one step down. */
.il-subhead .H3 {
  max-width: 24ch;
  margin-bottom: var(--space-3);
}

.il-subhead .M {
  max-width: var(--il-measure);
}

/* ─── The box ─── same chrome as the homepage's Services card, so the
   deck reads as the same site. Every content unit on the page is one. */
.il-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.2s var(--ez), transform 0.2s var(--ez), box-shadow 0.2s var(--ez);
}

.il-card--hover:hover {
  border-color: rgba(101, 194, 196, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
}

/* Wider surfaces (the source table, a full-row card) read better one
   step darker than the section they sit on, matching .sc on --bg2. */
.il-a .il-card,
.il-a .il-tw {
  background: var(--bg2);
}

.il-card-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(101, 194, 196, 0.07);
  border: 1px solid rgba(101, 194, 196, 0.13);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}

/* Numbered card — the deck's ordered stages. Same circle as .stp-n on
   the homepage, sitting in the card instead of on a connecting rail. */
.il-card-n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cd);
  border: 1.5px solid var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--t3);
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}

[data-theme='light'] .il-card-n {
  color: var(--t1);
}

.il-card-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--wh);
  line-height: 1.35;
}

.il-card-x {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.7;
  max-width: 62ch;
}

.il-card-x + .il-card-x {
  margin-top: var(--space-2);
}

/* Label above a value inside a card (the roadmap's Value / Business
   model lines) — keeps those from reading as more body copy. */
.il-card-k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  margin-top: var(--space-2);
}

[data-theme='light'] .il-card-k {
  color: var(--t1);
}

/* Bulleted content inside a card. */
.il-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.il-card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--mu);
  line-height: 1.7;
  max-width: 62ch;
}

.il-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--t3);
}

.il-card-list strong,
.il-card-x strong {
  color: var(--wh);
  font-weight: 500;
}

.il-card-list a,
.il-card-x a {
  color: var(--t3);
  border-bottom: 1px solid var(--bd);
}

.il-card-list a:hover,
.il-card-x a:hover {
  color: var(--t3-hover);
}

[data-theme='light'] .il-card-list a,
[data-theme='light'] .il-card-x a {
  color: var(--t1);
}

/* Checklist card — the deck's question and criteria lists. Same row
   rhythm as the homepage's .ck block, rebuilt on the card. */
.il-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bd);
  font-size: 14px;
  color: var(--mu);
  line-height: 1.6;
}

.il-check:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.il-check-k {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(101, 194, 196, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Flow ─── ordered cards with a connector between them. Horizontal
   on the wide grid, vertical once the grid stacks. */
.il-grid--flow {
  align-items: stretch;
}

.il-flow-step {
  position: relative;
}

.il-flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--space-4) * -1);
  width: var(--space-4);
  height: 1px;
  background: var(--t1);
}

/* ─── Path ─── a short arrow sequence of labels, inside a card. Used
   for the deck's three "A → B → C" sequences. The rule that keeps the
   page consistent: an ordered list of *stages with substance* is a
   numbered grid (.il-card-n); an ordered list of *labels* is a path. */
.il-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.il-path-i {
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wh);
  line-height: 1.4;
}

.il-path-a {
  color: var(--t3);
  font-size: 13px;
  line-height: 1;
}

[data-theme='light'] .il-path-a {
  color: var(--t1);
}

/* ─── Takeaway ─── the deck's closing line for a section. One per
   section, always the last thing, always the same treatment. */
.il-take {
  background: var(--gl);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.il-take-t {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  color: var(--wh);
  letter-spacing: -0.015em;
  line-height: 1.45;
  max-width: 60ch;
}

.il-take-t em {
  color: var(--t3);
  font-style: normal;
}

[data-theme='light'] .il-take-t em {
  color: var(--t1);
}

.il-take-x {
  font-size: 14px;
  color: var(--mu);
  line-height: 1.7;
  max-width: 60ch;
}

/* ─── Source table ─── the one piece of content a card can't hold: 14
   rows × 4 columns. Wrapper scrolls sideways below its own minimum
   rather than letting the page scroll. */
.il-tw {
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--bg);
  overflow-x: auto;
}

.il-t {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}

.il-t th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
}

[data-theme='light'] .il-t th {
  color: var(--t1);
}

.il-t td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--bd);
  color: var(--mu);
  line-height: 1.6;
  vertical-align: top;
}

.il-t tbody tr:last-child td {
  border-bottom: none;
}

.il-t td:first-child {
  color: var(--wh);
  font-weight: 500;
}

.il-t a {
  color: var(--t3);
  border-bottom: 1px solid var(--bd);
}

.il-t a:hover {
  color: var(--t3-hover);
}

[data-theme='light'] .il-t a {
  color: var(--t1);
}

/* ─── Hero callout ─── the newsletter hero's latest-issue tile. At full
   shell width it became a 1800px box holding two short lines, so it is
   capped to the same measure as the hero copy above it. */
.il-page .h-stats {
  max-width: 760px;
}

/* ─── Responsive ─── column counts step down at the site's own
   breakpoints; the gutter never collapses (csg-uiux: reduce columns
   before reducing padding). */
@media (max-width: 1400px) {
  .il-grid {
    grid-template-columns: repeat(var(--cols-md, var(--cols, 3)), minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .il-page {
    --il-gutter: var(--space-8);
  }
  .il-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .il-flow-step:not(:last-child)::after {
    display: none;
  }
  .il-page .SEC {
    padding: var(--space-20) 0;
  }
}

@media (max-width: 768px) {
  .il-page {
    --il-gutter: var(--space-6);
  }
  .il-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .il-head {
    margin-bottom: var(--space-8);
  }
  .il-head .H2,
  .il-subhead .H3 {
    max-width: none;
  }
}

/* The deck page carries one nav link per slide — 20 items instead of
   the site's 5. They only fit inline on a wide desktop, and squeezing
   them shrinks the logo instead (measured at 12 items / 1024px: the
   logo box collapsing from 140px to 50px). So the row is tightened
   above 1600px and switches to the same burger dropdown the rest of
   the site uses below it. Markup and script are untouched —
   nav-menu.ts only adds .nav-open to #nav, it never reads a
   breakpoint. */
.il-page .nav-logo {
  flex-shrink: 0;
}

@media (min-width: 1601px) {
  .il-page .nav-links {
    gap: 17px;
  }
  .il-page .nav-links a {
    font-size: 12.5px;
    letter-spacing: 0;
  }
}

@media (min-width: 769px) and (max-width: 1600px) {
  .il-page .nav-burger {
    display: inline-flex;
  }
  .il-page .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--nav-glass-solid);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-bottom: 1px solid var(--bd);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s var(--ez), opacity 0.2s var(--ez);
  }
  .il-page .nav-open .nav-links {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }
  .il-page .nav-links li {
    width: 100%;
  }
  .il-page .nav-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-6);
  }
  .il-page .nav-links a:hover {
    background: var(--gl);
  }
  .il-page .nav-r > .csg-toggle-group {
    display: none;
  }
  .il-page .nav-links-controls {
    display: flex;
    gap: 20px;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--bd);
    margin-top: var(--space-2);
  }
}

/* ─── Deck v2 additions ───────────────────────────────────────────
   The 20-slide C-level build needs four things the card/grid system
   above doesn't cover: a caveat line under a key message, gated
   roadmap steps, the two-path trusted/untrusted diagram, and status
   badges in the port-source tables. Everything else (head, grid,
   card, take, path, table) is reused unchanged. */

/* [FOOTER] — the small governance / source caveat under a slide. */
.il-foot {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.65;
  max-width: 90ch;
  opacity: 0.85;
}

/* [TIMELINE] gate — sits inside the step card it gates, so a 4-step
   row still reads as STEP → GATE → STEP without a second grid. */
.il-gate {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--bd);
}

.il-gate-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t3);
  display: block;
  margin-bottom: var(--space-1);
}

[data-theme='light'] .il-gate-k {
  color: var(--t1);
}

.il-gate-x {
  font-size: 13px;
  color: var(--wh);
  font-weight: 500;
  line-height: 1.55;
}

/* [DIAGRAM] — lanes of nodes with directional arrows. Two lanes side
   by side for the trusted/untrusted split, one full-width lane for the
   isolation chain and the merged path below the split. */
.il-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.il-lane {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: var(--space-5);
}

.il-a .il-lane {
  background: var(--bg2);
}

/* The untrusted lane is drawn as a dashed boundary — a shape
   difference, not a colour one, so it reads the same in both themes
   and for anyone who can't rely on colour (csg-uiux / WCAG
   "don't convey by colour alone"). */
.il-lane--untrusted {
  border-style: dashed;
}

.il-lane-k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--space-4);
}

[data-theme='light'] .il-lane-k {
  color: var(--t1);
}

.il-lane--untrusted .il-lane-k {
  color: var(--mu);
}

.il-node {
  background: var(--cd2);
  border: 1px solid var(--bd);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.il-node-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--wh);
  line-height: 1.4;
}

.il-node-x {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
  margin-top: 2px;
}

.il-arrow {
  display: flex;
  justify-content: center;
  color: var(--t3);
  padding: var(--space-2) 0;
}

[data-theme='light'] .il-arrow {
  color: var(--t1);
}

/* The merged path below the two lanes. */
.il-merge {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: var(--space-5);
}

.il-a .il-merge {
  background: var(--bg2);
}

/* [TABLE] status badge — names the access classification from the
   source-classification rules so a portal is never read as an API. */
.il-badge {
  /* Block + fit-content so the access qualifier that follows it drops to
     its own line instead of running straight into the badge. */
  display: block;
  width: fit-content;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bd);
  color: var(--mu);
  white-space: nowrap;
  margin-bottom: 6px;
}

/* Only a confirmed machine API gets the accent — everything else stays
   neutral, which is the whole point of the classification rule. */
.il-badge--api {
  color: var(--t3);
  border-color: rgba(101, 194, 196, 0.35);
  background: var(--gl);
}

[data-theme='light'] .il-badge--api {
  color: var(--t1);
}

/* The port tables carry five columns, so they need more room before
   the wrapper starts scrolling than the earlier four-column one. */
.il-t--wide {
  min-width: 1180px;
}

@media (max-width: 1024px) {
  .il-lanes {
    grid-template-columns: 1fr;
  }
}