/* ==========================================================================
   Trailblaze Data — shared design system
   Colours, type and components carried over from the original Trailblaze
   passport styling (dark teal field, gold/orange gradient, Oswald display).
   ========================================================================== */

:root {
  --ink: #07211F;
  --deep: #0b3434;
  --panel: #0F4A50;
  --panel-2: #0A3236;
  --line: rgba(207, 230, 224, .16);
  --cream: #f4f0e6;
  --mist: #BFD6D3;
  --muted: #A3C0BD;
  --orange: #F0552F;
  --amber: #F08A3C;
  --gold: #F6D255;
  --gold-2: #F8B24A;
  --mint: #82BAB4;
  --shell: min(1320px, calc(100% - 56px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  color: #EAF3F2;
  background: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
img, svg { display: block; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Page field ------------------------------------------------------------- */
.page-field {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(1100px 680px at 84% -8%, rgba(240, 138, 60, .26), transparent 58%),
    radial-gradient(900px 640px at 4% 112%, rgba(240, 85, 47, .2), transparent 55%),
    linear-gradient(165deg, #0E3E43, #07211F);
}
/* `overflow: hidden` above contains the rotated passport and the oversized
   pricing numeral, but it also traps `position: sticky` descendants in a box
   that never scrolls — which would break the mobile header. `clip` does the
   same containment without creating a scroll container. */
@supports (overflow: clip) {
  .page-field { overflow: visible; overflow-x: clip; }
}

.shell { width: var(--shell); margin: 0 auto; }
.section { position: relative; padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* Type ------------------------------------------------------------------- */
h1, h2, h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; margin: 0; }
h1 { font-weight: 700; font-size: clamp(46px, 6.4vw, 70px); line-height: .94; letter-spacing: .5px; }
h2 { font-weight: 700; font-size: clamp(34px, 4.6vw, 52px); line-height: 1; letter-spacing: .5px; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: .6px; }
.flame {
  background: linear-gradient(120deg, var(--gold), var(--amber) 45%, var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
p { margin: 0; }
.lead { max-width: 470px; color: var(--mist); font-size: 16.5px; line-height: 1.65; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--gold);
  font: 700 12.5px/1.3 'Space Mono', monospace;
  letter-spacing: 1.6px; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--orange); }
.eyebrow.pill {
  padding: 6px 15px; border: 1px solid rgba(246, 210, 85, .4); border-radius: 999px;
}
.eyebrow.pill::before { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.eyebrow.on-cream { color: #b44628; }

.section-heading { max-width: 620px; display: grid; gap: 18px; }
.section-heading.center { max-width: 660px; margin: 0 auto; justify-items: center; text-align: center; }
.section-heading p { color: var(--mist); font-size: 16px; line-height: 1.75; }

.mono-note {
  color: #9DBDB8; font: 700 11.5px/1.6 'Space Mono', monospace;
  letter-spacing: 1.2px; text-transform: uppercase;
}

/* Buttons ---------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 11px;
  color: #2A0E04;
  background: linear-gradient(135deg, var(--gold-2), var(--orange));
  box-shadow: 0 14px 30px -12px rgba(240, 85, 47, .65);
  font-size: 13.5px; font-weight: 800; letter-spacing: .2px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(240, 85, 47, .85); }
.button.ghost {
  color: #EAF3F2; background: transparent;
  border-color: rgba(246, 210, 85, .4); box-shadow: none;
  font-weight: 700;
}
.button.ghost:hover { border-color: rgba(246, 210, 85, .8); box-shadow: none; }
.button.light { color: #26130b; background: var(--cream); box-shadow: none; }
.button.dark { color: var(--cream); background: var(--deep); box-shadow: none; }
.button.sm { min-height: 40px; padding: 0 18px; font-size: 12.5px; border-radius: 9px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.actions.center { justify-content: center; }

/* Header ----------------------------------------------------------------- */
.site-header { position: relative; z-index: 20; }
.nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 26px 0;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark { width: 68px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.brand-name {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 52px;
  line-height: .82; letter-spacing: 4px; color: #F1F7F5;
}
.brand-rule { height: 1px; width: 80%; margin: 5px auto 3px; background: linear-gradient(90deg, transparent, #3A5A57, transparent); }
.brand-tag {
  font-weight: 600; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  color: #A3C0BD; white-space: nowrap;
}
.nav-links {
  display: flex; align-items: center; gap: 20px;
  font-weight: 600; font-size: 13.5px; color: #A3C0BD;
}
.nav-links a, .nav-trigger { transition: color .2s ease; }
.nav-links > a:hover, .nav-links > a.active, .nav-trigger:hover, .nav-trigger.active { color: var(--cream); }
.nav-group { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 0;
  border: 0; background: none; color: inherit; font-weight: 700; cursor: pointer;
}
.nav-trigger::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.nav-group.is-open .nav-trigger::after, .nav-group:focus-within .nav-trigger::after { transform: rotate(225deg) translate(-2px, -2px); }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 50;
  width: 330px; padding: 10px; display: grid; gap: 4px;
  border: 1px solid rgba(207, 230, 224, .18); border-radius: 16px;
  background: rgba(6, 37, 35, .98); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .95);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-group:last-of-type .nav-menu { left: auto; right: 0; transform: translate(0, 8px); }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.is-open .nav-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-group:last-of-type:hover .nav-menu, .nav-group:last-of-type:focus-within .nav-menu, .nav-group:last-of-type.is-open .nav-menu { transform: translate(0, 0); }
.nav-menu a {
  display: grid; gap: 4px; padding: 13px 14px; border-radius: 10px;
  color: #EAF3F2; line-height: 1.25;
}
.nav-menu a:hover { color: var(--cream); background: rgba(130, 186, 180, .11); }
.nav-menu strong { font-size: 13px; }
.nav-menu span { color: #8FB0AC; font-size: 11px; font-weight: 500; line-height: 1.4; }
.resource-menu { width: 580px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-login { font-weight: 700; white-space: nowrap; }
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  border: 1px solid rgba(246, 210, 85, .32); background: rgba(10, 46, 49, .7);
  color: var(--gold); font-size: 16px; cursor: pointer;
}

/* Resource pages --------------------------------------------------------- */
.resource-hero { padding: 78px 0 62px; }
.resource-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: center; }
.resource-hero h1 { max-width: 760px; margin: 20px 0 24px; }
.resource-hero .lead { max-width: 650px; }
.route-card {
  position: relative; padding: 30px; min-height: 330px; overflow: hidden;
  border: 1px solid rgba(207, 230, 224, .18); border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 74, 80, .86), rgba(7, 33, 31, .92));
  box-shadow: 0 34px 74px -40px rgba(0, 0, 0, .9);
}
.route-card::before {
  content: ""; position: absolute; inset: 25px; border: 1px dashed rgba(246, 210, 85, .22); border-radius: 18px;
}
.route-card::after {
  content: ""; position: absolute; width: 170px; height: 170px; right: -35px; bottom: -45px;
  border: 36px solid rgba(240, 85, 47, .12); border-radius: 50%;
}
.route-card-content { position: relative; z-index: 1; display: grid; gap: 22px; }
.route-code { color: var(--gold); font: 700 12px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.route-card h2 { max-width: 360px; font-size: clamp(32px, 4vw, 50px); }
.route-card h3 { max-width: 360px; font-size: clamp(28px, 3.4vw, 42px); }
.route-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.route-list li { display: flex; gap: 11px; color: var(--mist); font-size: 14px; line-height: 1.45; }
.route-list li::before { content: "→"; color: var(--gold); font-family: 'Space Mono', monospace; }
.resource-band { padding: 34px 0 96px; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.resource-card {
  min-height: 230px; padding: 28px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(9, 48, 49, .56);
}
.resource-card .index { display: block; margin-bottom: 34px; color: var(--gold); font: 700 11px/1 'Space Mono', monospace; }
.resource-card h3 { margin-bottom: 12px; }
.resource-card p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.resource-next { padding: 78px 0; background: var(--cream); color: #193534; }
.resource-next .section-heading p { color: #4f6865; }

/* Enterprise ------------------------------------------------------------- */
.enterprise-hero { position: relative; }
.enterprise-hero::after {
  content: "ENTERPRISE"; position: absolute; right: -18px; bottom: -28px; z-index: 0;
  color: rgba(191, 214, 211, .035); font: 700 clamp(90px, 15vw, 220px)/.8 'Oswald', sans-serif;
  letter-spacing: -5px; pointer-events: none;
}
.enterprise-hero .shell { position: relative; z-index: 1; }
.enterprise-brief { transform: rotate(1.5deg); }
.enterprise-volume-scale {
  position: relative; display: flex; justify-content: space-between; gap: 12px; padding-top: 22px;
  color: var(--gold); font: 700 11px/1 'Space Mono', monospace; letter-spacing: .4px;
}
.enterprise-volume-scale::before {
  content: ""; position: absolute; top: 4px; right: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, rgba(246, 210, 85, .28), var(--gold));
}
.enterprise-volume-scale span { position: relative; }
.enterprise-volume-scale span::before {
  content: ""; position: absolute; top: -22px; left: 50%; width: 8px; height: 8px;
  border: 2px solid var(--gold); border-radius: 50%; background: #0c3d3e; transform: translateX(-50%);
}
.enterprise-intro { max-width: 760px; margin-bottom: 44px; }
.enterprise-intro h2 { margin: 18px 0; }
.enterprise-intro p { max-width: 690px; color: var(--mist); font-size: 16px; line-height: 1.75; }
.enterprise-capabilities .resource-card:nth-child(2) { transform: translateY(24px); }
.enterprise-operations { padding: 92px 0; background: #103f40; }
.enterprise-operations-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 88px; align-items: start; }
.enterprise-operations .section-heading { position: sticky; top: 110px; }
.enterprise-operations .button { justify-self: start; margin-top: 10px; }
.enterprise-track { position: relative; display: grid; gap: 12px; }
.enterprise-track::before {
  content: ""; position: absolute; left: 31px; top: 56px; bottom: 56px; width: 1px;
  background: linear-gradient(var(--gold), rgba(246, 210, 85, .08));
}
.enterprise-track article {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
  padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7, 33, 31, .46);
}
.enterprise-track article > span {
  position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid rgba(246, 210, 85, .4); border-radius: 50%; background: #103f40;
  color: var(--gold); font: 700 11px/1 'Space Mono', monospace;
}
.enterprise-track h3 { margin: 3px 0 10px; }
.enterprise-track p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.enterprise-operations .actions { justify-self: start; margin-top: 10px; }
.enterprise-operations .actions .button { margin-top: 0; }
.enterprise-request-section .partner-split { align-items: start; }
.enterprise-request-section .check-list { margin-bottom: 22px; }
.enterprise-next { display: flex; align-items: end; justify-content: space-between; gap: 48px; }
.enterprise-next .actions { flex: 0 0 auto; }

/* Hero ------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; padding: 52px 0 70px; }
.hero .eyebrow { margin-bottom: 26px; }
.hero h1 { margin: 0 0 22px; color: #F4F9F7; }
.hero .lead { margin-bottom: 32px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 38px; margin-top: 46px; }
.hero-stats strong {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 27px; line-height: 1.1; color: var(--gold);
}
.hero-stats span {
  display: block; margin-top: 4px;
  font: 400 10px/1.4 'Space Mono', monospace; letter-spacing: 1.5px;
  color: var(--muted); text-transform: uppercase;
}

/* Passport card ---------------------------------------------------------- */
.passport-wrap { justify-self: center; transform: rotate(3deg); }
.passport-card {
  position: relative; overflow: hidden;
  width: 344px; padding: 30px 26px 26px;
  border-radius: 18px; border: 1px solid rgba(246, 210, 85, .32);
  background: linear-gradient(155deg, var(--panel), var(--panel-2));
  box-shadow: 0 50px 90px -34px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.passport-card::after {
  content: ""; position: absolute; inset: 11px; border-radius: 12px;
  border: 1px solid rgba(240, 138, 60, .3); pointer-events: none;
}
.passport-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passport-kicker {
  font: 400 9.5px/1.4 'Space Mono', monospace; letter-spacing: 2.4px;
  color: var(--gold); text-transform: uppercase;
}
.passport-email {
  margin: 18px 0 4px; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 26px; letter-spacing: .5px; color: #EAF3F2; text-transform: none;
}
.passport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 20px 0 22px; }
.passport-grid span {
  display: block; font: 400 8.5px/1 'Space Mono', monospace;
  letter-spacing: 1.6px; color: #6F9895; text-transform: uppercase;
}
.passport-grid strong { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; color: #DCEAE8; }
.machine-strip {
  padding: 9px 0; border-top: 1px dashed rgba(207, 230, 224, .2); border-bottom: 1px dashed rgba(207, 230, 224, .2);
  font: 400 8.5px/1.4 'Space Mono', monospace; letter-spacing: 1px; color: #5F8886;
  white-space: nowrap; overflow: hidden;
}
.passport-foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 14px;
  font: 400 8.5px/1 'Space Mono', monospace; letter-spacing: 1.2px;
  color: #7FA6A4; text-transform: uppercase;
}
.stamp {
  position: absolute; z-index: 2; border-radius: 8px; padding: 5px 10px;
  font: 700 9.5px/1 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase;
}
.stamp.gold { border: 2px solid rgba(246, 210, 85, .75); color: #F4DE86; }
.stamp.rust { border: 2px solid rgba(240, 85, 47, .75); color: #F3835F; }

.status-pill {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px;
  font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase;
}
.status-pill.good { color: #0A2E22; background: #7FD1A6; }
.status-pill.bad { color: #2E0B06; background: #F0846A; }
.status-pill.warn { color: #2E2205; background: var(--gold); }
.status-pill.temp { color: #E7F2F1; background: rgba(207, 230, 224, .2); }

/* Machine readable marquee ---------------------------------------------- */
@keyframes tb-mrz { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mrz {
  position: relative; overflow: hidden; white-space: nowrap;
  border-top: 2px solid var(--orange); border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(4, 20, 20, .5);
}
.mrz span {
  display: inline-block; padding: 10px 0;
  font: 400 12px/1 'Space Mono', monospace; letter-spacing: 2px; color: #5F8886;
  animation: tb-mrz 34s linear infinite;
}

/* Signal band ------------------------------------------------------------ */
.signal-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px;
  padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.signal-band div { display: flex; align-items: baseline; gap: 8px; }
.signal-band b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .8px; text-transform: uppercase; color: #EAF3F2; }
.signal-band span { font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mint); }
.signal-band i { width: 5px; height: 5px; border-radius: 50%; background: rgba(246, 210, 85, .5); }

/* Card grids ------------------------------------------------------------- */
.card-grid { display: grid; gap: 16px; margin-top: 46px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative; overflow: hidden;
  padding: 28px 24px 26px;
  border: 1px solid var(--line); border-radius: 4px 22px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 25px 55px -38px rgba(0, 0, 0, .9);
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-7px); border-color: rgba(242, 200, 91, .42); }
.card .index {
  position: absolute; top: 20px; right: 22px;
  font: 700 11px/1 'Space Mono', monospace; letter-spacing: 1px; color: rgba(246, 210, 85, .55);
}
.icon-chip {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px;
  border-radius: 12px; border: 1px solid rgba(246, 210, 85, .32);
  background: rgba(246, 210, 85, .08);
  font: 700 13px/1 'Space Mono', monospace; color: var(--gold);
}
.card h3 { margin-bottom: 10px; color: #EAF3F2; }
.card p { color: #A6C4C1; font-size: 13.5px; line-height: 1.6; }
.card small {
  display: block; margin-top: 18px;
  font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.4px;
  color: var(--mint); text-transform: uppercase;
}
.status-card .status-pill { margin-bottom: 18px; }

.check-list { display: grid; gap: 12px; margin: 26px 0; padding: 0; list-style: none; color: #C9DCD9; font-size: 14px; line-height: 1.55; }
.check-list li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; }
.check-list li::before { content: "↗"; color: var(--orange); font: 700 13px/1.5 'Space Mono', monospace; }

/* 5 stage verification process ------------------------------------------- */
/* A rail of five gates on the left drives a single detail panel on the right.
   Without JS every panel renders stacked, so the content is never hidden. */
.stages { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; align-items: start; margin-top: 46px; }
.stage-rail { position: sticky; top: 110px; display: grid; gap: 16px; }
.stage-rail-label {
  color: #9DBDB8; font: 700 10.5px/1 'Space Mono', monospace;
  letter-spacing: 1.6px; text-transform: uppercase;
}
.stage-list { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Runs behind the number chips so the five gates read as one route. */
.stage-list::before {
  content: ""; position: absolute; top: 34px; bottom: 34px; left: 40px;
  border-left: 1px dashed rgba(207, 230, 224, .22);
}
.stage-tab {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center;
  padding: 15px 18px; text-align: left; cursor: pointer; color: inherit;
  border: 1px solid var(--line); border-radius: 4px 16px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .6), rgba(8, 42, 40, .66));
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.stage-tab:hover { transform: translateX(4px); border-color: rgba(242, 200, 91, .42); }
.stage-num {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid rgba(246, 210, 85, .32);
  background: rgba(8, 42, 40, .92);
  font: 700 13px/1 'Space Mono', monospace; color: var(--gold);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.stage-tab-text { display: grid; gap: 5px; }
.stage-tab strong {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .6px; text-transform: uppercase; color: #EAF3F2;
}
.stage-tab-text span {
  font: 400 9.5px/1.4 'Space Mono', monospace; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
.stage-tab.is-active {
  border-color: rgba(246, 210, 85, .55);
  background: linear-gradient(160deg, rgba(240, 138, 60, .2), rgba(8, 42, 40, .92));
}
.stage-tab.is-active .stage-num {
  border-color: transparent; color: #23180A;
  background: linear-gradient(140deg, var(--gold), var(--gold-2));
}
.stage-tab.is-active .stage-tab-text span { color: var(--mint); }

.stage-panels { display: grid; gap: 16px; }
.stage-panel {
  position: relative; overflow: hidden;
  padding: 34px 34px 26px;
  border: 1px solid var(--line); border-radius: 4px 28px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9);
}
/* Oversized gate numeral, same watermark treatment as the pricing hero. */
.stage-panel::before {
  content: attr(data-numeral); position: absolute; top: -26px; right: 18px;
  font: 700 180px/1 'Oswald', sans-serif; color: rgba(244, 240, 230, .04);
  pointer-events: none;
}
.stage-panel-top {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px dashed rgba(207, 230, 224, .2);
  font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold);
}
.stage-panel .icon-chip { position: relative; }
.stage-panel h3 { position: relative; margin-bottom: 14px; font-size: 27px; }
.stage-panel > p { position: relative; max-width: 560px; color: var(--mist); font-size: 15.5px; line-height: 1.72; }
.stage-checks {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 26px 0; padding: 0; list-style: none;
}
.stage-checks li {
  display: grid; grid-template-columns: 15px 1fr; gap: 10px; align-items: baseline;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 4px 12px 4px 4px;
  background: rgba(15, 56, 54, .68);
  color: #C9DCD9; font-size: 13.5px; line-height: 1.5;
}
.stage-checks li::before { content: "\2713"; color: var(--orange); font: 700 12px/1.4 'Space Mono', monospace; }
.stage-panel .machine-strip { position: relative; }
.stage-panel .passport-foot { position: relative; }
@keyframes tb-stage-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js .stage-panel:not([hidden]) { animation: tb-stage-in .32s ease both; }
/* Emptied once the panels are moved inline for the stacked layout. */
.stage-panels:empty { display: none; }

/* Split panels ----------------------------------------------------------- */
.panel {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
  padding: 46px; border: 1px solid var(--line); border-radius: 4px 28px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9);
}
.split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }

.upload-box {
  display: grid; justify-items: center; gap: 10px; padding: 38px 26px;
  border: 1px dashed rgba(246, 210, 85, .42); border-radius: 14px;
  background: rgba(10, 46, 49, .55); text-align: center;
}
.upload-box .upload-icon { font-size: 26px; color: var(--gold); }
.upload-box strong { font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1.6px; text-transform: uppercase; color: #EAF3F2; }
.upload-box span { font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.4px; color: var(--muted); }
.manifest-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.manifest-stats div { padding: 16px 18px; border: 1px solid var(--line); background: rgba(15, 56, 54, .68); }
.manifest-stats span { display: block; font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.manifest-stats b { display: block; margin-top: 7px; font: 600 22px/1 'Oswald', sans-serif; color: var(--gold); }

.route-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 30px;
  font: 700 10px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase;
}
.route-list span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(15, 56, 54, .68); color: #C7DBD8; }
.route-list b { color: var(--orange); }

.code-window {
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(4, 24, 24, .82); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.code-top {
  display: flex; align-items: center; gap: 7px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: rgba(10, 46, 49, .6);
}
.code-top i { width: 9px; height: 9px; border-radius: 50%; background: rgba(207, 230, 224, .25); }
.code-top i:first-child { background: var(--orange); }
.code-top i:nth-child(2) { background: var(--gold); }
.code-top small { margin-left: auto; font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.2px; color: var(--muted); }
.code-window pre { margin: 0; padding: 24px 22px; overflow-x: auto; }
.code-window code { font: 400 13px/1.8 'Space Mono', monospace; color: #CFE6E0; }
.code-window code i { color: var(--mint); font-style: normal; }
.code-window code b { color: var(--gold); font-weight: 400; }

/* The Hub ---------------------------------------------------------------- */
.dashboard {
  display: grid; grid-template-columns: 220px 1fr; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .96));
  box-shadow: 0 46px 90px -46px rgba(0, 0, 0, .9);
}
.dash-side { padding: 26px 20px; border-right: 1px solid var(--line); background: rgba(4, 24, 24, .45); }
.dash-side .side-brand { font: 700 11px/1 'Space Mono', monospace; letter-spacing: 1.6px; color: var(--gold); text-transform: uppercase; }
.dash-side nav { display: grid; gap: 4px; margin-top: 24px; }
.dash-side a { padding: 9px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #9CBAB7; }
.dash-side a.active { color: #EAF3F2; background: rgba(246, 210, 85, .1); }
.dash-main { padding: 26px 28px 30px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-head small { font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.dash-head h3 { margin-top: 9px; font-size: 25px; text-transform: none; color: #EAF3F2; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 14px; }
.metric-row div { padding: 16px 17px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 56, 54, .55); }
.metric-row span { display: block; font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.metric-row b { display: block; margin: 9px 0 5px; font: 600 25px/1 'Oswald', sans-serif; color: #EAF3F2; }
.metric-row small { font-size: 10.5px; color: var(--mint); }
.dash-lower { display: grid; grid-template-columns: 1.5fr .8fr; gap: 12px; }
.dash-lower > div { padding: 18px 19px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 56, 54, .55); }
.dash-lower span { font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 108px; margin-top: 18px; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--gold-2), rgba(240, 85, 47, .55)); }
.health-card { display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; }
.ring {
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: conic-gradient(var(--gold) 0 92%, rgba(207, 230, 224, .14) 92% 100%);
}
.ring b {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: #0A3236; font: 600 24px/1 'Oswald', sans-serif; color: var(--gold);
}
.health-card small { font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: 1.2px; color: var(--mint); text-transform: uppercase; }

/* Continuous clearance --------------------------------------------------- */
.pulse-stage { position: relative; display: grid; place-items: center; min-height: 340px; }
.pulse-core {
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid rgba(246, 210, 85, .5);
  background: radial-gradient(circle at 50% 40%, rgba(246, 210, 85, .22), rgba(10, 50, 54, .9));
  font: 700 26px/1 'Oswald', sans-serif; letter-spacing: 2px; color: var(--gold);
}
.pulse-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(111, 166, 162, .32);
}
.pulse-ring.r1 { width: 210px; height: 210px; }
.pulse-ring.r2 { width: 300px; height: 300px; border-style: dashed; }
.pulse-node {
  position: absolute; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(10, 46, 49, .92);
  font: 700 9.5px/1 'Space Mono', monospace; letter-spacing: 1.4px; color: #C7DBD8; text-transform: uppercase;
}
.pulse-node.n1 { top: 6%; left: 50%; transform: translateX(-50%); }
.pulse-node.n2 { top: 50%; right: 2%; transform: translateY(-50%); }
.pulse-node.n3 { bottom: 6%; left: 50%; transform: translateX(-50%); }
.pulse-node.n4 { top: 50%; left: 2%; transform: translateY(-50%); }

/* Security --------------------------------------------------------------- */
.security-card b {
  display: block; margin-bottom: 16px;
  font: 700 11px/1 'Space Mono', monospace; letter-spacing: 1.4px; color: var(--gold);
}

/* Integrations ----------------------------------------------------------- */
.integration-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin: 46px 0 0; padding: 0; list-style: none;
}
.integration-tile {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 18px;
  border: 1px solid var(--line); border-radius: 4px 16px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 25px 55px -38px rgba(0, 0, 0, .9);
  transition: transform .25s ease, border-color .25s ease;
}
.integration-tile:hover { transform: translateY(-6px); border-color: rgba(242, 200, 91, .42); }
.integration-mark {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid rgba(246, 210, 85, .32);
  background: rgba(246, 210, 85, .08);
  font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: .4px; color: var(--gold);
}
.integration-name { min-width: 0; }
.integration-tile b {
  display: block;
  font: 600 15px/1.1 'Oswald', sans-serif; letter-spacing: .6px;
  text-transform: uppercase; color: #EAF3F2;
}
.integration-tile small {
  display: block; margin-top: 5px;
  font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.3px;
  color: var(--mint); text-transform: uppercase;
}
.integration-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px 24px; margin-top: 34px;
}

/* Included band (cream) -------------------------------------------------- */
.cream-band { padding: 100px 0; color: #17322f; background: var(--cream); }
.cream-band h2 { color: var(--deep); }
.cream-band .section-heading p { color: #4e5f5b; }
.included-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 44px; }
.included-grid span {
  display: flex; align-items: center; gap: 9px; padding: 16px 17px;
  border: 1px solid #d5d7cc; background: #f8f5ec;
  font-size: 13.5px; font-weight: 700; color: #223c39;
}
.included-grid span::before {
  content: "✓"; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 23px; height: 23px; border-radius: 50%;
  color: #f8f5ec; background: #267060; font-size: 13px; font-weight: 800;
}
.cream-note { margin-top: 26px; color: #5c6763; font-size: 13.5px; line-height: 1.65; }

/* Auto-pilot ------------------------------------------------------------- */
.refill-card {
  display: grid; justify-items: center; gap: 6px; padding: 32px 28px; text-align: center;
  border: 1px solid rgba(246, 210, 85, .32); border-radius: 16px;
  background: rgba(10, 46, 49, .7);
}
.refill-card small { font: 700 11.5px/1.4 'Space Mono', monospace; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; }
.refill-card strong { font: 600 34px/1 'Oswald', sans-serif; letter-spacing: .5px; color: #EAF3F2; }
.refill-card .divider { width: 46px; height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.refill-card .price-note { margin: 10px 0 20px; font: 700 12px/1.4 'Space Mono', monospace; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }

/* Final CTA -------------------------------------------------------------- */
.final-cta { padding: 92px 0; color: #2a2114; background: var(--gold); }
.final-cta h2 { color: #2a2114; }
.final-cta p { max-width: 590px; margin: 18px 0 0; line-height: 1.6; }
.final-cta .eyebrow { color: #7a3a12; }
.final-cta .eyebrow::before { background: #b44628; }
.cta-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.final-cta .button.ghost { color: #2a2114; border-color: rgba(42, 33, 20, .45); }
.final-cta .button.ghost:hover { border-color: #2a2114; }

/* Footer ----------------------------------------------------------------- */
.site-footer { padding: 66px 0 0; background: #041d1c; color: #8FB0AD; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.footer-grid .brand-name { font-size: 40px; }
.footer-grid p { margin-top: 18px; font: 700 11.5px/1.8 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: #8FB0AD; }
.footer-col { display: grid; align-content: start; gap: 11px; }
.footer-col strong { font: 700 11.5px/1.3 'Space Mono', monospace; letter-spacing: 1.3px; color: var(--gold); text-transform: uppercase; }
.footer-col a, .footer-col span { font-size: 13.5px; color: #B4CFCC; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  margin-top: 56px; padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font: 400 11.5px/1.6 'Space Mono', monospace; letter-spacing: .8px; text-transform: uppercase; color: #8FB0AD;
}
.footer-bottom .shell { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Phone number ------------------------------------------------------------
   One toll-free line surfaced in three registers: the footer strip on every
   page, a display block on the contact and enterprise routes, and inline
   inside body copy. */
.footer-phone { color: var(--gold); white-space: nowrap; }
.footer-phone span { border-bottom: 1px solid rgba(246, 210, 85, .4); }
.footer-phone:hover { color: var(--cream); }
.footer-phone:hover span { border-bottom-color: var(--cream); }
.footer-brand-phone a {
  font: 700 20px/1.2 'Oswald', sans-serif; letter-spacing: 1.4px; color: var(--gold);
}
.footer-brand-phone a:hover { color: var(--cream); }
.footer-grid .footer-brand-phone { margin-top: 12px; }

.inline-phone { color: var(--gold); font-weight: 700; white-space: nowrap; border-bottom: 1px solid rgba(246, 210, 85, .45); }
.inline-phone:hover { color: var(--orange); border-bottom-color: var(--orange); }

.direct-line {
  display: grid; gap: 6px; padding: 20px 22px;
  border: 1px solid rgba(246, 210, 85, .32); border-radius: 14px;
  background: rgba(7, 33, 31, .55);
}
.direct-line-label { color: var(--gold); font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.direct-line-number {
  font: 700 clamp(28px, 3.4vw, 40px)/1.05 'Oswald', sans-serif; letter-spacing: 1.5px;
  color: var(--cream); white-space: nowrap;
}
.direct-line-number:hover { color: var(--gold); }
.direct-line-note { color: var(--mist); font-size: 13px; }

/* Legal documents -------------------------------------------------------- */
.legal-page { background: var(--cream); color: #193b38; }
.legal-hero {
  position: relative; overflow: hidden; padding: 92px 0 82px;
  background:
    linear-gradient(120deg, rgba(4, 29, 28, .98), rgba(10, 63, 61, .94)),
    radial-gradient(circle at 82% 20%, rgba(246, 210, 85, .18), transparent 32%);
  border-bottom: 1px solid rgba(246, 210, 85, .28);
}
.legal-hero::after {
  content: "DPA"; position: absolute; right: max(28px, calc((100vw - 1320px) / 2)); bottom: -42px;
  color: rgba(246, 210, 85, .055); font: 700 clamp(130px, 19vw, 270px)/.8 'Oswald', sans-serif;
  letter-spacing: -8px; pointer-events: none;
}
.legal-terms .legal-hero::after { content: "TOU"; }
.legal-privacy .legal-hero::after { content: "PP"; }
.legal-hero-inner { position: relative; z-index: 1; }
.legal-hero h1 {
  max-width: 820px; margin: 22px 0 0; color: var(--cream);
  font: 600 clamp(54px, 8vw, 106px)/.88 'Oswald', sans-serif; letter-spacing: -2px; text-transform: uppercase;
}
.legal-updated {
  display: inline-block; margin: 34px 0 0; padding: 10px 14px;
  border: 1px solid rgba(246, 210, 85, .35); border-radius: 3px;
  color: #DCEAE8; font: 700 11px/1.3 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase;
}
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 820px); gap: clamp(48px, 8vw, 112px); padding-top: 82px; padding-bottom: 110px; }
.legal-rail { position: relative; }
.legal-rail-card {
  position: sticky; top: 108px; padding: 26px 24px 24px;
  border: 1px solid rgba(25, 59, 56, .15); border-radius: 3px 24px 3px 3px;
  background: #eae4d7; box-shadow: 0 18px 45px rgba(21, 52, 49, .08);
}
.legal-rail-card p { margin: 18px 0 22px; color: #4f6865; font-size: 13px; line-height: 1.75; }
.legal-rail-card a {
  color: #a83d24; font: 700 11px/1.3 'Space Mono', monospace; letter-spacing: .7px;
  text-transform: uppercase; border-bottom: 1px solid rgba(168, 61, 36, .3); padding-bottom: 4px;
}
.legal-document { min-width: 0; }
.legal-document > p:first-child { margin-top: 0; font-size: 18px; line-height: 1.85; color: #244a46; }
.legal-document section { margin-top: 58px; scroll-margin-top: 110px; }
.legal-document h2 {
  margin: 0 0 22px; padding-top: 20px; border-top: 1px solid rgba(25, 59, 56, .16);
  color: #0c3533; font: 600 clamp(28px, 4vw, 40px)/1.08 'Oswald', sans-serif; letter-spacing: -.3px;
}
.legal-document h3 {
  margin: 30px 0 8px; color: #a83d24;
  font: 700 12px/1.4 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase;
}
.legal-document p { margin: 0 0 18px; color: #405d5a; font-size: 15px; line-height: 1.85; }
.legal-document strong { color: #173f3b; }
.legal-document a { color: #a83d24; border-bottom: 1px solid rgba(168, 61, 36, .3); }
.legal-document a:hover { color: #0c3533; border-bottom-color: #0c3533; }
.legal-document ul, .legal-document ol { display: grid; gap: 10px; margin: 4px 0 24px; padding-left: 24px; color: #405d5a; font-size: 15px; line-height: 1.7; }
.legal-document li::marker { color: #d95431; font-family: 'Space Mono', monospace; font-weight: 700; }
.legal-annex { padding: 34px; border: 1px solid rgba(25, 59, 56, .15); border-radius: 3px 24px 3px 3px; background: #eae4d7; }
.legal-annex + .legal-annex { margin-top: 28px; }
.legal-annex h2 { padding-top: 0; border-top: 0; }
.legal-contact { padding: 36px; border-radius: 3px 24px 3px 3px; background: #0b3434; }
.legal-contact h2 { padding-top: 0; border-top: 0; color: var(--gold); }
.legal-contact p, .legal-contact strong { color: #DCEAE8; }
.legal-contact a { color: var(--gold); border-bottom: 1px solid rgba(246, 210, 85, .35); }
.legal-contact a:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Legal tables ------------------------------------------------------------
   Retention schedules, cookie inventories and the subprocessor register are
   the only places on the site that need a plain data table on the cream
   legal field, so the styling lives with the legal document rather than with
   the dark .tier-table used by pricing. Wrapper scrolls on narrow screens. */
.legal-table-wrap { margin: 4px 0 24px; overflow-x: auto; }
.legal-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.legal-table caption {
  margin-bottom: 12px; text-align: left; color: #a83d24;
  font: 700 12px/1.4 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase;
}
.legal-table th, .legal-table td {
  padding: 12px 14px; border-bottom: 1px solid rgba(25, 59, 56, .16);
  text-align: left; vertical-align: top; font-size: 14px; line-height: 1.65; color: #405d5a;
}
.legal-table thead th {
  border-bottom: 1px solid rgba(25, 59, 56, .38); color: #0c3533;
  font: 700 11.5px/1.4 'Space Mono', monospace; letter-spacing: .9px; text-transform: uppercase;
}
.legal-table tbody th { color: #173f3b; font-weight: 700; }

/* The entity strip in the footer bottom bar carries the registered name and
   address on every page, so it is allowed to wrap onto two lines while the
   phone and back-to-top links stay on one. */
.footer-legal { max-width: 62ch; }
.footer-legal span.footer-legal-addr { display: block; text-transform: none; letter-spacing: .4px; }

/* Every page carries the same legal link strip in the bottom bar, so the
   documents are one click away from anywhere on the site rather than only
   from the pages that render the full footer grid. */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a { color: #8FB0AD; }
.footer-legal-links a:hover { color: var(--cream); }
.footer-legal-links a[aria-current="page"] { color: var(--gold); }

/* ==========================================================================
   Pricing page
   ========================================================================== */
.pricing-hero { position: relative; padding: 80px 0 56px; overflow: hidden; }
.pricing-hero::after {
  content: "05"; position: absolute; top: 10px; right: max(28px, calc((100vw - 1320px) / 2));
  font: 700 260px/1 'Oswald', sans-serif; color: rgba(244, 240, 230, .035); pointer-events: none;
}
.pricing-hero .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 80px; }
.pricing-hero h1 { max-width: 760px; margin-top: 20px; font-size: clamp(58px, 8vw, 106px); line-height: .84; letter-spacing: -2px; }
.pricing-hero h1 span { display: block; }
.hero-copy { max-width: 450px; margin-bottom: 7px; color: var(--mist); font-size: 17px; line-height: 1.7; }
.hero-copy strong { color: var(--cream); font-weight: 700; }
.route-line {
  display: flex; align-items: center; margin-top: 28px;
  font: 700 11.5px/1.5 'Space Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: #A0BFBA;
}
.route-line i {
  width: 6px; height: 6px; margin-right: 46px; border-radius: 50%;
  background: var(--orange); box-shadow: 18px 0 0 var(--gold), 36px 0 0 var(--mint);
}

.pricing-toggle {
  display: inline-flex; gap: 6px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 46, 49, .6);
}
.pricing-toggle button {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 9px;
  background: transparent; color: #B2CECB; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pricing-toggle button.active { color: #2A0E04; background: linear-gradient(135deg, var(--gold-2), var(--orange)); }

.plans-section { padding: 24px 0 84px; }
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.mode-note {
  font: 700 12px/1.6 'Space Mono', monospace; letter-spacing: 1px;
  text-transform: uppercase; color: #A0BFBA;
}

/* Calculator ------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 1.42fr .58fr; gap: 16px; margin-top: 34px; }
.calc-dial {
  padding: 34px 36px 32px;
  border: 1px solid var(--line); border-radius: 4px 28px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9);
}
.calc-dial h2 {
  margin-top: 18px; font-size: clamp(40px, 5.2vw, 62px); line-height: .92; letter-spacing: -1px;
  color: #F4F9F7; font-variant-numeric: tabular-nums;
}
.calc-dial h2 small {
  display: block; margin-top: 12px;
  font: 700 12.5px/1.3 'Space Mono', monospace; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold);
}

.volume-control { position: relative; margin: 40px 13px 0; }
.volume-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 26px; margin: 0;
  background: transparent; cursor: pointer;
}
.volume-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background:
    linear-gradient(90deg, var(--orange), var(--gold)) 0 / var(--fill, 50%) 100% no-repeat,
    rgba(207, 230, 224, .16);
}
.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px;
  border: 3px solid #07211F; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(246, 210, 85, .2), 0 6px 16px -4px rgba(0, 0, 0, .8);
  transition: transform .18s ease, box-shadow .18s ease;
}
.volume-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.volume-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 8px rgba(246, 210, 85, .22); }
.volume-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(207, 230, 224, .16); }
.volume-range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.volume-range::-moz-range-thumb {
  width: 20px; height: 20px; border: 3px solid #07211F; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(246, 210, 85, .2);
}

.volume-scale { position: relative; height: 38px; margin-top: 6px; }
.scale-mark {
  position: absolute; top: 8px; transform: translateX(-50%);
  font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: .8px;
  color: #9FBDB9; white-space: nowrap; transition: color .2s ease;
}
.scale-mark::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 5px; background: rgba(207, 230, 224, .22);
}
.scale-mark.is-active { color: var(--gold); font-weight: 700; }
.scale-mark.is-active::before { background: var(--gold); height: 7px; }

.mile-equation {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  margin: 32px 0 0; padding: 20px; border: 1px dashed rgba(246, 210, 85, .34); border-radius: 4px 22px 4px 4px;
  background: rgba(10, 46, 49, .5);
}
.mile-equation strong { font: 600 20px/1.15 'Oswald', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #EAF3F2; }
.mile-equation span { font: 700 19px/1 'Space Mono', monospace; color: var(--orange); }

/* Boarding pass ---------------------------------------------------------- */
.calc-ticket {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; padding: 32px 30px 30px;
  border: 1px solid rgba(246, 210, 85, .34); border-radius: 4px 28px 4px 4px;
  background: linear-gradient(155deg, var(--panel), var(--panel-2));
  box-shadow: 0 40px 84px -34px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.calc-ticket::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--orange));
}
.ticket-kicker {
  font: 700 11px/1.5 'Space Mono', monospace; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}
.ticket-price { display: flex; align-items: flex-start; gap: 3px; margin-top: 16px; }
.ticket-price sup { margin-top: 9px; font: 700 19px/1 'Space Mono', monospace; color: var(--gold); }
.ticket-price strong {
  font: 600 clamp(46px, 4.6vw, 58px)/.9 'Oswald', sans-serif; letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}
.ticket-price small { align-self: flex-end; margin: 0 0 6px 4px; font-size: 12.5px; color: #A6C4C1; }
.ticket-price.call strong { font-size: clamp(34px, 3.4vw, 42px); letter-spacing: .2px; text-transform: uppercase; }
/* The quote-only tier has no figure to show, so the price slot is the link
   through to the enterprise page. */
.ticket-price.call a {
  color: var(--gold); border-bottom: 2px solid rgba(246, 210, 85, .38);
  transition: color .2s ease, border-color .2s ease;
}
.ticket-price.call a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.ticket-rate {
  margin-top: 10px; font: 700 12px/1.4 'Space Mono', monospace;
  letter-spacing: .9px; text-transform: uppercase; color: var(--mint);
}
.ticket-perforation {
  height: 1px; margin: 24px -30px 22px;
  background: repeating-linear-gradient(90deg, rgba(207, 230, 224, .32) 0 6px, transparent 6px 12px);
}
.ticket-list { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; color: #C6D9D6; font-size: 13.5px; line-height: 1.5; }
.ticket-list li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.ticket-list li::before { content: "↗"; color: var(--orange); font: 700 13px/1.3 'Space Mono', monospace; }
.calc-ticket .button { width: 100%; margin-top: auto; }
.ticket-note {
  margin: 12px 0 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: #A8C4C1;
}
.ticket-kicker a { color: inherit; border-bottom: 1px solid rgba(246, 210, 85, .45); }
.ticket-kicker a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.ticket-note a, .fact small a { color: var(--gold); border-bottom: 1px solid rgba(246, 210, 85, .4); }
.ticket-note a:hover, .fact small a:hover { color: var(--cream); border-bottom-color: var(--cream); }

/* Included facts --------------------------------------------------------- */
.calc-includes-label { margin-top: 46px; }
.calc-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.fact {
  padding: 18px 19px; border: 1px solid var(--line); border-radius: 2px 14px 2px 2px;
  background: rgba(15, 56, 54, .6);
  transition: border-color .2s ease, transform .2s ease;
}
.fact:hover { transform: translateY(-4px); border-color: rgba(242, 200, 91, .38); }
.fact span { font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.fact b {
  display: block; margin-top: 9px; font: 600 23px/1.15 'Oswald', sans-serif;
  letter-spacing: .4px; color: #EAF3F2; font-variant-numeric: tabular-nums;
}
.fact b em { font: 400 11.5px/1.3 'Space Mono', monospace; letter-spacing: .9px; text-transform: uppercase; color: #A0BFBA; }
.fact.on b { color: var(--gold); }
.fact small { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: #A8C4C1; }
.fine-print { margin-top: 26px; max-width: 900px; color: #A2BFBB; font-size: 13.5px; line-height: 1.7; }

/* Comparison matrix ------------------------------------------------------ */
.compare {
  --cmp-label: 300px;
  margin-top: 40px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px 24px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .9), rgba(8, 42, 40, .94));
}
.compare-row {
  display: grid; grid-template-columns: var(--cmp-label) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(207, 230, 224, .08);
}
.compare-row:last-child { border-bottom: 0; }
.compare-marks {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid rgba(207, 230, 224, .08);
}

/* Head row */
.compare-head { background: rgba(4, 24, 24, .55); border-bottom-color: rgba(246, 210, 85, .3); }
.compare-head-label {
  align-self: center; padding: 18px 22px;
  font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.vendor {
  display: grid; justify-items: center; align-content: start; gap: 8px;
  padding: 18px 10px 16px; text-align: center;
}
.vendor-logo {
  width: 34px; height: 34px; border-radius: 8px;
  object-fit: contain; background: rgba(255, 255, 255, .92); padding: 3px;
}
.vendor-name {
  font: 600 12.5px/1.25 'Oswald', sans-serif; letter-spacing: .7px;
  text-transform: uppercase; color: #CFE1DE;
}
.vendor.is-us { background: rgba(246, 210, 85, .09); }
.vendor.is-us .vendor-name { color: var(--gold); }
/* Our passport mark is drawn in light strokes, so it needs a dark chip. Its
   portrait shape gets a taller box, pulled back to the row's logo height. */
.vendor.is-us .vendor-logo, .mark.is-us .mark-logo {
  background: rgba(5, 30, 29, .9); border: 1px solid rgba(246, 210, 85, .3);
}
.vendor.is-us .vendor-logo { width: 32px; height: 42px; margin: -4px 0; padding: 4px; }
.vendor-tag {
  font: 700 9.5px/1 'Space Mono', monospace; letter-spacing: .9px;
  text-transform: uppercase; color: var(--amber);
}

/* Feature rows */
.compare-label { margin: 0; }
.compare-trigger {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px;
  align-items: center; width: 100%; height: 100%;
  padding: 18px 20px; border: 0; background: transparent; cursor: pointer;
  text-align: left; transition: background .2s ease;
}
.compare-chevron {
  grid-row: span 2; width: 20px; height: 20px;
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round;
  transition: transform .25s ease;
}
.compare-name {
  font: 600 17px/1.15 'Oswald', sans-serif; letter-spacing: .6px;
  text-transform: uppercase; color: #EAF3F2;
}
.compare-hint {
  grid-column: 2;
  font: 700 10.5px/1 'Space Mono', monospace; letter-spacing: .9px;
  text-transform: uppercase; color: var(--amber);
}
.compare-trigger:hover { background: rgba(246, 210, 85, .07); }
.compare-trigger:hover .compare-name { color: var(--gold); }
.compare-feature.is-open .compare-chevron { transform: rotate(180deg); }
.compare-feature.is-open .compare-trigger { background: rgba(246, 210, 85, .07); }
.compare-feature.is-open .compare-name { color: var(--gold); }

.mark {
  display: grid; place-items: center; padding: 18px 10px;
  border-left: 1px solid rgba(207, 230, 224, .05);
}
.mark:first-child { border-left: 0; }
.mark.is-us { background: rgba(246, 210, 85, .09); }
.mark-icon {
  width: 26px; height: 26px;
  fill: none; stroke-width: 2.4; stroke-linecap: round;
}
.mark.yes .mark-icon { stroke: var(--gold); }
.mark.no .mark-icon { stroke: rgba(163, 192, 189, .55); }
.mark-logo { display: none; }
/* The vendor name only shows once the head row drops away on small screens. */
.mark-name {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Dropdown detail */
.compare-detail {
  grid-column: 1 / -1; padding: 4px 26px 28px;
  border-top: 1px solid rgba(246, 210, 85, .18);
  background: rgba(4, 24, 24, .4);
}
.compare-detail[hidden] { display: none; }
.compare-detail p {
  max-width: 860px; margin: 20px 0 0;
  color: var(--mist); font-size: 15px; line-height: 1.8;
}
.compare-detail-list {
  display: grid; gap: 11px; max-width: 860px; margin: 18px 0 0;
  padding: 0; list-style: none;
  color: #C9DCD9; font-size: 14.5px; line-height: 1.6;
}
.compare-detail-list li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; }
.compare-detail-list li::before {
  content: ">"; color: var(--orange);
  font: 700 13px/1.6 'Space Mono', monospace;
}
.compare-detail-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font: 700 11.5px/1 'Space Mono', monospace; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(246, 210, 85, .4); padding-bottom: 5px;
}
.compare-detail-link:hover { color: var(--cream); border-bottom-color: var(--cream); }
.compare-note { margin-top: 20px; color: #A2BFBB; font-size: 13px; line-height: 1.7; }

/* Tier table ------------------------------------------------------------- */
.tier-mode-bar { margin-top: 28px; }
.tier-table-wrap {
  margin-top: 36px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 4px 24px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .9), rgba(8, 42, 40, .94));
}
.tier-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.tier-table th, .tier-table td {
  padding: 15px 18px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(207, 230, 224, .08);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.tier-table thead th {
  padding: 0; border-bottom: 1px solid rgba(246, 210, 85, .3);
  background: rgba(4, 24, 24, .55);
}
.tier-table thead th:first-child {
  padding: 16px 18px; font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); text-align: left;
}
.tier-table thead th button {
  display: block; width: 100%; padding: 16px 16px; border: 0;
  background: transparent; color: #CFE1DE; cursor: pointer;
  font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .6px; text-align: right;
  transition: color .2s ease, background .2s ease;
}
.tier-table thead th button i {
  display: block; margin-top: 7px; font: 700 11px/1 'Space Mono', monospace;
  letter-spacing: .8px; text-transform: uppercase; color: var(--amber); font-style: normal;
}
.tier-table thead th button:hover { color: var(--cream); background: rgba(246, 210, 85, .07); }
.tier-table thead th.is-active button { color: var(--gold); background: rgba(246, 210, 85, .11); }
/* The quote-only column heads to the enterprise page rather than loading a
   price into the calculator, so it is a link wearing the header's clothes. */
.tier-table thead th .tier-quote {
  display: block; padding: 16px 16px; color: var(--gold);
  font: 600 20px/1 'Oswald', sans-serif; letter-spacing: .6px; text-align: right;
  transition: color .2s ease, background .2s ease;
}
.tier-table thead th .tier-quote:hover { color: var(--cream); background: rgba(246, 210, 85, .11); }
.tier-table thead th.is-active .tier-quote { background: rgba(246, 210, 85, .11); }
.tier-table tbody th {
  text-align: left; font-weight: 700; color: #D3E3E0;
  position: sticky; left: 0; background: #0a2f2e;
}
.tier-table tbody td { color: #B4CFCC; }
.tier-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.tier-table td.is-active { background: rgba(246, 210, 85, .07); color: #F1F7F5; }
.tier-table .row-strong td { font: 700 15.5px/1 'Space Mono', monospace; color: var(--gold); }
.tier-table .row-strong th { color: #F1F7F5; }
.tier-table tbody tr:last-child th, .tier-table tbody tr:last-child td { border-bottom: 0; }

/* Trailblaze Guarantee --------------------------------------------------- */
.guarantee-method { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; margin-top: 74px; }
.guarantee-method h3 { margin: 18px 0 14px; font-size: 27px; line-height: 1.08; }
.guarantee-method > div > p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.guarantee-steps { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.guarantee-steps::before {
  content: ""; position: absolute; left: 46px; top: 50px; bottom: 50px; width: 1px;
  background: linear-gradient(var(--gold), rgba(246, 210, 85, .08));
}
.guarantee-steps li {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; align-items: start;
  padding: 22px 26px; border: 1px solid var(--line); border-radius: 2px 18px 2px 2px;
  background: rgba(7, 33, 31, .46);
}
.guarantee-steps li > span {
  position: relative; z-index: 1; display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid rgba(246, 210, 85, .4); border-radius: 50%; background: #103f40;
  color: var(--gold); font: 700 11px/1 'Space Mono', monospace;
}
.guarantee-steps p { margin: 9px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.guarantee-steps em {
  display: block; margin-top: 10px; color: var(--mint); font-style: normal;
  font: 400 12.5px/1.65 'Space Mono', monospace;
}

/* Stacked flight log ----------------------------------------------------- */
/* The five steps are condensed into a deck: each one sticks under the last so
   the cards gather and overlap as the page scrolls, rather than running as a
   tall list. script.js scales and dims the buried cards to sell the depth;
   without JS the sticky stack still reads correctly on its own. */
.guarantee-steps.is-stacked {
  --stack-top: 92px; --stack-step: 15px;
  display: block; gap: 0;
  padding-bottom: 6px;
}
.guarantee-steps.is-stacked::before { display: none; }
.guarantee-steps.is-stacked li {
  position: sticky; top: calc(var(--stack-top) + var(--i) * var(--stack-step));
  display: block; margin: 0 0 13px; padding: 0;
  border: 0; border-radius: 0; background: none;
}
.guarantee-steps.is-stacked li:last-child { margin-bottom: 0; }
.guarantee-steps.is-stacked .step-card {
  display: grid; grid-template-columns: 38px 1fr; gap: 20px; align-items: start;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: 2px 18px 2px 2px;
  /* Opaque so a buried card never shows through the one covering it. */
  background: linear-gradient(150deg, #10403E, #0a2b2a 62%);
  box-shadow: 0 24px 48px -34px rgba(0, 0, 0, .95);
  transform-origin: 50% 0;
  /* Short, because script.js rewrites these every scroll frame — a long one
     would leave the cards visibly lagging the pointer. */
  transition: transform .18s linear, opacity .18s linear;
  will-change: transform;
}
.guarantee-steps.is-stacked .step-card > span {
  position: relative; z-index: 1; display: grid; width: 38px; height: 38px; place-items: center;
  border: 1px solid rgba(246, 210, 85, .4); border-radius: 50%; background: #103f40;
  color: var(--gold); font: 700 11px/1 'Space Mono', monospace;
}
.guarantee-steps.is-stacked h4 {
  margin: 8px 0 0; color: #F1F7F5;
  font: 600 19px/1.15 'Oswald', sans-serif; letter-spacing: .5px; text-transform: uppercase;
}
.guarantee-steps.is-stacked p { margin-top: 8px; font-size: 14px; }
.guarantee-steps.is-stacked em { margin-top: 8px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .guarantee-steps.is-stacked .step-card { transition: none; }
}

.guarantee-results { margin-top: 74px; }
.guarantee-results h3 { margin: 0; font-size: 27px; line-height: 1.08; }
/* The results table is static content rather than the interactive rate card,
   so the header cells carry their own padding instead of a button's. */
.tier-table.is-static { min-width: 900px; }
.tier-table.is-static thead th {
  padding: 18px; text-align: right; color: #CFE1DE;
  font: 600 19px/1.1 'Oswald', sans-serif; letter-spacing: .6px; text-transform: uppercase;
}
.tier-table.is-static thead th:first-child {
  font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1px;
}
.tier-table.is-static thead th.is-active { color: var(--gold); background: rgba(246, 210, 85, .11); }
.tier-table .group-row th {
  position: static; padding: 0; background: rgba(4, 24, 24, .5); color: var(--mint);
  font: 700 11px/1.4 'Space Mono', monospace; letter-spacing: 1.2px; text-transform: uppercase;
}
/* Each group of metrics is a drop down: collapsed, it shows one headline row
   plus a faded sliver of the row beneath so the rest is visibly there. The
   collapse is gated on `.js` so the whole table still reads without scripts. */
.group-toggle {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 18px; border: 0; background: transparent; cursor: pointer;
  color: var(--mint); font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left; transition: color .2s ease, background .2s ease;
}
.group-toggle:hover { color: var(--gold); background: rgba(246, 210, 85, .06); }
.group-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.group-chevron {
  flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.group-toggle[aria-expanded="true"] .group-chevron { transform: rotate(-180deg); }
.group-toggle-hint { margin-left: auto; color: var(--muted); letter-spacing: 1px; }
.group-toggle:hover .group-toggle-hint { color: var(--amber); }
.group-toggle[aria-expanded="false"] .hint-open,
.group-toggle[aria-expanded="true"] .hint-closed { display: none; }
html:not(.js) .group-chevron, html:not(.js) .group-toggle-hint { display: none; }
html:not(.js) .group-toggle { cursor: default; }

.js .tier-table tbody tr[data-group]:not([data-row]):not(.is-open) { display: none; }
.js .tier-table tbody tr[data-row="peek"]:not(.is-open) { cursor: pointer; }
.js .tier-table tbody tr[data-row="peek"]:not(.is-open) th,
.js .tier-table tbody tr[data-row="peek"]:not(.is-open) td {
  padding-top: 8px; padding-bottom: 0; border-bottom: 0; line-height: 1.15;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 96%);
}
.js .tier-table tbody tr[data-row="peek"]:not(.is-open) th { color: #9DB8B5; }
.js .tier-table tbody tr[data-row="peek"]:not(.is-open) td { color: #7C9C99; }
.js .tier-table tbody tr[data-row="peek"]:not(.is-open):hover th,
.js .tier-table tbody tr[data-row="peek"]:not(.is-open):hover td { color: #C9DBD8; }
.guarantee-verdict { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.guarantee-verdict article {
  padding: 24px; border: 1px solid var(--line); border-radius: 2px 18px 2px 2px;
  background: rgba(15, 56, 54, .6);
}
.guarantee-verdict p { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.guarantee-pledge {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center;
  margin-top: 26px; padding: 46px; border: 1px solid rgba(246, 210, 85, .34);
  border-radius: 4px 28px 4px 4px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .94), rgba(8, 42, 40, .95));
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, .9);
}
.guarantee-pledge h3 { margin: 18px 0 16px; font-size: 31px; line-height: 1.05; }
.guarantee-pledge p { margin: 0 0 14px; color: #C6DCD9; font-size: 15px; line-height: 1.75; }
.guarantee-pledge p:last-child { margin-bottom: 0; }
.guarantee-seal {
  justify-self: center; display: grid; place-content: center; gap: 7px; text-align: center;
  width: 196px; height: 196px; border-radius: 50%; transform: rotate(-11deg);
  border: 2px solid rgba(246, 210, 85, .6);
  box-shadow: inset 0 0 0 6px rgba(246, 210, 85, .1);
}
.guarantee-seal b { font: 700 23px/1 'Oswald', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.guarantee-seal span { font: 700 9.5px/1.4 'Space Mono', monospace; letter-spacing: 1.6px; text-transform: uppercase; color: #F4DE86; }
.guarantee-seal i { font: 400 9.5px/1.4 'Space Mono', monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mint); font-style: normal; }

@media (min-width: 1181px) {
  .guarantee-method > .reveal:first-child { position: sticky; top: 96px; }
}
@media (max-width: 1180px) {
  .guarantee-method { grid-template-columns: 1fr; gap: 32px; }
  .guarantee-verdict { grid-template-columns: 1fr; }
  .guarantee-steps.is-stacked { --stack-top: 104px; }
}
@media (max-width: 900px) {
  .guarantee-pledge { grid-template-columns: 1fr; gap: 34px; padding: 34px 26px; }
  .guarantee-seal { justify-self: start; width: 168px; height: 168px; }
  .guarantee-method, .guarantee-results { margin-top: 56px; }
}
@media (max-width: 600px) {
  .guarantee-steps li { grid-template-columns: 36px 1fr; gap: 16px; padding: 20px 18px; }
  .guarantee-steps li > span { width: 36px; height: 36px; font-size: 10px; }
  .guarantee-steps::before { left: 36px; }
  .guarantee-steps.is-stacked { --stack-top: 96px; --stack-step: 11px; }
  .guarantee-steps.is-stacked li { padding: 0; }
  .guarantee-steps.is-stacked .step-card { grid-template-columns: 34px 1fr; gap: 15px; padding: 18px; }
  .guarantee-steps.is-stacked .step-card > span { width: 34px; height: 34px; font-size: 10px; }
  .guarantee-steps.is-stacked h4 { font-size: 17px; }
  .guarantee-method h3, .guarantee-results h3, .guarantee-pledge h3 { font-size: 24px; }
}

/* Reveal ----------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal.delay-1 { transition-delay: .12s; }
.js .reveal.delay-2 { transition-delay: .24s; }

/* Back to top ------------------------------------------------------------ */
/* A long scroll needs a short way home. The control stays out of the way until
   the reader is a full viewport past the hero, then holds the bottom-right
   corner as a passport-stamp square rather than a second orange CTA, so it
   never competes with the buttons in the page. */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  display: grid; place-items: center; gap: 3px;
  width: 56px; height: 56px; padding: 0;
  border: 1px solid rgba(246, 210, 85, .36); border-radius: 14px;
  color: var(--gold);
  background: rgba(10, 50, 54, .84);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .9);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease,
    border-color .2s ease, box-shadow .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  border-color: rgba(246, 210, 85, .82);
  box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .95);
}
.to-top.is-visible:hover { transform: translateY(-2px); }
.to-top svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.to-top span {
  color: var(--mist);
  font: 700 8.5px/1 'Space Mono', monospace;
  letter-spacing: 1.4px; text-transform: uppercase;
}
@media (max-width: 600px) {
  .to-top { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .to-top svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --shell: min(1320px, calc(100% - 40px)); }
  .stages { grid-template-columns: minmax(260px, 320px) 1fr; }
  .stage-panel { padding: 30px 26px 24px; }
  .card-grid.three { grid-template-columns: repeat(2, 1fr); }
  .card-grid.four { grid-template-columns: repeat(2, 1fr); }
  .included-grid { grid-template-columns: repeat(3, 1fr); }
  .integration-grid { grid-template-columns: repeat(3, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc-facts { grid-template-columns: repeat(2, 1fr); }
  .dashboard { grid-template-columns: 1fr; }
  .dash-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .dash-side nav { grid-template-columns: repeat(4, 1fr); }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .compare { --cmp-label: 232px; }
  .compare-name { font-size: 15.5px; }
  .vendor-name { font-size: 11px; }
  .vendor-logo { width: 30px; height: 30px; }
}

@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 40px; }
  .legal-rail-card { position: static; }
}
@media (max-width: 1120px) {
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(7, 33, 31, .9); backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(207, 230, 224, .09);
  }
  .nav { gap: 12px; padding: 14px 0; }
  [id] { scroll-margin-top: 96px; }
  .nav-links { display: none; }
  .nav-links.open {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 30;
    display: grid; gap: 4px; padding: 12px; max-height: calc(100dvh - 130px); overflow-y: auto;
    border: 1px solid var(--line); border-radius: 14px;
    background: rgba(6, 37, 35, .98); box-shadow: 0 34px 64px -30px rgba(0, 0, 0, .92);
  }
  .nav-trigger { width: 100%; min-height: 46px; justify-content: space-between; padding: 0 14px; color: #EAF3F2; }
  .nav-trigger::after { display: none; }
  .nav-menu, .resource-menu {
    position: static; width: auto; padding: 0 0 8px 12px; grid-template-columns: 1fr;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none !important;
  }
  .nav-menu a { min-height: 48px; padding: 10px 14px; border-left: 1px solid rgba(246, 210, 85, .22); border-radius: 0 10px 10px 0; }
  .nav-links.open > a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
  .nav-links.open .button { margin-top: 8px; justify-content: center; }
  .menu-btn { display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; }
}
@media (max-width: 900px) {
  /* Too narrow for a rail beside a panel: the gates stack and script.js moves
     each panel inline under its own gate, so the section reads as an accordion. */
  .stages { grid-template-columns: 1fr; gap: 18px; }
  .stage-rail { position: static; }
  .stage-tab:hover { transform: none; }
  .stage-list { gap: 10px; }
  .stage-list li .stage-panel { margin-top: 10px; }

  /* The header follows the page down so navigation is always a thumb away on a
     long scroll, and anchor targets clear the bar they'd otherwise hide under. */
  .site-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(7, 33, 31, .88);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(207, 230, 224, .09);
  }
  .nav { gap: 12px; padding: 14px 0; }
  [id] { scroll-margin-top: 96px; }

  .nav-links { display: none; }
  /* Anchored to `.nav` (the shell) rather than a fixed pixel offset, so the
     panel tracks the header height instead of guessing it. */
  .nav-links.open {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 30;
    display: grid; gap: 2px; padding: 12px;
    border: 1px solid var(--line); border-radius: 14px;
    background: rgba(6, 37, 35, .97); backdrop-filter: blur(18px);
    box-shadow: 0 34px 64px -30px rgba(0, 0, 0, .92);
    max-height: calc(100dvh - 150px); overflow-y: auto;
  }
  /* Full-width rows at a 48px minimum give every link a real touch target. */
  .nav-links.open > a {
    display: flex; align-items: center; min-height: 48px; padding: 0 14px;
    border-radius: 10px; font-size: 15px;
  }
  .nav-links.open > a:not(.button):not(:last-child) {
    border-bottom: 1px solid rgba(207, 230, 224, .07);
  }
  .nav-links.open .button { margin-top: 10px; justify-content: center; }
  .menu-btn { display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; }

  .hero, .split, .panel, .pricing-hero .hero-grid, .resource-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .resource-grid { grid-template-columns: 1fr; }
  .enterprise-capabilities .resource-card:nth-child(2) { transform: none; }
  .enterprise-operations-grid { grid-template-columns: 1fr; gap: 46px; }
  .enterprise-operations .section-heading { position: static; }
  .enterprise-next { align-items: start; flex-direction: column; }
  .passport-wrap { transform: none; }
  .passport-card { width: min(344px, 100%); }
  .dash-lower { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 72px 0; }
  .brand-mark { width: 46px; }
  .brand { gap: 11px; }
  .brand-name { font-size: 32px; letter-spacing: 2px; }
  /* Let the tagline wrap instead of forcing one unbreakable line that pushed
     the whole lockup past the viewport edge. */
  .brand-tag { font-size: 8.5px; letter-spacing: .7px; white-space: normal; text-align: center; }

  /* The comparison drops its head row and becomes one card per tool, with
     each vendor's logo carrying the column label. */
  .compare-head { display: none; }
  .compare-row { grid-template-columns: minmax(0, 1fr); }
  .compare-marks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0; border-top: 1px solid rgba(207, 230, 224, .07);
  }
  .compare-trigger { padding: 20px 18px 17px; }
  .compare-name { font-size: 17px; }
  .mark {
    justify-items: center; align-content: center; gap: 8px;
    padding: 15px 8px; border-left: 1px solid rgba(207, 230, 224, .05);
  }
  .mark:nth-child(3n + 1) { border-left: 0; }
  .mark:nth-child(n + 4) { border-top: 1px solid rgba(207, 230, 224, .05); }
  .mark-logo {
    display: block; width: 26px; height: 26px; border-radius: 7px;
    object-fit: contain; background: rgba(255, 255, 255, .92); padding: 2px;
  }
  .mark.is-us .mark-logo { width: 24px; height: 32px; margin: -3px 0; padding: 3px; }
  .mark-icon { width: 20px; height: 20px; }
  .mark-name {
    position: static; width: auto; height: auto; margin: 0; clip: auto;
    overflow: visible; white-space: normal; text-align: center;
    font: 600 10.5px/1.2 'Oswald', sans-serif; letter-spacing: .5px;
    text-transform: uppercase; color: #B7CFCC;
  }
  .mark.is-us .mark-name { color: var(--gold); }
  .compare-detail { padding: 2px 20px 24px; }
}
@media (max-width: 720px) {
  :root { --shell: min(1320px, calc(100% - 28px)); }
  .stage-checks { grid-template-columns: 1fr; }
  .stage-panel { padding: 26px 22px 22px; }
  .stage-panel::before { font-size: 120px; top: -16px; }
  .stage-panel h3 { font-size: 23px; }
  .card-grid.three, .card-grid.four, .included-grid,
  .manifest-stats, .metric-row, .footer-grid { grid-template-columns: 1fr; }
  .integration-grid { grid-template-columns: 1fr 1fr; }
  .integration-foot .button { width: 100%; justify-content: center; }
  .calc-facts { grid-template-columns: 1fr; }
  .calc-dial { padding: 26px 22px 24px; }
  .calc-ticket { padding: 26px 22px 24px; }
  .ticket-perforation { margin-left: -22px; margin-right: -22px; }
  .scale-mark.minor { display: none; }
  .tier-table { min-width: 860px; }
  .tier-table th, .tier-table td { padding: 13px 14px; font-size: 13.5px; }
  .tier-table tbody th { white-space: normal; min-width: 148px; }
  .tier-table thead th button { padding: 14px; font-size: 18px; }
  .group-toggle { padding: 13px 14px; gap: 9px; }
  .group-toggle-hint { letter-spacing: .6px; }
  .mile-equation { gap: 10px; padding: 16px; }
  .mile-equation strong { font-size: 15px; }
  .panel { padding: 30px 22px; }
  .pricing-hero { padding: 56px 0 44px; }
  .pricing-hero::after { font-size: 150px; }
  .cream-band { padding: 72px 0; }
  .dash-side nav { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 24px; }
  .final-cta .button { width: 100%; }
  .compare { margin-top: 30px; }
  .compare-name { font-size: 15.5px; }
  .mark { padding: 13px 5px; gap: 7px; }
  .mark-name { font-size: 9.5px; letter-spacing: .3px; }
  .compare-detail p { font-size: 14.5px; }
  .compare-detail-list { font-size: 14px; }
}

/* Phones ----------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Display type is set with `clamp()` minimums tuned for tablets, so the
     forced <br> line breaks ran past the viewport on a phone. These lower the
     floor without touching the desktop ceiling. */
  h1 { font-size: clamp(33px, 9vw, 46px); }
  h2 { font-size: clamp(27px, 7.6vw, 34px); }
  .pricing-hero h1 { font-size: clamp(40px, 11vw, 62px); letter-spacing: -1px; }
  .lead { font-size: 15.5px; }
  .section-heading p { font-size: 15px; }

  /* The eyebrow labels are long single lines; let them break over two rows and
     square the pill off enough that a wrapped one still reads as a badge. */
  .eyebrow { font-size: 11px; letter-spacing: 1.1px; }
  .eyebrow::before { width: 16px; }
  .eyebrow.pill { border-radius: 14px; padding: 8px 14px; }

  /* A long unbroken token (an address, an API key) can't force a sideways
     scroll on a screen this narrow. */
  .page-field { overflow-wrap: break-word; }

  .section { padding: 56px 0; }
  .section-tight { padding: 44px 0; }
  .hero { padding: 34px 0 52px; }
  .hero-stats { gap: 20px 28px; margin-top: 34px; }
  .hero-stats strong { font-size: 22px; }
  .final-cta { padding: 64px 0; }
  .enterprise-operations { padding: 64px 0; }
  .enterprise-track article { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px 18px; }
  .enterprise-track::before { left: 37px; }
  .enterprise-next .actions, .enterprise-next .button { width: 100%; }
  .site-footer { padding: 48px 0 0; }
  .footer-bottom { margin-top: 36px; }
  .footer-phone { padding: 4px 0; font-size: 12.5px; }
  .direct-line { padding: 18px; }

  /* Footer links were 13.5px text with no padding — too small to hit reliably.
     Vertical padding turns each into a ~36px row without bloating the column. */
  .footer-col { gap: 3px; }
  .footer-col a, .footer-col span { display: block; padding: 9px 0; font-size: 14px; }
  .legal-hero { padding: 68px 0 60px; }
  .legal-hero h1 { letter-spacing: -1px; }
  .legal-layout { padding-top: 54px; padding-bottom: 72px; }
  .legal-document section { margin-top: 44px; }
  .legal-annex, .legal-contact { padding: 26px 22px; }

  /* Two full-width rows beat a single row that overflowed at 320px. */
  .pricing-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pricing-toggle button { padding: 0 10px; font-size: 13px; }
  .mode-bar { gap: 14px; }

  .dashboard { border-radius: 14px; }
  .dash-main { padding: 22px 18px 24px; }
  .dash-side { padding: 20px 16px; }
  .calc-dial h2 { font-size: clamp(34px, 10vw, 44px); }

  /* Scale the decorative orbit so its rings and labels stay inside the column. */
  .pulse-stage { min-height: 272px; }
  .pulse-core { width: 88px; height: 88px; font-size: 21px; }
  .pulse-ring.r1 { width: 166px; height: 166px; }
  .pulse-ring.r2 { width: 240px; height: 240px; }
  .pulse-node { padding: 7px 10px; font-size: 8.5px; letter-spacing: 1px; }
}

/* Notched phones in landscape: keep content clear of the rounded corners. */
@media (max-width: 900px) {
  @supports (padding: env(safe-area-inset-left)) {
    .shell {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

@media (max-width: 400px) {
  /* Below this the tagline can't stay legible and still leave room for the
     wordmark, so the wordmark wins — the footer still carries the tagline. */
  .brand-tag { display: none; }
  .brand-name { font-size: 29px; letter-spacing: 1.5px; }
  .brand-mark { width: 40px; }
  .hero-stats { gap: 18px; }
  .mile-equation { gap: 8px; padding: 14px; }
}

/* Touch devices ---------------------------------------------------------- */
/* Hover lifts have no way to un-hover on a touchscreen, so a tapped card stays
   stuck in its raised state. Restrict the motion to pointers that can leave. */
@media (hover: none) {
  .card:hover, .fact:hover, .button:hover {
    transform: none;
    box-shadow: 0 14px 30px -12px rgba(240, 85, 47, .65);
  }
  .card:hover { box-shadow: 0 25px 55px -38px rgba(0, 0, 0, .9); }
  .button.ghost:hover, .button.light:hover, .button.dark:hover { box-shadow: none; }
  .tier-table tbody tr:hover td { background: transparent; }
}

/* The tier table scrolls sideways by design; this hint only shows on the narrow
   screens where the full rate card can't fit. */
.scroll-hint { display: none; }
@media (max-width: 1080px) {
  .scroll-hint {
    display: block; margin-top: 18px;
    font: 700 11px/1.6 'Space Mono', monospace; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--mint);
  }
}

/* Partner program -------------------------------------------------------- */
/* The partner page reuses the resource hero, the numbered track, and the
   check list; everything below is the material it adds — the earnings ledger,
   the rate card, the tab groups, the application form, and the FAQ. */
.partner-hero .lead { max-width: 620px; }
.partner-ledger { display: grid; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 33, 31, .5); }
.partner-ledger-label { font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.partner-ledger-value { font: 700 42px/1 'Oswald', sans-serif; letter-spacing: .5px; color: var(--gold); }
.partner-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; align-items: end; height: 84px; }
.partner-bars i { display: block; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--gold-2), rgba(240, 85, 47, .55)); }
.partner-ledger-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 14px; border-top: 1px dashed rgba(246, 210, 85, .22); }
.partner-ledger-foot span { display: grid; gap: 5px; font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.partner-ledger-foot b { font: 600 16px/1 'Oswald', sans-serif; color: #EAF3F2; }

.partner-band-heading { margin-bottom: 36px; }
.partner-note { display: block; margin-top: 30px; text-align: center; }
.partner-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 62px; align-items: start; }
.partner-subhead { margin: 32px 0 4px; font-size: 15.5px; color: var(--gold); }
.partner-commission .actions { margin-top: 8px; }

.partner-payout { display: grid; gap: 12px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(15, 74, 80, .8), rgba(7, 33, 31, .9)); box-shadow: 0 34px 74px -44px rgba(0, 0, 0, .9); }
.partner-payout h3 { margin-bottom: 8px; font-size: 22px; }
.partner-tier { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 13px; background: rgba(7, 33, 31, .5); }
.partner-tier b { display: block; font: 600 16px/1.2 'Oswald', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #EAF3F2; }
.partner-tier small { display: block; margin-top: 6px; font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.partner-tier span { font: 700 26px/1 'Oswald', sans-serif; color: var(--gold); }
.partner-tier:last-of-type span { background: linear-gradient(120deg, var(--gold), var(--amber) 45%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.partner-payout-note { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.65; }

/* Tab groups ------------------------------------------------------------- */
/* Every panel renders stacked until the script collapses the group, so the
   copy is still readable with JavaScript unavailable. */
.partner-tabs { margin-top: 44px; }
.partner-tablist { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.partner-tab {
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(9, 48, 49, .5); color: var(--muted);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.partner-tab:hover { color: #EAF3F2; border-color: rgba(246, 210, 85, .42); }
.partner-tab[aria-selected="true"] { color: #2A0E04; border-color: transparent; background: linear-gradient(135deg, var(--gold-2), var(--orange)); }
.partner-panels { display: grid; gap: 12px; }
.partner-panel { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: rgba(9, 48, 49, .5); }
.partner-panel[hidden] { display: none; }
.js .partner-panel:not([hidden]) { animation: tb-stage-in .28s ease both; }
.partner-panel-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.partner-panel-body.single { grid-template-columns: minmax(0, 720px); }
.partner-panel h3 { margin-bottom: 12px; font-size: 23px; }
.partner-panel p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.partner-panel p + p { margin-top: 14px; }
.partner-panel .check-list { margin-bottom: 0; }
.partner-panel .actions { margin-top: 20px; }

.partner-banner {
  display: grid; gap: 12px; align-content: center; min-height: 200px; padding: 26px;
  border: 1px solid rgba(246, 210, 85, .3); border-radius: 16px;
  background: linear-gradient(145deg, #0F4A50, #07211F);
}
.partner-banner-mark { font: 700 11px/1 'Space Mono', monospace; letter-spacing: 2.4px; color: var(--gold); }
.partner-banner strong { font: 600 25px/1.1 'Oswald', sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #EAF3F2; }
.partner-banner-cta { font-weight: 800; font-size: 13px; color: var(--orange); }
.partner-visual {
  display: grid; gap: 14px; place-content: center; justify-items: center; min-height: 200px;
  border: 1px dashed rgba(246, 210, 85, .28); border-radius: 16px; background: rgba(7, 33, 31, .55);
}
.partner-visual-play { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--gold-2), var(--orange)); color: #2A0E04; font-size: 17px; }
.partner-visual-label { font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.partner-link-sample { display: grid; gap: 11px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 33, 31, .62); }
.partner-link-sample span { font: 400 9.5px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.partner-link-sample code { font: 700 15px/1.5 'Space Mono', monospace; color: #EAF3F2; overflow-wrap: anywhere; }
.partner-link-sample b { color: var(--gold); }

/* Application form ------------------------------------------------------- */
.partner-form-card { padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(15, 74, 80, .8), rgba(7, 33, 31, .92)); box-shadow: 0 34px 74px -44px rgba(0, 0, 0, .9); }
.partner-form-card h3 { margin: 12px 0 24px; font-size: 26px; }
.partner-honeypot { position: absolute; left: -9999px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; margin: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 700 10.5px/1 'Space Mono', monospace; letter-spacing: 1.3px; text-transform: uppercase; color: var(--mint); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(7, 33, 31, .62); color: #EAF3F2;
  font: 500 14.5px/1.5 'Montserrat', system-ui, sans-serif;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: #6F9895; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(246, 210, 85, .34); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(7, 33, 31, .85); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.field select {
  appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F6D255' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:invalid { color: #6F9895; }
.field select option { color: #EAF3F2; background: #0b3434; }
.form-consent { margin: 20px 0 22px; }
.form-consent label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--muted); font-size: 13px; line-height: 1.6; cursor: pointer; }
.form-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange); cursor: pointer; }
.form-consent a { color: var(--gold); border-bottom: 1px solid rgba(246, 210, 85, .4); }
.form-consent a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.partner-form .button { width: 100%; }
.form-status { margin-top: 16px; font: 700 12px/1.6 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--mint); }
.form-status:empty { display: none; }
.form-status.is-error { color: #F0846A; }
.form-status.is-done { color: var(--gold); }
.partner-form-done { display: grid; gap: 14px; padding: 30px 26px; border: 1px dashed rgba(246, 210, 85, .35); border-radius: 16px; background: rgba(7, 33, 31, .55); text-align: center; }
.partner-form-done strong { font: 600 24px/1.15 'Oswald', sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.partner-form-done p { color: var(--mist); font-size: 14.5px; line-height: 1.65; }

/* FAQ -------------------------------------------------------------------- */
.partner-faq .section-heading { margin-bottom: 40px; }
.faq-list { display: grid; gap: 10px; max-width: 940px; }
.faq-item { border: 1px solid rgba(23, 50, 47, .16); border-radius: 16px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.faq-item.is-open { border-color: rgba(180, 70, 40, .38); background: #fffdf7; }
.faq-label { margin: 0; }
.faq-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 24px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25;
  letter-spacing: .4px; text-transform: uppercase; color: var(--deep);
  transition: color .2s ease;
}
.faq-trigger:hover, .faq-item.is-open .faq-trigger { color: #b44628; }
.faq-chevron { flex: 0 0 auto; width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.faq-item.is-open .faq-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.faq-answer { padding: 0 24px 24px; }
.faq-answer[hidden] { display: none; }
.faq-answer p { max-width: 760px; color: #4e5f5b; font-size: 15px; line-height: 1.75; }

@media (max-width: 1120px) {
  .partner-split { grid-template-columns: 1fr; gap: 44px; }
  .partner-panel-body { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .partner-panel { padding: 26px 22px; }
  .partner-form-card { padding: 26px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .partner-payout { padding: 26px 22px; }
  .partner-tier { flex-wrap: wrap; gap: 10px; }
  .partner-tablist { gap: 7px; }
  .partner-tab { padding: 11px 15px; font-size: 12px; }
  .faq-trigger { padding: 20px 18px; font-size: 16px; }
  .faq-answer { padding: 0 18px 20px; }
  .partner-banner strong { font-size: 21px; }
}
@media (max-width: 600px) {
  .partner-ledger-value { font-size: 34px; }
  .partner-note { text-align: left; }
  .partner-form .button, .partner-audience .actions .button { width: 100%; }
}
/* The ledger card carries its own framed panel, so the route card's dashed
   inset would land 5px outside it and read as a doubled border. */
.partner-hero .route-card::before { display: none; }

/* ==========================================================================
   Integrations page
   ========================================================================== */
.integrations-hero .section-heading { max-width: 840px; }
/* The shared resource hero adds its own h1 margins; inside a centred
   section-heading those stack on top of the grid gap, so reset them. */
.integrations-hero h1 { max-width: none; margin: 0; }
.integrations-hero .lead { max-width: 680px; }

/* Departure → transit → arrival strip standing in for a hero image. */
.connect-banner {
  margin-top: 54px; padding: 26px 28px 18px;
  border: 1px solid var(--line); border-radius: 6px 26px 6px 6px;
  background: linear-gradient(160deg, rgba(20, 69, 67, .92), rgba(8, 42, 40, .94));
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.connect-route {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center; gap: 18px; margin-bottom: 20px;
}
.connect-node {
  display: grid; gap: 7px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(15, 56, 54, .68); text-align: center;
}
.connect-node.is-core {
  border-color: rgba(246, 210, 85, .38);
  background: rgba(246, 210, 85, .08);
}
.connect-label {
  font: 700 9px/1 'Space Mono', monospace; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}
.connect-node b {
  font: 600 19px/1.1 'Oswald', sans-serif; letter-spacing: .6px;
  text-transform: uppercase; color: #EAF3F2;
}
.connect-node small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.connect-arrow { color: var(--orange); font: 700 17px/1 'Space Mono', monospace; text-align: center; }

.integrations-list { padding-top: 84px; }
.integrations-custom { padding-top: 40px; }

/* Two editorial notes on the cream band. */
.feature-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 46px; }
.feature-note { padding: 30px 30px 32px; border: 1px solid #d5d7cc; background: #f8f5ec; }
.feature-mark {
  display: block; margin-bottom: 20px;
  font: 700 11px/1 'Space Mono', monospace; letter-spacing: 1.4px; color: #b44628;
}
.feature-note h3 { margin-bottom: 12px; color: var(--deep); }
.feature-note p { color: #4e5f5b; font-size: 14.5px; line-height: 1.75; }
.notes-cta { display: flex; justify-content: center; margin-top: 40px; padding-top: 40px; border-top: 1px solid #d5d7cc; }

.integrations-why .why-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font: 700 12px/1 'Space Mono', monospace; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
}
.integrations-why .why-link:hover { color: var(--gold-2); }

@media (max-width: 900px) {
  .connect-route { grid-template-columns: 1fr; gap: 12px; }
  .connect-arrow { transform: rotate(90deg); }
  .feature-notes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .connect-banner { padding: 20px 18px 14px; }
  .connect-node { padding: 16px 18px; }
  .feature-note { padding: 24px 22px 26px; }
  .integrations-list { padding-top: 62px; }
  .notes-cta .button { width: 100%; }
}

/* ==========================================================================
   Careers — open roles and application
   ========================================================================== */
.roles-section { padding-top: 20px; }
.roles-section .section-heading { margin-bottom: 42px; }
.role-list { display: grid; gap: 12px; }
.role-item {
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(150deg, rgba(15, 74, 80, .42), rgba(7, 33, 31, .72));
  transition: border-color .2s ease, background .2s ease;
}
.role-item:hover { border-color: rgba(246, 210, 85, .3); }
.role-item.is-open { border-color: rgba(240, 85, 47, .5); background: linear-gradient(150deg, rgba(15, 74, 80, .62), rgba(7, 33, 31, .86)); }
.role-label { margin: 0; }
.role-trigger {
  display: flex; align-items: center; gap: 24px; width: 100%;
  padding: 26px 28px; border: 0; border-radius: 18px;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.role-headline { display: grid; gap: 9px; flex: 1 1 auto; }
.role-code { color: var(--gold); font: 700 10.5px/1 'Space Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
.role-name { font: 600 24px/1.2 'Oswald', sans-serif; letter-spacing: .4px; text-transform: uppercase; }
.role-item.is-open .role-name, .role-trigger:hover .role-name { color: var(--gold); }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.role-tags span {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--mist); font: 500 11.5px/1.35 'Montserrat', system-ui, sans-serif;
}
.role-chevron {
  flex: 0 0 auto; width: 11px; height: 11px; margin-right: 4px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .2s ease;
}
.role-item.is-open .role-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.role-detail { padding: 0 28px 28px; }
.role-detail[hidden] { display: none; }
.role-detail-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; margin-bottom: 24px; padding-top: 24px; border-top: 1px dashed rgba(207, 230, 224, .18); }
.role-block { display: grid; gap: 12px; align-content: start; }
.role-block-label { color: var(--mint); font: 700 10.5px/1 'Space Mono', monospace; letter-spacing: 1.3px; text-transform: uppercase; }
.role-block p { margin: 0; color: var(--mist); font-size: 15px; line-height: 1.7; }
.role-focus { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.role-focus li { display: grid; gap: 4px; padding-left: 18px; position: relative; }
.role-focus li::before { content: "→"; position: absolute; left: 0; top: 1px; color: var(--orange); font: 700 13px/1.4 'Space Mono', monospace; }
.role-focus strong { font: 600 14px/1.4 'Montserrat', system-ui, sans-serif; color: #EAF3F2; }
.role-focus span { color: var(--muted); font-size: 14px; line-height: 1.6; }

.careers-apply { padding-top: 40px; }
.field-hint { color: #6F9895; font-size: 10px; letter-spacing: 1px; }
.field-file .file-drop { position: relative; display: block; }
.field-file input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-height: 0; padding: 0; border: 0; border-radius: 14px;
  background: none; opacity: 0; cursor: pointer;
}
.file-drop-face {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border: 1px dashed rgba(207, 230, 224, .34); border-radius: 14px;
  background: rgba(7, 33, 31, .5); transition: border-color .2s ease, background .2s ease;
}
.field-file input[type="file"]:hover + .file-drop-face { border-color: rgba(246, 210, 85, .55); background: rgba(7, 33, 31, .72); }
.field-file input[type="file"]:focus-visible + .file-drop-face { outline: 3px solid var(--gold); outline-offset: 2px; }
.field-file.has-file .file-drop-face { border-style: solid; border-color: rgba(130, 186, 180, .6); background: rgba(15, 74, 80, .5); }
.file-drop-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(246, 210, 85, .45); border-radius: 50%;
  color: var(--gold); font: 700 16px/1 'Space Mono', monospace;
}
.file-drop-copy { display: grid; gap: 4px; min-width: 0; }
.file-drop-copy strong { font: 600 14px/1.4 'Montserrat', system-ui, sans-serif; color: #EAF3F2; overflow-wrap: anywhere; }
.file-drop-copy span { color: var(--muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .role-detail-inner { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .role-trigger { padding: 22px 20px; gap: 16px; }
  .role-name { font-size: 20px; }
  .role-detail { padding: 0 20px 24px; }
  .role-detail .button { width: 100%; }
  .careers-form .file-drop-face { padding: 16px 16px; }
}

/* Contact page ----------------------------------------------------------- */
/* The form is the point of the page, so it sits in the hero rather than at
   the bottom: intro on the left, send-us-a-message card on the right. */
.contact-hero { padding: 70px 0 54px; }
.contact-hero-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: start;
}
.contact-hero h1 { margin: 20px 0 22px; }
.contact-hero .lead { max-width: 560px; }
.contact-hero .check-list { margin: 24px 0 28px; }
.contact-hero .actions { margin-top: 0; }
.contact-form-card { position: relative; }
.contact-form-card h3 { margin: 12px 0 20px; }

.contact-routes-section { padding-top: 18px; }
.contact-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.contact-route { display: grid; align-content: start; gap: 12px; min-height: 0; }
.contact-route .index { margin-bottom: 12px; }
.contact-route h3 { margin: 0; font-size: 21px; }
.contact-route p { margin: 0; }
.route-mail {
  color: var(--gold); font: 700 13px/1.5 'Space Mono', monospace;
  overflow-wrap: anywhere; border-bottom: 1px solid rgba(246, 210, 85, .3);
  justify-self: start;
}
.route-mail:hover { color: var(--cream); border-bottom-color: var(--cream); }
.route-hours { color: #7FA3A0; font: 500 11.5px/1.5 'Space Mono', monospace; letter-spacing: .6px; }
.route-cta {
  margin-top: 4px; color: var(--mist); font-size: 13px; font-weight: 700;
  justify-self: start; cursor: pointer;
}
.route-cta:hover { color: var(--gold); }

/* Phone stays available, but below the written routes rather than ahead of them. */
.contact-talk-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.contact-talk-inner h2 { margin: 16px 0 18px; font-size: clamp(30px, 3.4vw, 42px); }
.contact-talk-inner > div > p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; max-width: 620px; }
.contact-talk-aside {
  display: grid; gap: 12px; padding: 26px 28px;
  border: 1px solid rgba(246, 210, 85, .28); border-radius: 16px; background: rgba(9, 48, 49, .5);
}
.contact-talk-label {
  color: var(--gold); font: 700 11.5px/1 'Space Mono', monospace;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.contact-talk-aside p { margin: 0; color: var(--mist); font-size: 14.5px; line-height: 1.7; }

/* Headquarters ----------------------------------------------------------- */
/* The photo is capped rather than stretched to the card beside it: it sets the
   scene, the address is the part people came for. */
.contact-hq { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 30px; align-items: start; }
.contact-hq-photo {
  position: relative; margin: 0; overflow: hidden; max-width: 400px;
  border: 1px solid var(--line); border-radius: 2px 18px 2px 2px;
  background: rgba(9, 48, 49, .5);
}
.contact-hq-photo picture { display: block; }
.contact-hq-photo img { width: 100%; height: auto; aspect-ratio: 800 / 473; object-fit: cover; }
.contact-hq-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 18px 13px;
  font: 700 11px/1.5 'Space Mono', monospace; letter-spacing: 1.1px;
  text-transform: uppercase; color: #EAF3F2;
  background: linear-gradient(180deg, transparent, rgba(3, 20, 20, .9));
}
.contact-hq-photo figcaption span { color: var(--gold); }
.contact-hq-card {
  display: grid; align-content: start; gap: 14px; padding: 28px 28px;
  border: 1px solid rgba(246, 210, 85, .28); border-radius: 16px; background: rgba(9, 48, 49, .5);
}
.contact-hq-address {
  display: grid; gap: 2px; font-style: normal;
  color: var(--mist); font-size: 14.5px; line-height: 1.6;
}
.contact-hq-address strong { color: #EAF3F2; font-size: 16px; }
.contact-hq-note { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

/* Demo request modal ----------------------------------------------------- */
/* Every page carries the same dialog so the "Request a demo" links in the nav
   and footer can open it in place; without JavaScript those links fall back to
   the #request-demo band on the contact page. */
.demo-modal {
  width: min(540px, calc(100% - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: 22px; overflow: auto;
  background: none; color: #EAF3F2;
}
.demo-modal::backdrop { background: rgba(4, 20, 19, .78); backdrop-filter: blur(3px); }
.demo-modal-card {
  position: relative; padding: 34px;
  border: 1px solid rgba(246, 210, 85, .3); border-radius: 22px;
  background: linear-gradient(150deg, rgba(15, 74, 80, .98), rgba(7, 33, 31, .99));
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, .95);
}
.demo-modal-card h2 { margin: 12px 0 12px; font-size: clamp(30px, 4vw, 40px); }
.demo-modal-lead { margin: 0 0 24px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.demo-modal-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(7, 33, 31, .6); color: var(--mist);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.demo-modal-close:hover { color: var(--gold); border-color: rgba(246, 210, 85, .6); }
.demo-modal-note { margin: 18px 0 0; color: #7FA3A0; font-size: 12px; line-height: 1.6; }
.demo-modal-note a { color: var(--gold); }
.demo-modal-note a:hover { color: var(--cream); }
.demo-modal .partner-form-done { margin-top: 4px; }

@media (max-width: 1120px) {
  .contact-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .contact-talk-inner { grid-template-columns: 1fr; gap: 28px; }
  .contact-hq { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .contact-hero { padding: 54px 0 42px; }
  .contact-routes { grid-template-columns: 1fr; }
  .contact-hero .actions .button { width: 100%; }
  .demo-modal { width: calc(100% - 20px); }
  .demo-modal-card { padding: 28px 20px; }
  .contact-talk-aside { padding: 22px 20px; }
  .contact-hq-card { padding: 22px 20px; }
}

/* ==========================================================================
   API page
   The API page is laid out as a stack of alternating "pillar" blocks — copy on
   one side, a product mock on the other — followed by the scale band, the
   security grid, and the documentation request form. Everything reuses the
   shared card, tab, code window, and form components; only the mocks and the
   stat band are specific to this page.
   ========================================================================== */
.api-hero .lead { max-width: 620px; }
.api-hero-list { max-width: 520px; margin: 24px 0 0; }

.api-pillar { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; margin-top: 76px; }
.api-pillar-title { margin: 18px 0 16px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.04; }
.api-pillar-copy { max-width: 520px; color: var(--mist); font-size: 15.5px; line-height: 1.7; }
.api-pillar .check-list { margin-bottom: 24px; }
/* The flipped block keeps the copy first in the source and swaps the columns
   with `order`, so the copy still reads first once the grid collapses to one
   column and the order is reset. */
.api-pillar-flip > *:first-child { order: 2; }
.api-pillar-flip > *:last-child { order: 1; }

/* The language samples need the full width, so that pillar stacks instead of
   splitting: heading and CTA on one row, the tab group underneath. */
.api-pillar-stack { grid-template-columns: 1fr; gap: 0; }
.api-pillar-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; }
.api-lang-tabs { margin-top: 30px; }
.api-lang-tabs .partner-panel-body { align-items: start; }
.api-lang-tabs .code-window { min-width: 0; }
.inline-code { font: 400 12.5px/1.5 'Space Mono', monospace; color: var(--gold); overflow-wrap: anywhere; }

/* API key mock ----------------------------------------------------------- */
.api-key-card {
  display: grid; gap: 14px; padding: 28px;
  border: 1px solid rgba(246, 210, 85, .28); border-radius: 20px;
  background: linear-gradient(150deg, rgba(15, 74, 80, .85), rgba(7, 33, 31, .95));
  box-shadow: 0 34px 74px -44px rgba(0, 0, 0, .9);
}
.api-key-label { font: 700 10.5px/1 'Space Mono', monospace; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.api-key-field, .api-key-secret {
  display: grid; gap: 8px; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(7, 33, 31, .6);
}
.api-key-field span, .api-key-secret span { font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.api-key-field b { font: 600 16px/1.3 'Oswald', sans-serif; letter-spacing: .4px; color: #EAF3F2; }
.api-key-secret code { font: 700 13.5px/1.4 'Space Mono', monospace; color: var(--mint); overflow-wrap: anywhere; }
.api-key-modes { display: flex; gap: 9px; }
.api-key-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.api-key-foot small { font: 400 10px/1.4 'Space Mono', monospace; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }

/* Usage mock ------------------------------------------------------------- */
.api-usage-card {
  padding: 26px 28px 28px;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, rgba(15, 74, 80, .7), rgba(7, 33, 31, .92));
  box-shadow: 0 34px 74px -44px rgba(0, 0, 0, .9);
}
.api-usage-card .dash-head h3 { text-transform: none; }
.api-usage-card .metric-row { grid-template-columns: repeat(2, 1fr); }
.api-usage-card .chart-card {
  padding: 18px 19px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(15, 56, 54, .55);
}
.api-usage-card .chart-card span { font: 400 9px/1 'Space Mono', monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

/* Built to scale --------------------------------------------------------- */
.api-scale {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
  padding: 40px 42px; border: 1px solid var(--line); border-radius: 22px;
  background: rgba(9, 48, 49, .5);
}
.api-scale h2 { margin: 16px 0 18px; font-size: clamp(30px, 3.6vw, 44px); }
.api-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.api-stats div { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 33, 31, .55); }
.api-stats strong {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1.06; letter-spacing: .5px; color: var(--gold);
}
.api-stats span {
  display: block; margin-top: 8px;
  font: 400 10px/1.4 'Space Mono', monospace; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted);
}

/* Reach panel ------------------------------------------------------------ */
/* A dot field rather than a literal map: it reads as global coverage without
   claiming a specific set of regions. */
.api-map {
  position: relative; min-height: 320px;
  border: 1px solid var(--line); border-radius: 20px;
  background-color: rgba(7, 33, 31, .5);
  background-image: radial-gradient(rgba(130, 186, 180, .3) 1.3px, transparent 1.5px);
  background-size: 16px 16px;
  overflow: hidden;
}
.api-map-pin {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(246, 210, 85, .16), 0 0 22px rgba(246, 210, 85, .5);
}
.api-map-pin:nth-child(even) { background: var(--orange); box-shadow: 0 0 0 6px rgba(240, 85, 47, .16), 0 0 22px rgba(240, 85, 47, .45); }
.api-map-label {
  position: absolute; bottom: 20px; left: 22px;
  font: 400 10px/1 'Space Mono', monospace; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}

/* Documentation request -------------------------------------------------- */
.api-docs-section .partner-split { align-items: center; }
.api-docs-section .check-list { margin-bottom: 22px; }

@media (max-width: 1120px) {
  .api-pillar, .api-scale { grid-template-columns: 1fr; gap: 40px; }
  .api-pillar-flip > *:first-child, .api-pillar-flip > *:last-child { order: 0; }
  .api-scale { padding: 32px 26px; }
}
@media (max-width: 720px) {
  .api-pillar { margin-top: 56px; }
  .api-stats { grid-template-columns: 1fr; }
  .api-map { min-height: 240px; }
}
@media (max-width: 600px) {
  .api-hero .actions .button, .api-docs-section .actions .button { width: 100%; }
  .api-key-card, .api-usage-card { padding: 22px 20px; }
  .api-usage-card .metric-row { grid-template-columns: 1fr; }
}