/* ============================================================
   PLATINUM COMMERCE — Shared Design System
   Version 4.0 — "Executive Monolith / Figma Evolution"
   Source of truth: Figma isNuI251LamQxQdfeUTWzf (Ashton)
   ============================================================ */

:root {
  /* Surfaces — LIGHT base (hybrid: dark hero + dark footer override below) */
  --surface: #EAEDF4;       /* page background — cooler grey so white cards lift */
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;     /* cards */
  --surface-4: #E1E5EF;
  --panel-blue: #E6EDFF;    /* feature-blue card tint */

  /* Signature deep blue (Figma radial glows) */
  --glow-blue: #003996;

  /* Accent: Growth Blue — darkened for AA contrast on white */
  --accent: #2348C9;
  --accent-light: #1B39A8;       /* hover = deeper */
  --accent-dim: rgba(35, 72, 201, 0.07);
  --accent-border: rgba(35, 72, 201, 0.20);
  --on-accent: #FFFFFF;          /* text on a solid accent button */

  /* Text on light (AA: body ≥ 4.5:1 on white) */
  --on-bg: #0B0D14;
  --body: #3F4350;
  --muted: #646876;
  --faint: #8A8F9C;

  /* Structural — dark hairlines on light */
  --border: rgba(11, 13, 20, 0.10);
  --border-strong: rgba(11, 13, 20, 0.16);
  --ghost-border: rgba(11, 13, 20, 0.05);

  /* Elevation (light theme needs shadows to separate surfaces) */
  --shadow-card: 0 1px 2px rgba(11, 13, 20, 0.06), 0 8px 24px rgba(11, 13, 20, 0.09);
  --shadow-card-hover: 0 2px 6px rgba(11, 13, 20, 0.08), 0 20px 48px rgba(11, 13, 20, 0.16);

  /* Typography */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 0.2s;
  --t-base: 0.35s;
}

/* DARK CONTEXT — nav, the video hero, and footer keep the original dark palette.
   Re-declaring the tokens here cascades them to all descendants.
   NOTE: only the homepage hero (.hero-dark, has the video) is dark; sub-page
   heroes use class="hero" only and fall back to the light palette. */
.nav, .hero-dark, footer, .mobile-menu {
  --on-bg: #FFFFFF;
  --body: #D0D0D4;
  --muted: #9A9DA6;
  --faint: #6E7179;
  --accent: #B3C5FF;
  --accent-light: #DAE1FF;
  --accent-dim: rgba(179, 197, 255, 0.10);
  --accent-border: rgba(179, 197, 255, 0.22);
  --on-accent: #001A45;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* --- ACCESSIBILITY --- */
.skip-link { position: fixed; top: -64px; left: 16px; z-index: 1000; background: var(--accent); color: #FFFFFF;
  padding: 11px 18px; border-radius: 9px; font-family: var(--font-body); font-weight: 700; font-size: 14px;
  transition: top var(--t-fast) var(--ease-out); }
.skip-link:focus { top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .faq-q:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--surface);
  color: var(--on-bg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(35, 72, 201, 0.18); }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--on-bg); letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; }
h2 { font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
h4 { font-weight: 700; font-size: 17px; line-height: 1.3; }
p  { color: var(--body); }

em, .accent { font-style: normal; color: var(--accent); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-border); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 28px; height: 1px; background: var(--accent-border); }

.lead { font-size: 17px; color: var(--body); max-width: 560px; }
.mono { font-family: var(--font-mono); }

/* --- LAYOUT --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
section { position: relative; padding: 110px 0; border-top: 1px solid var(--border); overflow: hidden; }
section.no-rule { border-top: none; }

/* --- ALTERNATING SECTION BANDS (site-wide) ---
   Strict alternation guarantees a band change at every section boundary:
   odd sections white, even sections grey. Card containers carry their own
   border + shadow so they read on either band. Hero (<header>) and footer
   are unaffected (only <section> elements are counted). */
body > section { background: #FFFFFF; }
body > section:nth-of-type(even) { background: var(--surface); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* --- SIGNATURE BLUE GLOW (Figma radial #003996) --- */
.glow {
  position: absolute;
  width: 760px;
  height: 560px;
  border-radius: 50%;
  /* subtle brand tint on light sections */
  background: radial-gradient(closest-side, rgba(35, 72, 201, 0.09), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* dramatic deep-blue glow inside the dark (video) hero only */
.hero-dark .glow { background: radial-gradient(closest-side, rgba(0, 57, 150, 0.55), transparent 70%); }
.glow.sm { width: 460px; height: 360px; }
.glow.tl { top: -180px; left: -220px; }
.glow.tr { top: -180px; right: -220px; }
.glow.bl { bottom: -200px; left: -200px; }
.glow.br { bottom: -200px; right: -200px; }
.glow.cc { top: 50%; left: 50%; transform: translate(-50%, -50%); }
section > .container, .hero > .container { position: relative; z-index: 1; }

/* --- DARK HERO TREATMENT (homepage shows video on top; sub-pages show this bg) --- */
.hero-dark { background: radial-gradient(125% 95% at 50% -12%, #14264a 0%, #0a1020 46%, #06080f 100%); }

/* --- AMBIENT HERO BACKDROP: tech grid. Mask on the STATIC container (composited once);
   only the inner ::before drifts via GPU transform. Glows are static for smooth scrolling. --- */
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 16%, #000 26%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 16%, #000 26%, transparent 78%); }
.hero-fx::before { content: ""; position: absolute; inset: -64px;
  background-image: linear-gradient(rgba(140,170,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(140,170,255,0.07) 1px, transparent 1px);
  background-size: 48px 48px; will-change: transform; animation: heroGrid 32s linear infinite; }
@keyframes heroGrid { from { transform: translate3d(0,0,0); } to { transform: translate3d(48px,48px,0); } }
@media (prefers-reduced-motion: reduce) { .hero-fx::before { animation: none; } }

/* --- NAV --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 9, 14, 0.92);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
/* Transparent overlay nav over the dark video hero (homepage); JS adds .nav-overlay.
   At the top it floats over the video with only a soft top scrim for legibility;
   once scrolled it condenses into a frosted bar. */
.nav.nav-overlay {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: linear-gradient(to bottom, rgba(0, 6, 20, 0.55) 0%, rgba(0, 6, 20, 0.14) 65%, transparent 100%);


  border-bottom-color: transparent;
}
.nav.nav-overlay.scrolled {
  background: rgba(8, 9, 14, 0.94);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.nav-logo img { height: 30px; width: auto; }

/* icon tiles (Lucide, prod-style) */
.card-icon {
  width: 48px;
  height: 48px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 24px; height: 24px; stroke: var(--accent); stroke-width: 1.75; }
.cc-icon svg { width: 20px; height: 20px; stroke: var(--accent); stroke-width: 2; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; }
/* primary nav links (everything except the CTA pill) */
.nav-links a:not(.nav-cta) {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.nav-links a:not(.nav-cta):hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.07); }
.nav-links a.active { color: #FFFFFF; }
/* accent underline on the current page */
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav-cta {
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0B0D14;
  background: #FFFFFF;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.nav-cta:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); }
/* --- SERVICES NAV DROPDOWN (injected by shared.js) --- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-caret { display: inline-block; margin-left: 5px; font-size: 8px; opacity: 0.65; transition: transform var(--t-fast) var(--ease-out); }
.nav-dd:hover .nav-caret { transform: rotate(180deg); }
.nav-dd::after { content: ""; position: absolute; top: 100%; left: -10px; right: -10px; height: 16px; }
.nav-dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: 256px; background: rgba(11, 14, 22, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; padding: 9px; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); z-index: 200; }
.nav-dd:hover .nav-dd-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dd-menu a { display: block; padding: 11px 14px; border-radius: 10px; color: rgba(255, 255, 255, 0.94);
  font-size: 14px; font-weight: 600; line-height: 1.3; transition: background var(--t-fast); }
.nav-dd-menu a span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.nav-dd-menu a:hover { background: rgba(255, 255, 255, 0.08); }
.nav-dd-menu .dd-all { margin-top: 5px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0; color: var(--accent); }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--on-bg); margin: 5px 0; transition: var(--t-fast); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(0, 0, 0, 0.97);
  z-index: 99;
  padding: 38px 32px;
  flex-direction: column;
  gap: 26px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--on-bg); }
/* color is load-bearing, not decoration. `.mobile-menu a` is (0,1,1) and beats
   `.nav-cta` (0,1,0), and inside .mobile-menu the token block flips --on-bg to
   #FFFFFF — so the CTA renders white text on its own white pill, measured at
   1:1. This selector is (0,2,0) and wins. Do not drop the colour when editing
   this rule. */
.mobile-menu .nav-cta { font-size: 16px; text-align: center; margin-top: 8px; color: #0B0D14; }
.mobile-menu .mm-sub { display: flex; flex-direction: column; gap: 16px; margin: -10px 0 2px 14px; padding-left: 18px; border-left: 2px solid var(--accent-border); }
.mobile-menu .mm-sub-link { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--muted); }

/* --- HERO --- */
.hero {
  position: relative;
  padding: 130px 0 70px;
  overflow: hidden;
  border-top: none;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 5, 18, 0.72) 0%, rgba(0, 5, 18, 0.55) 60%, rgba(0, 0, 0, 0.92) 100%);
  z-index: 0;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 30px;
}
.hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* category positioning line under the H1 */
.hero-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 20px;
}
.hero.center .hero-kicker { /* centered sub-page heroes */ }
.hero .lead { margin-top: 18px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.hero.center .hero-ctas { justify-content: center; }
.hero.center .lead { margin-left: auto; margin-right: auto; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  transition: all var(--t-fast) var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 57, 150, 0.45); }
.btn-secondary { background: transparent; color: var(--on-bg); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent-border); color: var(--accent); }
.btn-tertiary { background: none; border: none; color: var(--accent); padding: 0; font-weight: 600; }
.btn-tertiary::after { content: "→"; transition: transform var(--t-fast) var(--ease-out); }
.btn-tertiary:hover::after { transform: translateX(4px); }

/* --- STAT STRIP (Figma: row of big numbers under hero) --- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 70px;
}
.stat-strip .stat {
  padding: 28px 18px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.stat-strip .stat:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--on-bg);
  letter-spacing: -0.02em;
}
.stat-value .accent { color: var(--accent); }
.stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* --- LOGO MARQUEE --- */
.logo-marquee { overflow: hidden; padding: 44px 0; border-top: 1px solid var(--border); position: relative; }
.logo-marquee::before, .logo-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.logo-marquee::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
.marquee-track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marquee 48s linear infinite; }
.marquee-track img { height: 28px; width: auto; opacity: 0.8; transition: opacity var(--t-fast); }
.marquee-track img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- CARDS --- */
.card-grid { display: grid; gap: 18px; margin-top: 56px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px 30px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.card:hover { border-color: var(--accent-border); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.card .card-num {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.card h3, .card h4 { margin-bottom: 12px; }
.card p { font-size: 14px; color: var(--body); }
.card-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.card-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 100px;
}
.card.feature-blue {
  background: linear-gradient(145deg, var(--panel-blue), var(--surface-3) 70%);
  border-color: rgba(0, 57, 150, 0.45);
}

/* photo header inside cards */
.card-img {
  margin: -34px -30px 26px;
  height: 180px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.6s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.04); }
.card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45)); }

/* photo gallery grid */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 56px; }
.gallery .shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform 0.6s var(--ease-out); }
.gallery .shot:hover img { transform: scale(1.03); }
.gallery .shot .media-tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #FFFFFF; background: rgba(0,0,0,0.65); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 13px; }
@media (max-width: 680px) { .gallery { grid-template-columns: 1fr; } }

/* full-width photo banner */
.banner { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin-top: 64px; }
.banner img { width: 100%; height: 340px; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55)); }
.banner .media-tag { position: absolute; left: 22px; bottom: 20px; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #FFFFFF; background: rgba(0,0,0,0.6); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 14px; }

/* --- SPLIT (text + photo, Figma numbered 01-04 pattern) --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; }
.split.flip > .split-media { order: -1; }
.split-media { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-media .media-tag {
  position: absolute; left: 18px; bottom: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: #FFFFFF; background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 14px;
}
.split-body h2 { margin-bottom: 20px; }
.split-body p + p { margin-top: 16px; }
.split-body .hero-ctas { margin-top: 30px; }

/* checklist inside splits/cards */
.checklist { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; font-size: 14px; color: var(--body); align-items: baseline; }
.checklist li::before { content: "—"; color: var(--accent); flex-shrink: 0; }

/* --- TIMELINE (Launch to Scale in 10 Weeks) --- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 14px);
}
.tl-step { padding: 0 26px 0 0; position: relative; }
.tl-step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); z-index: 1;
}
.tl-step .tl-num { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.14em; margin: 32px 0 8px; }
.tl-step h4 { margin-bottom: 4px; }
.tl-step .tl-when {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.tl-step p { font-size: 13.5px; color: var(--body); }

/* --- TESTIMONIAL --- */
.quote-card {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.quote-card::before {
  content: "“";
  position: absolute; top: 6px; right: 26px;
  font-family: var(--font-display); font-size: 130px; font-weight: 800;
  color: rgba(35, 72, 201, 0.10); line-height: 1;
}
.quote-card blockquote { font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.55; color: var(--on-bg); }
.quote-who { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.quote-who img, .quote-who .avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent);
}
.quote-who .q-name { font-weight: 600; font-size: 14px; color: var(--on-bg); }
.quote-who .q-role { font-size: 12.5px; color: var(--muted); }

/* --- CTA BLOCK (Figma pattern: heading + contact cards + buttons) --- */
.cta-block { text-align: center; position: relative; overflow: hidden; }
.cta-block h2 { font-size: clamp(34px, 5vw, 52px); }
.cta-block .lead { margin: 22px auto 0; }
.cta-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.cta-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 26px; text-align: left;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast);
}
.cta-card:hover { border-color: var(--accent-border); }
.cta-card .cc-icon { font-size: 18px; color: var(--accent); }
.cta-card .cc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cta-card .cc-value { font-size: 14.5px; font-weight: 600; color: var(--on-bg); }
.cta-block .hero-ctas { justify-content: center; margin-top: 38px; }

/* --- FORMS --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 9px; color: var(--on-bg); font-family: var(--font-body);
  font-size: 14.5px; padding: 14px 16px; outline: none;
  transition: border-color var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-border); }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.form-success { display: none; text-align: center; padding: 60px 0; }
.form-success.show { display: block; }
.form-success h3 { margin-bottom: 10px; }

/* --- FOOTER --- */
footer { border-top: 1px solid var(--border); padding: 72px 0 36px; background: #07070C; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer-brand img { height: 28px; margin-bottom: 16px; }
.footer-brand p { font-size: 13.5px; color: var(--muted); max-width: 280px; }
.footer-col h5 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px;
}
.footer-col a { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 11px; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--on-bg); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--border); margin-top: 56px; padding-top: 28px;
  font-size: 12.5px; color: var(--faint);
}
.footer-bottom a { color: var(--faint); margin-left: 22px; }
.footer-bottom a:hover { color: var(--muted); }

/* --- HOW IT WORKS --- */
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.step-card {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 38px 32px;
  box-shadow: var(--shadow-card);
}
.step-card .big-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 22px;
}
.step-card h3 { font-size: 21px; margin-bottom: 12px; }
.step-card p { font-size: 14px; }
@media (max-width: 960px) { .step-row { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq { max-width: 820px; margin: 56px auto 0; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--on-bg);
}
.faq-q .faq-plus { font-family: var(--font-body); font-weight: 400; font-size: 24px; color: var(--accent); transition: transform var(--t-fast); flex-shrink: 0; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { font-size: 14.5px; color: var(--body); padding: 0 4px 26px; max-width: 700px; }

/* --- INSIGHTS / ARTICLES --- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.filter-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 100px; padding: 8px 18px;
  cursor: pointer; transition: all var(--t-fast);
}
.filter-pill.active, .filter-pill:hover { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }

.post-card {
  display: block;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px 30px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
a.post-card:hover { border-color: var(--accent-border); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.post-meta { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.post-meta .post-cat {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent-border); background: var(--accent-dim);
  border-radius: 100px; padding: 5px 12px;
}
.post-meta span { font-size: 12px; color: var(--muted); }
.post-card h3 { margin-bottom: 12px; line-height: 1.3; }
.post-card p { font-size: 14px; color: var(--body); }
.post-card .post-soon {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); margin-top: 18px; display: block;
}

/* article page */
.article-head { max-width: 820px; }
.article-head h1 { font-size: clamp(32px, 4.5vw, 52px); margin-top: 22px; }
.article-head .lead { margin-top: 24px; max-width: 720px; }
.article-body { max-width: 760px; margin-top: 30px; }
.article-body h2 { font-size: clamp(26px, 3vw, 36px); margin: 56px 0 22px; }
.article-body p { font-size: 16px; line-height: 1.75; color: var(--body); margin-bottom: 22px; }
.article-body blockquote {
  border-left: 2px solid var(--accent); background: var(--surface-3);
  border-radius: 0 14px 14px 0; padding: 28px 32px; margin: 36px 0;
  font-family: var(--font-display); font-size: 19px; line-height: 1.55; color: var(--on-bg);
}
.article-body blockquote cite { display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-size: 13px; color: var(--muted); }

/* --- REVEAL ON SCROLL --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* --- STICKY MOBILE CTA (injected by shared.js on small screens) --- */
.mobile-cta-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 95;
  text-align: center;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 13, 20, 0.32);
}

/* --- RECOGNITION / AWARDS BAND (homepage) --- */
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.award {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.award .award-icon {
  width: 46px; height: 46px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
}
.award .award-icon svg { width: 23px; height: 23px; stroke: var(--accent); stroke-width: 1.75; }
.award h4 { font-size: 16px; margin-bottom: 8px; }
.award p { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .awards-grid { grid-template-columns: 1fr; } }

/* --- PATH SELECTOR (homepage bottom CTA: pick what to explore) --- */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 48px; text-align: left; }
.path-card {
  display: flex; flex-direction: column;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.path-card:hover { border-color: var(--accent-border); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.path-card .card-icon { margin-bottom: 18px; }
.path-card h4 { font-size: 17px; margin-bottom: 8px; }
.path-card p { font-size: 13.5px; color: var(--body); flex: 1; }
.path-card .path-go { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--accent); transition: transform var(--t-fast) var(--ease-out); }
.path-card:hover .path-go { transform: translateX(3px); }
@media (max-width: 880px) { .path-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .path-grid { grid-template-columns: 1fr; } }

/* --- CASE STUDY CARDS --- */
.cs-metric { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 46px); color: var(--accent); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.cs-label { font-size: 14.5px; color: var(--on-bg); font-weight: 600; margin-bottom: 14px; }
.cs-quote { font-size: 13.5px; color: var(--body); font-style: italic; }
.cs-who { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.cs-tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); padding: 5px 11px; border-radius: 100px; }
.cs-note { text-align: center; margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--faint); }

/* --- COMPARE MODELS TABLE --- */
.compare-wrap { margin-top: 48px; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card); }
.compare { width: 100%; border-collapse: collapse; min-width: 660px; background: var(--surface-3); }
.compare th, .compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare thead th { background: var(--surface-4); font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--on-bg); }
.compare thead th:first-child { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.compare tbody th { font-weight: 600; color: var(--body); width: 28%; }
.compare td { color: var(--muted); }
.compare .ck { color: var(--accent); font-weight: 700; }
.compare .yes { color: var(--accent); font-weight: 700; }
.compare thead th:last-child, .compare tbody td:last-child { background: var(--accent-dim); }

/* --- VIDEO PLACEHOLDER (swap the poster/src with a real clip later) --- */
.video-embed { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 9; box-shadow: var(--shadow-card); }
.video-embed > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42)); }
.video-embed .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast) var(--ease-out);
}
.video-embed:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.video-embed .play::before { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 22px solid #0B0D14; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
/* real, playable video (controls work — no overlay/play pseudo) */
.video-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 9; box-shadow: var(--shadow-card); background: #000; }
.video-frame > video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* small "sample / replace" marker on placeholder media */
.media-sample {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; padding: 5px 10px;
}

/* --- RESPONSIVE --- */
@media (max-width: 960px) {
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.flip > .split-media { order: 0; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .timeline::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  section { padding: 72px 0; }
  .hero { padding: 80px 0 46px; }
  .container { padding: 0 22px; }
  h1 { font-size: clamp(30px, 9.5vw, 40px); }
  h2 { font-size: clamp(25px, 7.5vw, 32px); }
  .lead { font-size: 15.5px; }
  .glow { width: 70vw; height: 50vw; }
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-strip .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .stat-strip .stat:nth-last-child(-n+2) { border-bottom: none; }
  .cta-cards { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom a { margin-left: 0; margin-right: 22px; }
  .split-media img { aspect-ratio: 16 / 11; }
  .banner img { height: 220px; }
}


/* ── Careers: open-roles list ──────────────────────────────────────────────
   Page-specific only. Nav, hero, section bands, container, eyebrow, buttons,
   cta-block and footer all come from shared.css above, so this page sits
   inside the site's conventions rather than beside them.

   The list is a real table with column headings, not free-floating rows: a
   candidate scanning eight roles wants to compare location, type and pay down
   a column, which loose rows do not let them do.

   No mono anywhere. The site keeps IBM Plex Mono for .hero-kicker and a few
   data labels; on this page it read as robotic, so everything here is Inter,
   with tabular figures where numbers need to line up. */
.rolelist { margin-top: 34px; }
.jhead, .jrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 116px 168px 96px;
  gap: 24px;
  align-items: center;
}
.jhead {
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  /* --faint measured 3.24:1 here, under the 4.5:1 AA floor. --muted is 5.55:1. */
  color: var(--muted);
}
.jhead span:nth-child(4), .jhead span:nth-child(5) { text-align: right; }
.rolegroup { padding-top: 22px; }
.rolegroup-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); padding: 0 4px 8px;
}
.jrow {
  padding: 16px 4px; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background var(--t-fast) var(--ease-out);
}
.jrow:hover { background: var(--accent-dim); }
.jtitle { display: block; font-family: var(--font-display); font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; color: var(--on-bg); margin-bottom: 3px; }
.jrow:hover .jtitle { color: var(--accent); }
.jsum { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.jcell { font-size: 14px; color: var(--body); }
.jpay { font-size: 14px; color: var(--on-bg); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jgo { font-size: 13px; font-weight: 600; color: var(--accent); text-align: right; white-space: nowrap; }

.rolefilters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.fpill {
  font-size: 13px; font-weight: 600; padding: 12px 18px; border-radius: 999px; min-height: 44px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--body);
  cursor: pointer; transition: all var(--t-fast) var(--ease-out);
}
.fpill:hover { border-color: var(--accent); color: var(--accent); }
.fpill.on { background: var(--on-bg); border-color: var(--on-bg); color: var(--surface-2); }

/* Role detail */
/* Named areas so the apply card can sit top-right on desktop while coming
   FIRST in the DOM, which is what puts it above the description on a phone. */
.rolebody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "body apply" "body rail";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 14px;
  align-items: start;
}
.applyslot { grid-area: apply; }
.jd { grid-area: body; }
.rolebody > aside { grid-area: rail; }
.jd h2 { font-size: 26px; margin: 36px 0 14px; }
.jd h2:first-child { margin-top: 0; }
.jd h3 { font-size: 19px; margin: 26px 0 10px; }
.jd h4 { font-size: 16px; margin: 20px 0 8px; }
.jd p { font-size: 16px; line-height: 1.75; color: var(--body); margin: 0 0 16px; }
.jd ul, .jd ol { margin: 0 0 18px; padding-left: 22px; }
.jd li { font-size: 16px; line-height: 1.75; color: var(--body); margin-bottom: 9px; }
.jd strong { color: var(--on-bg); font-weight: 600; }
.jd blockquote { margin: 0 0 18px; padding-left: 18px; border-left: 2px solid var(--border-strong); color: var(--muted); }
.jd hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0 22px; }

.railstack { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.railcard { background: var(--surface-3); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card); }
.railcard h5 { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.paybig { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--on-bg); line-height: 1.2; font-variant-numeric: tabular-nums; }
.payunit { font-size: 13.5px; color: var(--muted); margin: 6px 0 18px; }
.railnote { font-size: 12.5px; color: var(--faint); text-align: center; margin: 12px 0 0; }
.procsteps { margin: 0; padding: 0; list-style: none; counter-reset: ps; }
.procsteps li { counter-increment: ps; position: relative; padding-left: 32px; margin-bottom: 15px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
.procsteps li:last-child { margin-bottom: 0; }
.procsteps li::before { content: counter(ps); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.procsteps b { display: block; color: var(--on-bg); font-weight: 600; }
.procsteps span { font-size: 13px; color: var(--muted); }
.otherlink { display: block; font-size: 15px; font-weight: 600; color: var(--on-bg); text-decoration: none; padding: 9px 0; border-bottom: 1px solid var(--border); }
.otherlink:last-child { border-bottom: 0; }
.otherlink:hover { color: var(--accent); }
.rolechips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 24px; }
.rolechip { font-size: 13.5px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 8px 14px; }
.rolechip.pay { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1040px) {
  .jhead { display: none; }
  .jrow { grid-template-columns: minmax(0, 1fr) 168px 96px; gap: 16px; }
  .jrow .jcell.type { display: none; }
}
@media (max-width: 940px) {
  /* One column, and the apply card leads. Below this width the rail used to
     stack under the whole posting, so on a phone the Apply button sat past
     several screens of text. */
  .rolebody {
    display: flex; flex-direction: column; gap: 28px;
    grid-template-columns: none; grid-template-areas: none;
  }
  .railstack { position: static; }
}
@media (max-width: 680px) {
  .jrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .jrow .jcell { display: none; }
  .jpay, .jgo { text-align: left; }
  .rolefilters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .fpill { flex: none; }
}

/* ── Careers page: two corrections to the shared chrome ───────────────────── */

/* Band alternation is written as `body > section`. This page wraps its content
   in <main> for the skip link and the landmark, which orphans that rule and
   left every band showing the grey page background. Same alternation, scoped
   to the wrapper. */
main > section { background: #FFFFFF; }
main > section:nth-of-type(even) { background: var(--surface); }

/* shared.js injects a fixed "Work With Us" bar that links to this page. On the
   careers page it points at itself, and it is injected without a breakpoint so
   it sat over the desktop layout too. */
.mobile-cta-bar { display: none; }

/* The pay range is supporting detail beside the apply button, not the headline
   of the card. It stays in the posting, as CA Labor Code 432.3 requires, and
   also appears as a chip under the role title. */
.payline {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center;
}
.payline #paybig { font-variant-numeric: tabular-nums; }

/* A prompt, not a label. `.railcard h5` is the small uppercase caption used by
   the other rail cards; this one is a question addressed to the reader. */
.applyhead {
  font-family: var(--font-display) !important;
  font-size: 16px !important; font-weight: 700 !important;
  letter-spacing: -.01em !important; text-transform: none !important;
  color: var(--on-bg) !important; margin: 0 0 14px !important;
}

/* The pay range, once, at the foot of the posting. Required in the posting by
   CA Labor Code 432.3, so it cannot be dropped — but it belongs with the small
   print, not next to the apply button where it outranked the action. */
.paybottom {
  margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.paybottom .payfig { color: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Careers pages run wider than the rest of the site ─────────────────────
   platinumcommerce.com constrains every page to a 1200px .container. These
   two pages are denser than a marketing band — a five-column table and a
   posting with a rail — so they get more room.

   The description column is NOT stretched to match. Body text past roughly
   90 characters a line is measurably harder to read, which is why job pages
   at Ashby, Stripe and Greenhouse all cap it. The extra width goes to the
   table and the gap, not the prose. */
.careers-wide .container { max-width: 1440px; }
.careers-wide .hero .lead { max-width: 720px; }
.careers-wide section.no-rule .lead { max-width: 760px; }

/* Table gets the room: the role column grows, the data columns stay put so
   they still line up down the page. */
.careers-wide .jhead,
.careers-wide .jrow { grid-template-columns: minmax(0, 1fr) 230px 130px 180px 110px; }

/* Posting: a wider gutter and a slightly wider measure, not a full-bleed one. */
.careers-wide .rolebody { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 88px; }
.careers-wide .jd { max-width: 860px; }

@media (max-width: 1040px) {
  .careers-wide .jhead { display: none; }
  .careers-wide .jrow { grid-template-columns: minmax(0, 1fr) 168px 96px; }
}
@media (max-width: 940px) {
  .careers-wide .rolebody { grid-template-columns: none; column-gap: 0; }
  .careers-wide .jd { max-width: none; }
}
@media (max-width: 680px) {
  .careers-wide .jrow { grid-template-columns: minmax(0, 1fr); }
}

/* A second apply card after the posting, phones only.
   On desktop the rail is sticky, so the CTA never leaves the screen. On a
   phone it sits at the top and scrolls away, leaving someone who has just
   read the whole posting with nothing to act on without scrolling back. */
.applyslot-bottom { display: none; }
@media (max-width: 940px) {
  /* Explicit order for every child: the rail cards and the description both
     default to 0, so without this the second CTA landed after "Hiring process"
     and "Also open" rather than straight after the posting. */
  .applyslot        { order: 1; }
  .jd               { order: 2; }
  .applyslot-bottom { display: block; order: 3; }
  .rolebody > aside { order: 4; }
}

/* ── Roles need to read as separate entries ───────────────────────────────
   A hairline between rows was not enough: with a summary line under each
   title, one role ran straight into the next. Each is now a bounded card with
   its own breathing room, and the department heading sits clear of them. */
.careers-wide .rolelist { border-top: 0; }
.careers-wide .rolegroup { padding-top: 34px; }
.careers-wide .rolegroup:first-child { padding-top: 20px; }
.careers-wide .rolegroup-head {
  padding: 0 0 12px 2px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 10px;
}
.careers-wide .jhead { border-bottom: 0; padding-bottom: 6px; }
.careers-wide .jrow {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 10px;
  background: var(--surface-3);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.careers-wide .jrow:hover {
  background: var(--surface-3);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card);
}
.careers-wide .jrow:last-child { margin-bottom: 0; }
.careers-wide .jsum { margin-top: 4px; }

@media (max-width: 680px) {
  .careers-wide .jrow { padding: 16px 16px; }
}

/* On a phone the apply card was a bordered, shadowed panel sitting above plain
   body copy with no other card near it, so it read as a stray element rather
   than part of the page. The card chrome earns its keep in the desktop rail,
   where it sits among other cards; here it does not. Flat block, full-width
   button, a rule to separate it from the posting. */
@media (max-width: 940px) {
  .careers-wide .applyslot .railcard,
  .careers-wide .applyslot-bottom .railcard {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--border);
  }
  .careers-wide .applyslot-bottom .railcard {
    padding: 26px 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--border);
  }
  .careers-wide .applyslot .applyhead,
  .careers-wide .applyslot-bottom .applyhead {
    font-size: 18px !important;
    margin: 0 0 12px !important;
  }
  .careers-wide .applyslot .btn,
  .careers-wide .applyslot-bottom .btn { padding: 15px 20px; font-size: 15.5px; }
  .careers-wide .railnote { text-align: left; }
}