/* ============================================================
   SXAccess — site stylesheet
   Bilingual static site (EN + DE). Content lives in content/<locale>/*.json;
   this file holds design tokens, layout and animation only.

   One selector, one rule: every selector is declared exactly once per
   @-context. A second copy would silently outrank the first, which is how two
   rendering bugs got in here before — editing the obvious rule changed nothing
   on the page. tools/check.py fails the build if a duplicate reappears.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* neutral ramp */
  --n-000:#fdfefe; --n-025:#f5f9f9; --n-050:#eef4f4; --n-100:#e3ebeb;
  --n-150:#d6e0e0; --n-200:#c9d5d5; --n-300:#adbcbc; --n-400:#8b9c9c;
  --n-500:#6d7d7d; --n-600:#536161; --n-700:#3c4949; --n-750:#313d3d;
  --n-800:#263131; --n-850:#1d2727; --n-900:#16201f; --n-925:#121b1b;
  --n-950:#0e1717; --n-975:#0b1313; --n-1000:#081010;

  /* semantic — light */
  --bg: var(--n-000);
  --fg: var(--n-1000);
  --fg-2: var(--n-800);
  --fg-3: var(--n-700);
  --fg-4: var(--n-600);
  --muted: var(--n-050);
  --card-2: var(--n-050);
  --border: var(--n-150);
  --border-2: var(--n-200);
  --hairline: var(--n-100);

  --primary:#0d9488;
  --ring:#0d9488;
  --warning:#a85e00;
  --btn-bg:#0f766e;
  --btn-bg-h:#115e56;
  --btn-fg:#fff;
  --accent:#0d94881a;
  --accent-fg:#0d5c54;
  --link:#0d5c54;

  --sx-accent: var(--primary);
  --sx-accent-2:#38bdf8;
  --sx-grad-2:#0284c7;
  --sx-ground: var(--bg);
  --sx-grain: .055;
  --sx-glow: color-mix(in srgb, var(--sx-accent) 42%, transparent);
  --sx-hair-mix: 30%;
  --sx-hair: color-mix(in srgb, var(--sx-accent) var(--sx-hair-mix), transparent);
  --sx-glass:#ffffff94;
  --sx-glass-2:#ffffffc7;
  --sx-glass-border:#08181817;
  --sx-glass-hi:#fffffff2;
  --sx-glass-shadow:0 1px 2px #0818180a, 0 12px 40px -18px #08181838;
  --sx-chrome:#fff;
  --sx-fig-ground:#fbfdfd;
  --sx-lift: color-mix(in srgb, var(--sx-accent) 7%, transparent);
  --sx-lift-edge:#ffffffd9;
  --sx-card-shadow:0 1px 2px #0818180d, 0 10px 30px -16px #0818182e;
  --sx-rule:#0922220b;
  --sx-bd-line:#0d948829;
  --sx-bd-node:#0d948857;
  --sx-orb-a:.18; --sx-orb-b:.14; --sx-orb-c:.12;

  --sev-high:#c23c3c;
  --online:#008854;

  --sx-display: clamp(40px, 6.2vw, 78px);
  --sx-h2: clamp(28px, 3.4vw, 46px);
  --sx-radius: 22px;
  --sx-ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--n-1000);
  --fg: var(--n-050);
  --fg-2: var(--n-200);
  --fg-3: var(--n-300);
  --fg-4: var(--n-400);
  --muted: var(--n-850);
  --card-2: var(--n-900);
  --border: var(--n-600);
  --border-2: var(--n-500);
  --hairline: var(--n-750);

  --primary:#2dd4bf;
  --ring:#2dd4bf;
  --warning:#d28e32;
  --btn-bg:#0f766e;
  --btn-bg-h:#14b8a6;
  --accent:#2dd4bf1f;
  --accent-fg:#5eead4;
  --link:#5eead4;

  --sx-accent-2:#22d3ee;
  --sx-grad-2:#22d3ee;
  --sx-hair-mix: 22%;
  --sx-ground: var(--bg);
  --sx-grain: .07;
  --sx-glass:#142020d1;
  --sx-glass-2:#101a1af0;
  --sx-glass-border:#ffffff2b;
  --sx-glass-hi:#ffffff1a;
  --sx-glass-shadow:0 1px 2px #0006, 0 18px 50px -20px #0009;
  --sx-chrome:#151f20;
  --sx-fig-ground:#0e1819;
  --sx-lift:#ffffff10;
  --sx-lift-edge:#ffffff12;
  --sx-card-shadow: none;
  --sx-rule:#ffffff09;
  --sx-bd-line:#2dd4bf3d;
  --sx-bd-node:#2dd4bf8a;
  --sx-orb-a:.26; --sx-orb-b:.2; --sx-orb-c:.16;

  --sev-high:#ed756e;
  --online:#59b483;

  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }

/* form controls do not inherit the page family on their own */
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
a { color: var(--link); }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--btn-bg); color: #fff; z-index: 200; text-decoration: none;
}
.skip-link:focus { left: 12px; }

:where(a, button, summary, details):focus-visible {
  outline: 2px solid var(--sx-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. Ambient backdrop ---------- */
.sx-backdrop {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden; contain: strict;
  background:
    radial-gradient(110% 60% at 18% -10%, color-mix(in srgb, var(--sx-accent) 9%, transparent) 0%, transparent 60%),
    radial-gradient(90% 50% at 88% -6%, color-mix(in srgb, var(--sx-accent-2) 7%, transparent) 0%, transparent 58%);
}
.sx-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--sx-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sx-rule) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(#000 0%, #0000008c 34%, #0000 78%);
  mask-image: linear-gradient(#000 0%, #0000008c 34%, #0000 78%);
}
.sx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px) saturate(1.2); will-change: transform;
}
.sx-orb--a {
  width: 62vmax; height: 62vmax; top: -30vmax; left: -18vmax;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--sx-accent) calc(var(--sx-orb-a) * 100%), transparent) 0%, transparent 62%);
  animation: sx-orb-a 34s ease-in-out infinite alternate;
}
.sx-orb--b {
  width: 54vmax; height: 54vmax; top: -12vmax; right: -20vmax;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sx-accent-2) calc(var(--sx-orb-b) * 100%), transparent) 0%, transparent 64%);
  animation: sx-orb-b 41s ease-in-out infinite alternate;
}
.sx-orb--c {
  width: 58vmax; height: 58vmax; bottom: -36vmax; left: 20vmax;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sx-accent) calc(var(--sx-orb-c) * 100%), transparent) 0%, transparent 62%);
  animation: sx-orb-c 47s ease-in-out infinite alternate;
}
@keyframes sx-orb-a { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes sx-orb-b { to { transform: translate(-12vmax, 16vmax) scale(.94); } }
@keyframes sx-orb-c { to { transform: translate(10vmax, -12vmax) scale(1.08); } }
@keyframes sx-drift-slow { to { transform: translate(-2.5%, 1.5%); } }

/* ---------- 4. Header ---------- */
/* floating capsule header, matching the original chrome */
.site-header {
  position: sticky; top: 10px; z-index: 40;
  padding-inline: 12px; padding-bottom: 6px;
}
.site-header .header-row {
  height: 62px; padding: 0 10px 0 18px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  transition: background .3s var(--sx-ease), border-color .3s var(--sx-ease),
              box-shadow .3s var(--sx-ease), height .3s var(--sx-ease);
}
.site-header[data-stuck="true"] .header-row {
  height: 56px;
  background: var(--sx-chrome);
  border-color: var(--sx-glass-border);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 10px 40px -18px #08181852;
}
.site-header a:hover, .site-header a:focus-visible { text-decoration: none; }

.page { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

.header-row { display: flex; align-items: center; gap: 18px; height: 70px; }

.brand-lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.brand-lockup img { height: 28px; width: auto; object-fit: contain; }
img.brand-light { display: block; }
img.brand-dark { display: none; }
:root[data-theme="dark"] img.brand-light { display: none; }
:root[data-theme="dark"] img.brand-dark { display: block; }

.nav-bar { display: flex; align-items: center; gap: 4px; margin-inline-start: 6px; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 34px; padding: 0 11px; border-radius: 9px;
  font-size: 14px; font-weight: 540; color: var(--fg-2);
  text-decoration: none; white-space: nowrap;
  transition: background .12s var(--sx-ease), color .12s var(--sx-ease);
}
.nav-link:hover { background: var(--card-2); color: var(--fg); }
.nav-link::after, .menu-link::after {
  content: ""; position: absolute; bottom: 4px; inset-inline: 11px; height: 2px;
  background: var(--sx-accent); border-radius: 2px;
  scale: 0 1; transition: scale .26s var(--sx-ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after,
.menu-link:hover::after, .menu-link:focus-visible::after { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .menu-link::after { transition: none; }
}

.has-menu { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 7px); inset-inline-start: 0;
  min-width: 232px; padding: 6px 6px 8px; z-index: 50;
  border-radius: 18px; border: 1px solid var(--sx-glass-border);
  background: var(--sx-chrome);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 16px 40px -16px rgba(0,0,0,.25);
}
.menu-link {
  position: relative;
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; line-height: 19px; font-weight: 520;
  color: var(--fg-2); text-decoration: none; white-space: nowrap;
  transition: background .16s var(--sx-ease), color .16s var(--sx-ease);
}
.menu-link:hover, .menu-link:focus-visible { background: var(--muted); color: var(--fg); }
.menu-link::after { inset-inline: 12px; }
.site-footer .menu-link { display: inline-block; padding-inline: 0; }
.site-footer .menu-link::after { inset-inline: 0; bottom: 0; }
.menu-sep { height: 1px; margin: 5px 8px; background: var(--hairline); }

.header-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.tool-btn {
  height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-2);
  background: transparent; color: var(--fg-2); cursor: pointer; font: inherit; font-size: 12px;
  font-weight: 600; transition: background .16s ease, border-color .16s ease;
}
.tool-btn:hover { background: var(--muted); }
.tool-btn--icon { width: 34px; padding: 0; }

.nav-ctas { display: flex; align-items: center; gap: 8px; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 15px; border-radius: 9px;
  font-size: 13.5px; font-weight: 620; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--sx-ease), box-shadow .2s var(--sx-ease), background .2s var(--sx-ease);
}
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta--ghost { border: 1px solid var(--sx-glass-border); background: var(--sx-glass); color: var(--fg-2); }
.nav-cta--solid {
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px -10px var(--sx-glow);
}
.nav-cta--solid:hover {
  background: var(--btn-bg-h);
  box-shadow: inset 0 1px 0 #ffffff33, 0 12px 30px -10px var(--sx-glow);
}

.nav-mobile {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  color: var(--fg-2); cursor: pointer;
}

/* mobile drawer */
.mobile-nav {
  /* a panel, not a slab: the drawer sits inset from the screen edges, so a
     square white box left the page's gradient showing as a frame around it.
     It now matches the header capsule above it - rounded, bordered, lifted. */
  display: none; padding: 14px 6px 20px;
  background: var(--sx-chrome);
  border: 1px solid var(--sx-glass-border); border-radius: var(--sx-radius);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 24px 60px -24px #08181859;
}
.mobile-nav.is-open { display: block; }
.mobile-nav .menu-link { font-size: 15px; padding: 11px 12px; }
.mobile-nav .mobile-group-title {
  margin: 14px 0 4px; padding: 0 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-4);
}
.mobile-nav .nav-ctas { margin-top: 16px; padding: 0 12px; gap: 10px; }
.mobile-nav .nav-cta { flex: 1; height: 44px; }

/* ---------- 5. Band / section shell ---------- */
.band { position: relative; isolation: isolate; padding-block: 88px; overflow: clip; }
.band > .page { position: relative; z-index: 1; }
.band::before, .band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.band[data-bleed="true"] > .page { max-width: none; padding-inline: 0; }

/* dark "deep" CTA band */
.band[data-bg="deep"] {
  --fg:#f3fbfa; --fg-2:#cfe1df; --fg-3:#a3b7b5; --fg-4:#7d918f;
  --muted:#ffffff0d; --border:#ffffff1c; --border-2:#ffffff33; --hairline:#ffffff12;
  --accent:#2dd4bf1f; --accent-fg:#5eead4; --link:#5eead4;
  --sx-accent:#2dd4bf; --sx-accent-2:#22d3ee; --sx-hair-mix: 22%;
  --sx-glass:#ffffff0d; --sx-glass-border:#ffffff1c; --sx-glass-hi:#ffffff1f;
  --sx-ground:#061211;
  --sx-glow: color-mix(in srgb, var(--sx-accent) 42%, transparent);
  --sx-hair: color-mix(in srgb, var(--sx-accent) var(--sx-hair-mix), transparent);
  width: min(100% - 32px, 1240px);
  margin: 8px auto 40px;
  color: var(--fg);
  background: radial-gradient(120% 90% at 50% 20%, #0c1d1b 0%, #061211 62%, #040c0c 100%);
  border: 1px solid #ffffff14; border-radius: 34px;
  box-shadow: 0 40px 100px -50px #061211cc, 0 0 0 1px #2dd4bf14;
}
:root[data-theme="dark"] .band[data-bg="deep"] {
  background: radial-gradient(120% 90% at 50% 20%, #112622 0%, #0c1a19 62%, #0a1615 100%);
  border-color: #2dd4bf38;
  box-shadow: inset 0 1px #ffffff14, 0 0 0 1px #ffffff0d, 0 30px 90px -40px #2dd4bf59;
}
.band[data-bg="deep"]::before {
  background:
    radial-gradient(58% 52% at 50% -6%, color-mix(in srgb, var(--sx-accent) 28%, transparent) 0%, transparent 66%),
    radial-gradient(46% 46% at 88% 12%, color-mix(in srgb, var(--sx-accent-2) 16%, transparent) 0%, transparent 68%),
    radial-gradient(50% 40% at 8% 92%, color-mix(in srgb, var(--sx-accent) 12%, transparent) 0%, transparent 68%);
}
.band[data-bg="deep"]::after {
  background-image: linear-gradient(90deg, #ffffff0b 1px, #0000 1px), linear-gradient(#ffffff0b 1px, #0000 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(92% 82% at 50% 34%, #000 14%, #0000 78%);
  mask-image: radial-gradient(92% 82% at 50% 34%, #000 14%, #0000 78%);
}
.band[data-bg="deep"] .sx-display { max-width: 20ch; margin-inline: auto; font-size: clamp(36px, 4.6vw, 62px); }
.band[data-bg="deep"] .sx-btn--primary {
  box-shadow: inset 0 1px #ffffff38, 0 0 0 1px #2dd4bf40, 0 16px 40px -12px #2dd4bf8c;
}

/* ---------- 6. Typography ---------- */
/* German compounds are single unbreakable words: "Auftragsverarbeitungsvertrag"
   is 385px of one word, and a 320px phone has 288px to put it in. A break is
   allowed only where a word would otherwise run off the screen, so anything
   that already fits is untouched. */
.sx-display, .sx-h2, .sx-lead, .sx-intro, .prose h2, .prose h3, .prose p, .prose li,
.sx-card-title, .sx-pair-title {
  overflow-wrap: break-word;
}

.sx-display {
  margin: 0 0 20px; font-size: var(--sx-display); font-weight: 680;
  line-height: 1.02; letter-spacing: -.042em; color: var(--fg); text-wrap: pretty;
}
.sx-h2 {
  margin: 0 0 16px; font-size: var(--sx-h2); font-weight: 680;
  line-height: 1.08; letter-spacing: -.034em; color: var(--fg);
  text-wrap: balance; scroll-margin-top: 96px;
}
[data-align="center"] .sx-display,
[data-align="center"] .sx-h2 { text-align: center; text-wrap: balance; }
[data-align="center"] .sx-split .sx-h2 { text-align: left; }

.sx-grad { color: var(--accent-fg); position: relative; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sx-grad {
    background: linear-gradient(98deg, var(--sx-accent) 0%, var(--sx-grad-2) 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.sx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px; padding: 7px 14px 7px 11px; border-radius: 999px;
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fg);
}
.sx-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sx-accent);
  box-shadow: 0 0 0 0 var(--sx-glow);
  animation: sx-ping 2.4s var(--sx-ease) infinite;
}
@keyframes sx-ping {
  0% { box-shadow: 0 0 0 0 var(--sx-glow); }
  70% { box-shadow: 0 0 0 8px #0000; }
  100% { box-shadow: 0 0 #0000; }
}

.sx-kicker {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fg);
}
.sx-kicker::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
}
[data-align="center"] .sx-kicker { justify-content: center; }
[data-align="center"] .sx-kicker::before { display: none; }
[data-align="center"] .sx-split .sx-kicker { justify-content: flex-start; }
[data-align="center"] .sx-split .sx-kicker::before { display: block; }

.sx-lead {
  margin: 0; max-width: 54ch; color: var(--fg-3);
  margin-inline: 0;
  font-size: clamp(16.5px, 1.4vw, 19.5px); line-height: 1.6; text-wrap: pretty;
}
.sx-intro {
  margin: 0 0 8px; max-width: 62ch; color: var(--fg-3);
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.62; text-wrap: pretty;
}
[data-align="center"] .sx-intro { text-align: center; margin-inline: auto; }
[data-align="center"] .sx-split .sx-intro { text-align: left; margin-inline: 0; }
[data-align="center"] .sx-lead { margin-inline: auto; text-align: center; }
[data-align="center"] .sx-hero .sx-lead, [data-align="center"] .sx-split .sx-lead { margin-inline: 0; text-align: left; }

/* ---------- 7. Buttons ---------- */
.sx-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 640; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform .22s var(--sx-ease), box-shadow .28s var(--sx-ease),
              border-color .22s var(--sx-ease), background .22s var(--sx-ease);
}
.sx-btn:hover { transform: translateY(-2px); }
.sx-btn:active { transform: translateY(0) scale(.985); }
.sx-btn[data-size="lg"] { height: 56px; padding: 0 30px; font-size: 16px; }

.sx-btn--primary {
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: inset 0 1px 0 #ffffff3d, 0 2px 6px -2px var(--sx-glow), 0 14px 34px -12px var(--sx-glow);
}
.sx-btn--primary:hover {
  background: var(--btn-bg-h);
  box-shadow: inset 0 1px 0 #ffffff47, 0 4px 10px -2px var(--sx-glow), 0 24px 54px -14px var(--sx-glow);
}
.sx-btn--secondary {
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass); color: var(--fg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 1px 2px #0818180d;
}
.sx-btn--secondary:hover {
  border-color: color-mix(in srgb, var(--sx-accent) 60%, var(--sx-glass-border));
  background: color-mix(in srgb, var(--sx-accent) 9%, var(--sx-glass));
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 10px 26px -14px var(--sx-glow);
}
.sx-btn[data-pulse="true"]::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-accent) 26%, transparent);
  animation: sx-btn-ring 2.8s var(--sx-ease) infinite;
}
.sx-btn .sx-arrow { transition: transform .24s var(--sx-ease); flex: none; }
.sx-btn:hover .sx-arrow { transform: translateX(4px); }

.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
[data-align="center"] .sx-actions { justify-content: center; }
[data-align="center"] .sx-split .sx-actions { justify-content: flex-start; }

.sx-cta-note {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--fg-4);
}
.sx-cta-note svg { color: var(--sx-accent); flex: none; }
[data-align="center"] .sx-cta-note { justify-content: center; width: fit-content; margin-inline: auto; }
[data-align="center"] .sx-hero .sx-cta-note { margin-inline: 0; }

/* ---------- 8. Hero ---------- */
.sx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.sx-hero .sx-display {
  /* 60px from ~1225px up; below that it scales so it never overflows a phone */
  font-size: clamp(38px, 4.9vw, 60px);
  max-width: 16ch;
}
.sx-hero-crown { display: block; }

/* ---------- 9. Diagrams — figure system ---------- */

.sx-bd-link { stroke: var(--sx-bd-line); stroke-width: 1px; fill: none; }
.sx-bd-node { fill: var(--sx-bd-node); }
.sx-bd-ring { fill: none; stroke: var(--sx-bd-line); stroke-width: 1px; }

.sx-defs{width:0;height:0;position:absolute;overflow:hidden}
.sx-grain {
  opacity: var(--sx-grain); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px; position: absolute; inset: 0;
}
:root[data-theme=dark] .sx-grain{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sx-grain{mix-blend-mode:screen}
}
.sx-figure{width:100%;position:relative}
.sx-figure svg{width:100%;height:auto;display:block;overflow:visible}
.sx-figure[data-panel=true]{background:radial-gradient(closest-side ellipse at 50% 46%, var(--sx-fig-ground) 0%, var(--sx-fig-ground) 44%, color-mix(in srgb, var(--sx-fig-ground) 46%, transparent) 74%, transparent 100%);padding:18px 16px}
.sx-figure[data-panel=true]:before{content:"";z-index:-1;background:radial-gradient(circle, var(--sx-glow), transparent 70%);filter:blur(52px);opacity:.42;pointer-events:none;border-radius:50%;position:absolute;inset:4%}
@media (prefers-reduced-motion:no-preference){
  .sx-hero .sx-figure[data-panel=true]{animation:9s ease-in-out infinite sx-float}
}
:root[data-theme=dark] .sx-fig{--fg-4:var(--n-300)}
:root[data-theme=dark] .sx-bd-pulse{opacity:.06}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sx-fig{--fg-4:var(--n-300)}
  :root:not([data-theme=light]) .sx-bd-pulse{opacity:.06}
}
.sx-fig{font-family:var(--font-mono)}
.sx-tile{fill:color-mix(in srgb, var(--sx-accent) 12%, var(--sx-ground));stroke:url(#sx-rim);stroke-width:1.5px}
.sx-glyph{stroke:var(--sx-accent)}
@media (prefers-reduced-motion:no-preference){
  .sx-dev-lit,.sx-wire--direct{filter:url(#sx-bloom)}
}
.sx-cap{fill:var(--fg-2);letter-spacing:.07em;font-size:11.5px;font-weight:600}
.sx-sub{fill:var(--fg-4);letter-spacing:.02em;font-size:11px}
.sx-cell{fill:var(--fg-3);letter-spacing:.01em;font-size:11px}
.sx-dev[data-dim=true] .sx-tile{fill:color-mix(in srgb, var(--fg) 4%, var(--sx-ground));stroke:var(--border-2)}
.sx-dev[data-dim=true] .sx-glyph{stroke:var(--fg-4)}
.sx-dev[data-dim=true] .sx-cap{fill:var(--fg-4)}
.sx-dev[data-tone=deny] .sx-tile{stroke:color-mix(in srgb, var(--sev-high) 60%, transparent)}
.sx-dev[data-tone=deny] .sx-glyph{stroke:var(--sev-high)}
@media (max-width:760px){
  .sx-figure[data-kind=world] .sx-cap,.sx-figure[data-kind=world] .sx-tag{display:none}
  .sx-figure[data-kind=world] .sx-land path{stroke-width:3.4px}
}
.sx-figure[data-kind=world][data-panel=true]{padding:4px 8px}
.sx-figure[data-kind=world] .sx-tile{fill:var(--sx-ground);stroke-width:1.8px}
.sx-figure[data-kind=world] .sx-cap{fill:var(--fg);letter-spacing:.05em;font-size:17px}
.sx-figure[data-kind=world] .sx-halo{opacity:.22}
.sx-land path{fill:none;stroke:color-mix(in srgb, var(--sx-accent) 42%, transparent);stroke-width:2.6px;stroke-linecap:round;stroke-dasharray:0 6}
.sx-orbit{fill:none;stroke:color-mix(in srgb, var(--sx-accent) 22%, transparent);stroke-width:1px;stroke-dasharray:2 7}
.sx-wire-line{fill:none;stroke-linecap:round}
.sx-wire--direct .sx-wire-line{stroke:url(#sx-wire);stroke-width:2.1px;opacity:.78}
.sx-wire--latent .sx-wire-line{stroke:color-mix(in srgb, var(--sx-accent) 30%, transparent);stroke-width:1px;stroke-dasharray:1 6}
.sx-wire--signal .sx-wire-line{stroke:var(--sx-hair);stroke-width:1.3px;stroke-dasharray:3 5}
.sx-wire--relay .sx-wire-line{stroke:color-mix(in srgb, var(--fg-4) 45%, transparent);stroke-width:1.3px;stroke-dasharray:2 6}
.sx-wire--config .sx-wire-line{stroke:color-mix(in srgb, var(--sx-accent-2) 45%, transparent);stroke-width:1.2px;stroke-dasharray:4 5}
.sx-wire--dead .sx-wire-line{stroke:color-mix(in srgb, var(--fg-4) 32%, transparent);stroke-width:1.4px;stroke-dasharray:5 6}
.sx-tag rect{fill:color-mix(in srgb, var(--sx-ground) 88%, transparent);stroke:var(--sx-glass-border);stroke-width:1px}
.sx-tag text{fill:var(--fg-2);letter-spacing:.02em;font-size:11px;font-weight:600}
.sx-tag-icon{fill:none;stroke:var(--fg-3);stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}
.sx-tag-dot{fill:var(--fg-3)}
.sx-tag[data-tone=accent] rect{stroke:color-mix(in srgb, var(--sx-accent) 45%, transparent);fill:color-mix(in srgb, var(--sx-accent) 10%, var(--sx-ground))}
.sx-tag[data-tone=accent] text,.sx-tag[data-tone=accent] .sx-tag-icon{fill:var(--accent-fg);stroke:var(--accent-fg)}
.sx-tag[data-tone=accent] text{stroke:none}
.sx-tag[data-tone=ok] rect{stroke:color-mix(in srgb, var(--online) 50%, transparent);fill:color-mix(in srgb, var(--online) 10%, var(--sx-ground))}
.sx-tag[data-tone=ok] text{fill:var(--online)}
.sx-tag[data-tone=ok] .sx-tag-icon{stroke:var(--online)}
.sx-tag[data-tone=ok] .sx-tag-dot{fill:var(--online)}
.sx-tag[data-tone=deny] rect{stroke:color-mix(in srgb, var(--sev-high) 50%, transparent);fill:color-mix(in srgb, var(--sev-high) 9%, var(--sx-ground))}
.sx-tag[data-tone=deny] text{fill:var(--sev-high)}
.sx-tag[data-tone=deny] .sx-tag-icon{stroke:var(--sev-high)}
.sx-tag[data-tone=muted] text,.sx-tag[data-tone=muted] .sx-tag-dot{fill:var(--fg-4)}
.sx-panel{fill:color-mix(in srgb, var(--fg) 2.5%, transparent);stroke:var(--sx-glass-border);stroke-width:1px}
.sx-panel[data-dashed=true]{stroke:var(--sx-hair);stroke-dasharray:5 5}
.sx-wall rect{fill:color-mix(in srgb, var(--fg) 7%, var(--sx-ground));stroke:color-mix(in srgb, var(--fg-4) 60%, transparent);stroke-width:1.3px}
.sx-wall-joint{stroke:color-mix(in srgb, var(--fg-4) 32%, transparent);stroke-width:1px;fill:none}
.sx-wall-door{stroke:var(--sx-accent);stroke-width:2.4px;stroke-linecap:round;fill:none}
.sx-deny circle{fill:color-mix(in srgb, var(--sev-high) 12%, var(--sx-ground));stroke:var(--sev-high);stroke-width:1.6px}
.sx-deny path{fill:none;stroke:var(--sev-high);stroke-width:2px;stroke-linecap:round}
.sx-node{fill:var(--sx-ground);stroke:var(--sx-accent);stroke-width:1.6px}
.sx-node-core{fill:var(--sx-accent)}
.sx-arc{fill:none;stroke:var(--sx-accent);stroke-width:1.6px;opacity:.55}
.sx-packet{stroke:var(--sx-accent);stroke-width:3px;stroke-linecap:round;fill:none;stroke-dasharray:0 900}
@media (prefers-reduced-motion:no-preference){
  .sx-packet{stroke-dasharray:6 300;filter:drop-shadow(0 0 5px var(--sx-glow));animation:3.6s linear infinite sx-flow;animation-delay:var(--sx-delay,0s)}
  .sx-packet[data-kind=signal]{stroke-width:2px;stroke-dasharray:3 300;animation-duration:2.6s}
  .sx-packet[data-kind=relay]{stroke:var(--fg-4);stroke-width:2px;stroke-dasharray:3 300;filter:none;animation-duration:5.2s}
  .sx-packet[data-kind=config]{stroke:var(--sx-accent-2);stroke-width:2px;stroke-dasharray:3 300;animation-duration:3.2s}
  .sx-halo{fill:var(--sx-accent);opacity:.18;transform-origin:50%;transform-box:fill-box;animation:3.6s ease-in-out infinite sx-breathe;animation-delay:var(--sx-delay,0s)}
  .sx-pop{opacity:0;animation:sx-pop .6s var(--sx-ease) forwards;animation-delay:var(--sx-delay,0s)}
}
@media (prefers-reduced-motion:reduce){
  .sx-halo{fill:var(--sx-accent);opacity:.12}
  .sx-packet{stroke-dasharray:none;opacity:0}
  .sx-pop{opacity:1}
}

@media (min-width:941px){
  .sx-hero:has(.sx-figure[data-kind=world]){grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(28px,3.4vw,52px)}
}
@media (max-width:760px),(hover:none),(update:slow){
  .sx-orb,.sx-constellation{animation:none}
  .sx-bd-packet,.sx-bd-pulse{display:none}
  .sx-card,.sx-stat,.sx-faq,.sx-plan-card,.sx-marquee-item,.sx-tl-item>div,.sx-pair>div,.sx-status,.sx-banner,.sx-calc-controls,.sx-calc-result,.sx-figure[data-panel=true]{-webkit-backdrop-filter:none;backdrop-filter:none}
  .sx-dev-lit,.sx-wire--direct{filter:none}
}
@media (max-width:760px){
  .sx-figure[data-panel=true]{padding:14px 8px 12px}
  .sx-hero .sx-figure[data-panel=true]{animation:none}
  .sx-hero .sx-figure[data-decorative=true]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sx-orb,.sx-constellation,.sx-bd-pulse,.sx-bd-packet,.band[data-bg=aurora]:before{animation:none}
  .sx-bd-packet{opacity:0}
  .sx-hero .sx-figure[data-panel=true]{animation:none}
}
.sx-figure figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .02em; color: var(--fg-4); text-align: center;
}

/* ---------- 10. Diagrams — keyframes ---------- */
@keyframes sx-flow { 0% { stroke-dashoffset: 306px; } to { stroke-dashoffset: 0; } }
@keyframes sx-flow-long { 0% { stroke-dashoffset: 406px; } to { stroke-dashoffset: 0; } }
@keyframes sx-breathe { 0%, to { opacity: .3; transform: scale(.72); } 50% { opacity: 0; transform: scale(1.5); } }
@keyframes sx-pop { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sx-sheen { to { transform: translateX(130%); } }
@keyframes sx-cta-shimmer { 0%, 62% { transform: translateX(-140%); } 82%, to { transform: translateX(140%); } }
@keyframes sx-btn-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-accent) 44%, transparent); } 70% { box-shadow: 0 0 0 14px #0000; } to { box-shadow: 0 0 #0000; } }
@keyframes sx-float { 0%, to { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sx-blip { 0%, 6% { opacity: 0; } 12% { opacity: 1; } 60% { opacity: .8; } to { opacity: 0; } }
@keyframes sx-scan { 0%, to { opacity: 0; transform: translateY(-32%); } 18%, 82% { opacity: 1; } 50% { transform: translateY(32%); } }
@keyframes sx-fade-in { 0% { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sx-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-2.5%,2%) scale(1.06); } to { transform: translate(2.5%,-2%) scale(1.02); } }

/* ---------- 11. Marquee ---------- */
.sx-marquee-head { text-align: center; margin-bottom: 18px; }
.sx-marquee {
  display: flex; position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 10% 90%, #0000);
}
.sx-marquee-track {
  display: flex; flex: none; gap: 12px; padding-inline-end: 12px;
  animation: sx-marquee var(--sx-speed, 48s) linear infinite;
}
.sx-marquee:hover .sx-marquee-track { animation-play-state: paused; }
@keyframes sx-marquee { to { transform: translateX(-100%); } }
.sx-marquee-item {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi);
  font-size: 13.5px; font-weight: 580; color: var(--fg-2); white-space: nowrap;
}
.sx-marquee-item svg { flex: none; color: var(--accent-fg); }

/* ---------- 12. Stats ---------- */
.sx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.sx-stat {
  position: relative; padding: 22px 22px 20px; border-radius: var(--sx-radius);
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), var(--sx-glass-shadow);
}
.sx-stat-value {
  font-size: clamp(34px, 3.6vw, 48px); font-weight: 700; line-height: 1;
  letter-spacing: -.045em; color: var(--fg); font-variant-numeric: tabular-nums;
}
.sx-stat-label { margin: 10px 0 0; font-size: 14px; font-weight: 640; color: var(--fg-2); }
.sx-stat-desc { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg-3); }

/* ---------- 13. Cards, grid, bento ---------- */
.sx-grid {
  display: grid; grid-template-columns: repeat(var(--sx-cols, 3), minmax(0, 1fr));
  gap: 16px; margin-top: 40px;
}
.sx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.sx-bento > * { grid-column: span 4; }
.sx-bento[data-count="5"] > :nth-child(4),
.sx-bento[data-count="5"] > :nth-child(5) { grid-column: span 6; }
.sx-bento[data-count="6"] > :first-child,
.sx-bento[data-count="6"] > :nth-child(6) { grid-column: span 5; }
.sx-bento[data-count="6"] > :nth-child(3),
.sx-bento[data-count="6"] > :nth-child(4) { grid-column: span 3; }
.sx-bento .sx-card { min-height: 170px; padding: 26px; }
.sx-bento[data-count="6"] > :first-child .sx-card-title,
.sx-bento[data-count="6"] > :nth-child(6) .sx-card-title { font-size: 20px; }
/* peers, not a bento: every card the same width and the same title size.
   Same specificity as the count rules above, so source order decides. */
.sx-bento[data-layout="even"][data-count] > * { grid-column: span 4; }
.sx-bento[data-layout="even"][data-count] > * .sx-card-title { font-size: 17px; }

.sx-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  height: 100%; padding: 24px; border-radius: var(--sx-radius);
  color: inherit; text-decoration: none;
  transition: transform .32s var(--sx-ease), box-shadow .32s var(--sx-ease), background .32s var(--sx-ease);
}
.sx-card[data-style="glass"] {
  border: 0;
  background: linear-gradient(168deg, var(--sx-lift) 0%, color-mix(in srgb, var(--sx-lift) 34%, transparent) 54%, transparent 100%);
  box-shadow: inset 0 1px 0 var(--sx-lift-edge);
}
.sx-card[data-style="gradient"] {
  border: 0;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sx-accent) 15%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--sx-lift) 0%, transparent 100%);
  box-shadow: inset 0 1px 0 var(--sx-lift-edge);
}
.sx-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sx-accent) 45%, var(--sx-lift-edge)),
              0 26px 60px -30px var(--sx-glow);
}
.sx-card-title { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; color: var(--fg); }
.sx-card-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-3); text-wrap: pretty; }
.sx-card-more {
  margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 620; color: var(--link);
}
.sx-card:hover .sx-card-more .sx-arrow { transform: translateX(3px); }
.sx-card-more .sx-arrow { transition: transform .24s var(--sx-ease); }

/* hover spotlight following the cursor */
.sx-spot { position: relative; }
.sx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(320px circle at var(--sx-x, 50%) var(--sx-y, 0%),
              color-mix(in srgb, var(--sx-accent) 9%, transparent), transparent 60%);
  opacity: 0; transition: opacity .28s var(--sx-ease); pointer-events: none;
}
.sx-spot:hover::after { opacity: 1; }
.sx-spot > * { position: relative; z-index: 1; }

.sx-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 13px;
  background: color-mix(in srgb, var(--sx-accent) 12%, transparent);
  color: var(--accent-fg);
  box-shadow: inset 0 0 0 1px var(--sx-hair), inset 0 1px 0 var(--sx-glass-hi);
  transition: transform .32s var(--sx-ease);
}
.sx-card:hover .sx-chip { transform: translateY(-2px) scale(1.05); }

.sx-step-no {
  position: absolute; top: 18px; right: 22px; pointer-events: none;
  font-family: var(--font-mono); font-size: 40px; font-weight: 500; line-height: 1;
  letter-spacing: -.04em; color: color-mix(in srgb, var(--sx-accent) 40%, transparent);
}

/* ---------- 14. Terminal ---------- */
.sx-term {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--sx-glass-border);
  background: #0b1514;
  box-shadow: 0 30px 70px -40px #08181899, inset 0 1px 0 #ffffff12;
}
.sx-term-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: #0f1c1b; border-bottom: 1px solid #ffffff12;
}
.sx-term-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.sx-term-name {
  margin-inline-start: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; color: #7d918f;
}
.sx-term-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.sx-term-line {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #cfe1df;
  opacity: 0; animation: sx-term-in .4s var(--sx-ease) forwards; animation-delay: var(--sx-delay, 0ms);
}
.sx-term-prompt { color: #2dd4bf; flex: none; }
.sx-term-line[data-tone="success"] > span:last-child { color: #59b483; }
.sx-term-line[data-tone="info"] > span:last-child { color: #22d3ee; }
.sx-term-line[data-muted="true"] > span:last-child { color: #7d918f; }
.sx-term-caret {
  display: inline-block; width: 9px; height: 16px; background: #2dd4bf;
  animation: sx-blink 1.1s steps(2, start) infinite;
}
@keyframes sx-term-in { 0% { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sx-blink { 50% { opacity: 0; } }

/* ---------- 15. Split ---------- */
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.sx-split[data-flip="true"] > :first-child { order: 2; }
.sx-split-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sx-split-list li { display: flex; gap: 14px; align-items: flex-start; }
.sx-split-list li > div > b { display: block; font-size: 15.5px; font-weight: 640; color: var(--fg); letter-spacing: -.01em; }
/* scoped to the description span: a bare `span` here also matched .sx-chip and
   knocked it out of flex layout, which pushed the icon into the corner */
.sx-split-list li > div > span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.6; color: var(--fg-3); }

/* ---------- 16. Before / after pairs ---------- */
.sx-pairs { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.sx-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 8px; align-items: stretch;
}
.sx-pair-from, .sx-pair-to {
  padding: 22px 24px; border-radius: var(--sx-radius);
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass); text-align: left;
}
.sx-pair-from {
  background: linear-gradient(160deg, color-mix(in srgb, var(--sev-high) 9%, transparent), transparent 60%), var(--sx-glass);
  border-color: color-mix(in srgb, var(--sev-high) 22%, var(--sx-glass-border));
}
.sx-pair-to {
  background: linear-gradient(160deg, color-mix(in srgb, var(--sx-accent) 13%, transparent), transparent 60%), var(--sx-glass);
  border-color: color-mix(in srgb, var(--sx-accent) 26%, var(--sx-glass-border));
}
.sx-pair-label {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
}
.sx-pair-from .sx-pair-label { color: var(--sev-high); }
.sx-pair-to .sx-pair-label { color: var(--accent-fg); }
.sx-pair-arrow { display: flex; align-items: center; justify-content: center; color: var(--fg-4); }

/* ---------- 17. FAQ ---------- */
.sx-faq {
  border-bottom: 1px solid var(--hairline);
  transition: border-color .2s ease;
}
.sx-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; color: var(--fg); text-align: left;
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--fg-4); border-bottom: 2px solid var(--fg-4);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .24s var(--sx-ease), border-color .24s ease;
}
.sx-faq[open] summary::after { transform: rotate(225deg) translateY(-2px); border-color: var(--accent-fg); }
.sx-faq summary:hover { color: var(--accent-fg); }
.sx-faq-answer {
  margin: 0; padding: 0 4px 22px; max-width: 72ch;
  font-size: 15px; line-height: 1.68; color: var(--fg-3);
}
.sx-faq[open] .sx-faq-answer { animation: sx-faq-in .28s var(--sx-ease); }
@keyframes sx-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 18. Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--muted) 45%, transparent); }
.site-footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px;
}
.site-footer-tagline { margin: 16px 0 0; max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.site-footer-email { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--link); text-decoration: none; }
.site-footer-email:hover { text-decoration: underline; }
.site-footer-col-title {
  margin: 0 0 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4);
}
.site-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer-links .menu-link { padding: 6px 0; }
.site-footer-badges {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 22px; margin-top: 44px;
}
.site-footer-badge img { height: 66px; width: auto; opacity: .9; }
.site-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--hairline);
}
.site-footer-bottom p { margin: 0; font-size: 13.5px; color: var(--fg-4); }
.site-footer-legal { display: flex; gap: 6px; }
.site-footer-legal .menu-link { padding: 4px 8px; font-size: 13.5px; }

/* ---------- 19. Scroll reveal ---------- */
.js-reveal [data-reveal] > .page { opacity: 0; will-change: transform, opacity; }
.js-reveal [data-reveal="rise"] > .page { transform: translateY(24px); }
.js-reveal [data-reveal="zoom"] > .page { transform: scale(.97); }
[data-reveal].is-visible > .page {
  opacity: 1; transform: none;
  transition: opacity .7s var(--sx-ease), transform .7s var(--sx-ease);
}
.sx-stat, .sx-card, .sx-pair, .sx-split-list li, .sx-faq { --sx-delay: 0ms; }
.is-visible .sx-stat, .is-visible .sx-card, .is-visible .sx-pair,
.is-visible .sx-split-list li, .is-visible .sx-faq {
  animation: sx-rise .6s var(--sx-ease) backwards;
  animation-delay: var(--sx-delay, 0ms);
}
@keyframes sx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] > .page { opacity: 1; transform: none; }
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  .sx-hero, .sx-split { grid-template-columns: 1fr; gap: 40px; }
  .sx-split[data-flip="true"] > :first-child { order: 0; }
  /* :nth-child(n) matches every child and lifts this to the same specificity
     as the desktop rules above, which select with :first-child. Without it
     those rules keep winning here, media query or not. */
  .sx-bento > *, .sx-bento[data-count] > :nth-child(n) { grid-column: span 6; }
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: inline-flex; }
  .header-row { height: 64px; }
}

/* Phones. The header row is the tightest thing on the page: on a 320px screen
   it has 288px to fit a logo, three controls and their gaps. The language
   button keeps its label and gives up its globe and caret, which is what makes
   the row fit. Controls also grow to the 40px a fingertip needs. */
@media (max-width: 480px) {
  /* where a word has to break, break it at a syllable. Confined to phones, so
     ordinary line endings elsewhere keep their current shape. */
  .sx-display, .sx-h2, .sx-lead, .sx-intro, .prose h2, .prose h3, .prose p, .prose li,
  .sx-card-title, .sx-pair-title { hyphens: auto; }
  .header-row { gap: 10px; }
  .tool-btn { height: 40px; min-width: 40px; padding-inline: 10px; }
  .tool-btn--icon { width: 40px; }
  .tool-btn--lang > svg { display: none; }
  .nav-mobile { height: 44px; }
  /* the logo gives up width rather than push the row wider, and its tap area
     reaches full height without the mark moving */
  .brand-lockup { min-width: 0; flex: 0 1 auto; overflow: hidden; padding-block: 8px; }
  .brand-lockup img { max-width: 100%; }
}

@media (max-width: 720px) {
  /* a link in a list is a thumb target, not a line of text */
  .site-footer .menu-link { padding-block: 11px; }
  .site-footer-email { display: inline-flex; align-items: center; min-height: 40px; }
  .sx-calc-preset { min-height: 40px; min-width: 44px; }
  .band { padding-block: 64px !important; }
  .page { padding-inline: 16px; }
  .sx-grid, .sx-bento { grid-template-columns: 1fr; margin-top: 30px; }
  .sx-bento > *, .sx-bento[data-count] > :nth-child(n) { grid-column: span 12; }
  .sx-pair { grid-template-columns: 1fr; gap: 10px; }
  .sx-pair-arrow { transform: rotate(90deg); height: 30px; }
  .sx-actions .sx-btn { width: 100%; }
  .site-footer-grid { grid-template-columns: 1fr; }
  .sx-term-body { padding: 14px 14px 18px; }
  .sx-term-line { font-size: 11.5px; gap: 8px; }
  .band[data-bg="deep"] { border-radius: 26px; width: min(100% - 24px, 1240px); }
}

/* ---------- 21. Backdrop — constellation ---------- */
.sx-constellation {
  width: 112%; height: 112%; animation: sx-drift-slow 60s ease-in-out infinite alternate;
  position: absolute; inset: -6%;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, #0000 78%);
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, #0000 78%); opacity: .7;
}

.sx-bd-pulse {
  fill: var(--sx-accent); opacity: .12; transform-origin: 50%; transform-box: fill-box;
  animation: sx-breathe 6s ease-in-out infinite; animation-delay: var(--sx-delay, 0s);
}
:root[data-theme="dark"] .sx-bd-pulse { opacity: .06; }
.sx-bd-packet {
  stroke: var(--sx-accent); stroke-width: 2px; stroke-linecap: round; fill: none;
  stroke-dasharray: 6 400; opacity: .55; animation: sx-flow-long 9s linear infinite;
  animation-delay: var(--sx-delay, 0s);
}

:root[data-theme="dark"] .sx-grain { mix-blend-mode: screen; }

/* ---------- 22. Buttons — sheen and CTA shimmer ---------- */

.cta-shimmer { position: relative; isolation: isolate; overflow: hidden; }
.cta-shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, #ffffff47 50%, transparent 60%);
  transform: translateX(-140%);
  animation: sx-cta-shimmer 6s var(--sx-ease) infinite;
}

/* ---------- 23. Pricing plans ---------- */
.sx-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-top: 42px; align-items: stretch;
}
.sx-plan-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 28px 26px 26px; border-radius: var(--sx-radius);
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), var(--sx-glass-shadow);
  transition: transform .32s var(--sx-ease), box-shadow .32s var(--sx-ease), border-color .32s var(--sx-ease);
}
.sx-plan-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 26px 60px -30px var(--sx-glow); }
.sx-plan-card[data-featured="true"] {
  border-color: color-mix(in srgb, var(--sx-accent) 62%, transparent);
  background: linear-gradient(168deg, color-mix(in srgb, var(--sx-accent) 12%, transparent) 0%, transparent 62%), var(--sx-glass);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 24px 60px -32px var(--sx-glow);
  transform: translateY(-6px); border-width: 2px;
}
.sx-plan-ribbons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 22px; }
.sx-plan-ribbon {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; background: var(--btn-bg); color: var(--btn-fg); box-shadow: none;
}
.sx-plan-ribbon[data-tone="neutral"] { background: var(--muted); color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--hairline); }
.sx-plan-name { margin: 0; font-size: 24px; font-weight: 720; letter-spacing: -.03em; color: var(--fg); }
.sx-plan-summary { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-3); min-height: 62px; }
.sx-plan-price { display: flex; align-items: flex-end; gap: 4px; margin: 20px 0 0; }
.sx-plan-sym { font-size: 22px; font-weight: 600; color: var(--fg-3); line-height: 1.6; }
.sx-plan-amount { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--fg); font-variant-numeric: tabular-nums; }
.sx-plan-amount--word { font-size: 26px; letter-spacing: -.03em; }
.sx-plan-unit { margin-bottom: 4px; font-size: 14px; font-weight: 560; color: var(--fg-4); }
.sx-plan-quota {
  margin: 14px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--muted); font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.sx-plan-cta { margin-top: 20px; }
.sx-plan-cta .sx-btn { width: 100%; }
.sx-plan-list-label {
  margin: 22px 0 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4);
}
.sx-plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sx-plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.sx-plan-features svg { flex: none; margin-top: 3px; color: var(--accent-fg); }

/* ---------- 24. Roadmap stepper ---------- */
.sx-timeline { position: relative; list-style: none; margin: 40px 0 0; padding: 0; text-align: left; }

/* the rail: vertical by default, it becomes the horizontal axis from 900px */
.sx-timeline::before {
  content: ""; position: absolute; inset-block: 12px; inset-inline-start: 17px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--sx-accent), var(--sx-hair) 45%, transparent);
}
.sx-tl-item { position: relative; display: flex; gap: 20px; padding-bottom: 30px; }
.sx-tl-item:last-child { padding-bottom: 0; }
.sx-tl-body { min-width: 0; }

.sx-tl-marker {
  position: relative; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--sx-hair); background: var(--sx-ground); color: var(--accent-fg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sx-ground) 92%, transparent),
              0 0 22px -6px var(--sx-glow);
  transition: background .24s var(--sx-ease), color .24s var(--sx-ease), border-color .24s var(--sx-ease);
}
.sx-tl-item:hover .sx-tl-marker { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.sx-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--sx-accent) 13%, transparent);
  color: var(--accent-fg); box-shadow: inset 0 0 0 1px var(--sx-hair);
}
.sx-tl-item .sx-pill { margin-bottom: 8px; }
.sx-tl-title { margin: 6px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -.018em; color: var(--fg); }
.sx-tl-desc { margin: 7px 0 0; max-width: 66ch; font-size: 14.5px; line-height: 1.62; color: var(--fg-3); }

@media (min-width: 900px) {
  /* one column per step, rail running across them */
  .sx-timeline {
    display: grid; grid-template-columns: repeat(var(--sx-n, 5), minmax(0, 1fr));
    gap: 16px; padding-top: 22px;
  }
  .sx-timeline::before {
    /* span exactly marker-centre to marker-centre: a fixed percentage left a gap
       before the first step and overshot past the last one */
    --sx-gap: 16px;
    --sx-col: calc((100% - var(--sx-gap) * (var(--sx-n, 5) - 1)) / var(--sx-n, 5));
    inset: 17px calc(var(--sx-col) - 18px) auto 18px;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2) 60%, var(--sx-hair));
  }
  .sx-tl-item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0; }
  .sx-tl-marker { margin-top: -22px; }
  .sx-tl-body {
    flex: 1; width: 100%; padding: 20px 20px 22px;
    border-radius: var(--sx-radius); border: 1px solid var(--sx-glass-border);
    background: var(--sx-glass);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 var(--sx-glass-hi), var(--sx-glass-shadow);
    transition: transform .32s var(--sx-ease), border-color .32s var(--sx-ease), box-shadow .32s var(--sx-ease);
  }
  .sx-tl-item:hover .sx-tl-body {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-glass-border));
    box-shadow: inset 0 1px 0 var(--sx-glass-hi), 0 22px 50px -24px var(--sx-glow);
  }
  /* the step that ships today reads as reached */
  .sx-tl-item:first-child .sx-tl-marker { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
  .sx-tl-item:first-child .sx-tl-body { border-color: color-mix(in srgb, var(--sx-accent) 45%, var(--sx-glass-border)); }
  .sx-tl-title { font-size: 16px; }
  .sx-tl-desc { font-size: 13.5px; }
}

/* ---------- 25. Prose — legal pages and long copy ---------- */
.sx-measure { max-width: none; margin: 0; text-align: left; }
.sx-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.sx-link:hover { text-decoration-thickness: 2px; }

.prose { color: var(--fg-3); font-size: 15.5px; line-height: 1.72; }
.prose h2 {
  margin: 40px 0 14px; font-size: clamp(21px, 2.1vw, 27px); font-weight: 680;
  letter-spacing: -.028em; color: var(--fg); line-height: 1.22; scroll-margin-top: 96px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 650; letter-spacing: -.018em; color: var(--fg); }
.prose p { margin: 0 0 14px; text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--fg-2); font-weight: 640; }
.prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--hairline); }

.legal-meta {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--fg-4);
}

@media (max-width: 720px) {
  .sx-plans { grid-template-columns: 1fr; }
  .sx-plan-summary { min-height: 0; }
  .prose h2 { margin-top: 30px; }
}

/* ---------- 26. Calculator — layout ---------- */
.sx-calc{text-align:left;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:22px;margin-top:28px;display:grid;
  --calc-mix:0%}  /* how far the thumb is along the bar; drives the colour of fill, thumb and bubble */
@media (max-width:860px){
  .sx-calc{grid-template-columns:1fr}
}
.sx-calc-controls {
  border: 1px solid var(--sx-glass-border); border-radius: var(--sx-radius);
  background: var(--sx-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), var(--sx-glass-shadow); flex-direction: column;
  justify-content: center; gap: 24px; padding: 28px 26px; display: flex;
}

.sx-calc-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);font-size:11px;font-weight:650}

.sx-calc-slider {
  width: 100%; height: 28px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: 0 0; margin: 0; display: block; --calc-pct: 0%; --calc-c1: var(--sx-accent);
  /* the colour at the thumb moves from teal to blue as the thumb moves right,
     so the bar visibly changes as it is dragged, not just its length */
  --calc-c2: color-mix(in oklab, var(--sx-accent), var(--sx-grad-2) var(--calc-mix, 0%));
  --calc-track: color-mix(in srgb, var(--fg) 10%, transparent);
}
.sx-calc-slider::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--calc-c1), var(--calc-c2)) 0 0 / var(--calc-pct) 100% no-repeat, var(--calc-track);
  border-radius: 999px; height: 8px;
}
.sx-calc-slider::-moz-range-track { background: var(--calc-track); border-radius: 999px; height: 8px; }
.sx-calc-slider::-moz-range-progress {
  background: linear-gradient(90deg, var(--calc-c1), var(--calc-c2)); border-radius: 999px;
  height: 8px;
}
.sx-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; border: 2px solid var(--calc-c2); background: #fff;
  border-radius: 50%; width: 22px; height: 22px; margin-top: -7px;
  box-shadow: 0 2px 8px #08181840;
}
.sx-calc-slider::-moz-range-thumb {
  border: 2px solid var(--calc-c2); background: #fff; border-radius: 50%; width: 18px;
  height: 18px; box-shadow: 0 2px 8px #08181840;
}
.sx-calc-slider:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:999px}
.sx-calc-result {
  border: 1px solid var(--sx-accent); border-radius: var(--sx-radius);
  background: var(--sx-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--sx-hair), 0 22px 54px -30px var(--sx-glow);
  flex-direction: column; gap: 0; padding: 28px 26px; display: flex; position: relative;
  overflow: hidden; justify-content: flex-start;
}
.sx-calc-result:before{content:"";background:radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--sx-accent) 13%, transparent), transparent 72%);pointer-events:none;position:absolute;inset:0}
.sx-calc-result>*{position:relative}
.sx-calc-key{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);font-size:10.5px;font-weight:700}
.sx-calc-name {
  font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-fg); font-size: 22px; font-weight: 700; min-height: 30px;
}
.sx-calc-cost {
  flex-wrap: wrap; align-items: baseline; gap: 10px; display: flex; margin-top: auto;
  padding-top: 18px; min-height: 48px; border-top: 1px solid var(--hairline);
  justify-content: flex-end; text-align: end;
}
.sx-calc-amount {
  letter-spacing: -.038em; color: #0000; font-variant-numeric: tabular-nums; font-size: 42px;
  font-weight: 730; line-height: 1;
  background: linear-gradient(98deg, var(--sx-accent) 0%, var(--sx-grad-2) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.sx-calc-per{font-family:var(--font-mono);color:var(--fg-4);font-size:12.5px}
.sx-calc-period{border:1px solid var(--border);background:color-mix(in srgb, var(--fg) 4%, transparent);border-radius:999px;align-self:flex-start;padding:3px;display:inline-flex}
.sx-calc-period button{color:var(--fg-4);font:inherit;cursor:pointer;transition:background .2s var(--sx-ease), color .2s var(--sx-ease);background:0 0;border:0;border-radius:999px;padding:6px 16px;font-size:12.5px;font-weight:620}
.sx-calc-period button:hover{color:var(--fg-2)}
.sx-calc-period button[aria-pressed=true]{background:var(--btn-bg);color:var(--btn-fg)}
.sx-calc-limits{flex-wrap:wrap;gap:8px 18px;display:flex}
.sx-calc-check{font-family:var(--font-mono);color:var(--fg-3);align-items:center;gap:7px;margin:0;font-size:12px;display:flex}
.sx-calc-check[data-ok=true] svg{color:var(--online)}
.sx-calc-check[data-ok=false],.sx-calc-check[data-ok=false] svg{color:var(--warning)}
.sx-calc-note { color: var(--fg-3); margin: 14px 0 0; font-size: 13px; line-height: 1.55; min-height: 0; }
.sx-calc-result .sx-btn { align-self: flex-start; margin-top: 14px; }
.sx-calc-input {
  width: 92px; height: 38px; padding: 0 10px; text-align: end;
  border: 1px solid var(--input-border, var(--border-2)); border-radius: 10px;
  background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 15px;
  font-weight: 650; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
  appearance: textfield;
}
.sx-calc-input:focus-visible { outline: 2px solid var(--ring, var(--sx-accent)); outline-offset: 2px; }
.sx-calc-input::-webkit-outer-spin-button,
.sx-calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sx-calc-hint {
  margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--fg-2);
  display: flex; justify-content: space-between;
}
/* the infinity glyph sits small and low against the digits beside it */
.sx-calc-hint-max { font-size: 19px; line-height: 14px; }
.sx-calc-free {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--online) 14%, transparent);
  color: var(--online); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--online) 35%, transparent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
}

.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;
}
.sx-compare-group {
  font-family: var(--font-mono); font-size: 11px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fg);
  padding-top: 24px !important; border-bottom: 0 !important;
}

/* ---------- 27. Comparison table — structure ---------- */
.sx-compare-wrap {
  /* an opaque colour for the column that stays put while the rest scrolls;
     the table's own glass is translucent and cells would show through it */
  --sx-sticky-col: color-mix(in srgb, var(--fg) 3%, var(--bg));
  margin-top: 46px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sx-glass-border); border-radius: var(--sx-radius);
  background: var(--sx-glass);
  box-shadow: inset 0 1px 0 var(--sx-glass-hi), var(--sx-glass-shadow); overflow: visible;
}

.sx-compare th, .sx-compare td { padding: 14px 18px; border: 0; vertical-align: middle; }

/* plan columns are centred; the feature column stays left */
.sx-compare thead th {
  background: transparent; border-bottom: 1px solid var(--border); padding-block: 22px 20px;
  vertical-align: top;
}
.sx-compare thead th:first-child {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-4); text-align: left;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border-inline-end: 1px solid var(--border);
}
.sx-compare thead th:not(:first-child) { text-align: center; }
.sx-compare .sx-compare-plan {
  display: flex; flex-direction: column; gap: 5px; align-items: center; width: 100%;
}
/* target the name by class: a positional selector here silently captured the
   badge once it was added ahead of the name in the markup */
.sx-compare .sx-compare-name {
  font-size: 16px; font-weight: 680; letter-spacing: -.02em; color: var(--fg);
}
.sx-compare .sx-compare-price { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--accent-fg); }
.sx-compare th[scope="row"] {
  width: 38%; font-weight: 600; color: var(--fg); text-align: left;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border-inline-end: 1px solid var(--border); font-size: 14px;
}
.sx-compare td {
  text-align: center; color: var(--fg-3); font-variant-numeric: tabular-nums; font-size: 14px;
}

/* hairlines only between feature rows, never against a group heading */
.sx-compare tbody tr + tr:not(.sx-compare-grouprow) th,
.sx-compare tbody tr + tr:not(.sx-compare-grouprow) td { border-top: 1px solid var(--hairline); }
.sx-compare tbody tr:not(.sx-compare-grouprow):hover th,
.sx-compare tbody tr:not(.sx-compare-grouprow):hover td {
  background: color-mix(in srgb, var(--sx-accent) 5%, transparent);
}

/* group heading reads as a band, not a floating row */
.sx-compare-grouprow th {
  text-align: left; padding: 22px 18px 8px; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fg);
  background: color-mix(in srgb, var(--sx-accent) 5%, transparent);
  border-inline-end: 1px solid var(--border);
}

/* featured column: one continuous tint with rounded ends */
.sx-compare col.is-featured { background: color-mix(in srgb, var(--sx-accent) 7%, transparent); }
.sx-compare thead th.is-featured {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sx-accent) 35%, transparent);
  position: relative;
}
.sx-compare td.is-featured, .sx-compare th.is-featured { background: transparent; }
.sx-compare tbody tr:last-child td.is-featured { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sx-accent) 22%, transparent); }

@media (max-width: 860px) {
  
}
@media (max-width: 720px) {
  .sx-compare { font-size: 13.5px; }
  .sx-compare th, .sx-compare td { padding: 12px 14px; }
}

/* ---------- 28. Calculator — grouping and highlights ---------- */
.sx-calc-controls, .sx-calc-result { min-height: 300px; }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sx-calc-amount { color: var(--accent-fg); }
}

/* every price figure sits together, under the total */
.sx-calc-breakdown {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline);
  display: grid; gap: 10px;
}

.sx-calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 0; }
.sx-calc-line dt { font-size: 13.5px; color: var(--fg-4); }
.sx-calc-line dd { margin: 0; font-size: 13.5px; color: var(--fg-3); }
.sx-calc-line dd b {
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--accent-fg);
}
.sx-calc-line[data-calc-yearline] dd b { color: var(--fg); }

/* free state reads green, paid state reads teal */
.sx-calc-result[data-calc-state="free"] { border-color: color-mix(in srgb, var(--online) 55%, transparent); }
.sx-calc-result[data-calc-state="free"]::before {
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--online) 14%, transparent), transparent 72%);
}
.sx-calc-result[data-calc-state="free"] .sx-calc-name { color: var(--online); }
.sx-calc-result[data-calc-state="free"] .sx-calc-amount {
  background: none; -webkit-text-fill-color: currentColor; color: var(--online);
}
.sx-calc-result[data-calc-state="free"] .sx-calc-line dd b { color: var(--online); }

.sx-calc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-calc-preset {
  font: inherit; font-size: 12px; font-weight: 620; cursor: pointer; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--sx-glass-border); background: var(--sx-glass);
  color: var(--fg-2);
  transition: background .18s var(--sx-ease), border-color .18s var(--sx-ease), color .18s var(--sx-ease);
}
.sx-calc-preset:hover { border-color: color-mix(in srgb, var(--sx-accent) 55%, transparent); color: var(--fg); }
.sx-calc-preset[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sx-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--sx-accent) 50%, transparent);
  color: var(--accent-fg);
}

/* ---------- 29. Calculator — legend and narrow layout ---------- */
@media (max-width: 860px) {
  .sx-calc-controls, .sx-calc-result { min-height: 0; }
}

.sx-calc-legend {
  margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3);
}
.sx-calc[data-calc] .sx-calc-bar { background: color-mix(in srgb, var(--fg) 8%, transparent); }

/* ---------- 30. Calculator — control row and slider track ---------- */
.sx-calc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sx-calc-top .sx-calc-label { flex: none; }
.sx-calc-top .sx-calc-presets { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.sx-calc-top .sx-calc-input { flex: none; margin-inline-start: auto; }

.sx-calc[data-calc-state="free"] .sx-calc-slider {
  --calc-c1: var(--online);
  --calc-c2: var(--online);
}

@media (max-width: 520px) {
  .sx-calc-top .sx-calc-input { margin-inline-start: 0; }
  .sx-calc-top .sx-calc-presets { order: 3; flex-basis: 100%; }
}

/* ---------- 31. Calculator — value bubble ---------- */
.sx-calc-track { position: relative; }
.sx-calc-slider-wrap { position: relative; padding-bottom: 30px; display: flex; align-items: center; }
/* with no ceiling the thumb stops at 90%; the last tenth fades out toward the
   infinity sign, a length that is drawn but cannot be reached */
.sx-calc-slider-wrap:has(.sx-calc-tail) .sx-calc-slider { flex: 0 0 90%; width: 90%; }
.sx-calc-tail {
  flex: 1 1 auto; height: 8px; margin-left: -2px; border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--calc-track, color-mix(in srgb, var(--fg) 10%, transparent)), transparent);
  --calc-track: color-mix(in srgb, var(--fg) 10%, transparent);
}
.sx-calc-bubble {
  position: absolute; top: 30px; left: var(--calc-thumb-x, 0px);
  transform: translateX(-50%);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--btn-fg);
  background: color-mix(in oklab, var(--calc-c1, var(--sx-accent)), var(--sx-grad-2) var(--calc-mix, 0%));
  box-shadow: 0 4px 12px -4px var(--sx-glow);
  transition: background .2s var(--sx-ease);
}
.sx-calc-bubble::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid color-mix(in oklab, var(--calc-c1, var(--sx-accent)), var(--sx-grad-2) var(--calc-mix, 0%));
}
.sx-calc[data-calc-state="free"] .sx-calc-bubble,
.sx-calc[data-calc-state="free"] .sx-calc-bubble::before { --calc-c1: var(--online); }
.sx-calc[data-calc-state="free"] .sx-calc-bubble { background: var(--online); }
.sx-calc[data-calc-state="free"] .sx-calc-bubble::before { border-bottom-color: var(--online); }

/* ---------- 32. Calculator — result header and total ---------- */
.sx-calc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: nowrap;
}
.sx-calc-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.sx-calc-head .sx-btn { flex: 0 0 auto; margin: 0; white-space: nowrap; }

@media (max-width: 520px) {
  .sx-calc-head { flex-direction: column; align-items: stretch; }
  .sx-calc-head .sx-btn { align-self: stretch; }
  .sx-calc-cost { justify-content: flex-start; text-align: start; }
}

/* ---------- 33. Comparison table — feature column, marks, CTA row ---------- */

/* included / not included, at a size you can read across the row */
.sx-yes { display: inline-flex; color: var(--online); }
.sx-no {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  background: var(--n-300); text-indent: -9999px; overflow: hidden;
  vertical-align: middle;
}
:root[data-theme="dark"] .sx-no { background: var(--n-600); }

/* one CTA per plan, closing the table */

/* ---------- 34. Plan cards — name and popular badge ---------- */

.sx-plan-card[data-featured="true"] .sx-plan-name { color: var(--accent-fg); }

.sx-plan-card[data-featured="true"]:hover { transform: translateY(-9px); }
/* the badge straddles the card edge, as it does above the comparison table. Only
   the badge leaves the flow: .sx-plan-ribbons stays as a spacer so the featured
   card's heading still lines up with the plans either side of it. */
.sx-plan-card[data-featured="true"] .sx-plan-ribbon {
  /* -2px offsets the card's 2px border: absolute insets are measured from the
     padding box, so top:0 would leave the badge sitting low by the border width */
  position: absolute; top: -2px; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap;
  box-shadow: 0 2px 10px -3px var(--sx-glow);
}
@media (max-width: 720px) {
  .sx-plan-card[data-featured="true"],
  .sx-plan-card[data-featured="true"]:hover { transform: none; }
}

/* ---------- 35. Comparison table — header cells and value emphasis ---------- */

.sx-compare-badge {
  display: inline-flex; align-items: center; padding: 4px 11px; margin-bottom: 2px;
  border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 9.5px;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; position: absolute;
  top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap;
  box-shadow: 0 2px 10px -3px var(--sx-glow);
}
.sx-compare-name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.sx-compare-price { font-size: 12.5px; font-weight: 600; color: var(--accent-fg); }
.sx-compare-cta { display: block; width: 100%; margin-top: 10px; }
.sx-compare-cta .sx-btn { width: 100%; max-width: 190px; font-size: 13px; }

/* a value that exists is an advantage; in the highlighted plan it is the point */
.sx-compare td.is-strong { color: var(--fg-2); font-weight: 580; }
.sx-compare td.is-featured.is-strong { color: var(--accent-fg); font-weight: 700; }
.sx-compare td.is-featured .sx-yes { color: var(--accent-fg); }

@media (max-width: 720px) {
  .sx-compare-cta .sx-btn { max-width: none; }
}

/* ---------- 36. Buttons — light sweep on every control ---------- */
/* The sweep animates background-position rather than moving a child, so it never
   needs overflow:hidden — which would have clipped the primary button's pulse ring. */
.sx-btn::after,
.nav-cta::after,
.tool-btn::after,
.sx-calc-preset::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(105deg,
      transparent 42%, var(--sweep, #ffffff5e) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 160% 0;
  transition: background-position .75s var(--sx-ease);
}
.sx-btn:hover::after,
.nav-cta:hover::after,
.tool-btn:hover::after,
.sx-calc-preset:hover::after { background-position: -60% 0; }

/* on light surfaces a white streak is invisible, so tint it */
.sx-btn--secondary, .nav-cta--ghost, .tool-btn, .sx-calc-preset {
  --sweep: color-mix(in srgb, var(--sx-accent) 30%, transparent);
}
.tool-btn, .sx-calc-preset {
  position: relative;
  transition: background .18s var(--sx-ease), border-color .18s var(--sx-ease), color .18s var(--sx-ease), transform .2s var(--sx-ease), box-shadow .2s var(--sx-ease);
}

.tool-btn:hover, .sx-calc-preset:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px var(--sx-glow);
}
.tool-btn:active, .sx-calc-preset:active { transform: translateY(0); }

/* Sign in had no hover treatment beyond the shared 1px lift */
.nav-cta--ghost:hover {
  border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-glass-border));
  background: color-mix(in srgb, var(--sx-accent) 10%, var(--sx-glass));
  color: var(--fg);
}

.cta-shimmer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 40%, #ffffff47 50%, transparent 60%);
  transform: translateX(-140%);
  animation: sx-cta-shimmer 6s var(--sx-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta-shimmer::before { animation: none; }
  .sx-btn::after, .nav-cta::after, .tool-btn::after, .sx-calc-preset::after { transition: none; }
}

/* button glyphs sit on the baseline and slide with the label on hover */
.sx-btn-icon { display: inline-flex; flex: none; transition: transform .24s var(--sx-ease); }
.sx-btn:hover .sx-btn-icon { transform: translateX(3px); }

/* ---------- 37. Comparison table — type scale and edge badge ---------- */
/* one consistent step between label, value and heading sizes */
.sx-compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }

@media (max-width: 860px) {
  /* No table, no sideways scroll. The plan cards stack, then each feature
     becomes its own block listing what every plan gives - the cell carries its
     plan name, so a value never depends on a header off to the side. */
  .sx-compare-wrap {
    margin-top: 38px; overflow: visible; border: 0; background: none;
    box-shadow: none; border-radius: 0;
  }
  .sx-compare, .sx-compare thead, .sx-compare tbody,
  .sx-compare tr, .sx-compare th, .sx-compare td { display: block; width: auto; }
  .sx-compare { min-width: 0; border-collapse: separate; }
  .sx-compare colgroup { display: none; }

  /* the plans, stacked */
  .sx-compare thead tr { display: grid; gap: 12px; }
  .sx-compare thead th:first-child { display: none; }
  .sx-compare thead th {
    padding: 20px 18px; text-align: center;
    border: 1px solid var(--sx-glass-border); border-radius: var(--sx-radius);
    background: var(--sx-glass); box-shadow: inset 0 1px 0 var(--sx-glass-hi);
  }
  .sx-compare thead th.is-featured {
    border-color: color-mix(in srgb, var(--sx-accent) 45%, transparent);
    background: linear-gradient(168deg, color-mix(in srgb, var(--sx-accent) 10%, transparent), transparent 62%), var(--sx-glass);
  }
  .sx-compare-badge { position: static; transform: none; margin: 0 0 8px; }
  .sx-compare-cta .sx-btn { width: 100%; }

  /* a group heading introduces the blocks under it */
  .sx-compare-grouprow th {
    margin: 26px 0 10px; padding: 0; background: none; border: 0;
  }
  .sx-compare-grouprow th > span { position: static; }

  /* one block per feature */
  .sx-compare tbody tr:not(.sx-compare-grouprow) {
    margin-bottom: 10px; padding: 14px 16px;
    border: 1px solid var(--sx-glass-border); border-radius: 16px;
    background: var(--sx-glass);
  }
  .sx-compare tbody th[scope="row"] {
    width: auto; padding: 0 0 8px; border: 0; background: none;
    font-size: 15px; font-weight: 640;
  }
  .sx-compare tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 7px 0; border: 0; border-top: 1px solid var(--hairline);
    text-align: end; font-size: 14px;
  }
  .sx-compare tbody td::before {
    content: attr(data-plan); flex: none;
    font-family: var(--font-mono); font-size: 11px; font-weight: 650;
    letter-spacing: .06em; text-transform: uppercase; color: var(--fg-4);
  }
  .sx-compare tbody td.is-featured { background: none; }
  .sx-compare tbody td.is-featured::before { color: var(--accent-fg); }
}

/* ---------- 38. Language menu ---------- */
.nav-menu--lang { min-width: 148px; inset-inline-start: auto; inset-inline-end: 0; }
.nav-menu--lang .menu-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav-menu--lang .menu-link[aria-current="true"] { color: var(--accent-fg); font-weight: 640; }
/* tick sits after the label so every language name starts on the same edge */
.nav-menu--lang .menu-link[aria-current="true"]::after {
  content: "\2713"; position: static; inset: auto; height: auto; width: auto;
  background: none; scale: none; transition: none;
  font-size: 12px; line-height: 1; color: var(--accent-fg);
}
.mobile-nav .menu-link[aria-current="true"] { color: var(--accent-fg); font-weight: 640; }

/* caret on the header dropdowns, turning when the menu is open */
.tool-caret { flex: none; display: block; opacity: .6; transition: transform .22s var(--sx-ease); }
[aria-expanded="true"] .tool-caret { transform: rotate(180deg); }

/* flags in the language control */
.flag { flex: none; display: block; border-radius: 3px; box-shadow: 0 0 0 1px #08181826; }
:root[data-theme="dark"] .flag { box-shadow: 0 0 0 1px #ffffff2e; }

.nav-menu--lang .menu-link > span { flex: 1 1 auto; }
.mobile-nav .menu-link[hreflang] { display: flex; align-items: center; gap: 10px; }