/* ==========================================================================
   SurePay — surepay.co
   Brand tokens measured from the live site. Plus Jakarta Sans throughout.
   ========================================================================== */

:root {
  /* brand */
  --indigo:      #4040D1;
  --indigo-lift: #5A56E8;
  --indigo-deep: #3A3ACB;
  --navy:        #101B36;
  --navy-deep:   #0A1226;
  --sky:         #50B3F6;
  --sky-soft:    #9FD3FA;

  /* neutrals */
  --ink:    #101B36;
  --body:   #56617A;
  --muted:  #68708A;
  --line:   #E4E7F2;
  --line-2: #E9EBF5;
  --paper:  #F5F6FC;
  --card:   #FFFFFF;

  /* status */
  --ok:      #177A46;  --ok-bg:   #E4F6EC;
  --warn:    #8A5F0D;  --warn-bg: #FFF3DC;
  --bad:     #B03225;  --bad-bg:  #FDE9E8;

  /* layout */
  --page:   1296px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 16px;

  /* type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1:   clamp(2.75rem, 6.2vw, 5.5rem);
  --h2:   clamp(2rem, 4.2vw, 3.75rem);
  --h3:   clamp(1.05rem, 1.4vw, 1.25rem);
  --lede: clamp(1rem, 1.25vw, 1.25rem);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #FFFFFF;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.032em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--indigo); text-decoration: none; transition: color .18s ease; }
a:hover { color: #2E2EA8; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px; background: #FFFFFF; color: var(--indigo);
  border-radius: 8px; font-weight: 700; transition: top .2s ease;
}
.skip:focus { top: 12px; }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
/* anchor targets must clear the fixed header */
[id] { scroll-margin-top: 110px; }

.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.num { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .16em; color: var(--indigo); margin-bottom: 1.25rem; }
.lede { font-size: var(--lede); line-height: 1.58; color: var(--body); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(32px, 4vw, 52px); flex-wrap: wrap; }
.section-head > :first-child { flex: 1 1 26rem; min-width: 0; max-width: 44rem; }
.section-head .lede { flex: 0 1 25rem; max-width: 42ch; padding-bottom: .5rem; }
.section-head h2 { font-size: var(--h2); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: 12px;
  font-size: 1rem; font-weight: 700; white-space: nowrap;
  transition: transform .16s ease, background-color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--light { background: #FFFFFF; color: #26268F; font-weight: 800; letter-spacing: -.005em; }
.btn--light:hover { background: #ECEDFB; color: #1C1C77; }
.btn--ghost { border: 1.5px solid rgba(255,255,255,.38); color: #FFFFFF; font-weight: 600; }
.btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.btn--solid { background: var(--indigo); color: #FFFFFF; }
.btn--solid:hover { background: #3232A8; color: #FFFFFF; }
.btn--sm { min-height: 46px; padding: 0 24px; font-size: .94rem; }

/* ── header ───────────────────────────────────────────────────────────── */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color .28s ease, padding .28s ease; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 24px; }
.brand { display: inline-flex; color: #FFFFFF; }
.brand svg { width: 124px; height: 46px; }
.brand:hover, .brand:focus-visible { color: #FFFFFF; opacity: .86; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav a { font-size: .94rem; font-weight: 600; color: #CFD2F7; }
.nav a:hover { color: #FFFFFF; }
/* the nav link colour (0,1,1) outranks .btn--light (0,1,0) — restate it */
.nav a.btn--light { color: #26268F; }
.nav a.btn--light:hover { color: #1C1C77; }

.nav-toggle { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.3); color: #FFFFFF; }
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% var(--gutter) auto; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px; border-radius: 16px;
    background: #23237E; border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 30px 60px -20px rgba(6,10,28,.6);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 12px; border-radius: 10px; font-size: 1rem; }
  .nav a:hover { background: rgba(255,255,255,.08); }
  .nav .btn { width: 100%; margin-top: 6px; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding-top: 94px; background: var(--indigo-deep); color: #FFFFFF; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(1100px 620px at 76% 6%, var(--indigo-lift) 0%, rgba(90,86,232,0) 62%);
}
.hero__mark { position: absolute; top: -250px; right: -270px; width: min(1120px, 96vw); color: #FFFFFF; opacity: .07; z-index: -1; pointer-events: none; }
/* A full-bleed <svg> filter overruns Chrome's filter-surface cap and only
   rasterises a rectangle in one corner — visible as a light block behind the
   logo. A 200px tile keeps the surface small and repeats seamlessly. */
.hero__grain { position: absolute; inset: 0; z-index: -1; opacity: .15;
  mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27200%27%20height%3D%27200%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 200px 200px; background-repeat: repeat; }

.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 56px); align-items: center; padding-block: clamp(48px, 6vw, 76px) clamp(56px, 7vw, 92px); }
.hero__copy { max-width: 42ch; }
.hero h1 { font-size: var(--h1); letter-spacing: -.042em; margin-bottom: 1.75rem; }
.hero h1 em { font-style: normal; color: var(--sky-soft); }
.hero .lede { color: #D2D5F7; margin-bottom: 2.25rem; max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.pill-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; margin-bottom: 2rem; font-size: .84rem; font-weight: 600; color: #E2E4FB; }
.pill-badge b { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; background: var(--sky); border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: #0B1020; }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: none; }
  .hero .lede { max-width: 50ch; }
}

/* ── hero routing animation ───────────────────────────────────────────── */
.rt-outer { display: flex; align-items: center; justify-content: center; height: 600px; width: 100%; overflow: visible; }
.rt { position: relative; width: 540px; height: 600px; flex: none; transform-origin: center; }
.rt__svg { position: absolute; inset: 0; }
.rt__line { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.rt__live { fill: none; stroke: #7FC4F8; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 26 300; animation: rt-flow 3.4s linear infinite; }
@keyframes rt-flow { to { stroke-dashoffset: -326; } }

.rt__dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #BFE4FF; box-shadow: 0 0 12px 3px rgba(127,196,248,.75); animation: rt-travel 3.4s linear infinite; }
@keyframes rt-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.rt__hub {
  position: absolute; left: 270px; top: 300px; width: 152px; height: 152px; margin: -76px 0 0 -76px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  /* no hard rim: the disc fades out so the routing lines dissolve into it
     rather than being covered by a pasted-on badge */
  background: radial-gradient(circle at 50% 45%,
      rgba(255,255,255,.16) 0%,
      rgba(150,146,247,.13) 46%,
      rgba(74,72,214,.07) 72%,
      rgba(74,72,214,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: rt-breathe 4.6s ease-in-out infinite;
}
.rt__hub::before {
  content: ""; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle, rgba(58,58,203,.55) 0%, rgba(58,58,203,.28) 58%, rgba(58,58,203,0) 100%);
  filter: blur(4px);
}
.rt__hub svg { position: relative; width: 56px; height: 69px; color: #FFFFFF; margin-left: -2px;
  filter: drop-shadow(0 0 10px rgba(127,196,248,.3)) drop-shadow(0 4px 10px rgba(8,14,34,.28)); }
@supports not (backdrop-filter: blur(3px)) { .rt__hub { background-color: rgba(58,58,203,.5); } }
@keyframes rt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.rt__ring { position: absolute; left: 270px; top: 300px; width: 152px; height: 152px; margin: -76px 0 0 -76px; border-radius: 50%; border: 1.5px solid rgba(159,211,250,.42); animation: rt-pulse 3.4s ease-out infinite; }
@keyframes rt-pulse { 0% { transform: scale(.86); opacity: .7; } 100% { transform: scale(2.5); opacity: 0; } }

.rt__node { position: absolute; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); font-size: .81rem; font-weight: 600; color: #EDEFFC; white-space: nowrap; animation: rt-bob 5.2s ease-in-out infinite; }
.rt__node i { width: 6px; height: 6px; border-radius: 50%; background: #7FC4F8; flex: none; }
@keyframes rt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* hover: the bob and breathe keyframes own `transform`, so the hover lift uses
   the independent `scale` property and composes with them instead of fighting */
.rt__node, .rt__hub { transition: scale .28s cubic-bezier(.22,.61,.36,1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease; }
/* the nodes can be nudged a little and spring back; `translate` is its own
   property so it stacks on the rt-bob keyframes rather than replacing them */
.rt__node { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: scale .28s cubic-bezier(.22,.61,.36,1), background-color .22s ease, border-color .22s ease; }
.rt__node.is-dragging { cursor: grabbing; transition: none; z-index: 3;
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); scale: 1.07; }
.rt__node:hover { scale: 1.07; background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.44); color: #FFFFFF; }
.rt__node:hover i { background: #BFE4FF; box-shadow: 0 0 10px 2px rgba(127,196,248,.8); }
.rt__hub:hover { scale: 1.1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.rt__hub svg { transition: filter .28s ease; }
.rt__hub:hover svg { filter: drop-shadow(0 0 18px rgba(127,196,248,.55)) drop-shadow(0 4px 10px rgba(8,14,34,.3)); }
@media (prefers-reduced-motion: reduce) { .rt__node:hover, .rt__hub:hover { scale: 1; } }

@media (max-width: 1080px) { .rt-outer { height: 520px; } .rt { transform: scale(.86); } }
@media (max-width: 900px)  { .rt-outer { height: 470px; } .rt { transform: scale(.78) translateX(-40px); } }
@media (max-width: 760px)  { .rt-outer { height: 420px; } .rt { transform: scale(.68) translateX(-40px); } }
@media (max-width: 480px)  { .rt-outer { height: 350px; } .rt { transform: scale(.56) translateX(-40px); } }

/* ── ticker ───────────────────────────────────────────────────────────── */
.ticker { background: var(--navy); color: #FFFFFF; overflow: hidden; }
.ticker .wrap { display: flex; align-items: center; gap: 40px; height: 76px; }
.ticker__label { flex: none; color: #8B97B8; }
.ticker__viewport { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 92%, transparent 100%); }
.ticker__track { display: flex; width: max-content; animation: ticker-run 46s linear infinite; }
.ticker__set { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker-run { from { transform: none; } to { transform: translateX(-50%); } }
.ticker__track span { font-size: .94rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.ticker__track i { color: var(--sky); font-style: normal; }
@media (max-width: 760px) { .ticker__label { display: none; } .ticker .wrap { height: 60px; gap: 20px; } .ticker__set { gap: 22px; padding-right: 22px; } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ── compare (rent vs own) ────────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.panel { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); border-radius: 22px; }
.panel--muted { border: 1px solid var(--line); background: #FAFBFE; }
.panel--dark { position: relative; overflow: hidden; background: var(--navy); color: #FFFFFF; }
.panel--dark .panel__mark { position: absolute; bottom: -180px; right: -140px; width: 470px; color: #FFFFFF; opacity: .05; pointer-events: none; }
.panel h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1.6rem; }
.panel--muted h3 { color: var(--muted); }
.panel__list li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); font-size: 1rem; line-height: 1.5; color: var(--body); }
.panel--dark .panel__list li { border-top-color: rgba(255,255,255,.13); color: #E4E7F7; position: relative; }
.panel__list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* ── feature grid / bento ─────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid { grid-template-columns: minmax(0, 1fr); } }

.cell { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.cell svg { width: 26px; height: 26px; color: var(--indigo); }
.cell h3 { font-size: var(--h3); }
.cell p { font-size: .94rem; line-height: 1.58; color: var(--body); }
.cell--wide { grid-column: span 2; }
@media (max-width: 640px) { .cell--wide { grid-column: span 1; } }
.cell--indigo { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; }
.cell--indigo svg { color: #FFFFFF; }
.cell--indigo p { color: #D6D8F8; }
.cell--navy { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.cell--navy svg { color: var(--sky); }
.cell--navy p { color: #A4AECB; }

/* ── split (media + copy) ─────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split--flip > :first-child { order: 2; } }
.shot { border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -34px rgba(16,27,54,.5); }
.dark .shot { box-shadow: 0 40px 80px -30px rgba(5,10,26,.7); }

/* fixed-ratio media box — the image can never run longer than the copy */
.mediabox { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #0C1730; box-shadow: 0 40px 80px -30px rgba(5,10,26,.7); }
.mediabox__item { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); transform: scale(1.03); display: flex; align-items: center; justify-content: center; }
.mediabox__item.is-on { opacity: 1; visibility: visible; transform: none; }
.mediabox__item > img { width: 100%; height: 100%; object-fit: cover; }
.mediabox__item .devframe { height: 84%; padding: 8px; background: #0B1020; border-radius: 26px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.mediabox__item .devframe img { height: 100%; width: auto; border-radius: 19px; }
.mediabox__item:nth-child(n+2)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #1D2C55 0%, #0C1730 70%); z-index: -1; }

.beats { display: flex; flex-direction: column; gap: 6px; }
.beat { position: relative; display: block; width: 100%; text-align: left; padding: 16px 0 18px 22px; border-left: 2px solid rgba(255,255,255,.14); opacity: .5; transition: opacity .3s ease, border-color .3s ease; }
.beat:hover { opacity: .82; }
.beat.is-on { opacity: 1; border-left-color: transparent; }
/* light sections by default; the .dark variant flips to white */
.beat { border-left-color: var(--line); }
.beat h3 { font-size: var(--h3); margin-bottom: .35rem; color: var(--ink); }
.beat p { font-size: .94rem; line-height: 1.58; color: var(--body); }
.dark .beat { border-left-color: rgba(255,255,255,.14); }
.dark .beat h3 { color: #FFFFFF; }
.dark .beat p { color: #A4AECB; }
.beat__bar { position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--indigo); transform: scaleY(0); transform-origin: top; }
.dark .beat__bar { background: var(--sky); }
.beat.is-on .beat__bar { animation: beat-fill 6s linear forwards; }
.beats.is-paused .beat.is-on .beat__bar { animation-play-state: paused; }
@keyframes beat-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .beat.is-on .beat__bar { animation: none; transform: scaleY(1); } }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 2rem; }
@media (max-width: 520px) { .checks { grid-template-columns: minmax(0, 1fr); } }
.checks li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; font-size: .94rem; font-weight: 600; }
.checks svg { flex: none; width: 19px; height: 19px; color: var(--indigo); }

/* ── dark band ────────────────────────────────────────────────────────── */
.dark { position: relative; background: var(--navy); color: #FFFFFF; overflow: hidden; isolation: isolate; }
.dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 16% 0%, #1D2C55 0%, rgba(29,44,85,0) 64%); }
.dark .num { color: var(--sky); }
.dark .lede { color: #A4AECB; }
.tint { background: var(--paper); border-block: 1px solid var(--line-2); }

/* ── portal demo ──────────────────────────────────────────────────────── */
.demo-flag { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; color: var(--indigo); }
.demo-flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.browser { border-radius: 16px; overflow: hidden; border: 1px solid #DFE3EF; box-shadow: 0 44px 90px -32px rgba(16,27,54,.34); background: #FFFFFF; }
.browser__bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 18px; background: #EDEFF7; border-bottom: 1px solid #E0E4F0; }
.browser__dots { display: flex; gap: 7px; }
.browser__dots span { width: 11px; height: 11px; border-radius: 50%; background: #D6DAE6; }
.browser__url { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px; background: #FFFFFF; border: 1px solid #E2E6F0; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.browser__url svg { width: 12px; height: 12px; }

.app { display: flex; min-height: 486px; }
.app__side { flex: none; width: 232px; padding: 24px 0; background: var(--navy); }
.app__brand { padding: 0 22px 24px; color: #FFFFFF; }
.app__brand svg { width: 96px; height: 36px; }
.app__nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 22px; border-left: 3px solid transparent; font-size: .88rem; font-weight: 500; color: #9AA5C4; text-align: left; transition: background-color .16s ease, color .16s ease; }
.app__nav button i { width: 6px; height: 6px; border-radius: 50%; background: #4A5578; flex: none; transition: background-color .16s ease; }
.app__nav button:hover { color: #FFFFFF; background: rgba(255,255,255,.04); }
.app__nav button[aria-current="page"] { background: rgba(80,179,246,.14); border-left-color: var(--sky); color: #FFFFFF; font-weight: 700; }
.app__nav button[aria-current="page"] i { background: var(--sky); }

.app__main { flex: 1 1 auto; min-width: 0; padding: 26px 30px 34px; }
.app__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.app__head h3 { font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: .2rem; }
.app__head p { font-size: .82rem; color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpis div { padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; }
.kpis dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; }
.kpis dd { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.kpis .ok { color: var(--ok); }

.chips { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chips button { display: flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid #E2E6F0; border-radius: 8px; background: #FFFFFF; font-size: .81rem; font-weight: 600; color: var(--body); transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.chips button:hover { border-color: #C6CCE0; }
.chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; font-weight: 700; }
.chips .count { font-size: .81rem; color: var(--muted); margin-left: 6px; }

.table { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.table__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr .9fr .9fr; gap: 8px; padding: 13px 18px; align-items: center; border-bottom: 1px solid #F2F4F9; }
.table__row:last-child { border-bottom: 0; }
.table__row--head { background: #F6F7FC; border-bottom: 1px solid var(--line-2); padding-block: 11px; }
.table__row--head span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.table__row span { font-size: .84rem; color: var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.table__row .ref { font-weight: 600; color: var(--ink); }
.table__row .amt { font-weight: 700; text-align: right; color: var(--ink); }
.tag { display: inline-flex; padding: 3px 10px; border-radius: 6px; font-size: .74rem; font-weight: 700; }
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--bad { background: var(--bad-bg); color: var(--bad); }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; border: 1px dashed #DDE1EE; border-radius: 14px; background: #FBFCFE; text-align: center; padding: 24px; }
.empty svg { width: 30px; height: 30px; color: #B7BFD2; margin-bottom: 14px; }
.empty strong { font-size: 1rem; margin-bottom: .3rem; }
.empty span { font-size: .84rem; color: var(--muted); }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .app__side { width: 100%; padding-bottom: 12px; }
  .app__nav { display: flex; overflow-x: auto; gap: 4px; padding: 0 14px 4px; }
  .app__nav button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; padding: 10px 12px; }
  .app__nav button[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--sky); }
  .app__main { padding: 22px 18px 26px; }
  .table__row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .table__row--head { display: none; }
  .table__row .dev { display: none; }
  .table__row .amt { text-align: right; }
}

/* ── coverage + stack ─────────────────────────────────────────────────── */
.cover { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255,255,255,.13); }
@media (max-width: 900px) { .cover { grid-template-columns: minmax(0, 1fr); } }
.cover__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .cover__cards { grid-template-columns: minmax(0, 1fr); } }
.cover__cards article { padding: 28px 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; }
.cover__cards h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.cover__cards em { font-style: normal; display: block; font-size: .82rem; font-weight: 700; color: var(--sky); margin-bottom: 1rem; }
.cover__cards li { font-size: .9rem; line-height: 1.9; color: #B9C1D9; }

.stack { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: clamp(30px, 4vw, 48px); }
@media (max-width: 900px) { .stack { grid-template-columns: minmax(0, 1fr); } }
.stack__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .stack__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stack__items dt { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--sky); margin-bottom: .4rem; }
.stack__items dd { margin: 0; font-size: 1.1rem; font-weight: 800; }

/* ── cta ──────────────────────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: var(--indigo-deep); color: #FFFFFF; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 20% 100%, var(--indigo-lift) 0%, rgba(90,86,232,0) 62%); }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 5vw, 80px); flex-wrap: wrap; }
.cta h2 { font-size: var(--h2); margin-bottom: 1.1rem; }
.cta .lede { color: #D2D5F7; max-width: 46ch; }
.cta__actions { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.cta__actions .btn { width: 100%; }

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy-deep); color: #FFFFFF; padding-block: clamp(44px, 5vw, 64px) 30px; }
.site-footer a { color: #8E99B8; font-size: .9rem; }
.site-footer a:hover { color: #FFFFFF; }
.foot__top { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-bottom: clamp(32px, 4vw, 46px); }
@media (max-width: 900px) { .foot__top { grid-template-columns: minmax(0, 1fr); } }
.foot__brand svg { width: 124px; height: 46px; color: #FFFFFF; margin-bottom: 1.1rem; }
.foot__brand p { font-size: .9rem; line-height: 1.6; color: #8E99B8; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 52px); }
@media (max-width: 700px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot__cols h2 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.foot__cols li + li { margin-top: .7rem; }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; font-size: .84rem; color: #8B97B8; }
.foot__base ul { display: flex; gap: 26px; flex-wrap: wrap; }

/* ── motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rt__dot { opacity: 1; offset-distance: 62%; }
  .rt__ring { opacity: .25; transform: scale(1.5); }
}

/* ── scroll reveal ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── live feed row entrance ───────────────────────────────────────────── */
@keyframes row-in {
  0%   { opacity: 0; transform: translateY(-10px); background: rgba(80,179,246,.16); }
  60%  { opacity: 1; transform: none; background: rgba(80,179,246,.10); }
  100% { background: transparent; }
}
.table__row.is-new { animation: row-in 1.1s cubic-bezier(.22,.61,.36,1) both; }
.table__row.is-new .ref::after {
  content: "LIVE"; display: inline-block; margin-left: 8px; padding: 1px 6px;
  border-radius: 4px; background: var(--sky); color: #06122A;
  font-size: .58rem; font-weight: 800; letter-spacing: .1em; vertical-align: middle;
  animation: live-fade 4s ease forwards;
}
@keyframes live-fade { 0%,55% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .table__row.is-new { animation: none; } .table__row.is-new .ref::after { display: none; } }

/* the demo flag dot breathes while the feed runs */
.demo-flag i { animation: flag-pulse 2s ease-in-out infinite; }
@keyframes flag-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(30,158,90,.55); } 70% { box-shadow: 0 0 0 7px rgba(30,158,90,0); } }

/* KPI figures tick over without reflowing the card */
.kpis dd { font-variant-numeric: tabular-nums; transition: color .3s ease; }

/* ── sticky-ish header treatment ──────────────────────────────────────── */
body.is-scrolled .site-header { background: rgba(35,35,126,.88); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(255,255,255,.1); }
body.is-scrolled .site-header .wrap { padding-block: 14px; }

/* ── lift on hover ────────────────────────────────────────────────────── */
.cell, .cover__cards article, .checks li { transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease, box-shadow .22s ease; }
.cell:hover { transform: translateY(-4px); border-color: #CDD3EA; box-shadow: 0 18px 36px -22px rgba(16,27,54,.4); }
.cell--indigo:hover, .cell--navy:hover { border-color: transparent; box-shadow: 0 22px 44px -22px rgba(16,27,54,.6); }
.cover__cards article:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.32); }
.checks li:hover { border-color: #C3CAE4; }
.shot img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.shot:hover img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .cell:hover, .cover__cards article:hover { transform: none; } .shot:hover img { transform: none; } }

/* ══ interior page hero ══════════════════════════════════════════════════ */
.hero--page .hero__page { padding-block: clamp(48px, 6vw, 84px) clamp(56px, 7vw, 96px); }
.hero--page h1, .hero--page .lede, .hero--page .num { max-width: 40ch; }
.hero--page h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); letter-spacing: -.04em; margin-bottom: 1.4rem; }
.hero--page .lede { color: #D2D5F7; max-width: 46ch; margin-bottom: 2rem; }
.num--sky { color: var(--sky); }
.cell__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 1rem; font-size: .9rem; font-weight: 700; color: #FFFFFF; }
.cell__link:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.cell__link svg { width: 15px; height: 15px; }

/* tick bullets used across panels and lists */
.tick { display: inline-flex; flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--sky); }
.tick svg { width: 100%; height: 100%; }
.panel__list--light li { color: var(--body); border-top-color: var(--line-2); }
.panel__list--light .tick { color: var(--indigo); }
.beats--static div { opacity: 1; border-left: 2px solid var(--line); padding: 14px 0 14px 22px; }
.beats--static h3 { color: var(--ink); font-size: var(--h3); margin-bottom: .35rem; }
.beats--static p { color: var(--body); font-size: .94rem; line-height: 1.58; }

.callout { margin-top: 1.5rem; padding: 16px 22px; border-radius: 12px; background: var(--indigo-pale, #EEEFFB); color: #2E2EA8; font-size: .94rem; font-weight: 600; }
.callout--wide { margin-top: 2rem; }
.callout b { font-weight: 800; }

/* ══ proof band ══════════════════════════════════════════════════════════ */
.proof { padding-block: clamp(40px, 5vw, 64px); background: var(--navy); color: #FFFFFF; }
.proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; }
@media (max-width: 860px) { .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof__grid div { border-top: 2px solid rgba(80,179,246,.5); padding-top: 18px; }
.proof__grid dt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: .6rem; }
.proof__grid dd { margin: 0 0 .5rem; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.proof__grid dd i { font-size: .55em; font-style: normal; margin-left: .04em; letter-spacing: 0; }
.proof__grid p { font-size: .86rem; line-height: 1.5; color: #A4AECB; }
.proof__note { margin-top: 2rem; font-size: .86rem; color: #8E99B8; }

/* ══ comparison table ════════════════════════════════════════════════════ */
.cmp { margin-top: 2rem; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.cmp__row { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 10px; padding: 14px 22px; border-bottom: 1px solid #F2F4F9; align-items: center; }
.cmp__row:last-child { border-bottom: 0; }
.cmp__row:nth-child(even) { background: #FAFBFE; }
.cmp__row span { font-size: .9rem; color: var(--body); }
.cmp__row [role="rowheader"] { font-weight: 700; color: var(--ink); }
.cmp__row .dash { color: #C4C9D8; }
.cmp__row--head { background: var(--navy) !important; padding-block: 12px; }
.cmp__row--head span { color: #FFFFFF; font-weight: 700; font-size: .84rem; }
@media (max-width: 760px) {
  .cmp__row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .cmp__row--head { display: none; }
  .cmp__row [role="rowheader"] { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}

/* ══ feature matrix ══════════════════════════════════════════════════════ */
.mx__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.mx__search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px; }
.mx__search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.mx__search input { width: 100%; height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; font: inherit; font-size: .9rem; color: var(--ink); }
.mx__search input:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: transparent; }
.mx__count { font-size: .84rem; color: var(--muted); margin-left: auto; }

.mx { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.mx__head { display: grid; grid-template-columns: 1fr repeat(3, 108px); gap: 8px; padding: 12px 22px; background: var(--navy); position: sticky; top: 84px; z-index: 5; }
.mx__head span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: #FFFFFF; }
.mx__head span + span { text-align: center; color: var(--sky); }
.mx__group { padding: 16px 22px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); background: #FAFBFE; border-top: 1px solid var(--line-2); }
.mx__row { display: grid; grid-template-columns: 1fr repeat(3, 108px); gap: 8px; padding: 11px 22px; border-top: 1px solid #F2F4F9; align-items: center; }
.mx__row:hover { background: #FAFBFE; }
.mx__row > span:first-child { font-size: .9rem; color: var(--ink); }
.mx__row i { display: block; text-align: center; font-style: normal; }
.mx__row .y { color: var(--indigo); font-weight: 800; }
.mx__row .n { color: #D2D7E4; }
.mx__empty { padding: 40px 22px; text-align: center; color: var(--muted); font-size: .92rem; }
@media (max-width: 700px) {
  .mx__head, .mx__row { grid-template-columns: 1fr repeat(3, 56px); padding-inline: 14px; }
  .mx__head span { font-size: .6rem; letter-spacing: .04em; }
  .mx__row > span:first-child { font-size: .84rem; }
}

/* ══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; text-align: left; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 700; color: var(--ink); }
.faq__q:hover { color: var(--indigo); }
.faq__chev { flex: none; width: 20px; height: 20px; color: var(--indigo); transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 0 24px; max-width: 68ch; font-size: .98rem; line-height: 1.65; color: var(--body); }
.faq__a:not([hidden]) { animation: faq-open .32s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq__a:not([hidden]) { animation: none; } .faq__chev { transition: none; } }

/* ══ steps ═══════════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: 16px; background: #FFFFFF; }
.steps__n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--indigo-pale, #EEEFFB); color: var(--indigo); font-weight: 800; font-size: .95rem; }
.steps h3 { font-size: var(--h3); margin-bottom: .4rem; }
.steps p { font-size: .92rem; line-height: 1.56; color: var(--body); }

/* ══ code sample ═════════════════════════════════════════════════════════ */
.code { margin: 0; border-radius: 18px; overflow: hidden; background: #0C1424; box-shadow: 0 34px 70px -30px rgba(5,10,26,.6); }
.code figcaption { display: flex; align-items: center; gap: 10px; padding: 13px 20px; background: #111C33; color: #9AA5C4; font-size: .8rem; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.07); }
.code__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.code pre { margin: 0; padding: 22px 20px 26px; overflow-x: auto; }
.code code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: .8rem; line-height: 1.72; color: #C7D0E6; white-space: pre; }
.c-k { color: var(--sky); } .c-s { color: #9FE6B4; } .c-p { color: #C4A9F5; }
.c-c { color: #7E8BAB; font-style: italic; } .c-g { color: #6FDF9B; }

/* ══ contact ═════════════════════════════════════════════════════════════ */
.contact__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
.contact__list li { display: flex; align-items: flex-start; gap: 12px; font-size: .94rem; color: var(--body); }
.contact__list .tick { color: var(--indigo); }
.contact__direct { display: flex; gap: 40px; margin: 0; }
.contact__direct dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.contact__direct dd { margin: 0; font-size: 1rem; font-weight: 700; }

.form { padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF; box-shadow: 0 30px 60px -34px rgba(16,27,54,.3); }
.form__row { margin-bottom: 16px; }
.form__row label { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.form__row .opt { font-weight: 500; color: var(--muted); }
.form input, .form select, .form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; font: inherit; font-size: .94rem; color: var(--ink); }
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: transparent; }
.form [aria-invalid="true"] { border-color: var(--bad); }
.form__err { min-height: 0; font-size: .8rem; color: var(--bad); }
.form__err:not(:empty) { margin-top: 5px; }
.form .btn { width: 100%; margin-top: 6px; }
.form__note { margin-top: 12px; font-size: .86rem; color: var(--body); }
.form__note.is-ok { color: var(--ok); font-weight: 600; }
.form__note.is-bad { color: var(--bad); font-weight: 600; }

/* honeypot — off-screen rather than display:none, which more bots skip.
   aria-hidden + tabindex="-1" keep it away from assistive tech and the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* reCAPTCHA v3 badge is suppressed, so Google's terms require the attribution
   below the form instead. Do not remove one without the other. */
.grecaptcha-badge { visibility: hidden; }
.form__legal { margin-top: 14px; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.form__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.form__legal a:hover { color: var(--indigo); }

.form[aria-busy="true"] { opacity: .72; }
.form button[disabled] { cursor: progress; }

/* the routing diagram sits in a wider frame so the left-hand labels are not
   clipped by the overflow guard; the drawing itself is offset inside it */
.rt--wide { width: 620px; }
.rt__stage { position: absolute; left: 80px; top: 0; width: 540px; height: 600px; }

/* ══ portal · virtual terminal ═══════════════════════════════════════════ */
.vt { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .vt { grid-template-columns: minmax(0, 1fr); } }
.vt__row { margin-bottom: 14px; }
.vt__row label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vt__row input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #FFFFFF; }
.vt__row input:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: transparent; }
.vt__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vt__amt { position: relative; display: flex; align-items: center; }
.vt__amt span { position: absolute; left: 13px; font-weight: 700; color: var(--muted); }
.vt__amt input { padding-left: 28px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

.vt__side { padding: 20px; border: 1px solid var(--line-2); border-radius: 14px; background: #FAFBFE; }
.vt__side h4 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.vt__line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .88rem; color: var(--body); }
.vt__line b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vt__line--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.vt__line--total b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.vt__side .btn { width: 100%; margin-top: 14px; min-height: 46px; font-size: .92rem; }
.vt__note { margin-top: 10px; font-size: .76rem; line-height: 1.45; color: var(--muted); }

.vt-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 34px; border: 1px solid var(--line-2); border-radius: 14px; background: #FAFBFE; }
.vt-done__tick { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 16px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.vt-done__tick svg { width: 30px; height: 30px; }
.vt-done strong { font-size: 1.15rem; margin-bottom: .2rem; }
.vt-done__amt { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.vt-done__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 560px; margin: 0 0 20px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .vt-done__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vt-done__meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.vt-done__meta dd { margin: 0; font-size: .9rem; font-weight: 700; }
.vt-done__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vt-ghost { border: 1px solid var(--line); color: var(--body); background: #FFFFFF; }
.vt-ghost:hover { border-color: #C6CCE0; color: var(--ink); }

/* ══ portal · simple tables and report ═══════════════════════════════════ */
.ptbl { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.ptbl__row { display: grid; grid-template-columns: 1.3fr .7fr 1fr .9fr .8fr; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #F2F4F9; align-items: center; }
.ptbl__row:last-child { border-bottom: 0; }
.ptbl__row span { font-size: .86rem; color: var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ptbl__row span:first-child { font-weight: 600; color: var(--ink); }
.ptbl__row--head { background: #F6F7FC; border-bottom: 1px solid var(--line-2); }
.ptbl__row--head span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px) {
  .ptbl__row { grid-template-columns: 1fr auto; row-gap: 3px; }
  .ptbl__row--head { display: none; }
  .ptbl__row span:nth-child(3), .ptbl__row span:nth-child(4) { font-size: .78rem; color: var(--muted); }
}

.rep h4 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.rep__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 46px; gap: 14px; align-items: center; margin-bottom: 12px; }
@media (max-width: 640px) { .rep__row { grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px; } }
.rep__row span { font-size: .86rem; color: var(--body); }
.rep__row b { font-size: .86rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rep__bar { height: 10px; border-radius: 5px; background: #EDEFF7; overflow: hidden; }
.rep__bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--indigo), var(--sky)); animation: rep-grow .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rep-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rep__bar i { animation: none; } }
.rep__note { margin-top: 18px; font-size: .78rem; color: var(--muted); }

/* ── contact hero: supporting detail beside the headline ─────────────────── */
.hero__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .hero__split { grid-template-columns: minmax(0, 1fr); } }
.hero__facts { display: grid; gap: 2px; padding: 22px 24px 24px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(2px); }
.hero__facts h2 { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-soft); margin-bottom: 1rem; }
.hero__facts dl { display: grid; gap: 14px; margin: 0; }
.hero__facts dt { font-size: .95rem; font-weight: 700; color: #FFFFFF; }
.hero__facts dd { margin: .15rem 0 0; font-size: .88rem; line-height: 1.5; color: #C3C7F2; }
.hero__facts .hero__reply { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .84rem; color: #C3C7F2; }
.hero__facts .hero__reply b { color: #FFFFFF; }

/* the row the header action just added */
.ptbl__row--fresh { animation: ptbl-in .8s ease both; }
@keyframes ptbl-in { from { background: #EAF3FF; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ptbl__row--fresh { animation: none; background: #F4F8FF; } }

/* filter chips sit on the same row as the search box — match its height */
.mx__controls .chips { margin-bottom: 0; }
.mx__controls .chips button { height: 40px; padding: 0 16px; border-radius: 10px; font-size: .86rem; }

/* contact: the copy tops out with the form, not centred against it */
#contact .split { align-items: start; }

/* ══ developers: inline code, API tables ═════════════════════════════════ */
code.inline { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .86em; padding: .12em .38em; border-radius: 5px;
  background: rgba(64,64,209,.08); color: var(--indigo-deep); white-space: nowrap; }
.dark code.inline, .cmp__row--head code.inline { background: rgba(255,255,255,.12); color: #CBD5F5; }

.cmp--api .cmp__row { grid-template-columns: 1fr 1.55fr .5fr 1.85fr; align-items: start; }
.cmp--api .cmp__row span { line-height: 1.5; }
.cmp--api .cmp__row:not(.cmp__row--head) span:nth-child(3) { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.cmp--codes .cmp__row { grid-template-columns: .55fr 1.25fr 2fr; align-items: start; }
.cmp--codes .cmp__row span { line-height: 1.5; }
.cmp__note { margin-top: 1rem; font-size: .84rem; line-height: 1.6; color: var(--muted); }
.cmp__note code.inline { white-space: normal; }
@media (max-width: 900px) {
  .cmp--api .cmp__row, .cmp--codes .cmp__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .cmp--api .cmp__row--head, .cmp--codes .cmp__row--head { display: none; }
  .cmp--api .cmp__row span:nth-child(3)::after { content: " endpoints"; font-weight: 400; color: var(--muted); }
  code.inline { white-space: normal; word-break: break-word; }
}

/* State is carried by colour, not opacity: a .5 alpha on body text dropped the
   inactive beats to 2.93:1 against white, well under the 4.5:1 floor. */
.beat { opacity: 1; transition: color .3s ease, border-color .3s ease; }
.beat h3, .beat p { color: var(--muted); transition: color .3s ease; }
.beat.is-on h3 { color: var(--ink); }
.beat.is-on p { color: var(--body); }
.dark .beat h3, .dark .beat p { color: #98A4C2; }
.dark .beat.is-on h3 { color: #FFFFFF; }
.dark .beat.is-on p { color: #C3CBE0; }

/* the stage is inset 80px inside a 620px frame, so once the copy stacks above
   it the drawing reads 40px right of centre — pull it back */
@media (max-width: 900px) { .hero__inner { justify-items: center; } }

/* ══ legal pages ═════════════════════════════════════════════════════════ */
.legal { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } }

.legal__toc { position: sticky; top: 110px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 16px; background: #FAFBFE; }
@media (max-width: 900px) { .legal__toc { position: static; } }
.legal__toc h2 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.legal__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.legal__toc li + li { margin-top: 9px; }
.legal__toc a { font-size: .86rem; line-height: 1.4; color: var(--body); }
.legal__toc a:hover { color: var(--indigo); }

.legal__meta { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.legal__meta b { color: var(--ink); }
.legal__sec { padding-top: 34px; }
.legal__sec h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-bottom: .9rem; }
.legal__sec h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }
.legal__sec p { margin-bottom: .95rem; font-size: .96rem; line-height: 1.72; color: var(--body); max-width: 68ch; }
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec b { color: var(--ink); }
.legal__list { display: grid; gap: 10px; margin: 0 0 1.1rem; max-width: 68ch; }
.legal__list li { position: relative; padding-left: 22px; font-size: .96rem; line-height: 1.66; color: var(--body); }
.legal__list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.legal__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin: 0; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 16px; background: #FAFBFE; }
.legal__contact dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.legal__contact dd { margin: 0; font-size: .94rem; line-height: 1.6; font-weight: 600; color: var(--ink); }

/* legal fill-ins: loud on purpose, so none of them ship by accident */
.fillin { padding: .1em .4em; border-radius: 5px; background: var(--warn-bg);
  color: var(--warn); font-size: .9em; letter-spacing: .02em; white-space: nowrap; }

/* ══ footer social row ═══════════════════════════════════════════════════ */
.foot__social { display: flex; gap: 10px; margin-top: 20px; }
.foot__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.16); color: #B9C0DC;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease; }
.foot__social a:hover { color: #FFFFFF; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); transform: translateY(-2px); }
.foot__social svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .foot__social a:hover { transform: none; } }


/* ══ accessibility ═══════════════════════════════════════════════════════ */
/* links inside running text carry an underline, so they are distinguishable
   without relying on colour (WCAG 1.4.1) */
.legal__sec p a, .legal__sec li a, .cmp__note a, .doc__foot a,
.ep__copy p a, .fam__head p a, .beats--static p a, .callout a, .faq__a a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.legal__sec p a:hover, .cmp__note a:hover, .doc__foot a:hover, .ep__copy p a:hover { text-decoration-thickness: 2px; }

/* scrollable panes need to be reachable from the keyboard (WCAG 2.1.1) */
.code pre:focus-visible, .cb pre:focus-visible, .dt__wrap:focus-visible, .mx:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px;
}

/* the second <dd> in a stat block — kept in the list so the dl stays valid */
.proof__grid dd.proof__hint { margin: 0; font-size: .86rem; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; color: #A4AECB; font-variant-numeric: normal; }

/* ══ error pages ═════════════════════════════════════════════════════════ */
.err { padding-block: clamp(72px, 11vw, 140px) clamp(64px, 9vw, 120px);
  background: var(--indigo-deep); color: #FFFFFF; position: relative; overflow: hidden; }
.err::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(1000px 560px at 74% 0%, var(--indigo-lift) 0%, rgba(90,86,232,0) 62%); }
.err .wrap { position: relative; z-index: 1; }
.err__code { font-size: clamp(4.5rem, 15vw, 11rem); font-weight: 800; line-height: .86;
  letter-spacing: -.06em; color: rgba(255,255,255,.17); margin-bottom: .02em;
  font-variant-numeric: tabular-nums; }
.err h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -.04em; margin-bottom: 1.1rem; max-width: 18ch; }
.err .lede { color: #D2D5F7; max-width: 56ch; }
.err__from { margin-top: 1rem; font-size: .9rem; color: #B8BCF0; word-break: break-all; }
.err__from b { color: #FFFFFF; font-weight: 600; }

.err__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 900px) { .err__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .err__links { grid-template-columns: minmax(0, 1fr); } }
.err__links a { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px;
  border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #FFFFFF; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.err__links a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4);
  transform: translateY(-3px); color: #FFFFFF; }
.err__links h2 { font-size: 1.02rem; margin-bottom: .4rem; }
.err__links p { font-size: .86rem; line-height: 1.5; color: #C3C7F2; flex: 1; }
.err__links svg { width: 19px; height: 19px; margin-top: 14px; color: var(--sky-soft); }
.err__note { margin-top: clamp(32px, 4vw, 48px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.16); font-size: .88rem; line-height: 1.65;
  color: #B8BCF0; max-width: 68ch; }
.err__note a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .err__links a:hover { transform: none; } }


/* WCAG 2.2 target size (2.5.8): nav and footer links rendered 18px tall, under
   the 24px floor. Padding is vertical only, so nothing moves. */
.nav a { padding-block: 6px; }
.site-footer a { display: inline-block; padding-block: 4px; }
.foot__cols li + li { margin-top: .35rem; }
.foot__base ul { gap: 12px 26px; }

/* ══ client-side routing ═════════════════════════════════════════════════ */
.route-bar { position: fixed; inset: 0 auto auto 0; z-index: 200; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left; background: var(--sky);
  transition: transform 1.6s cubic-bezier(.15,.85,.3,1), opacity .24s ease; opacity: 1; }
.route-bar.is-on { transform: scaleX(.85); }
@media (prefers-reduced-motion: reduce) { .route-bar { transition: opacity .24s ease; } }
#main:focus { outline: none; }