/* =========================================================================
   Agentic Lead Sourcing - design system
   Continuity with arwinbosman.com: dark operator-tech aesthetic.
   base #0A0A0B · elevated #13141A · text #F5F5F4 / #A0A0A8 · accent #5BC8FA
   Inter (body) · Instrument Serif italic (emphasis) · JetBrains Mono (captions)
   ========================================================================= */

:root {
  --bg: #0A0A0B;
  --bg-2: #0E0F13;
  --elevated: #13141A;
  --elevated-2: #181A22;
  --line: #23252E;
  --line-soft: #1B1D24;
  --text: #F5F5F4;
  --muted: #A0A0A8;
  --muted-2: #6F7079;
  --accent: #5BC8FA;
  --accent-ink: #0A0A0B;
  --accent-dim: rgba(91, 200, 250, 0.12);
  --accent-glow: rgba(91, 200, 250, 0.35);
  --live: #4ADE80;
  --live-dim: rgba(74, 222, 128, 0.14);
  --warn: #F5B14C;

  --maxw: 1140px;
  --radius: 14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmospheric background: layered radial glow + fine grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(91, 200, 250, 0.10), transparent 60%),
    radial-gradient(700px 500px at 8% 8%, rgba(91, 200, 250, 0.05), transparent 55%),
    linear-gradient(180deg, #0A0A0B 0%, #0B0C10 60%, #0A0A0B 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; position: relative; }
.section-tight { padding: 80px 0; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
  opacity: 0.7;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
em.serif, .serif em { font-style: italic; }
.accent { color: var(--accent); }
.footer .footer-tagline {
  margin-top: 10px;
  font-family: "Geist", "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #E6B74B;
  font-size: 15px;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); max-width: 60ch; line-height: 1.6; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px -10px var(--accent-glow); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10, 10, 11, 0.6);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled { border-color: var(--line-soft); background: rgba(10, 10, 11, 0.82); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -0.01em; }
.brand-logo { height: 22px; width: auto; color: #F5F5F4; display: block; }
.brand .name { font-size: 15.5px; white-space: nowrap; }
.brand .name b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 14.5px; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; }

/* ---------- Hero ---------- */
.hero { padding: 92px 0 84px; position: relative; }
.hero h1 { max-width: 16ch; margin-bottom: 26px; }
.hero .lead { max-width: 56ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; align-items: center; }
.hero-receipts {
  margin-top: 44px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2);
  letter-spacing: 0.04em;
}
.hero-receipts span { display: inline-flex; align-items: center; gap: 8px; }
.hero-receipts span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.8; }

/* ---------- Hero two-column layout ---------- */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.hero-art { justify-self: end; }
.hero-art img { display: block; max-width: 115%; height: auto; }
.hero-feed { padding-bottom: 84px; }
.hero-feed .feed-shell { margin-top: 0; }

/* ---------- Live signal feed ---------- */
.feed-shell {
  margin-top: 64px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--elevated), var(--bg-2));
  overflow: hidden;
  box-shadow: 0 40px 120px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03);
}
.feed-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted);
}
.feed-bar .left { display: flex; align-items: center; gap: 12px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); position: relative; }
.dot-live::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: var(--live); opacity: 0.35; animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.5; } 80%,100% { transform: scale(2.2); opacity: 0; } }
.feed-bar .win { display: flex; gap: 7px; }
.feed-bar .win i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: inline-block; }
.feed-list { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow: hidden; position: relative; }
.feed-list::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(180deg, transparent, var(--bg-2)); pointer-events: none;
}
.signal-row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px;
  animation: rowIn 0.6s var(--ease) both;
}
.signal-row + .signal-row { border-top: 1px solid var(--line-soft); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.signal-row .ic {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); font-size: 13px; flex: none;
}
.signal-row .body { min-width: 0; }
.signal-row .co { font-weight: 600; font-size: 15px; }
.signal-row .ev { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signal-row .ev b { color: var(--text); font-weight: 500; }
.signal-row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); text-align: right; flex: none; }
.signal-row .tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px; background: var(--live-dim); color: var(--live);
  margin-bottom: 3px;
}

/* ---------- Generic cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: linear-gradient(180deg, var(--elevated), var(--bg-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  position: relative;
}
.card:hover { border-color: var(--line); transform: translateY(-3px); }
.card .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }
.card h3 { margin: 16px 0 10px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card .ic-lg {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent); margin-bottom: 18px;
}
.card .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-top: 18px; display: block; }

/* problem split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.stat-block { border-left: 2px solid var(--accent); padding-left: 22px; margin: 26px 0; display: flex; align-items: center; gap: 1.25rem; }
.problem-spot { flex: 0 0 auto; height: 96px; width: auto; object-fit: contain; display: block; }
.stat-block .big { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--text); }
.stat-block .cap { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* signals chips grid */
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.signal-chip {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--bg-2); transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.signal-chip:hover { border-color: var(--accent); background: var(--elevated); }
.signal-chip .rk { font-family: var(--font-mono); font-size: 11px; color: var(--accent); padding-top: 2px; flex: none; width: 22px; }
.signal-chip .t { font-weight: 600; font-size: 15px; }
.signal-chip .d { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.step:first-child { border-top: 0; }
.step .n { font-family: var(--font-serif); font-style: italic; font-size: 2.4rem; color: var(--accent); line-height: 1; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); margin: 0; max-width: 56ch; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.price {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-2); padding: 28px;
}
.price.featured { border-color: var(--accent); background: linear-gradient(180deg, rgba(91,200,250,0.06), var(--bg-2)); box-shadow: 0 30px 80px -50px var(--accent-glow); }
.price .badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; min-height: 14px; }
.price .tier { font-size: 1.05rem; font-weight: 600; }
.price .amt { font-family: var(--font-serif); font-style: italic; font-size: 2.6rem; line-height: 1; margin: 14px 0 4px; }
.price .amt small { font-family: var(--font-mono); font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.price ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 11px; }
.price li { font-size: 14px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.price li::before { content: "→"; color: var(--accent); flex: none; }
.price .btn { margin-top: auto; justify-content: center; }
.price-note { margin-top: 22px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); text-align: center; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.cmp thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.cmp .col-als { color: var(--text); }
.cmp thead .col-als { color: var(--accent); }
.cmp td.col-als { background: rgba(91,200,250,0.04); font-weight: 500; }
.cmp tbody th { font-weight: 500; color: var(--muted); }
.cmp .yes { color: var(--live); }
.cmp .no { color: var(--muted-2); }

/* DFY callout */
.dfy {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(91,200,250,0.08), transparent 60%),
    linear-gradient(180deg, var(--elevated), var(--bg-2));
  padding: 50px;
}
.dfy .spec {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 18px 20px; margin: 22px 0 26px; line-height: 1.7;
}
.dfy .spec .q { color: var(--accent); }

/* FAQ */
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%; background: none; border: 0; color: var(--text); cursor: pointer;
  font-family: var(--font-body); font-size: 1.08rem; font-weight: 500; text-align: left;
  padding: 24px 40px 24px 0; position: relative; letter-spacing: -0.01em;
}
.faq-q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.4rem; transition: transform 0.3s var(--ease);
}
.faq-item.open .faq-q::after { content: "–"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { color: var(--muted); margin: 0 0 24px; max-width: 70ch; font-size: 15.5px; }

/* ---------- Forms / lead capture ---------- */
.capture {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background:
    radial-gradient(700px 360px at 50% -20%, rgba(91,200,250,0.12), transparent 60%),
    linear-gradient(180deg, var(--elevated), var(--bg-2));
  padding: 56px; text-align: center;
}
.capture h2 { max-width: 18ch; margin: 0 auto 16px; }
.capture .lead { margin: 0 auto 30px; }
.lead-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.lead-form .field { flex: 1 1 240px; }
input, textarea, select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; transition: border-color 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.form-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); margin-top: 14px; letter-spacing: 0.02em; }
.form-status { font-size: 14px; margin-top: 14px; min-height: 20px; }
.form-status.ok { color: var(--live); }
.form-status.err { color: var(--warn); }

/* intake form (DFY page) */
.intake { display: grid; gap: 16px; max-width: 640px; }
.intake .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.intake label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; display: block; }
.intake .btn { justify-self: start; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 60px 0 50px; }
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .brand { margin-bottom: 16px; }
.footer p { color: var(--muted); font-size: 14px; max-width: 38ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; font-weight: 500; }
.footer-col a { display: block; color: var(--muted); font-size: 14px; padding: 5px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* page hero for subpages */
.page-hero { padding: 80px 0 36px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; }
.page-hero .lead { margin-top: 22px; }
.crumb { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); margin-bottom: 22px; letter-spacing: 0.04em; }
.crumb a:hover { color: var(--accent); }

.prose p { color: var(--muted); max-width: 68ch; }
.prose h2 { margin-top: 56px; margin-bottom: 18px; }
.prose h3 { margin-top: 36px; margin-bottom: 10px; color: var(--text); }
.prose ul { color: var(--muted); padding-left: 0; list-style: none; max-width: 68ch; }
.prose ul li { padding: 8px 0 8px 26px; position: relative; }
.prose ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art img { max-height: 320px; width: auto; margin: 0 auto; object-fit: contain; }
}
@media (max-width: 920px) {
  .cols-3, .cols-4, .signal-grid, .price-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--elevated); border-bottom: 1px solid var(--line); padding: 22px 28px; gap: 18px;
  }
  .dfy, .capture { padding: 34px 26px; }
  .intake .row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 78px 0; }
  .cols-3, .cols-4, .signal-grid, .price-grid, .cols-2 { grid-template-columns: 1fr; }
  .signal-row .meta { display: none; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .footer-grid { flex-direction: column; }
  .problem-spot { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Cookie consent banner ---- */
/* Reject and Accept are deliberately identical in size and prominence (AVG / Dutch AP). */
#cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:var(--bg);border-top:1px solid var(--line);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5}
#cookie-banner[hidden]{display:none}
#cookie-banner .cookie-copy{margin:0;max-width:64ch}
#cookie-banner .cookie-copy a{color:var(--accent);text-decoration:underline}
#cookie-banner .cookie-actions{display:flex;gap:12px;flex-shrink:0}
#cookie-banner .cookie-btn{font-family:inherit;font-size:14px;font-weight:500;padding:10px 24px;border-radius:8px;border:1px solid rgba(245,245,244,0.25);background:transparent;color:var(--text);cursor:pointer;min-width:104px}
#cookie-banner .cookie-btn:hover{background:rgba(245,245,244,0.08)}
#cookie-banner .cookie-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){#cookie-banner{flex-direction:column;align-items:stretch}#cookie-banner .cookie-actions{justify-content:stretch}#cookie-banner .cookie-btn{flex:1}}

/* ===================== DEV SIGNAL-LAYER SECTION (scoped als-/ab-) ===================== */
.als-dev{
  width:100%;color:#F5F5F4;
  font-family:"Geist","Geist Variable",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --blue:#5BC8FA;--ink:#F5F5F4;--dim:#8b8b90;--line:rgba(245,245,244,.10);
}

/* head */
.als-head{max-width:680px;margin:0 0 34px;}
.als-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.als-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--blue);
  border:1px solid rgba(91,200,250,.35);background:rgba(91,200,250,.07);padding:4px 11px;border-radius:999px;}
.als-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px -1px var(--blue);}
.als-kicker{font-size:11.5px;letter-spacing:.16em;color:var(--dim);font-weight:500;}
.als-h2{font-size:clamp(28px,3.6vw,44px);line-height:1.05;font-weight:600;letter-spacing:-.02em;margin:0 0 16px;}
.als-sub{font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:#b6b8bd;margin:0;max-width:600px;}

/* ===== HERO DEVICE (the band) ===== */
.agent-band{
  width:100%;display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start;
  font-family:var(--font-mono);margin-bottom:40px;
}
.ab-pane{position:relative;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,rgba(245,245,244,.045),rgba(245,245,244,0) 26%),#0b0b0d;
  box-shadow:0 26px 64px -28px rgba(0,0,0,.75),0 1px 0 rgba(245,245,244,.05) inset;}
.ab-pane::before{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;z-index:0;
  background:radial-gradient(110% 70% at 50% -18%,rgba(91,200,250,.07),transparent 55%);}
.ab-pane::after{content:"";position:absolute;inset:0;border-radius:15px;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(245,245,244,.20),rgba(245,245,244,.05) 38%,rgba(245,245,244,.02));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
.ab-bar,.ab-wrap,.ab-feed{position:relative;z-index:1;}
.ab-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid rgba(245,245,244,.07);background:linear-gradient(180deg,rgba(245,245,244,.03),transparent);}
.ab-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.ab-file{color:#8b8b90;font-size:12px;margin-left:6px;white-space:nowrap;}
.ab-feed-title{color:#8b8b90;font-size:12px;letter-spacing:.02em;white-space:nowrap;}
.ab-pill{margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8b8b90;border:1px solid rgba(245,245,244,.12);padding:3px 10px;border-radius:999px;transition:color .3s,border-color .3s;}
.ab-pill .ab-pdot{width:7px;height:7px;border-radius:50%;background:#6f6f76;transition:background .3s;}
.ab-pill.verifying .ab-pdot{background:#8b8b90;animation:abBlink 1s steps(1) infinite;}
.ab-pill.ok{color:#5BC8FA;border-color:rgba(91,200,250,.45);box-shadow:0 0 0 1px rgba(91,200,250,.12),0 0 14px -4px rgba(91,200,250,.5);}
.ab-pill.ok .ab-pdot{background:#5BC8FA;}
.ab-live{color:#5BC8FA;border-color:rgba(91,200,250,.40);}
.ab-live .ab-pdot{background:#5BC8FA;animation:abPulse 1.6s ease-in-out infinite;}
.ab-wrap{padding:16px 18px;}
.ab-lbl{color:#5f5f66;font-size:11px;margin:0 0 6px;letter-spacing:.04em;}
.ab-code{margin:0 0 16px;font-size:13px;line-height:1.65;white-space:pre;color:#9aa0a6;overflow-x:auto;}
.ab-code:last-child{margin-bottom:0;}
.ab-code .ab-ln{min-height:1.05em;}
.ab-code .k{color:#5BC8FA;}
.ab-code .s{color:#E6B74B;}
.ab-code .c{color:#6f6f76;}
.ab-code .id{color:#F5F5F4;}
.ab-code .key{color:#bfc4c9;}
.ab-code .num{color:#5BC8FA;}
.ab-code .nul{color:#6f6f76;}
.ab-code .car{display:inline-block;width:7px;background:#E6B74B;color:transparent;animation:abBlink 1s steps(1) infinite;margin-left:1px;}
#abPayload{border-left:2px solid rgba(245,245,244,.07);padding-left:11px;margin-left:-13px;border-radius:3px;
  transition:border-color .55s ease,background-color .55s ease,box-shadow .55s ease;}
#abPayload.flash{border-left-color:#5BC8FA;background-color:rgba(91,200,250,.06);box-shadow:-8px 0 22px -14px rgba(91,200,250,.5);}
.ab-code .ab-ln.routed{background-color:rgba(91,200,250,.08);box-shadow:inset 2px 0 0 #5BC8FA;border-radius:2px;transition:background-color .6s,box-shadow .6s;}

/* feed */
.ab-feed{padding:12px;display:flex;flex-direction:column;gap:9px;height:360px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);}
.ab-row{position:relative;display:flex;gap:11px;align-items:flex-start;border-radius:11px;padding:12px 13px;
  border:1px solid rgba(245,245,244,.07);
  background:linear-gradient(180deg,rgba(245,245,244,.035),rgba(245,245,244,.012));
  opacity:0;transform:translateY(-10px) scale(.985);
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1),border-color .6s ease,box-shadow .6s ease;}
.ab-row.in{opacity:1;transform:none;}
.ab-row.land{border-color:rgba(91,200,250,.45);box-shadow:0 0 0 1px rgba(91,200,250,.25),0 8px 24px -12px rgba(91,200,250,.35);}
.ab-row.out{opacity:0;transform:translateY(6px) scale(.99);}
.ab-ricon{flex-shrink:0;width:26px;height:26px;border-radius:7px;border:1px solid rgba(91,200,250,.30);background:rgba(91,200,250,.08);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.ab-rmain{min-width:0;flex:1;}
.ab-rtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ab-rpill{font-size:11px;color:#5BC8FA;background:rgba(91,200,250,.12);border:1px solid rgba(91,200,250,.28);padding:2px 9px;border-radius:6px;white-space:nowrap;}
.ab-conf{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#5BC8FA;}
.ab-meter{width:26px;height:3px;border-radius:2px;background:rgba(245,245,244,.14);overflow:hidden;display:inline-block;}
.ab-fill{display:block;height:100%;background:#5BC8FA;border-radius:2px;}
.ab-rtime{margin-left:auto;display:flex;align-items:center;gap:5px;color:#5f5f66;font-size:11.5px;white-space:nowrap;}
.ab-rsub{margin-top:8px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;}
.ab-conn{color:#6f6f76;}
.ab-chip{color:#cfd3d7;border:1px solid rgba(245,245,244,.14);background:rgba(245,245,244,.04);padding:2px 8px;border-radius:6px;white-space:nowrap;}
.ab-src{color:#6f6f76;font-size:11.5px;}

/* ===== PILLARS ===== */
.als-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.als-card{position:relative;border-radius:13px;padding:20px 18px 18px;
  border:1px solid rgba(245,245,244,.09);
  background:linear-gradient(180deg,rgba(245,245,244,.03),rgba(245,245,244,.008));}
.als-card::before{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,245,244,.06),transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;}
.als-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--blue);border:1px solid rgba(91,200,250,.28);background:rgba(91,200,250,.07);}
.als-ico svg{width:19px;height:19px;}
.als-card h3{font-size:14.5px;font-weight:600;margin:0 0 7px;letter-spacing:-.01em;color:#F5F5F4;}
.als-card p{font-size:13px;line-height:1.55;color:#9c9ea4;margin:0;font-family:"Geist","Geist Variable",system-ui,sans-serif;}

.als-foot{font-size:13px;color:#7c7e84;margin:0;max-width:640px;line-height:1.55;}

@media (max-width:900px){
  .als-pillars{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:780px){
  .agent-band{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .als-pillars{grid-template-columns:1fr;}
}

@keyframes abBlink{50%{opacity:0;}}
@keyframes abPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===================== CONTACT PAGE (scoped cu-) ===================== */
/* Design tokens are scoped to .cu-main so they never override the shared
   nav/footer (which use the site's :root --bg/--line). */
.cu-main{
  --ink:#F5F5F4;--dim:#8b8b90;--faint:#5f5f66;
  --line:rgba(245,245,244,.10);--field:#121214;--blue:#5BC8FA;
  --font:"Geist","Geist Variable",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);font-family:var(--font);
  max-width:1080px;margin:0 auto;padding:48px 32px 96px;
}
.cu-head{max-width:620px;margin:0 0 44px;}
.cu-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--blue);margin:0 0 16px;font-weight:500;}
.cu-h1{font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:-.03em;font-weight:600;margin:0 0 18px;}
.cu-lead{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:#b6b8bd;margin:0;}

.cu-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:44px;align-items:start;}

/* left: envelope + reassurance */
.cu-figure{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 70px -32px rgba(0,0,0,.8);margin:0 0 26px;line-height:0;}
.cu-figure img{width:100%;height:auto;display:block;}
.cu-figure::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(245,245,244,.10);}
.cu-reassure p{font-size:14.5px;line-height:1.6;color:#9c9ea4;margin:0 0 12px;}
.cu-reassure a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(91,200,250,.35);}
.cu-reassure a:hover{border-bottom-color:var(--blue);}
.cu-reassure .cu-strong{color:var(--ink);}

/* right: form card */
.cu-card{border:1px solid var(--line);border-radius:16px;padding:28px;
  background:linear-gradient(180deg,rgba(245,245,244,.025),rgba(245,245,244,0) 30%),#0b0b0d;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);}
.cu-row{margin-bottom:18px;}
.cu-row:last-of-type{margin-bottom:0;}
.cu-label{display:block;font-size:13px;color:#c7c9cd;margin:0 0 7px;}
.cu-opt{color:var(--faint);}
.cu-input,.cu-select,.cu-textarea{
  width:100%;font-family:var(--font);font-size:14.5px;color:var(--ink);
  background:var(--field);border:1px solid rgba(245,245,244,.12);border-radius:10px;
  padding:12px 13px;outline:none;transition:border-color .18s,box-shadow .18s;}
.cu-input::placeholder,.cu-textarea::placeholder{color:#62636a;}
.cu-input:focus,.cu-select:focus,.cu-textarea:focus{border-color:rgba(91,200,250,.65);box-shadow:0 0 0 3px rgba(91,200,250,.16);}
.cu-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238b8b90' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;}
.cu-select:invalid{color:#62636a;}
.cu-textarea{min-height:120px;resize:vertical;line-height:1.55;}
.cu-counter{display:block;text-align:right;font-size:11.5px;color:var(--faint);margin-top:6px;}
.cu-err{font-size:12.5px;color:#e0857a;margin:7px 0 0;display:none;}
.cu-row.invalid .cu-input,.cu-row.invalid .cu-select,.cu-row.invalid .cu-textarea{border-color:rgba(224,133,122,.6);}
.cu-row.invalid .cu-err{display:block;}

.cu-submit{margin-top:6px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font);
  font-size:14.5px;font-weight:600;color:#0b0b0d;background:var(--ink);border:0;border-radius:10px;
  padding:12px 20px;cursor:pointer;transition:opacity .18s,transform .05s;}
.cu-submit:hover{opacity:.9;}
.cu-submit:active{transform:translateY(1px);}
.cu-submit:disabled{opacity:.55;cursor:default;}
.cu-submit svg{transition:transform .18s;}
.cu-submit:hover svg{transform:translateX(2px);}

.cu-status{margin-top:16px;font-size:14px;line-height:1.55;border-radius:10px;padding:13px 14px;display:none;}
.cu-status.ok{display:block;color:#bfe4f7;border:1px solid rgba(91,200,250,.35);background:rgba(91,200,250,.07);}
.cu-status.bad{display:block;color:#e7b3ab;border:1px solid rgba(224,133,122,.35);background:rgba(224,133,122,.06);}
.cu-status a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(91,200,250,.35);}

/* success replacement */
.cu-done{display:none;border:1px solid rgba(91,200,250,.30);border-radius:16px;padding:34px 28px;text-align:center;
  background:linear-gradient(180deg,rgba(91,200,250,.06),transparent 60%),#0b0b0d;}
.cu-done h3{font-size:20px;font-weight:600;margin:14px 0 8px;letter-spacing:-.01em;}
.cu-done p{font-size:14.5px;line-height:1.6;color:#9c9ea4;margin:0;}
.cu-done .cu-seal{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(91,200,250,.4);background:rgba(91,200,250,.1);color:var(--blue);}

@media (max-width:860px){
  .cu-grid{grid-template-columns:1fr;gap:32px;}
  .cu-figure{max-width:520px;}
}

/* ===================== SIGNAL SUBSCRIPTION PAGE (scoped ss-) ===================== */
/* Design tokens scoped to .ss-page so they never override the shared shell.
   Mono maps to the site's --font-mono; Geist is reused via --font. */
.ss-page{
  --bg:#09090b;--ink:#F5F5F4;--dim:#8b8b90;--faint:#5f5f66;
  --line:rgba(245,245,244,.10);--panel:#0b0b0d;--field:#121214;
  --blue:#5BC8FA;--gold:#E6B74B;
  --font:"Geist","Geist Variable",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:var(--font-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  color:var(--ink);font-family:var(--font);
}
.ss-page a{color:inherit;text-decoration:none;}
.ss-wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

/* shared section rhythm */
.ss-section{padding:64px 0;}
.ss-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--blue);margin:0 0 16px;font-weight:500;}
.ss-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:0 0 14px;}
.ss-p{font-size:16px;line-height:1.6;color:#b6b8bd;margin:0;}
.ss-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#0b0b0d;
  background:var(--ink);border:0;border-radius:10px;padding:13px 22px;cursor:pointer;transition:opacity .18s,transform .05s;}
/* The solid button is an <a>; .ss-page a{color:inherit} (0,1,1) would otherwise
   beat .ss-btn (0,1,0) and turn the dark label light on the off-white button.
   This rule (0,2,1) wins, keeping the label and the currentColor arrow dark. */
.ss-page a.ss-btn{color:#0b0b0d;}
.ss-btn:hover{opacity:.9;}
.ss-btn:active{transform:translateY(1px);}
.ss-btn svg{transition:transform .18s;}
.ss-btn:hover svg{transform:translateX(2px);}
.ss-btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);
  border:1px solid var(--line);background:transparent;border-radius:10px;padding:12px 20px;}
.ss-btn-ghost:hover{border-color:rgba(245,245,244,.28);}

/* hero */
.ss-hero{padding:40px 0 56px;}
.ss-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.ss-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin:0 0 20px;}
.ss-tag .ss-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(91,200,250,.7);}
.ss-h1{font-size:clamp(40px,5.4vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0 0 20px;}
.ss-lead{font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:#b6b8bd;margin:0 0 28px;max-width:30em;}
.ss-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.ss-note{font-size:13px;color:var(--faint);margin:18px 0 0;}

/* signal cards (hero visual) */
.ss-stack{position:relative;display:flex;flex-direction:column;gap:14px;}
.ss-card{border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
  background:linear-gradient(180deg,rgba(245,245,244,.03),rgba(245,245,244,0) 40%),var(--panel);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.8);}
.ss-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ss-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#cfeeff;
  border:1px solid rgba(91,200,250,.32);background:rgba(91,200,250,.08);border-radius:999px;padding:4px 11px;}
.ss-pill svg{opacity:.9;}
.ss-conf{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--blue);}
.ss-meter{width:46px;height:5px;border-radius:3px;background:rgba(91,200,250,.18);overflow:hidden;}
.ss-meter span{display:block;height:100%;background:var(--blue);border-radius:3px;}
.ss-card-co{font-family:var(--mono);font-size:14px;color:var(--ink);margin:0 0 3px;}
.ss-card-detail{font-size:13px;color:var(--dim);margin:0 0 12px;}
.ss-card-detail .ss-src{color:var(--faint);font-family:var(--mono);}
.ss-route{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:11px;font-size:12.5px;color:var(--dim);}
.ss-route b{color:#cfeeff;font-weight:500;}
.ss-route .ss-arrow{color:var(--faint);}

/* shift band */
.ss-shift{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0c;}
.ss-shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.ss-shift h3{font-size:18px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em;}
.ss-old h3{color:#c9b3ab;}
.ss-new h3{color:#bfe4f7;}
.ss-shift ul{margin:0;padding:0;list-style:none;}
.ss-shift li{font-size:15px;line-height:1.5;color:#b6b8bd;padding:9px 0;border-bottom:1px solid var(--line);}
.ss-shift li:last-child{border-bottom:0;}

/* signal types grid */
.ss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.ss-tile{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);}
.ss-tile-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(91,200,250,.28);background:rgba(91,200,250,.07);color:var(--blue);margin-bottom:14px;}
.ss-tile h4{font-size:15.5px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em;}
.ss-tile p{font-size:13.5px;line-height:1.5;color:var(--dim);margin:0 0 12px;}
.ss-tile .ss-via{font-family:var(--mono);font-size:11.5px;color:var(--faint);}

/* loop */
.ss-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;counter-reset:step;}
.ss-step{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);position:relative;}
.ss-step .ss-num{font-family:var(--mono);font-size:12px;color:var(--blue);margin-bottom:12px;}
.ss-step h4{font-size:15.5px;font-weight:600;margin:0 0 6px;}
.ss-step p{font-size:13.5px;line-height:1.5;color:var(--dim);margin:0;}

/* pillars */
.ss-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px;}
.ss-pillar{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel);}
.ss-pillar h4{font-size:16px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em;}
.ss-pillar p{font-size:14px;line-height:1.55;color:var(--dim);margin:0;}
.ss-pillar a{color:var(--blue);border-bottom:1px solid rgba(91,200,250,.35);}

/* pricing */
.ss-price-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px;}
.ss-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--panel);}
.ss-toggle button{font-family:var(--font);font-size:13px;color:var(--dim);background:transparent;border:0;
  border-radius:999px;padding:7px 15px;cursor:pointer;}
.ss-toggle button.on{background:rgba(245,245,244,.10);color:var(--ink);}
.ss-toggle .ss-save{color:var(--blue);font-size:11.5px;margin-left:4px;}
.ss-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ss-plan{border:1px solid var(--line);border-radius:16px;padding:26px 22px;background:var(--panel);display:flex;flex-direction:column;}
.ss-plan.feat{border-color:rgba(91,200,250,.4);box-shadow:0 0 0 1px rgba(91,200,250,.12),0 30px 60px -34px rgba(0,0,0,.8);}
.ss-plan-name{font-size:15px;font-weight:600;margin:0 0 4px;}
.ss-plan-for{font-size:13px;color:var(--faint);margin:0 0 18px;min-height:18px;}
.ss-plan-price{display:flex;align-items:baseline;gap:6px;margin:0 0 4px;}
.ss-plan-price .ss-amt{font-size:34px;font-weight:600;letter-spacing:-.02em;}
.ss-plan.feat .ss-amt{color:var(--gold);}
.ss-plan-price .ss-per{font-size:13px;color:var(--dim);}
.ss-plan-bill{font-size:12px;color:var(--faint);margin:0 0 18px;min-height:16px;}
.ss-plan ul{margin:0 0 22px;padding:0;list-style:none;flex:1;}
.ss-plan li{font-size:13.5px;line-height:1.5;color:#b6b8bd;padding:7px 0 7px 22px;position:relative;}
.ss-plan li::before{content:"";position:absolute;left:0;top:13px;width:11px;height:7px;
  border-left:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:rotate(-45deg);}
.ss-plan .ss-btn,.ss-plan .ss-btn-ghost{width:100%;justify-content:center;}
.ss-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.04em;
  color:#0b0b0d;background:var(--blue);border-radius:999px;padding:3px 12px;font-weight:600;}
.ss-plan{position:relative;}
.ss-ent{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#0a0a0c;margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ss-ent div h4{font-size:15.5px;font-weight:600;margin:0 0 4px;}
.ss-ent div p{font-size:13.5px;color:var(--dim);margin:0;}
.ss-price-note{font-size:12.5px;color:var(--faint);margin:18px 0 0;}

/* closing */
.ss-close{border-top:1px solid var(--line);background:#0a0a0c;text-align:center;}
.ss-tagline{font-family:var(--font);font-size:13px;letter-spacing:.04em;color:var(--gold);margin:0 0 14px;}
.ss-close h2{font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.025em;font-weight:600;margin:0 0 14px;}
.ss-close p{font-size:16px;line-height:1.6;color:#b6b8bd;margin:0 auto 26px;max-width:34em;}
.ss-maturity{font-size:13px;color:var(--faint);margin:26px auto 0;max-width:46em;line-height:1.55;}
/* .ss-close p (0,1,1) out-specifies .ss-tagline/.ss-maturity (0,1,0); these
   scoped rules (0,2,0) win so the tagline shows gold (the same #E6B74B the
   footer tagline uses) and the maturity line gets its top spacing. Color only
   and margin only; font-size and width stay as .ss-close p sets them. */
.ss-close .ss-tagline{color:#E6B74B;}
.ss-close .ss-maturity{margin:40px auto 0;}

@media (max-width:880px){
  /* Mobile gutter: .ss-hero/.ss-section set the padding shorthand and clobber
     .ss-wrap's horizontal padding; restore an even 20px side gutter here. */
  .ss-wrap{padding-left:20px;padding-right:20px;}
  .ss-hero-grid{grid-template-columns:1fr;gap:36px;}
  .ss-shift-grid{grid-template-columns:1fr;gap:28px;}
  .ss-grid{grid-template-columns:1fr;}
  .ss-loop{grid-template-columns:1fr 1fr;}
  .ss-pillars{grid-template-columns:1fr;}
  .ss-plans{grid-template-columns:1fr;}
}

/* ===================== PAY-AS-YOU-GO PAGE (scoped pg-) ===================== */
/* Tokens scoped to .pg-page so they never override the shared shell. Mono maps
   to the site's --font-mono; Geist reused via --font. */
.pg-page{
  --bg:#09090b;--ink:#F5F5F4;--dim:#8b8b90;--faint:#5f5f66;
  --line:rgba(245,245,244,.10);--panel:#0b0b0d;--field:#121214;
  --blue:#5BC8FA;--gold:#E6B74B;
  --font:"Geist","Geist Variable",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:var(--font-mono,"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace);
  color:var(--ink);font-family:var(--font);
}
.pg-wrap{max-width:1080px;margin:0 auto;padding:0 32px;}

.pg-section{padding:64px 0;}
.pg-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--blue);margin:0 0 16px;font-weight:500;}
.pg-h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:0 0 14px;}
.pg-p{font-size:16px;line-height:1.6;color:#b6b8bd;margin:0;}
.pg-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#0b0b0d;
  background:var(--ink);border:0;border-radius:10px;padding:13px 22px;cursor:pointer;transition:opacity .18s,transform .05s;}
/* The solid button is an <a>; a broad descendant a{color:inherit} would otherwise
   out-specify .pg-btn (0,1,0) and turn the dark label light on the off-white
   button. This rule (0,2,1) wins, keeping the label and currentColor arrow dark. */
.pg-page a.pg-btn{color:#0b0b0d;}
.pg-btn:hover{opacity:.9;}
.pg-btn:active{transform:translateY(1px);}
.pg-btn svg{transition:transform .18s;}
.pg-btn:hover svg{transform:translateX(2px);}
.pg-btn-ghost{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);
  border:1px solid var(--line);background:transparent;border-radius:10px;padding:12px 20px;}
.pg-btn-ghost:hover{border-color:rgba(245,245,244,.28);}
.pg-link{color:var(--blue);border-bottom:1px solid rgba(91,200,250,.35);}
.pg-link:hover{border-bottom-color:var(--blue);}

/* hero */
.pg-hero{padding:40px 0 56px;}
.pg-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.pg-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin:0 0 20px;}
.pg-tag .pg-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(91,200,250,.7);}
.pg-h1{font-size:clamp(40px,5.4vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0 0 20px;}
.pg-lead{font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:#b6b8bd;margin:0 0 28px;max-width:31em;}
.pg-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.pg-agentlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--blue);
  margin:20px 0 0;}
.pg-agentlink:hover{color:#bfe4f7;}
.pg-note{font-size:13px;color:var(--faint);margin:18px 0 0;}

/* hero endpoint card */
.pg-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(245,245,244,.03),rgba(245,245,244,0) 40%),var(--panel);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.8);}
.pg-card-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--dim);}
.pg-card-h .pg-meth{color:#cfeeff;border:1px solid rgba(91,200,250,.32);background:rgba(91,200,250,.08);border-radius:5px;padding:2px 7px;}
.pg-card-b{padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#c9cbd1;white-space:pre;overflow-x:auto;}
.pg-card-b .k{color:var(--blue);}
.pg-card-b .s{color:#9fd9a6;}
.pg-card-b .c{color:var(--faint);}
.pg-card-f{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--dim);}
.pg-card-f b{color:var(--ink);font-weight:500;}

/* pricing table */
.pg-table{width:100%;border-collapse:collapse;margin-top:30px;font-size:15px;}
.pg-table th{text-align:left;font-weight:500;color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:0 0 14px;border-bottom:1px solid var(--line);}
.pg-table th.r,.pg-table td.r{text-align:right;}
.pg-table td{padding:15px 0;border-bottom:1px solid var(--line);color:#dcdee2;}
.pg-table td .pg-sub{display:block;font-size:13px;color:var(--faint);margin-top:2px;}
.pg-table td.cr{font-family:var(--mono);font-size:13px;color:var(--dim);}
.pg-table td.eur{font-family:var(--mono);color:var(--ink);}
.pg-rate-note{font-size:13px;color:var(--faint);margin:16px 0 0;}
.pg-worked{border:1px solid var(--line);border-radius:12px;background:#0a0a0c;padding:20px 22px;margin-top:24px;font-size:14px;line-height:1.7;color:#b6b8bd;}
.pg-worked b{color:var(--ink);font-weight:500;}
.pg-worked .pg-mono{font-family:var(--mono);color:#cfeeff;}

/* credit packs */
.pg-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.pg-pack{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel);}
.pg-pack .pg-amt{font-size:30px;font-weight:600;letter-spacing:-.02em;}
.pg-pack .pg-cr{font-family:var(--mono);font-size:13px;color:var(--dim);margin:4px 0 10px;}
.pg-pack .pg-rate{font-family:var(--mono);font-size:12px;color:var(--faint);}
.pg-rate-hero{font-family:var(--mono);font-size:15px;color:var(--gold);}

/* agent band */
.pg-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0c;}
.pg-band-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.pg-feat{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);}
.pg-feat:last-child{border-bottom:0;}
.pg-feat svg{flex:none;color:var(--blue);margin-top:2px;}
.pg-feat h4{font-size:15px;font-weight:600;margin:0 0 3px;}
.pg-feat p{font-size:13.5px;line-height:1.5;color:var(--dim);margin:0;}
.pg-mdbox{border:1px solid rgba(91,200,250,.28);border-radius:12px;background:rgba(91,200,250,.05);padding:20px;}
.pg-mdbox .pg-mdh{font-family:var(--mono);font-size:12px;color:var(--blue);margin:0 0 8px;}
.pg-mdbox p{font-size:14px;line-height:1.55;color:#b6b8bd;margin:0 0 14px;}

/* on-ramp */
.pg-ramp{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px 24px;margin-top:6px;}
.pg-ramp h4{font-size:16px;font-weight:600;margin:0 0 5px;}
.pg-ramp p{font-size:14px;color:var(--dim);margin:0;max-width:44em;}

/* closing */
.pg-close{border-top:1px solid var(--line);background:#0a0a0c;text-align:center;}
.pg-tagline{font-size:13px;letter-spacing:.04em;color:var(--gold);margin:0 0 14px;}
.pg-close h2{font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.025em;font-weight:600;margin:0 0 14px;}
.pg-close p{font-size:16px;line-height:1.6;color:#b6b8bd;margin:0 auto 26px;max-width:34em;}
.pg-maturity{font-size:13px;color:var(--faint);margin:26px auto 0;max-width:46em;line-height:1.55;}
/* .pg-close p (0,1,1) out-specifies .pg-tagline (0,1,0); this scoped rule (0,2,0)
   wins so the tagline renders gold (the same #E6B74B the footer tagline uses). */
.pg-close .pg-tagline{color:#E6B74B;}
/* .pg-close p (0,1,1) also out-specifies .pg-maturity (0,1,0); scope it (0,2,0)
   so the top margin wins and the maturity line gets breathing room under the CTA. */
.pg-close .pg-maturity{margin:40px auto 0;}

@media (max-width:880px){
  /* Mobile gutter: .pg-hero/.pg-section set the padding shorthand and clobber
     .pg-wrap's horizontal padding; restore an even 20px side gutter here. */
  .pg-wrap{padding-left:20px;padding-right:20px;}
  .pg-hero-grid{grid-template-columns:1fr;gap:36px;}
  .pg-band-grid{grid-template-columns:1fr;gap:28px;}
  .pg-packs{grid-template-columns:1fr;}
  .pg-table{font-size:14px;}
}