/**
 * 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: 9px;
  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: 9px;
  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: 10px;
  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: 11px;
  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: 10px;
  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 {
  height: 28px;
  width: auto;
}

.ft-t {
  font-size: 10px;
  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-stat {
  display: block;
  max-width: 640px;
  text-decoration: none;
}

.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: 11px;
  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: 10px;
  font-weight: 700;
  color: var(--mu);
  text-align: center;
  opacity: 0.7;
}

.nl-cal-cw {
  font-family: inherit;
  font-size: 10px;
  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: 11px;
  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;
  }
}