/*
  Unify marketing site. Rebuilt as plain CSS from Gabe's design (apps/site/README.md).
  No inline styles anywhere, so the page runs under a strict Content-Security-Policy.
  Breakpoints: 1100px (four how-it-works cards), 860px (menu button), 820px (walkthrough sidebar),
  640px (the design's mobile variant, and phones, where the walkthrough is not pinned; site.js uses
  the same width).
*/

/* Fonts: Inter 4.001 and JetBrains Mono 2.211, SIL Open Font License 1.1 (fonts/*-OFL.txt). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sans: Inter, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ink: #1C1917;
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-150: #EFEEEC;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --purple-25: #FAF7FD;
  --purple-50: #F4EDFB;
  --purple-100: #E2CFF4;
  --purple-200: #B98EE0;
  --purple-600: #682FB0;
  --purple-700: #4F2089;
  --green-50: #DCFCE7;
  --green-500: #16A34A;
  --green-700: #15803D;
  --red-50: #FEE2E2;
  --red-700: #B91C1C;
  --amber-50: #FEF3C7;
  --amber-700: #B45309;
  --header: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11";
}
h1, h2, h3, p { margin: 0; }
a { color: var(--purple-600); text-decoration: none; }
a:hover { color: var(--purple-700); }
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
}
/* No grey or blue flash on a tap; keyboard focus keeps the ring below. */
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; }
[hidden] { display: none !important; }
.right { text-align: right; }
.neg { color: var(--red-700); }
.pos { color: var(--green-700); font-weight: 500; }
.muted { color: var(--stone-600); }
.strong { font-weight: 600; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 50;
  padding: 8px 12px;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.15);
  font: 500 14px var(--sans);
}
.skip:focus { left: 12px; }

.page {
  width: 100%;
  overflow-x: clip;
  background: var(--stone-50);
  font-family: var(--sans);
  color: var(--ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  flex: none;
  border-radius: 6px;
  transition: background 120ms;
}
.btn-primary { color: #FFFFFF; background: var(--purple-600); }
.btn-primary:hover { color: #FFFFFF; background: var(--purple-700); }
.btn-header { height: 42px; padding: 0 18px; font: 500 15px var(--sans); }
.btn-lg { height: 48px; padding: 0 22px; font: 500 15px var(--sans); border-radius: 8px; }
.hero-actions .btn-primary {
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 12px 32px -12px rgba(79, 32, 137, 0.55);
}
.btn-secondary {
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--stone-200);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}
.btn-secondary:hover { color: var(--ink); background: var(--stone-100); }
.btn-white { height: 44px; padding: 0 20px; font: 500 14.5px var(--sans); color: var(--purple-700); background: #FFFFFF; }
.btn-white:hover { color: var(--purple-700); background: var(--purple-50); }
.btn-outline-white {
  height: 44px;
  padding: 0 20px;
  font: 500 14.5px var(--sans);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-outline-white:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 250, 249, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(231, 229, 228, 0.7);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  height: var(--header);
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-left { display: flex; align-items: center; gap: 40px; }
.brand img { height: 32px; width: auto; display: block; }
.nav { display: flex; gap: 4px; }
.nav a {
  white-space: nowrap;
  font: 500 15px var(--sans);
  color: var(--stone-700);
  padding: 9px 14px;
  border-radius: 6px;
  transition: background 120ms;
}
.nav a:hover { background: var(--stone-100); color: var(--ink); }
.topbar-right { display: flex; gap: 6px; align-items: center; }
.menu-toggle {
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--stone-700);
  border-radius: 6px;
}
.menu-toggle:hover { background: var(--stone-100); }
.menu-toggle span { display: flex; }
.menu-toggle .menu-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: flex; }
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px clamp(16px, 4vw, 40px) 16px;
  background: var(--stone-50);
  border-bottom: 1px solid var(--stone-200);
  box-shadow: 0 12px 24px -12px rgba(28, 25, 23, 0.18);
}
.menu a {
  font: 500 16px var(--sans);
  color: var(--stone-700);
  padding: 12px 4px;
  border-bottom: 1px solid var(--stone-150);
}
.menu a:last-child { border-bottom: 0; }
.menu a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--stone-50); }
.aurora {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 280px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}
.aurora-field { position: absolute; inset: -8%; }
.blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.blob-1 {
  width: 52%; top: -22%; left: -6%;
  background: radial-gradient(circle, rgba(170, 118, 222, 0.5) 0%, rgba(170, 118, 222, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: uBlobA 22s cubic-bezier(.45, .05, .55, .95) infinite, uShift 17.6s ease-in-out infinite;
}
.blob-2 {
  width: 48%; top: -26%; left: 52%;
  background: radial-gradient(circle, rgba(222, 200, 246, 0.7) 0%, rgba(222, 200, 246, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: uBlobB 26s cubic-bezier(.45, .05, .55, .95) infinite, uShift 20.8s ease-in-out infinite;
}
.blob-3 {
  width: 38%; top: 6%; left: 30%;
  background: radial-gradient(circle, rgba(196, 160, 236, 0.45) 0%, rgba(196, 160, 236, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: uBlobC 31s cubic-bezier(.45, .05, .55, .95) infinite, uShift 24.8s ease-in-out infinite;
}
.blob-4 {
  width: 44%; top: 36%; left: 62%;
  background: radial-gradient(circle, rgba(150, 96, 212, 0.3) 0%, rgba(150, 96, 212, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: uBlobB 29s cubic-bezier(.45, .05, .55, .95) infinite, uShift 23.2s ease-in-out infinite;
}
.blob-5 {
  width: 40%; top: 40%; left: -12%;
  background: radial-gradient(circle, rgba(178, 134, 228, 0.3) 0%, rgba(178, 134, 228, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: uBlobA 35s cubic-bezier(.45, .05, .55, .95) infinite, uShift 28s ease-in-out infinite;
}
@keyframes uBlobA {
  0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
  25% { transform: translate3d(4%, 6%, 0) scale(1.06); }
  50% { transform: translate3d(12%, 10%, 0) scale(1.1); }
  75% { transform: translate3d(2%, 12%, 0) scale(1.03); }
}
@keyframes uBlobB {
  0%, 100% { transform: translate3d(6%, 2%, 0) scale(1.05); }
  25% { transform: translate3d(-4%, 8%, 0) scale(1); }
  50% { transform: translate3d(-12%, 10%, 0) scale(.96); }
  75% { transform: translate3d(-2%, -2%, 0) scale(1.04); }
}
@keyframes uBlobC {
  0%, 100% { transform: translate3d(0, 6%, 0) scale(.96); }
  25% { transform: translate3d(8%, -2%, 0) scale(1.04); }
  50% { transform: translate3d(10%, -8%, 0) scale(1.1); }
  75% { transform: translate3d(-4%, 0, 0) scale(1); }
}
@keyframes uShift {
  0%, 100% { opacity: .7; }
  50% { opacity: .95; }
}
/* The still version of the design, shown when the visitor asks for less motion. */
.aurora-still {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 80% at 50% 0%, #E9DDF7 0%, rgba(244, 237, 251, 0.55) 42%, rgba(250, 250, 249, 0) 78%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
  background: radial-gradient(460px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(185, 142, 224, 0.28), rgba(185, 142, 224, 0) 70%);
}
.hero-glow.is-on { opacity: 1; }
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(104, 47, 176, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 47, 176, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 25%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 25%, #000 0%, transparent 75%);
}
.hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(40px, 5.5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--purple-100);
  border-radius: 999px;
  padding: 6px 14px 6px 16px;
  margin-bottom: 28px;
  width: max-content;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  transition: border-color 120ms;
}
.pill:hover { border-color: var(--purple-200); }
.pill span { font: 500 12.5px/1.35 var(--sans); color: var(--stone-700); text-align: left; white-space: nowrap; }
.pill .icon { flex: none; color: var(--purple-600); }
.hero-copy { display: grid; justify-items: center; width: fit-content; max-width: 100%; }
.hero h1 {
  font: 600 clamp(38px, 6.2vw, 68px)/1.02 var(--sans);
  margin: 0 0 20px;
  letter-spacing: -0.035em;
  max-width: 860px;
  text-wrap: balance;
}
.hero h1 span { color: var(--purple-600); }
.hero-copy p {
  font: 400 clamp(16px, 1.6vw, 18px)/1.55 var(--sans);
  color: var(--stone-600);
  margin: 0 0 32px;
  width: 0;
  min-width: 100%;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- platform walkthrough ---------- */
.platform { position: relative; }
.platform-sticky {
  position: sticky;
  top: var(--header);
  min-height: calc(100vh - var(--header));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 1.4vh, 16px) clamp(8px, 2vw, 24px);
}
.platform-panel {
  position: relative;
  overflow: hidden;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  border-radius: 22px;
  background:
    radial-gradient(50% 60% at 85% 0%, rgba(185, 142, 224, 0.38) 0%, rgba(104, 47, 176, 0) 70%),
    linear-gradient(160deg, #3B1870 0%, #2A1150 45%, #1E0B3A 100%);
  padding: clamp(20px, 3.5vh, 44px) clamp(14px, 3.2vw, 44px) clamp(14px, 3.2vw, 44px);
}
.platform-panel > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.platform-span { height: 320vh; }
.platform-head { margin-bottom: clamp(14px, 2.6vh, 28px); }
.eyebrow-dark {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-200);
  margin-bottom: clamp(6px, 1.2vh, 12px);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-200); }
.platform h2 {
  font: 600 clamp(24px, min(3.4vw, 4.8vh), 40px)/1.1 var(--sans);
  color: #FFFFFF;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.platform-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-bottom: clamp(12px, 2vh, 18px);
}
.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  flex: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  overflow: hidden;
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--purple-100);
  font: 500 14px var(--sans);
  transition: background 180ms, color 180ms;
}
.tab.is-active { background: #FFFFFF; color: var(--purple-700); }
/* Drawn inside the tab, which the strip's scrolling would clip outside: white on the dark panel,
   purple on the active tab's white. */
.tab:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.tab.is-active:focus-visible { outline-color: var(--purple-600); }
.tab-n { font: 500 10.5px var(--mono); opacity: .55; }
.tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: calc(var(--progress, 0) * 100%);
  background: var(--purple-200);
  transition: width 160ms linear;
}
.captions {
  flex: 1 1 280px;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 18px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.caption-title { font: 600 14.5px/1.35 var(--sans); color: #FFFFFF; }
.caption-body { font: 400 13.5px/1.45 var(--sans); color: var(--purple-100); text-wrap: pretty; }

.app {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  color: var(--ink);
}
.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--stone-200);
  background: var(--stone-50);
}
.app-top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dots { display: flex; gap: 6px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--stone-200); }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  white-space: nowrap;
  flex: none;
  border: 1px solid var(--stone-200);
  border-radius: 6px;
  background: #FFFFFF;
}
.chip strong { font: 600 12.5px var(--sans); }
.chip .code { font: 400 10.5px var(--mono); color: var(--stone-500); }
.chip-period { font: 500 10.5px var(--mono); color: var(--stone-700); }
.badge {
  font: 500 10.5px var(--sans);
  color: var(--stone-500);
  background: var(--stone-100);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  flex: none;
}
/* --app-height is measured by site.js so the whole panel fits under the header. */
.app-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  max-height: var(--app-height, max(260px, calc(100vh - 360px)));
  overflow-y: auto;
}
.app-side { border-right: 1px solid var(--stone-200); background: var(--stone-50); padding: 14px 10px; }
.side-label {
  font: 500 10px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone-400);
  padding: 0 8px 8px;
}
.side-ent { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; color: var(--green-500); }
.side-text { min-width: 0; color: var(--ink); }
.side-name { font: 500 12.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-code { font: 400 10px var(--mono); color: var(--stone-500); margin-top: 1px; white-space: nowrap; }
.side-sync {
  margin: 12px 8px 0;
  padding-top: 12px;
  border-top: 1px solid var(--stone-200);
  font: 400 10px/1.5 var(--mono);
  color: var(--stone-400);
}
.app-view { min-width: 0; min-height: var(--app-height, min(360px, max(260px, calc(100vh - 360px)))); }
.view-pad { padding: 20px 24px; }
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.view-head-tight { margin-bottom: 10px; }
.view-head-loose { margin-bottom: 16px; }
.view-title { font: 600 16px var(--sans); }
.view-sub { font: 400 10.5px var(--mono); color: var(--stone-500); margin-top: 3px; white-space: nowrap; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font: 500 11.5px var(--sans);
  background: var(--green-50);
  color: var(--green-700);
  border-radius: 999px;
  padding: 3px 10px;
}
.status-pill-lg { flex: none; padding: 4px 10px; }
.hscroll { overflow-x: auto; overflow-y: hidden; }

/* Connect */
.conn-table { min-width: 560px; }
.conn-row {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr .6fr 1.2fr .7fr;
  gap: 12px;
  height: 50px;
  align-items: center;
  border-bottom: 1px solid var(--stone-100);
}
.conn-head {
  height: auto;
  align-items: start;
  padding-bottom: 8px;
  font: 500 10px var(--mono);
  color: var(--stone-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom-color: var(--stone-200);
}
.cell-ent { min-width: 0; }
.ent-name { font: 500 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-code { font: 400 10px var(--mono); color: var(--stone-400); margin-top: 2px; }
.cell-sys { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 13px var(--sans); white-space: nowrap; }
.sys-logo { width: 28px; height: 22px; object-fit: contain; flex: none; display: block; }
.cell-ccy { font: 500 11px var(--mono); color: var(--stone-700); }
.cell-sync { font: 400 11px var(--mono); color: var(--stone-600); white-space: nowrap; }
.cell-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font: 500 11.5px var(--sans);
  color: var(--green-700);
  white-space: nowrap;
}
.cell-status .dot { background: var(--green-500); }
.csv-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  height: 44px;
  padding: 0 12px;
  border: 1px dashed var(--stone-300);
  border-radius: 8px;
  font: 400 12.5px var(--sans);
  color: var(--stone-600);
}
.csv-tag { font: 500 10px var(--mono); color: var(--stone-600); background: var(--stone-100); border-radius: 4px; padding: 2px 5px; }

/* Segmented controls */
.seg { display: flex; padding: 3px; background: var(--stone-100); border-radius: 8px; gap: 2px; }
.seg button {
  white-space: nowrap;
  flex: none;
  font: 500 12.5px var(--sans);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--stone-500);
  transition: background 180ms;
}
.seg button[aria-pressed="true"] {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08), 0 0 0 1px rgba(28, 25, 23, 0.04);
}
.seg-sm button { height: 28px; }

/* Eliminate */
.ic-row {
  padding: 11px 0;
  border-bottom: 1px solid var(--stone-100);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  align-items: center;
}
.ic-main { min-width: 0; }
.ic-desc { font: 500 13.5px var(--sans); }
.ic-meta { font: 400 10.5px var(--mono); color: var(--stone-500); margin-top: 3px; }
.ic-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font: 500 11.5px var(--sans);
  border-radius: 999px;
  padding: 3px 10px;
}
.ic-ok { background: var(--green-50); color: var(--green-700); }
.ic-bad { background: var(--red-50); color: var(--red-700); }
.ic-warn { background: var(--amber-50); color: var(--amber-700); }
.ic-note { flex-basis: 100%; font: 400 12.5px var(--sans); color: var(--stone-600); }
.ic-list[data-filter="attention"] .ic-row:not(.needs-attention) { display: none; }

/* FX translation */
.fx-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr .8fr 1fr;
  gap: 8px;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid var(--stone-100);
  font: 400 13px var(--sans);
  font-variant-numeric: tabular-nums;
}
.fx-head {
  height: auto;
  padding-bottom: 8px;
  font: 500 10px var(--mono);
  color: var(--stone-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom-color: var(--stone-200);
}
.fx-rate { font: 400 10.5px var(--mono); color: var(--stone-500); }
.fx-note, .fx-reserve {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--purple-50);
  border-radius: 8px;
  color: var(--purple-700);
}
.fx-note { font: 400 13px/1.5 var(--sans); }
.fx-reserve {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 13px var(--sans);
  font-variant-numeric: tabular-nums;
}
.fx-code { font: 400 10.5px var(--mono); color: var(--purple-600); margin-left: 6px; }

/* Close */
.close-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.close-count { font: 600 13px var(--sans); color: var(--stone-700); font-variant-numeric: tabular-nums; }
.close-bar { height: 6px; background: var(--stone-100); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.close-bar-fill {
  height: 100%;
  width: calc(var(--done, 3) / 6 * 100%);
  background: var(--purple-600);
  border-radius: 999px;
  transition: width 280ms cubic-bezier(.2, .8, .2, 1);
}
.step {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  width: calc(100% + 12px);
  height: 42px;
  padding: 0 6px;
  margin: 0 -6px;
  border-radius: 6px;
  border-bottom: 1px solid var(--stone-100);
  transition: background 120ms;
}
@media (hover: hover) {
  .step:hover { background: var(--stone-50); }
}
.step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--stone-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background 180ms;
}
.step-dot svg { opacity: 0; }
.step[aria-pressed="true"] .step-dot { background: var(--purple-600); border-color: var(--purple-600); }
.step[aria-pressed="true"] .step-dot svg { opacity: 1; }
.step-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.step-label { font: 500 13px var(--sans); color: var(--ink); }
.step-meta { font: 400 10.5px var(--mono); color: var(--stone-500); }
.step-status { font: 500 11.5px var(--sans); color: var(--stone-500); white-space: nowrap; }
.step[aria-pressed="true"] .step-status { color: var(--green-700); }
.step .step-meta[data-when="blocked"] { display: none; }
.step.is-blocked { cursor: not-allowed; }
.step.is-blocked .step-label { color: var(--stone-400); }
.step.is-blocked .step-meta[data-when="open"] { display: none; }
.step.is-blocked .step-meta[data-when="blocked"] { display: inline; }

/* Report */
.matrix { min-width: 720px; font-variant-numeric: tabular-nums; }
.matrix-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  column-gap: 12px;
  align-items: center;
}
.matrix-head {
  padding: 0 22px 8px 16px;
  height: 40px;
  align-items: end;
  font: 500 10px var(--mono);
  color: var(--stone-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--stone-200);
}
.matrix-head .group { color: var(--purple-600); }
.matrix-line {
  width: 100%;
  padding: 0 16px;
  height: 44px;
  border-bottom: 1px solid var(--stone-100);
  background: #FFFFFF;
  font: 400 13px var(--sans);
  transition: background 120ms;
}
.matrix-line.total { background: var(--stone-50); font-weight: 600; }
@media (hover: hover) {
  .matrix-line:hover { background: var(--purple-50); }
}
.matrix-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.code { font: 400 10px var(--mono); color: var(--stone-400); }
.matrix-line .cell { text-align: right; padding: 4px 6px; border-radius: 4px; white-space: nowrap; }
.matrix-line .cell.group { font-weight: 600; background: rgba(244, 237, 251, 0.7); }
.matrix-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
.matrix-hint { display: flex; gap: 8px; align-items: center; font: 500 12.5px var(--sans); color: var(--purple-600); }
.matrix-balance { font: 400 11px var(--mono); color: var(--stone-400); }
.report-trace {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  font-variant-numeric: tabular-nums;
}
.trace-list { border-right: 1px solid var(--stone-200); padding: 10px 0; }
.trace-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--sans);
  color: var(--purple-600);
  padding: 6px 20px 8px;
}
.trace-back:hover { color: var(--purple-700); }
.trace-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  height: 44px;
  align-items: center;
  background: #FFFFFF;
  box-shadow: inset 2px 0 0 transparent;
  font: 400 13px var(--sans);
  transition: background 120ms;
}
.trace-row.total { font-weight: 600; }
@media (hover: hover) {
  .trace-row:hover { background: var(--purple-25); }
}
.trace-row[aria-pressed="true"] { background: var(--purple-50); box-shadow: inset 2px 0 0 var(--purple-600); }
.trace-detail { padding: 20px 24px; }
.trace-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.trace-title { font: 600 17px var(--sans); letter-spacing: -0.01em; }
.trace-top .view-sub { margin-top: 4px; }
.trace-total { font: 600 24px var(--sans); letter-spacing: -0.02em; }
.small-label {
  font: 500 10px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone-400);
  padding-bottom: 6px;
}
.trace-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  align-items: center;
  border-top: 1px solid var(--stone-100);
  font: 400 13px var(--sans);
}
.trace-ent { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trace-rate { font: 400 10px var(--mono); color: var(--stone-400); white-space: nowrap; }
.trace-id { font: 500 10.5px var(--mono); color: var(--stone-700); }
.trace-rule { font: 500 10.5px var(--sans); background: var(--purple-50); color: var(--purple-700); border-radius: 999px; padding: 2px 8px; }
.trace-sum {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  border-top: 1px solid var(--stone-300);
  font: 600 14px var(--sans);
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) clamp(16px, 4vw, 40px); }
.section-white { background: #FFFFFF; }
.section-canvas { background: var(--stone-50); border-top: 1px solid var(--stone-150); }
.container { max-width: 1160px; margin: 0 auto; }
.eyebrow {
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 14px;
}
.h2 {
  font: 600 clamp(28px, 3.6vw, 40px)/1.1 var(--sans);
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2-flush { margin: 0; }
.h2-faq { margin: 0 0 12px; }
.lede { font: 400 16px/1.6 var(--sans); color: var(--stone-600); margin: 0 0 32px; max-width: 460px; text-wrap: pretty; }
.lede-flush { margin: 0; }

/* Auditability */
.lineage-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
}
.point { display: flex; gap: 14px; align-items: flex-start; }
.point-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--purple-50);
  color: var(--purple-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.point-text { min-width: 0; }
.point-title { font: 600 14.5px var(--sans); margin-bottom: 4px; }
.point-body { font: 400 13.5px/1.55 var(--sans); color: var(--stone-600); text-wrap: pretty; }
.lin-card {
  border: 1px solid var(--stone-200);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 24px -12px rgba(28, 25, 23, 0.12), 0 48px 96px -32px rgba(79, 32, 137, 0.38);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.lin-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.lin-top-text { flex: 1; min-width: 0; }
.lin-title { font: 600 15px/1.3 var(--sans); white-space: nowrap; }
.lin-sub { font: 400 10.5px var(--mono); color: var(--stone-500); margin-top: 3px; white-space: nowrap; }
.lin-total { font: 600 22px var(--sans); letter-spacing: -0.02em; flex: none; }
.lin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--stone-200);
}
.lin-hint { font: 400 10.5px var(--mono); color: var(--stone-400); white-space: nowrap; }
.lin-scroll { height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.lin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 18px;
  background: var(--stone-50);
  border-bottom: 1px solid #F0EEED;
  font: 600 13px var(--sans);
}
.lin-head-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.lin-head .code { color: var(--stone-500); }
.lin-item { border-bottom: 1px solid var(--stone-100); }
.lin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  background: #FFFFFF;
  box-shadow: inset 2px 0 0 transparent;
  font: 400 13px var(--sans);
  transition: background 120ms;
}
.lin-row.inset { padding-left: 34px; }
.lin-row.strong { font-weight: 600; }
/* Hover only where there is a pointer: on a phone a tapped row would otherwise stay tinted. */
@media (hover: hover) {
  .lin-row:hover { background: var(--purple-25); }
}
.lin-row[aria-expanded="true"] { background: var(--purple-25); box-shadow: inset 2px 0 0 var(--purple-600); }
.lin-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { transition: transform 180ms; }
.lin-row[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.lin-panel { padding: 6px 18px 10px; background: var(--stone-50); border-top: 1px solid var(--stone-100); }
.lin-panel.inset { padding-left: 34px; }
.tx {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  height: 30px;
  font: 400 12.5px var(--sans);
}
.tx-date { font: 400 10.5px var(--mono); color: var(--stone-500); white-space: nowrap; }
.tx-payee { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-more { font: 400 10.5px var(--mono); color: var(--stone-400); height: 22px; display: flex; align-items: center; padding-left: 60px; }
.tx-foot {
  display: flex;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--stone-150);
  font: 400 10.5px var(--mono);
  color: var(--stone-500);
}
.lin-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--stone-200);
  background: #FFFFFF;
}
.lin-foot-text { min-width: 0; }
.lin-foot-title { font: 500 13px var(--sans); }
.lin-foot-sub {
  font: 400 10.5px var(--mono);
  color: var(--stone-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* How it works */
.how-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px 48px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.how-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.how-card {
  background: #FFFFFF;
  border: 1px solid var(--stone-200);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.how-n { font: 500 11px var(--mono); color: var(--purple-600); margin-bottom: 10px; }
.how-title { font: 600 17px var(--sans); margin-bottom: 6px; }
.how-body { font: 400 14px/1.55 var(--sans); color: var(--stone-600); text-wrap: pretty; }
.mini { border: 1px solid #F0EEED; border-radius: 8px; overflow: hidden; margin-top: auto; }
.mini-row { height: 42px; padding: 0 12px; border-bottom: 1px solid var(--stone-100); }
.mini-row:last-child { border-bottom: 0; }
.tree-row { display: flex; align-items: center; gap: 8px; padding-left: 28px; }
.tree-row.parent { padding-left: 12px; }
.tree-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-600); flex: none; }
.tree-elbow {
  width: 8px;
  height: 8px;
  border-left: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  margin-top: -6px;
  flex: none;
}
.mini-name { font: 400 12.5px var(--sans); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row.parent .mini-name { font-weight: 600; }
.mini-meta { font: 400 10px var(--mono); color: var(--stone-500); white-space: nowrap; }
.sys-row { display: flex; align-items: center; gap: 10px; }
.mini-sys { font: 500 13px var(--sans); flex: 1; min-width: 0; }
.badge-ok {
  font: 500 10.5px var(--sans);
  color: var(--green-700);
  background: var(--green-50);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); gap: 8px; align-items: center; }
.map-side { min-width: 0; }
.map-name { font: 400 12px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-name.to { font-weight: 500; }
.map-code { font: 400 10px var(--mono); color: var(--stone-400); white-space: nowrap; }
.map-code.to { color: var(--purple-600); }
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kv-label { font: 400 12px var(--sans); color: var(--stone-600); }
.kv-value { font: 400 10.5px var(--mono); color: var(--ink); white-space: nowrap; }
.locked { padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; font-variant-numeric: tabular-nums; }
.locked-top { display: flex; justify-content: space-between; align-items: center; }
.locked-period { font: 600 13px var(--sans); }
.locked-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11px var(--sans);
  background: var(--stone-100);
  color: var(--stone-700);
  border-radius: 999px;
  padding: 2px 8px;
}
.locked-bar { height: 6px; background: var(--purple-600); border-radius: 999px; }
.locked-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font: 400 12.5px var(--sans); }
.locked-foot {
  font: 400 10.5px var(--mono);
  color: var(--stone-500);
  border-top: 1px solid var(--stone-100);
  padding-top: 10px;
}

/* FAQ */
.faq-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.faq-intro { font: 400 15px/1.6 var(--sans); color: var(--stone-600); }
.faq-intro a { font-weight: 500; }
.faq-list { border-top: 1px solid var(--stone-200); }
.faq-item { border-bottom: 1px solid var(--stone-200); }
/* The question reaches 8px past the column on each side, so its focus ring is drawn inside it,
   clear of the text and of the answer below. */
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 -8px;
  padding: 20px 8px;
  border-radius: 8px;
  font: 500 15.5px/1.4 var(--sans);
  color: var(--ink);
}
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-item[open] summary { padding-bottom: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .faq-item summary:hover { color: var(--purple-600); }
}
.faq-item summary span { flex: 1; min-width: 0; }
.faq-item summary svg { flex: none; color: var(--stone-500); transition: transform 180ms; }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p {
  font: 400 14.5px/1.6 var(--sans);
  color: var(--stone-600);
  padding: 0 40px 20px 0;
  text-wrap: pretty;
}

/* Book a call */
.book {
  padding: 0 clamp(12px, 3vw, 32px) clamp(12px, 3vw, 32px);
  background: #FFFFFF;
  scroll-margin-top: calc(var(--header) + 16px);
}
.book-band {
  position: relative;
  overflow: hidden;
  max-width: 1216px;
  margin: 0 auto;
  border-radius: 16px;
  background:
    radial-gradient(55% 120% at 90% 0%, rgba(185, 142, 224, 0.55) 0%, rgba(104, 47, 176, 0) 60%),
    linear-gradient(120deg, #2E1257 0%, #4F2089 60%, #682FB0 100%);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
}
.book-watermark {
  position: absolute;
  right: clamp(-60px, -3vw, -20px);
  bottom: -18%;
  width: clamp(220px, 30vw, 380px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.08;
  pointer-events: none;
}
.book-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.book-lead { display: flex; align-items: center; gap: 20px; max-width: 620px; }
.book-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.book-mark img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
.book-eyebrow { color: var(--purple-100); }
.book-eyebrow .eyebrow-dot { background: var(--purple-100); }
.book-title {
  font: 600 clamp(26px, 3.4vw, 36px)/1.1 var(--sans);
  color: #FFFFFF;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.book-copy { font: 400 15px/1.55 var(--sans); color: var(--purple-100); margin-top: 10px; max-width: 460px; text-wrap: pretty; }
.book-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.book-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.book-note { font: 400 12.5px var(--sans); color: var(--purple-100); }

/* Footer */
.footer { padding: clamp(48px, 6vw, 64px) clamp(16px, 4vw, 40px) 28px; background: #FFFFFF; }
.footer-inner { max-width: 1160px; margin: 0 auto; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px 48px;
}
.footer-about { max-width: 400px; }
.footer-logo { height: 26px; width: auto; display: block; }
.footer-line { margin-top: 16px; font: 400 14px/1.6 var(--sans); color: var(--stone-600); text-wrap: pretty; }
.footer-label {
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
  margin-bottom: 10px;
}
.footer-mail { font: 500 15px var(--sans); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(36px, 5vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--stone-150);
  font: 400 12.5px var(--sans);
  color: var(--stone-500);
}
/* Plain text until the pages exist. */
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links li { font: 400 12.5px var(--sans); color: var(--stone-500); }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .how-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
}
@media (min-width: 860px) {
  .menu { display: none !important; }
}
@media (max-width: 819px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { display: none; }
}
/* The design's mobile variant. */
@media (max-width: 639px) {
  .pill span { white-space: normal; }
  .platform-panel { border-radius: 16px; }
  .dots { display: none; }
  .points { grid-template-columns: minmax(0, 1fr); }
  .how-cards { grid-template-columns: minmax(0, 1fr); }

  /* Phones: the walkthrough is an ordinary section that a thumb scrolls past. The steps are tabs
     that fit across the panel (the chosen one with its name, the others by number). The captions
     share one grid cell, so the app window stays put when the step changes; the window itself takes
     the height of the step it shows. */
  .platform { scroll-margin-top: var(--header); }
  .platform-sticky { position: static; min-height: 0; }
  .platform-span { display: none; }
  .tabs { width: 100%; overflow: visible; }
  .tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    height: 44px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  .tab.is-active { flex: none; padding: 0 16px; background: #FFFFFF; box-shadow: none; }
  .tab:not(.is-active) .tab-n { font-size: 12px; opacity: .85; }
  .tab:not(.is-active) .tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tab-progress { display: none; }
  .captions { display: grid; }
  .caption { grid-area: 1 / 1; }
  .captions > .caption[hidden] { display: block !important; visibility: hidden; }
  .app-body { max-height: none; overflow: visible; }
  .app-view { min-height: 0; }
  .view-pad { padding: 18px 16px; }
  /* Connect: entity, system and currency fit the width; the status pill above covers the rest. */
  .conn-table { min-width: 0; }
  .conn-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .conn-row > :nth-child(n+4) { display: none; }
  /* Report: the account and its group figure; a tap traces it to the entities and journals. */
  .matrix { min-width: 0; }
  .matrix-row { grid-template-columns: minmax(0, 1fr) auto; }
  .matrix-row > :not(:first-child):not(:last-child) { display: none; }
  .trace-list { border-right: 0; border-bottom: 1px solid var(--stone-200); }
  .trace-detail { padding: 18px 16px; }
  .trace-top { flex-wrap: wrap; }
  .trace-line { height: auto; min-height: 40px; padding: 6px 0; }
  .trace-ent { flex-wrap: wrap; gap: 2px 8px; }

  /* Auditability card: the total beside the title, the period under both, no inner scrolling. */
  .lin-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
  }
  .lin-top-text { display: contents; }
  .lin-sub { grid-column: 1 / -1; margin-top: 0; white-space: normal; }
  .lin-total { grid-row: 1; grid-column: 2; }
  .lin-toolbar .seg { flex: 1; }
  .lin-toolbar .seg button { flex: 1 1 0; justify-content: center; height: 34px; }
  .lin-hint { display: none; }
  .lin-scroll { height: auto; overflow: visible; }
  .tx { height: auto; min-height: 30px; padding: 6px 0; }
  .tx-payee { white-space: normal; }
  .lin-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
  }
  .lin-foot-text { display: contents; }
  .lin-foot-sub { grid-column: 1 / -1; margin-top: 0; white-space: normal; }
  .lin-foot .status-pill { grid-row: 1; grid-column: 2; }

  /* FAQ: roomier rows, the plus in a round button that turns purple when open, the answer under
     the question's text column. */
  .faq-item summary { padding: 18px 8px; font-size: 16px; }
  .faq-item[open] summary { padding-bottom: 8px; }
  .faq-item summary svg {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background: var(--stone-100);
    color: var(--stone-600);
    transition: transform 180ms, background 180ms, color 180ms;
  }
  .faq-item[open] summary svg { background: var(--purple-50); color: var(--purple-600); }
  .faq-item p { font-size: 15px; padding: 0 48px 22px 0; }

  /* Book a call: the mark above the heading, full width buttons. */
  .book-lead { flex-direction: column; align-items: flex-start; gap: 18px; }
  .book-mark { width: 44px; height: 44px; border-radius: 12px; }
  .book-mark img { width: 26px; height: 26px; }
  .book-actions { width: 100%; align-items: stretch; }
  .book-buttons { flex-direction: column; }
  .book-buttons .btn { width: 100%; height: 48px; }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora { display: none; }
  .aurora-still { display: block; }
  .hero-glow { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}