/* Flux marketing site — styled entirely from Positronics tokens */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--pf-sans);
  background: var(--pf-bg-base);
  color: var(--pf-text-p);
  font-size: var(--t-body-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Per-section theming (scoped token overrides) ---------- */
.theme-light {
  --pf-bg-base: #f5f7fa;
  --pf-bg-card: #ffffff;
  --pf-bg-surface: #f5f7fa;
  --pf-border: rgba(15,21,32,0.08);
  --pf-border-md: rgba(15,21,32,0.14);
  --pf-text-p: #0f1520;
  --pf-text-s: #4a5563;
  --pf-text-t: #8a93a0;
  --pf-input-border: rgba(15,21,32,.14);
  --pf-input-border-hover: rgba(15,21,32,.28);
  --pf-overlay-hover: rgba(15,21,32,.05);
  --pf-page-eyebrow-bg: rgba(0,169,232,.10);
  background: var(--pf-bg-base);
  color: var(--pf-text-p);
}
.theme-white {
  --pf-bg-base: #ffffff;
  --pf-bg-card: #f5f7fa;
  --pf-bg-surface: #f5f7fa;
  --pf-border: rgba(15,21,32,0.08);
  --pf-border-md: rgba(15,21,32,0.14);
  --pf-text-p: #0f1520;
  --pf-text-s: #4a5563;
  --pf-text-t: #8a93a0;
  --pf-input-border: rgba(15,21,32,.14);
  --pf-input-border-hover: rgba(15,21,32,.28);
  --pf-overlay-hover: rgba(15,21,32,.05);
  --pf-page-eyebrow-bg: rgba(0,169,232,.10);
  background: var(--pf-bg-base);
  color: var(--pf-text-p);
}
.theme-surface { background: var(--pf-bg-surface); }

/* Light sections: use the light-theme green so chips/checks read clearly green */
.theme-light, .theme-white {
  --pf-green: #1f8a37;
  --pf-green-dim: rgba(31, 138, 55, 0.09);
}
.theme-light .overline, .theme-white .overline { border-color: rgba(31, 138, 55, 0.35); }
.theme-sidebar { background: var(--pf-bg-sidebar); }
.theme-cyan {
  background: var(--pf-cyan);
  color: var(--pf-on-cyan);
}

/* ---------- Layout primitives ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pf-space-6); }
section { padding: 112px 0; border-top: 0.5px solid var(--pf-border); overflow: hidden; }

.overline {
  font-size: var(--t-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--pf-green);
  display: inline-block;
  background: var(--pf-green-dim);
  border: 1px solid rgba(63,185,80,.3);
  border-radius: var(--pf-radius-pill);
  padding: 5px 12px;
  margin-bottom: var(--pf-space-5);
}

h1 { font-size: var(--t-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(24px, 3vw + 8px, 42px); font-weight: 300; line-height: 1.16; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); font-weight: 500; }
.lede { color: var(--pf-text-s); font-size: 17px; max-width: 640px; }
.section-head { max-width: 940px; margin-bottom: var(--pf-space-12); }
.section-head .lede { margin-top: var(--pf-space-4); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--pf-space-2);
  font-family: var(--pf-sans);
  font-size: var(--t-body); font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--pf-radius-btn);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--pf-cyan); color: var(--pf-on-cyan); }
.btn-primary:hover { background: var(--pf-cyan-dark); }
.btn-primary:active { background: #006f9a; }
.btn-outline { background: transparent; color: var(--pf-cyan); border-color: var(--pf-cyan-border); }
.btn-outline:hover { background: var(--pf-cyan-dim); }
.btn-on-cyan { background: #ffffff; color: #006f9a; }
.btn-on-cyan:hover { background: #e6f6fd; }
.btn:focus-visible { outline: 2px solid var(--pf-cyan); outline-offset: 2px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(13,17,23,.92);
  border-bottom: 0.5px solid var(--pf-border);
  transition: background .15s ease;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-logo img { height: 24px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: var(--pf-space-6); }
.nav-links a:not(.btn) {
  color: var(--pf-text-s); text-decoration: none;
  font-size: var(--t-label); font-weight: 500;
  transition: color .15s ease;
}
.nav-links .btn { font-size: var(--t-label); padding: 6px 12px; }
.nav-links a:not(.btn):hover { color: var(--pf-text-p); }
.nav-links a.active { color: var(--pf-cyan); }
/* Hover/active underline sweep (global) */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--pf-cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav-links a:not(.btn)::after { transition: none; } }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 180px 0 120px; border-top: none; position: relative; }
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--pf-border) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--pf-border) 0.5px, transparent 0.5px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
}
.hero .wrap { position: relative; text-align: center; }

/* Node-and-line motif (echoes the Flux logo mark) */
.hero-plexus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motif-line { stroke: rgba(0,169,232,.35); stroke-width: 1.5; stroke-linecap: round; }
.motif-line.dim { stroke: rgba(255,255,255,.10); }
.motif-line.green { stroke: rgba(63,185,80,.35); }
.motif-node { fill: var(--pf-cyan); opacity: .8; }
.motif-node.ring { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.motif-node.dim { fill: rgba(255,255,255,.25); }
.motif-node.green { fill: var(--pf-green); }
.motif-node.green-ring { fill: none; stroke: rgba(63,185,80,.55); stroke-width: 1.5; }

.steps-connector { display: block; width: 100%; height: 24px; margin-bottom: var(--pf-space-5); }
.steps-connector .motif-line { stroke: rgba(0,169,232,.30); }
@media (max-width: 860px) { .steps-connector { display: none; } }
.hero h1 { font-weight: 200; }
.hero h1 .line { display: block; }
.hero h1 .accent { color: var(--pf-cyan); }
.hero .lede { margin: var(--pf-space-6) auto 0; color: var(--pf-text-p); }
.hero-cred { margin-top: var(--pf-space-5); color: var(--pf-text-s); font-size: var(--t-body-sm); }
.hero-cred strong { color: var(--pf-text-p); font-weight: 500; }
.cred-logo { display: inline-flex; align-items: center; gap: 6px; vertical-align: -2px; }
.hero-ctas { display: flex; gap: var(--pf-space-3); justify-content: center; margin-top: var(--pf-space-8); }

/* ---------- Browser frame ---------- */
.browser {
  margin-top: 72px;
  border: 0.5px solid var(--pf-border-md);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-bg-card);
  overflow: hidden;
  text-align: left;
}
.hero .browser {
  max-width: 880px;
  margin-left: auto; margin-right: auto;
}
.hero .browser-viewport { max-height: 480px; overflow: hidden; }
.browser-bar {
  display: flex; align-items: center; gap: var(--pf-space-3);
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--pf-border);
  background: var(--pf-bg-surface);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-border-md); }
.browser-url {
  font-family: var(--pf-mono); font-size: var(--t-mono-sm);
  color: var(--pf-text-s);
  background: var(--pf-bg-base);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  padding: 4px 12px;
}
.browser img { display: block; width: 100%; height: auto; }

/* ---------- Problem section (light) ---------- */
.problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pf-card-gap); }
@media (max-width: 860px) { .problem-cards { grid-template-columns: 1fr; } }
.p-card {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-card);
  padding: var(--pf-space-6);
}
.p-card .icon {
  width: 36px; height: 36px; border-radius: var(--pf-radius-btn);
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-red-dim); color: var(--pf-red);
  margin-bottom: var(--pf-space-4);
}
.p-card h3 { font-size: var(--t-h4); margin-bottom: var(--pf-space-2); }
.p-card p { color: var(--pf-text-s); font-size: var(--t-body); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pf-card-gap); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8) var(--pf-space-6);
  position: relative;
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.step.glow {
  border-color: var(--pf-cyan-border);
  box-shadow: 0 0 0 1px var(--pf-cyan-border), 0 10px 44px var(--pf-cyan-dim);
  transform: translateY(-4px);
}
.step.glow .step-num { background: var(--pf-cyan); color: var(--pf-on-cyan); border-color: var(--pf-cyan); }
.step-num {
  font-family: var(--pf-mono); font-size: var(--t-mono);
  color: var(--pf-cyan);
  background: var(--pf-cyan-dim);
  border: 1px solid var(--pf-cyan-border);
  border-radius: var(--pf-radius-pill);
  padding: 3px 12px;
  display: inline-block;
  margin-bottom: var(--pf-space-4);
  transition: background .45s ease, color .45s ease, border-color .45s ease;
}
.step h3 { margin-bottom: var(--pf-space-3); }
.step > p { color: var(--pf-text-s); font-size: var(--t-body); margin-bottom: var(--pf-space-5); }
.step ul { list-style: none; display: grid; gap: var(--pf-space-3); }
.step li {
  display: flex; gap: var(--pf-space-3); align-items: flex-start;
  color: var(--pf-text-s); font-size: var(--t-body-sm);
}
.step li svg { flex: none; margin-top: 2px; color: var(--pf-green); }

/* ---------- ROI (white) ---------- */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pf-space-16); align-items: center; }
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; gap: var(--pf-space-8); } }
.roi-form {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8);
  display: grid; gap: var(--pf-space-5);
}
.field label {
  display: block;
  font-size: var(--t-label); font-weight: 500;
  color: var(--pf-text-s);
  margin-bottom: var(--pf-space-2);
}
.field input, .field select {
  width: 100%;
  font-family: var(--pf-sans); font-size: var(--t-body);
  color: var(--pf-text-p);
  background: transparent;
  border: 1px solid var(--pf-input-border);
  border-radius: var(--pf-radius-btn);
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:hover, .field select:hover { border-color: var(--pf-input-border-hover); }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--pf-cyan);
  box-shadow: 0 0 0 3px var(--pf-cyan-dim);
}
.field .suffix { font-family: var(--pf-mono); font-size: var(--t-mono-sm); color: var(--pf-text-t); margin-left: var(--pf-space-2); }
.currency-row { display: flex; gap: var(--pf-space-2); }
.currency-row .chip {
  font-family: var(--pf-mono); font-size: var(--t-mono);
  color: var(--pf-text-s);
  white-space: nowrap;
  border: 1px solid var(--pf-input-border);
  border-radius: var(--pf-radius-btn);
  background: transparent;
  padding: 7px 14px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.currency-row .chip.active {
  color: var(--pf-cyan);
  border-color: var(--pf-cyan-border);
  background: var(--pf-cyan-dim);
}

/* ---------- Feature rows ---------- */
.feature-row {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: var(--pf-space-16); align-items: center;
  padding: 72px 0;
}
.feature-row + .feature-row { border-top: 0.5px solid var(--pf-border); }
.feature-row.flip .feature-copy { order: 2; }
@media (max-width: 860px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--pf-space-8); }
  .feature-row.flip .feature-copy { order: 0; }
}
.feature-copy h3 { font-size: var(--t-h2); margin: var(--pf-space-4) 0; }
.feature-copy p { color: var(--pf-text-s); font-size: var(--t-body-lg); }
.feature-copy p + p { margin-top: var(--pf-space-4); }
.feature-shot {
  border: 0.5px solid var(--pf-border-md);
  border-radius: var(--pf-radius-card);
  overflow: hidden;
  background: var(--pf-bg-card);
}
.feature-shot img { display: block; width: 100%; height: auto; }

/* ---------- Cyan band ---------- */
.band { padding: 96px 0; text-align: center; border-top: none; }
.band h2 { color: var(--pf-on-cyan); }
.band p { color: rgba(255,255,255,.85); margin: var(--pf-space-4) 0 var(--pf-space-8); }

/* ---------- Who it's for ---------- */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pf-card-gap); }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } }
.role {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8) var(--pf-space-6);
  display: flex; flex-direction: column;
}
.role .icon {
  width: 36px; height: 36px; border-radius: var(--pf-radius-btn);
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-cyan-dim); color: var(--pf-cyan);
  margin-bottom: var(--pf-space-4);
}
.role h3 { font-size: var(--t-h4); margin-bottom: var(--pf-space-3); }
.role p { color: var(--pf-text-s); font-size: var(--t-body); flex: 1; }
.role .takeaway {
  margin-top: var(--pf-space-5); padding-top: var(--pf-space-4);
  border-top: 0.5px solid var(--pf-border);
  color: var(--pf-text-p); font-weight: 500; font-size: var(--t-body); flex: none;
}

/* ---------- Integrations note ---------- */
.integrations-note { text-align: center; color: var(--pf-text-s); margin-top: var(--pf-space-8); font-size: var(--t-body); }

/* ---------- Waitlist ---------- */
.waitlist { text-align: center; }
.waitlist .lede { margin: var(--pf-space-4) auto 0; }
.waitlist-form {
  display: flex; gap: var(--pf-space-3); justify-content: center;
  margin-top: var(--pf-space-8);
}
.waitlist-form input {
  width: 320px; max-width: 60vw;
  font-family: var(--pf-sans); font-size: var(--t-body);
  color: var(--pf-text-p);
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-input-border);
  border-radius: var(--pf-radius-btn);
  padding: 10px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.waitlist-form input:focus { outline: none; border-color: var(--pf-cyan); box-shadow: 0 0 0 3px var(--pf-cyan-dim); }
.waitlist-fineprint { margin-top: var(--pf-space-5); color: var(--pf-text-t); font-size: var(--t-body-sm); }

/* ============================================================
   INSTRUMENT-PANEL SCAFFOLDING + LIVE METRICS + PIPELINE STAGES
   ============================================================ */

/* ---------- Fixed scroll-progress rail (left gutter) ---------- */
.scroll-rail {
  position: fixed; left: 26px; top: 0; height: 100vh; width: 60px;
  z-index: 90; pointer-events: none;
}
.rail-track {
  position: absolute; left: 0; top: 16vh; height: 68vh; width: 1px;
  background: linear-gradient(var(--pf-border-md), var(--pf-border-md)) no-repeat;
}
.rail-track::before {
  /* tick marks along the track */
  content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 100%;
  background-image: repeating-linear-gradient(to bottom, var(--pf-border-md) 0 1px, transparent 1px 12.5%);
  background-size: 7px 100%;
}
.rail-tick {
  position: absolute; left: -3px; top: 16vh; width: 7px; height: 7px;
  border-radius: 50%; background: var(--pf-cyan);
  box-shadow: 0 0 0 4px var(--pf-cyan-dim);
  transform: translateY(-50%); transition: top .1s linear;
}
.rail-read {
  position: absolute; left: 14px; top: 16vh; transform: translateY(-50%);
  font-family: var(--pf-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--pf-cyan); white-space: nowrap; transition: top .1s linear;
}
@media (max-width: 1180px) { .scroll-rail { display: none; } }

/* ---------- Per-section index + pipeline-stage tag ---------- */
.section-tag {
  position: absolute; top: 46px; left: 50%; transform: translateX(-540px);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--pf-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--pf-text-t); z-index: 3; pointer-events: none;
}
.section-tag .st-idx { color: var(--pf-text-s); }
.section-tag .st-sep { color: var(--pf-text-t); }
.section-tag .st-code { color: var(--pf-text-s); letter-spacing: .12em; }
.section-tag .st-stage {
  padding-left: 10px; margin-left: 2px;
  border-left: 0.5px solid var(--pf-border-md);
  color: var(--pf-text-t); transition: color .2s ease;
}
.section-tag .st-stage.running { color: var(--pf-cyan); }
.section-tag .st-stage.running::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 5px;
  border-radius: 50%; background: var(--pf-cyan); vertical-align: middle;
  animation: stage-blink 1s steps(2, jump-none) infinite;
}
.section-tag .st-stage.passed { color: var(--pf-green); }
@keyframes stage-blink { 50% { opacity: .25; } }
@media (max-width: 1160px) { .section-tag { left: var(--pf-space-6); transform: none; } }
@media (max-width: 640px) { .section-tag { display: none; } }

/* ---------- Live-counting delivery metrics strip ---------- */
.metrics-strip { padding: 52px 0; border-top: 0.5px solid var(--pf-border); }
.metrics-caption {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--pf-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pf-text-t);
  margin-bottom: var(--pf-space-6);
}
.metrics-caption .ms-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pf-green);
  box-shadow: 0 0 0 3px var(--pf-green-dim);
  animation: ms-pulse 2.4s ease-in-out infinite;
}
@keyframes ms-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .metrics-grid { grid-template-columns: 1fr 1fr; gap: var(--pf-space-8) 0; } }
.metric { padding: 4px 30px; border-left: 0.5px solid var(--pf-border); }
.metric:first-child { border-left: none; padding-left: 0; }
@media (max-width: 720px) {
  .metric:nth-child(odd) { border-left: none; padding-left: 0; }
  .metric:nth-child(2) { padding-left: 30px; border-left: 0.5px solid var(--pf-border); }
}
.metric-label { font-size: 13px; color: var(--pf-text-s); }
.metric-value {
  font-family: var(--pf-mono); font-weight: 500; font-size: 40px; line-height: 1;
  color: var(--pf-cyan); display: flex; align-items: baseline; gap: 6px;
  margin: 12px 0 14px; font-variant-numeric: tabular-nums;
}
.metric-value .mv-unit { font-size: 15px; color: var(--pf-text-s); }
.tier {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pf-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 10px; border-radius: var(--pf-radius-pill);
}
.tier .tier-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tier-elite { color: var(--pf-cyan); background: var(--pf-cyan-dim); border: 1px solid var(--pf-cyan-border); }
.tier-good { color: var(--pf-green); background: var(--pf-green-dim); border: 1px solid rgba(63,185,80,.3); text-transform: none; letter-spacing: .02em; }

/* ---------- Trust bar (connector marquee) ---------- */
.trust {
  padding: 40px 0 44px;
  border-top: 0.5px solid var(--pf-border);
  overflow: hidden;
}
.trust-caption {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--pf-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--pf-text-s); text-align: center;
  margin-bottom: 30px;
}
.trust-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pf-cyan);
  box-shadow: 0 0 0 3px var(--pf-cyan-dim); flex: none;
}
.trust-viewport {
  position: relative; display: flex; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.trust-track {
  display: flex; flex: none; align-items: center; gap: 56px;
  padding-right: 56px;
  animation: trust-scroll 44s linear infinite;
}
.trust-viewport:hover .trust-track { animation-play-state: paused; }
@keyframes trust-scroll { to { transform: translateX(-100%); } }
.trust-logo {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; white-space: nowrap;
  opacity: .55; transition: opacity .18s ease, transform .18s ease;
}
.trust-logo img,
.trust-logo svg {
  height: 22px; width: auto; display: block;
  opacity: .85;
}
.trust-logo span {
  font-family: var(--pf-sans); font-size: 16px; font-weight: 500;
  color: var(--pf-text-p); letter-spacing: -0.01em;
}
.trust-logo:hover { opacity: 1; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
  .trust-track[aria-hidden="true"] { display: none; }
  .trust-viewport { flex-wrap: wrap; justify-content: center; }
  .trust-track { flex-wrap: wrap; justify-content: center; gap: 20px 40px; padding-right: 0; }
}

/* ---------- Footer ---------- */
footer {
  background: var(--pf-bg-sidebar);
  border-top: 0.5px solid var(--pf-border);
  padding: var(--pf-space-12) 0;
}
footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-space-6); flex-wrap: wrap; }
footer img { height: 22px; display: block; }
footer .legal { color: var(--pf-text-t); font-size: var(--t-body-sm); }
footer nav { display: flex; gap: var(--pf-space-5); }
footer nav a { color: var(--pf-text-s); font-size: var(--t-body-sm); text-decoration: none; transition: color .15s ease; }
footer nav a:hover { color: var(--pf-text-p); }