/* ==========================================================================
   Identiko · Direction E "Horizon"
   Concept: a calm, cinematic, media-led page. One giant rounded frame of
   fluted blue light holds the product; everything around it is white and
   airy, punctuated by royal-blue and grainy near-black panels.
   ========================================================================== */

:root {
  /* surfaces */
  --white: #FFFFFF;
  --canvas: #F5F7FB;
  --canvas-2: #EEF2FF;
  --line: #E6E9F2;
  --line-2: #D7DCE8;
  /* text */
  --ink: #0A0E1F;
  --ink-2: #2A3150;
  --body: #4A5270;
  --muted: #6A718A;
  --tone2: #8A91A8;
  /* brand */
  --royal: #2547E9;
  --royal-700: #1B36C4;
  --royal-900: #0F1F7A;
  --sky: #1A9BF4;
  --sky-deep: #1A8AE6;
  --cyan: #64F4F8;
  --brand-grad: linear-gradient(90deg, #1A9BF4, #64F4F8);
  /* dark */
  --night: #070A17;
  --night-2: #0E1428;
  /* status (ink variants keep text at AA) */
  --ok: #12B76A;
  --ok-ink: #067647;
  --ok-bg: #ECFDF3;
  --warn: #F79009;
  --warn-ink: #B54708;
  --warn-bg: #FFFAEB;
  --bad: #F04438;
  --bad-ink: #B42318;
  --bad-bg: #FEF3F2;
  /* client brand used in the white-label mock (fictional) */
  --mb: #0F5C54;
  --mb-tint: #E6F2EF;
  /* type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* shape */
  --r-pill: 999px;
  --r-ui: 14px;
  --r-card: 24px;
  --r-panel: 32px;
  --shadow-1: 0 1px 2px rgba(10, 14, 31, .06), 0 12px 32px -12px rgba(15, 31, 122, .18);
  --shadow-2: 0 1px 2px rgba(10, 14, 31, .06), 0 24px 60px -20px rgba(15, 31, 122, .32);
  --shadow-float: 0 2px 4px rgba(10, 14, 31, .06), 0 22px 44px -14px rgba(15, 31, 122, .42);
  /* layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --inset: 12px;
  --section-y: clamp(88px, 10vw, 152px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* generated fluted-glass ribs (irregular widths; highlight left edge, shadow right edge) */
  --flutes-fine: linear-gradient(90deg, rgba(255,255,255,0.26) 0px, rgba(255,255,255,0.09) 8px, rgba(255,255,255,0) 21px, rgba(8,20,110,0.10) 36px, rgba(8,20,110,0.19) 45.2px, rgba(255,255,255,0.30) 46px, rgba(255,255,255,0.10) 56px, rgba(255,255,255,0) 71px, rgba(8,20,110,0.09) 89px, rgba(8,20,110,0.18) 101px, rgba(255,255,255,0.28) 102px, rgba(255,255,255,0.10) 105px, rgba(255,255,255,0) 110px, rgba(8,20,110,0.10) 116px, rgba(8,20,110,0.20) 119.1px, rgba(255,255,255,0.37) 120px, rgba(255,255,255,0.13) 128px, rgba(255,255,255,0) 141px, rgba(8,20,110,0.08) 156px, rgba(8,20,110,0.17) 166.3px, rgba(255,255,255,0.34) 167px, rgba(255,255,255,0.12) 172px, rgba(255,255,255,0) 180px, rgba(8,20,110,0.05) 190px, rgba(8,20,110,0.10) 196.1px, rgba(255,255,255,0.33) 197px, rgba(255,255,255,0.11) 200px, rgba(255,255,255,0) 204px, rgba(8,20,110,0.07) 210px, rgba(8,20,110,0.13) 212.9px, rgba(255,255,255,0.30) 213px, rgba(255,255,255,0.10) 219px, rgba(255,255,255,0) 227px, rgba(8,20,110,0.08) 236px, rgba(8,20,110,0.15) 242.1px, rgba(255,255,255,0.25) 243px, rgba(255,255,255,0.09) 250px, rgba(255,255,255,0) 261px, rgba(8,20,110,0.08) 275px, rgba(8,20,110,0.16) 283.6px, rgba(255,255,255,0.23) 284px, rgba(255,255,255,0.08) 289px, rgba(255,255,255,0) 296px, rgba(8,20,110,0.06) 304px, rgba(8,20,110,0.12) 309.4px, rgba(255,255,255,0.25) 310px, rgba(255,255,255,0.09) 314px, rgba(255,255,255,0) 320px, rgba(8,20,110,0.10) 327px, rgba(8,20,110,0.19) 331.9px, rgba(255,255,255,0.21) 332px, rgba(255,255,255,0.07) 337px, rgba(255,255,255,0) 343px, rgba(8,20,110,0.10) 352px, rgba(8,20,110,0.20) 356.6px, rgba(255,255,255,0.25) 357px, rgba(255,255,255,0.09) 364px, rgba(255,255,255,0) 374px, rgba(8,20,110,0.08) 387px, rgba(8,20,110,0.16) 394.6px, rgba(255,255,255,0.18) 395px, rgba(255,255,255,0.06) 404px, rgba(255,255,255,0) 418px, rgba(8,20,110,0.07) 434px, rgba(8,20,110,0.13) 445px, rgba(255,255,255,0.19) 446px, rgba(255,255,255,0.07) 452px, rgba(255,255,255,0) 462px, rgba(8,20,110,0.09) 475px, rgba(8,20,110,0.18) 482.6px, rgba(255,255,255,0.20) 483px, rgba(255,255,255,0.07) 491px, rgba(255,255,255,0) 502px, rgba(8,20,110,0.08) 516px, rgba(8,20,110,0.16) 524.4px, rgba(255,255,255,0.25) 525px, rgba(255,255,255,0.09) 530px, rgba(255,255,255,0) 537px, rgba(8,20,110,0.07) 545px, rgba(8,20,110,0.14) 550.4px, rgba(255,255,255,0.22) 551px, rgba(255,255,255,0.08) 555px, rgba(255,255,255,0) 562px, rgba(8,20,110,0.10) 570px, rgba(8,20,110,0.20) 575.2px, rgba(255,255,255,0.21) 576px, rgba(255,255,255,0.07) 582px, rgba(255,255,255,0) 591px, rgba(8,20,110,0.07) 602px, rgba(8,20,110,0.14) 609.2px, rgba(255,255,255,0.17) 610px, rgba(255,255,255,0.06) 616px, rgba(255,255,255,0) 626px, rgba(8,20,110,0.06) 637px, rgba(8,20,110,0.11) 644.4px, rgba(255,255,255,0.34) 645px, rgba(255,255,255,0.12) 649px, rgba(255,255,255,0) 655px, rgba(8,20,110,0.07) 663px, rgba(8,20,110,0.14) 667.2px, rgba(255,255,255,0.17) 668px, rgba(255,255,255,0.06) 671px, rgba(255,255,255,0) 676px, rgba(8,20,110,0.07) 681px, rgba(8,20,110,0.14) 684.8px, rgba(255,255,255,0.34) 685px, rgba(255,255,255,0.12) 690px, rgba(255,255,255,0) 698px, rgba(8,20,110,0.06) 707px, rgba(8,20,110,0.11) 712.5px, rgba(255,255,255,0.36) 713px, rgba(255,255,255,0.12) 722px, rgba(255,255,255,0) 735px, rgba(8,20,110,0.09) 751px, rgba(8,20,110,0.19) 761px, rgba(255,255,255,0.31) 762px, rgba(255,255,255,0.11) 765px, rgba(255,255,255,0) 771px, rgba(8,20,110,0.07) 778px, rgba(8,20,110,0.14) 782.6px, rgba(255,255,255,0.19) 783px, rgba(255,255,255,0.07) 788px, rgba(255,255,255,0) 795px, rgba(8,20,110,0.05) 804px, rgba(8,20,110,0.10) 809.4px, rgba(255,255,255,0.22) 810px, rgba(255,255,255,0.08) 816px, rgba(255,255,255,0) 824px, rgba(8,20,110,0.09) 835px, rgba(8,20,110,0.19) 841.7px, rgba(255,255,255,0.36) 842px, rgba(255,255,255,0.13) 848px, rgba(255,255,255,0) 855px, rgba(8,20,110,0.10) 865px, rgba(8,20,110,0.21) 871.1px, rgba(255,255,255,0.22) 872px, rgba(255,255,255,0.08) 875px, rgba(255,255,255,0) 880px, rgba(8,20,110,0.10) 886px, rgba(8,20,110,0.20) 889.9px, rgba(255,255,255,0.25) 890px, rgba(255,255,255,0.09) 895px, rgba(255,255,255,0) 901px, rgba(8,20,110,0.06) 908px, rgba(8,20,110,0.12) 913px, rgba(255,255,255,0.18) 914px, rgba(255,255,255,0.06) 917px, rgba(255,255,255,0) 921px, rgba(8,20,110,0.06) 927px, rgba(8,20,110,0.11) 930.1px, rgba(255,255,255,0.29) 931px, rgba(255,255,255,0.10) 935px, rgba(255,255,255,0) 942px, rgba(8,20,110,0.10) 951px, rgba(8,20,110,0.20) 956.2px, rgba(255,255,255,0.37) 957px, rgba(255,255,255,0.13) 963px, rgba(255,255,255,0) 973px, rgba(8,20,110,0.05) 986px, rgba(8,20,110,0.10) 993.4px, rgba(255,255,255,0.23) 994px, rgba(255,255,255,0.08) 1002px, rgba(255,255,255,0) 1013px, rgba(8,20,110,0.10) 1027px, rgba(8,20,110,0.21) 1035.9px, rgba(255,255,255,0.35) 1036px, rgba(255,255,255,0.12) 1040px, rgba(255,255,255,0) 1044px, rgba(8,20,110,0.09) 1050px, rgba(8,20,110,0.18) 1053.6px, rgba(255,255,255,0.24) 1054px, rgba(255,255,255,0.08) 1064px, rgba(255,255,255,0) 1079px, rgba(8,20,110,0.09) 1097px, rgba(8,20,110,0.17) 1109px, rgba(255,255,255,0.36) 1109px, rgba(255,255,255,0.13) 1122px, rgba(255,255,255,0) 1141px, rgba(8,20,110,0.05) 1164px, rgba(8,20,110,0.10) 1179.5px);
  --flutes-wide: linear-gradient(90deg, rgba(255,255,255,0.23) 0px, rgba(255,255,255,0.08) 24px, rgba(255,255,255,0) 59px, rgba(8,20,110,0.06) 102px, rgba(8,20,110,0.11) 130.6px, rgba(255,255,255,0.13) 131px, rgba(255,255,255,0.04) 150px, rgba(255,255,255,0) 179px, rgba(8,20,110,0.05) 214px, rgba(8,20,110,0.09) 237px, rgba(255,255,255,0.11) 238px, rgba(255,255,255,0.04) 257px, rgba(255,255,255,0) 285px, rgba(8,20,110,0.04) 320px, rgba(8,20,110,0.08) 343.3px, rgba(255,255,255,0.13) 344px, rgba(255,255,255,0.05) 389px, rgba(255,255,255,0) 456px, rgba(8,20,110,0.06) 538px, rgba(8,20,110,0.12) 592.1px, rgba(255,255,255,0.13) 593px, rgba(255,255,255,0.04) 610px, rgba(255,255,255,0) 637px, rgba(8,20,110,0.06) 670px, rgba(8,20,110,0.13) 691.3px, rgba(255,255,255,0.23) 692px, rgba(255,255,255,0.08) 708px, rgba(255,255,255,0) 732px, rgba(8,20,110,0.04) 762px, rgba(8,20,110,0.08) 781.6px, rgba(255,255,255,0.14) 782px, rgba(255,255,255,0.05) 810px, rgba(255,255,255,0) 851px, rgba(8,20,110,0.06) 902px, rgba(8,20,110,0.13) 935.1px, rgba(255,255,255,0.15) 936px, rgba(255,255,255,0.05) 982px, rgba(255,255,255,0) 1050px, rgba(8,20,110,0.04) 1135px, rgba(8,20,110,0.09) 1190.4px, rgba(255,255,255,0.16) 1191px, rgba(255,255,255,0.05) 1209px, rgba(255,255,255,0) 1236px, rgba(8,20,110,0.06) 1270px, rgba(8,20,110,0.12) 1291.4px, rgba(255,255,255,0.12) 1292px, rgba(255,255,255,0.04) 1311px, rgba(255,255,255,0) 1341px, rgba(8,20,110,0.04) 1376px, rgba(8,20,110,0.08) 1399.5px);
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .7 0 0 0 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23B9C0D2' stroke-width='1'/%3E%3C/svg%3E");
  --plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- fonts (self-hosted) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 560;
  letter-spacing: -.03em;
  line-height: 1.12;
  text-wrap: balance;
}
button, input, select { font: inherit; color: inherit; }
strong { font-weight: 650; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i--xs { width: 14px; height: 14px; stroke-width: 1.8; }
.i--sm { width: 16px; height: 16px; stroke-width: 1.6; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 6px; }
.panel :focus-visible, .cta :focus-visible, .code :focus-visible { outline-color: #fff; }
.cta .form-card :focus-visible { outline-color: var(--royal); }

.container {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.section { padding-block: var(--section-y); position: relative; }

/* ---------- type helpers ---------- */
.h2 {
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 560;
  margin-top: 20px;
}
.h2--card { font-size: clamp(30px, 3.1vw, 44px); letter-spacing: -.04em; }
.h2--xl { font-size: clamp(40px, 5.6vw, 80px); margin-top: 0; }
.tone { color: var(--tone2); }
.h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.h3--lg { font-size: clamp(24px, 2.3vw, 30px); font-weight: 560; letter-spacing: -.035em; }
.lede { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--body); max-width: 56ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 3px rgba(37, 71, 233, .16); }
.eyebrow--on-dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.eyebrow--on-dark .eyebrow__dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .2); }

.mono-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono-label--on-dark { color: rgba(255, 255, 255, .6); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn__chip {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--royal);
  transition: transform .25s var(--ease);
}
.btn__chip .i { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover .btn__chip { transform: translateX(2px); }
.btn--primary {
  padding-right: 6px;
  background: var(--royal);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(10, 14, 31, .12), 0 10px 24px -10px rgba(37, 71, 233, .75);
}
.btn--primary:hover { background: var(--royal-700); }
.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: 0 1px 2px rgba(10, 14, 31, .05); }
.btn--secondary:hover { border-color: #B9C0D2; }
.btn--light { padding-right: 6px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px -12px rgba(7, 10, 23, .5); }
.btn--light .btn__chip { background: var(--royal); color: #fff; }
.btn--lg { min-height: 56px; padding-left: 28px; font-size: 16px; }
.btn--lg.btn--secondary { padding-inline: 28px; }
.btn--lg.btn--primary, .btn--lg.btn--light { padding-right: 7px; }
.btn--lg .btn__chip { width: 42px; height: 42px; }
.btn--sm { min-height: 44px; padding-left: 18px; font-size: 14.5px; }
.btn--sm.btn--primary { padding-right: 5px; }
.btn--sm .btn__chip { width: 34px; height: 34px; }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(37, 71, 233, .35);
  color: var(--royal);
  font-weight: 600;
  text-decoration: none;
  transition: gap .25s var(--ease), border-color .2s;
}
.text-link:hover { gap: 12px; border-color: var(--royal); }

/* ---------- shared bits ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ok { background: var(--ok-bg); color: var(--ok-ink); }
.status--ok::before { background: var(--ok); }
.status--rec { background: var(--canvas-2); color: var(--royal-700); }
.status--rec::before { background: var(--bad); }
.status--bad { background: var(--bad-bg); color: var(--bad-ink); }
.status--bad::before { background: var(--bad); }
.status--ok-dark { background: rgba(18, 183, 106, .14); color: #75E0A7; border: 1px solid rgba(18, 183, 106, .28); }
.status--royal-dark { background: rgba(37, 71, 233, .28); color: #C9D5FF; border: 1px solid rgba(100, 140, 255, .35); }
.status--royal-dark::before { background: var(--cyan); }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.dot--royal { background: var(--royal); }
.rec-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px rgba(240, 68, 56, .18); animation: rec 1.8s ease-in-out infinite; }
@keyframes rec { 50% { box-shadow: 0 0 0 5px rgba(240, 68, 56, .05); } }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--royal));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 38px; height: 38px; font-size: 13px; }
.avatar--dark { width: 38px; height: 38px; background: linear-gradient(135deg, #3355F2, #0F1F7A); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.avatar--royal { background: var(--royal); }

.chip-icon { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; }
.chip-icon--ok { background: var(--ok-bg); color: var(--ok-ink); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.tag--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); }

.ticks { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.ticks .i { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); stroke-width: 2.2; }
.ticks--on-dark li { color: rgba(255, 255, 255, .86); }
.ticks--on-dark .i { background: rgba(100, 244, 248, .12); color: var(--cyan); }

/* section heads */
.section-head { margin-bottom: clamp(48px, 6vw, 80px); }
.section-head--center { display: flex; flex-direction: column; align-items: center; max-width: 860px; margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-top: 20px; }
.section-head--wide .h2 { max-width: 15em; }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px 72px; align-items: end; }
.section-head--split .lede { padding-bottom: 6px; }
.section-head--on-dark .h2 .ink { color: #fff; }
.section-head--on-dark .h2 .tone { color: rgba(255, 255, 255, .62); }
.section-head--on-dark .lede { color: rgba(255, 255, 255, .88); }

/* container guide lines + crosses, where section borders meet them */
.guides { border-top: 1px solid var(--line); }
@media (min-width: 1300px) {
  .guides {
    background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
    background-size: 1px 100%, 1px 100%;
    background-position: calc(50% - 601px) 0, calc(50% + 600px) 0;
    background-repeat: no-repeat;
  }
  .guides::before, .guides::after {
    content: "";
    position: absolute;
    top: -6px;
    width: 11px; height: 11px;
    background: #fff var(--plus) center / 11px no-repeat;
  }
  .guides::before { left: calc(50% - 606px); }
  .guides::after { left: calc(50% + 595px); }
}

/* ==========================================================================
   1. HEADER: floating pill
   ========================================================================== */
.site-header {
  position: fixed;
  top: 22px; left: 0; right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 28px;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(1080px, 100%);
  height: 62px;
  padding: 0 8px 0 22px;
  border: 1px solid rgba(10, 14, 31, .07);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 10px 30px -14px rgba(15, 31, 122, .22);
  transition: box-shadow .35s var(--ease), background-color .35s;
}
.site-header.is-scrolled .nav-pill {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .06), 0 18px 44px -18px rgba(15, 31, 122, .38);
}
.brand { display: inline-flex; flex: none; padding: 6px 4px; border-radius: 8px; }
.brand img { width: auto; height: 26px; }
.primary-nav { margin-inline: auto; }
.primary-nav__list { display: flex; gap: 2px; list-style: none; }
.primary-nav a, .nav-signin {
  display: block;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.primary-nav a:hover, .nav-signin:hover { background: var(--canvas); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.menu-toggle {
  display: none;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before {
  display: block;
  width: 16px; height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.menu-toggle__bars { position: relative; transform: translateY(-3px); }
.menu-toggle__bars::before { content: ""; position: absolute; top: 6px; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(-6px) rotate(-90deg); }

.mobile-menu {
  pointer-events: auto;
  width: min(1080px, 100%);
  margin-top: 8px;
  padding: 8px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-2);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { list-style: none; }
.mobile-menu__list a {
  display: block;
  padding: 16px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -.03em;
  text-decoration: none;
}
.mobile-menu__actions { display: grid; gap: 10px; padding-top: 18px; }
.mobile-menu__actions .btn { width: 100%; }
.mobile-menu__signin { justify-self: center; padding: 10px 16px; font-weight: 600; color: var(--ink-2); text-decoration: none; }

/* ==========================================================================
   2. HERO: the giant frame of fluted light
   ========================================================================== */
.hero { padding: var(--inset); }
.hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: max(94vh, 760px);
  overflow: hidden;
  border-radius: var(--r-panel);
  background: #fff;
}

/* --- fluted glass (reused by the final CTA) --- */
.glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 16%, #F4F7FF 30%, #DDE8FF 44%, #A9CAFB 56%, #6BA3F5 67%, #3A6FEE 79%, #2547E9 90%, #1B36C4 100%);
}
.glass > span { position: absolute; inset: 0; }
.glass__glow {
  background:
    radial-gradient(38% 26% at 50% 60%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
    radial-gradient(26% 38% at 50% 104%, rgba(100, 244, 248, .7), rgba(100, 244, 248, 0) 72%),
    radial-gradient(22% 40% at 30% 90%, rgba(26, 155, 244, .6), rgba(26, 155, 244, 0) 72%),
    radial-gradient(22% 40% at 70% 92%, rgba(26, 155, 244, .55), rgba(26, 155, 244, 0) 72%),
    radial-gradient(44% 60% at -4% 104%, rgba(15, 31, 122, .8), rgba(15, 31, 122, 0) 70%),
    radial-gradient(44% 60% at 104% 104%, rgba(15, 31, 122, .8), rgba(15, 31, 122, 0) 70%);
}
.glass__beams {
  inset: 0 -30%;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, .55) 18%, rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0) 31%, rgba(210, 250, 255, .5) 34%, rgba(255, 255, 255, 0) 37%,
    rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .85) 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .85) 51%, rgba(255, 255, 255, 0) 56%,
    rgba(255, 255, 255, 0) 66%, rgba(210, 250, 255, .55) 70%, rgba(255, 255, 255, 0) 73%,
    rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .45) 84%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
  background-size: 130% 100%;
  background-position: 0% 0;
  filter: blur(18px);
  opacity: .75;
  -webkit-mask-image: linear-gradient(180deg, transparent 22%, #000 62%);
  mask-image: linear-gradient(180deg, transparent 22%, #000 62%);
  animation: drift 26s ease-in-out infinite alternate;
  will-change: background-position;
}
@keyframes drift { to { background-position: 100% 0; } }
.glass__flutes {
  inset: 0;
  background-image: var(--flutes-fine), var(--flutes-wide);
  background-size: 1180px 100%, 1400px 100%;
  background-position: 50% 0, 30% 0;
  background-repeat: repeat-x;
  filter: blur(.7px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .12) 32%, rgba(0, 0, 0, .7) 60%, #000 80%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .12) 32%, rgba(0, 0, 0, .7) 60%, #000 80%);
}
/* soft daylight halo that keeps the headline block light (AA) */
.media-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 46% at 50% 38%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, 0) 100%);
}
.glass__grain {
  background-image: var(--grain-light);
  background-size: 200px;
  opacity: .16;
  mix-blend-mode: overlay;
}
.media-slot__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- hero copy --- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1000px, 100%);
  padding: 128px var(--gutter) 0;
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 12px;
  border: 1px solid rgba(10, 14, 31, .08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 6px 18px -10px rgba(15, 31, 122, .25);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--royal);
  box-shadow: 0 0 0 3px rgba(37, 71, 233, .16);
}
.hero__title {
  margin-top: 24px;
  font-size: clamp(44px, 6.4vw, 94px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.05em;
}
.hero__line { display: block; }
.hero__grad {
  padding-bottom: .08em;
  margin-bottom: -.08em;
  color: var(--royal);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__grad {
    background-image: linear-gradient(95deg, #2547E9 12%, #2A5BEE 40%, #1A8AE6 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.hero__sub {
  max-width: 700px;
  margin-top: 26px;
  color: var(--body);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin-top: 22px;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.hero__reassure li { display: flex; align-items: center; }
.hero__reassure li + li::before {
  content: "";
  width: 4px; height: 4px;
  margin: 0 14px;
  border-radius: 50%;
  background: var(--tone2);
}
.hero__reassure--on-dark { justify-content: flex-start; color: rgba(255, 255, 255, .82); }
.hero__reassure--on-dark li + li::before { background: rgba(255, 255, 255, .4); }

/* --- product rising from the bottom of the frame --- */
.hero__product {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 54px 0 0;
}
.hero__stage {
  position: relative;
  width: min(980px, calc(100% - 320px));
  margin-inline: auto;
}
.console {
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 24px;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(10, 14, 31, .05), 0 40px 90px -30px rgba(15, 31, 122, .6);
}
.console__win {
  overflow: hidden;
  border-radius: 17px;
  background: #fff;
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}
.console__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 50px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.console__ws { display: flex; align-items: center; gap: 8px; width: 176px; color: var(--ink); font-weight: 600; }
.ws-logo {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--mb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.console__ws .i { color: var(--muted); }
.console__crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.console__crumbs .mono { color: var(--ink); font-size: 12.5px; }
.console__sep { color: var(--line-2); }
.console__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  margin-left: auto;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 12.5px;
}
.console__search kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
}
.console__me { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.console__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.console__side { padding: 16px 10px; border-right: 1px solid var(--line); background: #FBFCFE; }
.console__side-label {
  margin: 14px 8px 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.console__side-label:first-child { margin-top: 0; }
.side-nav { list-style: none; display: grid; gap: 1px; }
.side-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
}
.side-nav .i { color: #8A91A8; }
.side-nav .is-active { background: var(--canvas-2); color: var(--royal-700); font-weight: 600; }
.side-nav .is-active .i { color: var(--royal); }
.console__main { min-width: 0; padding: 20px 22px 24px; }
.session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.session-head__label { color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.session-head__title { margin-top: 2px; color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.session-head__meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12.5px; }
.decision {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 1px solid #C6F1D9;
  border-radius: 14px;
  background: linear-gradient(180deg, #F3FDF7, #FFFFFF);
}
.decision__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .14);
}
.decision__icon .i { width: 18px; height: 18px; stroke-width: 2.4; }
.decision__text { display: flex; flex-direction: column; }
.decision__title { color: var(--ink); font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.decision__meta { color: var(--muted); font-size: 12px; }
.session-grid { display: grid; grid-template-columns: minmax(0, 1fr) 214px; gap: 16px; margin-top: 18px; }
.checks-table { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.checks-table__head, .check-row {
  display: grid;
  grid-template-columns: 26px 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}
.checks-table__head {
  grid-template-columns: 148px minmax(0, 1fr) auto;
  height: 34px;
  background: #FAFBFD;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.check-row { height: 46px; border-top: 1px solid var(--line); }
.check-row__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--canvas-2);
  color: var(--royal);
}
.check-row__name { color: var(--ink); font-size: 13px; font-weight: 600; }
.check-row__result { overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.applicant { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.applicant__label { color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.applicant__who { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.applicant__name { display: block; color: var(--ink); font-size: 14px; font-weight: 650; }
.applicant__doc { display: block; color: var(--muted); font-size: 12px; }
.doc-mini { margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(160deg, #F7F9FE, #EEF2FF); }
.doc-mini__top { display: flex; gap: 10px; }
.doc-mini__photo { display: grid; place-items: center; width: 46px; height: 56px; border-radius: 6px; background: #DFE7FB; color: var(--royal); }
.doc-mini__photo svg { width: 40px; height: 40px; }
.doc-mini__lines { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 7px; }
.doc-mini__lines span { height: 5px; border-radius: 3px; background: #D5DCEC; }
.doc-mini__lines span:nth-child(1) { width: 70%; background: #B9C3DD; }
.doc-mini__lines span:nth-child(3) { width: 82%; }
.doc-mini__lines span:nth-child(4) { width: 50%; }
.doc-mini__mrz { margin-top: 8px; overflow: hidden; color: #6A718A; font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; white-space: nowrap; }
.applicant__rows { display: grid; gap: 6px; margin-top: 12px; }
.applicant__rows p { display: flex; justify-content: space-between; font-size: 12px; }
.applicant__rows span:first-child { color: var(--muted); }
.applicant__rows span:last-child { color: var(--ink); font-weight: 600; }

/* floating cards */
.float {
  position: absolute;
  z-index: 3;
  animation: bob 8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.float--face {
  left: -150px; top: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-float);
  animation-duration: 7s;
}
.facecard__ring { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--canvas-2); }
.facecard__ring svg { width: 50px; height: 50px; }
.facecard__mesh { color: var(--royal); }
.facecard__text { display: flex; flex-direction: column; text-align: left; }
.facecard__label { color: var(--muted); font-size: 12px; font-weight: 500; }
.facecard__value { color: var(--ink); font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.facecard__meta { color: var(--muted); font-size: 11.5px; }
.float--aml, .float--video {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.float--aml { left: 150px; top: -24px; animation-duration: 6.5s; animation-delay: -2s; }
.float--video { right: 96px; top: -24px; padding-left: 14px; animation-duration: 7.5s; animation-delay: -4s; }
.float--video .mono { color: var(--muted); font-weight: 500; }
.float__sep { color: var(--line-2); }
.float--phone { right: -168px; top: 40px; animation-duration: 9s; animation-delay: -1s; }

/* phone (hero + white label) */
.phone {
  width: 236px;
  padding: 7px;
  border-radius: 42px;
  background: linear-gradient(160deg, #2A3150, #0A0E1F 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -20px rgba(15, 31, 122, .55), 0 2px 6px rgba(10, 14, 31, .2);
}
.phone__screen {
  display: flex;
  flex-direction: column;
  height: 486px;
  padding: 12px 14px 16px;
  overflow: hidden;
  border-radius: 35px;
  background: #fff;
  text-align: left;
}
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: var(--ink); font-size: 11px; font-weight: 700; }
.phone__island { width: 74px; height: 22px; border-radius: 12px; background: var(--ink); }
.phone__bat { width: 20px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; background: linear-gradient(90deg, var(--ink) 70%, transparent 70%); background-clip: content-box; padding: 1px; }
.mb-bar { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 0 2px; }
.mb-logo {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--mb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.mb-logo--sm { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.mb-name { color: var(--ink); font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.mb-step { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--mb-tint); color: var(--mb); font-family: var(--mono); font-size: 10.5px; }
.phone__cam {
  position: relative;
  display: grid;
  place-items: center;
  height: 226px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(90% 70% at 50% 35%, #27416E, #0B1631 72%);
}
.phone__cam-svg { width: 150px; height: 160px; }
.phone__mesh { color: var(--cyan); }
.phone__scan { stroke-dasharray: 70 260; animation: scan 3.2s linear infinite; }
@keyframes scan { to { stroke-dashoffset: -330; } }
.phone__cam-tag {
  position: absolute;
  left: 10px; top: 10px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.phone__title { margin-top: 16px; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; text-align: center; }
.phone__title--lg { margin-top: 14px; font-size: 18px; text-align: left; letter-spacing: -.025em; }
.phone__text { margin-top: 6px; color: var(--body); font-size: 12.5px; line-height: 1.45; }
.phone__rec { margin-top: auto; color: var(--muted); font-size: 10.5px; line-height: 1.45; text-align: center; }
.phone__rec .rec-dot { width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; box-shadow: none; }
.phone__rec--light { margin-top: 10px; }

/* ==========================================================================
   3. SECTOR STRIP
   ========================================================================== */
.sectors { padding: clamp(56px, 6vw, 84px) 0 clamp(72px, 8vw, 112px); text-align: center; }
.sectors__label { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.marquee {
  margin-top: 30px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee__inner { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__inner { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__list { display: flex; gap: 60px; padding-right: 60px; list-style: none; }
.marquee__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 560;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.marquee__list .i { width: 28px; height: 28px; color: var(--royal); stroke-width: 1.35; }
.discretion {
  max-width: 820px;
  margin: 44px auto 0;
  color: var(--tone2);
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.discretion .ink { color: var(--ink); }

/* ==========================================================================
   4. PLATFORM: statement + numbered pillars
   ========================================================================== */
.platform { padding-top: clamp(72px, 8vw, 120px); }
.statement-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  padding-bottom: clamp(72px, 8vw, 116px);
}
.statement-row .mono-label { padding-top: 12px; }
.statement {
  max-width: 24em;
  color: var(--tone2);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.statement__ink { color: var(--ink); }
.statement .w { transition: color .5s var(--ease); }
.statement .w.is-lit { color: var(--ink); }

.pillars { list-style: none; border-top: 1px solid var(--line); }
.pillar {
  display: grid;
  grid-template-columns: 72px minmax(0, 4fr) minmax(0, 6fr) 48px;
  align-items: center;
  column-gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.pillar__num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
}
.pillar__title { font-size: clamp(26px, 2.5vw, 34px); font-weight: 560; letter-spacing: -.04em; }
.pillar__text { max-width: 52ch; color: var(--body); }
.pillar__arrow {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}
.pillar:has(+ .pillar--open) { border-bottom-color: transparent; }
.pillar--open {
  margin: 14px calc(-1 * min(32px, var(--gutter) - 8px));
  padding: 32px;
  border-bottom-color: transparent;
  border-radius: 28px;
  background: linear-gradient(180deg, var(--canvas), #EFF3FE);
}
.pillar--open .pillar__num { border-color: var(--ink); background: var(--ink); color: #fff; }
.pillar--open .pillar__arrow { border-color: var(--royal); background: var(--royal); color: #fff; }
.pillar__detail {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: 32px;
  margin-top: 28px;
}
.pillar__art .iso { width: 100%; max-width: 380px; height: auto; margin-left: -24px; }
.rule-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-1); }
.rule-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.rule-card__title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13.5px; font-weight: 650; }
.rule-card__title .i { color: var(--royal); }
.rule-card__ver { color: var(--muted); font-size: 11.5px; }
.rule { display: grid; gap: 8px; padding: 14px 16px 16px; list-style: none; }
.rule li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13.5px;
}
.rule__kw { width: 42px; color: var(--royal-700); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rule__field { color: var(--ink); font-weight: 650; }
.rule__op { color: var(--muted); }
.rule__out { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-weight: 650; }
.rule__out--ok { background: var(--ok-bg); color: var(--ok-ink); }
.rule__out--warn { background: var(--warn-bg); color: var(--warn-ink); }
.rule__note { margin-left: auto; color: var(--muted); font-size: 12px; }
.rule__then, .rule__else { background: #fff !important; border: 1px dashed var(--line-2); }

/* ==========================================================================
   Panels (royal + dark)
   ========================================================================== */
.panel {
  position: relative;
  isolation: isolate;
  margin-inline: var(--inset);
  padding-block: clamp(88px, 10vw, 144px);
  overflow: hidden;
  overflow: clip;
  border-radius: var(--r-panel);
}
.panel__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.panel__fx > span { position: absolute; inset: 0; }
.panel--royal { background: linear-gradient(165deg, #3052F0 0%, #2547E9 38%, #1E3CD2 70%, #1B36C4 100%); color: rgba(255, 255, 255, .88); }
.panel--royal .panel__flutes {
  top: 38%;
  background-image: var(--flutes-fine), var(--flutes-wide);
  background-size: 1180px 100%, 1400px 100%;
  background-repeat: repeat-x;
  opacity: .55;
  filter: blur(.6px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.panel--royal .panel__glow {
  background:
    radial-gradient(40% 36% at 92% 0%, rgba(100, 244, 248, .38), rgba(100, 244, 248, 0) 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(120, 170, 255, .55), rgba(120, 170, 255, 0) 72%),
    radial-gradient(40% 50% at 0% 30%, rgba(15, 31, 122, .5), rgba(15, 31, 122, 0) 70%);
}
.panel__plus {
  background-image: var(--plus-white);
  background-size: 72px 72px;
  background-position: center 0;
  opacity: .22;
  -webkit-mask-image: radial-gradient(34% 30% at 12% 6%, #000, transparent 72%), radial-gradient(30% 28% at 88% 10%, #000, transparent 72%);
  mask-image: radial-gradient(34% 30% at 12% 6%, #000, transparent 72%), radial-gradient(30% 28% at 88% 10%, #000, transparent 72%);
}
.panel--dark { background: var(--night); color: rgba(255, 255, 255, .72); }
.panel--dark .panel__glow {
  background:
    radial-gradient(46% 34% at 100% 0%, rgba(37, 71, 233, .55), rgba(37, 71, 233, 0) 72%),
    radial-gradient(30% 24% at 96% 4%, rgba(100, 244, 248, .16), rgba(100, 244, 248, 0) 70%),
    radial-gradient(40% 30% at 0% 100%, rgba(37, 71, 233, .22), rgba(37, 71, 233, 0) 72%);
}
.panel__grain { background-image: var(--grain-dark); background-size: 200px; opacity: .55; }

/* ==========================================================================
   6. WORKFLOWS: builder canvas
   ========================================================================== */
.builder { margin: 0 0 clamp(56px, 6vw, 80px); }
.builder__ui {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  color: var(--body);
  font-size: 13px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(7, 10, 23, .7);
}
.builder__bar { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.builder__name { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 650; }
.builder__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--canvas-2); color: var(--royal); }
.tag--draft { color: var(--royal-700); background: var(--canvas-2); border-color: #D9E1FD; }
.builder__zoom { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: 12px; }
.builder__cost { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border: 1px solid #D9E1FD; border-radius: var(--r-pill); background: var(--canvas-2); color: var(--royal-900); font-size: 13px; font-weight: 500; }
.builder__cost-value { padding: 4px 11px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 14, 31, .08); }
.builder__publish { padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13px; font-weight: 650; }
.builder__canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 170px;
  align-items: center;
  padding: 64px 40px;
  background-color: #FAFBFE;
  background-image: radial-gradient(#D5DBE8 1px, transparent 1.3px);
  background-size: 20px 20px;
}
.flow { display: flex; align-items: center; gap: 24px; list-style: none; }
.node {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 8px 20px -10px rgba(15, 31, 122, .22);
}
.node + .node::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 24px;
  height: 1.5px;
  background: #9AA1B5;
}
.node + .node::after {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  right: calc(100% + 1px);
  border-left: 6px solid #9AA1B5;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.node__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--canvas-2); color: var(--royal); }
.node__name { color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.25; }
.node__cost { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.node--selected { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14), 0 8px 20px -10px rgba(15, 31, 122, .3); }
.node--decision { background: var(--ink); border-color: var(--ink); }
.node--decision .node__icon { background: rgba(255, 255, 255, .1); color: var(--cyan); }
.node--decision .node__name { color: #fff; }
.node--decision .node__cost { color: rgba(255, 255, 255, .65); }
.fork { width: 100%; height: 176px; overflow: visible; }
.fork--v { display: none; }
.outcomes { display: grid; gap: 10px; list-style: none; }
.outcome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05);
}
.outcome__dot { width: 10px; height: 10px; border-radius: 50%; }
.outcome--ok .outcome__dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(18, 183, 106, .15); }
.outcome--warn .outcome__dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(247, 144, 9, .15); }
.outcome--bad .outcome__dot { background: var(--bad); box-shadow: 0 0 0 4px rgba(240, 68, 56, .14); }

.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.points li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 28px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.points li:first-child { padding-left: 0; border-left: 0; }
.points .i { width: 28px; height: 28px; color: var(--cyan); stroke-width: 1.4; }

/* ==========================================================================
   5. CHECKS: bento
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F5FF 100%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bento__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.bento__card > p { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }
.bento__card--core { grid-column: span 6; grid-row: span 2; padding: 0; background: linear-gradient(180deg, #F6F8FF 0%, #EAF0FF 100%); }
.bento__card--aml, .bento__card--video, .bento__card--ip, .bento__card--email { grid-column: span 3; }
.bento__card--age, .bento__card--poa { grid-column: span 4; }
.frag { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 136px; margin-bottom: 22px; }

.core-visual {
  position: relative;
  flex: 1;
  min-height: 380px;
  overflow: hidden;
  background:
    radial-gradient(46% 50% at 60% 50%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 50% at 88% 100%, rgba(26, 155, 244, .18), rgba(26, 155, 244, 0) 70%);
}
.core-visual__id {
  position: absolute;
  left: 11%; top: 26%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 262px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #FFFFFF, #F4F7FF);
  box-shadow: var(--shadow-2);
  transform: rotate(-7deg);
}
.core-visual__id-head { display: flex; align-items: center; justify-content: space-between; color: var(--royal-900); font-size: 10.5px; letter-spacing: .06em; }
.core-visual__id-flag { width: 26px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--royal), var(--sky)); }
.core-visual__id-body { display: flex; gap: 12px; }
.core-visual__id-photo { display: grid; place-items: center; width: 64px; height: 78px; border-radius: 8px; background: #DFE7FB; color: var(--royal); }
.core-visual__id-photo svg { width: 56px; height: 56px; }
.core-visual__id-lines { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 9px; }
.core-visual__id-lines span { height: 6px; border-radius: 3px; background: #D5DCEC; }
.core-visual__id-lines span:nth-child(1) { width: 60%; background: #AEB9D6; }
.core-visual__id-lines span:nth-child(2) { width: 88%; }
.core-visual__id-lines span:nth-child(4) { width: 44%; }
.core-visual__id-mrz { overflow: hidden; color: #6A718A; font-size: 9px; letter-spacing: .05em; white-space: nowrap; }
.core-visual__scan {
  position: absolute;
  right: 9%; top: 12%;
  width: 250px; height: 250px;
  padding: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px -30px rgba(15, 31, 122, .45), inset 0 0 0 1px rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.core-visual__mesh { color: var(--royal); }
.core-visual__half { stroke-dasharray: 113; animation: half 4s var(--ease) infinite; }
@keyframes half { 0% { stroke-dashoffset: 113; } 40%, 100% { stroke-dashoffset: 0; } }
.core-visual__chip {
  position: absolute;
  right: 7%; top: 64%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 7px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-float);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.core-visual__chip strong { font-weight: 600; }
.core-visual__steps {
  position: absolute;
  left: 24px; top: 24px;
  display: flex;
  gap: 6px;
  list-style: none;
}
.core-visual__steps li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.core-visual__steps .i { color: var(--ok); stroke-width: 2.4; }
.core-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .75);
}
.core-item { padding: 22px 22px 24px; }
.core-item + .core-item { border-left: 1px solid var(--line); }
.core-item .h3 { display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.core-item .h3 .i { width: 24px; height: 24px; color: var(--royal); }
.core-item p { margin-top: 8px; color: var(--body); font-size: 14.5px; line-height: 1.55; }

.frag--aml p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.frag--aml p > span:first-child { display: flex; align-items: center; gap: 8px; }
.frag--aml .i { color: var(--muted); }
.frag--video { flex-direction: row; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; height: 84px; margin-block: 26px 48px; }
.frag-video__rec { display: flex; align-items: center; gap: 6px; color: var(--bad-ink); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.wave { flex: 1; height: 44px; fill: #D0D6E4; }
.wave .wave__on { fill: var(--royal); }
.frag-video__time { color: var(--ink); font-size: 12px; }
.frag--ip { flex-direction: row; align-items: center; justify-content: space-between; }
.frag-ip__globe { width: 112px; height: 112px; }
.frag--email { align-items: flex-start; }
.otp { display: flex; gap: 6px; }
.otp span {
  display: grid;
  place-items: center;
  width: 36px; height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
}
.otp .otp__caret { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(37, 71, 233, .15); }
.otp__caret::after { content: ""; width: 1.5px; height: 20px; background: var(--royal); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.frag-email__hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.frag--age { flex-direction: row; align-items: center; justify-content: space-between; }
.dial { width: 150px; height: auto; }
.frag--poa { flex-direction: row; align-items: center; justify-content: space-between; }
.poa-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 104px; height: 124px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-1);
  transform: rotate(-4deg);
}
.poa-doc__head { width: 40%; height: 10px; margin-bottom: 6px; border-radius: 3px; background: var(--royal); opacity: .85; }
.poa-doc__line { height: 5px; border-radius: 3px; background: #D5DCEC; }
.poa-doc__line--s { width: 60%; }
.poa-doc__line--m { width: 78%; }
.poa-doc__tick {
  position: absolute;
  right: -12px; bottom: -10px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
}
.poa-doc__tick .i { stroke-width: 2.6; }
.bento__note {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 24px;
  border-radius: var(--r-card);
  background: radial-gradient(70% 60% at 100% 0%, rgba(37, 71, 233, .45), rgba(37, 71, 233, 0) 70%), var(--ink);
  color: rgba(255, 255, 255, .75);
  font-size: 17px;
  line-height: 1.5;
}
.bento__note strong { display: block; margin-bottom: 4px; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.bento__note-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 15px; background: rgba(255, 255, 255, .06); color: var(--cyan); }
.bento__note-icon .i { width: 24px; height: 24px; }

/* ==========================================================================
   7. EVIDENCE (dark)
   ========================================================================== */
.evidence__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px; }
.evidence .h2 .ink { color: #fff; }
.evidence .h2 .tone { color: rgba(255, 255, 255, .55); }
.evidence .lede { margin-top: 22px; color: rgba(255, 255, 255, .74); }
.casefile { margin: 0; }
.casefile__ui {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: linear-gradient(180deg, #10172E, #0B1022);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .03), 0 50px 90px -40px rgba(0, 0, 0, .9);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
}
.casefile__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.casefile__who { display: flex; align-items: center; gap: 12px; }
.casefile__kicker { display: block; color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.casefile__name { display: block; color: #fff; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.casefile__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.fields { padding: 16px 18px 18px; }
.casefile__label { margin-bottom: 8px; color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.field {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.field__k { color: rgba(255, 255, 255, .55); font-size: 12px; }
.field__v { color: #fff; font-size: 13px; font-weight: 500; }
.field--disputed { margin: 6px -10px 0; padding: 10px; border: 1px solid rgba(247, 144, 9, .3); border-radius: 12px; background: rgba(247, 144, 9, .08); }
.field__why { grid-column: 2 / -1; color: #FEC84B; font-size: 12px; }
.prov { padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.prov--ok { background: rgba(18, 183, 106, .14); color: #75E0A7; }
.prov--doc { background: rgba(37, 71, 233, .28); color: #C3D0FF; }
.prov--warn { background: rgba(247, 144, 9, .16); color: #FEC84B; }
.timeline { padding: 16px 18px 18px; border-left: 1px solid rgba(255, 255, 255, .08); }
.timeline ol { position: relative; display: grid; gap: 14px; list-style: none; }
.timeline ol::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, .14); }
.timeline li { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-left: 20px; color: rgba(255, 255, 255, .78); font-size: 12.5px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; background: #0D132A; }
.timeline .mono { color: rgba(255, 255, 255, .55); font-size: 11.5px; }
.timeline .is-review::before { border-color: var(--warn); }
.timeline .is-done { color: #fff; font-weight: 600; }
.timeline .is-done::before { border-color: var(--ok); background: var(--ok); }
.casefile__note { display: flex; gap: 12px; padding: 14px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.5; }

.runs {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  margin-top: clamp(88px, 10vw, 140px);
  padding-top: clamp(56px, 6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.runs__aside { position: sticky; top: 120px; align-self: start; }
.runs__title { margin-top: 14px; color: #fff; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.04em; line-height: 1.06; }
.runs__nav { display: grid; gap: 4px; margin-top: 32px; list-style: none; }
.runs__nav li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(255, 255, 255, .55);
  font-size: 15.5px;
  font-weight: 500;
  transition: background-color .35s, color .35s, border-color .35s;
}
.runs__nav .mono { font-size: 12px; }
.runs__nav .is-active { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: #fff; }
.runs__nav .is-active .mono { color: var(--cyan); }
.runs__steps { display: grid; gap: 16px; list-style: none; }
.step {
  padding: 30px 30px 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  transition: border-color .4s, background-color .4s;
}
.step.is-active { border-color: rgba(100, 244, 248, .32); }
.step__num { color: var(--cyan); font-size: 12px; }
.step__title { margin-top: 12px; color: #fff; font-size: 24px; font-weight: 560; letter-spacing: -.03em; }
.step__text { max-width: 56ch; margin-top: 10px; color: rgba(255, 255, 255, .72); font-size: 16px; }
.step__frag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.mini-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mini-chain span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 12.5px; font-weight: 500; }
.mini-chain span + span::before { content: "→"; margin-right: 4px; color: rgba(255, 255, 255, .45); }
.link-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); color: #C9D5FF; font-size: 12.5px; }
.qr { display: grid; grid-template-columns: repeat(4, 9px); gap: 3px; padding: 7px; border-radius: 8px; background: #fff; }
.qr span { width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.qr span:nth-child(2), .qr span:nth-child(5), .qr span:nth-child(7), .qr span:nth-child(10), .qr span:nth-child(12), .qr span:nth-child(15) { background: transparent; }
.step__frag--rows, .step__frag--log { flex-direction: column; align-items: stretch; gap: 6px; max-width: 460px; }
.step__frag--rows > span, .step__frag--log > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
}
.step__frag--log > span { justify-content: flex-start; gap: 14px; }
.step__frag--log .mono { color: var(--cyan); font-size: 12px; }

/* ==========================================================================
   8. INTELLIGENCE
   ========================================================================== */
.intel__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.biointel { margin: 0; }
.biointel__ui { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, #FFFFFF, #F3F6FF); font-size: 13px; }
.biointel__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .8); }
.biointel__title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 650; }
.biointel__title .i { color: var(--royal); }
.biointel__q { padding: 4px 10px; border-radius: var(--r-pill); background: var(--canvas-2); color: var(--royal-900); font-size: 11.5px; }
.biointel__body { display: grid; flex: 1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px; }
.biointel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 22px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .7); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.biointel__foot > span:first-child { display: flex; align-items: center; gap: 8px; }
.biointel__foot .i { color: var(--royal); }
.biointel__foot .mono { color: var(--muted); font-size: 12px; }
.constellation { width: 100%; height: auto; }
.constellation text { fill: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.constellation__node--hit text { fill: #fff; }
.constellation__probe { color: var(--royal); }
.constellation__node svg { color: #8A91A8; }
.constellation__node--hit svg { color: var(--bad); }
.matches { display: grid; gap: 10px; list-style: none; }
.match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.match__id { color: var(--ink); font-size: 12.5px; }
.match__pct { color: var(--ink); font-size: 13px; font-weight: 600; }
.match__bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--canvas); }
.bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8FB4F8, var(--royal)); }
.bar--97 { width: 97%; }
.bar--64 { width: 64%; }
.bar--41 { width: 41%; }
.bar--22 { width: 22%; }
.match--hit { border-color: #FECDCA; background: linear-gradient(180deg, #FFFFFF, #FEF6F5); }
.match--hit .bar { background: linear-gradient(90deg, #FDA29B, #D92D20); }
.match__note { grid-column: 1 / -1; color: var(--bad-ink); font-size: 12px; font-weight: 600; }
.blocklist { display: flex; flex-direction: column; gap: 14px; padding: 34px; border-radius: var(--r-card); background: var(--canvas); }
.blocklist > p:not(.mono-label) { color: var(--body); font-size: 16px; }
.bl-table { width: 100%; margin-top: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; border-spacing: 0; border-collapse: separate; background: #fff; font-size: 14.5px; }
.bl-table th, .bl-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.bl-table tbody tr:last-child th, .bl-table tbody tr:last-child td { border-bottom: 0; }
.bl-table thead th { background: #FAFBFD; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.bl-table thead th:not(:first-child), .bl-table td { width: 26%; text-align: center; }
.bl-table tbody th { color: var(--ink); font-weight: 600; }
.bl-table tbody th .i { display: inline-block; margin-right: 10px; vertical-align: -3px; color: var(--royal); }
.yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-ink); }
.yes .i { stroke-width: 2.6; }
.bl-hit { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); }
.bl-hit__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bad-bg); color: var(--bad-ink); }
.bl-hit__text { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--body); font-size: 13px; }
.bl-hit__text .mono { color: var(--ink); font-size: 12.5px; }

/* ==========================================================================
   9. SARA + WHITE LABEL
   ========================================================================== */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: var(--section-y); }
.duo__card { --pad: clamp(28px, 3.4vw, 48px); position: relative; display: flex; flex-direction: column; padding: var(--pad); overflow: hidden; border-radius: 28px; }
.duo__copy .h2 { margin-top: 18px; }
.duo__copy > p { max-width: 46ch; margin-top: 16px; color: var(--body); }
.sara { background: linear-gradient(180deg, var(--canvas) 0%, #EEF2FB 100%); }
.sara .chat {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  margin: 28px calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding: 150px var(--pad) var(--pad);
}
.sara .chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(37, 71, 233, .55) 1.25px, transparent 1.75px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 82%);
  mask-image: radial-gradient(70% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, .45) 55%, transparent 82%);
}
.sara .chat::after {
  content: "";
  position: absolute;
  inset: 20% 10% 0;
  background: radial-gradient(50% 50% at 50% 60%, rgba(26, 155, 244, .28), rgba(26, 155, 244, 0) 70%);
  filter: blur(20px);
}
.chat__ui { position: relative; z-index: 1; }
.sara-stat {
  position: absolute;
  z-index: 2;
  top: 18px; right: calc(var(--pad) - 6px);
  display: grid;
  gap: 4px;
  width: 196px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-float);
  animation: bob 8s ease-in-out -2s infinite;
}
.sara-stat__label { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.sara-stat__row { display: flex; align-items: baseline; gap: 8px; }
.sara-stat__value { color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sara-stat__delta { padding: 1px 7px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: 11.5px; font-weight: 650; }
.sara-stat__bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 6px; }
.sara-stat__bars span { flex: 1; border-radius: 3px 3px 1px 1px; background: #D5DEFB; }
.sara-stat__bars span:nth-child(1) { height: 42%; }
.sara-stat__bars span:nth-child(2) { height: 55%; }
.sara-stat__bars span:nth-child(3) { height: 48%; }
.sara-stat__bars span:nth-child(4) { height: 66%; }
.sara-stat__bars span:nth-child(5) { height: 60%; }
.sara-stat__bars span:nth-child(6) { height: 78%; }
.sara-stat__bars span:nth-child(7) { height: 100%; background: linear-gradient(180deg, var(--sky), var(--royal)); }
.sara-chip {
  position: absolute;
  z-index: 2;
  top: 64px; left: calc(var(--pad) - 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-float);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  animation: bob 7s ease-in-out -4s infinite;
}
.sara-chip strong { color: var(--ink); font-weight: 600; }
.sara-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .16); }
.chat__ui { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-1); font-size: 14px; }
.chat__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sara-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--royal-900)); }
.sara-avatar svg { width: 18px; height: auto; }
.chat__name { color: var(--ink); font-weight: 650; }
.chat__role { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.bubble { line-height: 1.55; }
.bubble--me { align-self: flex-end; max-width: 80%; padding: 10px 15px; border-radius: 18px 18px 5px 18px; background: var(--royal); color: #fff; }
.bubble--sara { max-width: 96%; padding: 14px 16px; border-radius: 18px 18px 18px 5px; background: var(--canvas); color: var(--body); }
.bubble--sara strong { color: var(--ink); }
.bubble__prov { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__chips span { padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.chat__input { display: flex; align-items: center; justify-content: space-between; padding: 7px 7px 7px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--muted); font-size: 13.5px; }
.chat__send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--royal); color: #fff; }
.duo__copy .duo__note { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.duo__note .i { color: var(--royal); }

.wl { border: 1px solid var(--line); background: #fff; }
.ticks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 24px; }
.ticks--grid li { font-size: 14.5px; }
.wl__stage { position: relative; flex: 1; margin: 30px calc(var(--pad) * -1) calc(var(--pad) * -1); }
.wl__sky {
  position: relative;
  height: 100%;
  min-height: 380px;
  padding-top: 36px;
  overflow: hidden;
  background:
    radial-gradient(30% 22% at 16% 88%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(34% 24% at 86% 96%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    radial-gradient(22% 14% at 70% 74%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    radial-gradient(26% 16% at 30% 66%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #FFFFFF 0%, #DCEBFE 22%, #8DC3F9 55%, #3F95F2 82%, #2F6FEA 100%);
}
.phone--wl { position: relative; z-index: 1; margin: 0 auto; transform: translateX(-56px); }
.phone--wl .phone__screen { height: 440px; }
.mb-hero { display: grid; place-items: center; height: 104px; margin-top: 14px; border-radius: 18px; background: var(--mb-tint); }
.mb-hero svg { width: 118px; height: auto; }
.mb-btn { display: grid; place-items: center; height: 44px; margin-top: 16px; border-radius: var(--r-pill); background: var(--mb); color: #fff; font-size: 14px; font-weight: 650; }
.phone--wl .phone__text { font-size: 13px; }
.theme-card {
  position: absolute;
  z-index: 2;
  right: 7%; top: 110px;
  display: grid;
  gap: 2px;
  width: 232px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-float);
  font-size: 12.5px;
  animation: bob 8s ease-in-out -3s infinite;
}
.theme-card__title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 650; }
.theme-card__title .i { color: var(--mb); }
.theme-card__row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 4px; color: var(--muted); }
.theme-card__row--stack { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 4px 4px; }
.theme-card__msgs { display: flex; gap: 4px; }
.theme-card__msgs span { padding: 2px 8px; border-radius: var(--r-pill); background: var(--mb-tint); color: var(--mb); font-size: 11px; font-weight: 600; }
.swatches { display: flex; gap: 5px; }
.sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .12); }
.sw--1 { background: var(--mb); }
.sw--2 { background: var(--mb-tint); }
.sw--3 { background: #C8A45C; }
.theme-card__font { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 16px; }

/* ==========================================================================
   10. STAT BAND
   ========================================================================== */
.stats__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 5vw, 72px) clamp(24px, 4.4vw, 64px);
  border-radius: 28px;
  background: linear-gradient(120deg, #3659F2 0%, #2547E9 45%, #1B36C4 100%);
  color: #fff;
}
.stats__band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(40% 80% at 100% 100%, rgba(100, 244, 248, .25), rgba(100, 244, 248, 0) 70%), radial-gradient(40% 70% at 0% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%);
}
.stats__arc {
  position: absolute;
  z-index: -1;
  right: -140px; bottom: -330px;
  width: 560px; height: 560px;
  border: 80px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
}
.stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.stats__list li { display: flex; flex-direction: column; gap: 14px; padding: 4px 32px; border-left: 1px solid rgba(255, 255, 255, .24); }
.stats__list li:first-child { padding-left: 0; border-left: 0; }
.stats__num { font-size: clamp(46px, 5.4vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stats__label { max-width: 22ch; color: rgba(255, 255, 255, .88); font-size: 15.5px; line-height: 1.45; }

/* ==========================================================================
   11. INDUSTRIES
   ========================================================================== */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.industry {
  padding: 10px 10px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.industry:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.industry__art {
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  padding: 18px 0 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FAFBFF 0%, #EEF2FF 100%);
}
.industry__art .iso { width: 82%; max-width: 280px; height: auto; }
.industry .h3 { padding-inline: 14px; font-size: 20px; }
.industry p { margin-top: 8px; padding-inline: 14px; color: var(--body); font-size: 15.5px; line-height: 1.55; }

/* ==========================================================================
   12. DEVELOPERS
   ========================================================================== */
.dev__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 56px; }
.ticks--rows { gap: 0; margin-top: 0; border-top: 1px solid var(--line); }
.ticks--rows li { align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; font-weight: 500; color: var(--ink); }
.code {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  border: 1px solid #1B2340;
  border-radius: var(--r-card);
  background: var(--night);
  box-shadow: 0 50px 90px -40px rgba(7, 10, 23, .6);
  color: #C9D3F5;
}
.code::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 100% 0%, rgba(37, 71, 233, .42), rgba(37, 71, 233, 0) 70%); }
.code::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain-dark) 0 0 / 200px; opacity: .3; pointer-events: none; }
.code__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.code__dots { display: flex; gap: 6px; }
.code__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.code__tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); }
.code__tab {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.code__tab:hover { color: #fff; }
.code__tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.code__lang { margin-left: auto; color: rgba(255, 255, 255, .55); font-size: 11.5px; }
.code__pane { overflow-x: auto; }
.code__pane:focus-visible { outline-offset: -4px; }
.code__pane pre { width: max-content; min-width: 100%; margin: 0; padding: 24px; font-family: var(--mono); font-size: 13px; line-height: 1.8; tab-size: 2; }
.no-js .code__pane + .code__pane { border-top: 1px solid rgba(255, 255, 255, .08); }
.t-cmd { color: #fff; font-weight: 600; }
.t-flag { color: var(--cyan); }
.t-url { color: #A9BCFF; }
.t-str { color: #8FD8FF; }
.t-key { color: #C3CEFF; }
.t-ok { color: #75E0A7; font-weight: 600; }
.code__foot { padding: 18px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.code__foot-label { margin-bottom: 10px; color: rgba(255, 255, 255, .55); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hooks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hooks li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); color: #E4E9FB; font-family: var(--mono); font-size: 12.5px; }
.hooks__dot { width: 6px; height: 6px; border-radius: 50%; }
.hooks__dot--ok { background: var(--ok); }
.hooks__dot--warn { background: var(--warn); }
.hooks__dot--bad { background: var(--bad); }

/* ==========================================================================
   13. PRICING
   ========================================================================== */
.pricing { background: var(--canvas); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
}
.plan__name { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.plan__amount { color: var(--ink); font-size: clamp(44px, 4.4vw, 58px); font-weight: 560; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.plan__per { color: var(--muted); font-size: 15px; }
.plan__list { display: grid; gap: 12px; margin: 28px 0 34px; padding-top: 24px; border-top: 1px solid var(--line); list-style: none; }
.plan__list li { display: flex; gap: 10px; color: var(--body); font-size: 15.5px; line-height: 1.45; }
.plan__list .i { margin-top: 3px; color: var(--royal); stroke-width: 2.2; }
.plan__cta { width: 100%; margin-top: auto; }
.plan--featured {
  border-color: transparent;
  background: linear-gradient(165deg, #3659F2 0%, #2547E9 42%, #1B36C4 100%);
  box-shadow: 0 34px 70px -34px rgba(37, 71, 233, .8);
  color: rgba(255, 255, 255, .9);
}
.plan__flutes {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--flutes-fine), radial-gradient(60% 40% at 50% 100%, rgba(100, 244, 248, .35), rgba(100, 244, 248, 0) 70%);
  background-size: 1180px 100%, 100% 100%;
  opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000);
  mask-image: linear-gradient(180deg, transparent 20%, #000);
}
.plan--featured .plan__name, .plan--featured .plan__amount { color: #fff; }
.plan--featured .plan__per { color: rgba(255, 255, 255, .8); }
.plan--featured .plan__list { border-color: rgba(255, 255, 255, .22); }
.plan--featured .plan__list li { color: rgba(255, 255, 255, .92); }
.plan--featured .plan__list .i { color: var(--cyan); }
.plan__badge { padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

.rates { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; }
.rates__card { padding: 30px 30px 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.rates__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.rates__title .mono { color: var(--muted); font-size: 11.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.price-table, .flow-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; }
.flow-table { margin-bottom: 24px; }
.price-table thead th, .flow-table thead th {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}
.price-table thead th:last-child, .flow-table thead th:last-child { text-align: right; }
.price-table tbody th, .price-table td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody th { color: var(--ink); font-weight: 500; text-align: left; }
.price-table td { color: var(--ink); font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.price-table__unit { margin-left: 4px; color: var(--muted); font-family: var(--font); font-size: 12.5px; }
.flow-table tbody th, .flow-table td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.flow-table tbody th { width: 30%; padding-right: 16px; color: var(--ink); font-weight: 600; text-align: left; }
.flow-table__cost { padding-left: 16px !important; color: var(--ink); font-size: 22px; font-weight: 560; letter-spacing: -.03em; text-align: right; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.chips .chips__lead { padding-left: 0; border: 0; background: transparent; color: var(--muted); }
.rates__card--flows { display: flex; flex-direction: column; }
.included { margin-top: auto; padding: 20px 22px; border-radius: 18px; background: var(--canvas-2); }
.included__title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.included__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: 14px; list-style: none; }
.included__list li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 500; }
.included__list .i { color: var(--royal); }

/* ==========================================================================
   14. SECURITY
   ========================================================================== */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sec-item { position: relative; padding: 36px 34px 42px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-item::after { content: ""; position: absolute; right: -6px; bottom: -6px; z-index: 1; width: 11px; height: 11px; background: #fff var(--plus) center / 11px no-repeat; }
.sec-item__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(180deg, #FFFFFF, #EEF2FF); color: var(--royal); }
.sec-item__icon .i { width: 24px; height: 24px; }
.sec-item .h3 { font-size: 20px; }
.sec-item p { max-width: 36ch; margin-top: 10px; color: var(--body); font-size: 15.5px; line-height: 1.55; }

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */
.cta__frame {
  position: relative;
  isolation: isolate;
  margin-inline: var(--inset);
  padding: clamp(120px, 13vw, 200px) 0 clamp(64px, 7vw, 104px);
  overflow: hidden;
  border-radius: var(--r-panel);
  color: rgba(255, 255, 255, .88);
}
.glass--deep { background: linear-gradient(180deg, #1B36C4 0%, #2144DE 30%, #2A55EC 58%, #3A7EF0 82%, #5FB0F6 100%); }
.glass--deep .glass__glow {
  background:
    radial-gradient(40% 30% at 50% 104%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 72%),
    radial-gradient(36% 40% at 50% 100%, rgba(100, 244, 248, .55), rgba(100, 244, 248, 0) 72%),
    radial-gradient(50% 50% at 0% 0%, rgba(15, 31, 122, .7), rgba(15, 31, 122, 0) 70%),
    radial-gradient(50% 50% at 100% 0%, rgba(15, 31, 122, .6), rgba(15, 31, 122, 0) 70%);
}
.glass--deep .glass__flutes { opacity: .8; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), #000 55%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), #000 55%); }
.glass--deep .glass__beams { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 80%); mask-image: linear-gradient(180deg, transparent 30%, #000 80%); opacity: .6; }
.cta__marquee {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  left: 0;
  display: flex;
  width: max-content;
  color: rgba(255, 255, 255, .075);
  font-size: clamp(64px, 11vw, 170px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  animation: marquee 70s linear infinite;
}
.cta__marquee span { padding-right: .3em; }
.cta__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 64px; }
.cta__copy .h2 .ink { color: #fff; }
.cta__copy .h2 .tone { color: rgba(255, 255, 255, .62); }
.cta__copy .lede { max-width: 44ch; margin-top: 24px; color: rgba(255, 255, 255, .9); }
.cta__copy .btn { margin-top: 34px; }
.form-card { padding: 30px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px rgba(7, 10, 23, .55); color: var(--body); }
.form-card__title { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.demo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.field-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-group--full { grid-column: 1 / -1; }
.field-group label { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.field-group input, .field-group select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.field-group select {
  padding-right: 38px;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A718A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
}
.field-group input:hover, .field-group select:hover { border-color: #B9C0D2; }
.field-group input:focus, .field-group select:focus { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14); outline: none; }
.field-group input:focus-visible, .field-group select:focus-visible { outline: 2px solid var(--royal); outline-offset: 1px; }
.demo-form .btn { margin-top: 6px; }
.form-status:empty { display: none; }
.form-status { padding: 12px 14px; border: 1px solid #ABEFC6; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; font-weight: 500; }
.form-card__alt { margin-top: 16px; color: var(--muted); font-size: 14px; text-align: center; }
.form-card__alt a { color: var(--royal); font-weight: 600; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { padding-top: clamp(80px, 9vw, 120px); overflow: hidden; background: #fff; }
.footer__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.brand--footer img { height: 30px; }
.footer__tag { margin-top: 22px; color: var(--ink); font-size: 24px; font-weight: 560; letter-spacing: -.035em; }
.footer__mail { display: inline-block; margin-top: 10px; padding: 12px 0; color: var(--body); font-size: 15px; text-decoration: none; }
.footer__mail:hover { color: var(--royal); }
.footer__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.footer__h { margin-bottom: 16px; color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.footer__col ul { display: grid; gap: 2px; list-style: none; }
.footer__col a { display: inline-block; padding: 5px 0; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.footer__col a:hover { color: var(--royal); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer__bottom a { color: var(--body); }
.footer__word {
  width: min(1440px, calc(100% - var(--gutter) * 2));
  margin: clamp(32px, 4vw, 56px) auto 0;
  aspect-ratio: 211 / 36;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, .15));
  mask-image: linear-gradient(180deg, #000 35%, rgba(0, 0, 0, .15));
}
.footer__word svg { width: 100%; height: auto; fill: #E4E8F1; }

/* ==========================================================================
   Motion: hero entrance (from a visible-at-rest end state)
   ========================================================================== */
@keyframes rise { from { opacity: .45; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__content > * { animation: rise .9s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: .06s; }
.hero__content > :nth-child(3) { animation-delay: .14s; }
.hero__content > :nth-child(4) { animation-delay: .2s; }
.hero__content > :nth-child(5) { animation-delay: .26s; }
.hero__product { animation: rise 1.1s var(--ease) .3s both; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .hero__stage { width: min(860px, calc(100% - 220px)); }
  .float--face { left: -100px; }
  .float--phone { right: -116px; }
  .phone--hero { width: 206px; }
  .phone--hero .phone__screen { height: 430px; }
  .phone--hero .phone__cam { height: 196px; }
  .phone--hero .mb-step { display: none; }
  .console__search { display: none; }
  .builder__canvas { padding: 56px 28px; grid-template-columns: minmax(0, 1fr) 48px 150px; }
  .flow { gap: 18px; }
  .node + .node::before { width: 18px; }
  .points li { padding: 4px 20px; }
}

@media (max-width: 1023px) {
  .primary-nav, .nav-signin { display: none; }
  .menu-toggle { display: grid; }
  .nav-actions { margin-left: auto; gap: 8px; }
  .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .statement-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero__stage { width: calc(100% - 120px); }
  .float--phone { display: none; }
  .float--face { left: -48px; top: 300px; }
  .session-grid { grid-template-columns: minmax(0, 1fr); }
  .float--aml { left: -20px; }
  .float--video { right: -20px; }
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .console__side { display: none; }
  .console__ws { width: auto; }
  .builder__canvas { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 40px 24px; }
  .flow { flex-direction: column; width: min(320px, 100%); gap: 22px; }
  .node { flex: none; width: 100%; flex-direction: row; align-items: center; }
  .node__cost { margin-left: auto; }
  .node + .node::before { top: auto; bottom: 100%; right: auto; left: 50%; width: 1.5px; height: 22px; }
  .node + .node::after { top: auto; right: auto; bottom: calc(100% + 1px); left: calc(50% - 3.25px); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #9AA1B5; border-bottom: 0; }
  .fork--h { display: none; }
  .fork--v { display: block; width: min(420px, 100%); height: 48px; }
  .outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(520px, 100%); }
  .outcome { justify-content: center; padding: 0 10px; font-size: 13px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .points li:nth-child(3) { padding-left: 0; border-left: 0; }
  .bento__card--core { grid-column: span 12; grid-row: auto; }
  .bento__card--aml, .bento__card--video, .bento__card--ip, .bento__card--email, .bento__card--age, .bento__card--poa { grid-column: span 6; }
  .bento__note { grid-column: span 12; flex-direction: row; align-items: center; justify-content: flex-start; }
  .evidence__top { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .runs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .runs__aside { position: static; }
  .runs__nav { display: none; }
  .intel__grid { grid-template-columns: minmax(0, 1fr); }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .stats__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .rates { grid-template-columns: minmax(0, 1fr); }
  .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}

@media (max-width: 767px) {
  :root { --inset: 8px; }
  body { font-size: 16px; }
  .site-header { top: 16px; padding-inline: 16px; }
  .nav-pill { height: 58px; padding: 0 6px 0 16px; }
  .brand img { height: 23px; }
  .hero__frame { max-height: none; border-radius: 24px; }
  .hero__content { padding-top: 116px; padding-inline: 20px; }
  .badge { font-size: 13px; padding: 6px 14px 6px 11px; }
  .hero__title { font-size: clamp(40px, 12vw, 60px); }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1 1 150px; }
  .hero__reassure { font-size: 13px; }
  .hero__reassure li + li::before { margin: 0 10px; }
  .hero__product { height: 380px; margin-top: 56px; }
  .hero__stage { width: calc(100% - 24px); }
  .console { padding: 5px; border-radius: 20px; }
  .console__win { border-radius: 15px; }
  .console__crumbs, .console__me .i { display: none; }
  .console__main { padding: 16px 14px; }
  .session-head { flex-direction: column; gap: 12px; }
  .decision { width: 100%; }
  .session-grid { grid-template-columns: minmax(0, 1fr); }
  .applicant { display: none; }
  .checks-table__head { display: none; }
  .check-row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "i n s" "i r s"; height: auto; row-gap: 0; padding: 9px 12px; }
  .check-row:first-of-type { border-top: 0; }
  .check-row__icon { grid-area: i; }
  .check-row__name { grid-area: n; }
  .check-row__result { grid-area: r; font-size: 12px; }
  .check-row .status { grid-area: s; }
  .float--face { left: -6px; right: auto; top: 250px; padding: 9px 14px 9px 9px; }
  .facecard__ring { width: 46px; height: 46px; }
  .facecard__ring svg { width: 40px; height: 40px; }
  .facecard__value { font-size: 22px; }
  .float--aml { left: auto; right: -4px; top: -22px; }
  .float--video { display: none; }

  .sectors__label { max-width: 30ch; margin-inline: auto; }
  .marquee__list li { font-size: 17px; }
  .pillar { grid-template-columns: 52px minmax(0, 1fr) 40px; row-gap: 10px; column-gap: 14px; padding: 24px 0; }
  .pillar__num { width: 40px; height: 40px; font-size: 12px; }
  .pillar__title { grid-column: 2; }
  .pillar__arrow { grid-column: 3; grid-row: 1; width: 38px; height: 38px; }
  .pillar__text { grid-column: 1 / -1; }
  .pillar--open { margin: 10px -8px; padding: 22px 16px; border-radius: 22px; }
  .pillar__detail { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .pillar__art { display: grid; place-items: center; }
  .pillar__art .iso { max-width: 260px; }
  .rule li { flex-wrap: wrap; gap: 6px 10px; }
  .rule__note { margin-left: 52px; }
  .builder__bar { flex-wrap: wrap; gap: 10px; }
  .builder__zoom { display: none; }
  .builder__cost { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .builder__publish { margin-left: auto; }
  .outcomes { grid-template-columns: minmax(0, 1fr); width: min(320px, 100%); }
  .fork--v { display: none; }
  .outcomes { margin-top: 22px; }
  .points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .points li { flex-direction: row; align-items: center; gap: 14px; padding: 16px 0 !important; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
  .points li:first-child { border-top: 0; }
  .bento { gap: 12px; }
  .bento__card--aml, .bento__card--video, .bento__card--ip, .bento__card--email, .bento__card--age, .bento__card--poa { grid-column: span 12; }
  .core-visual { min-height: 330px; }
  .core-visual__id { left: 6%; top: 30%; width: 210px; padding: 12px; gap: 10px; }
  .core-visual__id-photo { width: 52px; height: 64px; }
  .core-visual__scan { right: 4%; top: 17%; width: 170px; height: 170px; padding: 14px; }
  .core-visual__chip { right: 4%; top: auto; bottom: 22px; }
  .core-visual__steps { left: 16px; top: 16px; }
  .core-list { grid-template-columns: minmax(0, 1fr); }
  .core-item + .core-item { border-left: 0; border-top: 1px solid var(--line); }
  .bento__note { flex-direction: column; align-items: flex-start; }
  .casefile__body { grid-template-columns: minmax(0, 1fr); }
  .timeline { border-top: 1px solid rgba(255, 255, 255, .08); border-left: 0; }
  .field { grid-template-columns: minmax(0, 1fr) auto; }
  .field__k { grid-column: 1 / -1; }
  .field__why { grid-column: 1 / -1; }
  .step { padding: 24px 20px; }
  .biointel__bar { flex-wrap: wrap; }
  .biointel__body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .constellation { max-width: 320px; margin-inline: auto; }
  .blocklist { padding: 24px 20px; }
  .bl-table th, .bl-table td { padding: 12px 10px; }
  .bl-table tbody th .i { display: none; }
  .ticks--grid { grid-template-columns: minmax(0, 1fr); }
  .sara .chat { padding-top: 132px; }
  .sara-stat { width: 170px; right: 12px; top: 12px; }
  .sara-chip { left: 12px; top: 58px; }
  .phone--wl { transform: none; }
  .theme-card { display: none; }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__list li { padding: 0 16px; }
  .stats__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .industry-grid { grid-template-columns: minmax(0, 1fr); }
  .code__bar { flex-wrap: wrap; }
  .code__lang { display: none; }
  .code__pane pre { padding: 18px 16px; font-size: 12px; }
  .plan { padding: 28px 22px 24px; }
  .rates__card { padding: 24px 18px 20px; }
  .flow-table thead { display: none; }
  .flow-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .flow-table tbody tr:last-child { border-bottom: 0; }
  .flow-table tbody th, .flow-table td { width: auto; padding: 0; border: 0; }
  .flow-table td:not(.flow-table__cost) { grid-column: 1 / -1; grid-row: 2; }
  .flow-table__cost { grid-row: 1; grid-column: 2; padding-left: 0 !important; font-size: 20px; }
  .included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-item { padding: 28px 22px 32px; }
  .cta__frame { border-radius: 24px; padding-top: 110px; }
  .form-card { padding: 22px 18px; }
  .demo-form { grid-template-columns: minmax(0, 1fr); }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: column; }
}

@media (max-width: 360px) {
  .nav-start { display: none; }
}

@media (max-width: 400px) {
  .nav-start { padding-left: 14px; font-size: 14px; }
  .nav-start .btn__chip { width: 30px; height: 30px; }
  .hero__ctas .btn { flex-basis: 100%; }
  .otp span { width: 32px; height: 42px; font-size: 16px; }
}

/* ==========================================================================
   Reduced motion: everything static, content identical
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__inner { width: auto; justify-content: center; }
  .marquee__list { flex-wrap: wrap; justify-content: center; gap: 18px 40px; max-width: 1000px; margin-inline: auto; padding: 0 var(--gutter); }
  .marquee__list--clone { display: none; }
  .media-slot__video { display: none; }
}

/* ==========================================================================
   Checkpoint header (ported from direction D): submissions travel into the
   Identiko tile and leave as decisions; the beam flares into the royal dome.
   ========================================================================== */
:root {
  --shadow-sm: 0 1px 2px rgba(10, 14, 31, .06);
  --shadow: 0 1px 2px rgba(10, 14, 31, .06), 0 12px 32px -12px rgba(15, 31, 122, .18);
  --shadow-lg: 0 2px 4px rgba(10, 14, 31, .04), 0 24px 64px -24px rgba(15, 31, 122, .28), 0 48px 120px -48px rgba(15, 31, 122, .22);
  --r-card: 24px;
  --header-space: 84px;
  --cp-h: 360px;
  --cy: 178px;
  --tile: 96px;
  --steps-dy: 150px;
  --beam-extra: 260px;
  --flare-h: clamp(420px, 40vw, 580px);
  --dome-pb: clamp(210px, 19vw, 270px);
}
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mono-tag {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--canvas-2);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--royal-700);
  font-variant-numeric: tabular-nums;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-weight: 500;
  color: var(--royal);
  text-decoration: none;
}
.link-arrow .ico { width: 16px; height: 16px; stroke-width: 1.9; transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .ico { transform: translateX(3px); }
/* ---------- pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: #E7F8EF; color: var(--ok-ink); }
.pill--info { background: var(--canvas-2); color: var(--royal-700); }
.pill--bad { background: #FEECEB; color: var(--bad-ink); }
.pill--ok-dark { background: rgba(18, 183, 106, .15); color: #6BE8AB; }

.hero--cp { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0; }
.hero--cp .hero__content { padding-top: 132px; }
.hero--cp .cp { align-self: stretch; }
.h2--dome { margin-top: 0; }
.h2--dome .ink { color: #fff; }
.h2--dome .tone { color: rgba(255, 255, 255, .62); }

/* ---------- the checkpoint: submissions in, decisions out ---------- */
.cp {
  position: relative;
  height: var(--cp-h);
  margin-top: clamp(6px, 1vw, 14px);
  overflow-x: clip;
}
.cp__stage { position: absolute; inset: 0; }

/* 01 · 02 · 03 caption row; 02 is the live status of the check being run */
.cp__steps {
  position: absolute;
  left: 50%;
  top: calc(var(--cy) - var(--steps-dy));
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: min(100% - 2 * var(--gutter), 920px);
  transform: translate(-50%, -50%);
}
.cp__step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.cp__step--in { justify-self: start; }
.cp__step--out { justify-self: end; }
.cp__step-sub { color: var(--muted); }
.cp__step-sub::before { content: "·"; margin-right: 9px; color: var(--line-2); }
.cp__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--white);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .02em;
  color: var(--muted);
}
.cp__step--out .cp__num { border-color: #BFE9D2; background: #F1FBF5; color: var(--ok-ink); }
.cp__hud {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 5px 18px 5px 5px;
  border: 1px solid rgba(37, 71, 233, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 14px 34px -16px rgba(37, 71, 233, .6);
  overflow: hidden;
  font-size: .8125rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.cp__hud .cp__num { min-width: 32px; height: 26px; border: 0; border-radius: 999px; background: var(--royal); color: var(--white); }
.cp__hud-label {
  position: relative;
  padding-left: 15px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp__hud-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px rgba(26, 155, 244, .18);
}
.cp__hud-name { display: inline-block; min-width: 9.4em; font-weight: 600; letter-spacing: -0.01em; }
.cp__hud-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(37, 71, 233, .08); }
.cp__hud-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--royal), var(--sky), var(--cyan));
  transform: scaleX(var(--hud-p, 1));
  transform-origin: left center;
}

/* orbit rings, glow and the tile */
.cp__rings { position: absolute; left: 50%; top: var(--cy); z-index: 1; width: 0; height: 0; }
.cp__orbit,
.cp__glow,
.cp__rings::before {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp__orbit--outer {
  width: calc(var(--tile) * 2.5);
  height: calc(var(--tile) * 2.5);
  border: 1px dashed rgba(37, 71, 233, .22);
}
.cp__orbit--inner,
.cp__rings::before {
  width: calc(var(--tile) * 1.66);
  height: calc(var(--tile) * 1.66);
}
.cp__orbit--inner {
  background: conic-gradient(from 0deg, rgba(100, 244, 248, 0) 0deg, rgba(100, 244, 248, 0) 190deg, rgba(26, 155, 244, .55) 300deg, #64F4F8 357deg, rgba(100, 244, 248, 0) 360deg);
  box-shadow: inset 0 0 0 1.5px rgba(37, 71, 233, .13);
  -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.cp__rings::before {
  content: "";
  background: radial-gradient(circle at 50% 1px, #FFFFFF 0 2px, rgba(100, 244, 248, .95) 3px, rgba(100, 244, 248, 0) 8px) no-repeat;
}
.cp__glow {
  width: calc(var(--tile) * 2.4);
  height: calc(var(--tile) * 2.4);
  background: radial-gradient(closest-side, rgba(26, 155, 244, .2), rgba(37, 71, 233, .08) 55%, rgba(37, 71, 233, 0));
}

.cp__beam {
  position: absolute;
  left: 50%;
  top: var(--cy);
  z-index: 1;
  width: 2px;
  height: calc(var(--cp-h) - var(--cy) + var(--beam-extra));
  transform: translateX(-50%);
  background: linear-gradient(180deg, #2547E9 0%, #3A61F4 58%, rgba(37, 71, 233, 0) 100%);
  box-shadow: 0 0 14px 1px rgba(37, 71, 233, .3), 0 0 34px 6px rgba(26, 155, 244, .12);
}
.cp__beam::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(210, 248, 255, 0) 0 26px, rgba(210, 248, 255, .95) 36px, rgba(210, 248, 255, 0) 46px);
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--tile) / 2), #000 calc(var(--tile) / 2 + 36px), #000 55%, transparent 90%);
  mask-image: linear-gradient(180deg, transparent calc(var(--tile) / 2), #000 calc(var(--tile) / 2 + 36px), #000 55%, transparent 90%);
  opacity: .8;
}
.cp__packet {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 56px;
  margin-left: -3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 70%, #BFFBFF);
  box-shadow: 0 0 14px 3px rgba(100, 244, 248, .55);
  opacity: var(--po, 0);
  transform: translateY(var(--py, 0px));
}

.cp__core { position: absolute; left: 50%; top: var(--cy); z-index: 3; width: 0; height: 0; }
.cp__tile {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 28%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: linear-gradient(155deg, #4A74FF 0%, #2547E9 42%, #2361EE 70%, #1A9BF4 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    inset 0 -14px 22px rgba(12, 24, 130, .35),
    0 20px 44px -12px rgba(37, 71, 233, .72),
    0 0 0 7px rgba(37, 71, 233, .06),
    0 0 80px 10px rgba(26, 155, 244, .2);
}
.cp__tile::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}
.cp__sweep {
  position: absolute;
  left: -30%;
  right: -30%;
  top: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0));
  transform: translateY(-130%) skewY(-14deg);
  pointer-events: none;
}
.cp__mark {
  position: relative;
  z-index: 1;
  width: 54%;
  height: auto;
  margin-top: 6%;
  filter: drop-shadow(0 2px 3px rgba(8, 20, 110, .35));
}
.cp__dome { fill: var(--white); }
.cp__ring { fill: url(#g-ring-light); }
.cp__ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile);
  height: var(--tile);
  border: 1.5px solid rgba(37, 71, 233, .55);
  border-radius: 28%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* tokens: JS moves them by setting --x, --y, --r, --s and --o */
.cp__tokens {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.tk {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --s: 1;
  --o: 0;
  position: absolute;
  left: 50%;
  top: var(--cy);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 11px 0 10px;
  border-radius: 16px;
  font-size: .8125rem;
  line-height: 1.25;
  white-space: nowrap;
  opacity: var(--o);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s));
  pointer-events: var(--pe, none);
  will-change: transform, opacity;
}
.tk__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk__title { font-weight: 600; letter-spacing: -0.01em; }
.tk__meta { font-size: .6875rem; }
.tk__thumb,
.tk__icon,
.tk__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.tk__thumb .ico,
.tk__icon .ico { width: 17px; height: 17px; }

/* incoming: raw, dashed, greyscale */
.tk--in {
  border: 1px dashed #C9D0DE;
  background: rgba(247, 248, 251, .94);
  color: var(--muted);
}
.tk--in .tk__title { color: #5E6680; }
.tk--in .tk__meta { font-family: var(--mono); letter-spacing: .01em; color: #858CA3; }
.tk__thumb { border-radius: 10px; background: #ECEFF4; color: #9AA1B5; }
.tk__thumb--doc::before,
.tk__thumb--bill::before {
  content: "";
  width: 22px;
  height: 28px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #D3D8E3;
}
.tk__thumb--doc::before {
  background:
    linear-gradient(#C6CCDA, #C6CCDA) 3px 4px / 8px 10px no-repeat,
    linear-gradient(#D5DAE5, #D5DAE5) 13px 5px / 6px 2px no-repeat,
    linear-gradient(#D5DAE5, #D5DAE5) 13px 9px / 5px 2px no-repeat,
    repeating-linear-gradient(90deg, #C6CCDA 0 2px, rgba(198, 204, 218, 0) 2px 3px) 3px 19px / 16px 2px no-repeat,
    repeating-linear-gradient(90deg, #C6CCDA 0 2px, rgba(198, 204, 218, 0) 2px 3px) 3px 23px / 16px 2px no-repeat,
    #FFFFFF;
}
.tk__thumb--bill::before {
  background:
    linear-gradient(#C6CCDA, #C6CCDA) 3px 4px / 10px 3px no-repeat,
    linear-gradient(#D5DAE5, #D5DAE5) 3px 11px / 16px 2px no-repeat,
    linear-gradient(#D5DAE5, #D5DAE5) 3px 15px / 12px 2px no-repeat,
    linear-gradient(#D5DAE5, #D5DAE5) 3px 19px / 14px 2px no-repeat,
    linear-gradient(#C6CCDA, #C6CCDA) 12px 23px / 7px 2px no-repeat,
    #FFFFFF;
}
.tk__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: #ECEFF4;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6E758D;
}
.tk__state::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid #A9B0C2;
  border-top-color: transparent;
  border-radius: 50%;
}
.tk__avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--royal), var(--sky));
  color: var(--white);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tk__avatar--raw { background: #E3E7EF; color: #7E859C; }
.tk__avatar--b { background: linear-gradient(135deg, var(--royal-900), var(--royal)); }

/* outgoing: decided */
.tk--out {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--body);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 16px 32px -16px rgba(15, 31, 122, .32);
}
.tk--ok { --tint: #E7F8EF; --tint-ink: var(--ok-ink); }
.tk--warn { --tint: #FEF3E2; --tint-ink: var(--warn-ink); }
.tk--bad { --tint: #FEECEB; --tint-ink: var(--bad-ink); }
.tk--info { --tint: var(--canvas-2); --tint-ink: var(--royal-700); }
.tk--out .tk__title { color: var(--ink); }
.tk--out .tk__meta { color: var(--muted); }
.tk__icon { border-radius: 10px; background: var(--tint); color: var(--tint-ink); }
.tk__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--tint-ink);
  font-size: .6875rem;
  font-weight: 600;
}
.tk__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk__match { position: relative; flex: none; width: 46px; height: 36px; }
.tk__match i {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 28px;
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px -2px rgba(15, 31, 122, .35);
}
.tk__match i:first-child {
  left: 0;
  background:
    radial-gradient(circle at 50% 40%, #C4CAD8 0 4.5px, rgba(196, 202, 216, 0) 5px),
    radial-gradient(ellipse at 50% 112%, #C4CAD8 0 42%, rgba(196, 202, 216, 0) 44%),
    #EEF1F6;
}
.tk__match i:last-child {
  right: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .92) 0 4.5px, rgba(255, 255, 255, 0) 5px),
    radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, .92) 0 42%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, var(--royal), var(--sky));
}
.tk--decision {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  height: auto;
  padding: 10px 11px 10px 10px;
}
.tk__row { display: flex; align-items: center; gap: 12px; }
.tk__row .tk__pill { margin-left: auto; }
.tk__checks { display: flex; gap: 5px; padding-top: 9px; border-top: 1px solid var(--line); }
.tk__checks span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: 6px;
  background: #F1FBF5;
  color: var(--ok-ink);
  font-size: .6875rem;
  font-weight: 500;
}
.tk__checks .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.tk__checks .is-flag { background: #FEF3E2; color: var(--warn-ink); }

/* without JS: a still frame */
.no-js .tk--in:nth-child(-n+3),
.no-js .tk--out:nth-child(-n+3) { --o: 1; }
.no-js .tk--in:nth-child(1) { --x: -300px; }
.no-js .tk--in:nth-child(2) { --x: -500px; --y: -104px; --r: 5deg; }
.no-js .tk--in:nth-child(3) { --x: -430px; --y: 96px; --r: -4deg; }
.no-js .tk--out:nth-child(1) { --x: 480px; --y: -100px; --r: -5deg; }
.no-js .tk--out:nth-child(2) { --x: 330px; --y: 94px; --r: 3deg; }
.no-js .tk--out:nth-child(3) { --x: 330px; }

/* keyboard-only pause control (hover over a card also pauses) */
.cp__pause {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  z-index: 6;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.cp__pause:focus-visible { opacity: 1; pointer-events: auto; }
.cp__pause[hidden] { display: none; }

/* ---------- the dome: nine checks ---------- */
.dome-section { position: relative; z-index: 1; margin-top: calc((var(--cp-h) - var(--cy)) * -1); overflow-x: clip; }
.dome {
  position: relative;
  padding-top: var(--flare-h);
  padding-bottom: var(--dome-pb);
}
.flare {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M498.6 0C498.6 300 491 520 441 660C391 800 200 930 0 985V1000H1000V985C800 930 609 800 559 660C509 520 501.4 300 501.4 0Z'/%3E%3C/svg%3E") top center / 100% var(--flare-h) no-repeat, linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--flare-h) + 2px) no-repeat;
}
.flare__placeholder,
.flare__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.flare__video { object-fit: cover; }
.flare__placeholder {
  background:
    radial-gradient(ellipse 18% 36% at 50% 0%, rgba(125, 214, 255, .55), rgba(26, 155, 244, 0) 72%),
    linear-gradient(180deg, #2E57F1 0%, #2547E9 26%, #2040DA 48%, #1B36C4 100%);
}
.flare__flutes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .065) 0, rgba(255, 255, 255, 0) 22px, rgba(8, 18, 110, .18) 58px, rgba(255, 255, 255, .065) 64px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 55%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, #000 55%);
}
.flare__stream {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(560px, 70%);
  height: var(--flare-h);
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(170, 232, 255, 0) 0 64px, rgba(170, 232, 255, .28) 86px, rgba(170, 232, 255, 0) 104px);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 18%, transparent 72%);
}
.flare__glow {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.flare__glow--neck {
  top: -60px;
  width: 360px;
  height: calc(var(--flare-h) * .92);
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(150, 225, 255, .55), rgba(100, 244, 248, 0));
  filter: blur(18px);
}
.flare__glow--core {
  bottom: calc(var(--dome-pb) - 260px);
  width: min(1100px, 120%);
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(100, 244, 248, .22), rgba(26, 155, 244, .1) 55%, rgba(26, 155, 244, 0));
  filter: blur(24px);
}
.flare__ribs {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--flare-h) * .25);
}
.rib { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 1.2; }
.rib--strong { stroke: rgba(255, 255, 255, .3); }
.rib--band { fill: rgba(255, 255, 255, .06); stroke: none; }
.flare::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--dome-pb) + 60px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(180, 200, 255, .5) 42%, rgba(236, 241, 255, .95) 72%, #FFFFFF 100%);
}
.dome__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--flare-h) * -.05);
  text-align: center;
}
.dome__intro {
  margin-top: 18px;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: rgba(255, 255, 255, .88);
}
.dome :focus-visible { outline-color: var(--white); }

.dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.25vw, 18px);
  margin-top: 40px;
  padding-top: 64px;
}
.dock__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.8vw, 68px);
  height: clamp(52px, 4.8vw, 68px);
  padding: 0;
  border: 0;
  border-radius: 30%;
  color: var(--white);
  background: var(--tile-bg);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 -8px 14px rgba(8, 16, 90, .25),
    0 12px 24px -10px rgba(4, 10, 60, .65);
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dock__tile::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, 0) 54%);
  pointer-events: none;
}
.dock__icon { position: relative; z-index: 1; display: grid; }
.dock__icon .ico { width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); stroke-width: 1.6; }
.dock__tile--1 { --tile-bg: linear-gradient(160deg, #6A96FF, #2547E9); }
.dock__tile--2 { --tile-bg: linear-gradient(160deg, #44C8FA, #1A74E4); }
.dock__tile--3 { --tile-bg: linear-gradient(160deg, #3D5EF2, #0F1F7A); }
.dock__tile--4 { --tile-bg: linear-gradient(160deg, #5FDDF3, #1A8DEB); }
.dock__tile--5 { --tile-bg: linear-gradient(160deg, #4B78FF, #1B36C4); }
.dock__tile--6 { --tile-bg: linear-gradient(160deg, #36B4F7, #2547E9); }
.dock__tile--7 { --tile-bg: linear-gradient(160deg, #3FD3EC, #1A7FE8); }
.dock__tile--8 { --tile-bg: linear-gradient(160deg, #2E53F0, #0F1F7A); }
.dock__tile--9 { --tile-bg: linear-gradient(160deg, #5A9BFF, #2547E9); }
.dock__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 10px 24px -10px rgba(4, 10, 60, .55);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .2s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.dock__label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  background: var(--white);
  transform: translate(-50%, -4px) rotate(45deg);
  border-radius: 1px;
}
.dock__tile:hover { transform: translateY(-8px); }
.dock__tile[aria-pressed="true"] {
  transform: translateY(-18px) scale(1.12);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 0 0 2px rgba(255, 255, 255, .95),
    0 0 0 8px rgba(255, 255, 255, .16),
    0 22px 36px -12px rgba(4, 10, 60, .75);
}
.dock__tile[aria-pressed="true"] .dock__label,
.dock__tile:hover .dock__label,
.dock__tile:focus-visible .dock__label { opacity: 1; transform: translate(-50%, 0); }
.dock__tile[aria-pressed="true"] .dock__label { transform: translate(-50%, 0) scale(.893); transform-origin: 50% 100%; }
.dock:hover .dock__tile[aria-pressed="true"]:not(:hover) .dock__label,
.dock:focus-within .dock__tile[aria-pressed="true"]:not(:focus-visible):not(:hover) .dock__label { opacity: 0; }
.dock__tile:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: 30%; }

.showcase-wrap {
  position: relative;
  z-index: 2;
  margin-top: calc((var(--dome-pb) - 64px) * -1);
}
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(10, 14, 31, .05);
  overflow: hidden;
}
.showcase__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 56px);
}
.showcase__panel:not([hidden]) { margin-top: auto; }
.showcase__meta { display: flex; align-items: center; gap: 14px; }
.showcase__ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--white);
  background: var(--tile-bg);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(8, 16, 90, .22), 0 10px 22px -10px rgba(15, 31, 122, .6);
}
.showcase__ico::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 52%);
}
.showcase__ico .ico { position: relative; width: 24px; height: 24px; }
.showcase__panel p:not(.mono-tag) { max-width: 34ch; font-size: 1.0625rem; color: var(--body); }
.showcase__title {
  margin: 18px 0 12px;
  font-size: clamp(1.875rem, 1.2rem + 1.5vw, 2.625rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.05;
  color: var(--ink);
}
.showcase__copy .link-arrow { margin-top: 18px; }
.showcase__note {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
}
.showcase__note .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--royal); }
.showcase__stage {
  display: grid;
  align-items: center;
  padding: clamp(16px, 3vw, 36px);
  background-color: var(--canvas);
  background-image: radial-gradient(circle, #DCE1EC 1px, transparent 1.3px);
  background-size: 18px 18px;
  border-left: 1px solid var(--line);
}

/* session card (light product UI) */
.session {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 24px 48px -28px rgba(15, 31, 122, .38);
  font-size: .8125rem;
  color: var(--body);
}
.session__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.session__who { min-width: 0; }
.session__name { font-size: .9375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.session__doc { font-size: .8125rem; color: var(--muted); }
.session__head .pill { margin-left: auto; }
.session__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--muted);
}
.session__rows { list-style: none; padding: 6px 8px; }
.srow {
  display: grid;
  grid-template-columns: 28px minmax(0, 118px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color .25s, box-shadow .25s;
}
.srow__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--canvas); color: var(--royal); }
.srow__ico .ico { width: 15px; height: 15px; }
.srow__name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__res { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.srow.is-active { background: var(--canvas-2); box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .28); }
.srow.is-active .srow__ico { background: var(--royal); color: var(--white); }
.session__decision {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 14px 0;
  padding: 12px 14px;
  border: 1px solid #CDEFDB;
  border-radius: 12px;
  background: linear-gradient(90deg, #ECFDF3, #F6FCF8);
}
.session__decision p { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.session__dlabel {
  margin-right: 8px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ok-ink);
}
.session__seal { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: var(--white); }
.session__seal .ico { width: 15px; height: 15px; stroke-width: 2.4; }
.session__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  font-size: .75rem;
  color: var(--muted);
}
.session__foot > span:first-child { white-space: nowrap; }
.session__mrz { min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--mono); letter-spacing: .08em; color: #B9BFCE; }


/* checkpoint motion (only when allowed) */
@media (prefers-reduced-motion: no-preference) {
  .cp__stage { animation: cp-fade 1.2s ease .35s both; }
  .cp__orbit--inner, .cp__rings::before { animation: cp-spin 4.8s linear infinite; }
  .cp__orbit--outer { animation: cp-spin 80s linear infinite reverse; }
  .cp__glow { animation: cp-breathe 4.2s ease-in-out infinite; }
  .cp__beam::before { animation: cp-beam 1.1s linear infinite; }
  .cp__hud-label::before { animation: cp-live 1.6s ease-in-out infinite; }
  .tk__state::before { animation: cp-turn 1s linear infinite; }
  .flare__stream { animation: cp-stream 2.6s linear infinite; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@keyframes cp-fade { from { opacity: .45; } to { opacity: 1; } }
@keyframes cp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cp-turn { to { transform: rotate(360deg); } }
@keyframes cp-breathe { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.1); } }
@keyframes cp-beam { to { background-position: 0 46px; } }
@keyframes cp-stream { to { background-position: 0 104px; } }
@keyframes cp-live { 50% { box-shadow: 0 0 0 5px rgba(26, 155, 244, .06); } }

/* checkpoint responsive */
@media (max-width: 1100px) {
  :root { --tile: 88px; --cy: 170px; --cp-h: 344px; --steps-dy: 142px; }
}
@media (max-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .showcase__stage { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  :root {
    --cp-h: 292px;
    --cy: 138px;
    --tile: 72px;
    --steps-dy: 106px;
    --beam-extra: 200px;
    --flare-h: 380px;
    --dome-pb: 170px;
  }
  .cp__steps { display: flex; justify-content: center; }
  .cp__step { display: none; }
  .cp__hud { gap: 9px; padding-right: 14px; font-size: .75rem; }
  .cp__hud-name { min-width: 8.6em; }
  .no-js .tk { --s: .72; }
  .no-js .tk--in:nth-child(1) { --x: -150px; }
  .no-js .tk--in:nth-child(2) { --x: -230px; --y: -64px; }
  .no-js .tk--in:nth-child(3) { --x: -220px; --y: 64px; }
  .no-js .tk--out:nth-child(1) { --x: 220px; --y: -64px; --r: 0deg; }
  .no-js .tk--out:nth-child(2) { --x: 220px; --y: 64px; --r: 0deg; }
  .no-js .tk--out:nth-child(3) { --x: 160px; }
  .dome__content { margin-top: 8px; }
  .dock {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px 8px;
    width: 100%;
    max-width: 360px;
    margin-top: 36px;
    padding: 0 0 36px;
  }
  .dock__tile { width: 60px; height: 60px; margin-inline: auto; }
  .dock__icon .ico { width: 25px; height: 25px; }
  .dock__tile:hover { transform: none; }
  .dock__tile[aria-pressed="true"] { transform: none; }
  .dock__label,
  .dock__tile[aria-pressed="true"] .dock__label,
  .dock__tile:hover .dock__label,
  .dock__tile:focus-visible .dock__label,
  .dock:hover .dock__tile[aria-pressed="true"]:not(:hover) .dock__label,
  .dock:focus-within .dock__tile[aria-pressed="true"]:not(:focus-visible):not(:hover) .dock__label {
    top: calc(100% + 8px);
    bottom: auto;
    width: 104px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: rgba(255, 255, 255, .92);
    font-size: .75rem;
    white-space: normal;
    text-align: center;
    opacity: 1;
    transform: translateX(-50%);
  }
  .dock__label::after { display: none; }
  .dock__tile[aria-pressed="true"] .dock__label { color: var(--white); font-weight: 600; }
  .flare::after { height: calc(var(--dome-pb) + 40px); }
  .showcase-wrap { margin-top: calc((var(--dome-pb) - 24px) * -1); }
  .showcase { border-radius: 22px; }
  .srow { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 2px; }
  .srow__ico { grid-row: span 2; width: 26px; height: 26px; }
  .srow__name { grid-column: 2; }
  .srow__res { grid-column: 2; grid-row: 2; font-size: .75rem; color: var(--muted); }
  .srow .pill { grid-column: 3; grid-row: 1 / span 2; }
  .session__foot { flex-direction: column; gap: 4px; }
  .session__decision p { font-size: .875rem; }
}
@media (max-width: 420px) {
  .hero--cp .hero__ctas .btn { width: 100%; }
}
@media (max-width: 767px) {
  .showcase__stage { padding: 10px; }
}

/* ---------- hero v2: split intro, animation moved up, one continuous beam ---------- */
.hero--cp .hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px clamp(36px, 5vw, 88px);
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  padding: 148px 0 0;
  text-align: left;
}
.hero__lead { display: flex; flex-direction: column; align-items: flex-start; }
.hero--cp .hero__title { margin-top: 22px; font-size: clamp(46px, 6.1vw, 94px); line-height: .98; }
.hero__aside { padding-bottom: 8px; }
.hero--cp .hero__sub { max-width: 46ch; margin-top: 0; }
.hero--cp .hero__ctas { justify-content: flex-start; margin-top: 28px; }
.hero--cp .hero__reassure { justify-content: flex-start; margin-top: 20px; }
.hero--cp .cp { margin-top: clamp(36px, 4.4vw, 64px); }

.cp__beam {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2547E9 0%, #3D66F6 55%, rgba(61, 102, 246, 0) 100%);
  box-shadow: 0 0 16px 2px rgba(37, 71, 233, .26), 0 0 40px 8px rgba(26, 155, 244, .1);
}
.cp__beam::before { content: none; }
.cp__beam::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: calc(var(--tile) / 2);
  bottom: 28%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(190, 244, 255, .9) 70%, rgba(100, 244, 248, 0) 100%);
  box-shadow: 0 0 18px 4px rgba(100, 244, 248, .42);
  opacity: var(--glow, 0);
  transform: scaleY(var(--fill, 0));
  transform-origin: top center;
}
.flare__ribs {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 44%, #000 72%);
}

@media (max-width: 900px) {
  .hero--cp .hero__split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .hero__aside { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .hero--cp .hero__split { padding: 112px 0 0; }
}
@media (max-width: 560px) {
  .hero--cp .hero__reassure { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero--cp .hero__reassure li::before,
  .hero--cp .hero__reassure li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 50%; background: var(--royal); }
}

/* ---------- hero v3: a calm grid. Straight rows, one card size, room to breathe ---------- */
.hero--cp .hero__split {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px clamp(40px, 6vw, 96px);
  padding-top: 156px;
}
.hero__aside { justify-self: end; width: 100%; max-width: 470px; padding-bottom: 12px; }
.hero--cp .hero__sub { max-width: none; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.62; }
.hero--cp .hero__ctas { margin-top: 30px; }
.hero--cp .hero__reassure { gap: 10px 22px; margin-top: 22px; font-size: 14px; }
.hero--cp .hero__reassure li::before,
.hero--cp .hero__reassure li + li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  background: var(--canvas-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232547E9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}
.hero--cp .cp { margin-top: clamp(56px, 6vw, 88px); }

:root { --cp-h: 330px; --cy: 186px; --steps-dy: 156px; }
.cp__steps { width: min(100% - 2 * var(--gutter), var(--container)); }
.cp__step-sub { display: none; }
.cp__tokens {
  left: 50%;
  right: auto;
  width: min(100%, 1360px);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
}
.tk { width: 252px; height: 60px; gap: 12px; padding: 0 12px; border-radius: 16px; }
.tk__body { flex: 1; min-width: 0; }
.tk__title,
.tk__meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk--in { border: 1px solid #E4E8F0; background: #F8F9FC; }
.tk__state { margin-left: 0; }
.tk__pill { margin-left: 0; }
.cp__orbit--inner,
.cp__rings::before { width: calc(var(--tile) * 1.7); height: calc(var(--tile) * 1.7); }
.cp__glow { width: calc(var(--tile) * 2.6); height: calc(var(--tile) * 2.6); }

@media (max-width: 1100px) {
  :root { --cp-h: 312px; --cy: 176px; --steps-dy: 146px; }
  .hero--cp .hero__split { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
  .hero__aside { justify-self: start; max-width: 560px; padding-bottom: 0; }
}
@media (max-width: 767px) {
  :root { --cp-h: 262px; --cy: 136px; --steps-dy: 108px; }
  .hero--cp .hero__split { padding-top: 112px; }
  .hero--cp .cp { margin-top: 40px; }
  .cp__tokens {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
}
.no-js .tk--in:nth-child(1) { --x: -300px; --y: 0px; --r: 0deg; }
.no-js .tk--in:nth-child(2) { --x: -470px; --y: -78px; --r: 0deg; }
.no-js .tk--in:nth-child(3) { --x: -390px; --y: 78px; --r: 0deg; }
.no-js .tk--out:nth-child(1) { --x: 470px; --y: -78px; --r: 0deg; }
.no-js .tk--out:nth-child(2) { --x: 390px; --y: 78px; --r: 0deg; }
.no-js .tk--out:nth-child(3) { --x: 300px; --y: 0px; --r: 0deg; }
/* v3.1: cards sized to their content, spinner instead of a pill, balanced intro */
.tk--in { width: 262px; }
.tk--out { width: 290px; }
.tk__state { flex: none; width: 14px; height: 14px; padding: 0; margin-left: 4px; background: none; }
.tk__state::before { width: 12px; height: 12px; border-width: 1.6px; }
.hero__aside { max-width: 520px; }
.hero--cp .hero__sub { font-size: 16.5px; }
.hero--cp .hero__reassure { gap: 8px 18px; font-size: 13.5px; }
@media (min-width: 1101px) {
  .hero--cp .hero__reassure { flex-wrap: nowrap; white-space: nowrap; }
}

/* ==========================================================================
   Hero v4: dark menu that inverts over dark sections, a livelier badge,
   an animated blueprint background, check icons in the status pill,
   and a separator line that carries the 01 · 02 · 03 captions.
   ========================================================================== */

/* ---------- menu: white frosted glass. Over dark or royal sections the glass
   thickens so the dark text keeps its contrast ---------- */
.brand img { width: auto; height: 26px; }
.nav-pill {
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(10, 14, 31, .04),
    0 0 0 1px rgba(10, 14, 31, .06),
    0 1px 2px rgba(10, 14, 31, .04),
    0 14px 36px -16px rgba(15, 31, 122, .22);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled .nav-pill {
  background: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(10, 14, 31, .04),
    0 0 0 1px rgba(10, 14, 31, .06),
    0 2px 4px rgba(10, 14, 31, .04),
    0 20px 44px -18px rgba(15, 31, 122, .3);
}
.site-header.is-inverted .nav-pill {
  background: rgba(255, 255, 255, .86);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(255, 255, 255, .35),
    0 20px 44px -18px rgba(4, 10, 60, .5);
}
.nav-pill .primary-nav a,
.nav-pill .nav-signin { color: var(--ink-2); transition: color .3s, background-color .3s; }
.nav-pill .primary-nav a:hover,
.nav-pill .nav-signin:hover { background: rgba(10, 14, 31, .05); color: var(--ink); }
.nav-pill :focus-visible { outline-color: var(--royal); }
.nav-pill .menu-toggle { border-color: rgba(10, 14, 31, .08); background: rgba(255, 255, 255, .7); }
.nav-pill .menu-toggle__bars,
.nav-pill .menu-toggle__bars::before { background: var(--ink); }
.mobile-menu {
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10, 14, 31, .06), 0 24px 50px -20px rgba(15, 31, 122, .3);
}

/* ---------- badge: dark pill, rotating audience ---------- */
.badge--live {
  position: relative;
  gap: 11px;
  padding: 5px 18px 5px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #121833, #080B1A);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 30px -14px rgba(7, 10, 23, .55);
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}
.badge--live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-100%);
  pointer-events: none;
}
.badge__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4A74FF, #2547E9 55%, #1A9BF4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 0 0 3px rgba(37, 71, 233, .22);
  color: #fff;
}
.badge__icon .ico { width: 15px; height: 15px; stroke-width: 1.9; }
.badge__text { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.badge__rotator { position: relative; display: inline-grid; }
.badge__word {
  grid-area: 1 / 1;
  color: var(--cyan);
  font-weight: 600;
  opacity: 0;
  transform: translateY(70%);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.badge__word.is-active { opacity: 1; transform: none; }
.badge__word.is-leaving { opacity: 0; transform: translateY(-70%); }

/* ---------- hero background: soft aurora + blueprint grid with a scanning light ---------- */
.hero--cp { isolation: isolate; }
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #F2F5FF 0%, #F8FAFF 38%, #FFFFFF 78%);
  pointer-events: none;
}
.hero__aurora { position: absolute; border-radius: 50%; }
.hero__aurora--a { left: -12%; top: -18%; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(100, 244, 248, .38), rgba(100, 244, 248, 0) 70%); }
.hero__aurora--b { right: -14%; top: -10%; width: 58vw; height: 58vw; max-width: 860px; max-height: 860px; background: radial-gradient(closest-side, rgba(37, 71, 233, .2), rgba(37, 71, 233, 0) 70%); }
.hero__aurora--c { left: 30%; top: 26%; width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, rgba(26, 155, 244, .16), rgba(26, 155, 244, 0) 70%); }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 71, 233, .07) 1px, rgba(37, 71, 233, 0) 1px),
    linear-gradient(90deg, rgba(37, 71, 233, .07) 1px, rgba(37, 71, 233, 0) 1px);
  background-size: 64px 64px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 34%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 34%, #000 25%, transparent 78%);
}
.hero__grid--scan {
  background-image:
    linear-gradient(rgba(26, 155, 244, .5) 1px, rgba(26, 155, 244, 0) 1px),
    linear-gradient(90deg, rgba(26, 155, 244, .5) 1px, rgba(26, 155, 244, 0) 1px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
  -webkit-mask-size: 100% 240px;
  mask-size: 100% 240px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 -240px;
  mask-position: 0 -240px;
  opacity: .55;
}

/* ---------- separator: one hairline carries the three captions ---------- */
.cp__steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, rgba(10, 14, 31, 0), rgba(10, 14, 31, .12) 6%, rgba(10, 14, 31, .12) 94%, rgba(10, 14, 31, 0));
}
.cp__steps { isolation: isolate; }
.cp__step {
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04);
}
.cp__step .cp__num { height: 22px; border-radius: 999px; }

/* ---------- status pill: the icon follows the check being run ---------- */
.cp__hud { gap: 10px; }
.cp__hud-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--canvas-2);
  color: var(--royal);
}
.cp__hud-ico .ico { width: 15px; height: 15px; stroke-width: 1.8; }
.cp__hud-label { padding-left: 0; }
.cp__hud-label::before { content: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero__aurora--a { animation: aurora-a 22s ease-in-out infinite alternate; }
  .hero__aurora--b { animation: aurora-b 26s ease-in-out infinite alternate; }
  .hero__aurora--c { animation: aurora-c 30s ease-in-out infinite alternate; }
  .hero__grid--scan { animation: grid-scan 7s cubic-bezier(.45, 0, .55, 1) infinite; }
  .badge--live::after { animation: sheen 5s ease-in-out 1.2s infinite; }
}
@keyframes aurora-a { to { transform: translate(8vw, 6vh) scale(1.08); } }
@keyframes aurora-b { to { transform: translate(-7vw, 8vh) scale(1.12); } }
@keyframes aurora-c { to { transform: translate(-10vw, -4vh) scale(.92); } }
@keyframes grid-scan { from { -webkit-mask-position: 0 -240px; mask-position: 0 -240px; } to { -webkit-mask-position: 0 900px; mask-position: 0 900px; } }
@keyframes sheen { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }

@media (max-width: 767px) {
  .badge--live { font-size: 13px; }
  .hero__grid { background-size: 44px 44px; }
}
/* grid lives in the intro area only; the illustration below stays clean */
.hero__grids {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 16%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 62% at 50% 16%, #000 30%, transparent 70%);
}
.hero__grids .hero__grid:not(.hero__grid--scan) { -webkit-mask-image: none; mask-image: none; }
.hero__grid { background-image: linear-gradient(rgba(37, 71, 233, .06) 1px, rgba(37, 71, 233, 0) 1px), linear-gradient(90deg, rgba(37, 71, 233, .06) 1px, rgba(37, 71, 233, 0) 1px); }
@keyframes grid-scan { from { -webkit-mask-position: 0 -240px; mask-position: 0 -240px; } to { -webkit-mask-position: 0 640px; mask-position: 0 640px; } }

/* ---------- hero v5: guilloche background, a beam that is part of the flare, richer intro copy ---------- */
.hero__bg { background: linear-gradient(180deg, #F4F7FF 0%, rgba(244, 247, 255, .6) 40%, rgba(255, 255, 255, 0) 70%); }
.hero__canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--canvas-h, 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* the beam is the flare's own neck now; only the light that runs down it is drawn here */
.cp__beam { width: 4px; background: none; box-shadow: none; }
.cp__beam::after {
  left: 0;
  right: 0;
  top: calc(var(--tile) / 2 - 8px);
  bottom: 30%;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(200, 246, 255, .85) 65%, rgba(100, 244, 248, 0) 100%);
  box-shadow: 0 0 10px 2px rgba(100, 244, 248, .45);
}

/* intro copy: key words carry icons, the promise is highlighted, the audience line is quieter */
.hero--cp .hero__sub { color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.8; }
.kw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 7px;
  border: 1px solid rgba(37, 71, 233, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .05);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.65;
  white-space: nowrap;
}
.kw .ico { width: 15px; height: 15px; color: var(--royal); stroke-width: 1.8; }
.mark {
  padding: 0 2px;
  color: var(--ink);
  font-weight: 600;
  background-image: linear-gradient(transparent 60%, rgba(100, 244, 248, .55) 60%, rgba(100, 244, 248, .55) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__sub-quiet { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .mark { animation: mark-in 1.1s cubic-bezier(.65, 0, .35, 1) .9s both; }
}
@keyframes mark-in { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.hero__canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.kw { margin: 0 1px; }

/* ---------- hero v6: one continuous surface, one hairline, balanced spacing ---------- */
/* one continuous surface: no tint, no band edge. The halftone canvas fades out
   toward the dome on its own; the hairline between the step pills stays. */
.hero__bg { top: 0; bottom: 0; border-bottom: 0; background: none; }

/* one rhythm: 80px nav → intro, 80px intro → step pills, 48px border → cards.
   Both intro columns share a top and a bottom edge. */
:root { --cp-h: 350px; --cy: 206px; --steps-dy: 176px; }
.hero--cp .hero__split { padding-top: calc(var(--header-space) + 80px); align-items: stretch; }
.hero__lead { justify-content: space-between; }
.hero__aside { padding-bottom: 6px; }
.hero--cp .cp { margin-top: 70px; }

/* key words in bold, the promise highlighted */
.kw { display: inline; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); font-weight: 650; line-height: inherit; }
.hero--cp .hero__sub { line-height: 1.7; }

/* shorter neck: the dome arrives sooner, no empty band beside the beam */
:root { --flare-h: clamp(270px, 20vw, 300px); --beam-extra: calc(var(--flare-h) * .68); }
.dome__content { margin-top: 44px; }

@media (max-width: 1100px) {
  :root { --cp-h: 332px; --cy: 196px; --steps-dy: 166px; }
  .hero--cp .hero__split { padding-top: calc(var(--header-space) + 64px); }
  .hero--cp .cp { margin-top: 54px; }
}
@media (max-width: 767px) {
  :root { --cp-h: 272px; --cy: 146px; --steps-dy: 118px; }
  .hero--cp .hero__split { padding-top: calc(var(--header-space) + 44px); }
  .hero--cp .cp { margin-top: 44px; }
}

/* ---------- hero v7: an animated halftone instead of the plus pattern ---------- */
.hero__dots {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: #CBD3E3;
}

/* ==========================================================================
   Checks: the flow composer. People pick checks, reorder them, watch one
   verification run through the flow, and see the price per verification and
   per month. Frosted glass panes over moving light (js/checks-bg.js).
   ========================================================================== */
.checks .dome { padding-bottom: 170px; }
.checks .dome__content { margin-top: 44px; }
.checks .flare::after { height: 220px; }
.checks-bg { background: linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C 100%); }
.checks-bg__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.checks .flare__glow--neck { z-index: 1; }
.checks__stage { position: relative; z-index: 1; margin-top: 44px; }

/* shared: a 1px gradient edge drawn on a pseudo-element, so translucent fills stay clear */
.composer__edge,
.composer__top::before,
.pick::before,
.composer__sum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 36%, rgba(255, 255, 255, .03) 64%, rgba(100, 244, 248, .26));
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}

/* --- the glass sheet --- */
.composer {
  --mx: 50%;
  --my: 0%;
  position: relative;
  padding: 28px;
  border-radius: 34px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) 60%, rgba(120, 160, 255, .05));
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  backdrop-filter: blur(30px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .02), 0 60px 120px -50px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(37, 71, 233, .45);
  color: #fff;
}
.composer > :not(.composer__shine):not(.composer__edge) { position: relative; z-index: 1; }
.composer__edge { z-index: 2; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(170, 248, 255, .95), rgba(170, 248, 255, 0) 45%), linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 36%, rgba(255, 255, 255, .03) 64%, rgba(100, 244, 248, .26)); }
.composer__shine { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(760px circle at var(--mx) var(--my), rgba(110, 160, 255, .12), rgba(110, 160, 255, 0) 50%); pointer-events: none; }
.composer__shine::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, 0));
  transform: skewX(-12deg);
  animation: composer-sheen 11s cubic-bezier(.45, 0, .2, 1) 2s infinite;
}
@keyframes composer-sheen { 0% { left: -40%; } 38%, 100% { left: 120%; } }

/* --- the flow platter --- */
.composer__top {
  position: relative;
  padding: 20px 26px 16px;
  border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(100, 244, 248, .07), rgba(100, 244, 248, 0) 60%), linear-gradient(180deg, rgba(6, 12, 44, .55), rgba(6, 10, 34, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -30px 60px -40px rgba(37, 71, 233, .35), 0 20px 40px -24px rgba(0, 0, 0, .7);
}
.composer__top > * { position: relative; z-index: 1; }
.composer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.composer__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.composer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: composer-dot 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes composer-dot { 0% { box-shadow: 0 0 0 0 rgba(100, 244, 248, .55); } 70%, 100% { box-shadow: 0 0 0 11px rgba(100, 244, 248, 0); } }
.composer__hint { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .6); }

/* example flows: a segmented control with a sliding highlight */
.composer__presets { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.preset__glider { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #E8EEFF); box-shadow: 0 6px 16px -6px rgba(100, 244, 248, .55), inset 0 -1px 0 rgba(37, 71, 233, .15); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.25, .5, 1), width .5s cubic-bezier(.3, 1.25, .5, 1), opacity .3s; pointer-events: none; }
.preset { position: relative; z-index: 1; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .8); font: 600 12.5px/1 var(--font); cursor: pointer; transition: color .35s, background-color .25s; }
.preset:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.preset:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.preset[aria-pressed="true"] { color: var(--ink); background: none; }
.composer:not(.has-glider) .preset[aria-pressed="true"] { background: #fff; }

/* the steps */
.cflow__track { position: relative; margin-top: 30px; }
.cflow { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 0 4px; list-style: none; }
.cflow__node { --fill: 0; position: relative; z-index: 1; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 84px; gap: 8px; text-align: center; }
.cflow__node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 35px;
  z-index: -1;
  width: calc(100% + 8px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #C6FCFF 0, #64F4F8 calc(var(--fill) * 100% - 1px), rgba(125, 150, 255, .26) calc(var(--fill) * 100%));
}
.cflow__node.is-done:not(:last-child)::after { box-shadow: 0 0 12px rgba(100, 244, 248, .35); }
.cflow__node.is-new { animation: cflow-pop .6s cubic-bezier(.3, 1.35, .5, 1) both; }
.cflow__node.is-leaving { animation: cflow-leave .22s ease-in both; pointer-events: none; }
@keyframes cflow-pop { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes cflow-leave { to { opacity: 0; transform: scale(.7); } }
.cflow__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(120, 150, 255, .34), rgba(40, 60, 190, .3) 60%, rgba(26, 155, 244, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -12px 22px rgba(8, 16, 80, .35), 0 16px 30px -14px rgba(0, 0, 0, .85);
  transition: box-shadow .5s var(--ease), border-color .5s, transform .5s cubic-bezier(.3, 1.3, .5, 1), background .5s;
}
.cflow__tile::after { content: ""; position: absolute; inset: 1px 1px 50%; border-radius: 21px 21px 40% 40% / 21px 21px 12px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); pointer-events: none; }
.cflow__node[data-check] .cflow__tile { cursor: grab; touch-action: none; }
.cflow__node[data-check]:hover .cflow__tile { transform: translateY(-3px); border-color: rgba(255, 255, 255, .4); }
.cflow__tile > .ico { position: relative; z-index: 1; width: 26px; height: 26px; color: #fff; }
.cflow__tile::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(100, 244, 248, 0), rgba(100, 244, 248, .95) 72%, rgba(255, 255, 255, .95) 74%, rgba(100, 244, 248, 0) 75%);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s, transform .4s var(--ease);
  pointer-events: none;
}
.cflow__node.is-run .cflow__tile::before { opacity: 1; transform: none; animation: cflow-spin .9s linear infinite; }
@keyframes cflow-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.cflow__node.is-run .cflow__tile { transform: scale(1.06); border-color: rgba(170, 245, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 6px rgba(100, 244, 248, .12), 0 0 36px rgba(100, 244, 248, .5); }
.cflow__node.is-done .cflow__tile { border-color: rgba(170, 240, 255, .55); background: linear-gradient(160deg, #5B82FF, #2547E9 55%, #1A8CF0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -12px 22px rgba(8, 16, 80, .3), 0 14px 30px -12px rgba(37, 71, 233, .9); animation: cflow-done .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cflow-done { 0% { transform: scale(1.06); } 45% { transform: scale(.94); } 100% { transform: none; } }
.cflow__node--start .cflow__tile { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); }
.cflow__node--start .avatar { position: relative; z-index: 1; width: 42px; height: 42px; font-size: 13px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.cflow__node--end .cflow__tile { border-radius: 50%; background: linear-gradient(160deg, #5B82FF, #2547E9 55%, #1A9BF4); }
.cflow__node--end .cflow__tile::after { border-radius: 50% 50% 40% 40%; }
.cflow__name { font-size: 13px; font-weight: 600; line-height: 1.25; color: #fff; }
.cflow__meta { display: grid; margin-top: -3px; font-family: var(--mono); font-size: 11.5px; color: rgba(255, 255, 255, .55); }
.cflow__meta > * { grid-area: 1 / 1; transition: opacity .35s var(--ease), transform .5s cubic-bezier(.3, 1.3, .5, 1), filter .35s; }
.cflow__res { color: var(--cyan); opacity: 0; transform: translateY(7px); filter: blur(3px); }
.cflow__node.is-done .cflow__price { opacity: 0; transform: translateY(-7px); filter: blur(3px); }
.cflow__node.is-done .cflow__res { opacity: 1; transform: none; filter: none; }
.cflow__tick { position: absolute; right: -7px; top: -7px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(160deg, #4ADE80, #16A34A); box-shadow: 0 0 0 3px #0B1236, 0 4px 10px rgba(22, 163, 74, .5); opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .2s, transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.cflow__tick .ico { width: 12px; height: 12px; stroke-width: 3; color: #fff; }
.cflow__node.is-done .cflow__tick { opacity: 1; transform: none; }
.cflow__remove {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: -45px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(16, 23, 58, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .5, 1), background-color .2s, border-color .2s;
}
.cflow__remove .ico { width: 12px; height: 12px; stroke-width: 2.4; }
.cflow__node:hover .cflow__remove,
.cflow__remove:focus-visible { opacity: 1; transform: none; }
.cflow__remove:hover { background: #E5484D; border-color: #E5484D; }
.cflow__remove:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: none) { .cflow__remove { opacity: .85; transform: none; } }
.cflow__node.is-drag { z-index: 5; }
.cflow__node.is-drag .cflow__tile { cursor: grabbing; transform: scale(1.1) rotate(-3deg); border-color: #fff; box-shadow: 0 0 0 6px rgba(100, 244, 248, .18), 0 30px 50px -14px rgba(0, 0, 0, .85); transition-duration: .25s; }
.cflow__node.is-drag::after { opacity: 0; }

/* the decision: glass rings, a halo when a run completes, the verdict */
.cflow__node--end::before,
.cflow__node--end::after { content: ""; position: absolute; left: 50%; top: 36px; border: 1px solid rgba(160, 220, 255, .3); border-radius: 50%; background: radial-gradient(closest-side, rgba(100, 244, 248, 0) 72%, rgba(100, 244, 248, .08)); transform: translate(-50%, -50%); pointer-events: none; transition: border-color .6s, transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.cflow__node--end::before { width: 94px; height: 94px; }
.cflow__node--end::after { width: 118px; height: 118px; border-color: rgba(160, 220, 255, .14); }
.cflow__node--end.is-done::before { border-color: rgba(120, 250, 190, .55); transform: translate(-50%, -50%) scale(1.05); }
.cflow__node--end.is-done::after { border-color: rgba(120, 250, 190, .25); transform: translate(-50%, -50%) scale(1.08); }
.cflow__node--end .cflow__name, .cflow__node--end .cflow__meta { position: relative; z-index: 1; }
.cflow__halo { position: absolute; left: 50%; top: 36px; width: 0; height: 0; }
.cflow__halo span { position: absolute; left: 0; top: 0; width: 72px; height: 72px; border: 1px solid rgba(140, 255, 200, .65); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.cflow__node--end.is-done .cflow__halo span { animation: cflow-halo 2s cubic-bezier(.2, .7, .3, 1) both; }
.cflow__node--end.is-done .cflow__halo span:nth-child(2) { animation-delay: .2s; }
.cflow__node--end.is-done .cflow__halo span:nth-child(3) { animation-delay: .4s; }
@keyframes cflow-halo { 0% { opacity: .9; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); } }
.cflow__verdict { position: absolute; top: -34px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: linear-gradient(160deg, #4ADE80, #16A34A); box-shadow: 0 6px 16px -6px rgba(34, 197, 94, .8); color: #04210F; font-size: 11.5px; font-weight: 700; opacity: 0; transform: translateY(8px) scale(.8); transition: opacity .3s, transform .55s cubic-bezier(.3, 1.6, .5, 1); }
.cflow__node--end.is-done .cflow__verdict { opacity: 1; transform: none; }
.cflow__node--end.is-done .cflow__tile { background: linear-gradient(160deg, #4ADE80, #16A34A 60%, #0E9F6E); border-color: rgba(200, 255, 220, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 6px rgba(74, 222, 128, .14), 0 0 44px rgba(74, 222, 128, .55); }

/* the pulse: a comet with a bright head */
.cflow__pulse { position: absolute; left: 0; top: 0; z-index: 2; width: 90px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(100, 244, 248, 0), rgba(160, 250, 255, .9) 80%, #fff); opacity: 0; transform: translate(var(--px, 0), var(--py, 0)); transition: opacity .25s; pointer-events: none; }
.cflow__pulse::after { content: ""; position: absolute; right: -4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(160, 250, 255, .9), 0 0 30px 8px rgba(100, 244, 248, .5); }

/* the run log */
.composer__log { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-family: var(--mono); font-size: 12.5px; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; }
.composer__log-step { flex: none; min-width: 30px; padding: 3px 7px; border-radius: 6px; background: rgba(100, 244, 248, .14); color: var(--cyan); text-align: center; transition: background-color .3s, color .3s; }
.composer__log-text { overflow: hidden; text-overflow: ellipsis; }
.composer__log.is-ok .composer__log-step { background: rgba(74, 222, 128, .2); color: #4ADE80; }
.composer__log.is-ok .composer__log-text { color: #fff; }
.composer__caret { flex: none; width: 7px; height: 14px; border-radius: 1px; background: var(--cyan); animation: composer-caret 1.1s steps(1) infinite; }
@keyframes composer-caret { 50% { opacity: 0; } }

/* --- picker: three family columns whose rows line up --- */
.composer__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 24px; }
.composer__picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); grid-auto-flow: column; gap: 8px 16px; align-content: start; }
.composer__fam { display: contents; }
.composer__fam-title { align-self: end; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pick {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "ico name price" "ico line line";
  align-items: start;
  align-content: start;
  gap: 4px 12px;
  width: 100%;
  padding: 13px 14px 14px 12px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 24px -18px rgba(0, 0, 0, .9);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .4s, box-shadow .4s, transform .45s cubic-bezier(.3, 1.3, .5, 1);
}
.pick > * { position: relative; z-index: 1; }
.pick::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(150, 200, 255, .14), rgba(150, 200, 255, 0) 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.pick:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 30px -18px rgba(0, 0, 0, .9); }
.pick:hover::after { opacity: 1; }
.pick:active { transform: scale(.985); }
.pick:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pick__ico { grid-area: ico; position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); transition: background .4s, box-shadow .4s; }
.pick__ico > .ico { width: 17px; height: 17px; }
.pick__state { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: #111A45; transition: background-color .35s, border-color .35s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.pick__state .ico { grid-area: 1 / 1; width: 10px; height: 10px; stroke-width: 2.8; transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.pick__on { opacity: 0; transform: scale(.3) rotate(-45deg); }
.pick__name { grid-area: name; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pick__price { grid-area: price; padding-top: 1px; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .76); transition: color .3s; }
.pick__line { grid-area: line; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .76); transition: color .3s; }
.pick[aria-pressed="true"] { background: linear-gradient(160deg, rgba(88, 128, 255, .34), rgba(37, 71, 233, .14) 70%, rgba(26, 155, 244, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 30px -18px rgba(37, 71, 233, .9); }
.pick[aria-pressed="true"]::before { background: linear-gradient(145deg, rgba(170, 245, 255, .7), rgba(125, 170, 255, .25) 40%, rgba(125, 170, 255, .12) 70%, rgba(100, 244, 248, .5)); }
.pick[aria-pressed="true"] .pick__ico { background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(37, 71, 233, .9); }
.pick[aria-pressed="true"] .pick__line { color: rgba(255, 255, 255, .88); }
.pick[aria-pressed="true"] .pick__price { color: #fff; }
.pick[aria-pressed="true"] .pick__state { border-color: #0A1030; background: var(--cyan); color: var(--ink); transform: scale(1.1); }
.pick[aria-pressed="true"] .pick__plus { opacity: 0; transform: scale(.3) rotate(45deg); }
.pick[aria-pressed="true"] .pick__on { opacity: 1; transform: none; }

/* --- price --- */
.composer__sum {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(120% 70% at 100% 0%, rgba(100, 244, 248, .16), rgba(100, 244, 248, 0) 60%), linear-gradient(165deg, rgba(88, 128, 255, .42), rgba(37, 71, 233, .16) 60%, rgba(26, 155, 244, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 60px -30px rgba(37, 71, 233, .8);
}
.composer__sum > * { position: relative; z-index: 1; }
.composer__sum::before { background: linear-gradient(145deg, rgba(200, 250, 255, .6), rgba(160, 190, 255, .18) 40%, rgba(160, 190, 255, .08) 70%, rgba(100, 244, 248, .45)); }
.composer__sum-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.composer__total { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.composer__amount { font-size: 58px; line-height: 1; letter-spacing: -.045em; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(100, 244, 248, .35); }
.composer__count { font-size: 14px; color: rgba(255, 255, 255, .78); }
.composer__volume { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
.composer__vol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.composer__vol-val { font-family: var(--mono); font-size: 13px; color: #fff; }
.composer__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 8px 0 0; background: transparent; cursor: pointer; }
.composer__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #64F4F8, #A5FBFF var(--fill, 33%), rgba(255, 255, 255, .16) var(--fill, 33%)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.composer__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, #DDE8FF); box-shadow: 0 0 0 6px rgba(100, 244, 248, .2), 0 6px 14px rgba(0, 0, 0, .45); transition: box-shadow .25s; }
.composer__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(100, 244, 248, .24), 0 6px 14px rgba(0, 0, 0, .45); }
.composer__range::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.composer__range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #64F4F8, #A5FBFF); }
.composer__range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(100, 244, 248, .2), 0 6px 14px rgba(0, 0, 0, .45); }
.composer__range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.composer__est { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.composer__est-val { color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.composer__sum-line { margin-top: 14px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.composer__cta { justify-content: space-between; width: 100%; margin-top: auto; padding-right: 6px; box-shadow: 0 14px 30px -12px rgba(37, 71, 233, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.composer__sum-line + .composer__cta { margin-top: 20px; }

/* --- entrance: the sheet rises, then its parts settle in turn --- */
.composer.is-armed:not(.is-in) .composer__top,
.composer.is-armed:not(.is-in) .composer__fam-title,
.composer.is-armed:not(.is-in) .pick,
.composer.is-armed:not(.is-in) .composer__sum,
.composer.is-armed:not(.is-in) .cflow__node { opacity: 0; transform: translateY(18px); }
.composer.is-armed.is-in .composer__top,
.composer.is-armed.is-in .composer__fam-title,
.composer.is-armed.is-in .pick,
.composer.is-armed.is-in .composer__sum,
.composer.is-armed.is-in .cflow__node { transition: opacity .8s var(--ease) var(--d, 0s), transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }

.checks__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; margin-top: 34px; }
.checks__link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.checks__link .ico { width: 16px; height: 16px; stroke-width: 1.9; transition: transform .25s var(--ease); }
.checks__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.checks__link:hover .ico { transform: translateX(3px); }
.checks__link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }
.checks__note { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: 14px; }
.checks__note .ico { flex: none; width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .composer__body { grid-template-columns: minmax(0, 1fr); }
  .composer__sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .composer__sum-label, .composer__total { grid-column: 1; }
  .composer__volume { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
  .composer__sum-line { grid-column: 1; }
  .composer__cta { grid-column: 1 / -1; margin-top: 20px; }
  .cflow { overflow-x: auto; padding-top: 38px; margin-top: -38px; scrollbar-width: none; }
  .cflow__node { min-width: 88px; }
}
@media (max-width: 900px) {
  .composer__picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 22px 16px; }
  .composer__fam { display: grid; gap: 8px; align-content: start; }
}
@media (max-width: 767px) {
  .composer { padding: 14px; border-radius: 28px; }
  .composer__top { padding: 18px 16px 16px; overflow: clip; }
  .composer__hint { flex-basis: 100%; }
  .composer__presets { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .composer__presets { gap: 2px; padding: 3px; }
  .preset { flex: none; padding: 0 9px; font-size: 11.5px; }
  .composer__picker { grid-template-columns: minmax(0, 1fr); }
  .composer__sum { display: flex; padding: 20px; }
  .composer__volume { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .cflow { flex-direction: column; align-items: stretch; gap: 14px; overflow: visible; padding-top: 0; margin-top: 0; }
  .cflow__node { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "tile name meta"; align-items: center; gap: 0 14px; min-width: 0; text-align: left; }
  .cflow__tile { grid-area: tile; width: 56px; height: 56px; border-radius: 17px; }
  .cflow__tile::before { inset: -9px; }
  .cflow__name { grid-area: name; font-size: 14px; }
  .cflow__meta { grid-area: meta; margin: 0; justify-items: end; }
  .cflow__node:not(:last-child)::after { left: 27px; top: 28px; width: 2px; height: calc(100% + 14px); background: linear-gradient(180deg, #C6FCFF 0, #64F4F8 calc(var(--fill) * 100% - 1px), rgba(125, 150, 255, .26) calc(var(--fill) * 100%)); }
  .cflow__node--end::before, .cflow__node--end::after, .cflow__halo { left: 28px; top: 28px; }
  .cflow__node--end::before { width: 76px; height: 76px; }
  .cflow__node--end::after { width: 98px; height: 98px; }
  .cflow__halo span { width: 56px; height: 56px; }
  .cflow__verdict { position: static; grid-area: meta; justify-self: end; }
  .cflow__node--end .cflow__meta { display: none; }
  .cflow__remove { left: 0; top: -6px; margin-left: -6px; }
  .cflow__pulse.is-v { width: 3px; height: 70px; background: linear-gradient(180deg, rgba(100, 244, 248, 0), rgba(160, 250, 255, .9) 80%, #fff); }
  .cflow__pulse.is-v::after { right: auto; left: 50%; top: auto; bottom: -4px; margin: 0 0 0 -5px; }
  .composer__amount { font-size: 46px; }
  .composer__log { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .pick { grid-template-areas: "ico name price"; align-items: center; padding: 11px 14px 11px 12px; }
  .pick__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .composer__dot, .composer__caret, .composer__shine::after, .cflow__node.is-done .cflow__tile { animation: none; }
}

/* --------------------------------------------------------------------------
   Composer, refined (2 Oct 2026): the same design with the gloss taken out.
   No sheen, no pointer light, no glows; matte glass with hairlines and a
   subtle top-to-bottom gradient. Blue is kept for the button only: a step
   that has run turns white-on-glass with a green tick, a chosen check gets a
   white icon and a green tick, the decision turns green. One short line per
   check. These rules override the ones above.
   -------------------------------------------------------------------------- */
.composer {
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  background: rgba(9, 13, 34, .58);
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .85);
}
.composer .composer__shine { display: none; }
.composer .composer__edge,
.composer .composer__top::before,
.composer .pick::before,
.composer .composer__sum::before { background: rgba(255, 255, 255, .1); }
.composer .composer__top::before { background: rgba(255, 255, 255, .07); }
.composer .pick::before { background: rgba(255, 255, 255, .07); }

/* the flow */
.composer .composer__top { background: rgba(3, 6, 20, .42); box-shadow: none; }
.composer .composer__kicker { color: rgba(255, 255, 255, .78); }
.composer .preset__glider { background: #fff; box-shadow: none; }
.composer .cflow__node:not(:last-child)::after { height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) calc(var(--fill) * 100%), rgba(255, 255, 255, .14) calc(var(--fill) * 100%)); }
.composer .cflow__node.is-done:not(:last-child)::after { box-shadow: none; }
.composer .cflow__tile { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .8); }
.composer .cflow__tile::after { display: none; }
.composer .cflow__tile > .ico { color: rgba(255, 255, 255, .86); }
.composer .cflow__node[data-check]:hover .cflow__tile { border-color: rgba(255, 255, 255, .32); }
.composer .cflow__tile::before { background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 72%, #fff 74%, rgba(255, 255, 255, 0) 75%); }
.composer .cflow__node.is-run .cflow__tile { border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 5px rgba(255, 255, 255, .06); }
.composer .cflow__node.is-done .cflow__tile { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .13); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .8); }
.composer .cflow__node.is-done .cflow__tile > .ico { color: #fff; }
.composer .cflow__node--start .cflow__tile { background: rgba(255, 255, 255, .05); }
.composer .cflow__node--start .avatar { background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff; }
.composer .cflow__node--end .cflow__tile { border-style: dashed; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .03); }
.composer .cflow__node--end::before, .composer .cflow__node--end::after { display: none; }
.composer .cflow__halo span { border-color: rgba(134, 239, 172, .5); }
.composer .cflow__node--end.is-done .cflow__tile { border: 1px solid #22C55E; background: #22C55E; box-shadow: 0 0 0 6px rgba(34, 197, 94, .12); }
.composer .cflow__node--end.is-done .cflow__tile > .ico { color: #fff; }
.composer .cflow__verdict { background: rgba(34, 197, 94, .16); box-shadow: none; color: #86EFAC; }
.composer .cflow__tick { background: #22C55E; box-shadow: 0 0 0 3px #0B1028; }
.composer .cflow__res { color: #86EFAC; }
.composer .cflow__meta { color: rgba(255, 255, 255, .5); }
.composer .cflow__remove { background: #151B38; }
.composer .cflow__pulse { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .9)); }
.composer .cflow__pulse::after { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.composer .cflow__pulse.is-v { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .9)); }
.composer .composer__log { border-top-color: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .62); }
.composer .composer__log-step { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .6); }
.composer .composer__caret { background: rgba(255, 255, 255, .55); }
.composer .composer__log.is-ok .composer__log-step { background: rgba(34, 197, 94, .16); color: #86EFAC; }

/* the checks: matte cards, the chosen ones lit in white, one short line each */
@media (min-width: 901px) {
  .composer .composer__picker { grid-template-rows: auto repeat(3, minmax(0, 1fr)); align-content: stretch; }
}
.composer .pick { align-content: center; gap: 3px 12px; padding: 12px 14px 13px 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: none; }
.composer .pick::after { display: none; }
.composer .pick:hover { transform: none; background: rgba(255, 255, 255, .06); box-shadow: none; }
.composer .pick__ico { border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: none; color: rgba(255, 255, 255, .8); }
.composer .pick__state { border-color: rgba(255, 255, 255, .28); background: #10163A; }
.composer .pick__name { font-weight: 600; }
.composer .pick__price { color: rgba(255, 255, 255, .55); }
.composer .pick__line { overflow: hidden; font-size: 12.5px; color: rgba(255, 255, 255, .55); text-overflow: ellipsis; white-space: nowrap; }
.composer .pick[aria-pressed="true"] { background: rgba(255, 255, 255, .085); box-shadow: none; }
.composer .pick[aria-pressed="true"]::before { background: rgba(255, 255, 255, .26); }
.composer .pick[aria-pressed="true"] .pick__ico { background: #fff; box-shadow: none; color: var(--ink); }
.composer .pick[aria-pressed="true"] .pick__state { border-color: #0B1028; background: #22C55E; color: #fff; transform: none; }
.composer .pick[aria-pressed="true"] .pick__line { color: rgba(255, 255, 255, .7); }
.composer .pick[aria-pressed="true"] .pick__price { color: #fff; }
.composer .pick:focus-visible { outline-color: #fff; }

/* the price: matte, the button is the one blue */
.composer .composer__sum { background: rgba(255, 255, 255, .045); box-shadow: none; }
.composer .composer__sum-label { color: rgba(255, 255, 255, .55); }
.composer .composer__amount { font-size: 52px; text-shadow: none; }
.composer .composer__count, .composer .composer__vol-head, .composer .composer__est { color: rgba(255, 255, 255, .66); }
.composer .composer__volume { border-top-color: rgba(255, 255, 255, .1); }
.composer .composer__sum-line { color: rgba(255, 255, 255, .55); }
.composer .composer__range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #fff var(--fill, 33%), rgba(255, 255, 255, .14) var(--fill, 33%)); box-shadow: none; }
.composer .composer__range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .35); }
.composer .composer__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .35); }
.composer .composer__range::-moz-range-track { height: 4px; background: rgba(255, 255, 255, .14); }
.composer .composer__range::-moz-range-progress { height: 4px; background: #fff; }
.composer .composer__range::-moz-range-thumb { width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.composer .composer__cta { box-shadow: 0 12px 26px -14px rgba(37, 71, 233, .8); }

/* ---------- a touch of depth: subtle gradients, lighter at the top ---------- */
.composer { background: linear-gradient(180deg, rgba(24, 32, 74, .6) 0%, rgba(10, 14, 36, .58) 42%, rgba(7, 10, 26, .66) 100%); }
.composer .composer__edge { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .05)); }
.composer .composer__top { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 55%), rgba(3, 6, 20, .42); }
.composer .composer__top::before { background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04)); }
.composer .preset__glider { background: linear-gradient(180deg, #fff, #E9EDF6); }
.composer .cflow__tile { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.composer .cflow__node.is-done .cflow__tile { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09)); }
.composer .cflow__node--end .cflow__tile { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)); }
.composer .cflow__node--end.is-done .cflow__tile { background: linear-gradient(180deg, #34D178, #16A34A); }
.composer .cflow__tick, .composer .pick[aria-pressed="true"] .pick__state { background: linear-gradient(180deg, #34D178, #16A34A); }
.composer .pick { background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); }
.composer .pick:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
.composer .pick::before { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); }
.composer .pick__ico { background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); }
.composer .pick[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045)); }
.composer .pick[aria-pressed="true"]::before { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .12)); }
.composer .pick[aria-pressed="true"] .pick__ico { background: linear-gradient(180deg, #fff, #E2E7F2); }
.composer .composer__sum { background: radial-gradient(120% 70% at 100% 0%, rgba(37, 71, 233, .16), rgba(37, 71, 233, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); }
.composer .composer__sum::before { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); }
.composer .composer__cta { background: linear-gradient(180deg, #3A5DF2, #2547E9); }
.composer .composer__cta:hover { background: linear-gradient(180deg, #2E50E6, #1B36C4); }

@media (max-width: 767px) { .composer .composer__amount { font-size: 46px; } }

/* ==========================================================================
   Checks → white: a long, even fade through the blues instead of a grey wash.
   The strands stop above it; the section below starts on clean white.
   ========================================================================== */
.checks .dome { padding-bottom: 380px; }
.checks .flare::after { content: none; }
.checks-bg {
  background:
    linear-gradient(180deg, #070A1C 0%, #0A1030 16%, #131E55 32%, #2A3C8E 48%, #5C71C4 62%, #9CAEE8 75%, #D2DCF8 86%, #F1F4FD 94%, #FFFFFF 100%) left bottom / 100% 380px no-repeat,
    linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C calc(100% - 380px));
}
.checks-bg__canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 460px), transparent calc(100% - 300px));
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 460px), transparent calc(100% - 300px));
}

/* ==========================================================================
   3. Trust, without names: a statement, three withheld clients, the sectors
   ========================================================================== */
.trust { position: relative; padding: 8px 0 clamp(96px, 10vw, 140px); text-align: center; }
.trust__head { display: flex; flex-direction: column; align-items: center; }
.trust__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 8px 24px -14px rgba(15, 31, 122, .25);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.trust__badge-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(155deg, #4A74FF, #2547E9 55%, #1A9BF4); color: #fff; }
.trust__badge-ico .i { width: 15px; height: 15px; stroke-width: 1.9; }
.trust__title { max-width: 19em; margin-top: 26px; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.08; text-wrap: balance; }

/* withheld clients: the name is there, but under a redaction bar */
.vault { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 56px auto 0; padding: 0; list-style: none; text-align: left; }
.vault__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, #FFFFFF, #F8FAFF);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 22px 50px -30px rgba(15, 31, 122, .35);
  transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), box-shadow .5s var(--ease), border-color .4s;
}
.vault__card:hover { transform: translateY(-4px); border-color: #D6DCF0; box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 30px 60px -28px rgba(15, 31, 122, .45); }
.vault__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vault__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(155deg, #4A74FF, #2547E9 55%, #1A9BF4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 20px -10px rgba(37, 71, 233, .8); color: #fff; }
.vault__ico .i { width: 22px; height: 22px; stroke-width: 1.6; }
.vault__status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #ECFDF3; color: #067647; font-size: 12.5px; font-weight: 600; }
.vault__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #17B26A; box-shadow: 0 0 0 0 rgba(23, 178, 106, .5); animation: vault-live 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes vault-live { 0% { box-shadow: 0 0 0 0 rgba(23, 178, 106, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(23, 178, 106, 0); } }
.vault__sector { margin-top: 22px; color: var(--ink-2); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.vault__name { margin-top: 12px; }
.redact { display: grid; gap: 8px; }
.redact__bar {
  position: relative;
  display: block;
  width: 86%;
  height: 20px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(180deg, #1A2033, #0A0E1F);
}
.redact__bar--short { width: 52%; height: 12px; border-radius: 4px; background: linear-gradient(180deg, #C9CEDD, #B6BCCE); }
.vault__card--b .redact__bar { width: 74%; }
.vault__card--b .redact__bar--short { width: 60%; }
.vault__card--c .redact__bar { width: 80%; }
.vault__card--c .redact__bar--short { width: 44%; }
.redact__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  animation: redact-sheen 4.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
.redact__bar--short::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.vault__card--b .redact__bar::after { animation-delay: .6s; }
.vault__card--c .redact__bar::after { animation-delay: 1.2s; }
@keyframes redact-sheen { 0% { left: -60%; } 40%, 100% { left: 120%; } }
.vault__card:hover .redact__bar:not(.redact__bar--short) { background: repeating-linear-gradient(135deg, #0A0E1F 0 8px, #1C2542 8px 16px); background-size: 200% 100%; animation: redact-stripes 1.2s linear infinite; }
@keyframes redact-stripes { to { background-position: -45px 0; } }
.vault__foot { display: flex; align-items: center; gap: 7px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); color: var(--tone2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.vault__foot .i { width: 14px; height: 14px; stroke-width: 1.8; }

/* the sectors we serve, moving slowly */
.trust__sectors { margin-top: clamp(64px, 7vw, 92px); }
.trust__built { color: var(--muted); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.trust .marquee { margin-top: 22px; padding: 6px 0 14px; }
.trust .marquee__inner { animation-duration: 60s; }
.trust .marquee__list { gap: 14px; padding-right: 14px; }
.trust .marquee__list li {
  gap: 10px;
  padding: 8px 20px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 10px 24px -18px rgba(15, 31, 122, .35);
  color: var(--ink);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -.015em;
}
.marquee__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #EEF2FF; color: var(--royal); }
.trust .marquee__list .i { width: 19px; height: 19px; stroke-width: 1.6; color: var(--royal); }

@media (max-width: 900px) {
  .vault { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 14px; }
}
@media (max-width: 767px) {
  .checks .dome { padding-bottom: 300px; }
  .checks-bg {
    background:
      linear-gradient(180deg, #070A1C 0%, #0A1030 16%, #131E55 32%, #2A3C8E 48%, #5C71C4 62%, #9CAEE8 75%, #D2DCF8 86%, #F1F4FD 94%, #FFFFFF 100%) left bottom / 100% 300px no-repeat,
      linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C calc(100% - 300px));
  }
  .checks-bg__canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 380px), transparent calc(100% - 240px));
    mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 380px), transparent calc(100% - 240px));
  }
  .trust__badge { padding-right: 14px; font-size: 13px; text-align: left; }
  .trust .marquee__list li { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .vault__status::before, .redact__bar::after { animation: none; }
}

/* ==========================================================================
   4. Platform: four pillars drawn in the Identiko isometric line style.
   Light passes along the top rule and wakes each pillar in turn; every drawing
   moves a little on its own. Motion runs only while the section is on screen.
   Brand illustration language (use site-wide): grey #9AA1B5 outlines on white and
   #F4F6FA faces, royal faces for the active part, ink blocks for inputs/evidence,
   dashed flows, royal corner brackets.
   ========================================================================== */
.pf {
  --cycle: 8s;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}
.pf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(37, 71, 233, 0), #2547E9 40%, #64F4F8 60%, rgba(100, 244, 248, 0)) no-repeat;
  background-size: 220px 1px;
  background-position: -220px 0;
}
.pf.is-live::before { animation: pf-travel var(--cycle) linear infinite; }
@keyframes pf-travel { from { background-position: -220px 0; } to { background-position: calc(100% + 220px) 0; } }
.pf__card { position: relative; display: flex; flex-direction: column; padding: 28px 32px 36px; border-left: 1px solid var(--line); transition: background-color .5s var(--ease); }
.pf__card:first-child { border-left: 0; }
.pf__card:not(:first-child)::before,
.pf__card:not(:first-child)::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat;
}
.pf__num { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); transition: color .4s; }
.pf__art { position: relative; display: grid; place-items: center; height: 220px; margin: 8px 0 24px; }
.pf__art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 78%;
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 71, 233, .13), rgba(37, 71, 233, 0));
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .6s, transform .8s var(--ease);
}
.pf__card:hover .pf__art::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pf-iso { position: relative; width: 100%; max-width: 260px; height: auto; overflow: visible; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.pf__card:hover .pf-iso { transform: translateY(-6px); }
.pf__title { color: var(--ink); font-size: 24px; font-weight: 560; letter-spacing: -.03em; line-height: 1.15; }
.pf__text { max-width: 32ch; margin-top: 10px; color: var(--body); font-size: 15.5px; line-height: 1.6; }
.pf__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 20px 0 0; list-style: none; }
.pf__tags li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #FAFBFE; color: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* each pillar wakes as the light passes over it */
.pf.is-live .pf__num { animation: pf-num var(--cycle) linear infinite; }
.pf.is-live .pf__art::before { animation: pf-glow var(--cycle) linear infinite; }
.pf.is-live .pf__card:nth-child(1) .pf__num, .pf.is-live .pf__card:nth-child(1) .pf__art::before { animation-delay: calc(var(--cycle) * .16); }
.pf.is-live .pf__card:nth-child(2) .pf__num, .pf.is-live .pf__card:nth-child(2) .pf__art::before { animation-delay: calc(var(--cycle) * .38); }
.pf.is-live .pf__card:nth-child(3) .pf__num, .pf.is-live .pf__card:nth-child(3) .pf__art::before { animation-delay: calc(var(--cycle) * .6); }
.pf.is-live .pf__card:nth-child(4) .pf__num, .pf.is-live .pf__card:nth-child(4) .pf__art::before { animation-delay: calc(var(--cycle) * .82); }
.pf.is-live .pf__card:hover .pf__art::before { animation: none; }
@keyframes pf-num { 0%, 14%, 100% { color: var(--muted); } 3%, 9% { color: var(--royal); } }
@keyframes pf-glow { 0%, 20%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } 6%, 11% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* --- the drawing kit --- */
.pf-iso * { stroke-linejoin: round; stroke-linecap: round; }
.pf-iso .f-l { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.pf-iso .f-r, .pf-iso .f-t { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.pf-iso .i-l, .pf-iso .i-r, .pf-iso .i-t, .pf-iso .i-t2 { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.pf-iso .i-t { stroke: #4A5270; }
.pf-iso .i-t2 { fill: #1A2036; stroke: #4A5270; }
.pf-iso .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.pf-iso .r-t { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.pf-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.pf-iso .mesh { fill: none; stroke: #C4C9D6; stroke-width: 1; }
.pf-iso .mrz { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 2 2.5; }
.pf-iso .flow { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.pf-iso .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.pf-iso .bracket { fill: none; stroke: var(--royal); stroke-width: 2; }
.pf-iso .scanplane { fill: var(--royal); fill-opacity: .08; stroke: none; }
.pf-iso .scanline { fill: none; stroke: var(--royal); stroke-width: 1.5; }
.pf-iso .photo-head { fill: #FFFFFF; stroke: none; opacity: .92; }
.pf-iso .photo-body { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: .92; }
.pf-iso .node { fill: #9AA1B5; }
.pf-iso .node-r { fill: var(--royal); }
.pf-iso .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2; }
.pf-iso .play { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1; }
.pf-iso .handle { fill: none; stroke: var(--ink); stroke-width: 2; }
.pf-iso .fscan { fill: none; stroke: var(--royal); stroke-width: 1.4; }
.pf-iso .fscan-glow { fill: var(--royal); fill-opacity: .07; stroke: none; }
.pf-iso .a-packet { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; opacity: 0; }
.pf-iso .a-ripple { fill: none; stroke: var(--royal); stroke-width: 1.25; opacity: 0; }
.pf-iso .a-fscan { opacity: 0; }
.pf-iso .a-focus, .pf-iso .a-blip, .pf-iso .a-match, .pf-iso .a-ripple, .pf-iso .a-play, .pf-iso .a-shield, .pf-iso .a-ok, .pf-iso .a-bob, .pf-iso .a-puck { transform-box: fill-box; transform-origin: center; }

/* --- the motion, all slow and small; paused off screen --- */

.pf-iso .a-march { animation: pf-march 1.4s linear infinite; }
@keyframes pf-march { to { stroke-dashoffset: -12; } }

/* 1 · Verify: the scan sweeps the document, the corner brackets focus in turn */
.pf-iso .a-scan { animation: pf-scan 5.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pf-scan { 0%, 100% { transform: translate(14px, 8px); } 50% { transform: translate(-58px, -33.5px); } }
.pf-iso .a-focus { animation: pf-focus 3.2s ease-in-out infinite; }
.pf-iso .a-focus--2 { animation-delay: .4s; }
.pf-iso .a-focus--3 { animation-delay: .8s; }
.pf-iso .a-focus--4 { animation-delay: 1.2s; }
@keyframes pf-focus { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* 2 · Decide: a case travels in, the rule engine thinks, the approved block lifts and ticks */
.pf-iso .a-packet { animation: pf-packet 4.8s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes pf-packet {
  0% { opacity: 0; transform: translate(51.2px, 61.4px); }
  6% { opacity: 1; transform: translate(55px, 63.6px); }
  24% { opacity: 1; transform: translate(94.5px, 86.4px); }
  27%, 44% { opacity: 0; transform: translate(108.9px, 94.7px); }
  47% { opacity: 1; transform: translate(123.3px, 103px); }
  60% { opacity: 1; transform: translate(143.9px, 114.9px); }
  74% { opacity: 1; transform: translate(166.5px, 128px); }
  78%, 100% { opacity: 0; transform: translate(170px, 130px); }
}
.pf-iso .a-think { animation: pf-think 4.8s ease-in-out infinite; }
@keyframes pf-think { 0%, 24%, 50%, 100% { fill: #2547E9; } 32%, 40% { fill: #5B82FF; } }
.pf-iso .a-ok { animation: pf-ok 4.8s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes pf-ok { 0%, 72%, 100% { transform: translateY(0); } 80%, 92% { transform: translateY(-5px); } }
.pf-iso .a-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: pf-draw 4.8s ease-in-out infinite; }
@keyframes pf-draw { 0%, 74% { stroke-dashoffset: 30; } 84%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
.pf-iso .a-blip { animation: pf-blip 4.8s ease-out infinite; }
.pf-iso .a-blip--1 { animation-delay: .6s; }
.pf-iso .a-blip--2 { animation-delay: 2.9s; }
.pf-iso .a-blip--3 { animation-delay: 3.1s; }
.pf-iso .a-blip--4 { animation-delay: 3.1s; }
@keyframes pf-blip { 0%, 10%, 100% { fill: #9AA1B5; transform: scale(1); } 3% { fill: #2547E9; transform: scale(1.7); } }
.pf-iso .a-bob { animation: pf-bob 4.8s ease-in-out infinite; }
@keyframes pf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* 3 · Protect: a scan line reads the face, the matched points answer, the shield floats */
.pf-iso .a-fscan { animation: pf-fscan 4.4s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes pf-fscan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 80% { opacity: 1; transform: translateY(92px); } 90%, 100% { opacity: 0; transform: translateY(96px); } }
.pf-iso .a-match { animation: pf-match 4.4s ease-out infinite; }
.pf-iso .a-match--1 { animation-delay: 1.3s; }
.pf-iso .a-match--2 { animation-delay: 1.6s; }
.pf-iso .a-match--3 { animation-delay: 2.3s; }
.pf-iso .a-match--4 { animation-delay: 2.6s; }
@keyframes pf-match { 0%, 14%, 100% { transform: scale(1); } 5% { transform: scale(1.9); } }
.pf-iso .a-shield { animation: pf-float 4.4s ease-in-out infinite; }
@keyframes pf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pf-iso .a-shield .a-draw { animation: pf-draw2 4.4s ease-in-out infinite; }
@keyframes pf-draw2 { 0%, 60% { stroke-dashoffset: 30; } 72%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }

/* 4 · Prove: drawers open in turn, the evidence ripples, the play mark breathes */
.pf-iso .a-drawer { animation: pf-drawer 6s cubic-bezier(.45, 0, .3, 1) infinite; }
.pf-iso .a-drawer--2 { animation-delay: 1.2s; }
.pf-iso .a-drawer--3 { animation-delay: 2.4s; }
@keyframes pf-drawer { 0%, 30%, 100% { transform: translate(0, 0); } 8%, 20% { transform: translate(-7px, 4px); } }
.pf-iso .a-ripple { animation: pf-ripple 3s ease-out infinite; }
@keyframes pf-ripple { 0% { opacity: .55; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.5); } }
.pf-iso .a-puck { animation: pf-float 5s ease-in-out infinite; }
.pf-iso .a-play { animation: pf-play 3s ease-in-out infinite; }
@keyframes pf-play { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(.88); } }

.pf:not(.is-live) .pf-iso * { animation-play-state: paused; }

@media (max-width: 1100px) {
  .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf.is-live::before, .pf.is-live .pf__num, .pf.is-live .pf__art::before { animation: none; }
  .pf__card:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .pf__card:nth-child(4) { border-top: 1px solid var(--line); }
  .pf__card:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .pf { grid-template-columns: minmax(0, 1fr); }
  .pf__card { padding: 22px 0 30px; border-left: 0; }
  .pf__card + .pf__card { border-top: 1px solid var(--line); }
  .pf__card::before { display: none; }
  .pf__art { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf::before, .pf__num, .pf__art::before, .pf-iso * { animation: none; }
  .pf-iso .a-draw { stroke-dashoffset: 0; }
  .pf-iso .a-fscan, .pf-iso .a-packet, .pf-iso .a-ripple { display: none; }
}

/* platform, balanced: header and pillars share one inner inset inside the frame lines,
   crosses mark every corner and junction, the hovered pillar tints */
.platform { --pf-inset: 32px; }
.platform .section-head { padding-inline: var(--pf-inset); margin-bottom: clamp(56px, 6vw, 84px); }
@media (min-width: 1101px) {
  .platform .section-head--split { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px clamp(40px, 5vw, 80px); }
}
.platform .h2 { font-size: clamp(34px, 4.1vw, 58px); }
.platform .lede { max-width: 44ch; }
.pf__card:not(:first-child)::after { top: auto; bottom: -5px; }
.pf::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}
.pf__card:hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 70%); }
.pf__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf__step { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pf__art { margin: 16px 0 28px; }
.pf__title { font-size: 26px; }
.pf__text { margin-top: 12px; }
.pf__tags { padding-top: 24px; }
@media (min-width: 1101px) {
  .pf__art { height: 230px; }
}
@media (max-width: 1100px) {
  .platform { --pf-inset: 28px; }
  .pf__card { padding: 26px 28px 34px; }
  .pf__card:nth-child(3) { padding-left: 28px; }
  .pf__card:nth-child(3)::after, .pf__card:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .platform { --pf-inset: 0px; }
  .pf__card, .pf__card:nth-child(3) { padding: 24px 0 32px; }
  .pf__card::after, .pf::after { display: none; }
}

/* ==========================================================================
   Grid system (site-wide): hairline rules with "+" marks at every corner and
   junction. .xgrid = columns, .xrows = stacked rows.
   ========================================================================== */
.xgrid { position: relative; display: grid; margin: 0; padding: 0; border-block: 1px solid var(--line); list-style: none; }
.xgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xgrid > li { position: relative; padding: 28px 32px 30px; border-left: 1px solid var(--line); }
.xgrid > li:first-child { border-left: 0; }
.xgrid > li:not(:first-child)::before,
.xgrid > li:not(:first-child)::after,
.xrows > li::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat;
}
.xgrid > li:not(:first-child)::after { top: auto; bottom: -5px; }
.xgrid::after,
.xrows::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}
.xrows { position: relative; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.xrows > li { position: relative; border-bottom: 1px solid var(--line); }
.xrows > li::after { top: auto; bottom: -5px; }
.xrows > li:last-child::after { display: none; }
@media (max-width: 1100px) {
  .xgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xgrid--4 > li:nth-child(3) { border-left: 0; }
  .xgrid--4 > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .xgrid--4 > li:nth-child(3)::before, .xgrid--4 > li:nth-child(3)::after { display: none; }
  .xgrid--4 > li:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) {
  .xgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .xgrid--3 > li { border-left: 0; }
  .xgrid--3 > li + li { border-top: 1px solid var(--line); }
  .xgrid--3 > li::before, .xgrid--3 > li::after { display: none; }
}
@media (max-width: 640px) {
  .xgrid--4 { grid-template-columns: minmax(0, 1fr); }
  .xgrid--4 > li { padding: 22px 0; border-left: 0; }
  .xgrid--4 > li + li { border-top: 1px solid var(--line); }
  .xgrid > li::before, .xgrid > li::after, .xgrid::after { display: none; }
}


/* trust, on the grid: the badge sits on the section rule, the withheld clients are
   three cells, the sectors run in a full-width band between two rules */
.trust { padding-top: 0; }
.trust.guides { border-top: 1px solid var(--line); }
.trust__head { padding-inline: 32px; }
.trust__badge { position: relative; z-index: 1; margin-top: -19px; }
.trust__title { margin-top: 30px; }
.vault.xgrid { max-width: none; gap: 0; margin: clamp(48px, 5vw, 64px) 0 0; border-bottom: 0; }
.vault .vault__card { padding: 32px 32px 30px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transition: background-color .5s var(--ease); }
.vault .vault__card:first-child { border-left: 0; }
.vault .vault__card:hover { transform: none; box-shadow: none; background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 75%); }
.trust__sectors { margin-top: 0; padding: 28px 0 34px; border-top: 1px solid var(--line); }
.trust.guides { padding-bottom: 0; }
.trust__sectors .trust__built { margin-bottom: 4px; }
.trust .marquee { margin-top: 18px; }
@media (max-width: 900px) {
  .vault .vault__card { border-left: 0; }
  .vault .vault__card + .vault__card { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .trust__head { padding-inline: 0; }
  .vault .vault__card { padding: 26px 0; }
}

/* ==========================================================================
   Grid system, applied page-wide: every white section carries the guide lines,
   a full-width top rule and the "+" marks; headers sit on the 32px inset; lists of
   items become cells (.xcells) with rules and marks at every junction.
   ========================================================================== */
.guides .section-head { padding-inline: 32px; }
.duo-band { position: relative; padding-top: var(--section-y); }
.xcells { position: relative; display: grid; gap: 0; border-block: 1px solid var(--line); }
.xcells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xcells > * { position: relative; padding: 32px; border-left: 1px solid var(--line); }
.xcells--3 > :nth-child(3n+1) { border-left: 0; }
.xcells--3 > :nth-child(n+4) { border-top: 1px solid var(--line); }
.xcells > :not(:first-child)::before,
.xcells--3 > :nth-last-child(-n+3):not(:nth-child(3n+1))::after,
.xcells--3 > :nth-child(3n):not(:nth-last-child(-n+3))::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: 1;
  width: 9px;
  height: 9px;
  background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat;
}
.xcells--3 > :nth-last-child(-n+3):not(:nth-child(3n+1))::after { top: auto; bottom: -5px; }
.xcells--3 > :nth-child(3n):not(:nth-last-child(-n+3))::after { left: auto; right: -5px; top: auto; bottom: -5px; }
.xcells::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}
.xcells > * { transition: background-color .5s var(--ease); }
.xcells > :hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 75%); }

/* security and industries become cells */
.sec-grid.xcells { border-left: 0; }
.xcells > .sec-item { padding: 32px 32px 40px; border-right: 0; border-bottom: 0; }
.xcells > .industry { padding: 28px 32px 36px; border-radius: 0; border-block: 0; border-right: 0; background: none; }
.xcells > .industry:first-child, .xcells--3 > .industry:nth-child(3n+1) { border-left: 0; }
.xcells--3 > .industry:nth-child(n+4) { border-top: 1px solid var(--line); }
.xcells > .industry:hover { transform: none; box-shadow: none; }
.xcells > .industry .industry__art { padding: 12px 0; background: none; }
.xcells > .industry .h3, .xcells > .industry p { padding-inline: 0; }

@media (max-width: 900px) {
  .xcells--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xcells--3 > :nth-child(n) { border-left: 1px solid var(--line); border-top: 0; }
  .xcells--3 > :nth-child(2n+1) { border-left: 0; }
  .xcells--3 > :nth-child(n+3) { border-top: 1px solid var(--line); }
  .xcells > :nth-child(n)::before, .xcells > :nth-child(n)::after { display: none; }
}
@media (max-width: 640px) {
  .guides .section-head { padding-inline: 0; }
  .xcells--3 { grid-template-columns: minmax(0, 1fr); }
  .xcells--3 > :nth-child(n) { padding-inline: 0; border-left: 0; }
  .xcells--3 > :nth-child(n+2) { border-top: 1px solid var(--line); }
  .xcells::after { display: none; }
}

/* ==========================================================================
   Eyebrow, refined (site-wide): a glass pill with a section icon; a light
   passes across it once when it scrolls into view.
   ========================================================================== */
.eyebrow {
  position: relative;
  overflow: hidden;
  gap: 10px;
  padding: 4px 15px 4px 4px;
  border: 0;
  background: linear-gradient(180deg, #FFFFFF, #F5F7FE);
  box-shadow: inset 0 0 0 1px #E1E6F4, inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(10, 14, 31, .04), 0 10px 24px -16px rgba(15, 31, 122, .4);
  color: var(--ink-2);
  font-size: 11.5px;
  letter-spacing: .13em;
}
.eyebrow__ico {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -4px rgba(37, 71, 233, .8);
  color: #fff;
}
.eyebrow__ico .i { width: 13px; height: 13px; stroke-width: 1.9; }
.eyebrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.eyebrow.is-in::after { animation: eyebrow-sheen 1.4s cubic-bezier(.45, 0, .2, 1) .25s both; }
@keyframes eyebrow-sheen { to { transform: translateX(320%) skewX(-18deg); } }
.eyebrow--on-dark { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff; }
.eyebrow--on-dark .eyebrow__ico { background: linear-gradient(155deg, #9FFBFF, #64F4F8 45%, #1A9BF4); color: var(--ink); }
.eyebrow--on-dark::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); }

/* ==========================================================================
   6. Workflows: white section, the builder on a blue glass panel where light
   moves behind reeded glass; one verification runs through the flow.
   ========================================================================== */
.wf .wf-head { padding-inline: 32px; margin-bottom: clamp(48px, 5vw, 72px); }
@media (min-width: 1101px) {
  .wf .wf-head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(40px, 5vw, 80px); }
}
.wfr {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(56px, 6vw, 84px);
  padding: clamp(40px, 6.5vw, 104px) clamp(20px, 4vw, 56px);
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(165deg, #2A4BEA 0%, #1E3CD4 38%, #152C9E 78%, #0F2178 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 48px 80px -56px rgba(15, 31, 122, .7);
}
.wfr__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.wfr__fx > span { position: absolute; }
.wfr__light--a {
  top: -35%;
  bottom: -35%;
  left: -30%;
  width: 55%;
  background: radial-gradient(closest-side, rgba(170, 240, 255, .62), rgba(100, 244, 248, .2) 48%, rgba(100, 244, 248, 0) 78%);
  animation: wfr-sweep 18s cubic-bezier(.45, 0, .3, 1) infinite alternate;
}
.wfr__light--b {
  left: 20%;
  bottom: -55%;
  width: 90%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(120, 160, 255, .55), rgba(120, 160, 255, 0) 75%);
  animation: wfr-drift 24s cubic-bezier(.45, 0, .3, 1) infinite alternate;
}
@keyframes wfr-sweep { from { transform: translateX(0); } to { transform: translateX(210%); } }
@keyframes wfr-drift { from { transform: translateX(-30%); } to { transform: translateX(25%); } }
.wfr__flutes {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 16px, rgba(6, 14, 80, .16) 26px, rgba(255, 255, 255, .09) 30px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .05) 60px, rgba(255, 255, 255, 0) 120px);
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), #000 45%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), #000 45%);
}
.wfr__grain {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .08 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wfr::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(200, 245, 255, .9), rgba(255, 255, 255, 0)); pointer-events: none; }
.wfr:not(.is-live) .wfr__light { animation-play-state: paused; }

/* the builder as frosted glass */
.wfr__builder { margin: 0; }
.wfr .builder__ui {
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 9px rgba(255, 255, 255, .1), 0 60px 100px -40px rgba(4, 8, 50, .85);
}
.wfr .builder__bar { border-bottom-color: rgba(10, 14, 31, .07); background: rgba(255, 255, 255, .55); }
.wfr .builder__canvas { background-color: rgba(246, 248, 255, .62); background-image: radial-gradient(rgba(120, 130, 170, .35) 1px, transparent 1.3px); }
.wfr .builder__publish { position: relative; overflow: hidden; box-shadow: 0 8px 18px -8px rgba(10, 14, 31, .6); }
.wfr .builder__publish::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: wfr-shine 6s cubic-bezier(.45, 0, .2, 1) 1.5s infinite; }
@keyframes wfr-shine { 0% { left: -60%; } 22%, 100% { left: 140%; } }
.wfr .builder__cost-value { transition: box-shadow .4s, color .4s; }
.wfr .builder__cost-value.is-glow { color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14), 0 1px 2px rgba(10, 14, 31, .08); }

/* one verification runs through: connectors fill, each step lights then ticks */
.wfr .node { transition: border-color .4s, box-shadow .45s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wfr .node:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 16px 28px -14px rgba(15, 31, 122, .4); }
.wfr .node__icon { transition: background .35s, color .35s; }
.wfr .node + .node::before { background: linear-gradient(var(--royal), var(--royal)) left center / 0% 100% no-repeat, #B7BECF; transition: background-size .55s cubic-bezier(.45, 0, .3, 1); }
.wfr .node + .node::after { transition: border-left-color .3s .35s; }
.wfr .node.is-lit::before { background-size: 100% 100%; }
.wfr .node.is-lit::after { border-left-color: var(--royal); }
.wfr .node.is-run { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14), 0 16px 30px -14px rgba(37, 71, 233, .5); transform: translateY(-3px); }
.wfr .node.is-run .node__icon { background: var(--royal); color: #fff; }
.wfr .node.is-done { border-color: #C9D4FB; }
.node__tick { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, #4ADE80, #16A34A); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(22, 163, 74, .45); color: #fff; opacity: 0; transform: scale(.3); transition: opacity .2s, transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.node__tick .i { width: 11px; height: 11px; stroke-width: 3; }
.wfr .node.is-done .node__tick { opacity: 1; transform: none; }
.node__ring { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.wfr .node--decision.is-run { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(100, 244, 248, .3), 0 16px 30px -12px rgba(10, 14, 31, .6); }
.wfr .node--decision.is-run .node__icon { background: rgba(100, 244, 248, .2); color: var(--cyan); }
.wfr .node--decision.is-run .node__ring { animation: wfr-ring 1s ease-out infinite; }
@keyframes wfr-ring { from { box-shadow: 0 0 0 0 rgba(100, 244, 248, .6); } to { box-shadow: 0 0 0 14px rgba(100, 244, 248, 0); } }
.fork__p { fill: none; stroke: #9AA1B5; stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke .4s, stroke-width .4s; }
.wfr.is-live .fork__p { animation: wf-flow 1.4s linear infinite; }
@keyframes wf-flow { to { stroke-dashoffset: -16; } }
.fork__p.is-on { stroke-width: 2; stroke-dasharray: 6 3; }
.fork__p--ok.is-on { stroke: var(--ok); }
.fork__p--warn.is-on { stroke: var(--warn); }
.fork__p--bad.is-on { stroke: var(--bad); }
.wfr .outcome { transition: box-shadow .4s, border-color .4s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wfr .outcome.is-on { transform: translateX(4px); }
.wfr .outcome--ok.is-on { border-color: rgba(18, 183, 106, .5); box-shadow: 0 0 0 4px rgba(18, 183, 106, .14), 0 12px 24px -12px rgba(18, 183, 106, .6); }
.wfr .outcome--warn.is-on { border-color: rgba(247, 144, 9, .5); box-shadow: 0 0 0 4px rgba(247, 144, 9, .14), 0 12px 24px -12px rgba(247, 144, 9, .6); }
.wfr .outcome--bad.is-on { border-color: rgba(240, 68, 56, .5); box-shadow: 0 0 0 4px rgba(240, 68, 56, .12), 0 12px 24px -12px rgba(240, 68, 56, .6); }

/* --- the four points: cells with drawn icons that act out their idea --- */
.wf-points > li.wf-pt { display: flex; flex-direction: column; padding: 30px 32px 34px; color: var(--ink-2); transition: background-color .5s var(--ease); }
.wf-pt:hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 80%); }
.wf-pt__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, #2547E9, #64F4F8); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.3, 1, .4, 1); }
.wf-pt:hover .wf-pt__bar { transform: scaleX(1); }
.wf-pt__top { display: flex; align-items: flex-start; justify-content: space-between; }
.wf-pt__num { color: var(--tone2); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; transition: color .4s; }
.wf-pt:hover .wf-pt__num { color: var(--royal); }
.wf-pt__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, #EEF2FF);
  box-shadow: inset 0 0 0 1px #DCE3FD, inset 0 1px 0 #fff, 0 10px 20px -14px rgba(37, 71, 233, .5);
  color: var(--royal);
  transition: background .45s, box-shadow .45s, color .45s, transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.wf-pt:hover .wf-pt__ico { background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -12px rgba(37, 71, 233, .75); color: #fff; transform: translateY(-2px); }
.wf-svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-svg__node { fill: #fff; transition: fill .45s; }
.wf-pt:hover .wf-svg__node { fill: rgba(255, 255, 255, .2); }
.wf-svg__node--on { fill: currentColor; }
.wf-pt:hover .wf-svg__node--on { fill: #fff; }
.wf-svg__draw { stroke-dasharray: 24; stroke-dashoffset: 0; }
.wf-svg__draw--s { stroke-dasharray: 9; }
.wf-svg__badge { fill: #64F4F8; stroke: #fff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.wf-svg__swing { transform-box: view-box; transform-origin: 16px 6px; }
.wf-svg__swing--tag { transform-origin: 21.6px 10.4px; }
.wf-svg__rewind { transform-box: view-box; transform-origin: 16px 16px; }
.wf-svg__hand { transform-box: view-box; transform-origin: 16px 16px; }
.wf-pt__title { margin-top: 26px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.wf-pt__text { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }

/* the cells rise in one after another; each icon then acts out its idea once.
   Hovering a cell plays it again. */
.wf-pt { --d: 0s; }
.wf-pt:nth-child(2) { --d: .12s; }
.wf-pt:nth-child(3) { --d: .24s; }
.wf-pt:nth-child(4) { --d: .36s; }
:root:not(.no-js) .wf-points[data-reveal] > li { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) var(--d), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d), background-color .5s var(--ease); }
:root:not(.no-js) .wf-points[data-reveal].is-in > li { opacity: 1; transform: none; }
.wf-svg__node--on { transform-box: fill-box; transform-origin: center; }
.wf-pt--branch:hover .wf-svg__draw { animation: wf-draw 1s cubic-bezier(.45, 0, .2, 1) both; }
.wf-pt--branch:hover .wf-svg__node--on { animation: wf-pop .5s cubic-bezier(.3, 1.8, .5, 1) .7s both; }
.wf-pt--bell:hover .wf-svg__swing { animation: wf-ring 1s ease-in-out both; }
.wf-pt--bell:hover .wf-svg__badge { animation: wf-pop .55s cubic-bezier(.3, 1.8, .5, 1) .45s both; }
.wf-pt--tag:hover .wf-svg__swing { animation: wf-sway 1.2s ease-in-out both; }
.wf-pt--tag:hover .wf-svg__draw { animation: wf-draw-s .8s ease-out .2s both; }
.wf-pt--history:hover .wf-svg__rewind, .wf-pt--history:hover .wf-svg__hand { animation: wf-rewind 1.1s cubic-bezier(.45, 0, .2, 1) both; }
.wf-points.is-in:not(.is-settled) .wf-pt--branch .wf-svg__draw { animation: wf-draw 1s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--d) + .35s); }
.wf-points.is-in:not(.is-settled) .wf-pt--branch .wf-svg__node--on { animation: wf-pop .5s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--d) + 1.05s); }
.wf-points.is-in:not(.is-settled) .wf-pt--bell .wf-svg__swing { animation: wf-ring 1s ease-in-out both; animation-delay: calc(var(--d) + .4s); }
.wf-points.is-in:not(.is-settled) .wf-pt--bell .wf-svg__badge { animation: wf-pop .55s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--d) + .85s); }
.wf-points.is-in:not(.is-settled) .wf-pt--tag .wf-svg__swing { animation: wf-sway 1.2s ease-in-out both; animation-delay: calc(var(--d) + .4s); }
.wf-points.is-in:not(.is-settled) .wf-pt--tag .wf-svg__draw { animation: wf-draw-s .8s ease-out both; animation-delay: calc(var(--d) + .6s); }
.wf-points.is-in:not(.is-settled) .wf-pt--history .wf-svg__rewind,
.wf-points.is-in:not(.is-settled) .wf-pt--history .wf-svg__hand { animation: wf-rewind 1.1s cubic-bezier(.45, 0, .2, 1) both; animation-delay: calc(var(--d) + .4s); }

@media (max-width: 1023px) {
  .wfr .node + .node::before { background-position: center top; background-size: 100% 0%; }
  .wfr .node.is-lit::before { background-size: 100% 100%; }
  .wfr .node + .node::after { transition: border-top-color .3s .35s; }
  .wfr .node.is-lit::after { border-left-color: transparent; border-top-color: var(--royal); }
  .wfr .outcome.is-on { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  .wf .wf-head { padding-inline: 0; }
  .wfr { border-radius: 26px; }
  .wf-points > li.wf-pt { padding: 24px 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .wfr__light, .fork__p, .wfr .builder__publish::after { animation: none; }
}
.wfr__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.wfr.has-gl .wfr__light, .wfr.has-gl .wfr__flutes { display: none; }
.wfr.has-gl .wfr__grain { opacity: .7; }
/* headings set in clauses: a clause never breaks inside, lines break between clauses */
@media (min-width: 360px) { .clause { white-space: nowrap; } }
@media (max-width: 480px) {
  .wfr .builder__icon { display: none; }
  .wfr .builder__bar { gap: 10px 8px; padding: 12px 12px 12px 14px; }
  .wfr .builder__publish { padding: 9px 15px; }
}

/* ==========================================================================
   Grid rule: content never touches the guide lines. Cards and panels sit
   inside cells or 32px in from the frame; only rules and cells meet the lines.
   ========================================================================== */

/* trust: the sector band runs full width, so the guide lines stop at its top rule */
.trust__sectors { position: relative; z-index: 0; background: #fff; }
.vault.xgrid { z-index: 1; }

/* workflows: the glass panel sits on the 32px inset */
.wf .wfr { margin-inline: 32px; }
@media (min-width: 1024px) { .wfr .builder__canvas { padding-inline: 28px; } }

/* intelligence and Sara / White label read as one grid: two rows of cells that
   share a rule, with no floating divider or double gap between them */
.intel { padding-bottom: 0; }
.intel__grid { position: relative; gap: 0; border-block: 1px solid var(--line); }
.intel__grid > .biointel { padding: 32px; }
.intel__grid > .blocklist { position: relative; padding: 40px 32px 32px; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.intel__grid::after,
.duo::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}
.intel__grid > .blocklist::before,
.intel__grid > .blocklist::after,
.duo > .wl::before,
.duo > .wl::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  z-index: 1;
  width: 9px;
  height: 9px;
  background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat;
  pointer-events: none;
}
.intel__grid > .blocklist::after, .duo > .wl::after { top: auto; bottom: -5px; }

.duo-band { padding-top: 0; padding-bottom: var(--section-y); border-top: 0; }
.duo-band::before, .duo-band::after { display: none; }
.duo { position: relative; gap: 0; padding-bottom: 0; border-bottom: 1px solid var(--line); }
.duo > .duo__card { padding: 40px 32px 32px; overflow: visible; border-radius: 0; background: none; }
.duo > .wl { border: 0; border-left: 1px solid var(--line); }
.duo .sara .chat { margin: 28px 0 0; padding: 150px 28px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, #F4F6FA 0%, #EEF2FB 100%); }
.duo .sara-stat { right: 22px; }
.duo .sara-chip { left: 22px; }
.duo .wl__stage { margin: 30px 0 0; overflow: hidden; border-radius: 24px; }
.duo .wl__sky { border-radius: inherit; }
.duo .wl__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }

@media (max-width: 1023px) {
  .intel__grid > .blocklist { border-top: 1px solid var(--line); border-left: 0; }
  .intel__grid > .blocklist::after { display: none; }
  .duo > .wl { border-top: 1px solid var(--line); border-left: 0; }
  .duo > .wl::after { display: none; }
}
@media (max-width: 767px) {
  .intel__grid > .biointel { padding: 24px 0; }
  .intel__grid > .blocklist { padding: 28px 0; }
  .duo > .duo__card { padding: 32px 0; }
  .duo .sara .chat { padding: 132px 16px 16px; }
  .duo .sara-stat { right: 12px; }
  .duo .sara-chip { left: 12px; }
  .intel__grid::after, .duo::after,
  .intel__grid > .blocklist::before, .duo > .wl::before { display: none; }
}
@media (max-width: 640px) {
  .wf .wfr { margin-inline: 0; }
}

/* ==========================================================================
   How it works: two sides. Inside the dark Evidence panel, a sticky stage shows
   the applicant's phone and your team's case, joined by a live link. Both move
   to the same moment as the steps scroll past.
   ========================================================================== */
.sides { margin-top: clamp(96px, 11vw, 150px); padding-top: clamp(56px, 6vw, 80px); border-top: 1px solid rgba(255, 255, 255, .1); }
.sides__head { max-width: 640px; }
.sides__title { margin-top: 14px; color: #fff; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.06; }
.sides__lede { margin-top: 16px; color: rgba(255, 255, 255, .7); font-size: 17px; }
.sides__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); margin-top: clamp(48px, 5vw, 72px); }
.sides__stage { position: sticky; top: max(100px, calc(50vh - 330px)); align-self: start; height: calc(660px * var(--k, 1)); }
.sides__frame { position: relative; display: flex; width: 660px; margin-inline: auto; transform: scale(var(--k, 1)); transform-origin: top center; }
.sides__col { flex: none; }
.sides__col--app { width: 236px; }
.sides__col--team { width: 340px; padding-top: 44px; }
.sides__who { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: rgba(255, 255, 255, .6); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sides__pip { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .18); }
.sides__pip--team { background: #8EA4FF; box-shadow: 0 0 0 3px rgba(142, 164, 255, .2); }

/* a soft light behind the stage takes the colour of the moment: running, review, approved */
.sd-glow { position: absolute; inset: -12% -14% -6%; z-index: -1; pointer-events: none; }
.sd-glow__l { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.sd-glow__l--run { background: radial-gradient(40% 40% at 30% 42%, rgba(37, 71, 233, .34), rgba(37, 71, 233, 0) 70%), radial-gradient(34% 34% at 72% 40%, rgba(100, 244, 248, .12), rgba(100, 244, 248, 0) 70%); }
.sd-glow__l--review { background: radial-gradient(40% 36% at 70% 44%, rgba(247, 144, 9, .2), rgba(247, 144, 9, 0) 70%), radial-gradient(34% 34% at 30% 42%, rgba(37, 71, 233, .22), rgba(37, 71, 233, 0) 70%); }
.sd-glow__l--ok { background: radial-gradient(40% 36% at 70% 44%, rgba(18, 183, 106, .2), rgba(18, 183, 106, 0) 70%), radial-gradient(34% 34% at 30% 42%, rgba(37, 71, 233, .22), rgba(37, 71, 233, 0) 70%); }
.sides:not(.s4) .sd-glow__l--run, .sides.s4:not(.s5) .sd-glow__l--review, .sides.s5 .sd-glow__l--ok { opacity: 1; }

/* the live link between the two sides, with the session clock */
.sd-link { position: relative; flex: none; width: 84px; }
.sd-clock { position: absolute; left: 50%; top: 66px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-pill); background: rgba(14, 20, 40, .9); color: #fff; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); }
.sd-clock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .2); animation: hw-blink 1.6s ease-in-out infinite; }
.sd-link__svg { position: absolute; left: 0; top: 44px; width: 84px; height: 240px; overflow: visible; }
.sd-link__base { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; stroke-dasharray: 3 4; animation: hw-march 1.2s linear infinite; }
.sd-link__pulse { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .22 1.2; stroke-dashoffset: .22; opacity: 0; filter: drop-shadow(0 0 4px rgba(100, 244, 248, .9)); }
.sides.is-sync .sd-link__pulse { animation: sd-pulse 1s cubic-bezier(.45, 0, .3, 1); }
@keyframes sd-pulse { 0% { opacity: 1; stroke-dashoffset: .22; } 85% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }

/* the phone: four screens that cross-fade, each with a small action */
.sd-phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04); }
.sd-screen { position: relative; }
.sd-dots { display: flex; gap: 4px; margin-left: auto; }
.sd-dots span { width: 14px; height: 3px; border-radius: 2px; background: #E3E7EF; transition: background-color .4s; }
.sides.s2 .sd-dots span:nth-child(1), .sides.s3 .sd-dots span:nth-child(-n+2), .sides.s4 .sd-dots span { background: var(--mb); }
.sd-views { position: relative; flex: 1; margin-top: 4px; }
.sd-view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.sd-center { text-align: center; }
.sides.s1:not(.s2) .sd-view--1, .sides.s2:not(.s3) .sd-view--2, .sides.s3:not(.s4) .sd-view--3, .sides.s4 .sd-view--4 { opacity: 1; transform: none; }
.sides.s1:not(.s2) .sd-tap { animation: sd-tap 2.4s ease-in-out .6s infinite; }
@keyframes sd-tap { 0%, 70%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(15, 92, 84, 0); } 80% { transform: scale(.96); box-shadow: 0 0 0 6px rgba(15, 92, 84, .18); } }
.sd-cam { position: relative; display: grid; place-items: center; height: 250px; margin-top: 12px; overflow: hidden; border-radius: 22px; background: radial-gradient(90% 70% at 50% 35%, #27416E, #0B1631 72%); }
.sd-cam__tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sd-doc { position: relative; width: 150px; height: 96px; border-radius: 9px; background: linear-gradient(160deg, #F6F8FD, #DCE3F3); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); transform: rotate(-2deg); }
.sd-doc__photo { position: absolute; left: 12px; top: 14px; width: 34px; height: 44px; border-radius: 5px; background: linear-gradient(180deg, #B9C6E6, #8FA2D2); }
.sd-doc__l { position: absolute; left: 56px; height: 5px; border-radius: 3px; background: #B6C0D8; }
.sd-doc__l--1 { top: 18px; width: 72px; }
.sd-doc__l--2 { top: 30px; width: 54px; }
.sd-doc__l--3 { top: 42px; width: 62px; }
.sd-doc__mrz { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 14px; background: repeating-linear-gradient(90deg, #9AA5C0 0 4px, transparent 4px 6px) top / 100% 4px no-repeat, repeating-linear-gradient(90deg, #9AA5C0 0 4px, transparent 4px 6px) bottom / 100% 4px no-repeat; }
.sd-doc__scan { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 12px 2px rgba(100, 244, 248, .7); animation: sd-scan 2.4s ease-in-out infinite alternate; }
@keyframes sd-scan { to { transform: translateY(94px); } }
.sd-br { position: absolute; width: 22px; height: 22px; border: 2.5px solid var(--cyan); }
.sd-br--tl { left: 34px; top: 62px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.sd-br--tr { right: 34px; top: 62px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.sd-br--bl { left: 34px; bottom: 62px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.sd-br--br { right: 34px; bottom: 62px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.sd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.sd-captured { position: absolute; left: 50%; bottom: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(18, 183, 106, .9); color: #fff; font-size: 11px; font-weight: 650; opacity: 0; transform: translate(-50%, 8px); }
.sides.s2:not(.s3) .sd-flash { animation: sd-camflash .7s ease-out 1.7s both; }
@keyframes sd-camflash { 0% { opacity: 0; } 20% { opacity: .85; } 100% { opacity: 0; } }
.sides.s2:not(.s3) .sd-captured { animation: sd-chip .5s cubic-bezier(.3, 1.6, .5, 1) 2s both; }
@keyframes sd-chip { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sd-shutter { align-self: center; width: 52px; height: 52px; margin-top: auto; border: 3px solid var(--mb); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 30px var(--mb-tint); }
.sd-face { position: relative; display: grid; place-items: center; width: 170px; height: 212px; margin: 22px auto 0; overflow: hidden; }
.sd-face__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #E6EAF2; stroke-width: 4; }
.sd-face__arc { stroke: var(--mb); stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linecap: round; }
.sides.s3:not(.s4) .sd-face__arc { animation: sd-ring 2.6s cubic-bezier(.45, 0, .3, 1) .3s forwards; }
@keyframes sd-ring { to { stroke-dashoffset: 0; } }
.sd-face__mesh { width: 130px; height: 150px; color: var(--mb); }
.sd-face__scan { position: absolute; left: 22%; right: 22%; top: 18%; height: 2px; border-radius: 2px; background: var(--mb); box-shadow: 0 0 10px rgba(15, 92, 84, .5); opacity: .7; animation: sd-fscan 2.2s ease-in-out infinite alternate; }
@keyframes sd-fscan { to { transform: translateY(130px); } }
.sd-send { width: 120px; height: 4px; margin: 58px auto 0; overflow: hidden; border-radius: 2px; background: #E6EAF2; }
.sd-send__bar { display: block; width: 100%; height: 100%; background: var(--mb); transform: scaleX(0); transform-origin: left; }
.sides.s4 .sd-send__bar { animation: sd-send 1s cubic-bezier(.45, 0, .3, 1) .2s forwards; }
@keyframes sd-send { to { transform: none; } }
.sd-done { display: grid; place-items: center; width: 76px; height: 76px; margin: 22px auto 0; border-radius: 50%; background: var(--mb-tint); color: var(--mb); box-shadow: 0 0 0 10px rgba(15, 92, 84, .06); }
.sd-done .i { width: 36px; height: 36px; stroke-width: 2.4; }
.sides.s4 .sd-done { animation: sd-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
@keyframes sd-pop { from { transform: scale(.4); opacity: 0; } }

/* the team's case: checks run then pass, the status moves, flags, the reason and the record appear */
.sd-case { overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: linear-gradient(180deg, rgba(20, 28, 58, .94), rgba(11, 16, 34, .97)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .03), 0 50px 90px -40px rgba(0, 0, 0, .9); color: rgba(255, 255, 255, .8); font-size: 13px; }
.sd-case__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sd-status { display: grid; }
.sd-status > .status { grid-area: 1 / 1; justify-self: end; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); }
.sd-warn { border: 1px solid rgba(247, 144, 9, .35); background: rgba(247, 144, 9, .14); color: #FEC84B; }
.sd-warn::before { background: var(--warn); }
.sides:not(.s4) .sd-status--1, .sides.s4:not(.s5) .sd-status--4, .sides.s5 .sd-status--5 { opacity: 1; transform: none; }
.sd-case__sec { padding: 12px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sd-checks, .sd-tl { display: grid; margin: 0; padding: 0; list-style: none; }
.sd-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 9px; color: #fff; font-size: 13px; }
.sd-check .mono { margin-left: 6px; color: rgba(255, 255, 255, .6); font-size: 11.5px; }
.sd-state { display: grid; font-size: 11px; font-weight: 600; }
.sd-state > span { grid-area: 1 / 1; justify-self: end; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.sd-state__wait { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .45); }
.sd-state__run { display: inline-flex; align-items: center; gap: 6px; background: rgba(100, 244, 248, .1); color: #9FFBFF; opacity: 0; }
.sd-spin { width: 9px; height: 9px; border: 1.5px solid rgba(159, 251, 255, .3); border-top-color: #9FFBFF; border-radius: 50%; animation: sd-spin .7s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
.sd-state__ok { background: rgba(18, 183, 106, .16); color: #75E0A7; opacity: 0; transform: scale(.7); }
.sides.s1 .sd-check--1 .sd-state__wait, .sides.s2 .sd-check--2 .sd-state__wait, .sides.s3 .sd-check--3 .sd-state__wait, .sides.s4 .sd-check--4 .sd-state__wait { opacity: 0; }
.sides.s1 .sd-check--1 .sd-state__run, .sides.s2 .sd-check--2 .sd-state__run, .sides.s3 .sd-check--3 .sd-state__run, .sides.s4 .sd-check--4 .sd-state__run { animation: sd-run .9s ease both; }
@keyframes sd-run { 0% { opacity: 0; } 12%, 78% { opacity: 1; } 100% { opacity: 0; } }
.sides.s1 .sd-check--1 .sd-state__ok, .sides.s2 .sd-check--2 .sd-state__ok, .sides.s3 .sd-check--3 .sd-state__ok, .sides.s4 .sd-check--4 .sd-state__ok { opacity: 1; transform: none; transition-delay: .75s; }
.sides.s1 .sd-check--1, .sides.s2 .sd-check--2, .sides.s3 .sd-check--3, .sides.s4 .sd-check--4 { animation: sd-row 1.6s ease .75s; }
@keyframes sd-row { 0% { background: rgba(100, 244, 248, .12); } 100% { background: rgba(100, 244, 248, 0); } }
.sd-flag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; max-height: 0; margin: 0 -8px; padding: 0 10px; overflow: hidden; border: 1px solid transparent; border-radius: 11px; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .5s var(--ease), padding .5s var(--ease), border-color .4s; }
.sd-flag__k { color: rgba(255, 255, 255, .55); font-size: 12px; }
.sd-flag__v { color: #FEC84B; font-size: 12px; }
.sd-flag__tag { padding: 2px 8px; border-radius: var(--r-pill); background: rgba(247, 144, 9, .16); color: #FEC84B; font-size: 11px; font-weight: 600; }
.sides.s4 .sd-flag { max-height: 60px; margin-top: 8px; padding: 9px 10px; border-color: rgba(247, 144, 9, .3); background: rgba(247, 144, 9, .07); opacity: 1; transition-delay: .6s; }
.sd-tl { position: relative; gap: 9px; }
.sd-tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, .14); }
.sd-ev { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-left: 20px; color: rgba(255, 255, 255, .8); font-size: 12.5px; opacity: .16; transform: translateX(-4px); transition: opacity .45s var(--ease), transform .5s var(--ease), color .4s; }
.sd-ev::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; background: #0D132A; }
.sd-ev .mono { color: rgba(255, 255, 255, .55); font-size: 11.5px; }
.sd-ev.is-review::before { border-color: var(--warn); }
.sd-ev.is-done::before { border-color: var(--ok); background: var(--ok); }
.sides.s1 .sd-ev--1, .sides.s2 .sd-ev--2, .sides.s3 .sd-ev--3, .sides.s4 .sd-ev--4, .sides.s5 .sd-ev--5 { opacity: 1; transform: none; transition-delay: .9s; }
.sides.s5 .sd-ev.is-done { color: #fff; font-weight: 600; }
.sd-note { display: flex; gap: 11px; max-height: 0; padding: 0 18px; overflow: hidden; border-bottom: 1px solid transparent; background: rgba(37, 71, 233, .08); color: rgba(255, 255, 255, .86); font-size: 12.5px; line-height: 1.45; opacity: 0; transition: max-height .5s var(--ease), padding .5s var(--ease), opacity .4s; }
.sd-note .casefile__kicker { margin-bottom: 2px; }
.sides.s5 .sd-note { max-height: 90px; padding: 12px 18px; border-bottom-color: rgba(255, 255, 255, .06); opacity: 1; transition-delay: .5s; }
.sd-case__foot { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 18px 14px; color: rgba(255, 255, 255, .78); font-size: 12.5px; opacity: .2; transition: opacity .5s 1s; }
.sd-case__foot .rec-dot { width: 6px; height: 6px; }
.sides.s5 .sd-case__foot { opacity: 1; }

/* the steps, with a rail that fills as you go */
.sides__steps { position: relative; margin: 0; padding: 0 0 0 40px; list-style: none; }
.sides__steps::before, .sides__steps::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .12); }
.sides__steps::after { width: 2px; left: -.5px; background: linear-gradient(180deg, var(--cyan), #8EA4FF); transform: scaleY(var(--fill, 0)); transform-origin: top; transition: transform .6s var(--ease); }
.sd-step { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 62vh; opacity: .3; transition: opacity .5s var(--ease); }
.sd-step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 40px; }
.sd-step:last-child { min-height: 56vh; }
.sd-step::before { content: ""; position: absolute; left: -46px; top: 50%; z-index: 1; width: 13px; height: 13px; margin-top: -6px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--night); transition: border-color .4s, background-color .4s, box-shadow .4s; }
.sd-step:first-child::before { top: 53px; }
.sd-step.is-on { opacity: 1; }
.sd-step.is-on::before, .sd-step.is-past::before { border-color: var(--cyan); background: var(--cyan); }
.sd-step.is-on::before { box-shadow: 0 0 0 6px rgba(100, 244, 248, .16); }
.sd-step__num { color: var(--cyan); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.sd-step__title { margin-top: 10px; color: #fff; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.sd-step__text { max-width: 40ch; margin-top: 12px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.6; }
.sd-step__team { display: none; align-items: center; gap: 8px; margin-top: 14px; color: rgba(255, 255, 255, .8); font-size: 13px; }

@media (max-width: 1023px) {
  .sides__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sides__stage { top: 76px; z-index: 1; height: auto; padding: 8px 0 16px; background: linear-gradient(180deg, var(--night) 88%, rgba(7, 10, 23, 0)); }
  .sides__frame { margin-bottom: calc((var(--k, 1) - 1) * var(--fh, 660px)); }
  .sd-step, .sd-step:first-child, .sd-step:last-child { min-height: 48vh; padding-top: 0; justify-content: center; }
  .sd-step:first-child::before { top: 50%; }
}
@media (max-width: 640px) {
  .sides__frame { width: 236px; }
  .sides__col--team, .sd-link { display: none; }
  .sd-step__team { display: flex; }
  .sides__steps { padding-left: 28px; }
  .sd-step::before { left: -34px; }
}
@keyframes hw-blink { 50% { opacity: .25; } }
@keyframes hw-march { to { stroke-dashoffset: -12; } }

/* ==========================================================================
   7. Evidence: "The AI reads. Your rules decide." Three cases run through the
   same rules: models read, a wall marks where they stop, the first rule that
   matches decides, and the decision is written to the audit log.
   ========================================================================== */
.evidence { padding-block: clamp(96px, 10vw, 144px) clamp(88px, 10vw, 144px); }
.ev__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 28px 72px; }
.ev__head .h2 { margin-top: 22px; }
.evidence .ev__head .lede { margin-top: 0; padding-bottom: 6px; }
.ev-points { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(56px, 6vw, 80px) 0 0; padding: 0; border-block: 1px solid rgba(255, 255, 255, .1); list-style: none; }
.ev-points > li { position: relative; padding: 28px 32px 30px; transition: background-color .5s var(--ease); }
.ev-points > li:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 80%); }
.ev-points > li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.ev-points > li + li::before, .ev-points > li + li::after { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) center / 1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) center / 100% 1px no-repeat; }
.ev-points > li + li::after { top: auto; bottom: -5px; }
.ev-points__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(100, 244, 248, .1); box-shadow: inset 0 0 0 1px rgba(100, 244, 248, .2); color: var(--cyan); transition: background-color .4s, color .4s; }
.ev-points > li:hover .ev-points__ico { background: var(--cyan); color: var(--ink); }
.ev-points__ico .i { width: 19px; height: 19px; }
.ev-points__t { margin-top: 18px; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.ev-points__x { margin-top: 6px; color: rgba(255, 255, 255, .66); font-size: 15px; line-height: 1.55; }

.tr { margin: clamp(48px, 5vw, 72px) 0 0; }
/* the three cases */
.tr__cases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 36px; padding: 6px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .03); }
.tr__cases-label { padding: 0 8px 0 10px; color: rgba(255, 255, 255, .5); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.tr-case { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 16px 6px 6px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; background: none; color: rgba(255, 255, 255, .66); font: 600 13.5px/1 var(--font); cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
.tr-case:hover { color: #fff; }
.tr-case:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tr-case[aria-pressed="true"] { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: #fff; }
.tr-case__av { background: rgba(255, 255, 255, .12); }
.tr-case[aria-pressed="true"] .tr-case__av { background: linear-gradient(135deg, #3355F2, #0F1F7A); }
.tr-case__bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; }
.tr-case__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #8EA4FF); transform: scaleX(var(--cp, 0)); transform-origin: left; }
.tr-case[aria-pressed="true"] .tr-case__bar { opacity: 1; }
.tr__ver { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 0 12px; color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 11px; }
.tr__ver .i { color: #8EA4FF; }

.tr__ui { position: relative; display: grid; grid-template-columns: minmax(0, .86fr) 56px minmax(0, 1.42fr) minmax(0, .8fr); align-items: start; column-gap: clamp(24px, 3vw, 44px); }
.tr__wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tr__col { position: relative; z-index: 1; }
.tr__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 14px; color: rgba(255, 255, 255, .62); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tr__badge { padding: 3px 9px; border: 1px solid rgba(100, 244, 248, .25); border-radius: var(--r-pill); color: var(--cyan); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.tr__badge--rules { border-color: rgba(142, 164, 255, .3); color: #C3D0FF; }

/* the AI side */
.tr-sigs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tr-sig { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 2px 12px; min-height: 66px; padding: 10px 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .03); transition: border-color .4s, background-color .4s, box-shadow .4s; }
.tr-sig__ico { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55); transition: background-color .4s, color .4s; }
.tr-sig__ico .i { width: 17px; height: 17px; }
.tr-sig__k { color: #fff; font-size: 13.5px; font-weight: 550; }
.tr-sig__v { display: flex; align-items: center; min-height: 16px; color: rgba(255, 255, 255, .72); font-family: var(--mono); font-size: 11.5px; }
.tr-sig__caret { width: 6px; height: 12px; margin-left: 2px; background: var(--cyan); opacity: 0; }
.tr-sig.is-reading .tr-sig__caret { opacity: 1; animation: tr-caret .5s steps(2) infinite; }
@keyframes tr-caret { 50% { opacity: 0; } }
.tr-sig::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(100, 244, 248, .14), transparent); transform: translateX(-120%); pointer-events: none; }
.tr-sig.is-reading::after { animation: tr-read .9s ease-in-out; }
@keyframes tr-read { to { transform: translateX(320%); } }
.tr-sig.is-on { border-color: rgba(100, 244, 248, .26); background: rgba(100, 244, 248, .045); }
.tr-sig.is-on .tr-sig__ico { background: rgba(100, 244, 248, .14); color: var(--cyan); }
.tr-sig.is-warn .tr-sig__v { color: #FEC84B; }
.tr-sig.is-warn.is-on { border-color: rgba(247, 144, 9, .38); background: rgba(247, 144, 9, .07); }
.tr-sig.is-warn.is-on .tr-sig__ico { background: rgba(247, 144, 9, .16); color: #FEC84B; }
.tr-sig.is-bad .tr-sig__v { color: #FDA29B; }
.tr-sig.is-bad.is-on { border-color: rgba(240, 68, 56, .4); background: rgba(240, 68, 56, .08); }
.tr-sig.is-bad.is-on .tr-sig__ico { background: rgba(240, 68, 56, .16); color: #FDA29B; }
.tr-sig.is-linked { box-shadow: 0 0 0 3px rgba(142, 164, 255, .2); border-color: rgba(142, 164, 255, .55); }

/* the wall: models stop here */
.tr__wall { position: relative; align-self: stretch; display: grid; justify-items: center; }
.tr__wall-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 9px); }
.tr__wall-lock { position: absolute; top: 44%; left: 50%; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: #0D1330; color: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(7, 10, 23, .6); }
.tr__wall-t { position: absolute; top: 44%; left: 50%; margin-top: 26px; padding: 8px 0; background: #0B1022; color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%); }
.tr.is-cross .tr__wall-lock { animation: tr-lock .6s ease-out; }
@keyframes tr-lock { 40% { box-shadow: 0 0 0 6px rgba(7, 10, 23, .6), 0 0 0 12px rgba(100, 244, 248, .2); border-color: var(--cyan); } }

/* the rules */
.tr-rules { margin: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: linear-gradient(180deg, rgba(20, 28, 58, .95), rgba(11, 16, 34, .97)); box-shadow: 0 0 0 6px rgba(255, 255, 255, .03), 0 50px 90px -40px rgba(0, 0, 0, .9); list-style: none; }
.tr-rule { position: relative; display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; overflow: hidden; border: 1px solid transparent; border-radius: 14px; transition: border-color .4s, background-color .4s, opacity .4s; }
.tr-rule + .tr-rule { margin-top: 2px; }
.tr-rule__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .65); font-family: var(--mono); font-size: 11px; }
.tr-rule__kw { color: #8EA4FF; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.tr-rule__if { color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.4; }
.tr-tok { display: inline-block; padding: 1px 7px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(255, 255, 255, .05); color: #fff; font-weight: 550; transition: border-color .3s, background-color .3s, color .3s; }
.tr-rule.is-eval .tr-tok, .tr-rule.is-hover .tr-tok { border-color: rgba(142, 164, 255, .6); background: rgba(142, 164, 255, .16); }
.tr-rule__then { justify-self: end; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.tr-rule__then--bad { background: rgba(240, 68, 56, .14); color: #FDA29B; }
.tr-rule__then--warn { background: rgba(247, 144, 9, .16); color: #FEC84B; }
.tr-rule__then--ok { background: rgba(18, 183, 106, .14); color: #75E0A7; }
.tr-rule__res { display: grid; justify-items: end; font-family: var(--mono); font-size: 11px; }
.tr-rule__res > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; opacity: 0; transform: translateX(4px); transition: opacity .3s, transform .35s var(--ease); }
.tr-rule__res .i { width: 12px; height: 12px; stroke-width: 2.4; }
.tr-rule__no { color: rgba(255, 255, 255, .45); }
.tr-rule__yes { color: var(--cyan); }
.tr-rule__skip { color: rgba(255, 255, 255, .3); }
.tr-rule::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(142, 164, 255, .14), transparent); transform: translateX(-100%); pointer-events: none; }
.tr-rule.is-eval::after { animation: tr-eval .65s ease-in-out; }
@keyframes tr-eval { to { transform: translateX(100%); } }
.tr-rule.is-no { opacity: .55; }
.tr-rule.is-skip { opacity: .3; }
.tr-rule.is-no .tr-rule__no, .tr-rule.is-yes .tr-rule__yes, .tr-rule.is-skip .tr-rule__skip { opacity: 1; transform: none; }
.tr-rule.is-yes { border-color: rgba(100, 244, 248, .4); background: rgba(100, 244, 248, .07); box-shadow: 0 0 0 4px rgba(100, 244, 248, .06); }
.tr-rule.is-yes .tr-rule__n { background: var(--cyan); color: var(--ink); }

/* the outcome */
.tr-oc { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .04); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.tr-oc__k { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.tr-oc__v { color: rgba(255, 255, 255, .6); font-size: 11px; }
.tr-oc.is-warn { border-color: rgba(247, 144, 9, .4); background: rgba(247, 144, 9, .09); }
.tr-oc.is-warn .tr-oc__k { color: #FEC84B; }
.tr-oc.is-ok { border-color: rgba(18, 183, 106, .4); background: rgba(18, 183, 106, .09); }
.tr-oc.is-ok .tr-oc__k { color: #75E0A7; }
.tr-oc.is-bad { border-color: rgba(240, 68, 56, .42); background: rgba(240, 68, 56, .09); }
.tr-oc.is-bad .tr-oc__k { color: #FDA29B; }
.tr-hum { display: flex; align-items: center; gap: 11px; max-height: 0; margin-top: 0; padding: 0 16px; overflow: hidden; border: 1px solid transparent; border-radius: 16px; opacity: 0; transition: max-height .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease), opacity .4s, border-color .4s; }
.tr-hum > span:last-child { display: grid; gap: 2px; }
.tr-hum__k { color: #75E0A7; font-size: 14px; font-weight: 600; }
.tr-hum__v { color: rgba(255, 255, 255, .6); font-size: 11px; }
.tr-log { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 12px; opacity: 0; transition: opacity .4s; }
.tr-log__k { flex: none; padding: 2px 7px; border-radius: 6px; background: rgba(142, 164, 255, .16); color: #C3D0FF; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.tr-log__v { min-width: 0; min-height: 1.5em; color: rgba(255, 255, 255, .78); font-size: 11px; line-height: 1.5; }
.tr-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(255, 255, 255, .72); font-size: 13px; opacity: 0; transition: opacity .5s; }
.tr-note .i { color: var(--cyan); }
.tr.s-out .tr-oc { opacity: 1; transform: none; }
.tr.s-hum .tr-hum { max-height: 80px; margin-top: 10px; padding: 12px 16px; border-color: rgba(18, 183, 106, .35); background: rgba(18, 183, 106, .08); opacity: 1; }
.tr.s-log .tr-log, .tr.s-log .tr-note { opacity: 1; }
.tr.is-fade .tr__ui { opacity: .3; transition: opacity .5s; }

/* the wires */
.tr-w { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.25; stroke-dasharray: 3 4; transition: stroke .4s; }
.tr-w.is-on { stroke: rgba(100, 244, 248, .5); }
.tr-w.is-warn.is-on { stroke: rgba(247, 144, 9, .6); }
.tr-w.is-bad.is-on { stroke: rgba(240, 68, 56, .6); }
.tr-w.is-linked { stroke: rgba(142, 164, 255, .9); stroke-dasharray: none; }
.tr-w--out { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.45, 0, .3, 1); }
.tr.s-out .tr-w--out { stroke-dashoffset: 0; }
.tr-dot { fill: var(--cyan); opacity: 0; filter: drop-shadow(0 0 4px rgba(100, 244, 248, .9)); }

@media (max-width: 1199px) {
  .tr__ui { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.3fr); row-gap: 36px; }
  .tr__col--out { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .tr__col--out .tr__label { grid-column: 1 / -1; }
  .tr.s-hum .tr-hum { margin-top: 0; }
  .tr-log, .tr-note { grid-column: 1 / -1; }
  .tr-w--out { display: none; }
}
@media (max-width: 1023px) {
  .ev__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tr__ui { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tr__wires { display: none; }
  .tr__wall { height: 72px; }
  .tr__wall-line { top: 8px; bottom: 8px; }
  .tr__wall-lock { top: 50%; }
  .tr__wall-t { top: 50%; left: calc(50% + 26px); margin-top: 0; padding: 0 8px; writing-mode: horizontal-tb; transform: translateY(-50%); }
  .tr__col--out { margin-top: 36px; }
  .ev-points { grid-template-columns: minmax(0, 1fr); }
  .ev-points > li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ev-points > li + li::before, .ev-points > li + li::after { display: none; }
}
@media (max-width: 640px) {
  .tr__cases-label, .tr__ver { display: none; }
  .tr__cases { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tr-case { flex: 1 1 0; justify-content: center; min-width: 0; padding: 6px 8px; font-size: 12.5px; white-space: nowrap; }
  .tr-case__av { display: none; }
  .tr-rule { grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 6px 10px; }
  .tr-rule__kw { display: none; }
  .tr-rule__then { grid-column: 2; grid-row: 2; justify-self: start; }
  .tr-rule__res { grid-column: 3; grid-row: 1 / span 2; }
  .tr__col--out { grid-template-columns: minmax(0, 1fr); }
  .tr.s-hum .tr-hum { margin-top: 10px; }
  .ev-points > li { padding: 24px 0; }
}

/* ==========================================================================
   Intelligence · option 1: face space. Your collection as a field of face
   vectors; each search sends a ring through it and links the closest faces.
   ========================================================================== */
.intel .io { margin: 0; }
.fs-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-block: 1px solid var(--line); }
.fs { position: relative; z-index: 1; }
.fs-grid::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}
.fs { margin: 0; padding: 32px; }
.fs__ui { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, #FFFFFF, #F5F7FE); box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 30px 60px -40px rgba(15, 31, 122, .35); font-size: 13px; }
.fs__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .85); }
.fs__title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 650; }
.fs__title .i { color: var(--royal); }
.fs__q { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--canvas-2); color: var(--royal-900); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fs__live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); animation: hw-blink 1.6s ease-in-out infinite; }
.fs__count { transition: color .4s; }
.fs__count.is-bump { color: var(--ok-ink); }
.fs__body { display: grid; flex: 1; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; padding: 18px; }
.fs__space { position: relative; min-height: 360px; overflow: hidden; border: 1px solid #E8ECF5; border-radius: 16px; background: radial-gradient(70% 70% at 50% 45%, #FFFFFF, #F1F4FB 90%); }
.fs__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.fs__probe { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--royal), 0 10px 22px -8px rgba(37, 71, 233, .6); color: var(--royal); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.fs__probe-face { width: 34px; height: 34px; }
.fs__tag { position: absolute; left: 50%; top: 50%; z-index: 2; padding: 3px 8px; border-radius: var(--r-pill); background: var(--royal); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; white-space: nowrap; opacity: 0; transform: translate(-50%, -48px); transition: opacity .35s; }
.fs.is-probe .fs__probe { opacity: 1; transform: none; }
.fs.is-probe .fs__tag { opacity: 1; }
.fs.is-merge .fs__probe { opacity: 0; transform: scale(.15); transition: opacity .6s .2s, transform .7s cubic-bezier(.5, 0, .3, 1); }
.fs.is-merge .fs__tag { opacity: 0; }
.fs__side { display: flex; flex-direction: column; }
.fs__label { margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.fs__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fs-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; opacity: .45; transition: opacity .35s, border-color .35s, background-color .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.fs-m.is-on { opacity: 1; }
.fs-m__id { color: var(--ink); font-size: 12px; }
.fs-m__pct { color: var(--ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-m__bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: var(--r-pill); background: var(--canvas); }
.fs-m__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8FB4F8, var(--royal)); transform: scaleX(var(--w, 0)); transform-origin: left; transition: transform .7s cubic-bezier(.3, .9, .3, 1); }
.fs-m.is-hit { border-color: #FECDCA; background: linear-gradient(180deg, #FFFFFF, #FEF6F5); transform: translateX(-4px); }
.fs-m.is-hit .fs-m__bar > span { background: linear-gradient(90deg, #FDA29B, #D92D20); }
.fs-m.is-low .fs-m__bar > span { background: linear-gradient(90deg, #D5DCEB, #9AA7C4); }
.fs__res { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.fs__res-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 3px rgba(37, 71, 233, .16); animation: hw-blink 1.2s ease-in-out infinite; }
.fs__res.is-hit { color: var(--bad-ink); }
.fs__res.is-hit .fs__res-dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(240, 68, 56, .18); animation: none; }
.fs__res.is-new { color: var(--ok-ink); }
.fs__res.is-new .fs__res-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); animation: none; }
.fs__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 13px 20px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .75); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.fs__foot > span:first-child { display: flex; align-items: center; gap: 8px; }
.fs__foot .i { color: var(--royal); }
.fs__foot .mono { color: var(--muted); font-size: 12px; }

.fs-bl { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 40px 32px 32px 8px; }
.fs-bl > p:not(.mono-label) { color: var(--body); font-size: 16px; }
.fs-hit { position: relative; display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); transition: border-color .4s, box-shadow .4s; }
.fs-hit__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--canvas-2); color: var(--royal); transition: background-color .4s, color .4s; }
.fs-hit__text { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--body); font-size: 13px; }
.fs-hit__ev { color: var(--ink); font-size: 12.5px; }
.fs-hit__st { display: grid; }
.fs-hit__st > .status { grid-area: 1 / 1; justify-self: end; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.fs-hit__bad { opacity: 0; transform: scale(.6); }
.fs-hit.is-hit { border-color: #FECDCA; box-shadow: 0 0 0 4px rgba(240, 68, 56, .08), var(--shadow-1); }
.fs-hit.is-hit .fs-hit__icon { background: var(--bad-bg); color: var(--bad-ink); }
.fs-hit.is-hit .fs-hit__ok { opacity: 0; transform: scale(.6); }
.fs-hit.is-hit .fs-hit__bad { opacity: 1; transform: none; }
.fs-hit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(240, 68, 56, .12), transparent); transform: translateX(-100%); }
.fs-hit.is-hit::after { animation: tr-read .9s ease-in-out; }

@media (max-width: 1199px) {
  .fs-grid { grid-template-columns: minmax(0, 1fr); }
  .fs-bl { padding: 8px 32px 36px; }
  .fs-link { display: none; }
}
@media (max-width: 767px) {
  .fs { padding: 24px 0; }
  .fs-bl { padding: 8px 0 28px; }
  .fs__body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .fs__space { min-height: 280px; }
  .fs-grid::after { display: none; }
}

/* one cell: the search on the left feeds the blocklist on the right */
.fs-link { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fs-link__p { fill: none; stroke: #C4CBDA; stroke-width: 1.25; stroke-dasharray: 3 4; animation: hw-march 1.4s linear infinite; }
.fs-link__hot { fill: none; stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.fs-grid.is-hit .fs-link__hot { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.45, 0, .3, 1), opacity .2s; }
.fs-link__dot { fill: var(--bad); opacity: 0; filter: drop-shadow(0 0 4px rgba(240, 68, 56, .7)); }
.fs-hit__time { align-self: flex-start; margin-top: 2px; color: var(--tone2); font-size: 11px; opacity: 0; transition: opacity .3s; }
.fs-hit.is-hit .fs-hit__time { opacity: 1; }
.bl-hitrow th, .bl-hitrow td { transition: background-color .4s; }
.fs-grid.is-hit .bl-hitrow th, .fs-grid.is-hit .bl-hitrow td { background: #FEF6F5; }
.fs-grid.is-hit .bl-hitcell .yes { background: var(--bad); color: #fff; box-shadow: 0 0 0 5px rgba(240, 68, 56, .15); animation: fs-cell .9s ease-out; }
.bl-hitcell .yes { transition: background-color .4s, color .4s, box-shadow .4s; }
@keyframes fs-cell { 0% { transform: scale(.6); } 50% { transform: scale(1.18); } 100% { transform: none; } }
.fs__res-t { font-variant-numeric: tabular-nums; }
.fs-m { cursor: default; }
.fs-m.is-hover { border-color: rgba(37, 71, 233, .45); box-shadow: 0 0 0 3px rgba(37, 71, 233, .1); }
.fs__probe { transform: translateY(-18px) scale(.4); }

/* ==========================================================================
   9. Sara + White label, options. Shared parts first: the Sara chat that
   reads and answers, and the brand kit that re-skins the hosted flow.
   ========================================================================== */
.intel + .dx.guides { border-top: 0; }
.dx .section-head { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- Sara ---------- */
.sa { position: relative; width: 100%; min-width: 0; }
.sa__ui { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 30px 60px -40px rgba(15, 31, 122, .4); font-size: 14px; }
.sa__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sa__name { color: var(--ink); font-weight: 650; }
.sa__role { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.sa__status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); font-size: 12px; }
.sa__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .16); }
.sa.is-reading .sa__dot { background: var(--royal); box-shadow: 0 0 0 3px rgba(37, 71, 233, .18); animation: hw-blink .8s ease-in-out infinite; }
.sa__log { position: relative; display: grid; min-height: 272px; }
.sa-turn { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .5s var(--ease); pointer-events: none; }
.sa-turn.is-shown { opacity: 1; transform: none; }
.sa-me { align-self: flex-end; max-width: 82%; padding: 10px 15px; border-radius: 18px 18px 5px 18px; background: var(--royal); color: #fff; line-height: 1.5; opacity: 0; transform: translateY(8px) scale(.98); transform-origin: bottom right; transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.sa-turn.s-me .sa-me { opacity: 1; transform: none; }
.sa-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s; }
.sa-turn.s-read .sa-read { max-height: 80px; opacity: 1; }
.sa-read__k { margin-right: 2px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.sa-look { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink-2); font-size: 11.5px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .35s, border-color .3s; }
.sa-look.is-on { opacity: 1; transform: none; }
.sa-look__i { position: relative; width: 12px; height: 12px; border: 1.5px solid #C9D3F2; border-top-color: var(--royal); border-radius: 50%; animation: sd-spin .7s linear infinite; }
.sa-look.is-done { border-color: #CFE9DC; }
.sa-look.is-done .sa-look__i { border: 0; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; animation: none; }
.sa-ans { max-width: 96%; padding: 14px 16px; border-radius: 18px 18px 18px 5px; background: var(--canvas); color: var(--body); line-height: 1.55; opacity: 0; transition: opacity .3s; }
.sa-turn.s-ans .sa-ans { opacity: 1; }
.sa-ans strong { color: var(--ink); }
.sa-ans .w { opacity: 0; transition: opacity .25s; }
.sa-ans .w.is-on { opacity: 1; }
.sa-prov { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 12px; opacity: 0; transition: opacity .4s; }
.sa-turn.s-prov .sa-prov { opacity: 1; }
.sa-rep { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.sa-turn.s-prov .sa-rep { opacity: 1; transform: none; }
.sa-rep__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); }
.sa-rep__t { display: grid; flex: 1; min-width: 0; }
.sa-rep__k { color: var(--ink); font-size: 13px; font-weight: 650; }
.sa-rep__v { color: var(--muted); font-size: 11.5px; }
.sa-rep__btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.sa__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa__chips span { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.sa__input { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 7px 7px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: border-color .3s, box-shadow .3s; }
.sa.is-typing .sa__input { border-color: rgba(37, 71, 233, .45); box-shadow: 0 0 0 4px rgba(37, 71, 233, .08); }
.sa__field { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; overflow: hidden; color: var(--ink); font-size: 13.5px; white-space: nowrap; }
.sa__typed { overflow: hidden; text-overflow: ellipsis; }
.sa__typed:not(:empty) ~ .sa__ph { display: none; }
.sa__ph { overflow: hidden; text-overflow: ellipsis; }
.sa__ph { color: var(--muted); }
.sa.is-typing .sa__ph { display: none; }
.sa__caret { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--royal); animation: tr-caret .6s steps(2) infinite; }
.sa.is-typing .sa__caret { display: block; }
.sa__send { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--royal); color: #fff; transition: transform .2s; }
.sa.is-send .sa__send { animation: dx-press .4s ease-in-out; }
.sa-stat { position: absolute; z-index: 2; top: -26px; right: -18px; display: grid; gap: 4px; width: 188px; padding: 12px 14px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px; background: #fff; box-shadow: var(--shadow-float); animation: bob 8s ease-in-out -2s infinite; }
.sa-stat__k { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.sa-stat__row { display: flex; align-items: baseline; gap: 8px; }
.sa-stat__v { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sa-stat__d { padding: 1px 7px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: 11.5px; font-weight: 650; }
.sa-stat__bars { display: flex; align-items: flex-end; gap: 5px; height: 30px; margin-top: 6px; }
.sa-stat__bars span { flex: 1; border-radius: 3px 3px 1px 1px; background: #D5DEFB; transform-origin: bottom; }
.sa-stat__bars span:nth-child(1) { height: 42%; } .sa-stat__bars span:nth-child(2) { height: 55%; } .sa-stat__bars span:nth-child(3) { height: 48%; } .sa-stat__bars span:nth-child(4) { height: 66%; } .sa-stat__bars span:nth-child(5) { height: 60%; } .sa-stat__bars span:nth-child(6) { height: 78%; }
.sa-stat__bars span:nth-child(7) { height: 100%; background: linear-gradient(180deg, var(--sky), var(--royal)); }
.sa.is-stat .sa-stat__bars span { animation: sa-bar .8s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes sa-bar { from { transform: scaleY(.1); } }

/* ---------- the brand kit ---------- */
[data-brand], [data-brand-mirror] { --mb: #0F5C54; --mb-tint: #E6F2EF; --mb-3: #C8A45C; --mb-font: Georgia, "Times New Roman", serif; }
[data-b="1"] { --mb: #5B34D6; --mb-tint: #EFEBFD; --mb-3: #F2B84B; --mb-font: var(--font); }
[data-b="2"] { --mb: #B5452E; --mb-tint: #FBEEE9; --mb-3: #1F2A44; --mb-font: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
.br-phone { width: 236px; }
.br-screen { position: relative; height: 440px; }
.br-logo { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--mb); color: #fff; font-family: var(--mb-font); font-size: 13px; font-weight: 700; transition: background-color .6s var(--ease); }
.br-logo--sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.br-name { transition: opacity .25s; }
.mb-bar .br-name { color: var(--ink); font-family: var(--mb-font); font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.br-hero { display: grid; place-items: center; height: 104px; margin-top: 14px; border-radius: 18px; background: var(--mb-tint); color: var(--mb); transition: background-color .6s var(--ease), color .6s var(--ease); }
.br-hero svg { width: 118px; height: auto; }
.br-hero__card { fill: #fff; stroke: currentColor; stroke-width: 1.5; }
.br-hero__ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.br-hero__arc { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; opacity: .35; }
.br-title { margin-top: 14px; color: var(--ink); font-family: var(--mb-font); font-size: 18px; font-weight: 650; letter-spacing: -.025em; line-height: 1.3; }
.br-text { margin-top: 6px; color: var(--body); font-size: 13px; line-height: 1.45; }
.br-btn { display: grid; place-items: center; height: 44px; margin-top: 16px; border-radius: var(--r-pill); background: var(--mb); color: #fff; font-size: 14px; font-weight: 650; transition: background-color .6s var(--ease); }
.br-btn--sm { display: inline-grid; height: 36px; margin-top: 12px; padding: 0 16px; font-size: 12.5px; }
.br-screen .phone__rec { margin-top: 10px; }
.br-sweep { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.is-swap .br-sweep { animation: br-sweep .8s cubic-bezier(.45, 0, .3, 1); }
@keyframes br-sweep { to { transform: translateX(120%); } }
.br-theme { display: grid; gap: 2px; width: 230px; padding: 12px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-float); font-size: 13px; }
.br-theme__title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 650; }
.br-theme__title .i { color: var(--mb); transition: color .6s; }
.br-theme__row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 4px; color: var(--muted); }
.br-theme__row--stack { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 4px 4px; }
.br-sws { display: flex; gap: 5px; }
.br-sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .12); transition: background-color .6s var(--ease); }
.br-sw--1 { background: var(--mb); }
.br-sw--2 { background: var(--mb-tint); }
.br-sw--3 { background: var(--mb-3); }
.br-font { color: var(--ink); font-family: var(--mb-font); font-size: 16px; }
.br-msgs { display: flex; gap: 4px; }
.br-msgs span { padding: 2px 8px; border-radius: var(--r-pill); background: var(--mb-tint); color: var(--mb); font-size: 11px; font-weight: 600; transition: background-color .6s, color .6s; }
.br-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.br-switch__k { margin-right: 4px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.br-go { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink-2); font: 600 12.5px/1 var(--font); cursor: pointer; transition: border-color .3s, box-shadow .3s, color .3s; }
.br-go__dot { width: 10px; height: 10px; border-radius: 50%; background: #0F5C54; }
.br-go[data-b="1"] .br-go__dot { background: #5B34D6; }
.br-go[data-b="2"] .br-go__dot { background: #B5452E; }
.br-go:hover { border-color: #C9D3F2; }
.br-go:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.br-go[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 14, 31, .06); color: var(--ink); }
.br-mail { width: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-float); font-size: 12.5px; }
.br-mail__head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.br-mail__from { display: grid; flex: 1; min-width: 0; }
.br-mail__from .br-name { color: var(--ink); font-family: var(--mb-font); font-weight: 650; }
.br-mail__sub { color: var(--muted); font-size: 11.5px; }
.br-mail__time { color: var(--tone2); font-size: 10.5px; }
.br-mail__body { padding: 14px 14px 16px; border-top: 3px solid var(--mb); transition: border-color .6s; }
.br-mail__h { color: var(--ink); font-family: var(--mb-font); font-size: 14px; font-weight: 650; }
.br-mail__p { margin-top: 5px; color: var(--body); line-height: 1.45; }
.br-mail__foot { padding: 9px 14px; border-top: 1px solid var(--line); background: #FAFBFD; color: var(--muted); font-size: 11px; }
.br-msgs-list { display: grid; gap: 8px; width: 260px; margin: 0; padding: 0; list-style: none; }
.br-mg { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 12px 24px -18px rgba(15, 31, 122, .4); }
.br-mg__k { justify-self: start; padding: 1px 8px; border-radius: var(--r-pill); background: var(--mb-tint); color: var(--mb); font-size: 10.5px; font-weight: 650; transition: background-color .6s, color .6s; }
.br-mg--f .br-mg__k { background: #FEF3F2; color: var(--bad-ink); }
.br-mg__v { color: var(--ink-2); font-family: var(--mb-font); font-size: 12.5px; line-height: 1.4; }

/* ---------- option 1: refined pair ---------- */
.dx-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.dx-pair::after { content: ""; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat; }
.dx-cell { position: relative; display: flex; flex-direction: column; padding: 32px 32px 40px; }
.dx-cell + .dx-cell { border-left: 1px solid var(--line); }
.dx-cell + .dx-cell::before, .dx-cell + .dx-cell::after { content: ""; position: absolute; left: -5px; top: -5px; z-index: 2; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.dx-cell + .dx-cell::after { top: auto; bottom: -5px; }
.dx-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 580px; margin-bottom: 32px; padding: 40px 32px 32px; overflow: hidden; border-radius: 24px; }
.dx-stage--sara { background: linear-gradient(180deg, #F4F6FA 0%, #EEF2FB 100%); box-shadow: inset 0 0 0 1px var(--line); }
.dx-stage--sara::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(37, 71, 233, .45) 1.1px, transparent 1.6px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(70% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 82%); mask-image: radial-gradient(70% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 82%); }
.dx-stage--sara .sa { width: min(100%, 460px); margin-top: 22px; }
.dx-stage--brand { background: radial-gradient(30% 22% at 16% 88%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), radial-gradient(34% 24% at 86% 96%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FFFFFF 0%, #DCEBFE 22%, #8DC3F9 55%, #3F95F2 82%, #2F6FEA 100%); box-shadow: inset 0 0 0 1px var(--line); place-items: end center; padding-bottom: 0; }
.dx-stage--brand .br-switch { position: absolute; left: 20px; top: 18px; z-index: 3; }
.br-scene { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.dx-stage--brand .br-scene { position: absolute; inset: 0; display: block; }
.dx-stage--brand .br-phone { position: absolute; left: calc(50% - 200px); bottom: -64px; }
.dx-stage--brand .br-theme { position: absolute; left: calc(50% + 6px); top: 150px; }
.dx .mono-label { margin-top: 0; }
.dx-cell__t { margin-top: 12px; color: var(--ink); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.dx-cell__x { max-width: 50ch; margin-top: 12px; color: var(--body); font-size: 16px; line-height: 1.6; }
.dx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.dx-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 550; }
.dx-tags .i { color: var(--royal); }

/* ---------- option 2: two rows ---------- */
.dx--rows { padding-bottom: var(--section-y); }
.dx-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 5vw, 80px); padding: clamp(64px, 7vw, 104px) 32px; border-bottom: 1px solid var(--line); }
.dx-row--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.dx-row__copy .h2 { margin-top: 18px; }
.dx-row__copy .lede { margin-top: 16px; }
.dx-asks__k { margin-top: 28px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.dx-asks { display: grid; gap: 8px; margin-top: 10px; }
.sa-ask { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink-2); font: 550 14px/1.35 var(--font); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s, color .3s, background-color .3s; }
.sa-ask::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--royal), var(--sky)); transform: scaleX(0); transform-origin: left; }
.sa-ask:hover { border-color: #C9D3F2; }
.sa-ask:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.sa-ask[aria-pressed="true"] { border-color: rgba(37, 71, 233, .4); background: #F7F9FF; color: var(--ink); }
.sa-ask[aria-pressed="true"]::after { transform: scaleX(var(--ap, 0)); }
.dx-pts { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.dx-pts li { display: flex; gap: 12px; }
.dx-pt__ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); }
.dx-pt__ico .i { width: 17px; height: 17px; }
.dx-pt__t { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.dx-pt__x { display: block; color: var(--body); font-size: 14.5px; }
.dx-row__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 540px; padding: 56px 40px 40px; border-radius: 26px; background: linear-gradient(180deg, #F4F6FA 0%, #EEF2FB 100%); box-shadow: inset 0 0 0 1px var(--line); }
.dx-row__stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgba(37, 71, 233, .45) 1.1px, transparent 1.6px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(70% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 82%); mask-image: radial-gradient(70% 62% at 50% 45%, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 82%); }
.sa--lg { width: min(100%, 520px); }
.sa--lg .sa__log { min-height: 300px; }
.dx-row__stage--brand { overflow: hidden; padding: 40px 24px 0; place-items: end center; background: radial-gradient(30% 22% at 16% 88%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FFFFFF 0%, #DCEBFE 22%, #8DC3F9 55%, #3F95F2 82%, #2F6FEA 100%); }
.dx-row__stage--brand::before { display: none; }
.br-scene--trio { width: 100%; height: 500px; }
.br-scene--trio .br-phone { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); }
.br-scene--trio .br-mail--float { position: absolute; left: 0; top: 30px; z-index: 2; animation: bob 9s ease-in-out -3s infinite; }
.br-scene--trio .br-msgs--float { position: absolute; right: 0; bottom: 90px; z-index: 2; animation: bob 8s ease-in-out -1s infinite; }
.dx-row .br-switch { margin-top: 26px; }
.dx-row .ticks--grid { margin-top: 24px; }

/* ---------- option 3: bento ---------- */
.dx-bento { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "a a a a a a a b b b b b" "a a a a a a a c c c c c" "e e e e e d d d d d d d" "f f f f f d d d d d d d"; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.dx-bento::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background: linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat; }
.dx--bento .dx-bento { border-inline: 0; }
.bx { position: relative; display: flex; flex-direction: column; padding: 30px 32px 32px; overflow: hidden; background: #fff; transition: background-color .5s var(--ease); }
.bx--sara { grid-area: a; }
.bx--look { grid-area: b; }
.bx--report { grid-area: c; }
.bx--brand { grid-area: d; }
.bx--mail { grid-area: e; }
.bx--msg { grid-area: f; }
.bx__t { margin-top: 10px; color: var(--ink); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.bx__t--sm { margin-top: 0; font-size: 18px; letter-spacing: -.02em; }
.bx__x { max-width: 46ch; margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }
.bx--sara .bx__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; flex: 1; margin: 24px -32px -32px; padding: 32px; background: linear-gradient(180deg, #F4F6FA 0%, #EEF2FB 100%); border-top: 1px solid var(--line); }
.bx--sara .sa { width: min(100%, 480px); }
.lks { display: grid; gap: 6px; margin: auto 0 0; padding: 18px 0 0; list-style: none; }
.lk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBFD; font-size: 12.5px; opacity: .35; transform: translateX(-6px); transition: opacity .4s, transform .5s var(--ease), border-color .4s, background-color .4s; }
.lk__ev { color: var(--royal); font-size: 11px; }
.lk__x { overflow: hidden; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.lk__t { color: var(--tone2); font-size: 10.5px; }
.lks.st-1 .lk:nth-child(-n+1), .lks.st-2 .lk:nth-child(-n+2), .lks.st-3 .lk { opacity: 1; transform: none; }
.lks.st-1 .lk:nth-child(1), .lks.st-2 .lk:nth-child(2), .lks.st-3 .lk:nth-child(3) { border-color: rgba(37, 71, 233, .3); background: #F7F9FF; }
.rp { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; }
.rp__card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #FAFBFD; }
.rp__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); }
.rp__t { display: grid; min-width: 0; }
.rp__k { color: var(--ink); font-size: 13.5px; font-weight: 650; }
.rp__v { overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.rp__bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; height: 34px; }
.rp__bars span { flex: 1; border-radius: 3px 3px 1px 1px; background: #D5DEFB; transform: scaleY(.2); transform-origin: bottom; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.rp__bars span:nth-child(1) { height: 50%; } .rp__bars span:nth-child(2) { height: 70%; } .rp__bars span:nth-child(3) { height: 40%; } .rp__bars span:nth-child(4) { height: 85%; }
.rp__bars span:nth-child(5) { height: 100%; background: linear-gradient(180deg, var(--sky), var(--royal)); }
.rp.st-1 .rp__bars span, .rp.st-2 .rp__bars span, .rp.st-3 .rp__bars span { transform: none; }
.rp.st-1 .rp__bars span:nth-child(2), .rp.st-2 .rp__bars span:nth-child(2) { transition-delay: .06s; }
.rp__btn { display: grid; justify-self: start; }
.rp__btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 650; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.rp__btn-a { background: var(--ink); color: #fff; }
.rp__btn-b { background: var(--ok-bg); color: var(--ok-ink); opacity: 0; transform: scale(.8); }
.rp.st-2 .rp__btn-a { animation: dx-press .4s ease-in-out; }
.rp.st-3 .rp__btn-a { opacity: 0; transform: scale(.8); }
.rp.st-3 .rp__btn-b { opacity: 1; transform: none; }
.bx--brand { padding-bottom: 0; }
.bx--brand .br-switch { margin-top: 18px; }
.br-scene--bento { flex: 1; min-height: 420px; margin: 24px -32px 0; padding-top: 24px; overflow: hidden; align-items: flex-end; background: radial-gradient(30% 22% at 16% 88%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FFFFFF 0%, #DCEBFE 22%, #8DC3F9 55%, #3F95F2 82%, #2F6FEA 100%); border-top: 1px solid var(--line); }
.br-scene--bento .br-phone { transform: translate(-80px, 70px); }
.br-scene--bento .br-theme { position: absolute; right: 7%; top: 64px; }
.bx--mail > div, .bx--msg > div { display: grid; place-items: center; margin-top: auto; padding-top: 22px; }
.bx--mail .br-mail { width: 100%; max-width: 320px; }
.bx--msg .br-msgs-list { width: 100%; max-width: 340px; }

@media (max-width: 1199px) {
  .dx-stage--brand .br-phone { left: calc(50% - 170px); }
  .dx-stage--brand .br-theme { left: calc(50% + 20px); width: 200px; }
  .sa-stat { right: -8px; width: 170px; }
}
@media (max-width: 1023px) {
  .dx-pair { grid-template-columns: minmax(0, 1fr); }
  .dx-cell + .dx-cell { border-top: 1px solid var(--line); border-left: 0; }
  .dx-cell + .dx-cell::after { display: none; }
  .dx-row, .dx-row--rev { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .dx-row--rev .dx-row__stage { order: 2; }
  .dx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b c" "d d" "e f"; }
}
@media (max-width: 640px) {
  .dx-cell { padding: 24px 0 32px; }
  .dx-stage { height: 460px; margin-inline: 0; padding: 32px 12px 20px; }
  .dx-stage--brand .br-theme { display: none; }
  .dx-stage--brand .br-phone { left: calc(50% - 118px); }
  .dx-stage--brand .br-switch { left: 12px; right: 12px; top: 12px; justify-content: center; }
  .br-go { min-height: 32px; padding: 5px 10px 5px 8px; font-size: 11.5px; }
  .sa-stat { display: none; }
  .dx-row__stage { min-height: 460px; padding: 32px 12px 24px; }
  .br-scene--trio { height: 440px; }
  .br-scene--trio .br-mail--float { left: 50%; top: 10px; width: 250px; transform: translateX(-50%); animation: none; }
  .br-scene--trio .br-msgs--float { display: none; }
  .dx-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e" "f"; }
  .bx { padding: 24px 20px 26px; }
  .bx--sara .bx__stage { margin: 20px -20px -26px; padding: 20px 12px; }
  .br-scene--bento { margin-inline: -20px; }
  .br-scene--bento .br-theme { display: none; }
  .br-scene--bento .br-phone { transform: translateY(70px); }
  .dx-pair::after, .dx-cell + .dx-cell::before { display: none; }
}
@keyframes dx-press { 40% { transform: scale(.92); } }
@media (max-width: 479px) { .dx .clause { white-space: normal; } }
@media (max-width: 640px) {
  .dx-stage--sara { height: auto; min-height: 0; padding: 20px 12px; }
  .dx-stage--sara .sa { margin-top: 0; }
  .sa__log { min-height: 300px; }
}
@media (max-width: 1199px) {
  .dx-pair { grid-template-columns: minmax(0, 1fr); }
  .dx-cell + .dx-cell { border-top: 1px solid var(--line); border-left: 0; }
  .dx-cell + .dx-cell::after { display: none; }
  .dx-stage--brand .br-phone { left: calc(50% - 200px); }
  .dx-stage--brand .br-theme { left: calc(50% + 6px); width: 230px; }
}
@media (max-width: 640px) {
  .dx-stage--brand .br-phone { left: calc(50% - 118px); }
}

/* refined pair, finishing touches */
.sa__chips span { transition: border-color .3s, background-color .3s, color .3s, transform .2s; }
.sa__chips span.is-press { border-color: var(--royal); background: var(--royal); color: #fff; animation: dx-press .45s ease-in-out; }
.sa.is-paused .sa__status-t::after { content: " · paused"; color: var(--tone2); }
.br-go { position: relative; overflow: hidden; }
.br-go::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ink); opacity: .25; transform: scaleX(0); transform-origin: left; }
.br-go.is-timing::after { animation: br-time 3.8s linear forwards; }
@keyframes br-time { to { transform: scaleX(1); } }
.is-swap .br-sw { animation: br-pop .55s cubic-bezier(.3, 1.7, .5, 1) both; }
.is-swap .br-sw--2 { animation-delay: .06s; }
.is-swap .br-sw--3 { animation-delay: .12s; }
@keyframes br-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: none; } }
.is-swap .br-logo { animation: br-flip .6s cubic-bezier(.45, 0, .3, 1); }
@keyframes br-flip { 50% { transform: rotateY(90deg); } }
.is-swap .br-title, .is-swap .br-font { animation: br-fade .6s ease; }
@keyframes br-fade { 0% { opacity: .2; } 100% { opacity: 1; } }
.br-qr { position: absolute; left: calc(50% + 6px); top: 410px; z-index: 2; display: flex; align-items: center; gap: 12px; width: 230px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow-float); animation: bob 8s ease-in-out -3s infinite; }
.br-qr__code { display: grid; flex: none; grid-template-columns: repeat(9, 5px); gap: 1px; padding: 5px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.br-qr__c { width: 5px; height: 5px; border-radius: 1px; }
.br-qr__c.is-on { background: var(--mb); transition: background-color .6s var(--ease); }
.br-qr__t { display: grid; gap: 1px; }
.br-qr__k { color: var(--ink); font-size: 13px; font-weight: 650; }
.br-qr__v { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.dx-stage { transition: box-shadow .5s var(--ease); }
.dx-cell:hover .dx-stage { box-shadow: inset 0 0 0 1px #D5DCF0, 0 30px 60px -44px rgba(15, 31, 122, .45); }
.sa-stat__v { font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .br-qr { width: 200px; } }
@media (max-width: 640px) { .br-qr { display: none; } }
.dx-stage--sara .sa { margin-top: 44px; }
.dx-stage--sara .sa-stat { top: -74px; right: -22px; }
@media (max-width: 640px) { .dx-stage--sara .sa { margin-top: 0; } }
.dx-stage--sara .sa__status { margin-left: 6px; }

/* ==========================================================================
   10. In numbers, options. Shared: the odometer.
   ========================================================================== */
.odo { display: inline-flex; align-items: flex-start; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__s { display: flex; flex-direction: column; }
.odo__s > span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo__c { display: inline-block; height: 1em; line-height: 1; }
.odo__d--0 .odo__s { transform: translateY(-10em); } .odo__d--1 .odo__s { transform: translateY(-11em); }
.odo__d--2 .odo__s { transform: translateY(-12em); } .odo__d--3 .odo__s { transform: translateY(-13em); }
.odo__d--4 .odo__s { transform: translateY(-14em); } .odo__d--5 .odo__s { transform: translateY(-15em); }
.odo__d--6 .odo__s { transform: translateY(-16em); } .odo__d--7 .odo__s { transform: translateY(-17em); }
.odo__d--8 .odo__s { transform: translateY(-18em); } .odo__d--9 .odo__s { transform: translateY(-19em); }
.odo.is-armed .odo__d .odo__s { transform: translateY(0); transition: none; }
.odo.is-armed .odo__c { opacity: 0; transform: translateY(.3em); }
.odo.is-armed.is-in .odo__c { opacity: 1; transform: none; transition: opacity .6s .3s, transform .8s cubic-bezier(.16, 1, .3, 1) .3s; }
.odo.is-armed.is-in .odo__d--0 .odo__s { transform: translateY(-10em); } .odo.is-armed.is-in .odo__d--1 .odo__s { transform: translateY(-11em); }
.odo.is-armed.is-in .odo__d--2 .odo__s { transform: translateY(-12em); } .odo.is-armed.is-in .odo__d--3 .odo__s { transform: translateY(-13em); }
.odo.is-armed.is-in .odo__d--4 .odo__s { transform: translateY(-14em); } .odo.is-armed.is-in .odo__d--5 .odo__s { transform: translateY(-15em); }
.odo.is-armed.is-in .odo__d--6 .odo__s { transform: translateY(-16em); } .odo.is-armed.is-in .odo__d--7 .odo__s { transform: translateY(-17em); }
.odo.is-armed.is-in .odo__d--8 .odo__s { transform: translateY(-18em); } .odo.is-armed.is-in .odo__d--9 .odo__s { transform: translateY(-19em); }
.odo.is-armed.is-in .odo__s { transition: transform 2s cubic-bezier(.16, 1, .3, 1); }
.odo.is-armed.is-in > :nth-child(2) .odo__s { transition-delay: .09s; }
.odo.is-armed.is-in > :nth-child(3) .odo__s { transition-delay: .18s; }
.odo.is-armed.is-in > :nth-child(4) .odo__s { transition-delay: .27s; }
.odo.is-armed.is-in > :nth-child(5) .odo__s { transition-delay: .36s; }
.sx .odo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); padding-block: .06em; }

/* ---------- option A: glass counter ---------- */
.sx--glass { padding-block: clamp(72px, 8vw, 112px); }
.sg { position: relative; isolation: isolate; margin-inline: 32px; padding: clamp(36px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(40px, 4.4vw, 60px); overflow: hidden; border-radius: 34px; background: linear-gradient(160deg, #111A44 0%, #0A1030 50%, #070A1C 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 48px 80px -56px rgba(7, 10, 28, .8); color: #fff; }
.sg__gl { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.sg__grain { position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
.sg::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(160, 240, 255, .8), rgba(255, 255, 255, 0)); pointer-events: none; }
.sg__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sg__title { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.sg__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .18); animation: hw-blink 1.8s ease-in-out infinite; }
.sg__note { color: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.sg__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sg-stat { position: relative; display: flex; flex-direction: column; padding: 36px 24px 4px; transition: background-color .5s var(--ease); }
.sg-stat:first-child { padding-left: 0; }
.sg-stat:last-child { padding-right: 0; }
.sg-stat + .sg-stat { border-left: 1px solid rgba(255, 255, 255, .1); }
.sg-stat + .sg-stat::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) center / 1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) center / 100% 1px no-repeat; }
.sg-stat__n { color: #fff; font-size: clamp(40px, 4.3vw, 62px); font-weight: 500; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(120, 190, 255, .25); }
.sg-stat__t { margin-top: 14px; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sg-stat__x { margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: 13.5px; line-height: 1.5; }
.sg-stat__v { display: flex; align-items: flex-end; height: 48px; margin-top: auto; padding-top: 20px; box-sizing: content-box; }
.sgv { display: block; width: 100%; }
.sgv--checks { display: flex; gap: 5px; }
.sgv--checks > span { flex: 1; max-width: 14px; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.sg.is-live .sgv--checks > span { animation: sgv-lit 4.5s ease-in-out infinite; }
.sgv--checks > span:nth-child(2) { animation-delay: .15s !important; } .sgv--checks > span:nth-child(3) { animation-delay: .3s !important; }
.sgv--checks > span:nth-child(4) { animation-delay: .45s !important; } .sgv--checks > span:nth-child(5) { animation-delay: .6s !important; }
.sgv--checks > span:nth-child(6) { animation-delay: .75s !important; } .sgv--checks > span:nth-child(7) { animation-delay: .9s !important; }
.sgv--checks > span:nth-child(8) { animation-delay: 1.05s !important; } .sgv--checks > span:nth-child(9) { animation-delay: 1.2s !important; }
@keyframes sgv-lit { 0%, 8% { background: rgba(255, 255, 255, .12); box-shadow: none; } 16%, 70% { background: var(--cyan); box-shadow: 0 0 10px rgba(100, 244, 248, .6); } 85%, 100% { background: rgba(255, 255, 255, .12); box-shadow: none; } }
.sgv--fan { height: 44px; overflow: visible; }
.sgv-fan__l { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1; }
.sgv-fan__d { fill: rgba(255, 255, 255, .45); }
.sgv-fan__o { fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(100, 244, 248, .8)); }
.sg.is-live .sgv-fan__l { stroke: rgba(100, 244, 248, .55); stroke-dasharray: 14 130; animation: sgv-fan 2.4s cubic-bezier(.45, 0, .3, 1) infinite; }
.sg.is-live .sgv-fan__l:nth-child(2n) { animation-delay: .25s; }
.sg.is-live .sgv-fan__l:nth-child(3n) { animation-delay: .5s; }
@keyframes sgv-fan { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -130; } }
.sgv--stack, .sgv--idle, .sgv--retry { display: grid; gap: 8px; }
.sgv-stack__bar { display: flex; gap: 3px; height: 10px; }
.sgv-seg { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4C7BFF, var(--cyan)); transform-origin: left; }
.sgv-seg--email { width: 19.2%; } .sgv-seg--id, .sgv-seg--live, .sgv-seg--face { width: 7.7%; } .sgv-seg--aml { flex: 1; }
.sgv-seg--email { opacity: .55; } .sgv-seg--id { opacity: .65; } .sgv-seg--live { opacity: .75; } .sgv-seg--face { opacity: .85; }
.sg.is-live .sgv-seg { animation: sgv-seg 5s cubic-bezier(.3, .9, .3, 1) infinite; }
.sg.is-live .sgv-seg--id { animation-delay: .2s; } .sg.is-live .sgv-seg--live { animation-delay: .4s; } .sg.is-live .sgv-seg--face { animation-delay: .6s; } .sg.is-live .sgv-seg--aml { animation-delay: .8s; }
@keyframes sgv-seg { 0% { transform: scaleX(0); } 18%, 86% { transform: none; } 100% { transform: none; opacity: .15; } }
.sgv-stack__k { color: rgba(255, 255, 255, .45); font-size: 10px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgv-idle__bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.sgv-idle__bars > span { flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .18); }
.sgv-idle__bars > span.is-use { height: 100%; background: linear-gradient(180deg, var(--cyan), #4C7BFF); transform-origin: bottom; }
.sg.is-live .sgv-idle__bars > span.is-use { animation: sgv-bar 4s cubic-bezier(.3, 1.2, .5, 1) infinite; }
.sgv-idle__bars > span.is-use:nth-child(3n) { height: 60%; animation-delay: .3s !important; }
.sgv-idle__bars > span.is-use:nth-child(3n+1) { height: 80%; animation-delay: .6s !important; }
@keyframes sgv-bar { 0% { transform: scaleY(.05); } 20%, 85% { transform: none; } 100% { transform: scaleY(.05); } }
.sgv-retry__line { position: relative; display: flex; justify-content: space-between; align-items: center; height: 14px; }
.sgv-retry__line::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: rgba(255, 255, 255, .2); }
.sgv-retry__line > span { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #1A2350; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.sg.is-live .sgv-retry__line > span { animation: sgv-ret 6s ease-in-out infinite; }
.sgv-retry__line > span:nth-child(2) { animation-delay: .5s !important; } .sgv-retry__line > span:nth-child(3) { animation-delay: 1s !important; }
.sgv-retry__line > span:nth-child(4) { animation-delay: 1.5s !important; } .sgv-retry__line > span:nth-child(5) { animation-delay: 2s !important; }
.sgv-retry__line > span:nth-child(6) { animation-delay: 2.5s !important; } .sgv-retry__line > span:nth-child(7) { animation-delay: 3s !important; }
.sgv-retry__line > span:nth-child(8) { animation-delay: 3.5s !important; }
@keyframes sgv-ret { 0%, 4% { background: #1A2350; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); } 10%, 60% { background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .2), 0 0 10px rgba(100, 244, 248, .7); } 75%, 100% { background: #1A2350; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); } }
.sgv-retry__k { display: flex; justify-content: space-between; color: rgba(255, 255, 255, .45); font-size: 10px; }
.sg-stat:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 80%); }

/* ---------- option B: proof cells ---------- */
.sx--proof .pcs { border-bottom: 1px solid var(--line); }
.pc { display: flex; flex-direction: column; }
.xcells > .pc { padding: 28px 32px 34px; }
.pc__demo { position: relative; display: grid; place-items: center; height: 196px; margin-bottom: 26px; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #F7F9FE, #EEF2FB); box-shadow: inset 0 0 0 1px #E8ECF5; }
.pc__n { color: var(--ink); font-size: clamp(44px, 4.4vw, 60px); font-weight: 500; letter-spacing: -.05em; }
.pc__t { margin-top: 12px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.pc__x { max-width: 34ch; margin-top: 6px; color: var(--body); font-size: 15px; line-height: 1.55; }
.pcd { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pc-tiles { display: grid; grid-template-columns: repeat(3, 38px); gap: 8px; }
.pc-tile { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3F3, 0 6px 14px -10px rgba(15, 31, 122, .4); color: #9AA1B5; }
.pc-tile .i { width: 18px; height: 18px; }
.pcs.is-live .pc-tile { animation: pc-tile 6.3s ease-in-out infinite; }
.pc-tile:nth-child(2) { animation-delay: .7s !important; } .pc-tile:nth-child(3) { animation-delay: 1.4s !important; } .pc-tile:nth-child(4) { animation-delay: 2.1s !important; } .pc-tile:nth-child(5) { animation-delay: 2.8s !important; } .pc-tile:nth-child(6) { animation-delay: 3.5s !important; } .pc-tile:nth-child(7) { animation-delay: 4.2s !important; } .pc-tile:nth-child(8) { animation-delay: 4.9s !important; } .pc-tile:nth-child(9) { animation-delay: 5.6s !important; }
@keyframes pc-tile { 0%, 100% { background: #fff; color: #9AA1B5; transform: none; } 3%, 11% { background: var(--royal); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(37, 71, 233, .6); } 15% { background: #EEF2FF; color: var(--royal); transform: none; } }
.pc-names { position: absolute; left: 0; right: 0; bottom: 10px; display: grid; justify-items: center; color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.pc-names > span { grid-area: 1 / 1; opacity: 0; }
.pcs.is-live .pc-names > span { animation: pc-name 6.3s ease-in-out infinite; }
.pc-names > span:nth-child(2) { animation-delay: .7s !important; } .pc-names > span:nth-child(3) { animation-delay: 1.4s !important; } .pc-names > span:nth-child(4) { animation-delay: 2.1s !important; } .pc-names > span:nth-child(5) { animation-delay: 2.8s !important; } .pc-names > span:nth-child(6) { animation-delay: 3.5s !important; } .pc-names > span:nth-child(7) { animation-delay: 4.2s !important; } .pc-names > span:nth-child(8) { animation-delay: 4.9s !important; } .pc-names > span:nth-child(9) { animation-delay: 5.6s !important; }
@keyframes pc-name { 0%, 100% { opacity: 0; } 3%, 10% { opacity: 1; } 12% { opacity: 0; } }
.pcd--checks .pc-tiles { margin-top: -18px; }
.pc-fan { width: 136px; height: 136px; overflow: visible; }
.pc-fan__ring { fill: none; stroke: #DCE2F0; stroke-dasharray: 2 4; }
.pc-fan__l { stroke: #C9D1E4; stroke-width: 1; stroke-dasharray: 48; stroke-dashoffset: 48; }
.pc-fan__d { fill: #B7C0D6; }
.pc-fan__c { fill: #fff; stroke: var(--royal); stroke-width: 1.5; }
.pc-fan__face { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: var(--royal); }
.pcs.is-live .pc-fan__l { animation: pc-ray 5s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes pc-ray { 0% { stroke-dashoffset: 48; } 25%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -48; } }
.pcs.is-live .pc-fan__d { animation: pc-dot 5s ease-in-out infinite; }
@keyframes pc-dot { 0%, 18% { fill: #B7C0D6; } 25%, 80% { fill: var(--royal); } 100% { fill: #B7C0D6; } }
.pcs.is-live .pc-fan__l--4 { animation-name: pc-ray; stroke: var(--bad); }
.pcs.is-live .pc-fan__d--4 { animation-name: pc-dot-hit; }
.pc-fan__d--4 { transform-box: fill-box; transform-origin: center; }
@keyframes pc-dot-hit { 0%, 18% { fill: #B7C0D6; transform: none; } 28%, 80% { fill: var(--bad); transform: scale(1.6); } 100% { fill: #B7C0D6; transform: none; } }
.pc-fan__tag { position: absolute; right: 5%; top: 66%; padding: 3px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 10px; opacity: 0; }
.pcs.is-live .pc-fan__tag { animation: pc-tag 5s ease-in-out infinite; }
@keyframes pc-tag { 0%, 26% { opacity: 0; transform: translateY(4px); } 32%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
.pc-rc { display: grid; gap: 4px; width: min(240px, 84%); padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .05), 0 12px 24px -16px rgba(15, 31, 122, .4); font-size: 12px; }
.pc-rc__r, .pc-rc__t { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.pc-rc__r .mono { color: var(--muted); }
.pc-rc__t { margin-top: 4px; padding-top: 7px; border-top: 1px dashed #D5DAE6; color: var(--ink); font-weight: 650; }
.pc-rc__t .mono { color: var(--royal); font-weight: 600; }
.pcs.is-live .pc-rc__r, .pcs.is-live .pc-rc__t { animation: pc-rc 6s ease-in-out infinite; }
.pc-rc__r:nth-child(2) { animation-delay: .35s !important; } .pc-rc__r:nth-child(3) { animation-delay: .7s !important; } .pc-rc__r:nth-child(4) { animation-delay: 1.05s !important; } .pc-rc__r:nth-child(5) { animation-delay: 1.4s !important; } .pc-rc__t { animation-delay: 1.9s !important; }
@keyframes pc-rc { 0% { opacity: 0; transform: translateY(6px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.pcd--min { align-content: end; padding: 16px 20px 14px; }
.pc-bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 90px; }
.pc-bar { flex: 1; height: 3px; border-radius: 2px; background: #CFD6E6; transform-origin: bottom; }
.pc-bar--35 { height: 35%; } .pc-bar--40 { height: 40%; } .pc-bar--45 { height: 45%; } .pc-bar--50 { height: 50%; } .pc-bar--55 { height: 55%; } .pc-bar--60 { height: 60%; } .pc-bar--65 { height: 65%; } .pc-bar--70 { height: 70%; } .pc-bar--80 { height: 80%; } .pc-bar--85 { height: 85%; } .pc-bar--90 { height: 90%; } .pc-bar--100 { height: 100%; }
.pc-bar[class*="pc-bar--"] { background: linear-gradient(180deg, #7FA0FF, var(--royal)); }
.pcs.is-live .pc-bar[class*="pc-bar--"] { animation: sgv-bar 5s cubic-bezier(.3, 1.2, .5, 1) infinite; }
.pc-bar:nth-child(odd) { animation-delay: .25s !important; }
.pc-base { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1.5px solid var(--ink); font-size: 10.5px; }
.pc-base__k { color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.pc-base__v { color: var(--ink); font-weight: 600; }
.pcd--hooks { gap: 22px; align-content: center; padding: 0 18px; }
.pc-sig { padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #C3D0FF; font-size: 11px; }
.pc-rt { position: relative; display: flex; justify-content: space-between; width: 100%; }
.pc-rt::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 1.5px; background: #D5DAE6; }
.pc-rt__s { position: relative; display: grid; justify-items: center; gap: 8px; }
.pc-rt__d { width: 12px; height: 12px; border: 2px solid #C4CBDA; border-radius: 50%; background: #fff; }
.pc-rt__k { color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.pcs.is-live .pc-rt__d { animation: pc-rt 6.4s ease-in-out infinite; }
.pc-rt__s:nth-child(2) .pc-rt__d { animation-delay: .6s !important; } .pc-rt__s:nth-child(3) .pc-rt__d { animation-delay: 1.2s !important; } .pc-rt__s:nth-child(4) .pc-rt__d { animation-delay: 1.8s !important; } .pc-rt__s:nth-child(5) .pc-rt__d { animation-delay: 2.4s !important; } .pc-rt__s:nth-child(6) .pc-rt__d { animation-delay: 3s !important; } .pc-rt__s:nth-child(7) .pc-rt__d { animation-delay: 3.6s !important; } .pc-rt__s:nth-child(8) .pc-rt__d { animation-delay: 4.2s !important; }
@keyframes pc-rt { 0%, 3% { border-color: #C4CBDA; background: #fff; box-shadow: none; } 8%, 70% { border-color: var(--royal); background: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14); } 85%, 100% { border-color: #C4CBDA; background: #fff; box-shadow: none; } }
.pc-own { display: grid; gap: 6px; width: min(260px, 88%); }
.pc-own__r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E3E8F2; color: var(--ink-2); font-size: 12.5px; }
.pc-own__c { padding: 2px 8px; border-radius: var(--r-pill); background: #F1F3F8; color: var(--muted); font-size: 10.5px; font-weight: 650; }
.pc-own__r--r .pc-own__c { background: var(--royal); color: #fff; }
.pc-own__r--r { box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .35); }
.pcs.is-live .pc-own__r { animation: pc-rc 6s ease-in-out infinite; }
.pc-own__r:nth-child(2) { animation-delay: .5s !important; } .pc-own__r:nth-child(3) { animation-delay: 1s !important; }
.pcs.is-live .pc-own__r--r .pc-own__c { animation: pc-own 6s ease-in-out 1s infinite; }
@keyframes pc-own { 0%, 10% { transform: scale(.7); } 16% { transform: scale(1.12); } 22%, 100% { transform: none; } }
.xcells > .pc:hover .pc__demo { box-shadow: inset 0 0 0 1px #D5DCF0; }

/* ---------- option C: kinetic statement ---------- */
.sx--kinetic .eyebrow { margin-left: 32px; }
.ks { margin: 28px 0 0; padding: 0 32px; color: #C4CAD8; font-size: clamp(34px, 4.6vw, 68px); font-weight: 560; letter-spacing: -.045em; line-height: 1.12; }
.ks-w { transition: color .5s var(--ease); }
.ks-w.is-lit { color: var(--ink); }
.ks-tok { position: relative; display: inline-flex; align-items: center; gap: .18em; margin: 0 .04em; padding: .02em .22em .02em .12em; border-radius: .26em; background: #EEF2FF; box-shadow: inset 0 0 0 1px #D9E1FD; color: #9AA7D9; vertical-align: baseline; transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease); }
.ks-tok__i { display: grid; place-items: center; width: .74em; height: .74em; border-radius: .2em; background: #fff; color: var(--royal); box-shadow: 0 .06em .2em rgba(15, 31, 122, .15); }
.ks-tok__i .i { width: .44em; height: .44em; stroke-width: 2; }
.ks-tok.is-lit { background: linear-gradient(135deg, #3D63FF, var(--royal)); box-shadow: 0 .18em .5em -.2em rgba(37, 71, 233, .55); color: #fff; }
.ks-tok--zero.is-lit { background: linear-gradient(135deg, #18203F, var(--ink)); }
.ks-tok--zero .ks-tok__i { color: var(--ink); }
.odo--tok { font-variant-numeric: tabular-nums; }
.ksf { margin-top: clamp(56px, 6vw, 88px); }
.ksf > li { display: grid; gap: 8px; }
.ksf__n { color: var(--royal); font-size: 13px; font-weight: 600; }
.ksf__x { color: var(--body); font-size: 15px; line-height: 1.55; }

@media (max-width: 1199px) {
  .sg__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .sg-stat:nth-child(4) { padding-left: 0; border-left: 0; }
  .sg-stat:nth-child(4)::before { display: none; }
  .sg-stat:nth-child(n+4) { margin-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .sg-stat:nth-child(3) { padding-right: 0; }
}
@media (max-width: 767px) {
  .sg { margin-inline: 0; }
  .sg__list { grid-template-columns: minmax(0, 1fr); }
  .sg-stat, .sg-stat:first-child, .sg-stat:last-child { padding: 28px 0 8px; border-left: 0; }
  .sg-stat + .sg-stat { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 20px; }
  .sg-stat::before { display: none; }
  .sg-stat__v { max-width: 260px; }
  .xcells > .pc { padding: 24px 0 30px; }
  .ks { padding: 0; }
  .sx--kinetic .eyebrow { margin-left: 0; }
}
@media (max-width: 479px) { .sx .clause { white-space: normal; } }
@media (min-width: 768px) and (max-width: 1199px) {
  .sg-stat:nth-child(5) { grid-column: span 2; }
  .pc-rt__s:not(:first-child):not(:last-child) .pc-rt__k { visibility: hidden; }
}

/* proof cells, finishing touches */
.pc { --d: 0s; }
.pc:nth-child(2) { --d: .1s; } .pc:nth-child(3) { --d: .2s; } .pc:nth-child(4) { --d: .15s; } .pc:nth-child(5) { --d: .25s; } .pc:nth-child(6) { --d: .35s; }
:root:not(.no-js) .pcs[data-reveal] > .pc { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) var(--d), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d), background-color .5s var(--ease); }
:root:not(.no-js) .pcs[data-reveal].is-in > .pc { opacity: 1; transform: none; }
.pc__demo { background: radial-gradient(rgba(37, 71, 233, .12) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(180deg, #F7F9FE, #EEF2FB); transition: box-shadow .45s var(--ease), transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.pc__src { align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--tone2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; transition: color .4s; }
.pc__n { transition: color .45s var(--ease); }
.xcells > .pc:hover .pc__demo { box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .3), 0 18px 36px -26px rgba(15, 31, 122, .45); transform: translateY(-3px); }
.xcells > .pc:hover .pc__n { color: var(--royal); }
.xcells > .pc:hover .pc__src { color: var(--royal); }
.pc-tile { position: relative; transition: background-color .25s, color .25s; }
.pc-tile__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; padding: 4px 8px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 10px; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s, transform .25s; pointer-events: none; }
.pc-tile:hover { background: var(--royal); color: #fff; animation-play-state: paused; }
.pc-tile:hover .pc-tile__tip { opacity: 1; transform: translate(-50%, 0); }
.pcd--checks:hover .pc-names { opacity: 0; }
.pc-names { transition: opacity .3s; }
.pc-rc__r { margin: 0 -6px; padding: 1px 6px; border-radius: 6px; transition: background-color .25s; }
.pc-rc__r:hover { background: #EEF2FF; }
.pc-sig { display: inline-flex; align-items: center; gap: 7px; }
.pc-sig__lock { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .2); }
.pc-rt__pkt { position: absolute; left: 0; top: 1px; z-index: 2; width: 10px; height: 10px; margin-left: 1px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .25), 0 0 12px rgba(100, 244, 248, .8); opacity: 0; }
.pcs.is-live .pc-rt__pkt { animation: pc-pkt 6.4s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes pc-pkt { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 68% { left: calc(100% - 12px); opacity: 1; } 76%, 100% { left: calc(100% - 12px); opacity: 0; } }
.pc-own__sw { display: grid; }
.pc-own__sw > .pc-own__c { grid-area: 1 / 1; justify-self: end; }
.pc-own__c--m { position: relative; }
.pc-own__c--m::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1.5px; background: var(--bad); transform: scaleX(0); transform-origin: left; }
.pc-own__c--r { opacity: 0; }
.pcs.is-live .pc-own__c--m { animation: pc-m 6s ease-in-out infinite; }
.pcs.is-live .pc-own__c--m::after { animation: pc-strike 6s ease-in-out infinite; }
.pcs.is-live .pc-own__c--r { animation: pc-r 6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes pc-m { 0%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes pc-strike { 0%, 16% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
@keyframes pc-r { 0%, 36% { opacity: 0; transform: scale(.6); } 44% { opacity: 1; transform: scale(1.12); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
:root:not(.no-js) .pcs:not(.is-live) .pc-own__c--m { opacity: 0; }
:root:not(.no-js) .pcs:not(.is-live) .pc-own__c--r { opacity: 1; }
.pc-own__r--r .pc-own__c--m { background: #F1F3F8; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pc-own__c--m { opacity: 0; } .pc-own__c--r { opacity: 1; } }

/* ==========================================================================
   11. Solutions. Six sectors, each drawn in the isometric kit and set moving
   while on screen. Example flows run check by check to a list price.
   ========================================================================== */
.ind-iso { display: block; width: 100%; height: auto; overflow: visible; }
.ind-iso * { stroke-linejoin: round; stroke-linecap: round; }
.ind-iso .f-l { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.ind-iso .f-r, .ind-iso .f-t { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.ind-iso .i-l, .ind-iso .i-r, .ind-iso .i-t { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.ind-iso .i-t { stroke: #4A5270; }
.ind-iso .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.ind-iso .r-l, .ind-iso .r-r, .ind-iso .r-t { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.ind-iso .r-t-edge { fill: none; stroke: #7D95FF; stroke-width: 1; }
.ind-iso .gnd { fill: none; stroke: #DCE1EC; stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .5s; }
.ind-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.ind-iso .ln-l { fill: none; stroke: #CDD3E0; stroke-width: 1.25; }
.ind-iso .ln-i { fill: none; stroke: #4A5270; stroke-width: 1.4; }
.ind-iso .ln-w { fill: none; stroke: #FFFFFF; stroke-width: 1.8; opacity: .85; }
.ind-iso .soft { fill: #EEF2FB; stroke: #CDD3E0; stroke-width: 1; }
.ind-iso .photo-h { fill: #C9D3F2; }
.ind-iso .photo-b { fill: none; stroke: #C9D3F2; stroke-width: 1.6; }
.ind-iso .mrz { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 2 2.5; }
.ind-iso .flow, .ind-iso .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.ind-iso .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2; }
.ind-iso .seal { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; }
.ind-iso .ripple { fill: none; stroke: var(--royal); stroke-width: 1.25; opacity: 0; }
.ind-iso .shadow { fill: rgba(15, 31, 122, .06); stroke: none; }
.ind-iso .imprint { fill: none; stroke: var(--royal); stroke-width: 2; }
.ind-iso .wick { fill: none; stroke: #4A5270; stroke-width: 1.4; }
.ind-iso .arc-w { fill: none; stroke: #FFFFFF; stroke-width: 1.8; }
.ind-iso .top-flash { fill: var(--cyan); stroke: none; opacity: 0; }
.ind-iso .pkt { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; }
.ind-iso .win { fill: #EEF2FB; stroke: #9AA1B5; stroke-width: 1.1; }
.ind-iso .ridge { fill: none; stroke: #4A5270; stroke-width: 1.25; }
.ind-iso .key-ring, .ind-iso .key-bar { fill: none; stroke: var(--royal); stroke-width: 2.4; }
.ind-iso .door { stroke: #1B36C4; }
/* shading for solid royal and ink solids */
.ind-iso .r-l { fill: #1D3BD0; stroke: #1D3BD0; }
.ind-iso .r-t { stroke: #5C78FF; }
.ind-iso .r-r { fill: var(--royal); }
.ind-iso .i-r { fill: #161B30; stroke: #161B30; }
.ind-iso .shadow { fill: rgba(15, 31, 122, .045); }
.ind-grid.is-live .ind-iso .a-march { animation: hw-march 1.2s linear infinite; }
.ind-iso .a-seal, .ind-iso .a-rip-g, .ind-iso .a-rip, .ind-iso .a-cndl, .ind-iso .a-key, .ind-iso .a-imprint { transform-box: fill-box; transform-origin: center; }
.ind-iso .a-cndl { transform-origin: 50% 100%; }
.ind-grid.is-live .a-card-g { animation: ig-card 5s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes ig-card { 0% { opacity: 0; transform: none; } 10% { opacity: 1; } 55% { opacity: 1; transform: translate(39.54px, -22.83px); } 65%, 100% { opacity: 0; transform: translate(39.54px, -22.83px); } }
.ind-grid.is-live .a-seal { animation: ig-seal 5s ease-in-out infinite; }
@keyframes ig-seal { 0%, 55% { transform: none; } 62% { transform: scale(1.5); fill: var(--cyan); } 72%, 100% { transform: none; } }
.ind-grid.is-live .ind-iso--gov .a-badge, .ind-grid.is-live .ind-iso--trd .a-badge { animation: ig-bob 3.4s ease-in-out infinite alternate; }
@keyframes ig-bob { to { transform: translate(0.00px, -7.26px); } }
.ind-grid.is-live .a-rip-g .ripple, .ind-grid.is-live .a-rip .ripple { animation: ig-rip 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ig-rip { 0% { opacity: .55; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.25); } }
.ind-grid.is-live .a-stamp { animation: ii-stamp 3.6s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes ii-stamp { 0%, 20% { transform: none; } 34% { transform: translate(0.00px, 25.94px); } 42% { transform: translate(0.00px, 23.87px); } 60%, 100% { transform: none; } }
.ind-grid.is-live .a-imprint { animation: ii-mark 3.6s ease-out infinite; }
@keyframes ii-mark { 0%, 33% { opacity: 0; transform: scale(.8); } 38% { opacity: 1; transform: scale(1.08); } 46%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ind-grid.is-live .a-cndl--1 { animation: it-c1 3.1s ease-in-out 0s infinite alternate; }
@keyframes it-c1 { from { transform: scaleY(0.8); } to { transform: scaleY(1.08); } }
.ind-grid.is-live .a-cndl--2 { animation: it-c2 3.2s ease-in-out 0.4s infinite alternate; }
@keyframes it-c2 { from { transform: scaleY(0.9); } to { transform: scaleY(1.12); } }
.ind-grid.is-live .a-cndl--3 { animation: it-c3 3.3s ease-in-out 0.8s infinite alternate; }
@keyframes it-c3 { from { transform: scaleY(0.7); } to { transform: scaleY(1.15); } }
.ind-grid.is-live .a-cndl--4 { animation: it-c4 3.4s ease-in-out 0.2s infinite alternate; }
@keyframes it-c4 { from { transform: scaleY(0.85); } to { transform: scaleY(1.05); } }
.ind-grid.is-live .a-cndl--5 { animation: it-c5 3.5s ease-in-out 0.6s infinite alternate; }
@keyframes it-c5 { from { transform: scaleY(0.92); } to { transform: scaleY(1.1); } }
.ind-grid.is-live .a-card { animation: ib-card 3.6s ease-in-out infinite alternate; }
@keyframes ib-card { to { transform: translate(0.00px, -6.23px); } }
.ind-grid.is-live .a-card2 { animation: ib-card2 4.2s ease-in-out infinite alternate; }
@keyframes ib-card2 { to { transform: translate(0.00px, -3.11px); } }
.ind-grid.is-live .a-rip--2 .ripple { animation-delay: 1.07s; } .ind-grid.is-live .a-rip--3 .ripple { animation-delay: 2.14s; }
.ind-grid.is-live .a-arc { animation: ib-arc 1.8s ease-in-out infinite; } .ind-grid.is-live .a-arc--2 { animation-delay: .2s; } .ind-grid.is-live .a-arc--3 { animation-delay: .4s; }
@keyframes ib-arc { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ind-grid.is-live .a-pkt { animation: id-pkt 5s ease-in-out infinite; }
@keyframes id-pkt { 0% { transform: translate(0.00px, 0.00px); } 11% { transform: translate(35.95px, -16.60px); } 22% { transform: translate(71.90px, 4.15px); } 33% { transform: translate(75.49px, 6.23px); } 44% { transform: translate(79.09px, 45.66px); } 55% { transform: translate(115.04px, 29.06px); } 66% { transform: translate(150.99px, 49.81px); } 80% { transform: translate(150.99px, 49.81px); opacity: 1; } 88%, 100% { transform: translate(150.99px, 49.81px); opacity: 0; } }
.ind-grid.is-live .a-top--1 { animation: id-top 5s ease-out infinite; animation-delay: 0.00s; }
.ind-grid.is-live .a-top--2 { animation: id-top 5s ease-out infinite; animation-delay: 1.10s; }
.ind-grid.is-live .a-top--3 { animation: id-top 5s ease-out infinite; animation-delay: 2.20s; }
.ind-grid.is-live .a-top--4 { animation: id-top 5s ease-out infinite; animation-delay: 3.30s; }
@keyframes id-top { 0% { opacity: .7; } 16%, 100% { opacity: 0; } }
.ind-grid.is-live .a-win--1 { animation: ir-win 4.5s ease-in-out 0.7s infinite; }
.ind-grid.is-live .a-win--2 { animation: ir-win 4.5s ease-in-out 1.4s infinite; }
.ind-grid.is-live .a-win--3 { animation: ir-win 4.5s ease-in-out 2.1s infinite; }
@keyframes ir-win { 0%, 100% { fill: #EEF2FB; } 30%, 60% { fill: #CFE0FF; } }
.ind-grid.is-live .a-key { animation: ir-key 3.2s ease-in-out infinite alternate; }
@keyframes ir-key { from { transform: none; } to { transform: translate(0.00px, -6.23px) rotate(-10deg); } }
/* head */
.ix .section-head { margin-bottom: 56px; }

/* cells */
.ind-grid { list-style: none; padding: 0; }
.xcells > .ind { display: flex; flex-direction: column; padding: 28px 32px 32px; isolation: isolate; }
.xcells > .ind:hover { background: none; }
.ind__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 30%), rgba(37, 71, 233, .08), rgba(37, 71, 233, 0) 70%), linear-gradient(180deg, #F9FAFF 0%, rgba(249, 250, 255, 0) 70%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.ind:hover .ind__glow { opacity: 1; }
.ind { --d: 0s; }
.ind:nth-child(2) { --d: .08s; } .ind:nth-child(3) { --d: .16s; } .ind:nth-child(4) { --d: .12s; } .ind:nth-child(5) { --d: .2s; } .ind:nth-child(6) { --d: .28s; }
:root:not(.no-js) .ind-grid[data-reveal] > .ind { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease) var(--d), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d), background-color .5s var(--ease); }
:root:not(.no-js) .ind-grid[data-reveal].is-in > .ind { opacity: 1; transform: none; }

/* the illustration */
.ind__art { position: relative; margin: 0 -8px 10px; aspect-ratio: 300 / 210; }
.ind__art::before { content: ""; position: absolute; inset: 30% 14% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 71, 233, .16), rgba(37, 71, 233, 0)); opacity: 0; transform: scale(.8); transition: opacity .6s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1); }
.ind__art .ind-iso { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ind:hover { --lift: -8px; }
.ind:hover .ind__art::before { opacity: 1; transform: none; }
.ind:hover .ind-iso .gnd { stroke: #B3C2FF; animation: ind-gnd 1.4s linear infinite; }
@keyframes ind-gnd { to { stroke-dashoffset: -12; } }

/* meta, title, text */
.ind__meta { display: flex; align-items: center; gap: 12px; }
.ind__n { color: var(--tone2); font-size: 11px; letter-spacing: .12em; transition: color .4s; }
.ind:hover .ind__n { color: var(--royal); }
.ind__st { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.ind__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.ind__st--live { background: #E9FBF2; color: #067647; }
.ind__st--live::before { background: var(--ok); box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); }
.ind-grid.is-live .ind__st--live::before { animation: ind-live 2.4s ease-out infinite; }
@keyframes ind-live { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(18, 183, 106, 0); } }
.ind__st--ready { background: var(--canvas-2); color: var(--royal-700); }
.ind__st--ready::before { background: var(--royal); }
.ind__t { margin-top: 14px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.ind__x { max-width: 36ch; margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }

/* the example flow */
.ind__flow { margin-top: auto; padding-top: 24px; }
@supports (grid-template-rows: subgrid) {
  .xcells > .ind { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .ind__flow { margin-top: 0; }
}
.ind__flow { --c: 30px; --g: 7px; }
.ind__flow::before { content: ""; display: block; height: 1px; margin-bottom: 18px; background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 7px); }
.ind__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ind__lbl { color: var(--tone2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 3px; }
.ind__price { display: flex; flex-direction: column; align-items: flex-end; color: var(--ink); font-size: 26px; font-weight: 500; letter-spacing: -.035em; line-height: 1; transition: color .45s var(--ease); }
.ind__price .odo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); padding-block: .06em; }
.ind__per { margin-top: 5px; color: var(--muted); font-size: 11.5px; font-weight: 400; letter-spacing: 0; }
.ind:hover .ind__price { color: var(--royal); }
.ind__track { display: flex; align-items: center; gap: var(--g); margin-top: 14px; }
.ind__chips { position: relative; display: flex; gap: var(--g); margin: 0; padding: 0; list-style: none; }
.ind__chips::before, .ind__chips::after { content: ""; position: absolute; left: calc(var(--c) / 2); right: calc(var(--c) / 2); top: 50%; height: 1px; background: #DCE3F3; }
.ind__chips::after { background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; }
.ind-chip { position: relative; z-index: 1; display: grid; place-items: center; width: var(--c); height: var(--c); border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #DCE3F3, 0 6px 14px -10px rgba(15, 31, 122, .4); color: #8A91A8; transition: background-color .25s, color .25s, box-shadow .25s; }
.ind-chip .i { width: 15px; height: 15px; }
.ind-chip__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; padding: 4px 8px; border-radius: 7px; background: var(--ink); color: #fff; font-size: 10px; line-height: 1.4; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s, transform .25s; pointer-events: none; }
.ind-chip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--royal); box-shadow: 0 10px 18px -8px rgba(37, 71, 233, .6); opacity: 0; transition: opacity .2s; }
.ind-chip .i { position: relative; transition: color .2s; }
.ind-chip:hover { z-index: 4; }
.ind-chip:hover::before { opacity: 1; }
.ind-chip:hover .i { color: #fff; }
.ind-chip:hover .ind-chip__tip { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ind-grid.is-quiet .ind-chip__tip { opacity: 0 !important; }
.ind__ok { display: grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; background: var(--ok); color: #fff; opacity: 0; transform: scale(.5); }
.ind__ok .i { width: 11px; height: 11px; }
.ind__names { min-height: 3em; margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .ind-chip { background: var(--canvas-2); color: var(--royal); }
  .ind__chips::after { transform: none; }
  .ind__ok { opacity: 1; transform: none; }
}

/* footer strip */
.ind-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding: 32px 32px 0; }
.ind-foot__t { display: flex; align-items: center; gap: 14px; max-width: 62ch; color: var(--body); font-size: 15px; line-height: 1.55; }
.ind-foot__t strong { color: var(--ink); font-weight: 600; }
.ind-foot__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--canvas-2); color: var(--royal); }
.ind-foot__ico .i { width: 18px; height: 18px; }
.ind-foot__cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1180px) {
  .ind__flow { --c: 26px; --g: 5px; }
  .ind-chip { border-radius: 8px; }
  .ind-chip .i { width: 14px; height: 14px; }
}
@media (max-width: 900px) {
  .ind__flow { --c: 30px; --g: 7px; }
}
@media (max-width: 640px) {
  .xcells > .ind { padding-inline: 0; }
  .ind-foot { padding-inline: 0; }
  .ind__art { max-width: 380px; margin-inline: auto; width: 100%; }
}
@media (max-width: 380px) {
  .ind__flow { --c: 26px; --g: 5px; }
}
.ind-grid.is-live .ind__chips--n4 .ind-chip { animation: ind-chip-n4 5.00s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n4::after { animation: ind-run-n4 5.00s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n4 + .ind__ok { animation: ind-ok-n4 5.00s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes ind-chip-n4 { 0% { background: #fff; color: #8A91A8; transform: none; } 4.00% { background: var(--royal); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(37, 71, 233, .6); } 12.00%, 82.00% { background: var(--canvas-2); color: var(--royal); transform: none; box-shadow: inset 0 0 0 1px #C9D5FF; } 90.00%, 100% { background: #fff; color: #8A91A8; transform: none; } }
@keyframes ind-run-n4 { 0% { transform: scaleX(0); opacity: 1; } 41.00%, 82.00% { transform: scaleX(1); opacity: 1; } 90.00%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ind-ok-n4 { 0%, 48.00% { opacity: 0; transform: scale(.5); } 55.00%, 82.00% { opacity: 1; transform: none; } 90.00%, 100% { opacity: 0; transform: scale(.8); } }
.ind__chips--n4 .ind-chip--2 { animation-delay: 0.6s !important; }
.ind__chips--n4 .ind-chip--3 { animation-delay: 1.2s !important; }
.ind__chips--n4 .ind-chip--4 { animation-delay: 1.8s !important; }
.ind-grid.is-live .ind__chips--n5 .ind-chip { animation: ind-chip-n5 5.60s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n5::after { animation: ind-run-n5 5.60s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n5 + .ind__ok { animation: ind-ok-n5 5.60s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes ind-chip-n5 { 0% { background: #fff; color: #8A91A8; transform: none; } 3.57% { background: var(--royal); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(37, 71, 233, .6); } 10.71%, 83.93% { background: var(--canvas-2); color: var(--royal); transform: none; box-shadow: inset 0 0 0 1px #C9D5FF; } 91.07%, 100% { background: #fff; color: #8A91A8; transform: none; } }
@keyframes ind-run-n5 { 0% { transform: scaleX(0); opacity: 1; } 47.32%, 83.93% { transform: scaleX(1); opacity: 1; } 91.07%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ind-ok-n5 { 0%, 53.57% { opacity: 0; transform: scale(.5); } 59.82%, 83.93% { opacity: 1; transform: none; } 91.07%, 100% { opacity: 0; transform: scale(.8); } }
.ind__chips--n5 .ind-chip--2 { animation-delay: 0.6s !important; }
.ind__chips--n5 .ind-chip--3 { animation-delay: 1.2s !important; }
.ind__chips--n5 .ind-chip--4 { animation-delay: 1.8s !important; }
.ind__chips--n5 .ind-chip--5 { animation-delay: 2.4s !important; }
.ind-grid.is-live .ind__chips--n7 .ind-chip { animation: ind-chip-n7 6.80s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n7::after { animation: ind-run-n7 6.80s ease-in-out infinite; }
.ind-grid.is-live .ind__chips--n7 + .ind__ok { animation: ind-ok-n7 6.80s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes ind-chip-n7 { 0% { background: #fff; color: #8A91A8; transform: none; } 2.94% { background: var(--royal); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(37, 71, 233, .6); } 8.82%, 86.76% { background: var(--canvas-2); color: var(--royal); transform: none; box-shadow: inset 0 0 0 1px #C9D5FF; } 92.65%, 100% { background: #fff; color: #8A91A8; transform: none; } }
@keyframes ind-run-n7 { 0% { transform: scaleX(0); opacity: 1; } 56.62%, 86.76% { transform: scaleX(1); opacity: 1; } 92.65%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ind-ok-n7 { 0%, 61.76% { opacity: 0; transform: scale(.5); } 66.91%, 86.76% { opacity: 1; transform: none; } 92.65%, 100% { opacity: 0; transform: scale(.8); } }
.ind__chips--n7 .ind-chip--2 { animation-delay: 0.6s !important; }
.ind__chips--n7 .ind-chip--3 { animation-delay: 1.2s !important; }
.ind__chips--n7 .ind-chip--4 { animation-delay: 1.8s !important; }
.ind__chips--n7 .ind-chip--5 { animation-delay: 2.4s !important; }
.ind__chips--n7 .ind-chip--6 { animation-delay: 3.0s !important; }
.ind__chips--n7 .ind-chip--7 { animation-delay: 3.6s !important; }

/* ==========================================================================
   12. Developers. The round trip: a request travels between your server, the
   Identiko API and the applicant, with the code for each hop beside it.
   ========================================================================== */
.rt-iso { display: block; width: 100%; height: auto; overflow: visible; }
.rt-iso * { stroke-linejoin: round; stroke-linecap: round; }
.rt-iso .f-l { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.rt-iso .f-r, .rt-iso .f-t { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.rt-iso .i-l, .rt-iso .i-r, .rt-iso .i-t { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.rt-iso .i-t { stroke: #4A5270; }
.rt-iso .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.rt-iso .r-l, .rt-iso .r-r, .rt-iso .r-t { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.rt-iso .r-t-edge { fill: none; stroke: #7D95FF; stroke-width: 1; }
.rt-iso .gnd { fill: none; stroke: #DCE1EC; stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .5s; }
.rt-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.rt-iso .ln-l { fill: none; stroke: #CDD3E0; stroke-width: 1.25; }
.rt-iso .ln-i { fill: none; stroke: #4A5270; stroke-width: 1.4; }
.rt-iso .ln-w { fill: none; stroke: #FFFFFF; stroke-width: 1.8; opacity: .85; }
.rt-iso .soft { fill: #EEF2FB; stroke: #CDD3E0; stroke-width: 1; }
.rt-iso .photo-h { fill: #C9D3F2; }
.rt-iso .photo-b { fill: none; stroke: #C9D3F2; stroke-width: 1.6; }
.rt-iso .mrz { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 2 2.5; }
.rt-iso .flow, .rt-iso .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.rt-iso .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2; }
.rt-iso .seal { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; }
.rt-iso .ripple { fill: none; stroke: var(--royal); stroke-width: 1.25; opacity: 0; }
.rt-iso .shadow { fill: rgba(15, 31, 122, .06); stroke: none; }
.rt-iso .imprint { fill: none; stroke: var(--royal); stroke-width: 2; }
.rt-iso .wick { fill: none; stroke: #4A5270; stroke-width: 1.4; }
.rt-iso .arc-w { fill: none; stroke: #FFFFFF; stroke-width: 1.8; }
.rt-iso .top-flash { fill: var(--cyan); stroke: none; opacity: 0; }
.rt-iso .pkt { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; }
.rt-iso .win { fill: #EEF2FB; stroke: #9AA1B5; stroke-width: 1.1; }
.rt-iso .ridge { fill: none; stroke: #4A5270; stroke-width: 1.25; }
.rt-iso .key-ring, .rt-iso .key-bar { fill: none; stroke: var(--royal); stroke-width: 2.4; }
.rt-iso .door { stroke: #1B36C4; }
.rt-iso .r-l { fill: #1D3BD0; stroke: #1D3BD0; }
.rt-iso .r-t { stroke: #5C78FF; }
.rt-iso .i-r { fill: #161B30; stroke: #161B30; }
.rt-iso .scr-bar { fill: var(--royal); stroke: none; }
.rt-iso .scr-ln { fill: none; stroke: #C9D3F2; stroke-width: 1.6; }
.rt-iso .scr-btn { fill: var(--royal); stroke: none; }
.rt-iso .scr-card { fill: #EEF2FF; stroke: #9AB0FF; stroke-width: 1; }
.rt-iso .scr-ph { fill: #C9D3F2; stroke: none; }
.rt-iso .scan { fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.rt-iso .scr-ok { fill: var(--ok); stroke: none; }
.rt-iso .scr-tick { fill: none; stroke: #fff; stroke-width: 1.8; }
.rt-iso .scr { fill: #fff; stroke: #9AA1B5; stroke-width: 1.1; }
.rt-iso .notch { fill: none; stroke: #9AA1B5; stroke-width: 1.4; }
.rt-iso .slot { fill: none; stroke: #CDD3E0; stroke-width: 1.4; }
.rt-iso .slot-i { fill: none; stroke: #2A3150; stroke-width: 1.4; }
.rt-iso .led { fill: var(--royal); stroke: none; }
.rt-iso .led-off { fill: #DCE1EC; stroke: none; }
.rt-iso .led-api { fill: var(--cyan); stroke: none; }
.rt-iso .rt-wire { fill: none; stroke: #C4CCDF; stroke-width: 5; stroke-linejoin: round; }
.rt-iso .rt-flow { fill: none; stroke: #fff; stroke-width: 1.3; stroke-dasharray: 3 3; }
.rt-iso .ping { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0; }
.rt-iso .rt-pkt__halo { fill: rgba(37, 71, 233, .16); }
.rt-iso .rt-pkt__dot { fill: var(--royal); stroke: #fff; stroke-width: 1.6; }
.rt-iso .rt-pkt__seal { fill: none; stroke: var(--cyan); stroke-width: 1.4; opacity: 0; }
.rt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; align-items: start; padding-inline: 32px; }
.rt__kicker { margin-bottom: 18px; color: var(--tone2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.rt__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rt__steps > li { border-bottom: 1px solid var(--line); }
.rt-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; width: 100%; padding: 18px 4px 18px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rt-step__n { padding-top: 3px; color: var(--tone2); font-size: 11px; letter-spacing: .1em; transition: color .3s; }
.rt-step__body { display: grid; gap: 4px; }
.rt-step__t { color: var(--muted); font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; transition: color .3s; }
.rt-step__ep { justify-self: start; padding: 2px 8px; border-radius: 6px; background: #F2F4F9; color: var(--muted); font-size: 11.5px; transition: background-color .3s, color .3s; }
.rt-step__x { max-height: 0; overflow: hidden; color: var(--body); font-size: 14.5px; line-height: 1.55; opacity: 0; transition: opacity .4s var(--ease), max-height .5s var(--ease); }
.rt-step__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.rt-step__bar > span { display: block; height: 100%; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; }
.rt-step:hover .rt-step__t { color: var(--ink); }
.rt-step[aria-pressed="true"] .rt-step__n { color: var(--royal); }
.rt-step[aria-pressed="true"] .rt-step__t { color: var(--ink); }
.rt-step[aria-pressed="true"] .rt-step__ep { background: var(--canvas-2); color: var(--royal-700); }
.rt-step[aria-pressed="true"] .rt-step__x { max-height: 6em; margin-top: 4px; opacity: 1; }
.rt-step.is-run .rt-step__bar > span { animation: rt-bar var(--dur, 6s) linear forwards; }
.rt-step.is-done .rt-step__bar > span { transform: scaleX(1); }
@keyframes rt-bar { to { transform: scaleX(1); } }
.rt-step:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; border-radius: 6px; }

.rt__stage { position: relative; margin: 0; }
.rt__scene { position: relative; border-radius: 22px; background: radial-gradient(60% 70% at 50% 40%, #FFFFFF, rgba(255, 255, 255, 0)), linear-gradient(180deg, #F7F9FE, #EDF1FA); box-shadow: inset 0 0 0 1px #E3E8F4; padding: 28px 20px 64px; }
.rt__canvas { position: relative; }
.rt__scene .rt-iso { display: block; width: 100%; height: auto; overflow: visible; }
.rt-node { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.rt-node__t { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #DCE3F3, 0 6px 16px -10px rgba(15, 31, 122, .45); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rt-node--srv { left: 17.856%; top: 26.555%; margin-top: -10px; }
.rt-node--api { left: 52.185%; top: 33.609%; margin-top: -10px; }
.rt-node--phn { left: 90.648%; top: 14.832%; margin-top: -10px; }
.rt-node.is-hit .rt-node__t { box-shadow: 0 0 0 1px var(--royal), 0 8px 18px -8px rgba(37, 71, 233, .5); }
.rt-tag { position: absolute; left: 0; top: 0; z-index: 2; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11.5px; white-space: nowrap; opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s; pointer-events: none; box-shadow: 0 10px 22px -12px rgba(7, 10, 23, .7); }
.rt-tag::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.rt-tag.is-on { opacity: 1; }
.rt-tag--hook { background: var(--royal); }
.rt-tag--user { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #DCE3F3, 0 10px 22px -12px rgba(15, 31, 122, .5); }
.rt-tag--res { background: #0B3B2A; color: #B7F5D5; }

.rt-iso .rt-pkt { opacity: 0; transition: opacity .2s; }
.rt-iso .rt-pkt.is-on { opacity: 1; }
.rt-iso .rt-pkt--res .rt-pkt__dot { fill: var(--ok); }
.rt-iso .rt-pkt--user .rt-pkt__dot { fill: #fff; stroke: var(--royal); stroke-width: 2; }
.rt-iso .rt-pkt--hook .rt-pkt__seal { opacity: 1; }
.rt-iso .rt-wire { transition: stroke .4s; }
.rt-iso .rt-wire.is-on { stroke: #9FB2FF; }
[data-rt].is-live .rt-iso .rt-flow { animation: hw-march 1.2s linear infinite; }
.rt-iso .rt-ping { transform-box: fill-box; transform-origin: center; }
.rt-iso .rt-ping.is-hit .ping { animation: rt-ping .9s ease-out; }
@keyframes rt-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.rt-iso .ping { transform-box: fill-box; transform-origin: center; }
.rt-iso .rt-core { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.rt-iso .rt-core.is-hit { transform: translateY(-4px); }
.rt-iso .led { transition: fill .2s; }
.rt-iso.is-srv .led { fill: var(--cyan); }
.rt-iso .scr { opacity: 0; transition: opacity .35s; }
.rt-iso[data-scr="1"] .scr--1, .rt-iso[data-scr="2"] .scr--2, .rt-iso[data-scr="3"] .scr--3 { opacity: 1; }
.rt-iso .scr-scan { transform-box: fill-box; }
[data-rt].is-live .rt-iso[data-scr="2"] .scr-scan { animation: rt-scan 1.1s ease-in-out infinite alternate; }
@keyframes rt-scan { from { transform: translateY(-9px); } to { transform: translateY(9px); } }

.rt__code { position: relative; z-index: 1; margin: -40px 24px 0; overflow: hidden; border: 1px solid #1B2340; border-radius: 18px; background: var(--night); box-shadow: 0 40px 80px -40px rgba(7, 10, 23, .65); color: #C9D3F5; isolation: isolate; }
.rt__code::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 100% 0%, rgba(37, 71, 233, .38), rgba(37, 71, 233, 0) 70%); }
.rt__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.rt-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); font-size: 11.5px; white-space: nowrap; transition: background-color .3s, color .3s; }
.rt-status__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background-color .3s, box-shadow .3s; }
.rt-status--req .rt-status__dot { background: #7D95FF; box-shadow: 0 0 0 3px rgba(125, 149, 255, .2); }
.rt-status--res { background: rgba(18, 183, 106, .14); color: #75E0A7; }
.rt-status--res .rt-status__dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .2); }
.rt-status--hook { background: rgba(37, 71, 233, .3); color: #fff; }
.rt-status--hook .rt-status__dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .22); }
.rt-status--user .rt-status__dot { background: #fff; }
.rt__tools { display: flex; gap: 6px; margin-left: auto; }
.rt-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 32px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); font: 500 12px/1 var(--font); cursor: pointer; transition: background-color .2s, color .2s; }
.rt-tool:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rt-tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.rt-tool .i { width: 14px; height: 14px; }
.rt-copy.is-done { background: rgba(18, 183, 106, .18); color: #75E0A7; }
.rt-play { padding: 0; width: 32px; }
.rt-play__i { position: relative; width: 10px; height: 11px; }
.rt-play__i::before, .rt-play__i::after { content: ""; position: absolute; top: 0; width: 3px; height: 11px; border-radius: 1px; background: currentColor; }
.rt-play__i::before { left: 1px; } .rt-play__i::after { right: 1px; }
.rt-play[aria-pressed="true"] .rt-play__i::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.rt-play[aria-pressed="true"] .rt-play__i::after { display: none; }
.rt-pane { padding: 16px 22px 20px; }
.rt-pane__file { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: rgba(255, 255, 255, .5); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rt-pane__n { padding: 2px 6px; border-radius: 5px; background: rgba(100, 244, 248, .12); color: var(--cyan); }
.rt-pane pre { min-height: calc(10 * 1.75em); margin: 0; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; }
.rt-pane code { display: block; width: max-content; min-width: 100%; }
.rt-pane .ln { display: block; min-height: 1.75em; padding-left: 12px; border-left: 2px solid transparent; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s, background-color .3s; }
[data-rt].is-anim .rt-pane .ln { opacity: 0; transform: translateX(-6px); }
[data-rt].is-anim .rt-pane .ln.is-on { opacity: 1; transform: none; }
.rt-pane .ln.is-cur { border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(100, 244, 248, .07), rgba(100, 244, 248, 0) 70%); }
.t-cm { color: rgba(201, 211, 245, .5); }

/* facts and the guide link, in one strip under the section */
.dv-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; margin-top: 56px; padding: 26px 32px 0; border-top: 1px solid var(--line); }
.dv-foot__facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.dv-foot__facts li { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-size: 14.5px; }
.dv-foot__facts .i { width: 18px; height: 18px; color: var(--royal); }
.dv-foot .text-link { margin-top: 0; }
.rt-iso .rt-trail { fill: none; stroke: var(--royal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 4000; opacity: .95; transition: opacity .6s; }
.rt-iso .rt-trail--k-res { stroke: var(--ok); }
.rt-iso .rt-trail--k-hook { stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 3px rgba(100, 244, 248, .8)); }
.rt-iso .rt-trail--k-user { stroke: #7D95FF; }
.rt-iso .rt-trail.is-fade { opacity: 0; }

@media (max-width: 1100px) {
  .rt { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rt__steps { display: flex; gap: 8px; overflow-x: auto; border: 0; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .rt__steps > li { flex: 0 0 auto; border: 0; scroll-snap-align: start; }
  .rt-step { grid-template-columns: auto auto; align-items: center; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
  .rt-step__body { display: flex; }
  .rt-step__ep, .rt-step__x { display: none; }
  .rt-step__t { font-size: 14px; white-space: nowrap; }
  .rt-step__n { padding-top: 0; }
  .rt-step[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--royal); background: #F5F7FF; }
  .rt-step__bar { left: 14px; right: 14px; bottom: 5px; }
  .rt__kicker { margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .rt { padding-inline: 0; }
  .rt__scene { padding: 6px 6px 20px; border-radius: 16px; }
  .rt-node__t { padding: 3px 7px; font-size: 10px; }
  .rt-tag { font-size: 10px; padding: 4px 7px; }
  .rt__code { margin: 12px 0 0; }
  .rt-pane { padding: 14px 16px 16px; }
  .rt-pane pre { font-size: 11.5px; min-height: 0; }
  .dv-foot { padding-inline: 0; }
  .rt-copy__t { display: none; }
}

/* ==========================================================================
   13. Pricing. Build a flow, set a volume, see the plan that fits. The quiet
   list: one accent (the switch), grouped checks, a short dark summary.
   ========================================================================== */
.eq { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-inline: 32px; padding: 12px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #E6EAF3, 0 40px 80px -60px rgba(15, 31, 122, .35); }
.eq__ctrl { display: grid; gap: 34px; align-content: start; padding: 26px 28px 24px 24px; }
.eq-f { margin: 0; padding: 0; border: 0; min-width: 0; }
.eq-f__l { float: left; margin-bottom: 14px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.eq-f__meta { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.eq-f__meta + .eq-groups, .eq-f__l + .eq-tabs { clear: both; }
.eq-clear { padding: 0; border: 0; background: none; color: var(--royal); font: 600 13px/1.4 var(--font); cursor: pointer; }
.eq-clear:hover { text-decoration: underline; }
.eq-rd, .eq-cb { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.eq-rd:focus-visible + .eq-tab, .eq-cb:focus-visible + .eq-ck, .eq-clear:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }

/* A: segmented tabs */
.eq--a .eq-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 12px; background: #F1F3F8; }
.eq--a .eq-tab { padding: 9px 8px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.eq--a .eq-tab:hover { color: var(--ink); }
.eq--a .eq-rd:checked + .eq-tab { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10, 14, 31, .08), 0 4px 12px -6px rgba(10, 14, 31, .18); }

/* A: two quiet lists with switches */
.eq-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.eq-g__t { padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--tone2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.eq-g__list { margin: 0; padding: 0; list-style: none; }
.eq--a .eq-ck { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 30px; gap: 12px; align-items: center; margin: 0 -8px; padding: 11px 8px; border-bottom: 1px solid #EFF1F6; border-radius: 0; cursor: pointer; transition: background-color .2s; }
.eq--a .eq-it:last-child .eq-ck { border-bottom: 0; }
.eq--a .eq-ck:hover { background: #F8F9FC; }
.eq-ck__i { width: 18px; height: 18px; color: #A3A9BC; transition: color .2s; }
.eq-ck__n { color: var(--body); font-size: 14.5px; transition: color .2s; }
.eq-ck__p { color: var(--tone2); font-size: 12.5px; transition: color .2s; }
.eq--a .eq-ck__s { position: relative; width: 30px; height: 18px; border-radius: 9px; background: #DCE1EC; transition: background-color .25s; }
.eq--a .eq-ck__s::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .25); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); }
.eq-cb:checked + .eq-ck .eq-ck__i { color: var(--ink); }
.eq-cb:checked + .eq-ck .eq-ck__n { color: var(--ink); font-weight: 500; }
.eq-cb:checked + .eq-ck .eq-ck__p { color: var(--ink); }
.eq--a .eq-cb:checked + .eq-ck .eq-ck__s { background: var(--royal); }
.eq--a .eq-cb:checked + .eq-ck .eq-ck__s::after { transform: translateX(12px); }

/* B: underline tabs */

/* B: monochrome chips */

/* volume */
.eq-vol__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.eq-vol__head .eq-f__l { float: none; margin: 0; }
.eq-vol__v { color: var(--ink); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.eq-range { --p: 33.3%; width: 100%; height: 26px; margin: 10px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.eq-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p), #E1E6F0 var(--p)); }
.eq-range::-moz-range-track { height: 4px; border-radius: 2px; background: #E1E6F0; }
.eq-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.eq-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #CBD2E1, 0 4px 10px -3px rgba(10, 14, 31, .35); -webkit-appearance: none; appearance: none; transition: transform .2s; }
.eq-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #CBD2E1, 0 4px 10px -3px rgba(10, 14, 31, .35); }
.eq-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.eq-range:focus-visible { outline: 2px solid var(--royal); outline-offset: 4px; border-radius: 8px; }
.eq-vol__ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--tone2); font-size: 11px; }

/* summary */
.eq__sum { position: relative; }
.eq-sum { position: sticky; top: 96px; display: flex; flex-direction: column; min-height: 100%; padding: 28px 28px 24px; border-radius: 20px; }
.eq-sum__k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.eq-sum__big { margin-top: 8px; font-size: clamp(48px, 5vw, 64px); font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.eq-bar { display: flex; gap: 2px; height: 6px; margin-top: 22px; overflow: hidden; border-radius: 3px; }
.eq-bar__s { flex: 0 0 0%; min-width: 0; transition: flex-basis .5s cubic-bezier(.2, .8, .2, 1); }
.eq-sum__rows { margin: 22px 0 0; }
.eq-sum__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-block: 1px solid; font-size: 14.5px; }
.eq-sum__rows dd { margin: 0; font-size: 18px; font-weight: 500; }
.eq-fit { margin-top: 18px; padding: 16px 16px 16px; border-radius: 14px; }
.eq-fit__k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.eq-fit__dot { width: 6px; height: 6px; border-radius: 50%; }
.eq-fit__n { margin-top: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.eq-fit__x { min-height: 3em; margin-top: 4px; font-size: 14px; line-height: 1.5; }
.eq-sum__cta { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.eq-alt { padding-bottom: 2px; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid; }
.eq-sum__note { margin-top: auto; padding-top: 18px; font-size: 12px; }

/* A: dark summary */
.eq--a .eq-sum { overflow: hidden; background: var(--night); color: rgba(255, 255, 255, .7); isolation: isolate; }
.eq--a .eq-sum::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 100% 0%, rgba(37, 71, 233, .45), rgba(37, 71, 233, 0) 70%); }
.eq--a .eq-sum__k { color: rgba(255, 255, 255, .5); }
.eq--a .eq-sum__big { color: #fff; }
.eq--a .eq-bar { background: rgba(255, 255, 255, .08); }
.eq--a .eq-sum__rows > div { border-color: rgba(255, 255, 255, .1); }
.eq--a .eq-sum__rows dt { color: rgba(255, 255, 255, .7); }
.eq--a .eq-sum__rows dd { color: #fff; }
.eq--a .eq-fit { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.eq--a .eq-fit__k { color: var(--cyan); }
.eq--a .eq-fit__dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .18); }
.eq--a .eq-fit__n { color: #fff; }
.eq--a .eq-fit__x { color: rgba(255, 255, 255, .72); }
.eq--a .eq-cta { padding-right: 6px; background: #fff; color: var(--ink); }
.eq--a .eq-cta .btn__chip { background: var(--royal); color: #fff; }
.eq--a .eq-alt { color: #fff; border-color: rgba(255, 255, 255, .35); }
.eq--a .eq-sum__note { color: rgba(255, 255, 255, .42); }

/* B: light summary */

/* plans, linked to the estimate */
.pls { margin-top: 56px; }
.xcells > .pl { display: flex; flex-direction: column; padding: 30px 32px 32px; transition: background-color .5s var(--ease); }
.pl__fit { height: 18px; color: var(--royal); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.pl.is-fit .pl__fit { opacity: 1; transform: none; }
.xcells > .pl.is-fit { background: linear-gradient(180deg, #F3F6FF 0%, rgba(243, 246, 255, 0) 80%); }
.pl__name { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.pl__badge { padding: 3px 9px; border-radius: 999px; background: var(--canvas-2); color: var(--royal-700); font-size: 11.5px; font-weight: 600; }
.pl__price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.pl__amount { color: var(--ink); font-size: 44px; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.pl__per { color: var(--muted); font-size: 14px; }
.pl__list { display: grid; gap: 10px; margin: 22px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pl__list li { display: flex; gap: 10px; color: var(--body); font-size: 14.5px; line-height: 1.45; }
.pl__list .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--royal); }
.pl__cta { align-self: flex-start; margin-top: auto; }

@media (max-width: 1100px) {
  .eq { grid-template-columns: minmax(0, 1fr); }
  .eq-sum { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .eq { margin-inline: 0; padding: 8px; border-radius: 22px; }
  .eq__ctrl { padding: 18px 10px 14px; }
  .eq-groups { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .eq--a .eq-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-sum { padding: 24px 18px 20px; }
  .xcells > .pl, .pv-inc { padding-inline: 0; }
}
.eq-bar__s--email { background: #7C94FF; }
.eq-bar__s--id { background: #2547E9; }
.eq-bar__s--live { background: #4D6BFF; }
.eq-bar__s--fm { background: #AEBBFF; }
.eq-bar__s--aml { background: #64F4F8; }
.eq-bar__s--ip { background: #35B9E8; }
.eq-bar__s--poa { background: #9FFBFF; }
.eq-bar__s--vid { background: #D7DEFF; }
.eq-bar__s--age { background: #1B36C4; }
.eq-bar__s--fs { background: #5AD8F0; }

/* included on every plan */
.inc { margin: 40px 32px 0; padding: 28px 28px 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #E6EAF3, 0 30px 60px -50px rgba(15, 31, 122, .35); }
.inc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; padding: 0 12px 20px; border-bottom: 1px solid var(--line); }
.inc__t { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.inc__x { color: var(--body); font-size: 14.5px; line-height: 1.55; }
.inc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.inc-it { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; transition: background-color .3s var(--ease); }
.inc-it:hover { background: #F6F8FD; }
.inc-it__i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.inc-it:hover .inc-it__i { background: var(--royal); color: #fff; transform: translateY(-2px); }
.inc-it__i .i { width: 17px; height: 17px; }
.inc-it__b { display: grid; gap: 2px; min-width: 0; }
.inc-it__n { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.inc-it__x { color: var(--muted); font-size: 13px; line-height: 1.4; }
@media (max-width: 1100px) {
  .inc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .inc { margin-inline: 0; padding: 22px 16px; }
  .inc__list { grid-template-columns: minmax(0, 1fr); }
  .inc-it { padding-inline: 4px; }
}

/* ==========================================================================
   14. Security. The control room: six controls, each shown working in a live
   vignette, toured one at a time with a pause button.
   ========================================================================== */
/* ---------- Security: section head ---------- */
.sx-head__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 380px); gap: 24px 64px; align-items: end; margin-top: 22px; }
.sx-head__row .lede { padding-bottom: 8px; }
@media (max-width: 1100px) { .sx-head__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) { .sx-head .clause { white-space: normal; } }
/* ---------- Security: live vignettes (shared) ---------- */
.sv { position: relative; display: grid; justify-items: center; gap: .9em; font-size: var(--sv, 16px); color: var(--ink); }
.sv .i { width: 1em; height: 1em; }
.sv-card { position: relative; width: 20em; padding: 1.2em 1.25em 1.1em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 1.6em 3em -1.9em rgba(15, 31, 122, .5); text-align: left; }
.sv-k { color: var(--tone2); font-size: .66em; letter-spacing: .12em; text-transform: uppercase; }
.sv-t { margin-top: .3em; color: var(--ink); font-size: 1.05em; font-weight: 600; letter-spacing: -.01em; }
.sv-x { margin-top: .35em; color: var(--muted); font-size: .8em; line-height: 1.5; }
.sv-foot { display: flex; align-items: center; gap: .5em; margin-top: 1em; padding-top: .8em; border-top: 1px solid var(--line); color: var(--muted); font-size: .74em; }
.sv-foot .i { color: var(--ok); }
/* roles */
.sv-perm { display: grid; gap: .1em; margin: .9em 0 0; padding: 0; list-style: none; }
.sv-perm li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px solid #F0F2F7; color: var(--ink); font-size: .84em; }
.sv-perm li > span:first-child { display: inline-flex; align-items: center; gap: .45em; }
.sv-perm--no { color: var(--muted) !important; }
.sv-perm__lock { color: var(--bad); }
.sv-sw { position: relative; flex: none; width: 2.1em; height: 1.2em; border-radius: .6em; background: var(--royal); }
.sv-sw::after { content: ""; position: absolute; left: .15em; top: .15em; width: .9em; height: .9em; border-radius: 50%; background: #fff; transform: translateX(.9em); box-shadow: 0 1px 2px rgba(10, 14, 31, .25); }
.sv-sw--off { background: #DCE1EC; }
.sv-sw--off::after { transform: none; }
.sv.is-play .sv-sw--1 { animation: sv-sw-bg .35s ease .5s both; } .sv.is-play .sv-sw--1::after { animation: sv-sw-k .35s ease .5s both; }
.sv.is-play .sv-sw--2 { animation: sv-sw-bg .35s ease 1s both; } .sv.is-play .sv-sw--2::after { animation: sv-sw-k .35s ease 1s both; }
.sv.is-play .sv-sw--3 { animation: sv-sw-bg .35s ease 1.5s both; } .sv.is-play .sv-sw--3::after { animation: sv-sw-k .35s ease 1.5s both; }
.sv.is-play .sv-perm--no { animation: sv-deny .6s ease 2.2s both; }
@keyframes sv-sw-bg { from { background: #DCE1EC; } }
@keyframes sv-sw-k { from { transform: none; } }
@keyframes sv-deny { 0%, 100% { transform: none; } 25% { transform: translateX(-.25em); } 50% { transform: translateX(.25em); } 75% { transform: translateX(-.12em); } }
.sv.is-play .sv--roles .sv-foot, .sv--roles.is-play .sv-foot { animation: sv-in .5s ease 2.8s both; }
/* two-factor */
.sv-modal { text-align: center; }
.sv-badge { display: grid; place-items: center; width: 2.4em; height: 2.4em; margin: 0 auto .4em; border-radius: .8em; background: var(--canvas-2); color: var(--royal); }
.sv-code { display: flex; justify-content: center; gap: .4em; margin-top: 1em; }
.sv-code span { display: grid; place-items: center; width: 2em; height: 2.4em; border-radius: .5em; background: #F5F7FC; box-shadow: inset 0 0 0 1px #DCE3F3; font-size: .95em; font-weight: 500; }
.sv-btns { display: flex; justify-content: center; gap: .5em; margin-top: 1.1em; }
.sv-btn { padding: .55em 1em; border-radius: 999px; box-shadow: inset 0 0 0 1px #DCE3F3; color: var(--muted); font-size: .78em; font-weight: 600; }
.sv-btn--p { background: var(--ink); box-shadow: none; color: #fff; }
.sv-toast { display: inline-flex; align-items: center; gap: .5em; padding: .55em .9em; border-radius: 999px; background: #E9FBF2; color: #067647; font-size: .78em; font-weight: 600; }
.sv--twofa.is-play .sv-code span { animation: sv-digit .25s ease both; }
.sv--twofa.is-play .sv-code span:nth-child(1) { animation-delay: .5s; } .sv--twofa.is-play .sv-code span:nth-child(2) { animation-delay: .75s; } .sv--twofa.is-play .sv-code span:nth-child(3) { animation-delay: 1s; }
.sv--twofa.is-play .sv-code span:nth-child(4) { animation-delay: 1.25s; } .sv--twofa.is-play .sv-code span:nth-child(5) { animation-delay: 1.5s; } .sv--twofa.is-play .sv-code span:nth-child(6) { animation-delay: 1.75s; }
@keyframes sv-digit { from { color: transparent; box-shadow: inset 0 0 0 1.5px var(--royal); } }
.sv--twofa.is-play .sv-btn--p { animation: sv-press .4s ease 2.3s both; }
@keyframes sv-press { 50% { transform: scale(.94); background: var(--royal); } }
.sv--twofa.is-play .sv-toast { animation: sv-in .5s cubic-bezier(.2, .8, .2, 1) 2.8s both; }
@keyframes sv-in { from { opacity: 0; transform: translateY(.5em); } }
/* audit */
.sv-log { width: 23em; }
.sv-log ul { display: grid; margin: .7em 0 0; padding: 0; list-style: none; }
.sv-log li { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; gap: .7em; align-items: center; padding: .55em 0; border-bottom: 1px solid #F0F2F7; }
.sv-log li:last-child { border-bottom: 0; }
.sv-av { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--canvas-2); color: var(--royal-700); font-size: .66em; font-weight: 700; }
.sv-av--2 { background: #E9FBF2; color: #067647; } .sv-av--3 { background: #FEF6E7; color: #B54708; }
.sv-log__t { color: var(--body); font-size: .76em; line-height: 1.35; }
.sv-log__t b { color: var(--ink); font-weight: 600; }
.sv-log__h { color: var(--tone2); font-size: .7em; }
.sv--audit.is-play .sv-log li { animation: sv-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.sv--audit.is-play .sv-log li:nth-child(4) { animation-delay: .3s; } .sv--audit.is-play .sv-log li:nth-child(3) { animation-delay: .9s; }
.sv--audit.is-play .sv-log li:nth-child(2) { animation-delay: 1.5s; } .sv--audit.is-play .sv-log li:nth-child(1) { animation-delay: 2.1s; }
.sv--audit.is-play .sv-log li:nth-child(1) { animation-name: sv-in, sv-hl; animation-duration: .5s, 1.6s; animation-delay: 2.1s, 2.6s; }
@keyframes sv-hl { 0% { background: rgba(37, 71, 233, .08); } 100% { background: transparent; } }
/* privacy */
.sv-steps { display: grid; gap: .55em; margin: .9em 0 0; padding: 0; list-style: none; }
.sv-st { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .6em; align-items: start; color: var(--ink); font-size: .82em; line-height: 1.4; }
.sv-st__d { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--ok); color: #fff; }
.sv-st__d .i { width: .8em; height: .8em; }
.sv--privacy.is-play .sv-st { animation: sv-st .4s ease both; }
.sv--privacy.is-play .sv-st__d { animation: sv-st-d .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.sv--privacy.is-play .sv-st--1, .sv--privacy.is-play .sv-st--1 .sv-st__d { animation-delay: .5s; }
.sv--privacy.is-play .sv-st--2, .sv--privacy.is-play .sv-st--2 .sv-st__d { animation-delay: 1.3s; }
.sv--privacy.is-play .sv-st--3, .sv--privacy.is-play .sv-st--3 .sv-st__d { animation-delay: 2.1s; }
@keyframes sv-st { from { color: var(--tone2); } }
@keyframes sv-st-d { from { background: #E1E6F0; color: transparent; transform: scale(.8); } }
.sv--privacy.is-play .sv-foot { animation: sv-in .5s ease 2.7s both; }
/* phones */
.sv-ph { width: 13em; padding: .5em; border-radius: 2em; background: var(--ink); box-shadow: 0 1.6em 3em -1.6em rgba(7, 10, 23, .6); }
.sv-ph__scr { position: relative; display: grid; justify-items: center; align-content: start; gap: .5em; min-height: 21em; padding: 1.4em 1em 1em; overflow: hidden; border-radius: 1.55em; background: #fff; text-align: center; }
.sv-ph__k { color: var(--tone2); font-size: .6em; letter-spacing: .12em; text-transform: uppercase; }
.sv-ph__t { color: var(--ink); font-size: .95em; font-weight: 600; }
.sv-ph__x { color: var(--muted); font-size: .72em; line-height: 1.45; }
.sv-vf { position: relative; width: 100%; height: 7.5em; margin-top: .3em; border-radius: .8em; background: #0E1428; overflow: hidden; }
.sv-vf__c { position: absolute; width: 1em; height: 1em; border: 2px solid rgba(255, 255, 255, .8); }
.sv-vf__c--1 { left: .6em; top: .6em; border-right: 0; border-bottom: 0; } .sv-vf__c--2 { right: .6em; top: .6em; border-left: 0; border-bottom: 0; }
.sv-vf__c--3 { left: .6em; bottom: .6em; border-right: 0; border-top: 0; } .sv-vf__c--4 { right: .6em; bottom: .6em; border-left: 0; border-top: 0; }
.sv-vf__card { position: absolute; left: 18%; right: 18%; top: 24%; bottom: 24%; display: grid; grid-template-columns: 34% 1fr; grid-template-rows: repeat(2, 1fr); gap: .3em; padding: .45em; border-radius: .35em; background: #E9EEFA; box-shadow: 0 0 0 2px var(--ok); }
.sv-vf__card span:first-child { grid-row: 1 / 3; border-radius: .2em; background: #C9D3F2; }
.sv-vf__card span:not(:first-child) { align-self: center; height: .3em; border-radius: .15em; background: #C9D3F2; }
.sv-vf__scan { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--cyan); box-shadow: 0 0 .6em var(--cyan); opacity: 0; }
.sv--capture.is-play .sv-vf__scan { animation: sv-scan 1.1s ease-in-out .3s 2 alternate both; }
@keyframes sv-scan { 0% { opacity: 1; transform: translateY(-2.4em); } 100% { opacity: 1; transform: translateY(2.4em); } }
.sv--capture.is-play .sv-vf__card { animation: sv-found .4s ease 2.6s both; }
@keyframes sv-found { from { box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); } }
.sv-ph__pill { display: inline-flex; align-items: center; gap: .45em; margin-top: .3em; padding: .45em .8em; border-radius: 999px; background: var(--ink); color: #fff; font-size: .74em; font-weight: 600; }
.sv-ph__no { color: var(--tone2); font-size: .7em; text-decoration: line-through; }
.sv-note { display: grid; justify-items: center; gap: .5em; padding-top: 1em; }
.sv-note__i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--canvas-2); color: var(--royal); }
.sv-ph__btn { margin-top: .6em; padding: .6em 1.6em; border-radius: 999px; background: var(--royal); color: #fff; font-size: .74em; font-weight: 600; }
.sv-live { position: absolute; inset: 0; display: grid; place-items: center; background: #0E1428; }
.sv-live__face { display: grid; place-items: center; width: 7.5em; height: 9.5em; border-radius: 50%; box-shadow: 0 0 0 2px rgba(100, 244, 248, .7); }
.sv-live__mesh { width: 6em; height: 6em; color: rgba(100, 244, 248, .75); }
.sv-rec { position: absolute; top: 1em; right: 1em; display: inline-flex; align-items: center; gap: .4em; padding: .3em .6em; border-radius: 999px; background: rgba(240, 68, 56, .2); color: #FDA29B; font-size: .64em; font-weight: 600; }
.sv-rec__d { width: .6em; height: .6em; border-radius: 50%; background: var(--bad); }
.sv--video.is-play .sv-ph__btn { animation: sv-press .4s ease 1.6s both; }
.sv--video.is-play .sv-live { animation: sv-open .6s ease 2.1s both; }
@keyframes sv-open { from { opacity: 0; transform: scale(1.04); } }
.sv--video.is-play .sv-rec__d { animation: sv-blink 1s steps(2, start) 2.7s infinite; }
@keyframes sv-blink { to { visibility: hidden; } }

/* ---------- Security · option 1: control room ---------- */
.sc { margin-inline: 32px; }
.sc__bar { display: flex; align-items: center; gap: 12px; }
.sc-tabs { display: flex; flex: 1; gap: 4px; min-width: 0; padding: 5px; overflow-x: auto; border-radius: 16px; background: #F1F3F8; scrollbar-width: none; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab { position: relative; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; overflow: hidden; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 500 13.5px/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.sc-tab .i { width: 16px; height: 16px; }
.sc-tab:hover { color: var(--ink); }
.sc-tab[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10, 14, 31, .08), 0 6px 14px -8px rgba(10, 14, 31, .2); }
.sc-tab[aria-pressed="true"] .i { color: var(--royal); }
.sc-tab:focus-visible, .sc-play:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.sc-tab__bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 1px; overflow: hidden; }
.sc-tab__bar > span { display: block; height: 100%; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; }
.sc-tab.is-run .sc-tab__bar > span { animation: sc-bar var(--dur, 6s) linear forwards; }
@keyframes sc-bar { to { transform: scaleX(1); } }
.sc-play { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #F1F3F8; color: var(--ink); cursor: pointer; }
.sc-play:hover { background: #E7EAF2; }
.sc-play__i { position: relative; width: 10px; height: 11px; }
.sc-play__i::before, .sc-play__i::after { content: ""; position: absolute; top: 0; width: 3px; height: 11px; border-radius: 1px; background: currentColor; }
.sc-play__i::before { left: 1px; } .sc-play__i::after { right: 1px; }
.sc-play[aria-pressed="true"] .sc-play__i::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.sc-play[aria-pressed="true"] .sc-play__i::after { display: none; }
.sc__stage { position: relative; margin-top: 16px; overflow: hidden; border-radius: 28px; background: radial-gradient(rgba(37, 71, 233, .1) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(180deg, #F7F9FE, #EDF1FA); box-shadow: inset 0 0 0 1px #E3E8F4; }
.sc-pane[hidden] { display: none; }
.sc-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: center; min-height: 460px; padding: 48px 56px; }
.sc-pane.is-in .sc-pane__copy { animation: sv-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.sc-pane.is-in .sc-pane__vis { animation: sc-vis .7s cubic-bezier(.2, .8, .2, 1) .05s both; }
@keyframes sc-vis { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.sc-pane__n { color: var(--royal); font-size: 11.5px; letter-spacing: .12em; }
.sc-pane__t { margin-top: 14px; color: var(--ink); font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.sc-pane__x { max-width: 32ch; margin-top: 14px; color: var(--body); font-size: 17px; line-height: 1.6; }
.sc-pane__vis { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 380px; --sv: 19px; }
.sc-pane__vis::before { content: ""; position: absolute; inset: 6% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 71, 233, .16), rgba(37, 71, 233, 0)); pointer-events: none; }
.sc-pane__vis .sv { position: relative; }
.sc-fact { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -14px rgba(7, 10, 23, .6); animation: sc-bob 4s ease-in-out infinite alternate; }
.sc-fact .i { width: 16px; height: 16px; color: var(--cyan); }
.sc-pane.is-in .sc-fact { animation: sv-in .6s cubic-bezier(.2, .8, .2, 1) .5s both, sc-bob 4s ease-in-out 1.1s infinite alternate; }
@keyframes sc-bob { to { transform: translateY(-6px); } }
@media (max-width: 1100px) {
  .sc-pane { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding: 36px 28px; }
  .sc-pane__vis { --sv: 15px; min-height: 0; }
  .sc-fact { animation: none !important; }
  .sc-tab { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .sc { margin-inline: 0; }
  .sc-pane { padding: 28px 18px; }
  .sc-pane__vis { --sv: 13.5px; }
  .sc__stage { border-radius: 20px; }
}

/* ==========================================================================
   15. Final CTA · Blueprint. A compact banner: the system map runs behind it
   in blueprint lines, one verification looping through, faded under the copy.
   The banner sits across the line where the page ends and the dark footer
   begins.
   ========================================================================== */
.bp { --foot: #05070F; position: relative; padding-top: clamp(40px, 6vw, 96px); background: linear-gradient(180deg, #fff 0, #fff calc(100% - 170px), var(--foot) calc(100% - 170px)); }
.bp__frame { position: relative; isolation: isolate; margin-inline: var(--inset); overflow: hidden; overflow: clip; border-radius: 32px; color: rgba(255, 255, 255, .8); background: linear-gradient(160deg, #0E1C66 0%, #0A1340 46%, #070B24 100%); box-shadow: 0 60px 120px -60px rgba(7, 10, 23, .85); }
.bp__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .14); pointer-events: none; }
.bp__bg { position: absolute; inset: 0; z-index: -1; }
.bp__bg > * { position: absolute; inset: 0; }
.bp__glow { background: radial-gradient(34% 56% at 100% 0%, rgba(100, 244, 248, .16), rgba(100, 244, 248, 0) 70%), radial-gradient(46% 76% at 70% 100%, rgba(37, 71, 233, .6), rgba(37, 71, 233, 0) 70%), radial-gradient(40% 60% at 12% 0%, rgba(37, 71, 233, .28), rgba(37, 71, 233, 0) 70%); }
.bp__lines { background-image: linear-gradient(rgba(140, 170, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 170, 255, .07) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(70% 90% at 70% 70%, #000, transparent); mask-image: radial-gradient(70% 90% at 70% 70%, #000, transparent); }
.bp__grain { background: var(--grain-dark) 0 0 / 200px; opacity: .35; mix-blend-mode: overlay; }

/* the map, behind everything; it fades out toward the copy */
.bp-map { position: absolute; z-index: 0; left: 50%; bottom: -5%; width: max(1200px, 100%); transform: translateX(-47%); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .3) 30%, #000 56%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .3) 30%, #000 56%); }
.bp-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bp__veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(9, 16, 56, .86) 0%, rgba(9, 16, 56, .7) 30%, rgba(9, 16, 56, .25) 48%, rgba(9, 16, 56, 0) 60%); }
.bp-map__svg polygon, .bp-map__svg polyline, .bp-map__svg ellipse, .bp-map__svg path, .bp-map__svg circle { fill: rgba(170, 190, 255, .05); stroke: rgba(170, 190, 255, .4); stroke-width: 1.1; }
.bp-map__svg .f-t { fill: rgba(170, 190, 255, .09); }
.bp-map__svg .f-r { fill: rgba(170, 190, 255, .03); }
.bp-map__svg .i-l, .bp-map__svg .i-r, .bp-map__svg .i-t, .bp-map__svg .scr { fill: rgba(7, 10, 23, .55); stroke: rgba(170, 190, 255, .48); }
.bp-map__svg .r-t, .bp-map__svg .node-r { fill: rgba(37, 71, 233, .55); stroke: #7D95FF; }
.bp-map__svg .ln, .bp-map__svg .ln-i, .bp-map__svg .ln-d, .bp-map__svg .mesh, .bp-map__svg .flow, .bp-map__svg .bracket, .bp-map__svg .i-t-edge, .bp-map__svg .tick-w, .bp-map__svg .soft { fill: none; }
.bp-map__svg .flow { stroke-dasharray: 3 4; stroke: rgba(170, 190, 255, .5); }
.bp-map__svg .a-march { animation: hw-march 1.2s linear infinite; }
.bp-map__svg .mesh { stroke: rgba(100, 244, 248, .45); }
.bp-map__svg .tick-w { stroke: #fff; stroke-width: 2; }
.bp-map__svg .dot-bad { fill: #F04438; stroke: none; }
.bp-map__svg .dot-warn { fill: #F79009; stroke: none; }
.bp-map__svg .node, .bp-map__svg .play { fill: #7D95FF; stroke: none; }
.bp-map__svg .pkt { fill: var(--cyan); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 7px rgba(100, 244, 248, .95)); }

/* the run: parts light as the verification reaches them */
.bp-map [data-at], .bp-map .m-pkt { transition: opacity .35s var(--ease); }
.bp-map .m-lit, .bp-map .m-ok, .bp-map .m-focus, .bp-map .m-face .m-node, .bp-map .m-tap, .bp-map .m-puck { transform-box: fill-box; transform-origin: center; }
.bp__frame.is-playing .m-lit:not(.is-on), .bp__frame.is-playing .m-ok:not(.is-on) { opacity: 0; }
.bp__frame.is-playing .m-focus:not(.is-on), .bp__frame.is-playing .m-face:not(.is-on) .m-node { opacity: .3; }
.bp-map .m-pkt { opacity: 0; }
.bp__frame.is-playing .m-pkt.is-on { opacity: 1; }
.bp__frame.is-playing .m-branch { opacity: .45; }
.bp-map .m-lit.is-on *, .bp-map .m-ok.is-on * { stroke: var(--cyan); }
.bp-map .m-lit.is-on, .bp-map .m-ok.is-on { animation: bp-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.bp-map .m-rules.is-on polygon { stroke: var(--cyan); }
.bp-map .m-rules.is-on .m-rules-top { animation: bp-think 1.2s ease-in-out infinite; }
.bp-map .m-focus.is-on { animation: bp-focus 1.2s ease-in-out infinite alternate; }
.bp-map .m-face.is-on .m-node { animation: bp-node 1.1s ease-in-out infinite; }
.bp-map .m-drawer--2.is-on { animation: bp-drawer .7s cubic-bezier(.45, 0, .3, 1) forwards; }
.bp-map .m-puck.is-on { animation: bp-bob 2.4s ease-in-out infinite; }
.bp-map .m-tap.is-on { animation: bp-tap .6s ease-in-out 2; }
@keyframes bp-pop { from { transform: scale(.6); } }
@keyframes bp-focus { to { transform: scale(1.05); } }
@keyframes bp-node { 50% { transform: scale(1.6); } }
@keyframes bp-think { 50% { fill: rgba(100, 244, 248, .28); } }
@keyframes bp-tap { 50% { transform: scale(.9); } }
@keyframes bp-drawer { to { transform: translate(-12.88px, 7.44px); } }
@keyframes bp-bob { 50% { transform: translate(0.00px, -8.27px); } }
.bp-map__light { position: absolute; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(100, 244, 248, .3), rgba(37, 71, 233, .16) 50%, rgba(37, 71, 233, 0)); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.bp__frame.is-playing .bp-map__light.is-on { opacity: 1; }
.bp__frame:not(.is-on) .bp-map *, .bp__frame.is-paused .bp-map *, .bp__frame:not(.is-on) .bpf::before, .bp__frame.is-paused .bpf::before { animation-play-state: paused; }

/* layout */
.bp__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 432px); gap: clamp(40px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 4.6vw, 68px); }
.bp__copy { min-width: 0; }
.bp__h { margin-top: 24px; color: #fff; font-size: clamp(42px, 4.7vw, 68px); font-weight: 600; letter-spacing: -.042em; line-height: 1.02; }
.bp__h-a, .bp__h-b { display: block; }
.bp__h-b { background: linear-gradient(90deg, #9FFBFF, #64F4F8 32%, #A9BCFF 72%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp__lede { max-width: 44ch; margin-top: 22px; color: rgba(255, 255, 255, .8); font-size: 18px; line-height: 1.6; }

/* the form: frosted glass over the map, one field per row */
.bp__form { min-width: 0; }
.bpf { --p: 0; position: relative; display: grid; grid-template-rows: minmax(0, 1fr); padding: 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .26), 0 40px 80px -40px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); color: rgba(255, 255, 255, .7); transition: box-shadow .5s var(--ease); }
/* a light travels round the edge now and then */
.bpf::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(115deg, rgba(100, 244, 248, 0) 42%, rgba(100, 244, 248, .9) 50%, rgba(169, 188, 255, 0) 58%) 100% 100% / 300% 300% no-repeat; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); mask-clip: content-box, border-box; mask-composite: exclude; pointer-events: none; animation: bpf-glint 7s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes bpf-glint { 0% { background-position: 100% 100%; } 40%, 100% { background-position: 0 0; } }
.bpf.is-flash { box-shadow: inset 0 0 0 1px rgba(100, 244, 248, .6), inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 6px rgba(100, 244, 248, .12), 0 40px 80px -40px rgba(0, 0, 0, .7); }
/* how complete the request is, along the top edge */
.bpf__bar { position: absolute; left: 30px; right: 30px; top: 0; height: 2px; overflow: hidden; border-radius: 2px; }
.bpf__bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #1A9BF4, #64F4F8 70%, #C8FDFF); box-shadow: 0 0 12px rgba(100, 244, 248, .9); transform: scaleX(var(--p)); transform-origin: left; transition: transform .6s var(--ease); }
.bpf__main { display: grid; gap: 14px; }
.bpf__main[hidden] { display: none; }
.bpf__head { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.bpf__mark { display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -12px rgba(100, 244, 248, .5); }
.bpf__mark svg { width: 26px; height: 22px; overflow: visible; }
.bpf__dome { fill: #fff; }
.bpf__ring { fill: var(--cyan); }
.bpf__hd { flex: 1; min-width: 0; }
.bpf__t { color: #fff; font-size: 21px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.bpf__sub { margin-top: 2px; font-size: 13.5px; line-height: 1.45; }
.bpf__sub a { color: var(--cyan); font-weight: 600; }
.bpf__dur { display: inline-flex; flex: none; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bpf__dur .i { width: 13px; height: 13px; color: var(--cyan); }
.bpf__fields { display: grid; gap: 8px; }
.bpf-f { position: relative; }
.bpf-f input, .bpf-f select { width: 100%; height: 52px; padding: 21px 44px 6px 46px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background-color: rgba(7, 10, 23, .4); color: #fff; font: 15px/1.2 var(--font); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.bpf-f select { padding-right: 64px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 14px; cursor: pointer; text-overflow: ellipsis; }
.bpf-f select option { color: var(--ink); }
.bpf-f label { position: absolute; left: 47px; top: 16px; color: rgba(255, 255, 255, .58); font-size: 15px; pointer-events: none; transition: top .2s var(--ease), font-size .2s var(--ease), color .2s; }
.bpf-f input:focus + label, .bpf-f input:not(:placeholder-shown) + label, .bpf-f--sel label { top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.bpf-f__i { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: rgba(255, 255, 255, .45); stroke-width: 1.7; pointer-events: none; transition: color .2s; }
.bpf-f__ok { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: rgba(100, 244, 248, .16); color: var(--cyan); opacity: 0; pointer-events: none; transform: scale(.4); transition: opacity .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.bpf-f__ok .i { width: 12px; height: 12px; stroke-width: 2.6; }
.bpf-f--sel .bpf-f__ok { right: 38px; }
.bpf-f input:hover, .bpf-f select:hover { border-color: rgba(255, 255, 255, .28); }
.bpf-f input:focus, .bpf-f select:focus { border-color: var(--cyan); outline: none; background-color: rgba(7, 10, 23, .55); box-shadow: 0 0 0 4px rgba(100, 244, 248, .14), 0 0 24px -6px rgba(100, 244, 248, .5); }
.bpf-f input:focus-visible, .bpf-f select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.bpf-f input:focus + label { color: var(--cyan); }
.bpf-f input:focus ~ .bpf-f__i, .bpf-f select:focus ~ .bpf-f__i, .bpf-f input:not(:placeholder-shown) ~ .bpf-f__i, .bpf-f select:valid ~ .bpf-f__i { color: var(--cyan); }
.bpf-f input:not(:placeholder-shown):valid ~ .bpf-f__ok, .bpf-f select:valid ~ .bpf-f__ok { opacity: 1; transform: none; }
.bpf-f input:not(:placeholder-shown):not(:focus):invalid { border-color: rgba(253, 162, 155, .7); }
.bpf-vol { min-width: 0; margin: 2px 0 0; padding: 0; border: 0; }
.bpf-vol legend { margin-bottom: 8px; padding: 0; color: rgba(255, 255, 255, .85); font-size: 12.5px; font-weight: 600; }
.bpf-rd { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.bpf-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(7, 10, 23, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.bpf-seg__o { padding: 8px 4px; border-radius: 10px; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.bpf-seg__o:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.bpf-rd:checked + .bpf-seg__o { background: linear-gradient(180deg, #FFFFFF, #E6ECFF); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(100, 244, 248, .6); }
.bpf-rd:focus-visible + .bpf-seg__o { outline: 2px solid var(--cyan); outline-offset: 1px; }
.bpf__go { margin-top: 4px; }
.bpf__go:hover { background: #E8EDFF; }
.bpf__alt { color: rgba(255, 255, 255, .6); font-size: 13.5px; text-align: center; }
.bpf__alt a { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: #fff; font-weight: 600; text-decoration: none; }
.bpf__alt a:hover { color: var(--cyan); }
.bpf__alt a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.bpf__alt .i { width: 14px; height: 14px; stroke-width: 2; transition: transform .3s var(--ease); }
.bpf__alt a:hover .i { transform: translateX(3px); }
/* sent */
.bpf__done { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px 12px; text-align: center; }
.bpf__done[hidden] { display: none; }
.bpf__done-ico svg { display: block; width: 68px; height: 68px; fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(100, 244, 248, .55)); }
.bpf__done-ico circle { stroke: rgba(100, 244, 248, .35); stroke-dasharray: 183; animation: bpf-draw183 .9s cubic-bezier(.6, 0, .2, 1) both; }
.bpf__done-ico path { stroke-dasharray: 40; animation: bpf-draw40 .5s cubic-bezier(.6, 0, .2, 1) .55s both; }
@keyframes bpf-draw183 { from { stroke-dashoffset: 183; } }
@keyframes bpf-draw40 { from { stroke-dashoffset: 40; } }
.bpf__done-t { margin-top: 8px; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.bpf__done-t:focus { outline: none; }
.bpf__status { max-width: 32ch; font-size: 14.5px; line-height: 1.55; }
.bpf__again { margin-top: 10px; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; transition: background-color .2s; }
.bpf__again:hover { background: rgba(255, 255, 255, .18); }
.bpf__again:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* pause (WCAG 2.2.2) */
.bp__pause { position: absolute; z-index: 4; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); cursor: pointer; transition: background-color .2s, color .2s; }
.bp__pause:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.bp__pause:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.bp__pause-i { position: relative; width: 10px; height: 11px; }
.bp__pause-i::before, .bp__pause-i::after { content: ""; position: absolute; top: 0; width: 3px; height: 11px; border-radius: 1px; background: currentColor; }
.bp__pause-i::before { left: 1px; }
.bp__pause-i::after { right: 1px; }
.bp__pause[aria-pressed="true"] .bp__pause-i::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.bp__pause[aria-pressed="true"] .bp__pause-i::after { display: none; }
.bp__pause[hidden] { display: none; }

/* the footer, dark (a first pass; its redesign comes next) */
.site-footer { background: var(--foot, #05070F); color: rgba(255, 255, 255, .6); padding-top: clamp(72px, 8vw, 110px); }
.site-footer .footer__tag { color: #fff; }
.site-footer .footer__mail { color: rgba(255, 255, 255, .7); }
.site-footer .footer__mail:hover, .site-footer .footer__col a:hover { color: var(--cyan); }
.site-footer .footer__h { color: rgba(255, 255, 255, .42); }
.site-footer .footer__col a { color: rgba(255, 255, 255, .82); }
.site-footer .footer__bottom { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
.site-footer .footer__bottom a { color: rgba(255, 255, 255, .72); }
.site-footer .footer__word svg { fill: rgba(255, 255, 255, .05); }

@media (max-width: 1100px) {
  .bp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; }
  .bp__h { font-size: clamp(38px, 4.8vw, 54px); }
  .bp__lede { font-size: 17px; }
}
@media (max-width: 900px) {
  .bp { background: linear-gradient(180deg, #fff 0, #fff calc(100% - 120px), var(--foot) calc(100% - 120px)); }
  .bp__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 64px 44px; }
  .bp__form { width: 100%; max-width: 520px; }
  .bp-map { top: 40px; bottom: auto; width: 1080px; transform: translateX(-44%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 60%, transparent 90%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 60%, transparent 90%); }
  .bp__veil { background: linear-gradient(180deg, rgba(9, 16, 56, .5) 0%, rgba(9, 16, 56, .62) 26%, rgba(9, 16, 56, .2) 52%, rgba(9, 16, 56, 0) 80%); }
}
@media (max-width: 640px) {
  .bp__frame { border-radius: 24px; }
  .bp__grid { padding-block: 56px 8px; gap: 32px; }
  .bp__lede { font-size: 16px; }
  .bp-map { width: 900px; }
  .bpf { margin-inline: -8px; padding: 20px 14px 16px; border-radius: 18px; }
  .bpf__mark { width: 40px; height: 40px; border-radius: 12px; }
  .bpf__mark svg { width: 22px; height: 19px; }
  .bpf__t { font-size: 19px; }
  .bp__pause { top: 14px; right: 14px; }
}
@media (max-width: 420px) {
  .bpf__mark { display: none; }
}
@media (max-width: 379px) {
  .bpf-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   16. Logo motion (site-wide). The logo is inline, so its two arcs can move:
   they swing in and lock when the logo first appears, and turn once, in
   opposite directions, whenever it is hovered or focused.
   ========================================================================== */
.lg { display: block; overflow: visible; }
.lg__dome { fill: #2547E9; }
.lg__lt path { fill: var(--ink); }
.brand .lg { width: 125px; height: 26px; }
.lg__dome, .lg__ring, .lg__pulse { transform-box: view-box; transform-origin: 38.5px 38.3px; }
.lg__lt path { transform-box: fill-box; }
.lg__pulse { fill: none; stroke: var(--cyan); stroke-width: 1.6; opacity: 0; }
.lg__dome, .lg__ring { transition: transform 1.9s cubic-bezier(.16, 1, .3, 1), opacity 1s var(--ease); }
.lg__ring { transition-delay: .08s; }
.lg__lt path { transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .8s var(--ease); }
.lg__lt path:nth-child(1) { transition-delay: 0.50s; animation-delay: 0.420s; }
.lg__lt path:nth-child(2) { transition-delay: 0.55s; animation-delay: 0.465s; }
.lg__lt path:nth-child(3) { transition-delay: 0.60s; animation-delay: 0.510s; }
.lg__lt path:nth-child(4) { transition-delay: 0.65s; animation-delay: 0.555s; }
.lg__lt path:nth-child(5) { transition-delay: 0.70s; animation-delay: 0.600s; }
.lg__lt path:nth-child(6) { transition-delay: 0.75s; animation-delay: 0.645s; }
.lg__lt path:nth-child(7) { transition-delay: 0.80s; animation-delay: 0.690s; }
.lg__lt path:nth-child(8) { transition-delay: 0.85s; animation-delay: 0.735s; }
.lg-armed:not(.lg-in) .lg__dome { opacity: 0; transform: rotate(-200deg) scale(.86); }
.lg-armed:not(.lg-in) .lg__ring { opacity: 0; transform: rotate(200deg) scale(.86); }
.lg-armed:not(.lg-in) .lg__lt path { opacity: 0; transform: translateY(9px); }
.lg-armed:not(.lg-in) .lg__dome, .lg-armed:not(.lg-in) .lg__ring, .lg-armed:not(.lg-in) .lg__lt path { transition: none; }
.lg-intro .lg__pulse { animation: lg-pulse 1.3s cubic-bezier(.2, .7, .3, 1) .95s both; }
.lg-spin .lg__dome { animation: lg-spin-d 1.5s cubic-bezier(.68, -.3, .27, 1.25) both; }
.lg-spin .lg__ring { animation: lg-spin-r 1.5s cubic-bezier(.68, -.3, .27, 1.25) .04s both; }
.lg-spin .lg__pulse { animation: lg-pulse-b 1.2s cubic-bezier(.2, .7, .3, 1) 1.15s both; }
.lg-spin .lg__lt path { animation-name: lg-wave; animation-duration: .9s; animation-timing-function: cubic-bezier(.3, .7, .3, 1); animation-fill-mode: both; }
@keyframes lg-spin-d { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes lg-spin-r { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes lg-pulse { 0% { opacity: .95; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes lg-pulse-b { 0% { opacity: .95; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes lg-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } }

/* ==========================================================================
   17. Footer · Horizon. The logo's dome, drawn huge, rises over a horizon
   line; the logo sits in the middle of it. Light travels along the arcs and
   echoes ripple outward. Ways to reach the team hang from the horizon, like
   cells of the site grid. It pauses off screen and is still under reduced
   motion.
   ========================================================================== */
.ft { --foot: #05070F; position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(64px, 8vw, 120px); background: var(--foot); color: rgba(255, 255, 255, .62); }
.ft:not(.is-on) *, .ft.is-paused * { animation-play-state: paused; }

/* the dome */
.ft-dome { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 470px; padding-bottom: 58px; text-align: center; }
.hz { position: absolute; z-index: -1; left: 50%; top: 0; width: 1600px; max-width: none; height: 640px; margin-left: -800px; overflow: visible; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38px, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, transparent 0, #000 38px, #000 70%, transparent 98%); }
.hz__glow { animation: hz-breathe 9s ease-in-out infinite alternate; }
@keyframes hz-breathe { from { opacity: .78; } to { opacity: 1; } }
.hz__band { fill: url(#hz-band); }
.hz__line { fill: none; stroke: rgba(150, 175, 255, .3); stroke-width: 1; }
.hz__line--in { stroke: rgba(150, 175, 255, .18); }
.hz__far { fill: none; stroke: rgba(150, 175, 255, .07); stroke-width: 1; stroke-dasharray: 2 7; }
.hz__far--2 { stroke: rgba(150, 175, 255, .05); }
.hz__echo { fill: none; stroke: rgba(150, 175, 255, .22); stroke-width: 1; opacity: 0; transform-box: view-box; transform-origin: 800px 470px; animation: hz-echo 15s cubic-bezier(.2, .6, .35, 1) infinite; }
.hz__echo--2 { animation-delay: 5s; }
.hz__echo--3 { animation-delay: 10s; }
@keyframes hz-echo { 0% { opacity: 0; transform: scale(1); } 8% { opacity: .9; } 100% { opacity: 0; transform: scale(1.42); } }
/* the light along the arcs: a head with a soft tail */
.hz__ray { fill: none; stroke-linecap: round; animation: 12s cubic-bezier(.45, .05, .35, 1) infinite; }
.hz__ray--h { stroke: #D6FEFF; stroke-width: 2.6; stroke-dasharray: 22 1300; filter: drop-shadow(0 0 5px rgba(100, 244, 248, .95)); animation-name: hz-ray-h; }
.hz__ray--m { stroke: rgba(100, 244, 248, .55); stroke-width: 2; stroke-dasharray: 70 1300; animation-name: hz-ray-m; }
.hz__ray--t { stroke: rgba(100, 244, 248, .18); stroke-width: 1.6; stroke-dasharray: 170 1300; animation-name: hz-ray-t; }
@keyframes hz-ray-h { 0% { stroke-dashoffset: 22; } 62%, 100% { stroke-dashoffset: -1180; } }
@keyframes hz-ray-m { 0% { stroke-dashoffset: 70; } 62%, 100% { stroke-dashoffset: -1132; } }
@keyframes hz-ray-t { 0% { stroke-dashoffset: 170; } 62%, 100% { stroke-dashoffset: -1032; } }
.hz__ray--i { animation-duration: 15s; animation-delay: 3.5s; }
.hz__ray--i.hz__ray--h { stroke: #E4E9FF; filter: drop-shadow(0 0 4px rgba(169, 188, 255, .9)); }
.hz__ray--i.hz__ray--m { stroke: rgba(169, 188, 255, .5); }
.hz__ray--i.hz__ray--t { stroke: rgba(169, 188, 255, .16); }

/* the logo and the line, in the middle of the dome */
.ft-dome__brand { display: grid; justify-items: center; }
.ft-logo { display: inline-flex; border-radius: 10px; }
.ft-logo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 10px; }
.ft-logo .lg { width: 236px; height: 49px; }
.ft-logo .lg__lt path { fill: #fff; }
.ft-tag { margin-top: 26px; color: #fff; font-size: clamp(26px, 2.5vw, 34px); font-weight: 560; letter-spacing: -.035em; line-height: 1.2; }
.ft-line { margin-top: 8px; color: rgba(255, 255, 255, .55); font-size: 15px; }

/* ways to reach us, hanging from the horizon */
.ft-reach { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ft-reach::before { content: ""; position: absolute; left: 50%; top: 0; width: 100vw; height: 1px; margin-left: -50vw; background: linear-gradient(90deg, rgba(150, 175, 255, 0) 4%, rgba(150, 175, 255, .22) 26%, rgba(200, 250, 255, .75) 50%, rgba(150, 175, 255, .22) 74%, rgba(150, 175, 255, 0) 96%); }
.ft-reach::after { content: ""; position: absolute; left: 50%; top: -30px; width: 560px; height: 60px; margin-left: -280px; background: radial-gradient(50% 50% at 50% 50%, rgba(100, 244, 248, .16), rgba(100, 244, 248, 0)); pointer-events: none; }
.ft-reach__c { position: relative; }
.ft-reach__c + .ft-reach__c { border-left: 1px solid rgba(255, 255, 255, .08); }
.ft-reach__c + .ft-reach__c::before { content: ""; position: absolute; z-index: 1; left: -5px; top: -4px; width: 9px; height: 9px; background: linear-gradient(rgba(200, 225, 255, .6), rgba(200, 225, 255, .6)) 4px 0 / 1px 9px no-repeat, linear-gradient(rgba(200, 225, 255, .6), rgba(200, 225, 255, .6)) 0 4px / 9px 1px no-repeat; pointer-events: none; }
.ft-reach__c::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, rgba(159, 251, 255, 0), #9FFBFF, rgba(159, 251, 255, 0)); box-shadow: 0 0 12px rgba(100, 244, 248, .8); opacity: 0; transform: scaleX(.4); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.ft-reach__c:hover::after, .ft-reach__c:focus-within::after { opacity: 1; transform: none; }
.ft-reach__a { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 32px 32px 34px; background: radial-gradient(70% 90% at 50% 0%, rgba(100, 244, 248, .07), rgba(100, 244, 248, 0) 70%) 0 0 / 100% 100% no-repeat; background-color: transparent; color: inherit; text-decoration: none; transition: background-size .5s var(--ease); }
.ft-reach__a { background-size: 100% 0; }
.ft-reach__c:hover .ft-reach__a { background-size: 100% 100%; }
.ft-reach__a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -6px; border-radius: 14px; }
.ft-reach__txt { min-width: 0; }
.ft-reach__k { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .5); font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.ft-reach__k .i { width: 15px; height: 15px; color: var(--cyan); }
.ft-reach__v { display: block; margin-top: 12px; color: #fff; font-size: 20px; font-weight: 560; letter-spacing: -.02em; overflow-wrap: anywhere; transition: color .3s; }
.ft-reach__c:hover .ft-reach__v { color: #D6FEFF; }
.ft-reach__go { position: relative; display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s cubic-bezier(.16, 1, .3, 1); }
.ft-reach__go .i { width: 17px; height: 17px; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.ft-reach__c:hover .ft-reach__go, .ft-reach__go:focus-visible { background: #fff; color: var(--ink); box-shadow: 0 0 0 6px rgba(100, 244, 248, .1), 0 10px 26px -10px rgba(100, 244, 248, .8); }
.ft-reach__c:hover .ft-reach__a .ft-reach__go .i { transform: translateX(3px); }
.ft-reach__c--copy .ft-reach__a { padding-right: 106px; }
.ft-copy { position: absolute; right: 32px; top: 50%; margin-top: -21px; cursor: pointer; }
.ft-copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ft-copy__ok { display: none; color: #12B76A; }
.ft-copy.is-done .ft-copy__i { display: none; }
.ft-copy.is-done .ft-copy__ok { display: block; }

/* a small label that appears above a round button */
.ft-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 5px 9px; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); color: var(--ink); font: 600 12px/1.2 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .25s var(--ease), transform .35s cubic-bezier(.16, 1, .3, 1); }
.ft-copy:hover .ft-tip, .ft-copy:focus-visible .ft-tip, .ft-soc__a:hover .ft-tip, .ft-soc__a:focus-visible .ft-tip { opacity: 1; transform: translate(-50%, 0); }

/* social */
.ft-soc { display: flex; justify-content: center; gap: 12px; margin: 44px 0 0; padding: 0; list-style: none; }
.ft-soc__a { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .86); text-decoration: none; transition: color .35s var(--ease), box-shadow .45s var(--ease), transform .55s cubic-bezier(.16, 1, .3, 1); }
.ft-soc__a:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(100, 244, 248, .6), 0 0 0 6px rgba(100, 244, 248, .08), 0 14px 30px -12px rgba(100, 244, 248, .75); transform: translateY(-3px); }
.ft-soc__a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ft-soc__i { width: 19px; height: 19px; }

/* the links */
.ft-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-top: 72px; padding-top: 44px; border-top: 1px solid rgba(255, 255, 255, .08); }
.ft-nav__h { margin-bottom: 16px; color: rgba(255, 255, 255, .42); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.ft-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ft-nav a { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 0; color: rgba(255, 255, 255, .8); font-size: 14.5px; text-decoration: none; transition: color .3s var(--ease), transform .5s cubic-bezier(.16, 1, .3, 1); }
.ft-nav a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(100, 244, 248, .8); opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .5s cubic-bezier(.16, 1, .3, 1); }
.ft-nav a:hover { color: #fff; transform: translateX(8px); }
.ft-nav a:hover::before { opacity: 1; transform: none; }
.ft-nav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.ft-nav__ne { width: 13px; height: 13px; opacity: .5; }

/* the bottom bar */
.ft-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); font-size: 14px; }
.ft-bottom__r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ft-motion, .ft-top { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); font: 500 13px/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s; }
.ft-motion:hover, .ft-top:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ft-motion:focus-visible, .ft-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* the pause control is there for keyboard users only: it shows when focused */
.ft-motion:not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ft-top__i { width: 15px; height: 15px; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.ft-top:hover .ft-top__i { transform: translateY(-3px); }

/* the giant wordmark: the letters rise in, one after another */
.ft-word-wrap { position: relative; width: min(1440px, calc(100% - var(--gutter) * 2)); margin: clamp(36px, 4vw, 56px) auto 0; aspect-ratio: 211 / 36; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .1)); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .1)); }
.ft-word { position: absolute; left: 0; right: 0; top: 0; }
.ft-word svg { display: block; width: 100%; height: auto; overflow: visible; }
.ft-word path { fill: url(#ft-wg); stroke: rgba(169, 188, 255, .1); stroke-width: .12; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity 1s var(--ease); }
.ft-word path:nth-child(1) { transition-delay: 0.00s; }
.ft-word path:nth-child(2) { transition-delay: 0.08s; }
.ft-word path:nth-child(3) { transition-delay: 0.16s; }
.ft-word path:nth-child(4) { transition-delay: 0.24s; }
.ft-word path:nth-child(5) { transition-delay: 0.32s; }
.ft-word path:nth-child(6) { transition-delay: 0.40s; }
.ft-word path:nth-child(7) { transition-delay: 0.48s; }
.ft-word path:nth-child(8) { transition-delay: 0.56s; }
.ft.is-armed:not(.is-in) .ft-word path { opacity: 0; transform: translateY(18px); }

@media (max-width: 1100px) {
  .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .ft-reach__a { padding: 28px 24px 30px; }
  .ft-copy { right: 24px; }
  .ft-reach__c--copy .ft-reach__a { padding-right: 90px; }
  .ft-reach__v { font-size: 18px; }
}
@media (max-width: 820px) {
  .ft-reach { grid-template-columns: minmax(0, 1fr); }
  .ft-reach__c + .ft-reach__c { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .ft-reach__c + .ft-reach__c::before { display: none; }
  .ft-reach__a { padding: 24px 8px 26px; }
  .ft-copy { right: 8px; }
  .ft-reach__c--copy .ft-reach__a { padding-right: 74px; }
}
@media (max-width: 640px) {
  .ft-dome { height: 340px; padding-bottom: 40px; }
  .hz { width: 1152px; height: 461px; margin-left: -576px; }
  .ft-logo .lg { width: 190px; height: 40px; }
  .ft-tag { margin-top: 20px; font-size: 24px; }
  .ft-line { font-size: 14px; }
  .ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
  .brand .lg { width: 110px; height: 23px; }
}

/* ==========================================================================
   19. Final polish: one rhythm for the whole page. Every section opens with
   the same space above its eyebrow and closes on its last rule, so no empty
   band sits between sections. One heading scale throughout.
   ========================================================================== */
:root { --section-y: clamp(80px, 8.5vw, 128px); }
.eyebrow { letter-spacing: .11em; }

/* one heading scale */
.platform { padding-top: var(--section-y); }
.platform .h2 { font-size: clamp(34px, 4.5vw, 62px); }
.sx-head__row { margin-top: 20px; }
.sx-head__row .h2 { margin-top: 0; }
.bp__h { font-size: clamp(38px, 4.5vw, 62px); font-weight: 560; letter-spacing: -.045em; line-height: 1.04; }

/* sections close on their last rule; the next section's top rule takes over */
.section.platform, .section.wf, .section.dx--pair, .section.sx--proof, .section.ix, .section.dv, .section.sx-sec { padding-bottom: 0; }
.platform .pf, .dx--pair .dx-pair, .sx--proof .xcells { margin-bottom: -1px; }
.ind-foot { padding: 30px 32px; }
.dv-foot { padding: 24px 32px; }
.evidence { padding-bottom: clamp(72px, 8vw, 112px); }
.section.pricing { padding-bottom: clamp(56px, 6vw, 88px); }
@media (max-width: 767px) {
  .ind-foot, .dv-foot { padding-inline: 0; }
}

/* ==========================================================================
   20. Motion layer (js/motion.js): styles for the GSAP hovers and the
   heading masks. Nothing here hides content before the scripts run.
   ========================================================================== */
/* the masks clip only above and below, so a long clause can still run past its column */
.mx-line-mask { overflow: visible !important; clip-path: inset(-.08em -100vw -.24em -100vw); }
/* buttons: GSAP moves them, so CSS stops animating their transform */
.has-hover-motion .btn { transition: box-shadow .3s var(--ease), background-color .25s, border-color .25s, color .25s; }
.has-hover-motion .btn:hover { transform: none; }
.has-hover-motion .btn__chip { position: relative; overflow: hidden; transition: none; }
.has-hover-motion .btn:hover .btn__chip { transform: none; }
.btn__chip .mx-clone { position: absolute; inset: 0; margin: auto; }
/* the menu highlight */
.primary-nav__list { position: relative; }
.primary-nav__list > li { position: relative; z-index: 1; }
.mx-nav-hl { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-pill); background: rgba(10, 14, 31, .055); pointer-events: none; }
.has-hover-motion .nav-pill .primary-nav a:hover { background: none; }
/* drawn underlines */
.text-link, .checks__link, .eq-alt, .bpf__alt a, .nav-signin, .ft-nav a { position: relative; }
.mx-ul { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; border-radius: 2px; background: currentColor; pointer-events: none; }
.text-link .mx-ul { bottom: -1px; height: 1px; }
.nav-signin .mx-ul { left: 15px; right: 15px; bottom: 7px; height: 1.5px; }
.ft-nav a .mx-ul { bottom: 3px; height: 1px; background: var(--cyan); }
.has-hover-motion .ft-nav a:hover { transform: none; }
.has-hover-motion .ft-nav a::before { display: none; }
.has-hover-motion .nav-signin:hover { background: none; }
.has-hover-motion .text-link:hover { gap: 8px; }

/* the Sara heading wraps inside its column instead of running into the lede */
.dx .section-head .clause, .dx .h2 .clause { white-space: normal; }

/* ==========================================================================
   21. Phones: long card lists become rows you swipe through, one card and a
   peek of the next, instead of a long stack; illustrations get lighter.
   ========================================================================== */
@media (max-width: 640px) {
  .ind-grid.xcells, .pcs.xcells, .vault.xgrid { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .ind-grid.xcells > *, .pcs.xcells > *, .vault.xgrid > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; border-top: 0; border-left: 1px solid var(--line); }
  .ind-grid.xcells > :first-child, .pcs.xcells > :first-child, .vault.xgrid > :first-child { border-left: 0; }
  .ind-grid.xcells::after, .pcs.xcells::after, .vault.xgrid::after { display: none; }
  .ind-grid.xcells > *::before, .pcs.xcells > *::before { display: none; }
  .pf__art { height: 170px; margin-bottom: 16px; }
  /* the evidence outcome: a quiet placeholder until the rules decide, instead of an empty block */
  .tr:not(.s-out) .tr-oc { min-height: 60px; border-style: dashed; opacity: .4; transform: none; }
  .tr:not(.s-log) .tr-log, .tr:not(.s-log) .tr-note { display: none; }
}

/* ==========================================================================
   22. Inner pages. Every page opens on the same intro (.ph): the halftone,
   a breadcrumb, the page heading and its promise, and jump links on a rule.
   Below it, sections are built from the homepage grid: guide lines, ruled
   cells with "+" marks at the junctions, and one heading scale.
   ========================================================================== */

/* the menu marks the page you are on */
.nav-pill .primary-nav a[aria-current="page"] { position: relative; color: var(--ink); font-weight: 600; }
.nav-pill .primary-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--royal); }
.mobile-menu__list a[aria-current="page"] { color: var(--royal); }

/* ---------- the page intro ---------- */
.ph { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--header-space) + clamp(36px, 4.4vw, 64px)); }
.ph__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ph__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 22% 58%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 72%); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; }
.crumbs__list li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs__list li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--tone2); border-right: 1.5px solid var(--tone2); transform: rotate(45deg); }
.crumbs a { color: var(--body); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--royal); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.ph__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 28px clamp(36px, 5vw, 88px); margin-top: clamp(28px, 3vw, 44px); }
.ph__lead { display: flex; flex-direction: column; align-items: flex-start; }
.ph__h { margin-top: 22px; font-size: clamp(42px, 5.3vw, 78px); font-weight: 560; letter-spacing: -.05em; line-height: 1; }
.ph__h .tone { display: block; color: var(--tone2); }
.ph__aside { padding-bottom: 6px; }
.ph__lede { max-width: 46ch; color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; }
/* the version of a legal page: the date the sign-up records as accepted */
.ph__updated { margin-bottom: 12px; color: var(--ink-2); font-size: 14px; letter-spacing: .01em; }
.ph__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ph__ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.ph__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ph__ticks .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); stroke-width: 2.4; }

/* an intro without jump links keeps its own bottom space */
.ph--short { padding-bottom: clamp(56px, 6vw, 96px); }
.ph:has(+ .trust) .jump { padding-bottom: 34px; }

/* jump links sit on a rule with "+" marks at both ends */
.jump { position: relative; display: flex; align-items: center; gap: 14px 28px; margin-top: clamp(56px, 6vw, 96px); padding: 18px 32px 20px; border-top: 1px solid var(--line); }
.jump::before, .jump::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.jump::before { left: -5px; }
.jump::after { right: -5px; }
.jump__k { flex: none; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.jump__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jump__list a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 15px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .3s var(--ease), color .3s, box-shadow .3s; }
.jump__list a:hover { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: #fff; }

/* the intro arrives in order: crumbs, eyebrow, heading, promise, actions */
@media (prefers-reduced-motion: no-preference) {
  .ph .crumbs, .ph__lead .eyebrow, .ph__h, .ph__lede, .ph__btns, .ph__ticks, .jump { animation: ph-in 1.2s cubic-bezier(.16, 1, .3, 1) both; }
  .ph__lead .eyebrow { animation-delay: .06s; }
  .ph__h { animation-delay: .12s; }
  .ph__lede { animation-delay: .24s; }
  .ph__btns { animation-delay: .32s; }
  .ph__ticks { animation-delay: .4s; }
  .jump { animation-delay: .5s; }
  .ph__bg { animation: ph-bg 1.6s ease-out both; }
}
@keyframes ph-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes ph-bg { from { opacity: 0; } }

/* the checks dome, when it follows a page intro: no overlap, a shorter fade */
.ph + .dome-section { margin-top: 0; }
.ph + .dome-section .dome { padding-bottom: 300px; }
.ph + .dome-section .checks-bg {
  background:
    linear-gradient(180deg, #070A1C 0%, #0A1030 16%, #131E55 32%, #2A3C8E 48%, #5C71C4 62%, #9CAEE8 75%, #D2DCF8 86%, #F1F4FD 94%, #FFFFFF 100%) left bottom / 100% 300px no-repeat,
    linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C calc(100% - 300px));
}
.ph + .dome-section .checks-bg__canvas {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 380px), transparent calc(100% - 220px));
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 380px), transparent calc(100% - 220px));
}

/* ---------- sections ---------- */
.ip-sec { padding-bottom: 0; }
.ip-sec > .container > :last-child { margin-bottom: -1px; }
.ip-sec--pad { padding-bottom: var(--section-y); }
.ip-sec--pad > .container > :last-child { margin-bottom: 0; }
.ip-head .h2 { max-width: 13em; }
.ip-head__side { display: grid; justify-items: start; gap: 0; padding-bottom: 6px; }
.ip-head__side .text-link { margin-top: 18px; }
section[id], [id].cat__row, [id].sector { scroll-margin-top: 96px; }

/* "+" marks round any ruled block */
.xmarks { position: relative; }
.xmarks::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  background:
    linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 4px 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 0 calc(100% - 4px) / 9px 1px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 100% / 1px 9px no-repeat,
    linear-gradient(var(--tone2), var(--tone2)) 100% calc(100% - 4px) / 9px 1px no-repeat;
}

/* lists that are grids carry no markers */
ul.xcells, ol.xcells { list-style: none; }

/* two-column grid */
.xgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- cells with an icon tile ---------- */
.ip-cells > li { padding: 32px 32px 38px; transition: background-color .5s var(--ease); }
.ip-cells > li:hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 75%); }
.ip-cell__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.ip-cells > li:hover .ip-cell__ico { background: var(--royal); color: #fff; transform: translateY(-3px); }
.ip-cell__ico .i { width: 20px; height: 20px; }
.ip-cell__n { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; transition: color .4s; }
.ip-cells > li:hover .ip-cell__n { color: var(--royal); }
.ip-cell__t { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.ip-cell__x { max-width: 42ch; margin-top: 8px; color: var(--body); font-size: 15.5px; line-height: 1.6; }
.ip-cell__meta { display: inline-flex; margin-top: 18px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.ip-cell__code { display: block; width: fit-content; max-width: 100%; margin-top: 18px; padding: 8px 12px; overflow-x: auto; border-radius: 10px; background: var(--night); color: #C9D3F5; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre; }
.ip-cell__code .t-key { color: #8FD8FF; }
a.inline-link { color: var(--royal); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ip-cell__a { color: inherit; text-decoration: none; }
.ip-cell__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ip-cell__a:hover { color: var(--royal); }
.ip-cells > li:has(.ip-cell__a) { cursor: pointer; }
.t-com { color: rgba(255, 255, 255, .42); }
code.inline { padding: 1px 6px; border-radius: 6px; background: var(--canvas-2); color: var(--royal-700); font-family: var(--mono); font-size: .88em; }

/* a quiet stage that holds a small product mock above a cell's text */
.ip-stage { position: relative; display: grid; place-items: center; min-height: 292px; margin-bottom: 28px; padding: 26px 22px; overflow: hidden; border-radius: 20px; background: linear-gradient(180deg, #F6F8FD, #EEF2FB); box-shadow: inset 0 0 0 1px #E6EAF3; }
.ip-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#D3DAEA 1px, transparent 1.3px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 80%); opacity: .8; }

/* small record cards (identity, verifications, workflows) */
.mc { position: relative; width: 100%; max-width: 310px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 20px 40px -22px rgba(15, 31, 122, .38); transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .7s; }
.ip-cells > li:hover .mc { transform: translateY(-5px); box-shadow: 0 0 0 1px #DCE3F3, 0 30px 50px -24px rgba(15, 31, 122, .45); }
.mc__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.mc__who { display: grid; min-width: 0; }
.mc__name { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.mc__sub { color: var(--muted); font-size: 12px; line-height: 1.4; }
.mc__head .status { margin-left: auto; }
.mc__k { color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.mc__list { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.mc__list > li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 2px; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 12.5px; }
.mc__list > li:last-child { border-bottom: 0; padding-bottom: 2px; }
.mc__list .i { width: 16px; height: 16px; color: var(--royal); }
.mc__list .status { margin-left: auto; }
.mc__id { color: var(--ink); font-family: var(--mono); font-size: 11.5px; }
.mc__lbl { color: var(--muted); font-size: 12px; }
.mc__col { display: grid; min-width: 0; line-height: 1.35; }
.mc__price { margin-left: auto; color: var(--ink); font-family: var(--mono); font-size: 12px; }
.mc__price + .status { margin-left: 0; }
.status--warn { background: var(--warn-bg); color: var(--warn-ink); }
.status--warn::before { background: var(--warn); }
.mc--stack { max-width: 300px; }
.mc-back { position: absolute; inset: auto 10% 14px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px #E3E8F4; transform: translateY(12px) scale(.94); }

/* ---------- ticks under a section heading ---------- */
.ip-ticks { display: grid; gap: 0; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ip-ticks li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.ip-ticks .i { width: 22px; height: 22px; margin-top: 0; padding: 4px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); stroke-width: 2.2; }
.ip-ticks strong { color: var(--ink); }

/* ---------- the checks catalogue ---------- */
.cat__row { display: grid; grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr) 128px; align-items: center; gap: 8px 32px; padding: 28px 32px; transition: background-color .5s var(--ease); }
.cat__row:hover { background: linear-gradient(90deg, #F7F9FF, rgba(247, 249, 255, 0) 85%); }
.cat__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.cat__row:hover .cat__ico { background: var(--royal); color: #fff; transform: translateY(-2px) rotate(-4deg); }
.cat__ico .i { width: 22px; height: 22px; }
.cat__tag { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cat__t { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.cat__x { max-width: 46ch; margin-top: 6px; color: var(--body); font-size: 15.5px; line-height: 1.55; }
.cat__ret { margin: 0; padding-left: 24px; border-left: 1px dashed var(--line-2); }
.cat__ret dt { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cat__ret dd { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cat__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cat__p { color: var(--ink); font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1; transition: color .4s var(--ease); }
.cat__row:hover .cat__p { color: var(--royal); }
.cat__per { margin-top: 6px; color: var(--muted); font-size: 12.5px; }

/* ---------- example flows ---------- */
.xfs > .xf { display: flex; flex-direction: column; padding: 32px 32px 34px; }
.xf__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xf__n { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; transition: color .4s; }
.xf:hover .xf__n { color: var(--royal); }
.xf__count { color: var(--muted); font-size: 12.5px; }
.xf__t { margin-top: 14px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.xf__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; color: var(--ink); font-size: clamp(38px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.045em; line-height: 1; transition: color .45s var(--ease); }
.xf:hover .xf__price { color: var(--royal); }
.xf__price .odo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); padding-block: .06em; }
.xf__per { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.xf__steps { position: relative; display: grid; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.xf__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 14.5px; }
.xf__steps li:last-child { border-bottom: 0; }
.xf__steps .i { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s; }
.xf:hover .xf__steps .i { background: #E3E9FF; }
.xf__steps .mono { color: var(--muted); font-size: 12.5px; }
.xf__steps .xf__inc { color: var(--ink); font-weight: 600; }
.xf__steps .xf__inc .i { background: var(--ink); color: #fff; }
.xf:hover .xf__steps .xf__inc .i { background: var(--ink); }

/* ---------- questions ---------- */
.faq > li { position: relative; }
.faq__it > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; list-style: none; cursor: pointer; transition: background-color .4s var(--ease); }
.faq__it > summary::-webkit-details-marker { display: none; }
.faq__it > summary:hover { background: linear-gradient(90deg, #F7F9FF, rgba(247, 249, 255, 0) 85%); }
.faq__q { font-size: clamp(17px, 1.4vw, 19px); font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.faq__pm { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .35s var(--ease), box-shadow .35s; }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.faq__pm::after { transform: rotate(90deg); }
.faq__it > summary:hover .faq__pm { box-shadow: inset 0 0 0 1px var(--ink); }
.faq__it[open] .faq__pm { background: var(--royal); box-shadow: none; }
.faq__it[open] .faq__pm::before, .faq__it[open] .faq__pm::after { background: #fff; }
.faq__it[open] .faq__pm::after { transform: rotate(0); }
.faq__a { overflow: hidden; }
.faq__a p { max-width: 70ch; padding: 0 32px 28px; color: var(--body); font-size: 16px; line-height: 1.7; }
.faq__a a { color: var(--royal); font-weight: 600; }

/* ---------- price list ---------- */
.ptab { width: 100%; border-collapse: collapse; }
.ptab caption { padding: 0 32px 16px; color: var(--muted); font-size: 14px; text-align: left; }
.ptab th, .ptab td { padding: 18px 32px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ptab thead th { padding-block: 14px; border-top: 1px solid var(--line); color: var(--tone2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ptab thead th:last-child, .ptab td:last-child { text-align: right; }
.ptab tbody tr { transition: background-color .4s var(--ease); }
.ptab tbody tr:hover { background: linear-gradient(90deg, #F7F9FF, rgba(247, 249, 255, 0) 85%); }
.ptab__c { display: flex; align-items: center; gap: 14px; }
.ptab__ico { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s; }
.ptab tbody tr:hover .ptab__ico { background: var(--royal); color: #fff; }
.ptab__ico .i { width: 17px; height: 17px; }
.ptab__n { display: block; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ptab__x { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
.ptab__p { color: var(--ink); font-size: 22px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.ptab__p small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.ptab-note { padding: 18px 32px 0; color: var(--muted); font-size: 14px; }

/* ---------- industries: one section per sector ---------- */
.sector { padding-block: clamp(64px, 7vw, 108px); }
.sector__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 40px clamp(40px, 6vw, 96px); padding-inline: 32px; }
.sector--flip .sector__copy { order: 2; }
.sector__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sector__h { max-width: 15em; font-size: clamp(30px, 3.3vw, 46px); letter-spacing: -.04em; line-height: 1.06; }
.sector--flip .sector__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.sector__copy .lede { margin-top: 22px; }
.sector__copy .ip-ticks { max-width: 520px; }
.sector__vis { margin: 0; padding: 0; }
.sector__card { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 24px 28px 26px; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 70%); box-shadow: 0 0 0 1px #E6EAF3, 0 40px 80px -50px rgba(15, 31, 122, .4); }
.sector__card .ind__art { margin: 0 auto 6px; width: 100%; max-width: 440px; }
.sector__card .ind__flow { margin-top: 0; padding-top: 18px; }
.sector__card .ind__names { min-height: 0; }

/* ---------- developers ---------- */
.xcells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xcells--2 > :nth-child(2n+1) { border-left: 0; }
.xcells--2 > :nth-child(n+3) { border-top: 1px solid var(--line); }
.xcells--2 > :nth-child(2)::after { content: ""; position: absolute; right: -5px; bottom: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.xcells--2 > :nth-child(4)::after { content: ""; position: absolute; left: -5px; bottom: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.wh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-block: 1px solid var(--line); }
.wh > * { position: relative; min-width: 0; padding: 32px; }
.wh > * + * { border-left: 1px solid var(--line); }
.wh > * + *::before { content: ""; position: absolute; left: -5px; top: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.wh > * + *::after { content: ""; position: absolute; left: -5px; bottom: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.wh__t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.wh__t + * { margin-top: 18px; }
.wh__t--gap { margin-top: 36px; }
.wh .ip-ticks { margin-top: 22px; }
.wh__code { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.wh > .wh__code { border-left: 0; }
.wh > .wh__code::before { left: -5px; top: -5px; }
.wh > .wh__code::after { display: none; }
.wh .code { margin-top: 22px; border-radius: 18px; box-shadow: 0 30px 60px -40px rgba(7, 10, 23, .55); }
.wh .code__pane pre { padding: 20px 22px; font-size: 12.5px; line-height: 1.75; }
.wh .code__lang { margin-left: 0; }
.sig { display: grid; gap: 10px; }
.sig__line { padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: var(--night); color: #E4E9FB; font-family: var(--mono); font-size: 13px; line-height: 1.5; white-space: nowrap; }
.sig__line .t-key { color: #8FD8FF; }
.sig__note { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.hdr { width: 100%; border-collapse: collapse; }
.hdr th, .hdr td { padding: 13px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.5; }
.hdr tr:last-child th, .hdr tr:last-child td { border-bottom: 0; }
.hdr thead th { padding-top: 0; border-bottom: 1px solid var(--line); color: var(--tone2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hdr tbody th { padding-right: 20px; color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; white-space: nowrap; }
.hdr td { color: var(--body); }
.retry { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.retry::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 3px, transparent 3px 7px); }
.retry li { position: relative; display: grid; justify-items: start; gap: 12px; color: var(--ink-2); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.retry li::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--royal); }
.retry li:first-child::before { background: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14); }
.retry li:last-child::before { background: var(--ink); box-shadow: none; }
.retry-note { margin-top: 18px; color: var(--body); font-size: 15px; line-height: 1.6; }
.evt.xgrid--4 { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); }
.evt > li { padding: 30px 26px 32px; }
.evt__t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.evt__c { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--canvas-2); color: var(--royal-700); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.evt__list { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.evt__list li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.evt__list li:last-child { border-bottom: 0; }
.evt__list code { color: var(--ink); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.evt__list span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.evt__list li:hover code { color: var(--royal); }

/* ---------- a closing band inside a section ---------- */
.ip-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 30px 32px; border-bottom: 1px solid var(--line); }
.ip-band__t { display: flex; align-items: center; gap: 14px; max-width: 64ch; color: var(--body); font-size: 15.5px; line-height: 1.55; }
.ip-band__t strong { color: var(--ink); font-weight: 600; }
.ip-band__ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--canvas-2); color: var(--royal); }
.ip-band__ico .i { width: 18px; height: 18px; }
.ip-band__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ip-band .text-link { margin-top: 0; }

/* ---------- legal pages ---------- */
.legal-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px 20px; max-width: 760px; margin: 0 32px; padding: 28px; border-radius: 22px; background: linear-gradient(180deg, #F7F9FF, #FFFFFF); box-shadow: 0 0 0 1px #E6EAF3; }
.legal-note .ip-cell__ico { width: 44px; height: 44px; }
.legal-note__t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.legal-note p { margin-top: 8px; color: var(--body); font-size: 16px; line-height: 1.65; }
.legal-note a { color: var(--royal); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cat__row { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .cat__main { grid-column: 2; grid-row: 1; }
  .cat__price { grid-column: 3; grid-row: 1; }
  .cat__ret { grid-column: 2 / 4; grid-row: 2; margin-top: 10px; padding: 12px 0 0; border-top: 1px dashed var(--line-2); border-left: 0; }
  .evt.xgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evt.xgrid--4 > li { padding-inline: 28px; }
  .retry { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  .retry::before { display: none; }
}
@media (max-width: 1023px) {
  .ph__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .ph__h { max-width: 14em; }
  .sector__grid { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .sector--flip .sector__copy { order: 0; }
  .sector__copy { padding-inline: 32px; }
  .wh { grid-template-columns: minmax(0, 1fr); }
  .wh > * + * { border-top: 1px solid var(--line); border-left: 0; }
  .wh > * + *::after { display: none; }
}
@media (max-width: 900px) {
  .xgrid--2 { grid-template-columns: minmax(0, 1fr); }
  .xgrid--2 > li { border-left: 0; }
  .xgrid--2 > li + li { border-top: 1px solid var(--line); }
  .xgrid--2 > li::before, .xgrid--2 > li::after { display: none; }
  .xcells--2 { grid-template-columns: minmax(0, 1fr); }
  .xcells--2 > :nth-child(n) { border-left: 0; }
  .xcells--2 > :nth-child(n+2) { border-top: 1px solid var(--line); }
  .xcells--2 > :nth-child(n)::before, .xcells--2 > :nth-child(n)::after { display: none; }
}
@media (max-width: 767px) {
  .jump { flex-direction: column; align-items: flex-start; gap: 12px; padding-inline: 0; }
  .jump::before, .jump::after { display: none; }
  .jump__list { flex-wrap: nowrap; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; }
  .jump__list::-webkit-scrollbar { display: none; }
  .ph__btns .btn { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .ip-cells > li { padding: 26px 0 30px; }
  .ip-stage { min-height: 0; padding: 22px 16px; }
  .cat__row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 6px 14px; padding: 22px 0; }
  .cat__ico { align-self: start; width: 42px; height: 42px; border-radius: 12px; }
  .cat__ico .i { width: 19px; height: 19px; }
  .cat__t { font-size: 19px; }
  .cat__p { font-size: 22px; }
  .cat__price { align-self: start; }
  .cat__ret { grid-column: 1 / -1; }
  .xfs > .xf { padding-inline: 0; }
  .faq__it > summary { padding: 20px 0; gap: 16px; }
  .faq__a p { padding: 0 0 24px; }
  .ptab caption { padding-inline: 0; }
  .ptab th, .ptab td { padding: 16px 0; }
  .ptab th:first-child { padding-right: 14px; }
  .ptab__ico { display: none; }
  .ptab__p { font-size: 19px; }
  .ptab-note { padding-inline: 0; }
  .sector__copy { padding-inline: 0; }
  .sector__card { padding: 18px 16px 20px; border-radius: 22px; }
  .sector__card .ind__art { max-width: 320px; }
  .xcells--2 > * { padding-inline: 0; }
  .wh > * { padding-inline: 0; }
  .hdr tbody th { white-space: normal; overflow-wrap: anywhere; }
  .evt.xgrid--4 > li { padding-block: 24px 26px; }
  .ip-band { padding-inline: 0; }
  .legal-note { grid-template-columns: minmax(0, 1fr); margin-inline: 0; padding: 22px 18px; }
}
@media (max-width: 640px) {
  .swipe { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > li, .swipe > :nth-child(n) { flex: 0 0 84%; min-width: 0; padding-inline: 20px; border-top: 0; border-left: 1px solid var(--line); scroll-snap-align: start; }
  .swipe > li:first-child, .swipe > :first-child:nth-child(n) { padding-left: 0; border-left: 0; }
  .swipe::after, .swipe > li::before, .swipe > li::after, .swipe > :nth-child(n)::before, .swipe > :nth-child(n)::after { display: none; }
}
@media (max-width: 480px) {
  .retry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   23. Console kit: the product, drawn in HTML. Light app chrome, hairline
   cards, mono ids, royal for what is active. Screens are illustrations: a
   veil can dim everything except the part a feature talks about.
   ========================================================================== */
.cx { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; text-align: left; }
.cx__win { position: relative; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 14, 31, .07), 0 2px 4px rgba(10, 14, 31, .04), 0 50px 100px -40px rgba(15, 31, 122, .42); }
.cx__bar { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
.cx__ws { display: inline-flex; flex: none; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 650; }
.cx__ws-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--mb); color: #fff; font-size: 11px; font-weight: 700; }
.cx__crumb { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cx__crumb b { color: var(--ink); font-weight: 600; }
.cx__search { display: flex; flex: 0 1 250px; align-items: center; gap: 8px; min-width: 0; height: 32px; margin-left: auto; padding: 0 8px 0 10px; overflow: hidden; border-radius: 9px; background: #F1F3F9; color: var(--tone2); font-size: 12px; white-space: nowrap; }
.cx__search .i { width: 14px; height: 14px; }
.cx__search kbd { margin-left: auto; padding: 1px 5px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.cx__sara { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: linear-gradient(135deg, #EEF2FF, #E6FAFE); color: var(--royal-700); font-size: 12px; font-weight: 600; }
.cx__sara .i { width: 14px; height: 14px; }
.cx__me { flex: none; }
.cx__body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.cx--rail .cx__body { grid-template-columns: 56px minmax(0, 1fr); }
.cx__side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px 16px; border-right: 1px solid var(--line); background: #FBFCFE; }
.cx__side--rail { align-items: center; padding-inline: 8px; }
.cx__nav { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border-radius: 8px; color: var(--body); font-size: 12.5px; white-space: nowrap; }
.cx__nav .i { width: 15px; height: 15px; color: var(--tone2); }
.cx__nav.is-on { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 14, 31, .05); color: var(--ink); font-weight: 600; }
.cx__nav.is-on .i { color: var(--royal); }
.cx__side--rail .cx__nav { justify-content: center; width: 38px; height: 34px; padding: 0; }
.cx__badge { display: grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: var(--royal); color: #fff; font-size: 10.5px; font-weight: 700; }
.cx__dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 2px #FBFCFE; }
.cx__nav-h { padding: 14px 9px 6px; color: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.cx__nav-sep { width: 24px; height: 1px; margin: 8px 0; background: var(--line); }
.cx__main { position: relative; min-width: 0; padding: 20px 22px 22px; }
.cx__main::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(250, 251, 254, .66); opacity: 0; transition: opacity .55s var(--ease); pointer-events: none; }
.cx.has-f .cx__main::after { opacity: 1; }
.cx [data-t] { transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.cx.has-f [data-t].is-f { position: relative; z-index: 2; border-radius: 12px; box-shadow: 0 0 0 2px var(--royal), 0 18px 36px -16px rgba(37, 71, 233, .55); }
.cx.has-f .cx-ss__wf.is-f { border-radius: 6px; background: #fff; }
.cx.has-f .cx-canvas { position: relative; z-index: 2; }
.cx.has-f .wf-canvas > :not(.is-f) { opacity: .26; }
.cx.has-f .wf-canvas > .is-f .wn__box, .cx.has-f .wf-canvas > .is-f .wc__d { stroke: var(--royal); stroke-width: 2; }
.wf-canvas > * { transition: opacity .5s var(--ease); }

/* shared bits */
.cx-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cx-btn .i { width: 14px; height: 14px; }
.cx-btn--pri { background: var(--royal); box-shadow: 0 6px 14px -8px rgba(37, 71, 233, .8); color: #fff; }
.cx-btn--ok { background: #0B8A51; box-shadow: 0 6px 14px -8px rgba(11, 138, 81, .8); color: #fff; }
.cx-btn--xs { height: 24px; margin-left: 8px; padding: 0 9px; font-size: 11px; }
.cx-chip { padding: 2px 8px; border-radius: 6px; background: var(--canvas-2); color: var(--royal-700); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.cx-chip--warn { background: var(--warn-bg); color: var(--warn-ink); }
.cx-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cx-h__t { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.cx-h__act { display: flex; gap: 8px; margin-left: auto; }
.cx-card { padding: 14px 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cx-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: var(--ink); font-size: 12.5px; font-weight: 650; }
.cx-card__s { color: var(--tone2); font-size: 11px; font-weight: 500; }
.cx-grid { display: grid; gap: 14px; }
.cx-col { display: grid; align-content: start; gap: 14px; }
.prv { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.prv::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.prv--ok { background: var(--ok-bg); color: var(--ok-ink); }
.prv--doc { background: var(--canvas-2); color: var(--royal-700); }
.prv--dis { background: var(--warn-bg); color: var(--warn-ink); }
.cx-ok { display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: var(--ok-bg); color: var(--ok-ink); }
.cx-ok .i { width: 11px; height: 11px; stroke-width: 2.6; }

/* identity record */
.cx-idh { display: flex; align-items: center; gap: 14px; padding: 2px; }
.cx-idh__b { display: grid; gap: 3px; min-width: 0; }
.cx-idh__n { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.cx-idh__m { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cx-idh__m .mono { color: var(--ink-2); font-size: 11px; }
.cx-idh__act { display: flex; gap: 8px; margin-left: auto; }
.cx-tabs { display: flex; gap: 20px; margin: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.cx-tabs span { padding-bottom: 10px; white-space: nowrap; }
.cx-tabs .is-on { box-shadow: inset 0 -2px 0 var(--royal); color: var(--ink); font-weight: 600; }
.cx-tabs b { margin-left: 4px; padding: 0 6px; border-radius: 9px; background: var(--canvas); font-size: 11px; font-weight: 600; }
.cx-grid--id { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.cx-kvs { margin: 0; padding: 0; list-style: none; }
.cx-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.cx-kv__k { color: var(--muted); font-size: 12px; }
.cx-kv__v { overflow: hidden; color: var(--ink); font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.cx-kv--dis { margin-inline: -14px; padding-inline: 14px; background: linear-gradient(90deg, rgba(247, 144, 9, .09), rgba(247, 144, 9, 0) 80%); }
.cx-sss { margin: 0; padding: 0; list-style: none; }
.cx-ss { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
.cx-ss__rail { position: relative; display: flex; justify-content: center; padding-top: 4px; }
.cx-ss__rail span { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--royal); }
.cx-ss:not(:last-child) .cx-ss__rail::after { content: ""; position: absolute; top: 16px; bottom: -12px; left: 50%; width: 1px; background: var(--line-2); }
.cx-ss.is-new .cx-ss__rail span { background: var(--warn); box-shadow: 0 0 0 3px rgba(247, 144, 9, .18); }
.cx-ss__b { display: grid; gap: 1px; min-width: 0; }
.cx-ss__id { color: var(--ink-2); font-size: 10.5px; }
.cx-ss__n { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.cx-ss__wf { display: inline-flex; align-items: center; gap: 5px; justify-self: start; margin-top: 2px; padding: 1px 6px 1px 4px; border-radius: 6px; color: var(--muted); font-size: 11px; }
.cx-ss__wf .i { width: 12px; height: 12px; color: var(--royal); }
.cx-ss__r { display: grid; align-content: start; justify-items: end; gap: 4px; }
.cx-ss__d { color: var(--muted); font-size: 11px; }
.cx-prot { margin: 0; padding: 0; list-style: none; }
.cx-ev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.cx-ev span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 8px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 11.5px; }
.cx-ev .i { width: 14px; height: 14px; color: var(--royal); }
.cx-prot li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.cx-prot li > .i { width: 15px; height: 15px; color: var(--royal); }

/* workflow builder */
.cx-grid--wf { grid-template-columns: minmax(0, 1fr) 208px; }
.cx-canvas { padding: 6px; border-radius: 12px; background: #FAFBFE radial-gradient(#DCE1EC 1px, transparent 1.3px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.wf-canvas { display: block; width: 100%; height: auto; font-family: var(--font); }
.wn__box { fill: #fff; stroke: #D5DCEA; stroke-width: 1; }
.wn__i { color: var(--royal); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wn__t { fill: var(--ink); font-size: 13px; font-weight: 600; }
.wn__s { fill: var(--muted); font-family: var(--mono); font-size: 9.5px; }
.wn__p { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.wn--step .wn__box { fill: #FCFDFF; stroke-dasharray: 3 3; }
.wn--step .wn__i { color: var(--ink-2); }
.wn--dec .wn__box { fill: var(--ink); stroke: var(--ink); }
.wn--dec .wn__t { fill: #fff; }
.wn--dec .wn__s { fill: rgba(255, 255, 255, .6); }
.wn--dec .wn__i { color: var(--cyan); }
.wn--ghost .wn__box { fill: none; stroke: #C4CCDF; stroke-dasharray: 4 4; }
.wn--ghost .wn__t { fill: var(--tone2); font-weight: 500; }
.wn__start { fill: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.wl path { fill: none; stroke: #C2CADC; stroke-width: 1.4; }
.wl .wl--yes { stroke: #8FA3F5; }
.wl .wl--no { stroke-dasharray: 4 4; }
.wl .wl--run { stroke: var(--royal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 18 700; stroke-dashoffset: 18; }
.wc__d { fill: #fff; stroke: var(--royal); stroke-width: 1.4; }
.wc__t { fill: var(--royal-700); font-size: 12px; font-weight: 600; }
.wl__lbl { fill: var(--muted); font-family: var(--mono); font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .wl .wl--run { animation: wl-run 3.4s cubic-bezier(.5, 0, .5, 1) infinite; }
}
@keyframes wl-run { to { stroke-dashoffset: -330; } }
.cx-insp { display: grid; align-content: start; gap: 12px; }
.cx-field { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.cx-field span { color: var(--muted); }
.cx-field b { color: var(--ink); font-weight: 600; text-align: right; }
.cx-field .cx-yes { color: var(--ok-ink); }
.cx-field .cx-no { color: var(--warn-ink); }
.cx-cost__v { color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.cx-cost__v span { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.cx-cost__bar { display: flex; gap: 3px; height: 6px; margin-top: 10px; }
.cx-cost__bar span { border-radius: 3px; background: var(--royal); }
.cx-cost__bar span:nth-child(1) { flex: 25; background: #6D8BFF; }
.cx-cost__bar span:nth-child(2) { flex: 10; }
.cx-cost__bar span:nth-child(3) { flex: 10; background: #1A9BF4; }
.cx-cost__bar span:nth-child(4) { flex: 10; background: #35B9E8; }
.cx-cost__bar span:nth-child(5) { flex: 75; background: var(--ink); }
.cx-vers { margin: 0; padding: 0; list-style: none; }
.cx-ver { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); color: var(--body); font-size: 12px; }
.cx-ver .mono { color: var(--muted); font-size: 11px; }
.cx-ver.is-on { color: var(--ink); font-weight: 600; }
.cx-ver.is-on .mono { color: var(--royal); }
.cx-ver__s { color: var(--muted); font-size: 11px; font-weight: 400; }

/* review queue */
.cx-toast { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 12px 6px 9px; border-radius: 10px; background: var(--ink); box-shadow: 0 10px 24px -12px rgba(7, 10, 23, .6); color: rgba(255, 255, 255, .8); font-size: 11.5px; white-space: nowrap; }
.cx-toast .i { width: 15px; height: 15px; color: var(--cyan); }
.cx-toast b { margin-right: 4px; color: #fff; font-weight: 600; }
.cx-grid--q { grid-template-columns: 228px minmax(0, 1fr); }
.cx-qs { display: grid; align-content: start; gap: 2px; margin: 0; padding: 6px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); list-style: none; }
.cx-q { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 10px; padding: 9px 8px; border-radius: 9px; }
.cx-q.is-on { background: #F3F6FF; box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .22); }
.cx-q__b { display: grid; min-width: 0; }
.cx-q__n { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.cx-q__r { overflow: hidden; color: var(--warn-ink); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.cx-q__m { display: flex; grid-column: 2; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10.5px; }
.cx-q__m .mono { font-size: 10px; }
.cx-q--bad .cx-q__r { color: var(--bad-ink); }
.cx-q--done { opacity: .55; }
.cx-q--done .cx-q__r { color: var(--ok-ink); }
.cx-case { min-width: 0; padding: 14px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.cx-case__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 12px; }
.cx-case__n { color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.cx-case__why { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 7px; background: var(--canvas); color: var(--ink-2); font-size: 11px; }
.cx-case__why .i { width: 13px; height: 13px; color: var(--royal); }
.cx-case__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.cx-cks { margin: 0; padding: 0; list-style: none; }
.cx-ck { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 12px; white-space: nowrap; }
.cx-ck__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.cx-ck__s { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.cx-ck--flag { margin-inline: -6px; padding-inline: 6px; border-radius: 8px; background: #FFF8EC; }
.cx-ck--flag .cx-ck__dot { background: var(--warn); }
.cx-ck--flag .cx-ck__s { color: var(--warn-ink); }
.cx-field-d { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 10px; background: #FFFBF3; box-shadow: inset 0 0 0 1px #F6DDB1; }
.cx-field-d .prv { justify-self: start; }
.cx-cmp { display: grid; gap: 6px; }
.cx-cmp span { display: grid; color: var(--ink); font-size: 12px; font-weight: 550; }
.cx-cmp em { color: var(--muted); font-family: var(--mono); font-size: 9.5px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.cx-note { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-note__k { color: var(--tone2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.cx-note__v { color: var(--ink); font-size: 12.5px; }
.cx-caret { display: inline-block; width: 1px; height: 14px; margin-left: 2px; background: var(--royal); vertical-align: -2px; }
@media (prefers-reduced-motion: no-preference) { .cx-caret { animation: cx-caret 1.1s steps(1) infinite; } }
@keyframes cx-caret { 50% { opacity: 0; } }
.cx-note__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.cx-audit { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 6px; color: var(--muted); font-size: 11.5px; }
.cx-audit .i { width: 14px; height: 14px; }

/* screens settle in when they first come into view */
:root:not(.no-js) .cx[data-reveal] .cx-card,
:root:not(.no-js) .cx[data-reveal] .cx-qs,
:root:not(.no-js) .cx[data-reveal] .cx-case,
:root:not(.no-js) .cx[data-reveal] .cx-canvas { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.2, .8, .2, 1); }
:root:not(.no-js) .cx[data-reveal].is-in .cx-card,
:root:not(.no-js) .cx[data-reveal].is-in .cx-qs,
:root:not(.no-js) .cx[data-reveal].is-in .cx-case,
:root:not(.no-js) .cx[data-reveal].is-in .cx-canvas { opacity: 1; transform: none; }
.cx[data-reveal].is-in .cx-col > :nth-child(1), .cx[data-reveal].is-in .cx-case { transition-delay: .1s; }
.cx[data-reveal].is-in .cx-col > :nth-child(2), .cx[data-reveal].is-in .cx-insp > :nth-child(2) { transition-delay: .2s; }
.cx[data-reveal].is-in .cx-insp > :nth-child(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  :root:not(.no-js) .cx[data-reveal] .cx-card, :root:not(.no-js) .cx[data-reveal] .cx-qs, :root:not(.no-js) .cx[data-reveal] .cx-case, :root:not(.no-js) .cx[data-reveal] .cx-canvas { opacity: 1; transform: none; }
}

/* ==========================================================================
   24. Platform · A · Console tour
   ========================================================================== */
.ph--tour { padding-bottom: 0; }
.ph--tour .ph__bg::after { background: radial-gradient(56% 46% at 50% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%); }
.ph__center { display: flex; flex-direction: column; align-items: center; margin-top: clamp(24px, 3vw, 40px); text-align: center; }
.ph--tour .ph__h { max-width: 15em; }
.ph--tour .ph__lede { max-width: 60ch; margin-top: 24px; }
.ph--tour .ph__btns { justify-content: center; }
.hcx { position: relative; max-width: 980px; margin: clamp(52px, 6vw, 84px) auto 0; perspective: 1800px; }
.hcx__tilt { transform-origin: 50% 0; will-change: transform; }
.hcx .cx__win { max-height: 620px; }
.hcx::after { content: ""; position: absolute; left: -40px; right: -40px; bottom: -1px; z-index: 2; height: 190px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%); pointer-events: none; }
.hcx__call { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(10, 14, 31, .07), 0 16px 34px -16px rgba(15, 31, 122, .5); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hcx__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4); color: #fff; }
.hcx__ico .i { width: 13px; height: 13px; stroke-width: 1.9; }
.hcx__call--1, .hcx__call--2 { right: calc(100% + 22px); }
.hcx__call--3, .hcx__call--4 { left: calc(100% + 22px); }
.hcx__call--1 { top: 64px; }
.hcx__call--2 { top: 250px; }
.hcx__call--3 { top: 150px; }
.hcx__call--4 { top: 356px; }
.hcx__call::after { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: linear-gradient(90deg, #C9D2E8, var(--royal)); }
.hcx__call::before { content: ""; position: absolute; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 3px rgba(37, 71, 233, .15); }
.hcx__call--1::after, .hcx__call--2::after { left: 100%; }
.hcx__call--1::before, .hcx__call--2::before { left: calc(100% + 19px); }
.hcx__call--3::after, .hcx__call--4::after { right: 100%; transform: scaleX(-1); }
.hcx__call--3::before, .hcx__call--4::before { right: calc(100% + 19px); }
.cx--hero .cx-ss.is-new { animation: cx-row .9s cubic-bezier(.2, .8, .2, 1) 1.4s both; }
@keyframes cx-row { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .cx--hero .cx-ss.is-new { animation: none; } }

/* the chapter bar */
.tour { position: relative; }
.tour-nav { position: sticky; top: 94px; z-index: 30; display: flex; justify-content: center; height: 0; pointer-events: none; }
.tour-nav__in { display: flex; gap: 4px; height: 48px; margin: 0; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(10, 14, 31, .07), 0 14px 30px -18px rgba(15, 31, 122, .4); list-style: none; pointer-events: auto; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
:root.js .tour-nav:not(.is-on) .tour-nav__in { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.tour-nav__in { transition: opacity .45s var(--ease), transform .6s cubic-bezier(.2, .8, .2, 1); }
.tour-nav a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px; color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .35s var(--ease), color .35s; }
.tour-nav a:hover { background: rgba(10, 14, 31, .05); color: var(--ink); }
.tour-nav__n { color: var(--tone2); font-family: var(--mono); font-size: 11px; transition: color .35s; }
.tour-nav a[aria-current="true"] { background: var(--ink); color: #fff; }
.tour-nav a[aria-current="true"] .tour-nav__n { color: var(--cyan); }

/* a chapter: copy and features on the left, the screen held on the right */
.tour-ch { padding-block: clamp(96px, 9vw, 132px) clamp(72px, 8vw, 112px); }
.tour-ch__in { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); grid-template-areas: "head head" "list stage"; align-items: start; column-gap: clamp(36px, 4vw, 56px); padding-inline: 32px; }
.tour-ch__head { display: grid; grid-area: head; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "eb eb" "h lede"; align-items: end; gap: 20px 72px; margin-bottom: clamp(40px, 4.4vw, 60px); }
.tour-ch__head .eyebrow { grid-area: eb; justify-self: start; }
.tour-ch__h { grid-area: h; max-width: 13em; margin-top: 0; }
.tour-ch__head .lede { grid-area: lede; padding-bottom: 6px; }
.tour-ch__list { grid-area: list; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.tour-ch__stage { grid-area: stage; align-self: stretch; }
.tour-ch__sticky { position: sticky; top: 152px; }
@media (min-width: 901px) {
  .cx--tour .cx-grid--wf { grid-template-columns: minmax(0, 1fr); }
  .cx--tour .cx-insp { grid-template-columns: 1.15fr .85fr 1fr; }
  .cx--tour .cx-grid--q { grid-template-columns: 196px minmax(0, 1fr); }
  .cx--tour .cx-case__g { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.tour-f { position: relative; padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
@media (min-width: 1181px) { .tour-f { min-height: 142px; } }
.tour-f::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--royal), var(--sky)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.tour-f.is-on::before { transform: none; }
.tour-f__t { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.tour-f__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color .35s; }
.tour-f__ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); transition: background-color .35s, color .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.tour-f__ico .i { width: 16px; height: 16px; }
.tour-f.is-on .tour-f__btn { color: var(--ink); }
.tour-f.is-on .tour-f__ico { background: var(--royal); color: #fff; transform: translateY(-2px); }
.tour-f__x { max-width: 34ch; margin: 8px 0 0 46px; color: var(--muted); font-size: 15px; line-height: 1.55; transition: color .35s; }
.tour-f.is-on .tour-f__x { color: var(--body); }
.tour-next > li { padding-bottom: 34px; }
.tour-next .ip-cell__ico { background: var(--canvas); color: var(--tone2); }

/* ==========================================================================
   25. Platform · B · System map and modules
   ========================================================================== */
.hw-map { display: block; width: 100%; height: auto; overflow: visible; }
.hw-map * { stroke-linejoin: round; stroke-linecap: round; }
.hw-map .f-l { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.hw-map .f-r, .hw-map .f-t, .hw-map .lit { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.hw-map .scr { fill: #FFFFFF; stroke: #B9BFCD; stroke-width: 1; }
.hw-map .soft { fill: #F1F4FB; stroke: #CDD3E0; stroke-width: 1; }
.hw-map .drawer { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.hw-map .i-l, .hw-map .i-r, .hw-map .i-t, .hw-map .i-t2 { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.hw-map .i-t { stroke: #4A5270; }
.hw-map .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.hw-map .r-l, .hw-map .r-r, .hw-map .r-t, .hw-map .r-disc { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.hw-map .notch { fill: none; stroke: #9AA1B5; stroke-width: 2.4; }
.hw-map .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.hw-map .ln-d { fill: none; stroke: #4A5270; stroke-width: 1.8; }
.hw-map .ln-l { fill: none; stroke: #CDD3E0; stroke-width: 1.25; }
.hw-map .ln-i { fill: none; stroke: #4A5270; stroke-width: 1.4; }
.hw-map .ln-w { fill: none; stroke: #FFFFFF; stroke-width: 1.8; }
.hw-map .px { fill: var(--ink); stroke: none; }
.hw-map .beam { fill: var(--royal); fill-opacity: .1; stroke: var(--royal); stroke-opacity: .35; stroke-width: 1; }
.hw-map .mesh { fill: none; stroke: #C4C9D6; stroke-width: .9; }
.hw-map .mrz { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 2 2.5; }
.hw-map .flow, .hw-map .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.hw-map .bracket { fill: none; stroke: var(--royal); stroke-width: 2; }
.hw-map .scanline { fill: none; stroke: var(--royal); stroke-width: 1.6; }
.hw-map .photo-head { fill: #FFFFFF; stroke: none; opacity: .92; }
.hw-map .photo-body { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: .92; }
.hw-map .node { fill: #9AA1B5; }
.hw-map .node-r { fill: var(--royal); }
.hw-map .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2.2; }
.hw-map .ring-bg { fill: none; stroke: #E1E5EE; stroke-width: 2.6; }
.hw-map .ring { fill: none; stroke: var(--royal); stroke-width: 2.6; }
.hw-map .rec-dot { fill: #F04438; stroke: none; }
.hw-map .dot-ok { fill: var(--ok); }
.hw-map .dot-warn { fill: var(--warn); }
.hw-map .dot-bad { fill: var(--bad); }
.hw-map .handle { fill: none; stroke: var(--ink); stroke-width: 2; }
.hw-map .play { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1; }
.hw-map .beam--b { fill-opacity: .16; }
.hw-map .pkt { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; }
.hw-map .a-march { animation: hw-march 1.2s linear infinite; }
@keyframes hw-march { to { stroke-dashoffset: -12; } }
.pb-map .map { margin-top: 0; }

/* three building blocks */
.pb-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.pb-b { position: relative; display: flex; flex-direction: column; padding: 30px 32px 34px; }
.pb-b + .pb-b { border-left: 1px solid var(--line); }
.pb-b + .pb-b::before { content: ""; position: absolute; left: -15px; top: 118px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: #fff var(--plus) center / 11px no-repeat; box-shadow: 0 0 0 1px var(--line-2); }
.pb-b__k { color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pb-b__art { display: grid; place-items: center; height: 170px; margin: 18px 0 22px; border-radius: 18px; background: linear-gradient(180deg, #F6F8FD, #EEF2FB); box-shadow: inset 0 0 0 1px #E6EAF3; }
.pb-b__t { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.pb-b__x { margin: 8px 0 22px; color: var(--body); font-size: 15.5px; line-height: 1.55; }
.pb-b__r { align-self: flex-start; margin-top: auto; padding: 5px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; }
.pb-idc { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 20px 36px -22px rgba(15, 31, 122, .45); }
.pb-idc > span:last-child { display: grid; font-size: 12px; color: var(--muted); }
.pb-idc b { color: var(--ink); font-size: 14px; }
.pb-ss { display: grid; gap: 7px; width: 76%; }
.pb-ss > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.pb-ss i { color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 400; }
.pb-wf { display: flex; align-items: center; gap: 6px; }
.pb-wf > span { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px #DCE3F3, 0 6px 14px -10px rgba(15, 31, 122, .5); color: var(--royal); }
.pb-wf > span + span::before { content: ""; position: absolute; right: 100%; width: 6px; height: 1px; background: #B8C4E6; }
.pb-wf .i { width: 15px; height: 15px; }
.pb-wf .pb-wf__d { background: var(--ink); color: var(--cyan); box-shadow: none; }
:root:not(.no-js) .pb-blocks[data-reveal] .pb-ss > span, :root:not(.no-js) .pb-blocks[data-reveal] .pb-wf > span, :root:not(.no-js) .pb-blocks[data-reveal] .pb-idc { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1); }
:root:not(.no-js) .pb-blocks[data-reveal].is-in .pb-ss > span, :root:not(.no-js) .pb-blocks[data-reveal].is-in .pb-wf > span, :root:not(.no-js) .pb-blocks[data-reveal].is-in .pb-idc { opacity: 1; transform: none; }
.pb-blocks.is-in .pb-ss > span:nth-child(2) { transition-delay: .5s; }
.pb-blocks.is-in .pb-ss > span:nth-child(3) { transition-delay: .8s; }
.pb-blocks.is-in .pb-ss > span:nth-child(1) { transition-delay: .2s; }
.pb-blocks.is-in .pb-wf > span:nth-child(2) { transition-delay: .9s; } .pb-blocks.is-in .pb-wf > span:nth-child(3) { transition-delay: 1s; } .pb-blocks.is-in .pb-wf > span:nth-child(4) { transition-delay: 1.1s; } .pb-blocks.is-in .pb-wf > span:nth-child(5) { transition-delay: 1.2s; } .pb-blocks.is-in .pb-wf > span:nth-child(6) { transition-delay: 1.35s; } .pb-blocks.is-in .pb-wf > span:nth-child(1) { transition-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
  :root:not(.no-js) .pb-blocks[data-reveal] .pb-ss > span, :root:not(.no-js) .pb-blocks[data-reveal] .pb-wf > span, :root:not(.no-js) .pb-blocks[data-reveal] .pb-idc { opacity: 1; transform: none; }
}

/* modules: a bento on the grid */
.pb-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "wf wf rv" "bi bl rv" "sa wl au"; gap: 14px; padding: 32px; border-block: 1px solid var(--line); }
.pb-m { position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #E6EAF3, 0 30px 60px -48px rgba(15, 31, 122, .4); transition: box-shadow .5s var(--ease), transform .6s cubic-bezier(.2, .8, .2, 1); }
.pb-m:hover { box-shadow: 0 0 0 1px #D5DDF2, 0 40px 70px -44px rgba(15, 31, 122, .5); transform: translateY(-3px); }
.pb-m--wf { background: linear-gradient(155deg, #3158F2 0%, #2547E9 45%, #1B36C4 100%); box-shadow: 0 30px 60px -40px rgba(27, 54, 196, .8); color: rgba(255, 255, 255, .86); }
.pb-m--wf::before { content: ""; position: absolute; inset: 0; background: var(--flutes-wide); opacity: .55; pointer-events: none; }
.pb-m--wf > * { position: relative; }
.pb-m--wf .pb-m__art { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pb-m--wf .pb-m__k { color: rgba(255, 255, 255, .7); }
.pb-m--wf .pb-m__ico { background: rgba(255, 255, 255, .16); color: #fff; }
.pb-m--wf .pb-m__t { color: #fff; }
.pb-m--wf .pb-m__x { color: rgba(255, 255, 255, .86); }
.pb-m--wf .pb-m__sp li { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; }
.pb-m--wf .pb-m__sp .i { color: var(--cyan); }
.pb-m--wf .mini-wf__foot { border-top-color: rgba(255, 255, 255, .25); }
.pb-m--wf .mini-ver { background: rgba(255, 255, 255, .12); box-shadow: none; color: rgba(255, 255, 255, .8); }
.pb-m--wf .mini-ver.is-on { background: #fff; color: var(--royal-700); }
.pb-m--wf .mini-cost { color: #fff; }
.pb-m--wf .mini-wf__c { border-color: var(--cyan); background: rgba(7, 10, 23, .25); color: var(--cyan); }
.pb-m--sa { background: var(--night); box-shadow: 0 30px 60px -40px rgba(7, 10, 23, .8); color: rgba(255, 255, 255, .8); }
.pb-m--sa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 95% 0%, rgba(37, 71, 233, .5), rgba(37, 71, 233, 0) 70%), radial-gradient(50% 40% at 0% 100%, rgba(26, 155, 244, .18), rgba(26, 155, 244, 0) 70%); pointer-events: none; }
.pb-m--sa > * { position: relative; }
.pb-m--sa .pb-m__art { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pb-m--sa .pb-m__k { color: rgba(255, 255, 255, .6); }
.pb-m--sa .pb-m__ico { background: rgba(100, 244, 248, .14); color: var(--cyan); }
.pb-m--sa .pb-m__t { color: #fff; }
.pb-m--sa .pb-m__x { color: rgba(255, 255, 255, .8); }
.pb-m--sa .pb-m__sp li { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
.pb-m--sa .pb-m__sp .i { color: var(--cyan); }
.pb-m--sa .mini-sara__a { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); }
.pb-m--sa .mini-sara__s { color: rgba(255, 255, 255, .5); }
.pb-m--wf { grid-area: wf; } .pb-m--rv { grid-area: rv; } .pb-m--bi { grid-area: bi; } .pb-m--bl { grid-area: bl; } .pb-m--sa { grid-area: sa; } .pb-m--wl { grid-area: wl; } .pb-m--au { grid-area: au; }
.pb-m__art { display: grid; align-content: center; min-height: 150px; margin-bottom: 20px; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #F6F8FD, #EEF2FB); box-shadow: inset 0 0 0 1px #E6EAF3; }
.pb-m--wf .pb-m__art, .pb-m--rv .pb-m__art { min-height: 200px; }
.pb-m--rv .pb-m__art { flex: 1; }
.pb-m__k { display: flex; align-items: center; gap: 8px; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pb-m__ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--canvas-2); color: var(--royal); }
.pb-m__ico .i { width: 13px; height: 13px; }
.pb-m__t { margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.pb-m__x { margin-top: 6px; color: var(--body); font-size: 15px; line-height: 1.55; }
.pb-m__sp { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.pb-m__sp li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12.5px; }
.pb-m__sp .i { width: 13px; height: 13px; color: var(--royal); stroke-width: 2.2; }
.mini-wf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mini-wf__n { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #DCE3F3, 0 8px 18px -14px rgba(15, 31, 122, .5); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.mini-wf__n .i { width: 14px; height: 14px; color: var(--royal); }
.mini-wf__n--d { background: var(--ink); color: #fff; box-shadow: none; }
.mini-wf__n--d .i { color: var(--cyan); }
.mini-wf__c { padding: 5px 9px; border: 1px solid var(--royal); border-radius: 8px; background: #fff; color: var(--royal-700); font-family: var(--mono); font-size: 11px; transform: rotate(0deg); }
.mini-wf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #D9DFEC; }
.mini-ver { padding: 3px 9px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--muted); font-size: 11.5px; }
.mini-ver.is-on { background: var(--canvas-2); box-shadow: none; color: var(--royal-700); font-weight: 600; }
.mini-cost { margin-left: auto; color: var(--ink); font-size: 12px; }
.mini-q { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mini-q li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; }
.mini-q li.is-on { box-shadow: 0 0 0 1.5px var(--royal), 0 12px 24px -16px rgba(37, 71, 233, .6); }
.mini-q span:nth-child(2) { display: grid; min-width: 0; }
.mini-q b { color: var(--ink); font-size: 12.5px; }
.mini-q i { overflow: hidden; color: var(--warn-ink); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mini-q i.bad { color: var(--bad-ink); }
.mini-q em { color: var(--muted); font-size: 11px; font-style: normal; }
.mini-note { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 12.5px; }
.mini-note span { color: var(--tone2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.mini-bi { display: grid; gap: 8px; }
.mini-bar { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: center; gap: 10px; color: var(--ink-2); font-size: 11.5px; }
.mini-bar b { color: var(--ink); font-size: 12px; text-align: right; }
.mini-bar__t { height: 8px; overflow: hidden; border-radius: 4px; background: #E3E8F4; }
.mini-bar__t span { display: block; height: 100%; border-radius: 4px; background: #9AAAE0; transform-origin: 0 50%; }
.mini-bar.is-hit .mini-bar__t span { background: linear-gradient(90deg, var(--royal), #F04438); }
.mini-bar.is-hit b { color: var(--bad-ink); }
.mini-bar--w97 .mini-bar__t span { width: 97%; } .mini-bar--w64 .mini-bar__t span { width: 64%; } .mini-bar--w41 .mini-bar__t span { width: 41%; } .mini-bar--w22 .mini-bar__t span { width: 22%; }
.mini-bl { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-bl th, .mini-bl td { padding: 8px 6px; border-bottom: 1px dashed #D9DFEC; text-align: center; }
.mini-bl thead th { color: var(--tone2); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.mini-bl tbody th { color: var(--ink); font-weight: 600; text-align: left; }
.mini-bl td { color: var(--royal); font-weight: 700; }
.mini-bl tr:last-child th, .mini-bl tr:last-child td { border-bottom: 0; }
.mini-sara { display: grid; gap: 8px; }
.mini-sara__q { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--royal); color: #fff; font-size: 12.5px; }
.mini-sara__a { padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.mini-sara__s { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.mini-wl { display: flex; align-items: center; justify-content: center; gap: 16px; }
.mini-wl__sw { display: grid; gap: 6px; }
.mini-wl__sw i { width: 26px; height: 26px; border-radius: 8px; background: var(--mb); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #E3E8F4; }
.mini-wl__sw i:nth-child(2) { background: var(--mb-tint); }
.mini-wl__sw i:nth-child(3) { background: #C9A227; }
.mini-wl__ph { display: grid; gap: 6px; width: 132px; padding: 14px 12px 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 5px var(--ink), 0 20px 30px -18px rgba(7, 10, 23, .6); color: var(--ink); font-size: 11px; }
.mini-wl__ph b { color: var(--mb); font-size: 12px; }
.mini-wl__ph span { font-size: 13px; font-weight: 700; line-height: 1.2; }
.mini-wl__ph em { margin-top: 6px; padding: 6px; border-radius: 8px; background: var(--mb); color: #fff; font-style: normal; font-weight: 600; text-align: center; }
.mini-au { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mini-au li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed #D9DFEC; color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.mini-au li:last-child { border-bottom: 0; }
.mini-au .mono { color: var(--royal); font-size: 11px; }
.pb-ws > li { padding-bottom: 36px; }

/* the direction switcher (prototype only) */
.optsw { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 16px; border-radius: 999px; background: rgba(10, 14, 31, .92); box-shadow: 0 20px 40px -16px rgba(7, 10, 23, .6); transform: translateX(-50%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.optsw__k { margin-right: 8px; color: rgba(255, 255, 255, .6); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.optsw a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; color: rgba(255, 255, 255, .8); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.optsw a b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 11px; }
.optsw a[aria-current="page"] { background: #fff; color: var(--ink); }
.optsw a[aria-current="page"] b { background: var(--royal); color: #fff; }
.optsw :focus-visible { outline-color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1399px) {
  .hcx__call { display: none; }
}
@media (max-width: 1180px) {
  .tour-ch__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; }
  .tour-ch__stage { margin-top: 8px; }
  .tour-ch__sticky { position: static; }
  .tour-ch__list { margin-top: 36px; }
  .tour-f { min-height: 0; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .tour-ch__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (max-width: 1023px) {
  .tour-ch__in { padding-inline: 0; }
  .tour-ch__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eb" "h" "lede"; margin-bottom: 36px; }
}
@media (max-width: 1100px) {
  .cx__search { display: none; }
  .cx-grid--wf { grid-template-columns: minmax(0, 1fr) 190px; }
  .pb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "wf wf" "rv bi" "rv bl" "sa wl" "au au"; }
}
@media (max-width: 1023px) {
  .tour-nav { top: 84px; }
  .pb-blocks { grid-template-columns: minmax(0, 1fr); }
  .pb-b + .pb-b { border-top: 1px solid var(--line); border-left: 0; }
  .pb-b + .pb-b::before { left: 50%; top: -15px; margin-left: -15px; }
}
@media (max-width: 900px) {
  .cx__body, .cx--rail .cx__body { grid-template-columns: minmax(0, 1fr); }
  .cx__side { display: none; }
  .cx__sara, .cx__crumb { display: none; }
  .cx-grid--id, .cx-grid--wf, .cx-grid--q, .cx-case__g { grid-template-columns: minmax(0, 1fr); }
  .cx-insp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-insp > :last-child { grid-column: 1 / -1; }
  .hcx .cx__win { max-height: 560px; }
}
@media (max-width: 640px) {
  .cx { font-size: 12.5px; }
  .cx__main { padding: 16px 14px 18px; }
  .cx__bar { gap: 10px; height: 46px; padding-inline: 12px; }
  .cx__me { margin-left: auto; }
  .cx-idh { flex-wrap: wrap; }
  .cx-idh__act { width: 100%; margin-left: 0; }
  .cx-idh__n { font-size: 16px; }
  .cx-tabs { gap: 14px; overflow: hidden; }
  .cx-h { flex-wrap: wrap; }
  .cx-toast { margin-left: 0; white-space: normal; }
  .cx-insp { grid-template-columns: minmax(0, 1fr); }
  .cx-kv { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .cx-canvas { overflow-x: auto; scrollbar-width: none; }
  .wf-canvas { min-width: 540px; }
  .hcx { margin-inline: calc(var(--gutter) * -.5); }
  .hcx::after { height: 140px; }
  .tour-nav__in { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .tour-nav a { padding-inline: 10px 12px; font-size: 13px; }
  .tour-f__x { margin-left: 0; }
  .pb-b { padding-inline: 0; }
  .pb-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wf" "rv" "bi" "bl" "sa" "wl" "au"; padding-inline: 0; }
  .optsw { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; padding-left: 12px; transform: none; }
  .optsw__k { display: none; }
}

/* ==========================================================================
   26. Platform page (final): console hero, system map, modules explorer,
   hosted flow, integration and control, workspace, questions.
   ========================================================================== */
.ph--tour .ph__ticks { justify-content: center; }
.jump--center { justify-content: center; margin-top: clamp(28px, 3vw, 40px); }

/* modules: a list on the left, the console on the right */
.pl-mods .section-head { margin-bottom: clamp(40px, 4.4vw, 56px); }
.mx { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); grid-template-rows: repeat(12, auto) 1fr; align-items: start; column-gap: clamp(32px, 4vw, 56px); padding-inline: 32px; }
.mx-it { display: contents; }
.mx-tab, .mx-panel { grid-column: 1; }
.mx-scr { grid-column: 2; grid-row: 1 / span 13; align-self: start; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.992); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .7s; }
.mx-it.is-on .mx-scr { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mx-it:nth-child(1) .mx-tab { grid-row: 1; } .mx-it:nth-child(1) .mx-panel { grid-row: 2; }
.mx-it:nth-child(2) .mx-tab { grid-row: 3; } .mx-it:nth-child(2) .mx-panel { grid-row: 4; }
.mx-it:nth-child(3) .mx-tab { grid-row: 5; } .mx-it:nth-child(3) .mx-panel { grid-row: 6; }
.mx-it:nth-child(4) .mx-tab { grid-row: 7; } .mx-it:nth-child(4) .mx-panel { grid-row: 8; }
.mx-it:nth-child(5) .mx-tab { grid-row: 9; } .mx-it:nth-child(5) .mx-panel { grid-row: 10; }
.mx-it:nth-child(6) .mx-tab { grid-row: 11; } .mx-it:nth-child(6) .mx-panel { grid-row: 12; }
.mx-tab { position: relative; margin: 0; border-top: 1px solid var(--line); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.mx-tab::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--royal), var(--sky)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.mx-it.is-on .mx-tab::before { transform: none; }
.mx-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0; border: 0; background: none; color: var(--muted); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color .3s; }
.mx-btn:hover, .mx-it.is-on .mx-btn { color: var(--ink); }
.mx-btn__ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--canvas-2); color: var(--royal); transition: background-color .35s, color .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.mx-btn__ico .i { width: 17px; height: 17px; }
.mx-btn:hover .mx-btn__ico { transform: translateY(-2px); }
.mx-it.is-on .mx-btn__ico { background: var(--royal); color: #fff; }
.mx-btn__i { margin-left: auto; color: var(--tone2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; }
.mx-it.is-on .mx-btn__i { color: var(--royal); }
.mx-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1); }
.mx-it.is-on .mx-panel, :root.no-js .mx-panel { grid-template-rows: 1fr; }
.mx-panel__in { min-height: 0; overflow: hidden; padding-left: 50px; }
.mx-panel__t { color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.mx-panel__x { margin-top: 6px; color: var(--body); font-size: 15px; line-height: 1.6; }
.mx-pts { display: grid; gap: 7px; margin: 14px 0 0; padding: 0 0 24px; list-style: none; }
.mx-pts li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.mx-pts .i { flex: none; width: 16px; height: 16px; margin-top: 2px; padding: 2px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); stroke-width: 2.6; }
.mx-it:last-child .mx-panel { border-bottom: 1px solid var(--line); }
.mx-it.is-on .mx-panel__in > * { animation: mx-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.mx-it.is-on .mx-panel__x { animation-delay: .05s; }
.mx-it.is-on .mx-pts { animation-delay: .1s; }
@keyframes mx-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mx-it.is-on .mx-panel__in > * { animation: none; } .mx-panel { transition: none; } }
.cx--mx .cx__main { min-height: 540px; }

/* screens for the modules */
.cx-h__i { width: 18px; height: 18px; color: var(--royal); }
.cx-perm { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--canvas); color: var(--muted); font-size: 11.5px; }
.cx-perm .i { width: 13px; height: 13px; }
.cx-toast--bad .i { color: #FF8A80; }
.cx-face { display: block; width: 100%; height: 100%; color: var(--royal); }
.cx-grid--bi { grid-template-columns: 200px minmax(0, 1fr); }
.cx-q-face { display: grid; align-content: start; justify-items: center; text-align: center; }
.cx-q-face__img { position: relative; display: grid; place-items: center; width: 118px; height: 118px; margin: 6px 0 12px; overflow: hidden; border-radius: 22px; background: radial-gradient(circle at 50% 40%, #EEF2FF, #DDE5FB); }
.cx-q-face__img .cx-face { width: 92px; height: 92px; }
.cx-q-face__scan { position: absolute; left: 8px; right: 8px; top: 12%; height: 2px; border-radius: 2px; background: var(--royal); box-shadow: 0 0 12px 2px rgba(37, 71, 233, .45); }
@media (prefers-reduced-motion: no-preference) { .cx-q-face__scan { animation: cx-scan 2.4s ease-in-out infinite alternate; } }
@keyframes cx-scan { to { top: 86%; } }
.cx-q-face__n { color: var(--ink); font-size: 14px; font-weight: 650; }
.cx-q-face__m { color: var(--muted); font-size: 11.5px; }
.cx-q-face__c { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; padding: 8px 10px; border-radius: 9px; background: var(--canvas); color: var(--ink-2); font-size: 11.5px; text-align: left; }
.cx-q-face__c .i { flex: none; width: 13px; height: 13px; color: var(--royal); }
.cx-bis, .cx-bl, .cx-looks, .cx-msgs, .cx-aus, .cx-files { margin: 0; padding: 0; list-style: none; }
.cx-bi { display: grid; grid-template-columns: 30px minmax(0, 1fr) 110px 38px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.cx-bi__f { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--canvas-2); }
.cx-bi__f .cx-face { width: 24px; height: 24px; color: var(--muted); }
.cx-bi__b { display: grid; min-width: 0; }
.cx-bi__id { color: var(--ink); font-size: 11.5px; }
.cx-bi__n { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cx-bi__bar { height: 6px; overflow: hidden; border-radius: 3px; background: #E6EAF3; }
.cx-bi__fill { display: block; height: 100%; border-radius: 3px; background: #9DAEE6; }
.cx-bi__fill--97 { width: 97%; } .cx-bi__fill--64 { width: 64%; } .cx-bi__fill--41 { width: 41%; } .cx-bi__fill--22 { width: 22%; }
.cx-bi__s { color: var(--ink); font-size: 12px; text-align: right; }
.cx-bi--hit { margin-inline: -8px; padding-inline: 8px; border-radius: 9px; background: var(--bad-bg); }
.cx-bi--hit .cx-bi__f { background: #FFE1DE; }
.cx-bi--hit .cx-bi__f .cx-face { color: var(--bad); }
.cx-bi--hit .cx-bi__n, .cx-bi--hit .cx-bi__s { color: var(--bad-ink); }
.cx-bi--hit .cx-bi__fill { background: linear-gradient(90deg, var(--royal), var(--bad)); }
.cx-bl li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.cx-bl__t { color: var(--ink); font-weight: 600; }
.cx-bl__h { padding: 2px 7px; border-radius: 6px; background: var(--canvas-2); color: var(--royal-700); font-size: 10.5px; font-weight: 600; }
.cx-bl__w { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
/* Sara */
.cx-sara { display: grid; gap: 12px; }
.cx-sara__q { justify-self: end; max-width: 72%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--royal); box-shadow: 0 10px 22px -14px rgba(37, 71, 233, .8); color: #fff; font-size: 13px; }
.cx-looks li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.cx-looks .i { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-ink); stroke-width: 2.6; }
.cx-looks .mono { margin-left: auto; color: var(--muted); font-size: 11px; }
.cx-sara__a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 14px 14px 14px 4px; background: #F7F9FE; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.cx-sara__a b { color: var(--ink); }
.cx-sara__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--royal), var(--sky)); color: #fff; }
.cx-sara__av .i { width: 15px; height: 15px; }
.cx-sara__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cx-sara__chip { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 12px; font-weight: 600; }
.cx-sara__rep { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 8px 8px 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 24px -18px rgba(15, 31, 122, .5); font-size: 12px; }
.cx-sara__rep > .i { width: 18px; height: 18px; color: var(--royal); }
.cx-sara__rep > span { display: grid; color: var(--muted); font-size: 11px; }
.cx-sara__rep b { color: var(--ink); font-size: 12px; }
.cx-sara__rep .cx-btn--xs { margin-left: 4px; }
/* White label */
.cx-grid--wl { grid-template-columns: minmax(0, 1fr) 236px; }
.cx-logo { display: inline-flex; align-items: center; gap: 7px; font-family: Georgia, "Times New Roman", serif; }
.cx-logo i, .cx-ph__brand i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--mb); color: #fff; font-family: var(--font); font-size: 10px; font-style: normal; font-weight: 700; }
.cx-sws { display: flex; gap: 10px; }
.cx-sw { display: inline-flex; align-items: center; gap: 5px; }
.cx-sw .mono { color: var(--muted); font-size: 10.5px; }
.cx-sw__c { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .1); }
.cx-sw__c--a { background: var(--mb); } .cx-sw__c--b { background: var(--mb-tint); } .cx-sw__c--c { background: #C9A227; }
.cx-msgs li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.cx-msgs li > span:first-child { color: var(--muted); }
.cx-msg { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.cx-card--row { display: flex; align-items: center; justify-content: space-between; padding-block: 11px; font-size: 12.5px; }
.cx-card--row > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.cx-card--row .i { width: 15px; height: 15px; color: var(--royal); }
.cx-tgl { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--royal); }
.cx-tgl::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.cx-prev { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 14px 12px 16px; border-radius: 14px; background: radial-gradient(90% 60% at 50% 30%, #E7F2EF, #F4F7FB); box-shadow: inset 0 0 0 1px var(--line); }
.cx-prev__k { justify-self: start; color: var(--tone2); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.cx-ph { position: relative; display: flex; flex-direction: column; gap: 8px; width: 176px; padding: 30px 14px 16px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 6px var(--ink), 0 24px 40px -20px rgba(7, 10, 23, .6); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.cx-ph__notch { position: absolute; top: 8px; left: 50%; width: 52px; height: 14px; margin-left: -26px; border-radius: 8px; background: var(--ink); }
.cx-ph__brand { display: inline-flex; align-items: center; gap: 6px; color: var(--mb); font-size: 12px; font-weight: 700; }
.cx-ph__art { display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--mb-tint); color: var(--mb); }
.cx-ph__art .i { width: 28px; height: 28px; }
.cx-ph__t { font-size: 15px; font-weight: 700; line-height: 1.2; }
.cx-ph__x { color: #4E5B63; font-size: 10.5px; line-height: 1.45; }
.cx-ph__btn { margin-top: 4px; padding: 8px; border-radius: 10px; background: var(--mb); color: #fff; font-family: var(--font); font-size: 11.5px; font-weight: 600; text-align: center; }
.cx-ph__rec { display: flex; align-items: center; gap: 5px; color: #6A737A; font-family: var(--font); font-size: 9px; }
.cx-ph__rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.cx-prev__qr { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 11px; line-height: 1.4; }
.cx-prev__qr .i { flex: none; width: 13px; height: 13px; color: var(--mb); }
/* Evidence & audit */
.cx-grid--au { grid-template-columns: minmax(0, 1fr) 220px; }
.cx-au { display: grid; grid-template-columns: 40px 104px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.cx-au__t { color: var(--muted); font-size: 10.5px; }
.cx-au__who { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.cx-au__who .avatar { width: 22px; height: 22px; font-size: 9px; }
.cx-au__sys { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--canvas); color: var(--muted); }
.cx-au__sys .i { width: 12px; height: 12px; }
.cx-au__a { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.cx-au__o { grid-column: 3; color: var(--muted); font-size: 10px; }
.cx-au--ok .cx-au__a { color: var(--ok-ink); font-weight: 600; }
.cx-au--warn .cx-au__a { color: var(--warn-ink); }
.cx-vid__frame { position: relative; display: grid; place-items: center; height: 112px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #1C2550, #070A17); }
.cx-vid__frame .cx-face { width: 86px; height: 86px; color: var(--cyan); opacity: .8; }
.cx-vid__play { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); }
.cx-vid__play .i { width: 15px; height: 15px; }
.cx-vid__t { position: absolute; right: 8px; bottom: 7px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; }
.cx-vid__n { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-2); font-size: 11.5px; }
.cx-vid__n .i { width: 13px; height: 13px; color: var(--ok-ink); stroke-width: 2.6; }
.cx-files li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); color: var(--ink); font-size: 12px; }
.cx-files .i { width: 14px; height: 14px; color: var(--royal); }

/* hosted flow: four phones */
.hf > li { display: flex; flex-direction: column; padding: 36px 28px 36px; transition: background-color .5s var(--ease); }
.hf > li:hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 75%); }
.hf-ph { position: relative; width: 100%; max-width: 206px; margin: 0 auto 28px; padding: 7px; aspect-ratio: 9 / 18.4; border-radius: 34px; background: var(--ink); box-shadow: 0 30px 50px -28px rgba(7, 10, 23, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.hf > li:hover .hf-ph { transform: translateY(-6px); }
.hf-notch { position: absolute; top: 14px; left: 50%; z-index: 2; width: 58px; height: 16px; margin-left: -29px; border-radius: 9px; background: var(--ink); }
.hf-scr { display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: 100%; padding: 40px 14px 16px; overflow: hidden; border-radius: 28px; background: #fff; color: var(--ink); font-size: 11px; line-height: 1.4; text-align: left; }
.hf-brand { display: inline-flex; align-items: center; gap: 6px; color: var(--mb); font-family: Georgia, "Times New Roman", serif; font-size: 12px; font-weight: 700; }
.hf-brand i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--mb); color: #fff; font-family: var(--font); font-size: 10px; font-style: normal; }
.hf-lang { position: absolute; top: 44px; right: 20px; padding: 2px 6px; border-radius: 6px; background: #F1F3F7; color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.hf-art { display: grid; place-items: center; height: 78px; margin-top: 6px; border-radius: 14px; background: var(--mb-tint); color: var(--mb); }
.hf-art .i { width: 32px; height: 32px; }
.hf-scr b { font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.2; }
.hf-x { color: #4E5B63; font-size: 10.5px; }
.hf-btn { margin-top: auto; padding: 9px; border-radius: 11px; background: var(--mb); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.hf-btn--ghost { background: #fff; box-shadow: inset 0 0 0 1px #C7D7D2; color: var(--mb); }
.hf-rec { display: flex; align-items: center; gap: 5px; color: #6A737A; font-size: 8.5px; }
.hf-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.hf-scr--cam { background: #0B0F1E; color: #fff; }
.hf-top { color: rgba(255, 255, 255, .9); font-size: 11.5px; font-weight: 600; text-align: center; }
.hf-frame { position: relative; display: grid; place-items: center; height: 118px; margin-top: 18px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(100, 244, 248, .7); }
.hf-card { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: repeat(3, 8px); gap: 5px 8px; width: 78%; padding: 10px; border-radius: 8px; background: linear-gradient(135deg, #E8ECF6, #C9D3EA); }
.hf-card i { grid-row: 1 / 4; border-radius: 5px; background: #9AA8C9; }
.hf-card b { border-radius: 3px; background: #A8B3CD; }
.hf-card b:nth-child(3) { width: 70%; } .hf-card b:nth-child(4) { width: 50%; }
.hf-scan { position: absolute; left: 6px; right: 6px; top: 10%; height: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 12px 2px rgba(100, 244, 248, .6); }
.hf-tip { margin-top: 12px; color: var(--cyan); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.hf-no { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: auto; color: rgba(255, 255, 255, .45); font-size: 10px; text-decoration: line-through; }
.hf-no .i { width: 12px; height: 12px; color: #FF8A80; }
.hf-oval { position: relative; display: grid; place-items: center; width: 116px; height: 146px; margin: 16px auto 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cyan), 0 0 0 6px rgba(100, 244, 248, .1); }
.hf-mesh { width: 96px; height: 96px; color: var(--cyan); }
.hf-rec--dark { justify-content: center; margin-top: auto; color: rgba(255, 255, 255, .6); }
.hf-ok { display: grid; place-items: center; width: 56px; height: 56px; margin: 20px auto 6px; border-radius: 50%; background: var(--mb-tint); color: var(--mb); }
.hf-ok .i { width: 26px; height: 26px; stroke-width: 2.4; }
.hf-scr--done { text-align: center; }
.hf-scr--done .hf-brand { align-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .hf-scan { animation: cx-scan 2.2s ease-in-out infinite alternate; }
  .hf-oval { animation: hf-pulse 2.4s ease-in-out infinite; }
  .hf.is-in .hf-ok { animation: hf-pop .8s cubic-bezier(.3, 1.6, .5, 1) .6s both; }
}
@keyframes hf-pulse { 50% { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 0 12px rgba(100, 244, 248, .04); } }
@keyframes hf-pop { from { transform: scale(.4); opacity: 0; } }
.hf-st__n { display: flex; align-items: center; gap: 8px; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.hf-st__n .mono { color: var(--royal); }
.hf-st__t { margin-top: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.hf-st__x { margin-top: 6px; color: var(--body); font-size: 15px; line-height: 1.55; }

/* integration and control */
.ig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.ig__col { position: relative; display: flex; flex-direction: column; padding: 32px; }
.ig__col + .ig__col { border-left: 1px solid var(--line); }
.ig__col + .ig__col::before, .ig__col + .ig__col::after { content: ""; position: absolute; left: -5px; top: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.ig__col + .ig__col::after { top: auto; bottom: -5px; }
.ig__k { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ig__k .i { width: 22px; height: 22px; color: var(--royal); }
.ig__code { margin: 20px 0 0; padding: 16px 18px; overflow-x: auto; border-radius: 14px; background: var(--night); box-shadow: 0 24px 50px -34px rgba(7, 10, 23, .6); color: #C9D3F5; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; }
.ig__role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, #F6F8FD, #EEF2FB); box-shadow: inset 0 0 0 1px #E6EAF3; }
.ig__role-h { width: 100%; margin-bottom: 2px; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.ig__sw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.ig__sw::before { content: ""; width: 24px; height: 14px; border-radius: 7px; background: var(--royal) radial-gradient(circle at 17px 7px, #fff 4.5px, transparent 5px); }
.ig__sw--off { color: var(--muted); text-decoration: line-through; }
.ig__sw--off::before { background: #D5DBE8 radial-gradient(circle at 7px 7px, #fff 4.5px, transparent 5px); }
.ig__list { display: grid; margin: 22px 0 0; padding: 0; list-style: none; }
.ig__list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.ig__list li > span:last-child { display: grid; gap: 2px; color: var(--body); font-size: 14.5px; line-height: 1.5; }
.ig__list b { color: var(--ink); font-size: 15.5px; font-weight: 600; }
.ig__ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); }
.ig__ico .i { width: 16px; height: 16px; }
.ig__col .text-link { align-self: flex-start; margin-top: auto; padding-top: 0; }
.ig__list + .text-link { margin-top: 18px; }

/* workspace bands */
.pl-bands > .ip-band:first-child { border-top: 0; }
.pl-sectors { align-items: flex-start; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: background-color .3s, color .3s, box-shadow .3s; }
.pl-chips a .i { width: 16px; height: 16px; color: var(--royal); transition: color .3s; }
.pl-chips a:hover { background: var(--ink); box-shadow: none; color: #fff; }
.pl-chips a:hover .i { color: var(--cyan); }
.faq__a a { color: var(--royal); font-weight: 600; }

@media (max-width: 1100px) {
  .cx-grid--wl { grid-template-columns: minmax(0, 1fr) 210px; }
  .cx-bi { grid-template-columns: 30px minmax(0, 1fr) 70px 38px; }
}
@media (max-width: 1023px) {
  .mx { display: block; padding-inline: 0; }
  .mx-it { display: block; }
  .mx-scr { transform: none; transition: none; }
  .mx-it:not(.is-on) .mx-scr { display: none; }
  .mx-it.is-on .mx-scr { padding: 0 0 28px; }
  .mx-it:last-child.is-on .mx-scr { padding-bottom: 0; }
  .ig { grid-template-columns: minmax(0, 1fr); }
  .ig__col + .ig__col { border-top: 1px solid var(--line); border-left: 0; }
  .ig__col + .ig__col::after { display: none; }
}
@media (max-width: 900px) {
  .cx-grid--bi, .cx-grid--wl, .cx-grid--au { grid-template-columns: minmax(0, 1fr); }
  .cx-q-face { grid-template-columns: 90px minmax(0, 1fr); justify-items: start; column-gap: 14px; text-align: left; }
  .cx-q-face .cx-card__h { grid-column: 1 / -1; }
  .cx-q-face__img { grid-row: span 3; width: 90px; height: 90px; margin: 0; }
  .cx-q-face__c { grid-column: 1 / -1; }
  .cx--mx .cx__main { min-height: 0; }
}
@media (max-width: 640px) {
  .mx-panel__in { padding-left: 0; }
  .cx-bi { grid-template-columns: 30px minmax(0, 1fr) 38px; }
  .cx-bi__bar { display: none; }
  .cx-au { grid-template-columns: 40px minmax(0, 1fr); }
  .cx-au__a, .cx-au__o { grid-column: 2; }
  .cx-sara__q { max-width: 90%; }
  .cx-sara__rep { margin-left: 0; }
  .hf > li { padding-inline: 20px; }
  .ig__col { padding-inline: 0; }
  .pl-sectors { flex-direction: column; }
}

/* the module screens: the builder's inspector sits under the canvas */
@media (min-width: 901px) {
  .cx--mx .cx-grid--wf { grid-template-columns: minmax(0, 1fr); }
  .cx--mx .cx-insp { grid-template-columns: 1.15fr .85fr 1fr; }
}
.cx-canvas { align-self: start; }

/* fuller phone screens */
.hf-need { display: grid; gap: 6px; margin-top: 4px; }
.hf-need span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: #F4F7F6; color: #2F3B40; font-size: 10.5px; }
.hf-need .i { width: 14px; height: 14px; color: var(--mb); }
.hf-guide { margin-top: 8px; color: rgba(255, 255, 255, .6); font-size: 10px; line-height: 1.45; text-align: center; }
.hf-shutter { align-self: center; width: 40px; height: 40px; margin-top: auto; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #0B0F1E, inset 0 0 0 20px #fff; }
.hf-shutter + .hf-no { margin-top: 10px; }
.hf-sum { display: grid; gap: 5px; margin-top: 10px; text-align: left; }
.hf-sum span { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: 8px; background: #F4F7F6; color: #2F3B40; font-size: 10.5px; }
.hf-sum .i { width: 13px; height: 13px; color: var(--mb); stroke-width: 2.6; }

/* integration columns end on their links */
.ig__list { flex-grow: 1; align-content: start; margin-bottom: 22px; }
.ig__list + .text-link { margin-top: 0; }

/* the checks strip under the building blocks */
.pl-checks { flex-direction: column; align-items: flex-start; gap: 16px; }

/* questions: the heading held on the left, the answers on the right */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 40px clamp(40px, 6vw, 96px); }
.faq-split__head { position: sticky; top: 120px; padding-left: 32px; }
.faq-split__head .h2 { max-width: 9em; }
.faq-split__head .lede { margin-top: 20px; }
.faq-split__head .text-link { margin-top: 20px; }
.faq-split .faq { margin-top: 0; }
.faq-split .faq__it > summary { padding-inline: 0 4px; }
.faq-split .faq__a p { padding-inline: 0 56px; }
@media (max-width: 1023px) {
  .faq-split { grid-template-columns: minmax(0, 1fr); }
  .faq-split__head { position: static; padding-left: 0; }
}
@media (max-width: 640px) {
  .pb-ws > li, .pb-ws > :nth-child(n) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; }
  .pb-ws .ip-cell__ico { grid-row: span 2; width: 40px; height: 40px; }
  .pb-ws .ip-cell__t { margin-top: 0; font-size: 17px; }
  .pb-ws .ip-cell__x { margin-top: 2px; font-size: 14.5px; }
}

/* ==========================================================================
   27. Platform, round 2: blocks in motion, the nine checks, modules on the
   dark panel, integration and control with live stages, sectors.
   ========================================================================== */

/* ---------- three building blocks ---------- */
.pb-blocks { isolation: isolate; }
.pb-b { z-index: 1; }
.pb-b + .pb-b::before { display: none; }
.pb-b__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(37, 71, 233, .07), rgba(37, 71, 233, 0) 70%), linear-gradient(180deg, #F9FAFF 0%, rgba(249, 250, 255, 0) 70%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.pb-b:hover .pb-b__glow { opacity: 1; }
.pb-b__k { display: flex; align-items: center; gap: 10px; }
.pb-b__k .mono { color: var(--royal); }
.pb-b__art { position: relative; z-index: 1; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; background: linear-gradient(180deg, #F6F8FD, #EEF2FB); transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .7s var(--ease); }
.pb-b__art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#D3DAEA 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%); opacity: .7; transition: opacity .5s; }
.pb-b__art > * { position: relative; }
.pb-b:hover .pb-b__art { box-shadow: inset 0 0 0 1px #D5DDF2, 0 26px 44px -30px rgba(15, 31, 122, .5); transform: translateY(-4px); }
.pb-b:hover .pb-b__art::before { opacity: 1; }
.pb-b__r { transition: background-color .35s, box-shadow .35s; }
.pb-b:hover .pb-b__r { background: var(--royal); box-shadow: 0 10px 20px -10px rgba(37, 71, 233, .8); }
/* the wire that runs between the three drawings */
.pb-wire { position: absolute; left: 64px; right: 64px; top: 159px; z-index: 0; height: 1px; background: repeating-linear-gradient(90deg, #C3CCE2 0 4px, transparent 4px 9px); pointer-events: none; }
.pb-wire__dot { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14), 0 0 14px 2px rgba(37, 71, 233, .5); opacity: 0; }
.pb-join { position: absolute; left: -23px; top: 136px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(15, 31, 122, .45); color: var(--ink); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; transition: box-shadow .4s, color .4s; }
.pb-blocks:hover .pb-join { box-shadow: 0 0 0 1.5px var(--royal), 0 12px 22px -12px rgba(37, 71, 233, .6); color: var(--royal); }
/* identity: a record with its history behind it */
.pb-deck { position: absolute; inset: 0; display: grid; place-items: center; }
.pb-deck span { position: absolute; width: 228px; height: 68px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.pb-deck span:nth-child(1) { opacity: .7; transform: translateY(-2px) scale(.94); }
.pb-deck span:nth-child(2) { opacity: .45; transform: translateY(6px) scale(.88); }
.pb-b--id:hover .pb-deck span:nth-child(1) { opacity: .9; transform: translate(-26px, -6px) rotate(-7deg) scale(.94); }
.pb-b--id:hover .pb-deck span:nth-child(2) { opacity: .7; transform: translate(26px, -6px) rotate(7deg) scale(.94); }
.pb-idc { display: flex; align-items: center; gap: 12px; margin-top: -30px; padding: 14px 18px 14px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 20px 36px -22px rgba(15, 31, 122, .45); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pb-b--id:hover .pb-idc { transform: translateY(-6px); }
.pb-idc__av { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--royal)); color: #fff; font-size: 13px; font-weight: 700; }
.pb-idc__av i { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(37, 71, 233, .5); opacity: 0; }
.pb-idc__b { display: grid; color: var(--muted); font-size: 12px; }
.pb-idc__b b { color: var(--ink); font-size: 14px; }
.pb-facts { position: absolute; left: 8px; right: 8px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pb-facts span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; color: var(--ink-2); font-size: 10.5px; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.pb-facts .i { width: 12px; height: 12px; color: var(--royal); }
.pb-b--id:hover .pb-facts span { opacity: 1; transform: none; }
.pb-b--id:hover .pb-facts span:nth-child(2) { transition-delay: .06s; }
.pb-b--id:hover .pb-facts span:nth-child(3) { transition-delay: .12s; }
@media (hover: none) { .pb-facts span { opacity: 1; transform: none; } .pb-idc { margin-top: -34px; } }
/* sessions: three rows, each tied to its workflow */
.pb-rows { display: grid; gap: 7px; width: 86%; transition: gap .5s cubic-bezier(.2, .8, .2, 1); }
.pb-b--ss:hover .pb-rows { gap: 10px; }
.pb-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); color: var(--ink); font-size: 12.5px; transition: box-shadow .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.pb-row b { order: 2; margin-left: auto; font-weight: 600; white-space: nowrap; }
.pb-row__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ok); transition: background-color .3s; }
.pb-row--warn .pb-row__dot { box-shadow: inset 0 0 0 2px var(--warn); }
.pb-row__id, .pb-row__wf { overflow: hidden; white-space: nowrap; transition: max-width .55s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.pb-row__id { max-width: 120px; color: var(--muted); font-size: 10.5px; }
.pb-row__wf { display: inline-flex; order: 1; align-items: center; gap: 5px; max-width: 0; margin-left: -10px; color: var(--royal-700); font-size: 11px; font-weight: 600; opacity: 0; }
.pb-row__wf .i { flex: none; width: 12px; height: 12px; }
.pb-b--ss:hover .pb-row__id { max-width: 0; opacity: 0; }
.pb-b--ss:hover .pb-row__wf { max-width: 160px; opacity: 1; }
.pb-b--ss:hover .pb-row { box-shadow: 0 0 0 1px #D5DDF2, 0 14px 24px -16px rgba(37, 71, 233, .55); }
.pb-b--ss:hover .pb-row:nth-child(1) { transform: translateX(-4px); } .pb-b--ss:hover .pb-row:nth-child(3) { transform: translateX(4px); }
.pb-b--ss:hover .pb-row--ok .pb-row__dot { background: var(--ok); } .pb-b--ss:hover .pb-row--warn .pb-row__dot { background: var(--warn); }
/* workflows: the chain lights check by check */
.pb-chain { position: relative; display: flex; align-items: center; gap: 8px; }
.pb-chain::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: #B8C4E6; }
.pb-node { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #DCE3F3, 0 6px 14px -10px rgba(15, 31, 122, .5); color: var(--royal); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.pb-node .i { width: 16px; height: 16px; }
.pb-node--d { background: var(--ink); box-shadow: none; color: var(--cyan); }
.pb-b--wf:hover .pb-node { transform: translateY(-5px); }
.pb-b--wf:hover .pb-node:nth-child(2) { transition-delay: .04s; } .pb-b--wf:hover .pb-node:nth-child(3) { transition-delay: .08s; } .pb-b--wf:hover .pb-node:nth-child(4) { transition-delay: .12s; } .pb-b--wf:hover .pb-node:nth-child(5) { transition-delay: .16s; } .pb-b--wf:hover .pb-node:nth-child(6) { transition-delay: .2s; }
.pb-wfname { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; color: var(--ink); font-size: 11.5px; font-weight: 600; transition: box-shadow .4s, color .4s; }
.pb-wfname .i { width: 12px; height: 12px; color: var(--royal); }
.pb-wfname span { color: var(--muted); font-weight: 500; }
.pb-b--wf:hover .pb-wfname { box-shadow: 0 0 0 1px rgba(37, 71, 233, .35); }
/* the loop: identity, then its sessions, then the workflow a session ran on */
@media (prefers-reduced-motion: no-preference) {
  .pb-blocks.is-live .pb-wire__dot { animation: pb-dot 6s linear infinite; }
  .pb-blocks.is-live .pb-idc__av i { animation: pb-ring 6s ease-out infinite; }
  .pb-blocks.is-live .pb-b--ss .pb-join { animation: pb-join1 6s linear infinite; }
  .pb-blocks.is-live .pb-b--wf .pb-join { animation: pb-join2 6s linear infinite; }
  .pb-blocks.is-live .pb-row:nth-child(1) { animation: pb-row1 6s ease infinite; }
  .pb-blocks.is-live .pb-row:nth-child(2) { animation: pb-row2 6s ease infinite; }
  .pb-blocks.is-live .pb-row:nth-child(3) { animation: pb-row3 6s ease infinite; }
  .pb-blocks.is-live .pb-node:nth-child(1) { animation: pb-n1 6s ease infinite; }
  .pb-blocks.is-live .pb-node:nth-child(2) { animation: pb-n2 6s ease infinite; }
  .pb-blocks.is-live .pb-node:nth-child(3) { animation: pb-n3 6s ease infinite; }
  .pb-blocks.is-live .pb-node:nth-child(4) { animation: pb-n4 6s ease infinite; }
  .pb-blocks.is-live .pb-node:nth-child(5) { animation: pb-n5 6s ease infinite; }
  .pb-blocks.is-live .pb-node--d { animation: pb-nd 6s ease infinite; }
}
@keyframes pb-dot { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 96%, 100% { left: 100%; opacity: 0; } }
@keyframes pb-ring { 0% { opacity: .9; transform: scale(.85); } 16%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes pb-join1 { 0%, 31% { box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(15, 31, 122, .45); color: var(--ink); transform: none; } 34% { box-shadow: 0 0 0 2px var(--royal), 0 0 0 8px rgba(37, 71, 233, .14), 0 12px 22px -12px rgba(37, 71, 233, .6); color: var(--royal); transform: scale(1.08); } 40%, 100% { box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(15, 31, 122, .45); color: var(--ink); transform: none; } }
@keyframes pb-join2 { 0%, 61% { box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(15, 31, 122, .45); color: var(--ink); transform: none; } 64% { box-shadow: 0 0 0 2px var(--royal), 0 0 0 8px rgba(37, 71, 233, .14), 0 12px 22px -12px rgba(37, 71, 233, .6); color: var(--royal); transform: scale(1.08); } 70%, 100% { box-shadow: 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(15, 31, 122, .45); color: var(--ink); transform: none; } }
@keyframes pb-row1 { 0%, 36% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } 39%, 44% { box-shadow: 0 0 0 1.5px var(--royal), 0 16px 26px -14px rgba(37, 71, 233, .6); transform: translateX(3px); } 50%, 100% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } }
@keyframes pb-row2 { 0%, 43% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } 46%, 51% { box-shadow: 0 0 0 1.5px var(--royal), 0 16px 26px -14px rgba(37, 71, 233, .6); transform: translateX(3px); } 57%, 100% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } }
@keyframes pb-row3 { 0%, 50% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } 53%, 58% { box-shadow: 0 0 0 1.5px var(--royal), 0 16px 26px -14px rgba(37, 71, 233, .6); transform: translateX(3px); } 64%, 100% { box-shadow: 0 0 0 1px #E3E8F4, 0 10px 20px -16px rgba(15, 31, 122, .5); transform: none; } }
@keyframes pb-n1 { 0%, 66% { background: #fff; color: var(--royal); transform: none; } 68%, 70% { background: var(--royal); color: #fff; transform: translateY(-4px); } 74%, 93% { background: #E8EDFF; color: var(--royal); transform: none; } 97%, 100% { background: #fff; color: var(--royal); } }
@keyframes pb-n2 { 0%, 70% { background: #fff; color: var(--royal); transform: none; } 72%, 74% { background: var(--royal); color: #fff; transform: translateY(-4px); } 78%, 93% { background: #E8EDFF; color: var(--royal); transform: none; } 97%, 100% { background: #fff; color: var(--royal); } }
@keyframes pb-n3 { 0%, 74% { background: #fff; color: var(--royal); transform: none; } 76%, 78% { background: var(--royal); color: #fff; transform: translateY(-4px); } 82%, 93% { background: #E8EDFF; color: var(--royal); transform: none; } 97%, 100% { background: #fff; color: var(--royal); } }
@keyframes pb-n4 { 0%, 78% { background: #fff; color: var(--royal); transform: none; } 80%, 82% { background: var(--royal); color: #fff; transform: translateY(-4px); } 86%, 93% { background: #E8EDFF; color: var(--royal); transform: none; } 97%, 100% { background: #fff; color: var(--royal); } }
@keyframes pb-n5 { 0%, 82% { background: #fff; color: var(--royal); transform: none; } 84%, 86% { background: var(--royal); color: #fff; transform: translateY(-4px); } 90%, 93% { background: #E8EDFF; color: var(--royal); transform: none; } 97%, 100% { background: #fff; color: var(--royal); } }
@keyframes pb-nd { 0%, 86% { box-shadow: none; transform: none; } 89% { box-shadow: 0 0 0 4px rgba(100, 244, 248, .35), 0 0 18px 2px rgba(100, 244, 248, .5); transform: translateY(-3px) scale(1.06); } 96%, 100% { box-shadow: none; transform: none; } }

/* ---------- the nine checks, centred ---------- */
.pl-checks { display: flex; flex-direction: column; align-items: center; padding: clamp(52px, 5vw, 72px) 32px clamp(56px, 5.5vw, 76px); border-bottom: 1px solid var(--line); text-align: center; }
.pl-checks__k { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.025em; }
.pl-checks__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4); box-shadow: 0 8px 18px -8px rgba(37, 71, 233, .8); color: #fff; }
.pl-checks__ico .i { width: 18px; height: 18px; }
.pl-checks__t { max-width: 52ch; text-wrap: balance; margin-top: 10px; color: var(--body); font-size: 16px; line-height: 1.6; }
.pl-cks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 860px; margin: 32px auto 0; padding: 0; list-style: none; }
.pl-ck { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 7px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(10, 14, 31, .04); color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s var(--ease); }
.pl-ck__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pl-ck__i .i { width: 17px; height: 17px; }
.pl-ck__p { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; transition: color .3s; }
.pl-ck:hover, .pl-ck:focus-visible { box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .4), 0 16px 28px -18px rgba(37, 71, 233, .65); transform: translateY(-3px); }
.pl-ck:hover .pl-ck__i, .pl-ck:focus-visible .pl-ck__i { background: var(--royal); color: #fff; transform: rotate(-8deg); }
.pl-ck:hover .pl-ck__p, .pl-ck:focus-visible .pl-ck__p { color: var(--royal); }
.pl-ck__tip { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; width: 230px; padding: 10px 12px; border-radius: 12px; background: var(--ink); box-shadow: 0 16px 30px -14px rgba(7, 10, 23, .6); color: rgba(255, 255, 255, .9); font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; opacity: 0; transform: translate(-50%, 6px); transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.pl-ck__tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.pl-ck:hover .pl-ck__tip, .pl-ck:focus-visible .pl-ck__tip { opacity: 1; transform: translate(-50%, 0); }
.pl-checks .text-link { margin-top: 28px; }
:root:not(.no-js) .pl-checks[data-reveal] .pl-cks > li { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1); }
:root:not(.no-js) .pl-checks[data-reveal].is-in .pl-cks > li { opacity: 1; transform: none; }
.pl-checks.is-in .pl-cks > li:nth-child(2) { transition-delay: 0.04s; }
.pl-checks.is-in .pl-cks > li:nth-child(3) { transition-delay: 0.08s; }
.pl-checks.is-in .pl-cks > li:nth-child(4) { transition-delay: 0.12s; }
.pl-checks.is-in .pl-cks > li:nth-child(5) { transition-delay: 0.16s; }
.pl-checks.is-in .pl-cks > li:nth-child(6) { transition-delay: 0.20s; }
.pl-checks.is-in .pl-cks > li:nth-child(7) { transition-delay: 0.24s; }
.pl-checks.is-in .pl-cks > li:nth-child(8) { transition-delay: 0.28s; }
.pl-checks.is-in .pl-cks > li:nth-child(9) { transition-delay: 0.32s; }

/* ---------- modules on the dark panel ---------- */
.pl-mods { padding-block: clamp(96px, 10vw, 140px); }
.pl-mods__grid { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 64px 64px; background-position: center -1px; -webkit-mask-image: radial-gradient(70% 60% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 70% 40%, #000, transparent 75%); }
.pl-mods .section-head { margin-bottom: clamp(44px, 5vw, 64px); padding-inline: 32px; }
.pl-mods .ip-head__side .text-link { border-color: rgba(100, 244, 248, .35); color: var(--cyan); }
.mx-scr { position: relative; isolation: isolate; align-self: center; }
.mx--dark .mx-scr::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 71, 233, .55), rgba(37, 71, 233, 0) 72%); filter: blur(24px); pointer-events: none; }
.mx--dark .mx-scr::after { content: ""; position: absolute; top: -40px; right: -30px; z-index: -1; width: 260px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(100, 244, 248, .22), rgba(100, 244, 248, 0) 72%); filter: blur(20px); pointer-events: none; }
.mx--dark .cx__win { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 60px 110px -40px rgba(0, 0, 0, .8); }
.mx--dark .mx-tab { border-top-color: rgba(255, 255, 255, .1); }
.mx--dark .mx-tab::before { background: linear-gradient(90deg, var(--cyan), #5B82FF); }
.mx--dark .mx-btn { color: rgba(255, 255, 255, .55); }
.mx--dark .mx-btn:hover, .mx--dark .mx-it.is-on .mx-btn { color: #fff; }
.mx--dark .mx-btn__ico { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--cyan); }
.mx--dark .mx-it.is-on .mx-btn__ico { background: linear-gradient(155deg, #9FFBFF, #64F4F8 45%, #1A9BF4); box-shadow: 0 8px 22px -8px rgba(100, 244, 248, .6); color: var(--ink); }
.mx--dark .mx-btn__i { color: rgba(255, 255, 255, .35); }
.mx--dark .mx-it.is-on .mx-btn__i { color: var(--cyan); }
.mx--dark .mx-panel__t { color: #fff; }
.mx--dark .mx-panel__x { color: rgba(255, 255, 255, .7); }
.mx--dark .mx-pts li { color: rgba(255, 255, 255, .84); }
.mx--dark .mx-pts .i { background: rgba(100, 244, 248, .12); color: var(--cyan); }
.mx--dark .mx-it:last-child .mx-panel { border-bottom-color: rgba(255, 255, 255, .1); }
/* the tour: the active module's rule fills while it waits */
.mx.is-auto .mx-it.is-on .mx-tab::before { transform: scaleX(0); transition: none; animation: mx-prog 7s linear forwards; }
.mx.is-auto.is-held .mx-it.is-on .mx-tab::before { animation-play-state: paused; }
@keyframes mx-prog { to { transform: none; } }


/* ---------- integration and control ---------- */
.ig__col { padding: 36px 32px 34px; transition: background-color .5s var(--ease); }
.ig__col:hover { background: linear-gradient(180deg, #F8FAFF 0%, rgba(248, 250, 255, 0) 60%); }
.ig__k { gap: 12px; }
.ig__ki { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(155deg, #5B82FF, #2547E9 55%, #1A9BF4); box-shadow: 0 8px 18px -8px rgba(37, 71, 233, .8); color: #fff; }
.ig__ki .i { width: 18px; height: 18px; color: #fff; }
.ig-term { position: relative; isolation: isolate; min-height: 262px; margin: 22px 0 0; overflow: hidden; border-radius: 18px; background: var(--night); box-shadow: 0 34px 60px -38px rgba(7, 10, 23, .75); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.ig-term::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 100% 0%, rgba(37, 71, 233, .5), rgba(37, 71, 233, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(100, 244, 248, .12), rgba(100, 244, 248, 0) 70%); }
.ig__col:hover .ig-term, .ig__col:hover .igr { transform: translateY(-4px); }
.ig-term__bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ig-term__h { min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .55); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ig-term__live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: rgba(255, 255, 255, .7); font-size: 11px; }
.ig-term__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); }
.ig-term__lines { margin: 0; padding: 14px 16px 16px; font-size: 12px; line-height: 1.5; list-style: none; }
.igt { display: grid; grid-template-columns: 14px 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; color: #C9D3F5; }
.igt__a { color: var(--tone2); }
.igt__m { color: #fff; font-weight: 600; }
.igt__p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igt__s { padding: 1px 7px; border-radius: 6px; background: rgba(18, 183, 106, .16); color: #75E0A7; font-size: 11px; font-weight: 600; }
.igt__s:empty { display: none; }
.igt--in .igt__a, .igt--in .igt__m, .igt--in .igt__p { color: var(--cyan); }
.igt--in .igt__s { background: rgba(100, 244, 248, .14); color: var(--cyan); }
.igt--note { color: rgba(255, 255, 255, .45); }
.igt--ok, .igt--ok .igt__a { color: #75E0A7; }
.ig-fs { display: grid; flex-grow: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ig-fs li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px 16px 0; }
.ig-fs li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.ig-fs li:nth-child(n+3) { border-top: 1px solid var(--line); }
.ig-fs__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.ig-fs__i .i { width: 16px; height: 16px; }
.ig-fs li:hover .ig-fs__i { background: var(--royal); color: #fff; transform: translateY(-2px); }
.ig-fs__b { display: grid; gap: 2px; color: var(--body); font-size: 13.5px; line-height: 1.45; }
.ig-fs__b b { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.ig__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.ig__cta .text-link { margin-top: 0; }
@keyframes igt1 { 0%, 4% { opacity: 0; transform: translateY(4px); } 7%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes igt2 { 0%, 14% { opacity: 0; transform: translateY(4px); } 17%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes igt3 { 0%, 26% { opacity: 0; transform: translateY(4px); } 29%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes igt4 { 0%, 38% { opacity: 0; transform: translateY(4px); } 41%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes igt5 { 0%, 50% { opacity: 0; transform: translateY(4px); } 53%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes igt6 { 0%, 62% { opacity: 0; transform: translateY(4px); } 65%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ig-term.is-live .igt:nth-child(1) { animation: igt1 10s ease infinite; }
  .ig-term.is-live .igt:nth-child(2) { animation: igt2 10s ease infinite; }
  .ig-term.is-live .igt:nth-child(3) { animation: igt3 10s ease infinite; }
  .ig-term.is-live .igt:nth-child(4) { animation: igt4 10s ease infinite; }
  .ig-term.is-live .igt:nth-child(5) { animation: igt5 10s ease infinite; }
  .ig-term.is-live .igt:nth-child(6) { animation: igt6 10s ease infinite; }
  .ig-term.is-live .ig-term__live i { animation: ind-live 2.4s ease-out infinite; }
}

/* ---------- sectors, centred ---------- */
.pl-sec { display: flex; flex-direction: column; align-items: center; padding: clamp(56px, 5.5vw, 80px) 32px; border-bottom: 1px solid var(--line); text-align: center; }
.pl-sec__badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px -14px rgba(15, 31, 122, .4); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.pl-sec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); }
@media (prefers-reduced-motion: no-preference) { .pl-sec__dot, .pl-s__st--live::before { animation: ind-live 2.4s ease-out infinite; } }
.pl-sec__t { max-width: 40ch; margin-top: 20px; color: var(--ink); font-size: clamp(22px, 2.2vw, 30px); font-weight: 560; letter-spacing: -.03em; line-height: 1.25; text-wrap: balance; }
.pl-secs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 36px 0 0; padding: 0; list-style: none; }
.pl-s { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; padding: 18px 16px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(10, 14, 31, .04); color: var(--ink); text-align: left; text-decoration: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .4s var(--ease); }
.pl-s__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--canvas-2); color: var(--royal); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pl-s__i .i { width: 19px; height: 19px; }
.pl-s__n { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.pl-s__st { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--canvas-2); color: var(--royal-700); font-size: 11px; font-weight: 600; }
.pl-s__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--royal); }
.pl-s__st--live { background: #E9FBF2; color: #067647; }
.pl-s__st--live::before { background: var(--ok); }
.pl-s__go { position: absolute; top: 16px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--canvas-2); color: var(--royal); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.pl-s__go .i { width: 14px; height: 14px; }
.pl-s:hover, .pl-s:focus-visible { box-shadow: inset 0 0 0 1px rgba(37, 71, 233, .35), 0 26px 44px -28px rgba(37, 71, 233, .55); transform: translateY(-5px); }
.pl-s:hover .pl-s__i, .pl-s:focus-visible .pl-s__i { background: var(--royal); color: #fff; transform: rotate(-6deg); }
.pl-s:hover .pl-s__go, .pl-s:focus-visible .pl-s__go { opacity: 1; transform: none; }
:root:not(.no-js) .pl-sec[data-reveal] .pl-secs > li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1); }
:root:not(.no-js) .pl-sec[data-reveal].is-in .pl-secs > li { opacity: 1; transform: none; }
.pl-sec.is-in .pl-secs > li:nth-child(2) { transition-delay: .06s; } .pl-sec.is-in .pl-secs > li:nth-child(3) { transition-delay: .12s; } .pl-sec.is-in .pl-secs > li:nth-child(4) { transition-delay: .18s; } .pl-sec.is-in .pl-secs > li:nth-child(5) { transition-delay: .24s; } .pl-sec.is-in .pl-secs > li:nth-child(6) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  :root:not(.no-js) .pl-checks[data-reveal] .pl-cks > li, :root:not(.no-js) .pl-sec[data-reveal] .pl-secs > li { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .pl-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pl-cks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .pb-wire { display: none; }
  .pb-join { left: 50%; top: -23px; margin-left: -23px; }
  .ig-fs li:nth-child(even) { padding-left: 16px; }
}
@media (max-width: 900px) {
  .ig__col { padding-inline: 0; }
  .ig__col:hover { background: none; }
}
@media (max-width: 640px) {
  .pl-checks, .pl-sec { padding-inline: 0; }
  .pl-cks { grid-template-columns: minmax(0, 1fr); }
  .pl-ck { height: 50px; font-size: 14px; }
  .pl-ck__tip { display: none; }
  .pl-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pl-s { padding: 14px 12px; }
  .ig-fs { grid-template-columns: minmax(0, 1fr); }
  .ig-fs li:nth-child(even) { padding-left: 0; border-left: 0; }
  .ig-fs li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .igt { grid-template-columns: 12px 40px minmax(0, 1fr) auto; font-size: 11px; }
  .pl-mods .section-head { padding-inline: 0; }
  .pl-sec__badge { align-items: flex-start; border-radius: 14px; text-align: left; }
  .pl-sec__dot { flex: none; margin-top: 6px; }
  .pb-b__art { overflow: hidden; }
}

/* ==========================================================================
   28. Platform, round 3: the control figure, a role built live. A cursor
   switches three permissions on and saves; two-factor asks for a code; the
   change lands at the top of the audit log. Final state is the static state.
   ========================================================================== */
.ig { grid-template-rows: auto auto 1fr auto; }
.ig__col { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.ig-term__lines::after { content: ""; display: block; width: 8px; height: 15px; margin: 8px 0 0 22px; background: var(--cyan); opacity: .8; }
@keyframes ig-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .ig-term.is-live .ig-term__lines::after { animation: ig-caret 1.1s steps(1) infinite; } }

.igr { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); align-items: start; gap: 14px; margin: 22px 0 0; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, #F6F8FD, #EDF1FB); box-shadow: inset 0 0 0 1px #E3E8F4; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.igr::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(#D3DAEA 1px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); opacity: .7; }
/* the role */
.igr__card { position: relative; z-index: 2; padding: 14px 16px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 18px 34px -24px rgba(15, 31, 122, .5); }
.igr__h { display: grid; align-content: start; gap: 2px; height: 50px; margin: 0; border-bottom: 1px solid var(--line); }
.igr__h span { color: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.igr__h b { color: var(--ink); font-size: 14px; }
.igr__row { display: flex; align-items: center; gap: 8px; height: 38px; margin-inline: -8px; padding-inline: 8px; border-bottom: 1px dashed var(--line); border-radius: 8px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.igr__row:last-child { border-bottom: 0; }
.igr__n { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.igr__n .i { flex: none; width: 15px; height: 15px; color: var(--royal); }
.igr__sw { position: relative; flex: none; width: 30px; height: 18px; margin-left: auto; border-radius: 9px; background: var(--royal); }
.igr__sw::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .2); }
.igr__row--off { color: var(--muted); }
.igr__row--off .igr__n .i { color: var(--tone2); }
.igr__row--off .igr__sw { background: #D5DBE8; }
.igr__row--off .igr__sw::after { left: 2px; }
.igr__no { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: #F2F4F7; color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.igr__no + .igr__sw { margin-left: 0; }
.igr__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.igr__by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.igr__by i { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--royal)); color: #fff; font-size: 8.5px; font-style: normal; font-weight: 700; }
.igr__save { display: inline-grid; flex: none; place-items: center; height: 30px; padding: 0 14px; border-radius: 9px; background: var(--ok-ink); box-shadow: 0 8px 16px -10px rgba(15, 31, 122, .6); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.igr__save > span { display: inline-flex; grid-area: 1 / 1; align-items: center; gap: 5px; }
.igr__save .i { width: 13px; height: 13px; stroke-width: 2.6; }
.igr__save-a { opacity: 0; }
.igr__cur { position: absolute; left: 100%; top: 0; z-index: 3; width: 18px; height: 20px; overflow: visible; fill: #fff; stroke: var(--ink); stroke-linejoin: round; stroke-width: 1.4; opacity: 0; filter: drop-shadow(0 3px 4px rgba(10, 14, 31, .3)); pointer-events: none; transform-origin: 3px 2px; }
/* two-factor */
.igr__side { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; min-width: 0; }
.igr__2fa { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 14px; background: var(--ink); box-shadow: 0 20px 36px -18px rgba(7, 10, 23, .6); color: #fff; }
.igr__2fa-h { display: flex; align-items: center; gap: 9px; margin: 0; }
.igr__2fa-i { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(18, 183, 106, .2); color: #75E0A7; }
.igr__2fa-i .i { width: 15px; height: 15px; }
.igr__2fa-t { display: grid; min-width: 0; line-height: 1.3; }
.igr__2fa-t b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.igr__2fa-s { display: grid; font-size: 10.5px; }
.igr__2fa-s > span { display: inline-flex; grid-area: 1 / 1; align-items: center; gap: 4px; white-space: nowrap; }
.igr__2fa-s1 { color: rgba(255, 255, 255, .55); opacity: 0; }
.igr__2fa-s2 { color: #75E0A7; font-weight: 600; }
.igr__2fa-s2 .i { width: 11px; height: 11px; stroke-width: 2.8; }
.igr__code { display: flex; gap: 5px; }
.igr__code i { flex: 1 1 0; max-width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(117, 224, 167, .55); }
.igr__code i::after { content: ""; display: block; width: 6px; height: 6px; margin: 10px auto 0; border-radius: 50%; background: var(--cyan); }
/* the audit log */
.igr__log { padding: 12px 14px 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 18px 34px -26px rgba(15, 31, 122, .45); }
.igr__log-h { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.igr__log-h > .i { width: 14px; height: 14px; color: var(--royal); }
.igr__live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 10.5px; font-weight: 500; }
.igr__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
/* three lines show; a new one pushes the oldest out, so the card never changes height */
.igr__evs { height: 126px; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.igr__ev { display: flex; align-items: center; gap: 9px; height: 42px; margin-inline: -14px; padding: 0 14px; overflow: hidden; border-top: 1px solid var(--line); }
.igr__ev-i { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--canvas-2); color: var(--royal); }
.igr__ev-i .i { width: 12px; height: 12px; }
.igr__ev-b { display: grid; min-width: 0; line-height: 1.3; }
.igr__ev-b b, .igr__ev-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igr__ev-b b { color: var(--ink); font-size: 11.5px; font-weight: 600; }
.igr__ev-b span { color: var(--muted); font-size: 10.5px; }
.igr__ev--new .igr__ev-i { background: var(--royal); color: #fff; }
/* below 1200px the two columns stack, so each drawing keeps its full width */
@media (max-width: 1199px) {
  .ig { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ig__col { display: flex; flex-direction: column; grid-row: auto; }
  .ig__col + .ig__col { border-top: 1px solid var(--line); border-left: 0; }
  .ig__col + .ig__col::after { display: none; }
  .igr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .igr { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}

@keyframes igc { 0% { opacity: 0; transform: translate(34px, 150px) scale(1); } 5% { opacity: 1; transform: translate(8px, 118px) scale(1); } 10% { opacity: 1; transform: translate(-34px, 81px) scale(1); } 11% { opacity: 1; transform: translate(-34px, 81px) scale(.82); } 12% { opacity: 1; transform: translate(-34px, 81px) scale(1); } 16% { opacity: 1; transform: translate(-34px, 119px) scale(1); } 17% { opacity: 1; transform: translate(-34px, 119px) scale(.82); } 18% { opacity: 1; transform: translate(-34px, 119px) scale(1); } 22% { opacity: 1; transform: translate(-34px, 157px) scale(1); } 23% { opacity: 1; transform: translate(-34px, 157px) scale(.82); } 24% { opacity: 1; transform: translate(-34px, 157px) scale(1); } 29% { opacity: 1; transform: translate(-61px, 240px) scale(1); } 31% { opacity: 1; transform: translate(-61px, 240px) scale(.82); } 32% { opacity: 1; transform: translate(-61px, 240px) scale(1); } 37% { opacity: 1; transform: translate(-30px, 262px) scale(1); } 41%, 100% { opacity: 0; transform: translate(10px, 280px) scale(1); } }
@keyframes igsw1 { 0%, 11% { background: #D5DBE8; } 12%, 93% { background: var(--royal); } 97%, 100% { background: #D5DBE8; } }
@keyframes igkn1 { 0%, 11% { left: 2px; } 12%, 93% { left: 14px; } 97%, 100% { left: 2px; } }
@keyframes igrw1 { 0%, 10% { background: transparent; } 11% { background: #EEF2FF; } 16%, 100% { background: transparent; } }
@keyframes igsw2 { 0%, 17% { background: #D5DBE8; } 18%, 93% { background: var(--royal); } 97%, 100% { background: #D5DBE8; } }
@keyframes igkn2 { 0%, 17% { left: 2px; } 18%, 93% { left: 14px; } 97%, 100% { left: 2px; } }
@keyframes igrw2 { 0%, 16% { background: transparent; } 17% { background: #EEF2FF; } 22%, 100% { background: transparent; } }
@keyframes igsw3 { 0%, 23% { background: #D5DBE8; } 24%, 93% { background: var(--royal); } 97%, 100% { background: #D5DBE8; } }
@keyframes igkn3 { 0%, 23% { left: 2px; } 24%, 93% { left: 14px; } 97%, 100% { left: 2px; } }
@keyframes igrw3 { 0%, 22% { background: transparent; } 23% { background: #EEF2FF; } 28%, 100% { background: transparent; } }
@keyframes igsv { 0%, 30% { background: var(--royal); transform: none; } 31% { background: var(--royal-700); transform: scale(.94); } 33%, 60% { background: var(--royal); transform: none; } 62%, 93% { background: var(--ok-ink); transform: none; } 97%, 100% { background: var(--royal); transform: none; } }
@keyframes igsa { 0%, 60% { opacity: 1; } 62%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes igsb { 0%, 60% { opacity: 0; } 62%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ig2c { 0%, 33% { opacity: .5; box-shadow: 0 20px 36px -18px rgba(7, 10, 23, .6); } 36%, 58% { opacity: 1; box-shadow: 0 0 0 2px rgba(100, 244, 248, .55), 0 0 0 7px rgba(100, 244, 248, .12), 0 20px 36px -18px rgba(7, 10, 23, .6); } 61%, 93% { opacity: 1; box-shadow: 0 20px 36px -18px rgba(7, 10, 23, .6); } 97%, 100% { opacity: .5; box-shadow: 0 20px 36px -18px rgba(7, 10, 23, .6); } }
@keyframes igd1 { 0%, 39% { opacity: 0; transform: scale(.3); } 40%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igd2 { 0%, 42% { opacity: 0; transform: scale(.3); } 43%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igd3 { 0%, 45% { opacity: 0; transform: scale(.3); } 46%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igd4 { 0%, 48% { opacity: 0; transform: scale(.3); } 49%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igd5 { 0%, 51% { opacity: 0; transform: scale(.3); } 52%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igd6 { 0%, 54% { opacity: 0; transform: scale(.3); } 55%, 93% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes igbx { 0%, 57% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } 59%, 93% { box-shadow: inset 0 0 0 1px rgba(117, 224, 167, .55); } 97%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } }
@keyframes ig2i { 0%, 57% { background: rgba(100, 244, 248, .14); color: var(--cyan); } 59%, 93% { background: rgba(18, 183, 106, .2); color: #75E0A7; } 97%, 100% { background: rgba(100, 244, 248, .14); color: var(--cyan); } }
@keyframes ig2s1 { 0%, 57% { opacity: 1; } 59%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ig2s2 { 0%, 57% { opacity: 0; transform: translateY(4px); } 59%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes iglg { 0%, 60% { opacity: .55; } 63%, 93% { opacity: 1; } 97%, 100% { opacity: .55; } }
@keyframes igev { 0%, 62% { height: 0; opacity: 0; border-top-width: 0; background: transparent; } 66% { height: 42px; opacity: 1; border-top-width: 1px; background: #EEF2FF; } 82%, 93% { height: 42px; opacity: 1; border-top-width: 1px; background: transparent; } 97%, 100% { height: 0; opacity: 0; border-top-width: 0; background: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .igr.is-live .igr__cur { animation: igc 12s cubic-bezier(.45, 0, .25, 1) infinite; }
  .igr.is-live .igr__row:nth-child(1) { animation: igrw1 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(1) .igr__sw { animation: igsw1 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(1) .igr__sw::after { animation: igkn1 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(2) { animation: igrw2 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(2) .igr__sw { animation: igsw2 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(2) .igr__sw::after { animation: igkn2 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(3) { animation: igrw3 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(3) .igr__sw { animation: igsw3 12s ease infinite; }
  .igr.is-live .igr__row:nth-child(3) .igr__sw::after { animation: igkn3 12s ease infinite; }
  .igr.is-live .igr__save { animation: igsv 12s ease infinite; }
  .igr.is-live .igr__save-a { animation: igsa 12s ease infinite; }
  .igr.is-live .igr__save-b { animation: igsb 12s ease infinite; }
  .igr.is-live .igr__2fa { animation: ig2c 12s ease infinite; }
  .igr.is-live .igr__2fa-i { animation: ig2i 12s ease infinite; }
  .igr.is-live .igr__2fa-s1 { animation: ig2s1 12s ease infinite; }
  .igr.is-live .igr__2fa-s2 { animation: ig2s2 12s ease infinite; }
  .igr.is-live .igr__code i { animation: igbx 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(1)::after { animation: igd1 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(2)::after { animation: igd2 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(3)::after { animation: igd3 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(4)::after { animation: igd4 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(5)::after { animation: igd5 12s ease infinite; }
  .igr.is-live .igr__code i:nth-child(6)::after { animation: igd6 12s ease infinite; }
  .igr.is-live .igr__log { animation: iglg 12s ease infinite; }
  .igr.is-live .igr__ev--new { animation: igev 12s ease infinite; }
  .igr.is-live .igr__live i { animation: ind-live 2.4s ease-out infinite; }
}

/* ==========================================================================
   33. Verification · the drawings, in the isometric line style
   Resting state = the finished result (also the reduced-motion state).
   Motion runs only while the drawing is on screen (.is-live on its holder).
   ========================================================================== */
.vx-iso { display: block; width: 100%; height: auto; overflow: visible; }
.vx-iso * { stroke-linejoin: round; stroke-linecap: round; }
.vx-iso .f-l, .vx-iso .drawer { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.vx-iso .f-r, .vx-iso .f-t, .vx-iso .scr { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.vx-iso .scr { stroke: #B9BFCD; stroke-width: 1; }
.vx-iso .soft { fill: #EEF1F7; stroke: #CDD3E0; stroke-width: 1; }
.vx-iso .i-l, .vx-iso .i-r, .vx-iso .i-t { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.vx-iso .i-t { stroke: #4A5270; }
.vx-iso .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.vx-iso .r-l, .vx-iso .r-r, .vx-iso .r-t { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.vx-iso .r-l { fill: #1B36C4; stroke: #1B36C4; }
.vx-iso .r-t-edge { fill: none; stroke: #8FA3F5; stroke-width: 1; }
.vx-iso .notch { fill: none; stroke: #9AA1B5; stroke-width: 2.4; }
.vx-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.vx-iso .ln-l { fill: none; stroke: #DDE2EC; stroke-width: 1; }
.vx-iso .ln-d { fill: none; stroke: #4A5270; stroke-width: 1.6; }
.vx-iso .ln-i { fill: none; stroke: #8A91A8; stroke-width: 1.4; }
.vx-iso .ln-w { fill: none; stroke: #FFFFFF; stroke-width: 1.6; }
.vx-iso .ln-w2 { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; }
.vx-iso .mesh { fill: none; stroke: #C4C9D6; stroke-width: .9; }
.vx-iso .mrz { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 2 2.5; }
.vx-iso .flow, .vx-iso .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.vx-iso .flow--off { stroke: #DDE2EC; }
.vx-iso .match { fill: none; stroke: var(--royal); stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: .7; }
.vx-iso .bracket { fill: none; stroke: var(--royal); stroke-width: 2; }
.vx-iso .scanplane { fill: var(--royal); fill-opacity: .08; stroke: none; }
.vx-iso .scanline { fill: none; stroke: var(--royal); stroke-width: 1.6; }
.vx-iso .photo-head { fill: #FFFFFF; stroke: none; opacity: .92; }
.vx-iso .photo-body { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: .92; }
.vx-iso .photo-g { fill: #C9CFDC; stroke: none; }
.vx-iso .photo-gb { fill: none; stroke: #C9CFDC; stroke-width: 1.5; }
.vx-iso .node { fill: #9AA1B5; }
.vx-iso .node-r { fill: var(--royal); }
.vx-iso .node-c { fill: var(--cyan); }
.vx-iso .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2.2; }
.vx-iso .x-w { fill: none; stroke: #FFFFFF; stroke-width: 2; }
.vx-iso .ring-bg { fill: none; stroke: #E6E9F2; stroke-width: 2.4; }
.vx-iso .ring { fill: none; stroke: var(--royal); stroke-width: 2.4; }
.vx-iso .ring-l { fill: none; stroke: var(--royal); stroke-width: 1; stroke-opacity: .45; }
.vx-iso .rec-dot { fill: #F04438; stroke: none; }
.vx-iso .pkt { fill: var(--royal); stroke: #FFFFFF; stroke-width: 1.5; opacity: 0; }
.vx-iso .pkt-g { fill: #8A91A8; stroke: #FFFFFF; stroke-width: 1.5; opacity: 0; }
.vx-iso .pin-base { fill: #E6E9F2; stroke: none; }
.vx-iso .pin-c { fill: #FFFFFF; }
.vx-iso .scr-i { fill: #1A2036; stroke: #4A5270; stroke-width: 1; }
.vx-iso .scr-d { fill: #0E1428; stroke: #0E1428; stroke-width: 1; }
.vx-iso--video-evidence .mesh { stroke: rgba(100, 244, 248, .4); }
.vx-iso .prog { fill: none; stroke: var(--royal); stroke-width: 2.4; }
.vx-iso .play { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1; }
.vx-iso .lit { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.vx-iso .scanned { fill: var(--royal); fill-opacity: 0; stroke: none; }
.vx-iso .scanplane, .vx-iso .scanline { opacity: 0; }
.vx-iso .a-focus, .vx-iso .a-badge, .vx-iso .a-ok, .vx-iso .a-ripple, .vx-iso .a-key, .vx-iso .a-refuse, .vx-iso .a-stamp, .vx-iso .a-puck, .vx-iso .a-mark { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .vx-iso .a-march { animation: vx-march 1.4s linear infinite; }
  .vx-iso .a-focus { animation: vx-focus 3.2s ease-in-out infinite; }
  .vx-iso .a-ripple { animation: vx-ripple 3s ease-out infinite; }
  .vx-iso .a-ripple--2 { animation-delay: 1.5s; }
  .vx-iso .a-rec { animation: vx-blink 1.6s ease-in-out infinite; }
  .vx-iso .a-badge, .vx-iso .a-puck { animation: vx-float 4.6s ease-in-out infinite; }
  .vx-iso .a-key { animation: vx-key 6s ease-out infinite; }
  .vx-iso .a-key--2 { animation-delay: .25s; } .vx-iso .a-key--3 { animation-delay: .5s; } .vx-iso .a-key--4 { animation-delay: .75s; }
  /* ID Verification: the scan crosses the card, then the fields lift off */
  .vx-iso .a-scan .scanplane, .vx-iso .a-scan .scanline { animation: vx-scanfade 6s ease-in-out infinite; }
  .vx-iso .a-scan { animation: vx-scan 6s cubic-bezier(.45, 0, .25, 1) infinite; }
  .vx-iso .a-field { animation: vx-field1 6s ease infinite; }
  .vx-iso .a-field--2 { animation-name: vx-field2; } .vx-iso .a-field--3 { animation-name: vx-field3; }
  /* Liveness: the ring closes on a live face; a printed photo is refused */
  .vx-iso .a-ring { stroke-dasharray: 100; animation: vx-ring 6s ease-in-out infinite; }
  .vx-iso .a-nod { animation: vx-nod 3s ease-in-out infinite; }
  .vx-iso .a-nod--1 { animation-delay: .5s; } .vx-iso .a-nod--2 { animation-delay: 1s; } .vx-iso .a-nod--3 { animation-delay: 1.5s; } .vx-iso .a-nod--4 { animation-delay: 2s; } .vx-iso .a-nod--5 { animation-delay: 2.5s; }
  .vx-iso .a-try .pkt-g { animation: vx-tryfade 6s ease infinite; }
  .vx-iso .a-try { animation: vx-try 6s cubic-bezier(.45, 0, .3, 1) infinite; }
  .vx-iso .a-refuse { animation: vx-refuse 6s ease infinite; }
  .vx-iso--liveness .a-badge { animation: vx-badge 6s ease infinite; }
  /* Face Match: the comparison lines draw, the key points answer */
  .vx-iso .a-mline { stroke-dashoffset: 0; animation: vx-mline 6s ease infinite; }
  /* Age Estimation: the estimate settles past the threshold */
  .vx-iso .a-est { animation: vx-est 6s cubic-bezier(.3, .7, .2, 1) infinite; }
  /* AML: the details pass three gates, each lights as it clears */
  .vx-iso .a-pkt .pkt { animation: vx-pktfade 6s linear infinite; }
  .vx-iso .a-pkt { animation: vx-pkt 6s linear infinite; }
  .vx-iso .a-gate { animation: vx-gate1 6s ease infinite; }
  .vx-iso .a-gate--2 { animation-name: vx-gate2; } .vx-iso .a-gate--3 { animation-name: vx-gate3; }
  .vx-iso--aml-screening .a-ok, .vx-iso--email-verification .a-ok { animation: vx-ok 6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  /* Email: the message travels into the inbox */
  .vx-iso .a-env { animation: vx-env 6s cubic-bezier(.45, 0, .3, 1) infinite; }
  /* Video: the session plays along its timeline */
  .vx-iso .a-prog { stroke-dasharray: 100; animation: vx-prog 6s linear infinite; }
  .vx-iso .a-mark { animation: vx-mark1 6s ease infinite; }
  .vx-iso .a-mark--2 { animation-name: vx-mark2; } .vx-iso .a-mark--3 { animation-name: vx-mark3; } .vx-iso .a-mark--4 { animation-name: vx-mark4; }
  /* Face search: the collection is read tile by tile */
  .vx-iso .a-cell { animation: vx-cell 5.4s ease infinite; }
  /* Blocklist: the document is stopped at the bar and stamped */
  .vx-iso .a-doc { animation: vx-doc 6s cubic-bezier(.45, 0, .3, 1) infinite; }
  .vx-iso .a-stamp { animation: vx-stamp 6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  /* paused while off screen */
  .vx-art:not(.is-live) .vx-iso *, .vx-art:not(.is-live) .vx-iso { animation-play-state: paused; }
}
@keyframes vx-march { to { stroke-dashoffset: -12; } }
@keyframes vx-focus { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.96); } }
@keyframes vx-ripple { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes vx-blink { 50% { opacity: .25; } }
@keyframes vx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes vx-key { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.8); } 14% { transform: scale(1); } }
@keyframes vx-scan { 0%, 6% { transform: translate(0, 0); } 44% { transform: translate(var(--a-scan-x), var(--a-scan-y)); } 100% { transform: translate(var(--a-scan-x), var(--a-scan-y)); } }
@keyframes vx-scanfade { 0%, 4% { opacity: 0; } 8%, 40% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes vx-field1 { 0%, 46% { opacity: 0; transform: translateY(6px); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vx-field2 { 0%, 54% { opacity: 0; transform: translateY(6px); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vx-field3 { 0%, 62% { opacity: 0; transform: translateY(6px); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vx-ring { 0%, 34% { stroke-dashoffset: 100; } 70%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes vx-nod { 0%, 100% { fill: #9AA1B5; } 50% { fill: var(--royal); } }
@keyframes vx-try { 0%, 4% { transform: translate(0, 0); } 26%, 100% { transform: translate(var(--a-try-x), var(--a-try-y)); } }
@keyframes vx-tryfade { 0%, 3% { opacity: 0; } 6%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes vx-refuse { 0%, 24% { transform: none; } 28% { transform: translateY(-4px); } 32% { transform: translateX(-2px); } 36% { transform: translateX(2px); } 40%, 100% { transform: none; } }
@keyframes vx-badge { 0%, 68% { opacity: 0; transform: translateY(6px); } 74%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vx-mline { 0%, 6% { stroke-dashoffset: 40; opacity: 0; } 10% { opacity: 1; } 40%, 94% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-est { 0%, 8% { transform: translate(var(--a-est-x), var(--a-est-y)); opacity: .2; } 30% { opacity: 1; } 56%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes vx-pkt { 0%, 8% { transform: translate(0, 0); } 78%, 100% { transform: translate(var(--a-pkt-x), var(--a-pkt-y)); } }
@keyframes vx-pktfade { 0%, 6% { opacity: 0; } 10%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes vx-gate1 { 0%, 27% { fill: #FFFFFF; stroke: #9AA1B5; } 30%, 94% { fill: var(--royal); stroke: var(--royal); } 100% { fill: #FFFFFF; stroke: #9AA1B5; } }
@keyframes vx-gate2 { 0%, 45% { fill: #FFFFFF; stroke: #9AA1B5; } 48%, 94% { fill: var(--royal); stroke: var(--royal); } 100% { fill: #FFFFFF; stroke: #9AA1B5; } }
@keyframes vx-gate3 { 0%, 63% { fill: #FFFFFF; stroke: #9AA1B5; } 66%, 94% { fill: var(--royal); stroke: var(--royal); } 100% { fill: #FFFFFF; stroke: #9AA1B5; } }
@keyframes vx-ok { 0%, 76% { opacity: 0; transform: translateY(6px); } 82%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vx-env { 0%, 6% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 62% { transform: translate(var(--a-env-x), var(--a-env-y)); opacity: 1; } 70%, 100% { transform: translate(var(--a-env-x), var(--a-env-y)); opacity: 0; } }
@keyframes vx-prog { 0%, 4% { stroke-dashoffset: 100; } 84%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes vx-mark1 { 0%, 3% { fill: #9AA1B5; } 6%, 94% { fill: var(--royal); } 100% { fill: #9AA1B5; } }
@keyframes vx-mark2 { 0%, 30% { fill: #9AA1B5; } 32%, 94% { fill: var(--royal); } 100% { fill: #9AA1B5; } }
@keyframes vx-mark3 { 0%, 57% { fill: #9AA1B5; } 59%, 94% { fill: var(--royal); } 100% { fill: #9AA1B5; } }
@keyframes vx-mark4 { 0%, 82% { fill: #9AA1B5; } 84%, 94% { fill: var(--royal); } 100% { fill: #9AA1B5; } }
@keyframes vx-cell { 0%, 100% { fill-opacity: 0; } 4% { fill-opacity: .16; } 12% { fill-opacity: 0; } }
@keyframes vx-doc { 0%, 6% { transform: translate(var(--a-doc-x), var(--a-doc-y)); opacity: 0; } 12% { opacity: 1; } 40%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes vx-stamp { 0%, 40% { opacity: 0; transform: scale(.6); } 46%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* sector scenes (Industries) */
.vx-iso .imprint { fill: var(--royal); fill-opacity: .08; stroke: var(--royal); stroke-width: 1.25; stroke-dasharray: 3 2.5; }
.vx-iso .ln-r { fill: none; stroke: var(--royal); stroke-width: 1.4; stroke-opacity: .75; }
.vx-iso .cdl-dn { fill: #DDE2EC; stroke: #9AA1B5; stroke-width: 1; }
.vx-iso .chip { fill: #C9CFDC; stroke: #E6E9F2; stroke-width: 1; }
.vx-iso .coin-in { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.vx-iso .key { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.vx-iso .flow--soft { fill: none; stroke: #C4C9D6; stroke-width: 1.25; stroke-dasharray: 3 3; }
.vx-iso .r-disc { fill: var(--royal); stroke: none; }
.vx-iso .a-cdl { transform-box: fill-box; transform-origin: center bottom; }
@media (prefers-reduced-motion: no-preference) {
  .vx-iso .a-stampv { animation: vx-stampv 6s cubic-bezier(.5, 0, .3, 1) infinite; }
  .vx-iso .a-imprint { animation: vx-imprint 6s ease infinite; }
  .vx-iso .a-cdl { animation: vx-cdl 3.6s ease-in-out infinite; }
  .vx-iso .a-cdl--1 { animation-delay: .6s; } .vx-iso .a-cdl--2 { animation-delay: 1.2s; }
  .vx-iso--sector-trading .a-ok { animation: vx-ok 6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .vx-iso--sector-digital-assets .a-stamp { animation: vx-stamp 6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .vx-iso--sector-banking .a-puck { animation: vx-float 5s ease-in-out infinite; }
}
@keyframes vx-stampv { 0%, 22% { transform: translate(0, 0); } 34%, 40% { transform: translate(var(--a-stampv-x), var(--a-stampv-y)); } 54%, 100% { transform: translate(0, 0); } }
@keyframes vx-imprint { 0%, 34% { opacity: 0; } 38%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vx-cdl { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }

/* ==========================================================================
   34. Verification (the check index). Neutral by default: ink and grey line
   work, royal kept for the verified part of each drawing and a few accents.
   ========================================================================== */
:root.no-js [data-needs-js], :root.no-js .vf-add, :root.no-js .vf-tray { display: none; }

/* ---------- hero: the nine on a hairline board ---------- */
.ph--vf { padding-bottom: 0; }
.vf-board-wrap { width: 100%; max-width: 1080px; margin: clamp(48px, 5vw, 72px) auto 0; }
.vf-board-wrap__k { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.vf-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(255, 255, 255, .82); list-style: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vf-bt { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vf-bt__a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px 22px 16px; color: var(--ink); text-decoration: none; transition: background-color .35s var(--ease); }
.vf-bt__a::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vf-bt__top { display: flex; justify-content: space-between; gap: 12px; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vf-bt__top .mono { color: var(--muted); }
.vf-bt__ico { display: block; margin-top: 22px; color: var(--ink-2); transition: color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.vf-bt__ico .i { width: 22px; height: 22px; }
.vf-bt__n { margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.vf-bt__f { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.vf-bt__n + .vf-bt__f { margin-top: 14px; border-top: 1px dashed var(--line); }
.vf-bt__p { color: var(--ink); font-size: 13px; }
.vf-bt__r { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.vf-bt__r::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.vf-bt__r--info::before { background: var(--tone2); }
.vf-bt__go { position: absolute; top: 52px; right: 20px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.vf-bt__go .i { width: 13px; height: 13px; }
.vf-bt__a:hover, .vf-bt__a:focus-visible { background: #FAFBFE; }
.vf-bt__a:hover::before, .vf-bt__a:focus-visible::before { transform: none; }
.vf-bt__a:hover .vf-bt__ico, .vf-bt__a:focus-visible .vf-bt__ico { color: var(--royal); transform: translateY(-2px); }
.vf-bt__a:hover .vf-bt__go, .vf-bt__a:focus-visible .vf-bt__go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .vf-board.is-live .vf-bt__a::before { animation: vf-bt 7.2s ease infinite; }
  .vf-board.is-live .vf-bt:nth-child(2) .vf-bt__a::before { animation-delay: .8s; } .vf-board.is-live .vf-bt:nth-child(3) .vf-bt__a::before { animation-delay: 1.6s; }
  .vf-board.is-live .vf-bt:nth-child(4) .vf-bt__a::before { animation-delay: 2.4s; } .vf-board.is-live .vf-bt:nth-child(5) .vf-bt__a::before { animation-delay: 3.2s; }
  .vf-board.is-live .vf-bt:nth-child(6) .vf-bt__a::before { animation-delay: 4s; } .vf-board.is-live .vf-bt:nth-child(7) .vf-bt__a::before { animation-delay: 4.8s; }
  .vf-board.is-live .vf-bt:nth-child(8) .vf-bt__a::before { animation-delay: 5.6s; } .vf-board.is-live .vf-bt:nth-child(9) .vf-bt__a::before { animation-delay: 6.4s; }
  .vf-board.is-live .vf-bt__a:hover::before { animation: none; }
}
@keyframes vf-bt { 0% { opacity: 1; transform: scaleX(0); } 7% { opacity: 1; transform: none; } 12%, 100% { opacity: 0; transform: none; } }

/* ---------- every check, in depth ---------- */
.vf-ix { padding-bottom: 0; }
.vf-pre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -8px 32px 32px; }
.vf-pre__k { color: var(--muted); font-size: 14.5px; }
.vf-pre__bs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.vf-pre__b { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13.5px/1 var(--font); cursor: pointer; transition: box-shadow .3s, background-color .3s, color .3s; }
.vf-pre__b .mono { padding: 5px 9px; border-radius: 999px; background: #F2F4F8; color: var(--ink-2); font-size: 12px; font-weight: 500; transition: background-color .3s, color .3s; }
.vf-pre__b:hover { box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .35); }
.vf-pre__b[aria-pressed="true"] { background: var(--ink); box-shadow: none; color: #fff; }
.vf-pre__b[aria-pressed="true"] .mono { background: rgba(255, 255, 255, .14); color: #fff; }
.vf-list { border-top: 1px solid var(--line); }
.vf-grp__k { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 13px 32px; border-bottom: 1px solid var(--line); background: #FAFBFE; color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.vf-grp__n { color: var(--tone2); }
.vf-row { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.vf-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 22px 32px 22px; border-right: 1px solid var(--line); background: radial-gradient(60% 52% at 50% 52%, rgba(37, 71, 233, .045), rgba(37, 71, 233, 0) 72%); }
.vf-art::before, .vf-art::after { content: ""; position: absolute; right: -5px; top: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.vf-art::after { top: auto; bottom: -5px; }
.vf-row--flip .vf-art { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.vf-row--flip .vf-art::before, .vf-row--flip .vf-art::after { right: auto; left: -5px; }
.vf-art__top { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vf-art__top .mono { color: var(--royal); }
.vf-art .vx-iso { width: 100%; max-width: 540px; margin: 0 auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.vf-row:hover .vf-art .vx-iso { transform: translateY(-4px); }
.vf-art__res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.vf-art__k { color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vf-art__v { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.vf-art__v::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.vf-art__v--info::before { background: var(--tone2); }
.vf-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 4vw, 56px) 32px; }
.vf-body__k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.vf-body__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 14px -10px rgba(15, 31, 122, .4); color: var(--ink); }
.vf-body__ico .i { width: 19px; height: 19px; }
.vf-body__p { color: var(--muted); font-size: 13px; }
.vf-body__p b { color: var(--ink); font-size: 18px; font-weight: 600; }
.vf-body__t { margin-top: 20px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.vf-body__x { max-width: 46ch; margin-top: 10px; color: var(--body); font-size: 17px; line-height: 1.55; }
.vf-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid var(--line); }
.vf-dl > div { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line); }
.vf-dl > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.vf-dl dt { color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.vf-dl dd { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
/* a rule, written out */
.vf-rule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vf-rule__if { padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; }
.vf-rule__c { color: var(--ink); font-weight: 600; }
.vf-rule__to { display: inline-grid; color: var(--tone2); }
.vf-rule__to .i { width: 14px; height: 14px; }
.vf-rule__o { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.vf-rule__o--bad { background: var(--bad-bg); color: var(--bad-ink); }
.vf-rule__o--warn { background: var(--warn-bg); color: var(--warn-ink); }
.vf-rule__o--ok { background: var(--ok-bg); color: var(--ok-ink); }
.vf-rule--none { color: var(--muted); }
/* add to my flow */
.vf-add { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; height: 44px; margin-top: 24px; padding: 0 18px 0 6px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 14px/1 var(--font); cursor: pointer; transition: background-color .3s, box-shadow .3s, color .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.vf-add__i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #F2F4F8; color: var(--ink); transition: background-color .3s, color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.vf-add__i .i { position: absolute; width: 15px; height: 15px; stroke-width: 2.4; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.vf-add__i .i:last-child { opacity: 0; transform: scale(.4); }
.vf-add:hover { box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .4); }
.vf-add:hover .vf-add__i { transform: rotate(90deg); }
.vf-add:active { transform: scale(.97); }
.vf-add[aria-pressed="true"] { background: var(--ink); box-shadow: 0 12px 24px -14px rgba(7, 10, 23, .7); color: #fff; }
.vf-add[aria-pressed="true"] .vf-add__i { background: rgba(255, 255, 255, .14); color: var(--cyan); transform: none; }
.vf-add[aria-pressed="true"] .vf-add__i .i:first-child { opacity: 0; transform: rotate(90deg) scale(.4); }
.vf-add[aria-pressed="true"] .vf-add__i .i:last-child { opacity: 1; transform: none; }

/* ---------- the tray ---------- */
.vf-tray { position: sticky; bottom: 16px; z-index: 40; margin: 28px 0 0; padding-bottom: 28px; pointer-events: none; }
.vf-tray__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(10, 14, 31, .94); box-shadow: 0 30px 60px -24px rgba(7, 10, 23, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); color: #fff; opacity: 0; transform: translateY(24px); visibility: hidden; pointer-events: auto; transition: opacity .4s var(--ease), transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vf-tray.is-on.has-items .vf-tray__in { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.vf-tray__t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vf-tray__ti { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--cyan); }
.vf-tray__ti .i { width: 16px; height: 16px; }
.vf-tray__n { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 500; }
.vf-tray__list { display: flex; gap: 6px; min-width: 0; margin: 0; padding: 2px; overflow-x: auto; list-style: none; scrollbar-width: none; counter-reset: tr; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.vf-tray__list::-webkit-scrollbar { display: none; }
.vf-tray__hint { color: rgba(255, 255, 255, .5); font-size: 13px; white-space: nowrap; }
.vf-tray__it { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; counter-increment: tr; }
.vf-tray__it::before { content: counter(tr); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-family: var(--mono); font-size: 10.5px; }
.vf-tray__it > .i { width: 14px; height: 14px; color: var(--cyan); }
.vf-tray__it.is-new { animation: vf-tray-in .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes vf-tray-in { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.vf-tray__x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .5); cursor: pointer; }
.vf-tray__x .i { width: 12px; height: 12px; }
.vf-tray__x:hover, .vf-tray__x:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.vf-tray__sum { display: grid; justify-items: end; margin: 0; line-height: 1.15; white-space: nowrap; }
.vf-tray__tot { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.vf-tray__tot.is-bump { animation: vf-tray-bump .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes vf-tray-bump { 40% { color: var(--cyan); transform: scale(1.08); } }
.vf-tray__per { color: rgba(255, 255, 255, .55); font-size: 11.5px; }
.vf-tray__act { display: flex; align-items: center; gap: 6px; margin: 0; }
.vf-tray__clear { height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .6); font: 500 13px/1 var(--font); cursor: pointer; }
.vf-tray__clear:hover, .vf-tray__clear:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
.vf-tray:not(.has-items) .vf-tray__clear { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vf-tray__it.is-new, .vf-tray__tot.is-bump { animation: none; } }

/* ---------- hard to cheat, on the dark panel ---------- */
.vf-dark { padding-block: clamp(96px, 10vw, 140px); }
.vf-dark__grid { background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; background-position: center -1px; -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%); }
.vf-dark .section-head { margin-bottom: clamp(44px, 5vw, 64px); padding-inline: 32px; }
.vf-hc { --hc-cols: 44px minmax(0, 1.25fr) minmax(48px, .55fr) minmax(0, 1fr) 92px; margin: 0 32px; border-top: 1px solid rgba(255, 255, 255, .12); }
.vf-hc__h { display: grid; grid-template-columns: var(--hc-cols); gap: 0 20px; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vf-hc__h span:first-child { grid-column: 2 / 4; }
.vf-hc__h span:nth-child(2) { grid-column: 4; }
.vf-hc__h span:last-child { grid-column: 5; text-align: right; }
.vf-hc__list { margin: 0; padding: 0; list-style: none; }
.vf-hc__r { display: grid; grid-template-columns: var(--hc-cols); align-items: center; gap: 0 20px; min-height: 74px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background-color .35s; }
.vf-hc__r:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 80%); }
.vf-hc__n { color: rgba(255, 255, 255, .35); font-size: 12px; }
.vf-hc__t { margin: 0; color: #fff; font-size: 17.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.vf-hc__ln { position: relative; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 4px, transparent 4px 9px); }
.vf-hc__ln::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.vf-hc__ln i { position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #F97066; box-shadow: 0 0 0 4px rgba(240, 68, 56, .18); opacity: 0; }
.vf-hc__by { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.vf-hc__g { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s, background-color .3s; }
.vf-hc__gi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(100, 244, 248, .12); color: var(--cyan); }
.vf-hc__gi .i { width: 13px; height: 13px; }
.vf-hc__r:hover .vf-hc__g { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(100, 244, 248, .45); }
.vf-hc__res { display: inline-flex; align-items: center; justify-self: end; gap: 7px; color: #FDA29B; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.vf-hc__res::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: #F97066; }
@media (prefers-reduced-motion: no-preference) {
  .vf-hc.is-live .vf-hc__ln i { animation: vf-hc-dot 9.6s cubic-bezier(.45, 0, .3, 1) infinite; }
  .vf-hc.is-live .vf-hc__g { animation: vf-hc-gate 9.6s ease infinite; }
  .vf-hc.is-live .vf-hc__res { animation: vf-hc-res 9.6s ease infinite; }
}
.vf-hc.is-live .vf-hc__r:nth-child(2) * { animation-delay: 1.2s; } .vf-hc.is-live .vf-hc__r:nth-child(3) * { animation-delay: 2.4s; }
.vf-hc.is-live .vf-hc__r:nth-child(4) * { animation-delay: 3.6s; } .vf-hc.is-live .vf-hc__r:nth-child(5) * { animation-delay: 4.8s; }
.vf-hc.is-live .vf-hc__r:nth-child(6) * { animation-delay: 6s; } .vf-hc.is-live .vf-hc__r:nth-child(7) * { animation-delay: 7.2s; }
.vf-hc.is-live .vf-hc__r:nth-child(8) * { animation-delay: 8.4s; }
@keyframes vf-hc-dot { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 9% { left: calc(100% - 9px); opacity: 1; } 11%, 100% { left: calc(100% - 9px); opacity: 0; } }
@keyframes vf-hc-gate { 0%, 8% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } 10% { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 0 6px rgba(100, 244, 248, .12); } 18%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } }
@keyframes vf-hc-res { 0%, 9% { opacity: .3; } 11%, 96% { opacity: 1; } 100% { opacity: .3; } }
.vf-hf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 40px 32px 0; padding: 0; list-style: none; }
.vf-hf li { display: flex; align-items: flex-start; gap: 14px; padding: 4px 24px 4px 0; }
.vf-hf li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .1); }
.vf-hf__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--cyan); }
.vf-hf__i .i { width: 16px; height: 16px; }
.vf-hf__b { display: grid; gap: 3px; color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.5; }
.vf-hf__b b { color: #fff; font-size: 15px; font-weight: 600; }

/* ---------- face search & blocklist ---------- */
.vf-bi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.vf-bi__col { position: relative; display: flex; flex-direction: column; padding: 0 32px 36px; }
.vf-bi__col + .vf-bi__col { border-left: 1px solid var(--line); }
.vf-bi__col + .vf-bi__col::before, .vf-bi__col + .vf-bi__col::after { content: ""; position: absolute; left: -5px; top: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.vf-bi__col + .vf-bi__col::after { top: auto; bottom: -5px; }
.vf-bi__art { margin: 0 -32px 26px; padding: 24px 32px 18px; border-bottom: 1px solid var(--line); background: radial-gradient(60% 55% at 50% 52%, rgba(37, 71, 233, .045), rgba(37, 71, 233, 0) 72%); }
.vf-bi__art .vx-iso { max-width: 440px; margin: 0 auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.vf-bi__col:hover .vf-bi__art .vx-iso { transform: translateY(-4px); }
.vf-bi__k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }
.vf-bi__k .mono { color: var(--muted); font-size: 12px; font-weight: 500; }
.vf-bi__t { margin-top: 12px; font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.vf-bi__x { margin-top: 8px; color: var(--body); font-size: 15.5px; line-height: 1.55; }
.vf-rk { margin: 24px 0 0; }
.vf-rk__cap { padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--tone2); font-size: 10.5px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.vf-rk__list { margin: 0; padding: 0; list-style: none; }
.vf-rk__r { display: grid; grid-template-columns: 88px minmax(0, 1fr) 40px 76px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--body); font-size: 14px; }
.vf-rk__bar { height: 4px; overflow: hidden; border-radius: 2px; background: #EEF1F7; }
.vf-rk__b { display: block; height: 100%; border-radius: inherit; background: #B9C0D2; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.vf-rk__b--a { width: 97%; } .vf-rk__b--b { width: 64%; } .vf-rk__b--c { width: 41%; } .vf-rk__b--d { width: 22%; }
.vf-rk__r.is-hit { color: var(--ink); font-weight: 600; }
.vf-rk__r.is-hit .vf-rk__b { background: var(--ink); }
.vf-rk__v { color: var(--ink); text-align: right; }
.vf-rk__f { justify-self: end; padding: 2px 8px; border-radius: 6px; background: var(--bad-bg); color: var(--bad-ink); font-size: 11.5px; font-weight: 600; }
.vf-rk__f--no { visibility: hidden; }
:root:not(.no-js) .vf-rk[data-reveal] .vf-rk__b { transform: scaleX(0); }
:root:not(.no-js) .vf-rk[data-reveal].is-in .vf-rk__b { transform: none; }
.vf-rk.is-in .vf-rk__r:nth-child(2) .vf-rk__b { transition-delay: .1s; } .vf-rk.is-in .vf-rk__r:nth-child(3) .vf-rk__b { transition-delay: .2s; } .vf-rk.is-in .vf-rk__r:nth-child(4) .vf-rk__b { transition-delay: .3s; }
.vf-bl { width: 100%; margin: 24px 0 0; border-collapse: collapse; font-size: 14px; }
.vf-bl caption { caption-side: top; }
.vf-bl thead th { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); color: var(--tone2); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.vf-bl thead td { border-bottom: 1px solid var(--line); }
.vf-bl tbody th, .vf-bl tbody td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vf-bl tbody th { width: 34%; color: var(--ink); font-weight: 600; }
.vf-bl tbody td { color: var(--body); line-height: 1.45; }

/* ---------- example flows, as receipts ---------- */
.vf-rcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; margin: 0; padding: 8px 32px 0; list-style: none; }
.vf-rc { position: relative; display: flex; flex-direction: column; padding: 24px 24px 26px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 30px 60px -44px rgba(15, 31, 122, .45); transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.vf-rc::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--line-2); }
.vf-rc:hover { box-shadow: 0 0 0 1px #D5DDF2, 0 34px 64px -40px rgba(15, 31, 122, .55); transform: translateY(-5px); }
.vf-rc__top { display: flex; align-items: center; justify-content: space-between; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.vf-rc__t { margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vf-rc__lines { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line-2); list-style: none; }
.vf-rc__lines li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px; }
.vf-rc__n { white-space: nowrap; }
.vf-rc__d { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #C9D0E0; transform: translateY(4px); }
.vf-rc__p { color: var(--ink); font-size: 13px; }
.vf-rc__sum { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.vf-rc__sum::before, .vf-rc__sum::after { content: ""; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #E3E8F4; }
.vf-rc__sum::before { left: -34px; clip-path: inset(0 0 0 50%); }
.vf-rc__sum::after { right: -34px; clip-path: inset(0 50% 0 0); }
.vf-rc__sum b { color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.vf-rcs-band { margin-top: 40px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .vf-hc { --hc-cols: 36px minmax(0, 1.3fr) minmax(32px, .3fr) minmax(0, 1fr) 84px; }
  .vf-hc__t { font-size: 16px; }
}
@media (max-width: 900px) {
  .vf-row, .vf-row--flip { grid-template-columns: minmax(0, 1fr); }
  .vf-art, .vf-row--flip .vf-art { order: 0; padding: 22px 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .vf-art::before, .vf-art::after { display: none; }
  .vf-body { padding: 28px 0 40px; }
  .vf-grp__k, .vf-pre { padding-inline: 0; margin-inline: 0; }
  .vf-dark .section-head { padding-inline: 0; }
  .vf-hc, .vf-hf { margin-inline: 0; }
  .vf-hc__h { display: none; }
  .vf-hc__r { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px 12px; padding: 18px 0; }
  .vf-hc__ln { display: none; }
  .vf-hc__by { grid-column: 2; }
  .vf-hc__res { grid-column: 3; grid-row: 1; align-self: start; margin-top: 4px; }
  .vf-hf { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vf-hf li + li { padding-left: 0; border-left: 0; }
  .vf-bi { grid-template-columns: minmax(0, 1fr); }
  .vf-bi__col { padding-inline: 0; }
  .vf-bi__col + .vf-bi__col { border-top: 1px solid var(--line); border-left: 0; }
  .vf-bi__col + .vf-bi__col::before, .vf-bi__col + .vf-bi__col::after { display: none; }
  .vf-bi__art { margin-inline: 0; padding-inline: 0; }
  .vf-rcs { grid-template-columns: minmax(0, 1fr); max-width: 520px; padding-inline: 0; }
  .vf-tray__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vf-tray__list { display: none; }
  .vf-tray__act .btn { display: none; }
}
@media (max-width: 640px) {
  .vf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-bt:last-child { grid-column: span 2; }
  .vf-bt__a { padding: 14px 14px 12px; }
  .vf-bt__ico { margin-top: 16px; }
  .vf-bt__n { font-size: 15px; }
  .vf-bt__r, .vf-bt__go { display: none; }
  .vf-bt__top span:last-child { display: none; }
  .vf-board-wrap__k span:last-child { display: none; }
  .vf-dl { grid-template-columns: minmax(0, 1fr); }
  .vf-dl > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .vf-hc__r { grid-template-columns: 26px minmax(0, 1fr); }
  .vf-hc__res { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 0; }
  .vf-hc__t { font-size: 15.5px; }
  .vf-rk__r { grid-template-columns: 74px minmax(0, 1fr) 36px; }
  .vf-rk__f { display: none; }
  .vf-bl { table-layout: fixed; font-size: 13px; }
  .vf-bl tbody th { width: auto; }
  .vf-tray { bottom: 10px; }
  .vf-tray__in { gap: 10px; padding-left: 12px; }
  .vf-tray__n { display: none; }
  .vf-tray__tot { font-size: 18px; }
}

/* ==========================================================================
   35. Industries. Neutral line work, one dark panel for contrast, royal kept
   for the verified part of each drawing. Status: green dot = in production,
   grey dot = ready to launch.
   ========================================================================== */
.ph--in { padding-bottom: 0; }
.in-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px -14px rgba(15, 31, 122, .4); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.in-live__dot, .in-dc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
@media (prefers-reduced-motion: no-preference) { .in-live__dot, .in-dc__dot, .in-st--live i, .in-dc__live { animation: ind-live 2.4s ease-out infinite; } }
.in-k { display: block; margin-bottom: 8px; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }

/* status pill */
.in-st { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: #F2F4F8; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.in-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone2); }
.in-st--live { background: var(--ok-bg); color: var(--ok-ink); }
.in-st--live i { background: var(--ok); }
.in-st--dark { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }
.in-st--dark.in-st--live { background: rgba(18, 183, 106, .14); color: #75E0A7; }

/* example flow ladder */
.in-fl { margin-top: 18px; }
.in-fl__k { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.in-fl__list { margin: 0; padding: 0; list-style: none; counter-reset: fl; }
.in-fl__s { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 14px; counter-increment: fl; }
.in-fl__s::before { content: counter(fl, decimal-leading-zero); width: 20px; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; }
.in-fl__i { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.in-fl__i .i { width: 13px; height: 13px; }
.in-fl__n { white-space: nowrap; }
.in-fl__d { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #C9D0E0; transform: translateY(4px); }
.in-fl__p { color: var(--ink); font-size: 13px; }
.in-fl__tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-top: 12px; color: var(--muted); font-size: 13px; }
.in-fl__tot b { color: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.in-fl--dark .in-fl__k { border-bottom-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .45); }
.in-fl--dark .in-fl__s { border-bottom-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.in-fl--dark .in-fl__s::before { color: rgba(255, 255, 255, .35); }
.in-fl--dark .in-fl__i { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--cyan); }
.in-fl--dark .in-fl__d { border-bottom-color: rgba(255, 255, 255, .2); }
.in-fl--dark .in-fl__p, .in-fl--dark .in-fl__tot b { color: #fff; }
.in-fl--dark .in-fl__tot { color: rgba(255, 255, 255, .55); }

/* what it stops, what helps */
.in-pn__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 24px; }
.in-stop__list, .in-help__list { margin: 0; padding: 0; list-style: none; }
.in-stop__list li { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.in-stop__t { color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.in-stop__by { display: inline-flex; align-items: center; justify-self: start; gap: 7px; height: 28px; padding: 0 10px 0 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.in-stop__i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F2F4F8; color: var(--ink); }
.in-stop__i .i { width: 12px; height: 12px; }
.in-help__list li { display: flex; align-items: flex-start; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.in-help__list .i { flex: none; width: 16px; height: 16px; margin-top: 2px; padding: 2px; border-radius: 50%; background: var(--ok-bg); color: var(--ok-ink); stroke-width: 2.6; }
.in-pn__who { margin-top: 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.in-pn__rule { margin-top: 20px; font-size: 14.5px; }

/* ---------- A · the sector explorer, on the dark panel ---------- */
.in-x { padding-block: clamp(96px, 10vw, 140px); }
.in-x .section-head { margin-bottom: clamp(36px, 4vw, 52px); padding-inline: 32px; }
.in-x__ui { margin: 0 32px; }
.in-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 22px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.in-x__ui:not(.is-js) .in-tabs { display: none; }
.in-tab { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 9px; min-width: 0; height: 48px; padding: 0 14px 0 6px; border: 0; border-radius: 16px; background: transparent; color: rgba(255, 255, 255, .7); font: 600 14px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s; }
.in-tab__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .06); color: var(--cyan); transition: background-color .3s, color .3s; }
.in-tab__i .i { width: 17px; height: 17px; }
.in-tab__st { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.in-tab__st.is-live { background: var(--ok); }
.in-tab:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.in-tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.in-tab[aria-selected="true"] .in-tab__i { background: var(--ink); color: var(--cyan); }
.in-pn { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(32px, 4vw, 64px); padding-top: 36px; }
.in-pn[hidden] { display: none; }
.in-x__ui:not(.is-js) .in-pn + .in-pn { margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, .12); }
.in-x__ui.is-js .in-pn.is-on { animation: in-pn .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes in-pn { from { opacity: 0; transform: translateY(10px); } }
.in-pn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: 8px; }
.in-pn__card { position: relative; padding: 18px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .8); }
.in-pn__card::before { content: ""; position: absolute; inset: 10% 6% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 71, 233, .5), rgba(37, 71, 233, 0) 72%); filter: blur(24px); }
.in-pn__card .vx-iso { max-width: 440px; margin: 0 auto; }
.in-pn__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.in-pn__no { color: rgba(255, 255, 255, .45); font-size: 12px; }
.in-pn__t { margin-top: 22px; font-size: clamp(30px, 3vw, 42px); font-weight: 560; letter-spacing: -.035em; line-height: 1.08; }
.in-pn__t .ink { color: #fff; }
.in-pn__t .tone { color: rgba(255, 255, 255, .55); }
.in-pn__sector { margin-top: 14px; color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.in-pn__x { max-width: 52ch; margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.6; }
.in-x .in-pn__who { color: rgba(255, 255, 255, .85); }
.in-x .in-k { color: rgba(255, 255, 255, .45); }
.in-x .in-stop__list li, .in-x .in-help__list li { border-top-color: rgba(255, 255, 255, .1); }
.in-x .in-stop__t { color: #fff; }
.in-x .in-stop__by { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
.in-x .in-stop__i { background: rgba(100, 244, 248, .12); color: var(--cyan); }
.in-x .in-help__list li { color: rgba(255, 255, 255, .82); }
.in-x .in-help__list .i { background: rgba(18, 183, 106, .16); color: #75E0A7; }
.in-x .vf-rule__if { background: #fff; color: var(--ink); }
.in-x .vf-rule__c { color: #fff; }
.in-x .vf-rule__to { color: rgba(255, 255, 255, .45); }
.in-x .vf-rule__o--warn { background: rgba(247, 144, 9, .16); color: #FEC84B; }

/* ---------- B · sector chapters ---------- */
.in-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(255, 255, 255, .82); list-style: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.in-bt { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.in-bt__a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 18px 22px 16px; color: var(--ink); text-decoration: none; transition: background-color .35s var(--ease); }
.in-bt__a::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.in-bt__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.in-bt__ico { display: block; margin-top: 20px; color: var(--ink-2); transition: color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.in-bt__ico .i { width: 24px; height: 24px; }
.in-bt__n { margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.in-bt__f { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; }
.in-bt__f .mono { color: var(--ink); font-size: 14px; }
.in-bt__a .vf-bt__go { top: 54px; }
.in-bt__a:hover, .in-bt__a:focus-visible { background: #FAFBFE; }
.in-bt__a:hover::before, .in-bt__a:focus-visible::before { transform: none; }
.in-bt__a:hover .in-bt__ico, .in-bt__a:focus-visible .in-bt__ico { color: var(--royal); transform: translateY(-2px); }
.in-bt__a:hover .vf-bt__go, .in-bt__a:focus-visible .vf-bt__go { opacity: 1; transform: none; }
.in-ch { padding-bottom: 0; }
.in-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.in-row__art { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 32px 28px; border-right: 1px solid var(--line); background: radial-gradient(60% 40% at 50% 32%, rgba(37, 71, 233, .045), rgba(37, 71, 233, 0) 72%); }
.in-row__art::before, .in-row__art::after { content: ""; position: absolute; right: -5px; top: -5px; z-index: 1; width: 9px; height: 9px; background: linear-gradient(var(--tone2), var(--tone2)) center / 1px 100% no-repeat, linear-gradient(var(--tone2), var(--tone2)) center / 100% 1px no-repeat; }
.in-row__art::after { top: auto; bottom: -5px; }
.in-row--flip .in-row__art { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.in-row--flip .in-row__art::before, .in-row--flip .in-row__art::after { right: auto; left: -5px; }
.in-row__art .vx-iso { width: 100%; max-width: 480px; margin: 0 auto; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.in-row:hover .in-row__art .vx-iso { transform: translateY(-4px); }
.in-row__body { padding: clamp(36px, 4vw, 56px) 32px; }
.in-row__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.in-row__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 14px -10px rgba(15, 31, 122, .4); color: var(--ink); }
.in-row__ico .i { width: 20px; height: 20px; }
.in-row__sector { margin-top: 20px; color: var(--tone2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.in-row__t { margin-top: 10px; font-size: clamp(28px, 2.6vw, 36px); font-weight: 560; letter-spacing: -.035em; line-height: 1.08; }
.in-row__t .tone { color: var(--tone2); }
.in-row__x { max-width: 50ch; margin-top: 12px; color: var(--body); font-size: 17px; line-height: 1.6; }

/* ---------- side by side ---------- */
.in-mx-wrap { position: relative; margin: 0 32px; overflow-x: auto; }
.in-mx { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
.in-mx th, .in-mx td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.in-mx thead th, .in-mx thead td { padding-top: 0; padding-bottom: 14px; border-bottom-color: var(--line-2); }
.in-mx .in-mx__corner { padding-left: 0; text-align: left; vertical-align: bottom; }
.in-mx__corner .mono { color: var(--tone2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.in-mx__h { display: inline-grid; justify-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.in-mx__hi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.in-mx__hi .i { width: 17px; height: 17px; }
.in-mx__st { width: 6px; height: 6px; border-radius: 50%; background: var(--tone2); }
.in-mx__st.is-live { background: var(--ok); }
.in-mx tbody th, .in-mx tfoot th { padding-left: 0; text-align: left; }
.in-mx__c { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.in-mx__ci { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #F2F4F8; color: var(--ink); }
.in-mx__ci .i { width: 13px; height: 13px; }
.in-mx__p { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 12px; font-weight: 500; }
.in-mx__on { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(10, 14, 31, .06); }
.in-mx__off { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #CDD3E0; }
.in-mx tbody tr { transition: background-color .3s; }
.in-mx tbody tr:hover { background: linear-gradient(90deg, rgba(238, 242, 255, .8), rgba(238, 242, 255, 0)); }
.in-mx tbody tr:hover .in-mx__on { background: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .14); }
.in-mx tfoot th, .in-mx tfoot td { border-bottom: 0; padding-top: 16px; }
.in-mx__c--tot { color: var(--muted); font-weight: 500; }
.in-mx__tot { color: var(--ink); font-size: 17px; font-weight: 600; }
.in-mx--dark th, .in-mx--dark td { border-bottom-color: rgba(255, 255, 255, .1); }
.in-mx--dark thead th, .in-mx--dark thead td { border-bottom-color: rgba(255, 255, 255, .18); }
.in-mx--dark .in-mx__corner .mono, .in-mx--dark .in-mx__p, .in-mx--dark .in-mx__c--tot { color: rgba(255, 255, 255, .45); }
.in-mx--dark .in-mx__h, .in-mx--dark .in-mx__c, .in-mx--dark .in-mx__tot { color: #fff; }
.in-mx--dark .in-mx__hi, .in-mx--dark .in-mx__ci { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--cyan); }
.in-mx--dark .in-mx__on { background: var(--cyan); box-shadow: 0 0 0 4px rgba(100, 244, 248, .14); }
.in-mx--dark .in-mx__off { background: rgba(255, 255, 255, .2); }
.in-mx--dark tbody tr:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)); }
.in-mx--dark tbody tr:hover .in-mx__on { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.in-mxp { padding-block: clamp(96px, 10vw, 140px); }
.in-mxp .section-head { margin-bottom: clamp(36px, 4vw, 52px); padding-inline: 32px; }
.in-mxp .ip-head__side .text-link { border-color: rgba(100, 244, 248, .35); color: var(--cyan); }

/* ---------- discretion ---------- */
.in-dc { display: flex; flex-direction: column; align-items: center; margin: 0 32px; padding: clamp(56px, 6vw, 88px) 32px; border-block: 1px solid var(--line); text-align: center; }
.in-dc__badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.in-dc__h { max-width: 22ch; margin-top: 24px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 560; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
.in-dc__h .tone { color: var(--tone2); }
.in-dc__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.in-dc__list li { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 14px; font-weight: 600; }
.in-dc__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F2F4F8; color: var(--ink); }
.in-dc__i .i { width: 14px; height: 14px; }
.in-dc__live { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--ok); }
:root:not(.no-js) .in-dc[data-reveal] .in-dc__h { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform 1s cubic-bezier(.2, .8, .2, 1); }
:root:not(.no-js) .in-dc[data-reveal].is-in .in-dc__h { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { :root:not(.no-js) .in-dc[data-reveal] .in-dc__h { opacity: 1; transform: none; } }

/* ---------- every sector ---------- */
.in-sh > li { padding: 30px 32px 34px; transition: background-color .5s var(--ease); }
.in-sh > li:hover { background: linear-gradient(180deg, #F8FAFF, rgba(248, 250, 255, 0) 75%); }
.in-sh__i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 14px -10px rgba(15, 31, 122, .4); color: var(--ink); transition: color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.in-sh__i .i { width: 19px; height: 19px; }
.in-sh > li:hover .in-sh__i { color: var(--royal); transform: translateY(-3px); }
.in-sh__t { margin-top: 20px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.in-sh__x { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }
.in-band .ip-band__ico { background: #F2F4F8; color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .in-tab { flex: 0 0 auto; }
  .in-sh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-sh > li:nth-child(3) { border-left: 0; }
  .in-sh > li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .in-x .section-head, .in-mxp .section-head { padding-inline: 0; }
  .in-x__ui, .in-mx-wrap { margin-inline: 0; }
  .in-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .in-tabs::-webkit-scrollbar { display: none; }
  .in-pn { grid-template-columns: minmax(0, 1fr); }
  .in-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-row, .in-row--flip { grid-template-columns: minmax(0, 1fr); }
  .in-row__art, .in-row--flip .in-row__art { order: 0; padding: 22px 0; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .in-row__art::before, .in-row__art::after { display: none; }
  .in-row__body { padding: 28px 0 40px; }
  .in-dc { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 640px) {
  .in-pn__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .in-pn__card { padding: 12px; }
  .in-tab { height: 44px; padding-right: 12px; font-size: 13px; }
  .in-board { grid-template-columns: minmax(0, 1fr); }
  .in-sh { grid-template-columns: minmax(0, 1fr); }
  .in-sh > li { border-left: 0; }
  .in-sh > li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .in-fl__n { white-space: normal; }
}
@media (max-width: 900px) {
  .in-mx tbody th, .in-mx tfoot th, .in-mx .in-mx__corner { position: sticky; left: 0; z-index: 1; padding-right: 12px; background: #fff; box-shadow: 1px 0 0 var(--line); }
  .in-mx--dark tbody th, .in-mx--dark tfoot th, .in-mx--dark .in-mx__corner { background: var(--night); box-shadow: 1px 0 0 rgba(255, 255, 255, .12); }
  .in-mx__p { display: none; }
}
@media (max-width: 400px) {
  .optsw a { padding-right: 10px; font-size: 12.5px; }
}

/* ==========================================================================
   36. Industries · each sector plays one verification (sector_story.py,
   industries.js). Static state (no scripts, reduced motion) = finished.
   ========================================================================== */
.in-pn__card { padding: 0; overflow: hidden; }
.in-pn__card .vx-iso { max-width: none; }
.iv { margin: 0; }
.iv__stage { position: relative; }
.iv-iso { display: block; width: 100%; height: auto; overflow: visible; }
.iv-iso * { stroke-linejoin: round; stroke-linecap: round; }
.iv-iso .f-l, .iv-iso .drawer { fill: #F4F6FA; stroke: #9AA1B5; stroke-width: 1.25; }
.iv-iso .f-r, .iv-iso .f-t { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; }
.iv-iso .scr { fill: #FFFFFF; stroke: #B9BFCD; stroke-width: 1; }
.iv-iso .soft { fill: #EEF1F7; stroke: #CDD3E0; stroke-width: 1; }
.iv-iso .slot { fill: none; stroke: #B9C0D2; stroke-width: 1.1; stroke-dasharray: 3 3; }
.iv-iso .i-l, .iv-iso .i-r, .iv-iso .i-t { fill: var(--ink); stroke: var(--ink); stroke-width: 1.25; }
.iv-iso .i-t { stroke: #4A5270; }
.iv-iso .i-t-edge { fill: none; stroke: #4A5270; stroke-width: 1; }
.iv-iso .r-l, .iv-iso .r-r, .iv-iso .r-t, .iv-iso .r-disc { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.iv-iso .r-l { fill: #1B36C4; stroke: #1B36C4; }
.iv-iso .r-t-edge { fill: none; stroke: #8FA3F5; stroke-width: 1; }
.iv-iso .notch { fill: none; stroke: #9AA1B5; stroke-width: 2.4; }
.iv-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.iv-iso .ln-l { fill: none; stroke: #DDE2EC; stroke-width: 1; }
.iv-iso .ln-d { fill: none; stroke: #4A5270; stroke-width: 1.5; }
.iv-iso .ln-i { fill: none; stroke: #8A91A8; stroke-width: 1.4; }
.iv-iso .ln-w { fill: none; stroke: #FFFFFF; stroke-width: 1.5; }
.iv-iso .ln-w2 { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.3; }
.iv-iso .ln-none { fill: none; stroke: none; }
.iv-iso .flow, .iv-iso .dash { fill: none; stroke: #9AA1B5; stroke-width: 1.25; stroke-dasharray: 3 3; }
.iv-iso .photo-head { fill: #FFFFFF; stroke: none; opacity: .92; }
.iv-iso .photo-body { fill: none; stroke: #FFFFFF; stroke-width: 1.5; opacity: .92; }
.iv-iso .photo-g { fill: #C9CFDC; stroke: none; }
.iv-iso .photo-gb { fill: none; stroke: #C9CFDC; stroke-width: 1.5; }
.iv-iso .node { fill: #9AA1B5; }
.iv-iso .node-r { fill: var(--royal); }
.iv-iso .node-w { fill: #FFFFFF; }
.iv-iso .tick-w { fill: none; stroke: #FFFFFF; stroke-width: 2.2; }
.iv-iso .dot-ok { fill: var(--ok); }
.iv-iso .dot-warn { fill: var(--warn); }
.iv-iso .dot-bad { fill: var(--bad); }
.iv-iso .cdl-dn { fill: #DDE2EC; stroke: #9AA1B5; stroke-width: 1; }
.iv-iso .coin-in { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.iv-iso .scanplane-v { fill: var(--royal); fill-opacity: .08; stroke: var(--royal); stroke-opacity: .5; stroke-width: 1; }
.iv-iso .iv-ph__ic { fill: none; stroke: var(--royal); stroke-width: 2.6; }
/* the check tiles */
.iv-tl { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.iv-tl__top { fill: #FFFFFF; stroke: #9AA1B5; stroke-width: 1.25; transition: fill .35s, stroke .35s; }
.iv-tl__ic { fill: none; stroke: #4A5270; stroke-width: 2.6; transition: stroke .35s; }
.iv-tl.is-lit .iv-tl__top { fill: #E8EDFF; stroke: #9AA9E8; }
.iv-tl.is-lit .iv-tl__ic { stroke: var(--royal); }
.iv-tl.is-cur { transform: translateY(-4px); }
.iv-tl.is-cur .iv-tl__top { fill: var(--royal); stroke: var(--royal); }
.iv-tl.is-cur .iv-tl__ic { stroke: #FFFFFF; }
.iv-tl--warn.is-lit .iv-tl__top { fill: #FFF1DA; stroke: #F5B754; }
.iv-tl--warn.is-lit .iv-tl__ic { stroke: var(--warn-ink); }
.iv-tl--warn.is-cur .iv-tl__top { fill: var(--warn); stroke: var(--warn); }
.iv-tl--warn.is-cur .iv-tl__ic { stroke: #FFFFFF; }
/* the packet */
.iv-pk { fill: var(--royal); stroke: #FFFFFF; stroke-width: 2; opacity: 0; transition: transform .75s cubic-bezier(.5, 0, .25, 1), opacity .3s; }
.iv.is-check .iv-pk, .iv.is-rules .iv-pk { opacity: 1; }
.iv--review.is-done .iv-pk { fill: var(--warn); }
/* the rules block and the way out it chooses */
.iv-rules .i-t { transition: fill .4s; }
.iv.is-rules .iv-rules .i-t { fill: #2B3352; }
.iv-path { transition: stroke .4s; }
.iv--approve.is-done .iv-path--approve, .iv--approve.is-rules .iv-path--approve { stroke: var(--royal); stroke-dasharray: none; stroke-width: 1.6; }
.iv--review.is-done .iv-path--review, .iv--review.is-rules .iv-path--review { stroke: var(--warn); stroke-dasharray: none; stroke-width: 1.6; }
/* the phone */
.iv-btn polygon { transition: fill .3s; }
.iv.is-apply .iv-btn polygon { fill: #5B82FF; stroke: #5B82FF; }
/* the outcome plays out */
.iv-o { transform-box: fill-box; transform-origin: center bottom; transition: opacity .5s var(--ease), transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.iv.is-run:not(.is-done) .iv-o { opacity: 0; transform: translateY(-10px); transition-delay: 0s; transition-duration: .2s; }
.iv.is-run:not(.is-done) .iv-o--grow { transform: scaleY(.1); }
.iv.is-run:not(.is-done) .iv-drop { transform: translateY(-34px); }
.iv.is-done .iv-o--2 { transition-delay: .25s; } .iv.is-done .iv-o--3 { transition-delay: .5s; } .iv.is-done .iv-o--4 { transition-delay: .75s; }
.iv.is-done .iv-o--seal { transition-delay: 1s; }
.iv.is-done .iv-o--open { transition-delay: .5s; }
.iv-o--scan { opacity: 0; }
.iv.is-run.is-done .iv-o--scan { animation: sc-scan 1.6s ease-in-out both; }
@keyframes sc-scan { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-30px, 17px); } }
.iv.is-run .iv-march { animation: iv-march 1.4s linear infinite; }
@keyframes iv-march { to { stroke-dashoffset: -12; } }
/* the labels over the drawing */
.iv-lb, .iv-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4, 0 12px 24px -14px rgba(15, 31, 122, .45); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); transition: opacity .4s var(--ease), transform .5s cubic-bezier(.2, .8, .2, 1); }
.iv-lb i { width: 7px; height: 7px; border-radius: 50%; background: var(--royal); }
.iv-lb--rule { background: var(--ink); box-shadow: 0 12px 24px -12px rgba(7, 10, 23, .6); color: #fff; }
.iv-lb--out { max-width: 260px; white-space: normal; text-align: left; }
.iv-lb--out i { flex: none; background: var(--ok); }
.iv--review .iv-lb--out i { background: var(--warn); }
.iv.is-run .iv-lb--rule, .iv.is-run .iv-lb--out { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); }
.iv.is-run.is-rules .iv-lb--rule, .iv.is-run.is-done .iv-lb--out { opacity: 1; transform: translate(-50%, -100%); }
.iv:not(.is-run) .iv-lb--rule { display: none; }
.iv.is-run.is-done .iv-lb--out { transition-delay: .5s; }
.iv-chip { display: grid; gap: 1px; padding: 7px 12px 7px 11px; border-radius: 12px; background: var(--ink); box-shadow: 0 14px 28px -14px rgba(7, 10, 23, .7); color: #fff; opacity: 0; transition: opacity .3s, left .75s cubic-bezier(.5, 0, .25, 1), top .75s cubic-bezier(.5, 0, .25, 1); }
.iv-chip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); transform: rotate(45deg); }
.iv-chip b { font-size: 12px; }
.iv-chip span { display: inline-flex; align-items: center; gap: 5px; color: #75E0A7; font-size: 11px; font-weight: 500; }
.iv-chip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.iv-chip.is-warn span { color: #FEC84B; }
.iv-chip.is-warn span::before { background: var(--warn); }
.iv.is-check .iv-chip { opacity: 1; }
.iv-chip.is-pop { animation: sc-pop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sc-pop { 0% { transform: translate(-50%, -100%) scale(.85); } 100% { transform: translate(-50%, -100%) scale(1); } }
/* the four steps, under the drawing */
.iv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.iv-steps__s { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.25; transition: color .3s; }
.iv-steps__s + .iv-steps__s { border-left: 1px solid var(--line); }
.iv-steps__s .mono { color: var(--tone2); font-size: 10.5px; font-weight: 500; transition: color .3s; }
.iv-steps__s::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--royal); transform: scaleX(0); transform-origin: 0 50%; }
.iv-steps__s.is-past { color: var(--ink); }
.iv-steps__s.is-past::after { transform: none; background: #C7D2FA; }
.iv-steps__s.is-on { color: var(--royal); }
.iv-steps__s.is-on .mono { color: var(--royal); }
.iv-steps__s.is-on::after { animation: sc-step 1.2s ease-out forwards; }
@keyframes sc-step { to { transform: none; } }
.iv:not(.is-run) .iv-steps__s { color: var(--ink); }
/* the flow list beside the drawing, in step */
.in-fl__s { transition: background-color .3s, color .3s; }
.in-fl--dark .in-fl__s.is-cur { margin-inline: -10px; padding-inline: 10px; border-radius: 10px; background: rgba(37, 71, 233, .28); color: #fff; }
.in-fl--dark .in-fl__s.is-cur .in-fl__i { background: var(--royal); box-shadow: none; color: #fff; }
.in-fl--dark .in-fl__s--warn.is-cur { background: rgba(247, 144, 9, .2); }
.in-fl--dark .in-fl__s--warn.is-cur .in-fl__i { background: var(--warn); }
.in-fl--dark .in-fl__s.is-lit .in-fl__i { color: #75E0A7; }
.in-fl--dark .in-fl__s--warn.is-lit .in-fl__i { color: #FEC84B; }
.in-fl__tot b { transition: color .3s; }
/* tabs: a sliding pill marks the chosen sector */
.in-tabs { position: relative; }
.in-tabs__ind { position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--w, 0); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translateX(var(--x, 0)); transition: transform .55s cubic-bezier(.2, .8, .2, 1), width .55s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.in-tabs.has-ind .in-tabs__ind { opacity: 1; }
.in-tab { position: relative; z-index: 1; }
.in-tabs.has-ind .in-tab[aria-selected="true"] { background: transparent; }
/* next sector */
.in-pn__next { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); }
.in-next { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .55); font: 500 13px/1.3 var(--font); text-align: left; cursor: pointer; }
.in-next b { color: #fff; font-size: 15px; font-weight: 600; }
.in-next__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; transition: background-color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.in-next__i .i { width: 15px; height: 15px; }
.in-next:hover .in-next__i, .in-next:focus-visible .in-next__i { background: #fff; color: var(--ink); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .iv-tl, .iv-pk, .iv-o, .iv-lb, .iv-chip, .in-tabs__ind { transition: none; }
  .iv-chip.is-pop, .iv-steps__s.is-on::after, .iv.is-run .iv-march { animation: none; }
}
@media (max-width: 640px) {
  .iv-lb--who, .iv-lb--rule { display: none; }
  .iv-lb--out { max-width: 180px; font-size: 11px; }
  .iv-chip b { font-size: 11px; }
  .iv-chip span { font-size: 10px; }
  .iv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-steps__s:nth-child(3) { border-left: 0; }
  .iv-steps__s:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- the stage: drawing and live flow list in one card ---------- */
.in-pn { display: block; padding-top: 28px; }
.in-pn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: 26px; }
.in-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 110px -50px rgba(0, 0, 0, .85); }
.in-stage__art { padding: 6px 10px 0; background: radial-gradient(70% 70% at 45% 55%, rgba(37, 71, 233, .05), rgba(37, 71, 233, 0) 72%); }
.in-stage__side { display: flex; flex-direction: column; justify-content: center; padding: 26px 28px; border-left: 1px solid var(--line); background: #FAFBFE; }
.in-stage__side .in-fl { margin-top: 0; }
.in-stage .iv-steps { grid-column: 1 / -1; }
.iv-iso .floor { fill: #F8F9FD; stroke: #E3E7F1; stroke-width: 1; }
/* the live flow list, on white */
.in-fl--live .in-fl__s { margin-inline: -10px; padding-inline: 10px; border-radius: 10px; }
.in-fl--live .in-fl__s::before { width: 20px; }
.in-fl--live .in-fl__s.is-cur { border-bottom-color: transparent; background: #EEF2FF; color: var(--ink); }
.in-fl--live .in-fl__s.is-cur .in-fl__i { background: var(--royal); box-shadow: none; color: #fff; }
.in-fl--live .in-fl__s--warn.is-cur { background: var(--warn-bg); }
.in-fl--live .in-fl__s--warn.is-cur .in-fl__i { background: var(--warn); }
.in-fl--live .in-fl__s.is-lit .in-fl__i { box-shadow: inset 0 0 0 1px rgba(18, 183, 106, .45); color: var(--ok-ink); }
.in-fl--live .in-fl__s--warn.is-lit .in-fl__i { box-shadow: inset 0 0 0 1px rgba(247, 144, 9, .5); color: var(--warn-ink); }
.in-fl--live .in-fl__s.is-cur .in-fl__p { color: var(--royal); font-weight: 600; }
/* the words under the stage */
.in-pn__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); padding-top: clamp(36px, 4vw, 52px); }
.in-pn__body .in-pn__cols { margin-top: 0; }
@media (max-width: 1023px) {
  .in-stage { grid-template-columns: minmax(0, 1fr); }
  .in-stage__side { border-top: 1px solid var(--line); border-left: 0; }
  .in-pn__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .in-stage { border-radius: 20px; }
  .in-stage__art { padding: 4px 0 0; }
  .in-stage__side { padding: 20px; }
}
/* the three ways out of your rules */
.iv-way { position: absolute; z-index: 1; padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #E3E8F4; color: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .4s, background-color .4s, color .4s, box-shadow .4s; }
.iv.is-run.is-apply .iv-way, .iv.is-run.is-check .iv-way { opacity: 0; }
.iv.is-rules .iv-way--approve.is-chosen, .iv.is-done .iv-way--approve.is-chosen { background: var(--royal); box-shadow: none; color: #fff; }
.iv.is-rules .iv-way--review.is-chosen, .iv.is-done .iv-way--review.is-chosen { background: var(--warn); box-shadow: none; color: #fff; }
@media (max-width: 640px) { .iv-way { display: none; } }

/* the applicant and the outcome, in the stage's top corners */
.iv-card { position: absolute; top: 16px; z-index: 2; display: grid; gap: 3px; max-width: 46%; padding: 10px 14px 11px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px #E3E8F4, 0 14px 30px -20px rgba(15, 31, 122, .5); pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.iv-card--who { top: auto; bottom: 16px; left: 18px; }
.iv-card--out { right: 18px; text-align: left; }
.iv-card__k { color: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.iv-card b { color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.iv-card__res { display: flex; align-items: flex-start; gap: 8px; }
.iv-card__res i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(18, 183, 106, .16); }
.iv--review .iv-card__res i { background: var(--warn); box-shadow: 0 0 0 3px rgba(247, 144, 9, .18); }
.iv-card__wait { display: none; color: var(--muted) !important; font-weight: 500 !important; }
.iv.is-run:not(.is-done) .iv-card__wait { display: block; }
.iv.is-run:not(.is-done) .iv-card__res { display: none; }
.iv.is-run.is-done .iv-card--out { animation: iv-out .6s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes iv-out { from { transform: translateY(6px); box-shadow: 0 0 0 2px var(--royal), 0 14px 30px -20px rgba(15, 31, 122, .5); } }
.iv-card--who b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--royal); vertical-align: 1px; }
.iv.is-run.is-apply .iv-card--who { animation: iv-out .6s cubic-bezier(.3, 1.3, .5, 1); }
@media (prefers-reduced-motion: reduce) { .iv.is-run.is-done .iv-card--out, .iv.is-run.is-apply .iv-card--who { animation: none; } }
@media (max-width: 640px) {
  .iv-card { top: 10px; max-width: 60%; padding: 8px 10px; }
  .iv-card--who { display: none; }
  .iv-card--out { right: 10px; }
  .iv-card b { font-size: 12px; }
}

/* ---------- the words under the stage: fewer labels, more air ---------- */
.in-x .in-pn__body { display: block; padding-top: clamp(56px, 6vw, 80px); }
.ib-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 5vw, 80px); }
.ib-kick { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--cyan); font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.ib-kick .mono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-size: 11px; letter-spacing: 0; }
.ib-t { margin-top: 22px; font-size: clamp(34px, 3.8vw, 52px); font-weight: 560; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.ib-t .ink { color: #fff; }
.ib-t .tone { color: rgba(255, 255, 255, .5); }
.ib-head__r { display: grid; justify-items: start; gap: 18px; padding-bottom: 6px; }
.ib-x { max-width: 46ch; margin: 0; color: rgba(255, 255, 255, .72); font-size: 17.5px; line-height: 1.65; }
.ib-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid rgba(255, 255, 255, .12); }
.ib-col { padding: 36px 0 8px; }
.ib-col + .ib-col { padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid rgba(255, 255, 255, .12); }
.ib-col:first-child { padding-right: clamp(32px, 4vw, 64px); }
.ib-col__k { margin: 0 0 8px; color: rgba(255, 255, 255, .45); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ib-list { margin: 0; padding: 0; list-style: none; }
.ib-list li { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.ib-list li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.ib-stop__i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--cyan); transition: background-color .3s, color .3s; }
.ib-stop__i .i { width: 18px; height: 18px; }
.ib-stop:hover .ib-stop__i { background: var(--cyan); color: var(--ink); }
.ib-stop__b { display: grid; gap: 4px; padding-top: 1px; }
.ib-stop__t { color: #fff; font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.ib-stop__by { color: rgba(255, 255, 255, .5); font-size: 14px; }
.ib-help__i { display: grid; flex: none; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: rgba(18, 183, 106, .16); color: #75E0A7; }
.ib-help__i .i { width: 13px; height: 13px; stroke-width: 2.6; }
.ib-help__t { color: rgba(255, 255, 255, .84); font-size: 17px; line-height: 1.45; }
.ib-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 28px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ib-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; font-size: 15px; }
.ib-rule__k { color: rgba(255, 255, 255, .45); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ib-foot .in-next { margin-left: auto; }
@media (max-width: 900px) {
  .ib-head, .ib-cols { grid-template-columns: minmax(0, 1fr); }
  .ib-head { gap: 22px; }
  .ib-col + .ib-col { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .ib-col:first-child { padding-right: 0; }
  .ib-foot .in-next { margin-left: 0; }
}
@media (max-width: 640px) {
  .ib-list li { padding: 16px 0; }
  .ib-stop__t, .ib-help__t { font-size: 16px; }
}

/* ==========================================================================
   37. Pricing. Ink and grey by default; royal only where it carries meaning
   (the selected switch, the plan that fits); one dark panel for contrast.
   ========================================================================== */
.ph--pr { padding-bottom: clamp(48px, 5vw, 80px); }
.pr-anchors { display: flex; flex-wrap: wrap; justify-content: center; margin: 38px 0 0; padding: 0; list-style: none; }
.pr-anchors li { display: grid; justify-items: center; gap: 2px; padding: 4px clamp(18px, 3vw, 40px); }
.pr-anchors li + li { border-left: 1px solid var(--line-2); }
.pr-anchors b { color: var(--ink); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pr-anchors span { color: var(--muted); font-size: 13.5px; }

/* ---------- plans: rows line up across the three cards ---------- */
.pr-plans { padding-bottom: 0; }
.pp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 16px; margin: 0; padding: 0 32px; list-style: none; }
.pp { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; padding: 28px 28px 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -50px rgba(15, 31, 122, .45); transition: box-shadow .45s var(--ease), transform .6s cubic-bezier(.2, .8, .2, 1); }
.pp:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -46px rgba(15, 31, 122, .55); }
.pp__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.pp__n { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.pp__fit { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--royal); color: #fff; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pp.is-fit { box-shadow: 0 0 0 2px var(--royal), 0 40px 70px -46px rgba(37, 71, 233, .55); }
.pp.is-fit .pp__fit { opacity: 1; transform: none; }
.pp__for { margin: 8px 0 0; color: var(--body); font-size: 14.5px; line-height: 1.5; }
.pp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 24px 0 0; }
.pp__price b { color: var(--ink); font-size: clamp(42px, 4vw, 56px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pp__price span { color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.pp__how { display: grid; margin: 20px 0 0; padding: 4px 16px; border-radius: 16px; background: #F7F8FB; box-shadow: inset 0 0 0 1px var(--line); }
.pp__how > div { display: grid; gap: 2px; padding: 10px 0; }
.pp__how > div + div { border-top: 1px dashed var(--line-2); }
.pp__how dt { color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.pp__how dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 500; }
.pp__cta { margin-top: 22px; }
.pp__cta .btn { width: 100%; justify-content: center; }
.pp__f { display: grid; align-content: start; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pp__f li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.pp__f li:last-child { border-bottom: 0; }
.pp__f .i { flex: none; width: 17px; height: 17px; margin-top: 1px; padding: 2px; border-radius: 50%; background: #F2F4F8; color: var(--ink); stroke-width: 2.6; }
/* Growth: the one dark card */
.pp--growth { background: var(--night); box-shadow: 0 0 0 1px rgba(10, 14, 31, .9), 0 40px 70px -40px rgba(7, 10, 23, .7); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; }
.pp--growth::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 45% at 100% 0%, rgba(37, 71, 233, .45), rgba(37, 71, 233, 0) 70%); }
.pp--growth:hover { box-shadow: 0 0 0 1px rgba(10, 14, 31, .9), 0 50px 80px -40px rgba(7, 10, 23, .8); }
.pp--growth.is-fit { box-shadow: 0 0 0 2px var(--cyan), 0 50px 80px -40px rgba(7, 10, 23, .8); }
.pp--growth.is-fit .pp__fit { background: var(--cyan); color: var(--ink); }
.pp--growth .pp__n, .pp--growth .pp__price b { color: #fff; }
.pp--growth .pp__price span, .pp--growth .pp__for { color: rgba(255, 255, 255, .64); }
.pp--growth .pp__f { border-top-color: rgba(255, 255, 255, .12); }
.pp--growth .pp__f li { border-bottom-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .86); }
.pp--growth .pp__f .i { background: rgba(100, 244, 248, .14); color: var(--cyan); }
.pp__credit { display: grid; align-content: center; gap: 10px; margin: 20px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pp__credit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(255, 255, 255, .62); font-size: 13.5px; }
.pp__credit-row b { color: #fff; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pp__credit-v { display: inline-flex; align-items: center; gap: 8px; }
.pp__credit-v em { padding: 2px 7px; border-radius: 999px; background: rgba(100, 244, 248, .16); color: var(--cyan); font-size: 11.5px; font-style: normal; font-weight: 600; }
.pp__credit-v b { color: var(--cyan); }
.pp__credit-bar { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--cyan); }
.pp__credit-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 83.33%; border-right: 2px solid var(--night); background: #fff; transform-origin: 0 50%; }
:root:not(.no-js) .pp-list[data-reveal] .pp__credit-bar { background: rgba(100, 244, 248, .2); transition: background-color .6s ease 1.2s; }
:root:not(.no-js) .pp-list[data-reveal].is-in .pp__credit-bar { background: var(--cyan); }
:root:not(.no-js) .pp-list[data-reveal] .pp__credit-bar i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }
:root:not(.no-js) .pp-list[data-reveal].is-in .pp__credit-bar i { transform: none; }
/* included on every plan */
.pr-inc { margin: 20px 32px 0; padding: 26px 28px 8px; border-radius: 26px; background: #FAFBFE; box-shadow: inset 0 0 0 1px var(--line); }
.pr-inc__k { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; color: var(--ink); font-size: 16px; font-weight: 600; }
.pr-inc__k .mono { color: var(--tone2); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.pr-inc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.pr-inc__list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.pr-inc__list li:nth-child(-n+3) { border-top: 0; }
.pr-inc__i { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); transition: color .3s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pr-inc__i .i { width: 18px; height: 18px; }
.pr-inc__list li:hover .pr-inc__i { color: var(--royal); transform: translateY(-2px); }
.pr-inc__b { display: grid; gap: 3px; color: var(--body); font-size: 14px; line-height: 1.45; }
.pr-inc__b b { color: var(--ink); font-size: 15px; font-weight: 600; }

/* ---------- the estimator ---------- */
.pr-est { padding-bottom: clamp(64px, 7vw, 96px); }
.pe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); align-items: start; gap: 20px; padding: 0 32px; }
.pe__cfg { display: grid; padding: 8px 28px 10px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -50px rgba(15, 31, 122, .45); }
.pe-step { padding: 24px 0 26px; }
.pe-step + .pe-step { border-top: 1px solid var(--line); }
.pe-step__k { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.pe-step__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
/* example flows, as a segmented control */
.pe-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 16px; background: #F2F4F8; }
.pe-seg__o { position: relative; cursor: pointer; }
.pe-seg__o input { position: absolute; opacity: 0; pointer-events: none; }
.pe-seg__o span { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; height: 100%; padding: 10px 12px; border-radius: 12px; color: var(--muted); transition: background-color .3s, box-shadow .3s, color .3s; }
.pe-seg__o b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.pe-seg__o em { color: var(--tone2); font-size: 12px; font-style: normal; }
.pe-seg__o:hover span { color: var(--ink); }
.pe-seg__o input:checked + span { background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .08), 0 6px 14px -8px rgba(15, 31, 122, .4); color: var(--ink); }
.pe-seg__o input:checked + span em { color: var(--royal); }
.pe-seg__o input:focus-visible + span { outline: 2px solid var(--royal); outline-offset: 2px; }
/* start from an industry */
.pe-ind-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.pe-ind__k { margin: 0; color: var(--muted); font-size: 13.5px; }
.pe-inds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pe-ind { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 13px/1 var(--font); cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.pe-ind .i { width: 14px; height: 14px; color: var(--muted); transition: color .3s; }
.pe-ind em { color: var(--tone2); font-size: 11.5px; font-style: normal; transition: color .3s; }
.pe-ind:hover { box-shadow: inset 0 0 0 1px var(--ink-2); color: var(--ink); }
.pe-ind[aria-pressed="true"] { background: var(--ink); box-shadow: none; color: #fff; }
.pe-ind[aria-pressed="true"] .i { color: var(--cyan); }
.pe-ind[aria-pressed="true"] em { color: rgba(255, 255, 255, .6); }
.pe-ind:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
/* the checks */
.pe-grps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 22px; }
.pe-grp { min-width: 0; margin: 0; padding: 0; border: 0; }
.pe-grp__k { padding: 0 0 6px; color: var(--tone2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.pe-grp__list { margin: 0; padding: 0; list-style: none; }
.pe-ck { border-top: 1px solid var(--line); }
.pe-ck__l { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-radius: 10px; cursor: pointer; transition: background-color .3s; }
.pe-ck__l:hover { background: #F7F8FB; }
.pe-ck__in { position: absolute; opacity: 0; pointer-events: none; }
.pe-ck__sw { position: relative; width: 32px; height: 19px; border-radius: 10px; background: #D5DBE8; transition: background-color .25s; }
.pe-ck__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .25); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.pe-ck__in:checked + .pe-ck__sw { background: var(--royal); }
.pe-ck__in:checked + .pe-ck__sw::after { transform: translateX(13px); }
.pe-ck__in:focus-visible + .pe-ck__sw { outline: 2px solid var(--royal); outline-offset: 3px; }
.pe-ck__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #F2F4F8; color: var(--tone2); transition: color .3s, background-color .3s; }
.pe-ck__ic .i { width: 15px; height: 15px; }
.pe-ck__n { color: var(--muted); font-size: 14.5px; font-weight: 600; line-height: 1.3; transition: color .3s; }
.pe-ck__p { color: var(--tone2); font-size: 13px; white-space: nowrap; transition: color .3s; }
.pe-ck__p small { display: block; margin-top: 1px; color: var(--tone2); font-size: 10.5px; text-align: right; }
.pe-ck__p { text-align: right; }
.pe-ck__in:checked ~ .pe-ck__ic { background: #EEF1FA; color: var(--ink); }
.pe-ck__in:checked ~ .pe-ck__n, .pe-ck__in:checked ~ .pe-ck__p { color: var(--ink); }
.pe-ck__l:hover .pe-ck__n { color: var(--ink); }
/* volume */
.pe-vol { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 20px; }
.pe-vol__range { --p: 33.3%; grid-column: 1; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pe-vol__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p), #DDE2EC var(--p)); }
.pe-vol__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p), #DDE2EC var(--p)); }
.pe-vol__range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -2px rgba(15, 31, 122, .35); -webkit-appearance: none; appearance: none; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.pe-vol__range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -2px rgba(15, 31, 122, .35); }
.pe-vol__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.pe-vol__range:focus-visible { outline: 2px solid var(--royal); outline-offset: 6px; border-radius: 4px; }
.pe-vol__ticks { display: flex; grid-column: 1; grid-row: 2; justify-content: space-between; color: var(--tone2); font-size: 11px; }
.pe-vol__num { display: inline-flex; grid-column: 2; grid-row: 1 / span 2; align-items: center; gap: 4px; height: 50px; padding: 0 14px 0 4px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font-size: 13px; transition: box-shadow .25s; }
.pe-vol__num:focus-within { box-shadow: inset 0 0 0 2px var(--royal); }
.pe-vol__num input { width: 120px; height: 46px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: 600 19px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; outline: 0; }
/* the summary */
.pe__sum { position: sticky; top: 100px; }
@media (max-height: 820px) { .pe__sum { position: static; } }
.pe-sum { position: relative; overflow: hidden; isolation: isolate; padding: 26px 26px 20px; border-radius: 26px; background: var(--night); box-shadow: 0 40px 80px -40px rgba(7, 10, 23, .75); color: rgba(255, 255, 255, .72); }
.pe-sum::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 45% at 100% 0%, rgba(37, 71, 233, .4), rgba(37, 71, 233, 0) 70%); }
.pe-sum__k { margin: 0; color: rgba(255, 255, 255, .5); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pe-sum__per { display: grid; gap: 6px; margin: 12px 0 0; }
.pe-sum__per b { color: #fff; font-size: clamp(48px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pe-sum__per > span { color: rgba(255, 255, 255, .6); font-size: 14px; }
.pe-bar { display: flex; gap: 2px; height: 8px; margin: 18px 0 0; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.pe-bar__s { flex: 0 0 0; min-width: 0; transition: flex-grow .5s cubic-bezier(.2, .8, .2, 1); }
.pe-bar__s--id { background: #64F4F8; }
.pe-bar__s--live { background: #1A9BF4; }
.pe-bar__s--fm { background: #5B82FF; }
.pe-bar__s--age { background: #B692F6; }
.pe-bar__s--email { background: #9FB2FF; }
.pe-bar__s--poa { background: #FDB022; }
.pe-bar__s--aml { background: #FFFFFF; }
.pe-bar__s--ip { background: #75E0A7; }
.pe-bar__s--fs { background: #2ED3B7; }
.pe-bar__s--vid { background: #F79009; }
.pe-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.pe-leg__i { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; }
.pe-leg__i[hidden] { display: none; }
.pe-leg__d { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.pe-leg__n { flex: 1; overflow: hidden; color: rgba(255, 255, 255, .66); text-overflow: ellipsis; white-space: nowrap; }
.pe-leg__p { color: #fff; font-family: var(--mono); font-size: 12px; }
.pe-sum__dl { margin: 16px 0 0; }
.pe-sum__dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.pe-sum__dl dt { color: rgba(255, 255, 255, .62); font-size: 14px; }
.pe-sum__dl dd { margin: 0; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pe-fit { margin-top: 6px; padding: 15px 16px 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pe-fit__k { margin: 0; color: var(--cyan); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.pe-fit__n { margin: 5px 0 0; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.pe-fit__x { margin: 4px 0 0; color: rgba(255, 255, 255, .68); font-size: 13.5px; line-height: 1.5; }
.pe-fit.is-empty .pe-fit__k { color: rgba(255, 255, 255, .45); }
.pe-sum__cta { margin: 16px 0 0; }
.pe-sum__cta .btn { width: 100%; justify-content: space-between; }
.pe-sum__share { margin: 10px 0 0; text-align: center; }
.pe-share { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: rgba(255, 255, 255, .6); font: 500 13px/1.3 var(--font); cursor: pointer; word-break: break-all; transition: background-color .25s, color .25s; }
.pe-share .i { flex: none; width: 14px; height: 14px; }
.pe-share:hover, .pe-share:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.pe-note { margin: 12px 4px 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.pe-mini { display: none; }
:root.no-js .pe-share, :root.no-js .pe-seg, :root.no-js .pe-ind-wrap, :root.no-js .pe-leg { display: none; }

/* ---------- only what runs ---------- */
.pw-sec { padding-block: clamp(96px, 10vw, 140px); }
.pw-sec .section-head { margin-bottom: clamp(36px, 4vw, 52px); padding-inline: 32px; }
.pw { margin: 0 32px; }
.pw__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
:root.no-js .pw__bar, :root.no-js .pw-pass { display: none; }
.pw-flow { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pw-flow__o { position: relative; cursor: pointer; }
.pw-flow__o input { position: absolute; opacity: 0; pointer-events: none; }
.pw-flow__o span { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border-radius: 12px; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 600; transition: background-color .3s, color .3s; }
.pw-flow__o em { color: rgba(255, 255, 255, .45); font-size: 12px; font-style: normal; font-weight: 500; transition: color .3s; }
.pw-flow__o:hover span { color: #fff; }
.pw-flow__o input:checked + span { background: #fff; color: var(--ink); }
.pw-flow__o input:checked + span em { color: var(--royal); }
.pw-flow__o input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pw__hint { display: flex; align-items: center; gap: 10px; margin: 0; color: rgba(255, 255, 255, .62); font-size: 14px; }
.pw__hint-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #F97066; }
.pw__hint-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(249, 112, 102, .6); animation: pw-ping 2s ease-out infinite; }
@keyframes pw-ping { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.pw-track { min-width: 0; margin: 0; padding: 0; border: 0; }
.pw-ts { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pw-ts--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-ts--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-ts--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pw-t { position: relative; min-width: 0; animation: pw-in .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes pw-in { from { opacity: 0; transform: translateY(10px); } }
/* the joins between checks */
.pw-t::after { content: ""; position: absolute; top: 50%; right: -16px; z-index: 1; width: 16px; height: 2px; background: rgba(117, 224, 167, .7); transition: background-color .4s; }
.pw-t:last-child::after, .pw-ts--c4 .pw-t:nth-child(4n)::after { display: none; }
.pw-t.is-stop::after, .pw-t.is-skip::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 3px, transparent 3px 6px); }
.pw-t__l { display: block; height: 100%; cursor: pointer; }
.pw-r { position: absolute; opacity: 0; pointer-events: none; }
.pw-t__c { position: relative; display: grid; align-content: start; gap: 4px; height: 100%; padding: 16px 16px 15px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .4s, box-shadow .4s, opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
.pw-t__l:hover .pw-t__c { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); transition-delay: 0s; }
.pw-r:focus-visible + .pw-t__c { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pw-t__no { position: absolute; top: 16px; right: 16px; color: rgba(255, 255, 255, .38); font-size: 11px; }
.pw-t__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(117, 224, 167, .14); color: #75E0A7; transition: background-color .4s, color .4s; }
.pw-t__i .i { width: 17px; height: 17px; }
.pw-t__n { margin-top: 8px; color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pw-t__p { color: #fff; font-size: 14px; transition: color .4s; }
.pw-t__s { color: #75E0A7; font-size: 12px; font-weight: 600; transition: color .4s; }
.pw-t__h { position: absolute; right: 14px; bottom: 14px; padding: 3px 8px; border-radius: 999px; background: rgba(240, 68, 56, .18); color: #FDA29B; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s; }
.pw-t__l:hover .pw-t__h { opacity: 1; transform: none; }
.pw-t.is-stop .pw-t__h { display: none; }
.pw-t.is-stop .pw-t__c { background: rgba(240, 68, 56, .13); box-shadow: inset 0 0 0 1.5px rgba(249, 112, 102, .7); }
.pw-t.is-stop .pw-t__i { background: rgba(240, 68, 56, .22); color: #FDA29B; }
.pw-t.is-stop .pw-t__s { color: #FDA29B; }
.pw-t.is-skip .pw-t__c { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); opacity: .6; }
.pw-t.is-skip .pw-t__l:hover .pw-t__c { opacity: .9; }
.pw-t.is-skip .pw-t__i { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); }
.pw-t.is-skip .pw-t__n { color: rgba(255, 255, 255, .72); }
.pw-t.is-skip .pw-t__p { color: rgba(255, 255, 255, .5); text-decoration: line-through; }
.pw-t.is-skip .pw-t__s { color: rgba(255, 255, 255, .5); }
.pw-pass { margin-top: 14px; }
.pw-pass__l { position: relative; display: inline-flex; cursor: pointer; }
.pw-pass__t { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .75); font-size: 13.5px; font-weight: 600; transition: background-color .3s, color .3s, box-shadow .3s; }
.pw-pass__t::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); transition: box-shadow .3s; }
.pw-pass__l:hover .pw-pass__t { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.pw-pass.is-on .pw-pass__t { background: rgba(117, 224, 167, .12); box-shadow: inset 0 0 0 1px rgba(117, 224, 167, .55); color: #fff; }
.pw-pass.is-on .pw-pass__t::before { box-shadow: inset 0 0 0 4.5px #75E0A7; }
.pw-pass .pw-r:focus-visible + .pw-pass__t { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pw-bill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); align-items: center; margin-top: 26px; padding: 6px 8px; border-radius: 22px; background: #fff; color: var(--ink); }
.pw-bill__c { display: grid; gap: 4px; margin: 0; padding: 16px 20px; color: var(--body); font-size: 13.5px; }
.pw-bill__c + .pw-bill__c { border-left: 1px solid var(--line); }
.pw-bill__c b { color: var(--ink); font-size: 34px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pw-bill__c--saved b { color: var(--tone2); }
.pw.has-skip .pw-bill__c--saved b { color: var(--ok-ink); }
.pw-bill__x { margin: 0; padding: 16px 20px; border-left: 1px solid var(--line); color: var(--body); font-size: 14.5px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .pw-t { animation: none; }
  .pw__hint-dot::after { animation: none; }
  .pw-t__c { transition-delay: 0s; }
}

/* ---------- the price list ---------- */
.pl2-wrap { margin: 0 32px; }
.pl2 { width: 100%; border-collapse: collapse; font-size: 15px; }
.pl2 thead th { padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-2); color: var(--tone2); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.pl2 thead th:last-child { padding-right: 0; text-align: right; }
.pl2__g th { padding: 26px 0 10px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-align: left; }
.pl2 tbody tr:not(.pl2__g) { transition: background-color .3s; }
.pl2 tbody tr:not(.pl2__g):hover { background: linear-gradient(90deg, rgba(238, 242, 255, .7), rgba(238, 242, 255, 0)); }
.pl2 tbody th[scope="row"], .pl2 td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.pl2__c { display: flex; align-items: center; gap: 14px; }
.pl2__i { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); transition: color .3s; }
.pl2__i .i { width: 17px; height: 17px; }
.pl2 tbody tr:hover .pl2__i { color: var(--royal); }
.pl2__n { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; }
.pl2__x { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.45; }
.pl2__r { width: 32%; color: var(--body); font-size: 14px; line-height: 1.45; }
.pl2 .pl2__p { padding-right: 0; text-align: right; white-space: nowrap; }
.pl2__p b { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pl2__p small { display: block; color: var(--tone2); font-size: 12px; }
.pl2 .pl2__inc { padding: 4px 11px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; letter-spacing: 0; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .pp-list { gap: 0 12px; padding-inline: 0; }
  .pp { padding: 24px 20px 20px; }
  .pr-inc { margin-inline: 0; }
  .pe { grid-template-columns: minmax(0, 1fr); }
  .pe__sum { position: static; }
  .pe-mini { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(10, 14, 31, .94); box-shadow: 0 20px 40px -16px rgba(7, 10, 23, .6); color: rgba(255, 255, 255, .7); font-size: 13px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .pe-mini b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
  .pe-mini.is-on { opacity: 1; transform: none; }
  .pr-inc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-inc__list li:nth-child(3) { border-top: 1px solid var(--line); }
  /* the pipeline turns into a list, joined top to bottom */
  .pw-ts[class] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pw-t::after, .pw-ts--c4 .pw-t:nth-child(4n)::after { display: block; top: 100%; right: auto; left: 32px; width: 2px; height: 10px; }
  .pw-t:last-child::after { display: none; }
  .pw-t.is-stop::after, .pw-t.is-skip::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .3) 0 3px, transparent 3px 6px); }
  .pw-t__c { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i n p" "i s p"; align-items: center; gap: 2px 14px; padding: 12px 16px; }
  .pw-t__no { display: none; }
  .pw-t__i { grid-area: i; }
  .pw-t__n { grid-area: n; margin: 0; }
  .pw-t__s { grid-area: s; }
  .pw-t__p { grid-area: p; font-size: 15px; }
  .pw-t__h { display: none; }
}
@media (max-width: 960px) {
  .pp-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; max-width: 560px; margin-inline: auto; }
  .pp { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 900px) {
  .pe, .pl2-wrap, .pw, .pw-sec .section-head { padding-inline: 0; margin-inline: 0; }
  .pr-inc { margin-inline: 0; }
  .pl2__r, .pl2 thead th:nth-child(2) { display: none; }
  .pw-bill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-bill__x { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .pr-anchors li { padding: 6px 14px; }
  .pr-anchors li:nth-child(3) { border-left: 0; }
  .pe__cfg { padding: 4px 18px 6px; }
  .pe-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-grps { grid-template-columns: minmax(0, 1fr); }
  .pe-grp + .pe-grp { margin-top: 18px; }
  .pe-vol { grid-template-columns: minmax(0, 1fr); }
  .pe-vol__num { grid-column: 1; grid-row: auto; justify-self: start; }
  .pe-sum { padding: 22px 20px 18px; }
  .pe-leg { grid-template-columns: minmax(0, 1fr); }
  .pr-inc { padding: 20px 18px 4px; }
  .pr-inc__list { grid-template-columns: minmax(0, 1fr); }
  .pr-inc__list li:nth-child(2), .pr-inc__list li:nth-child(3) { border-top: 1px solid var(--line); }
  .pw-flow { display: grid; width: 100%; }
  .pw-flow__o span { justify-content: space-between; }
  .pw-bill__c { padding: 14px 14px; }
  .pw-bill__c b { font-size: 26px; }
  .pw-bill__x { padding: 14px; }
  .pp { padding: 24px 20px 18px; }
}

/* ==========================================================================
   38. Developers. Plain English first, the technical detail one level down.
   ========================================================================== */
/* ---------- hero: the lead on the left, the conversation on the right ---------- */
.ph--dev { padding-bottom: clamp(64px, 7vw, 104px); }
.dvh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 4.5vw, 72px); margin-top: clamp(12px, 2vw, 28px); }
.dvh__lead { display: flex; flex-direction: column; align-items: flex-start; }
.dvh__lead .ph__h { font-size: clamp(42px, 4.4vw, 64px); }
.dvh__lead .ph__lede { max-width: 44ch; margin-top: 22px; }
.dvh__lead .ph__btns { margin-top: 30px; }
.dvh__fig { min-width: 0; }

/* ---------- the conversation ---------- */
.cv { position: relative; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(15, 31, 122, .5); }
.cv__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--line); }
.cv__who { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.cv__sync { display: grid; place-items: center; width: 22px; color: var(--tone2); }
.cv__sync .i { width: 14px; height: 14px; }
.cv-av { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.cv-av .i { width: 14px; height: 14px; }
.cv-av--app { background: #F2F4F8; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.cv-av--idk { background: var(--ink); color: #fff; }
.cv-av__mk { width: 16px; height: 13px; fill: currentColor; }
.cv__mode { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: #F2F4F8; }
.cv-mode { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13px/1 var(--font); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.cv-mode:hover { color: var(--ink); }
.cv-mode[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .08), 0 6px 14px -8px rgba(15, 31, 122, .4); color: var(--ink); }
.cv-mode:focus-visible, .cv-replay:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
:root.no-js .cv__mode, :root.no-js .cv__foot { display: none; }
.cv__thread { display: grid; gap: 12px; margin: 0; padding: 20px 18px 6px; list-style: none; }
.cv-m { position: relative; display: flex; align-items: flex-end; gap: 10px; }
.cv-m--app { flex-direction: row-reverse; }
.cv-m__b { max-width: 84%; padding: 10px 14px 12px; border-radius: 18px; }
.cv-m--app .cv-m__b { border-bottom-right-radius: 6px; background: var(--ink); color: #fff; }
.cv-m--idk .cv-m__b { border-bottom-left-radius: 6px; background: #F4F6FA; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.cv-m--note { justify-content: center; }
.cv-m--note .cv-m__b { max-width: 92%; padding: 8px 14px; border-radius: 12px; background: repeating-linear-gradient(135deg, #FAFBFE 0 6px, #F4F6FA 6px 12px); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); text-align: center; }
.cv-m__from { margin: 0 0 3px; color: var(--tone2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cv-m--app .cv-m__from { color: rgba(255, 255, 255, .5); }
.cv-m__plain { margin: 0; font-size: 14.5px; line-height: 1.45; }
.cv-m--note .cv-m__plain { font-size: 13px; }
.cv-m__chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: #EEF1FF; color: var(--royal); font-family: var(--mono); font-size: 11.5px; }
.cv-m__chip .i { width: 12px; height: 12px; }
.cv-m__chip--ok { background: var(--ok-bg); color: var(--ok-ink); font-family: var(--font); font-weight: 600; }
.cv-m__code { display: none; margin: 0; color: #C9D3F5; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; }
.cv[data-mode="code"] .cv-m__plain, .cv[data-mode="code"] .cv-m__chip { display: none; }
.cv[data-mode="code"] .cv-m__code { display: block; }
.cv[data-mode="code"] .cv-m--idk .cv-m__b, .cv[data-mode="code"] .cv-m--note .cv-m__b { background: var(--night); box-shadow: none; text-align: left; }
.cv[data-mode="code"] .cv-m__from { color: rgba(255, 255, 255, .45); }
.cv-m__typing { position: absolute; left: 38px; bottom: 0; display: none; gap: 4px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: #F4F6FA; box-shadow: inset 0 0 0 1px var(--line); }
.cv-m__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--tone2); animation: cv-dot 1s ease-in-out infinite; }
.cv-m__typing span:nth-child(2) { animation-delay: .15s; }
.cv-m__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cv-dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.cv.is-ready .cv-m:not(.is-shown) > .cv-av, .cv.is-ready .cv-m:not(.is-shown) > .cv-m__b { visibility: hidden; opacity: 0; transform: translateY(8px); }
.cv.is-ready .cv-m > .cv-av, .cv.is-ready .cv-m > .cv-m__b { transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.cv.is-ready .cv-m.is-typing .cv-m__typing { display: flex; }
.cv__foot { display: flex; justify-content: flex-end; margin: 0; padding: 4px 14px 12px; }
.cv-replay { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 12.5px/1 var(--font); cursor: pointer; transition: background-color .25s, color .25s; }
.cv-replay .i { width: 14px; height: 14px; }
.cv-replay:hover { background: #F2F4F8; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .cv-m__typing span { animation: none; } }
/* code colours (on the dark bubbles) */
.dhx-c { color: rgba(201, 211, 245, .5); }
.dhx-s { color: #8FD8FF; }
.dhx-p { color: #E4E9FB; }
.dhx-ok { color: #75E0A7; font-weight: 600; }
.dhx-m { color: #fff; font-weight: 600; }
.dhx-u { color: #A9BCFF; }

/* ---------- how it works: three drawn steps ---------- */
.dv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0 32px; list-style: none; }
.dv-step { position: relative; display: flex; flex-direction: column; padding: 14px 14px 24px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -54px rgba(15, 31, 122, .5); }
.dv-step:not(:last-child)::after { content: ""; position: absolute; top: 118px; right: -17px; z-index: 2; width: 14px; height: 14px; border-top: 1.5px solid var(--tone2); border-right: 1.5px solid var(--tone2); transform: rotate(45deg); }
.dv-art { position: relative; aspect-ratio: 360 / 230; border-radius: 18px; background: #FAFBFE; box-shadow: inset 0 0 0 1px var(--line); }
.dv-art .vx-iso { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv-lb { position: absolute; z-index: 1; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; transform: translate(-50%, 6px); }
.dv-lb--t { transform: translate(-50%, calc(-100% - 6px)); }
.dv-step__n { margin: 20px 10px 0; color: var(--royal); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.dv-step__t { margin: 6px 10px 0; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.dv-step__x { flex: 1; margin: 8px 10px 0; color: var(--body); font-size: 15px; line-height: 1.6; }
.dv-step__dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 10px 0; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.dv-step__k { width: 100%; color: var(--tone2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.dv-step__dev code { padding: 3px 8px; border-radius: 7px; background: #F2F4F8; color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
/* motion, only while the drawing is on screen */
@media (prefers-reduced-motion: no-preference) {
  .dv-art.is-live .dv-pkt { animation: dv-pkt 2.8s cubic-bezier(.5, 0, .3, 1) infinite; }
  .dv-art.is-live .dv-lift { animation: dv-lift 3.2s ease-in-out infinite; }
  .dv-art.is-live .dv-seal { transform-box: fill-box; transform-origin: 50% 50%; animation: dv-seal 2.8s ease-in-out infinite; }
}
@keyframes dv-pkt { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 78% { opacity: 1; transform: translate(var(--dv-pkt-x), var(--dv-pkt-y)); } 100% { opacity: 0; transform: translate(var(--dv-pkt-x), var(--dv-pkt-y)); } }
@keyframes dv-lift { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes dv-seal { 0%, 60%, 100% { transform: none; } 75% { transform: scale(1.08); } }

/* ---------- built in: six things the API takes care of ---------- */
.bi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0 32px; list-style: none; }
.bi-c { display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -54px rgba(15, 31, 122, .5); transition: box-shadow .4s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.bi-c:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -50px rgba(15, 31, 122, .55); }
.bi-c__art { position: relative; display: grid; place-items: center; height: 168px; overflow: hidden; border-radius: 16px; background: #FAFBFE; box-shadow: inset 0 0 0 1px var(--line); }
.bi-c__t { margin: 20px 10px 0; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.bi-c__x { flex: 1; margin: 8px 10px 0; color: var(--body); font-size: 14.5px; line-height: 1.6; }
.bi-c__dev { display: grid; gap: 3px; margin: 16px 10px 0; padding-top: 12px; border-top: 1px dashed var(--line-2); color: var(--ink-2); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.bi-c__dev span { color: var(--tone2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.bi { position: relative; color: var(--ink); font-size: 12px; }
/* no duplicates */
.bi--dup { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; gap: 8px 14px; }
.bi-req { grid-column: 1; padding: 6px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11px; }
.bi-req--2 { opacity: .7; }
.bi--dup .bi-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--tone2); }
.bi-arrow .i { width: 18px; height: 18px; }
.bi-rec { display: grid; grid-column: 3; grid-row: 1 / span 2; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; }
.bi-rec b { font-size: 13px; font-weight: 600; }
.bi-rec em { padding: 2px 8px; border-radius: 999px; background: rgba(100, 244, 248, .16); color: var(--cyan); font-size: 10.5px; font-style: normal; }
/* one key */
.bi--key { display: grid; gap: 5px; width: min(220px, 84%); }
.bi-key { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 9px; padding: 7px 10px; border-radius: 11px; background: var(--ink); color: #fff; }
.bi-key__i { display: grid; grid-row: 1 / span 2; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: var(--cyan); }
.bi-key__i .i { width: 13px; height: 13px; }
.bi-key b { font-size: 12.5px; font-weight: 600; }
.bi-key em { color: rgba(255, 255, 255, .55); font-size: 10.5px; font-style: normal; }
.bi-sc { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
.bi-sw { position: relative; width: 24px; height: 14px; border-radius: 7px; background: #D5DBE8; }
.bi-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.bi-sw.is-on { background: var(--royal); }
.bi-sw.is-on::after { left: 12px; }
/* developers never see customers */
.bi--priv { display: grid; place-items: center; }
.bi-card { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: repeat(3, auto); gap: 7px 12px; width: 190px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); filter: blur(1.4px); }
.bi-card__ph { grid-row: 1 / span 3; height: 56px; border-radius: 7px; background: linear-gradient(180deg, #AEB5C6, #D5DBE8); }
.bi-card__l { height: 7px; border-radius: 4px; background: #C9CFDC; }
.bi-card__l--s { width: 60%; }
.bi-lock { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(10, 14, 31, .6); }
.bi-lock .i { width: 13px; height: 13px; color: var(--cyan); }
/* keys can't promote themselves */
.bi--mint { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-items: center; gap: 10px 12px; }
.bi-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
.bi-pill .i { width: 13px; height: 13px; color: var(--cyan); }
.bi-pill--ghost { background: repeating-linear-gradient(135deg, #F4F6FA 0 5px, #fff 5px 10px); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--tone2); }
.bi-arrow--x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bad-bg); color: var(--bad-ink); }
.bi-arrow--x .i { width: 13px; height: 13px; stroke-width: 2.6; }
.bi-note { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
/* the same shape */
.bi--shape { display: grid; grid-template-columns: repeat(3, auto); justify-items: center; gap: 12px 10px; }
.bi-doc { display: grid; gap: 5px; width: 62px; padding: 10px 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.bi-doc i { height: 6px; border-radius: 3px; background: #D5DBE8; }
.bi-doc i:first-child { width: 70%; background: var(--royal); }
.bi-doc i:nth-child(2) { width: 85%; }
.bi-keys { display: flex; grid-column: 1 / -1; gap: 6px; }
.bi-keys span { padding: 3px 8px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 11px; }
/* busy moments */
.bi--rate { display: flex; align-items: center; gap: 14px; }
.bi-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.bi-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bi-ring__bg { fill: #fff; stroke: #E4E8F0; stroke-width: 3; }
.bi-ring__fg { fill: none; stroke: var(--royal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 30; }
.bi-ring b { position: relative; font-size: 13px; }
.bi-rate { display: grid; gap: 4px; padding: 10px 12px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; }
.bi-rate b { color: var(--warn-ink); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  :root:not(.no-js) .bi-grid[data-reveal] .bi-req--2 { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease .4s, transform .6s cubic-bezier(.2, .8, .2, 1) .4s; }
  :root:not(.no-js) .bi-grid[data-reveal].is-in .bi-req--2 { opacity: .7; transform: none; }
  :root:not(.no-js) .bi-grid[data-reveal] .bi-ring__fg { stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1) .3s; }
  :root:not(.no-js) .bi-grid[data-reveal].is-in .bi-ring__fg { stroke-dashoffset: 30; }
}

/* ---------- webhooks (dark) ---------- */
.wk-sec { padding-block: clamp(96px, 10vw, 140px); }
.wk-sec .section-head { margin-bottom: clamp(36px, 4vw, 52px); padding-inline: 32px; }
.wk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 0 32px; }
.wk-card { padding: 26px 26px 24px; border-radius: 24px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.wk-card__t { margin: 0 0 14px; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.wk-card__t--gap { margin-top: 28px; }
.wk-card__x { margin: -6px 0 18px; color: rgba(255, 255, 255, .6); font-size: 14px; }
/* the letter */
.wl { overflow: hidden; border-radius: 16px; background: #fff; color: var(--ink); }
.wl__top { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.wl__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #F2F4F8; color: var(--ink); }
.wl__ico .i { width: 15px; height: 15px; }
.wl__seal { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: 12px; }
.wl__seal .i { width: 12px; height: 12px; stroke-width: 2.6; }
.wl__dl { margin: 0; padding: 2px 16px 6px; }
.wl-r { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px dashed var(--line); }
.wl-r:first-child { border-top: 0; }
.wl-r dt { color: var(--muted); font-size: 13px; }
.wl-r dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0; }
.wl-r b { font-size: 13.5px; font-weight: 600; }
.wl-r code { color: var(--tone2); font-family: var(--mono); font-size: 11px; }
/* is it real */
.wr { display: grid; margin: 0; padding: 0; list-style: none; }
.wr li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; }
.wr li > span:last-child { display: grid; gap: 1px; }
.wr b { color: #fff; font-weight: 600; }
.wr code { color: rgba(255, 255, 255, .45); font-family: var(--mono); font-size: 11.5px; }
.wr-n { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); font-size: 11px; transition: background-color .4s, color .4s; }
:root:not(.no-js) .wr.is-in .wr-n { background: rgba(117, 224, 167, .18); color: #75E0A7; }
.wr li:nth-child(2) .wr-n { transition-delay: .3s; }
.wr li:nth-child(3) .wr-n { transition-delay: .6s; }
/* retries */
.wk-pick { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.wk-pick__k { margin-bottom: 10px; padding: 0; color: rgba(255, 255, 255, .5); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.wk-pick__list { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-pick__o { position: relative; cursor: pointer; }
.wk-pick__o input { position: absolute; opacity: 0; pointer-events: none; }
.wk-pick__o span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); font-family: var(--mono); font-size: 12px; transition: background-color .25s, color .25s, box-shadow .25s; }
.wk-pick__o:hover span { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.wk-pick__o input:checked + span { background: #fff; box-shadow: none; color: var(--ink); }
.wk-pick__o--never input:checked + span { background: #F97066; color: #fff; }
.wk-pick__o input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
:root.no-js .wk-pick, :root.no-js .wk-card__x { display: none; }
.wk-line { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.wk-line::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 67px; width: 1px; background: rgba(255, 255, 255, .14); }
.wk-at { position: relative; display: grid; grid-template-columns: 52px 30px minmax(0, 1fr) auto; align-items: center; min-height: 32px; color: rgba(255, 255, 255, .78); font-size: 13.5px; transition: opacity .3s; }
.wk-at__t { padding-right: 2px; color: rgba(255, 255, 255, .5); font-size: 12px; text-align: right; }
.wk-at__dot { justify-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background-color .3s, box-shadow .3s; }
.wk-at__s { font-size: 12.5px; }
.wk-at.is-fail .wk-at__dot { background: #F97066; box-shadow: 0 0 0 3px rgba(249, 112, 102, .2); }
.wk-at.is-fail .wk-at__s { color: #FDA29B; }
.wk-at.is-ok .wk-at__dot { background: #75E0A7; box-shadow: 0 0 0 4px rgba(117, 224, 167, .22); }
.wk-at.is-ok .wk-at__n { color: #fff; font-weight: 600; }
.wk-at.is-ok .wk-at__s { color: #75E0A7; font-weight: 600; }
.wk-at.is-skip { opacity: .45; }
.wk-at--failed { display: none; }
.wk-at--failed.is-on { display: grid; }
.wk-at--failed .wk-at__dot { border-radius: 3px; background: #FDB022; box-shadow: none; }
.wk-at--failed .wk-at__n { color: #FDB022; font-weight: 600; }
.wk-at--failed .wk-at__s { color: rgba(255, 255, 255, .6); font-family: var(--mono); font-size: 11.5px; }
.wk-x { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.55; }

/* ---------- updates ---------- */
.up-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0 32px; list-style: none; }
.up-c { display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -54px rgba(15, 31, 122, .5); }
.up-c__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.up-c__h b { flex: 1; font-weight: 600; }
.up-c__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #F2F4F8; color: var(--ink); }
.up-c__i .i { width: 16px; height: 16px; }
.up-c__n { padding: 3px 9px; border-radius: 999px; background: #F2F4F8; color: var(--muted); font-size: 11px; }
.up-c__list { flex: 1; margin: 0; padding: 0; list-style: none; }
.up-c__list li { display: grid; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line); }
.up-c__list span { color: var(--ink); font-size: 14.5px; font-weight: 500; }
.up-c__list code { color: var(--tone2); font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.up-c__more { margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.up-sec .ip-band { margin-top: 24px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .dvh { grid-template-columns: minmax(0, 1fr); }
  .dvh__fig { max-width: 640px; }
  .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .dv-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; padding-inline: 0; }
  .dv-step:not(:last-child)::after { top: auto; right: auto; bottom: -15px; left: 50%; margin-left: -7px; transform: rotate(135deg); }
  .bi-grid, .up-grid, .wk, .wk-sec .section-head { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 640px) {
  .bi-grid, .up-grid { grid-template-columns: minmax(0, 1fr); }
  .cv__bar { padding: 12px 14px; }
  .cv__thread { padding: 16px 12px 4px; }
  .cv-m__b { max-width: 88%; }
  .cv-av { width: 24px; height: 24px; }
  .cv-m__typing { left: 32px; }
  .wk-card { padding: 20px 16px; }
  .wl-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wk-at { grid-template-columns: 46px 26px minmax(0, 1fr) auto; font-size: 13px; }
  .wk-line::before { left: 59px; }
}
.dv-iso--ask { --dv-pkt-x: 60.2px; --dv-pkt-y: 34.7px; }
.dv-art--ask .dv-lb--1 { left: 29.24%; top: 50.23%; }
.dv-art--ask .dv-lb--2 { left: 61.14%; top: 79.06%; }
.dv-art--ask .dv-lb--3 { left: 67.22%; top: 44.28%; }
.dv-art--verify .dv-lb--1 { left: 22.52%; top: 75.74%; }
.dv-art--verify .dv-lb--2 { left: 67.85%; top: 20.14%; }
.dv-art--verify .dv-lb--3 { left: 67.85%; top: 80.55%; }
.dv-iso--answer { --dv-pkt-x: 43.8px; --dv-pkt-y: 25.3px; }
.dv-art--answer .dv-lb--1 { left: 27.97%; top: 47.03%; }
.dv-art--answer .dv-lb--2 { left: 61.40%; top: 77.23%; }
.dv-art--answer .dv-lb--3 { left: 66.71%; top: 36.27%; }
.iv--government .iv-pk[data-at="0"] { transform: translate(178.6px, 149.7px); }
.iv--government .iv-chip[data-at="0"] { left: 31.90%; top: 37.35%; }
.iv--government .iv-pk[data-at="1"] { transform: translate(210.5px, 168.1px); }
.iv--government .iv-chip[data-at="1"] { left: 37.60%; top: 42.47%; }
.iv--government .iv-pk[data-at="2"] { transform: translate(242.5px, 186.5px); }
.iv--government .iv-chip[data-at="2"] { left: 43.30%; top: 47.59%; }
.iv--government .iv-pk[data-at="3"] { transform: translate(274.4px, 204.9px); }
.iv--government .iv-chip[data-at="3"] { left: 48.99%; top: 52.71%; }
.iv--government .iv-pk[data-at="s"] { transform: translate(137.3px, 132.3px); }
.iv--government .iv-pk[data-at="r"] { transform: translate(316.6px, 212.0px); }
.iv--government .iv-pk[data-at="o"] { transform: translate(360.7px, 261.3px); }
.iv--government .iv-lb--rule { left: 56.54%; top: 55.27%; }
.iv--government .iv-way--approve { left: 61.40%; top: 69.27%; }
.iv--government .iv-way--review { left: 49.83%; top: 70.92%; }
.iv--government .iv-way--reject { left: 63.24%; top: 58.88%; }
.iv--immigration .iv-pk[data-at="0"] { transform: translate(185.7px, 142.5px); }
.iv--immigration .iv-chip[data-at="0"] { left: 33.16%; top: 35.59%; }
.iv--immigration .iv-pk[data-at="1"] { transform: translate(215.9px, 160.0px); }
.iv--immigration .iv-chip[data-at="1"] { left: 38.56%; top: 40.44%; }
.iv--immigration .iv-pk[data-at="2"] { transform: translate(246.2px, 177.4px); }
.iv--immigration .iv-chip[data-at="2"] { left: 43.96%; top: 45.29%; }
.iv--immigration .iv-pk[data-at="3"] { transform: translate(276.4px, 194.9px); }
.iv--immigration .iv-chip[data-at="3"] { left: 49.36%; top: 50.14%; }
.iv--immigration .iv-pk[data-at="4"] { transform: translate(306.7px, 212.4px); }
.iv--immigration .iv-chip[data-at="4"] { left: 54.77%; top: 54.99%; }
.iv--immigration .iv-pk[data-at="s"] { transform: translate(146.5px, 126.1px); }
.iv--immigration .iv-pk[data-at="r"] { transform: translate(346.7px, 219.0px); }
.iv--immigration .iv-pk[data-at="o"] { transform: translate(388.6px, 265.8px); }
.iv--immigration .iv-lb--rule { left: 61.92%; top: 57.42%; }
.iv--immigration .iv-way--approve { left: 66.53%; top: 70.69%; }
.iv--immigration .iv-way--review { left: 55.56%; top: 72.26%; }
.iv--immigration .iv-way--reject { left: 68.27%; top: 60.85%; }
.iv--trading .iv-pk[data-at="0"] { transform: translate(185.7px, 142.5px); }
.iv--trading .iv-chip[data-at="0"] { left: 33.16%; top: 35.59%; }
.iv--trading .iv-pk[data-at="1"] { transform: translate(215.9px, 160.0px); }
.iv--trading .iv-chip[data-at="1"] { left: 38.56%; top: 40.44%; }
.iv--trading .iv-pk[data-at="2"] { transform: translate(246.2px, 177.4px); }
.iv--trading .iv-chip[data-at="2"] { left: 43.96%; top: 45.29%; }
.iv--trading .iv-pk[data-at="3"] { transform: translate(276.4px, 194.9px); }
.iv--trading .iv-chip[data-at="3"] { left: 49.36%; top: 50.14%; }
.iv--trading .iv-pk[data-at="4"] { transform: translate(306.7px, 212.4px); }
.iv--trading .iv-chip[data-at="4"] { left: 54.77%; top: 54.99%; }
.iv--trading .iv-pk[data-at="s"] { transform: translate(146.5px, 126.1px); }
.iv--trading .iv-pk[data-at="r"] { transform: translate(346.7px, 219.0px); }
.iv--trading .iv-pk[data-at="o"] { transform: translate(388.6px, 265.8px); }
.iv--trading .iv-lb--rule { left: 61.92%; top: 57.42%; }
.iv--trading .iv-way--approve { left: 66.53%; top: 70.69%; }
.iv--trading .iv-way--review { left: 55.56%; top: 72.26%; }
.iv--trading .iv-way--reject { left: 68.27%; top: 60.85%; }
.iv--banking .iv-pk[data-at="0"] { transform: translate(185.7px, 142.5px); }
.iv--banking .iv-chip[data-at="0"] { left: 33.16%; top: 35.59%; }
.iv--banking .iv-pk[data-at="1"] { transform: translate(215.9px, 160.0px); }
.iv--banking .iv-chip[data-at="1"] { left: 38.56%; top: 40.44%; }
.iv--banking .iv-pk[data-at="2"] { transform: translate(246.2px, 177.4px); }
.iv--banking .iv-chip[data-at="2"] { left: 43.96%; top: 45.29%; }
.iv--banking .iv-pk[data-at="3"] { transform: translate(276.4px, 194.9px); }
.iv--banking .iv-chip[data-at="3"] { left: 49.36%; top: 50.14%; }
.iv--banking .iv-pk[data-at="4"] { transform: translate(306.7px, 212.4px); }
.iv--banking .iv-chip[data-at="4"] { left: 54.77%; top: 54.99%; }
.iv--banking .iv-pk[data-at="s"] { transform: translate(146.5px, 126.1px); }
.iv--banking .iv-pk[data-at="r"] { transform: translate(346.7px, 219.0px); }
.iv--banking .iv-pk[data-at="o"] { transform: translate(388.6px, 265.8px); }
.iv--banking .iv-lb--rule { left: 61.92%; top: 57.42%; }
.iv--banking .iv-way--approve { left: 66.53%; top: 70.69%; }
.iv--banking .iv-way--review { left: 55.56%; top: 72.26%; }
.iv--banking .iv-way--reject { left: 68.27%; top: 60.85%; }
.iv--digital-assets .iv-pk[data-at="0"] { transform: translate(167.2px, 130.2px); }
.iv--digital-assets .iv-chip[data-at="0"] { left: 29.85%; top: 32.55%; }
.iv--digital-assets .iv-pk[data-at="1"] { transform: translate(194.6px, 146.0px); }
.iv--digital-assets .iv-chip[data-at="1"] { left: 34.74%; top: 36.94%; }
.iv--digital-assets .iv-pk[data-at="2"] { transform: translate(222.0px, 161.9px); }
.iv--digital-assets .iv-chip[data-at="2"] { left: 39.64%; top: 41.34%; }
.iv--digital-assets .iv-pk[data-at="3"] { transform: translate(249.4px, 177.7px); }
.iv--digital-assets .iv-chip[data-at="3"] { left: 44.53%; top: 45.73%; }
.iv--digital-assets .iv-pk[data-at="4"] { transform: translate(276.8px, 193.5px); }
.iv--digital-assets .iv-chip[data-at="4"] { left: 49.42%; top: 50.13%; }
.iv--digital-assets .iv-pk[data-at="5"] { transform: translate(304.2px, 209.3px); }
.iv--digital-assets .iv-chip[data-at="5"] { left: 54.32%; top: 54.52%; }
.iv--digital-assets .iv-pk[data-at="6"] { transform: translate(331.6px, 225.1px); }
.iv--digital-assets .iv-chip[data-at="6"] { left: 59.21%; top: 58.92%; }
.iv--digital-assets .iv-pk[data-at="s"] { transform: translate(131.7px, 115.3px); }
.iv--digital-assets .iv-pk[data-at="r"] { transform: translate(367.9px, 231.2px); }
.iv--digital-assets .iv-pk[data-at="o"] { transform: translate(316.3px, 262.8px); }
.iv--digital-assets .iv-lb--rule { left: 65.69%; top: 61.12%; }
.iv--digital-assets .iv-way--approve { left: 69.86%; top: 73.14%; }
.iv--digital-assets .iv-way--review { left: 59.93%; top: 74.56%; }
.iv--digital-assets .iv-way--reject { left: 71.45%; top: 64.22%; }
.iv--real-estate .iv-pk[data-at="0"] { transform: translate(196.5px, 149.7px); }
.iv--real-estate .iv-chip[data-at="0"] { left: 35.08%; top: 37.35%; }
.iv--real-estate .iv-pk[data-at="1"] { transform: translate(228.4px, 168.1px); }
.iv--real-estate .iv-chip[data-at="1"] { left: 40.78%; top: 42.47%; }
.iv--real-estate .iv-pk[data-at="2"] { transform: translate(260.3px, 186.5px); }
.iv--real-estate .iv-chip[data-at="2"] { left: 46.48%; top: 47.59%; }
.iv--real-estate .iv-pk[data-at="3"] { transform: translate(292.2px, 204.9px); }
.iv--real-estate .iv-chip[data-at="3"] { left: 52.18%; top: 52.71%; }
.iv--real-estate .iv-pk[data-at="s"] { transform: translate(155.2px, 132.3px); }
.iv--real-estate .iv-pk[data-at="r"] { transform: translate(334.4px, 212.0px); }
.iv--real-estate .iv-pk[data-at="o"] { transform: translate(378.6px, 261.3px); }
.iv--real-estate .iv-lb--rule { left: 59.72%; top: 55.27%; }
.iv--real-estate .iv-way--approve { left: 64.58%; top: 69.27%; }
.iv--real-estate .iv-way--review { left: 53.02%; top: 70.92%; }
.iv--real-estate .iv-way--reject { left: 66.43%; top: 58.88%; }
.vx-iso--id-verification { --a-scan-x: 146.2px; --a-scan-y: 84.4px; }
.vx-iso--liveness { --a-try-x: 40.8px; --a-try-y: 23.5px; }
.vx-iso--age-estimation { --a-est-x: -52.3px; --a-est-y: -30.2px; }
.vx-iso--aml-screening { --a-pkt-x: 244.4px; --a-pkt-y: 141.1px; }
.vx-iso--email-verification { --a-env-x: 202.3px; --a-env-y: 132.8px; }
.vx-iso .a-cell--0 { animation-delay: 0.00s; }
.vx-iso .a-cell--1 { animation-delay: 0.45s; }
.vx-iso .a-cell--2 { animation-delay: 0.90s; }
.vx-iso .a-cell--3 { animation-delay: 1.35s; }
.vx-iso .a-cell--4 { animation-delay: 1.80s; }
.vx-iso .a-cell--5 { animation-delay: 2.25s; }
.vx-iso .a-cell--6 { animation-delay: 2.70s; }
.vx-iso .a-cell--7 { animation-delay: 3.15s; }
.vx-iso .a-cell--8 { animation-delay: 3.60s; }
.vx-iso--blocklist { --a-doc-x: -55.4px; --a-doc-y: -32.0px; }
.vx-iso--sector-immigration { --a-stampv-x: 0.0px; --a-stampv-y: 29.0px; }
.vx-iso--sector-trading { --a-pkt-x: 114.8px; --a-pkt-y: 66.3px; }
/* ==========================================================================
   39. Onboarding: start.html (sign-up and setup), signin.html, console.html
   One page per job, sharing one state in the browser. Light form on the
   left, the dark stage on the right, where the workspace assembles in the
   isometric line style as the answers come in.
   ========================================================================== */
.app { min-height: 100vh; background: #fff; }
.app--console { background: var(--canvas); }

/* ---------- layout ---------- */
.ob {
  --brand: #0F5C54;
  --custom: #0F5C54;
  --pad: clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "stage" "main";
  align-content: start;
  min-height: 100vh;
}
.ob-top { grid-area: top; }
.ob-stage { grid-area: stage; }
.ob-main { grid-area: main; }
.ob-top, .ob-main { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: var(--pad); }

.ob-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px 16px;
  padding-top: 22px;
  padding-bottom: 18px;
}
.ob-top > .brand { justify-self: start; margin-left: -4px; }
.ob label, .ob button, .ob a { -webkit-tap-highlight-color: transparent; }
.ob-top__aux { justify-self: end; font-size: 14px; color: var(--muted); }
.ob-top__aux a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ob-top__aux a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ob-top__aux a[hidden] { display: none; }
.ob-prog { grid-column: 1 / -1; }
.ob-prog ol { display: grid; grid-template-columns: 3fr 4fr 3fr; gap: 10px; list-style: none; }
.ob-prog__ph { display: grid; gap: 8px; }
.ob-prog__k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tone2);
  transition: color .3s;
}
.ob-prog__ph.is-cur .ob-prog__k { color: var(--ink); }
.ob-prog__ph.is-done .ob-prog__k { color: var(--ok-ink); }
.ob-prog__ph.is-done .ob-prog__k::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--ok);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ob-prog__bar { display: flex; gap: 4px; }
.ob-prog__bar i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.ob-prog__bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--royal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.ob-prog__bar i.is-done::after { transform: none; }
.ob-prog__bar i.is-cur::after { transform: scaleX(.55); background: linear-gradient(90deg, var(--royal), var(--sky)); }

.ob-main { padding-top: clamp(28px, 5vh, 64px); padding-bottom: 72px; }
.ob-ret { margin-bottom: 18px; }
.ob-ret[hidden] { display: none; }
.ob-ret__b { gap: 8px; }
.ob-ret__b .i { width: 16px; height: 16px; transform: rotate(180deg); }

@media (min-width: 1080px) {
  .ob {
    grid-template-columns: minmax(500px, 45fr) minmax(0, 55fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top stage" "main stage";
  }
  .ob > .ob-stage {
    position: sticky;
    top: 12px;
    align-self: start;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    margin: 12px 12px 12px 0;
  }
  .ob-top { padding-top: 28px; }
}

/* ---------- a step ---------- */
.ob-s { animation: ob-fade .5s var(--ease) both; }
.ob-s > * { animation: ob-up .7s var(--ease) both; }
.ob-s > :nth-child(2) { animation-delay: .04s; }
.ob-s > :nth-child(3) { animation-delay: .08s; }
.ob-s > :nth-child(4) { animation-delay: .12s; }
.ob-s > :nth-child(n+5) { animation-delay: .16s; }
.ob-s__eb { font-size: 11px; }
.ob-s__n { color: var(--tone2); }
.ob-s__h {
  margin-top: 18px;
  font-size: clamp(30px, 2.7vw, 40px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.ob-s__h:focus { outline: none; }
.ob-s__lede { max-width: 52ch; margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.ob-s__lede b { color: var(--ink); font-weight: 650; }
.ob-s__foot {
  display: grid;
  gap: 6px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.ob-s__foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.ob-s__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }

/* ---------- form parts ---------- */
.ob-form { display: grid; gap: 22px; margin-top: 32px; }
.ob-f { display: grid; align-content: start; gap: 8px; min-width: 0; }
.ob-f__l { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ob-f__hint { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ob-f__hint:empty { display: none; }
.ob-f__err { font-size: 13.5px; font-weight: 500; color: var(--bad-ink); }
.ob-f__err[hidden] { display: none; }
.ob-in {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04);
  transition: border-color .2s, box-shadow .2s;
}
.ob-in::placeholder { color: #A3A9BB; }
.ob-in:hover { border-color: #B9C0D2; }
.ob-in:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .2); }
.ob-in[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(240, 68, 56, .12); }
select.ob-in {
  appearance: none;
  padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%234A5270' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
  cursor: pointer;
}
.ob-in--code { max-width: 240px; font-size: 22px; letter-spacing: .32em; }
.ob-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ob-row2--key { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ob-fs { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ob-fs > legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; }
.ob-fs > legend + * { clear: both; }

.ob-pw { position: relative; }
.ob-pw .ob-in { padding-right: 82px; }
.ob-pw__t {
  position: absolute;
  top: 7px; right: 7px; bottom: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ob-pw__t:hover { background: var(--canvas-2); }
.ob-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ob-meter i { height: 3px; border-radius: 3px; background: var(--line); transition: background .3s; }
.ob-meter[data-score="1"] i:first-child { background: var(--bad); }
.ob-meter[data-score="2"] i:nth-child(-n+2) { background: var(--warn); }
.ob-meter[data-score="3"] i:nth-child(-n+3) { background: var(--ok); }
.ob-meter[data-score="4"] i { background: var(--ok); }

.ob-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--body); cursor: pointer; }
.ob-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--royal); cursor: pointer; }
.ob-check input[aria-invalid="true"] { outline: 2px solid var(--bad); outline-offset: 2px; }
.ob-check a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

.ob-btn { min-height: 52px; }
.ob-btn.btn--primary { padding-left: 24px; }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .2), 0 10px 22px -12px rgba(10, 14, 31, .6); }
.btn--dark:hover { background: #1A2040; }
.ob-btn--sm { justify-self: start; min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.ob-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--royal);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(37, 71, 233, .3);
  text-underline-offset: 4px;
  cursor: pointer;
}
.ob-link:hover { text-decoration-color: currentColor; }
.ob-link[hidden] { display: none; }
.ob-mini {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ob-mini:hover { border-color: #B9C0D2; }
.ob-proto {
  justify-self: start;
  padding: 6px 12px;
  border: 1px dashed #C7CEDF;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.ob-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; list-style: none; font-size: 14px; color: var(--body); }
.ob-ticks li { display: flex; align-items: center; gap: 8px; }
.ob-ticks .i { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.2; }
.ob-f__l .mono, .ob-2fa__n .mono {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
}

/* the code boxes */
.ob-code { min-width: 0; margin: 0; padding: 0; border: 0; }
.ob-code__row { display: flex; gap: 10px; }
.ob-code__d {
  width: clamp(42px, 12vw, 60px);
  height: 68px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 28px;
  text-align: center;
  caret-color: var(--royal);
  box-shadow: 0 1px 2px rgba(10, 14, 31, .04);
  transition: border-color .2s, box-shadow .2s, background-color .3s, color .3s;
}
.ob-code__d:nth-child(4) { margin-left: 10px; }
.ob-code__d:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .2); }
.ob-code__d[aria-invalid="true"] { border-color: var(--bad); }
.is-ok .ob-code__d { border-color: #75E0A7; background: var(--ok-bg); color: var(--ok-ink); animation: ob-pop .45s var(--ease) both; }
.is-ok .ob-code__d:nth-child(2) { animation-delay: .04s; }
.is-ok .ob-code__d:nth-child(3) { animation-delay: .08s; }
.is-ok .ob-code__d:nth-child(4) { animation-delay: .12s; }
.is-ok .ob-code__d:nth-child(5) { animation-delay: .16s; }
.is-ok .ob-code__d:nth-child(6) { animation-delay: .2s; }
.ob-resend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.ob-resend b { color: var(--ink); font-weight: 500; }
.ob-resend [hidden] { display: none; }

/* two-factor */
.ob-2fa {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #F8FAFD);
}
.ob-2fa__qr { padding: 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.ob-qr { width: 100%; height: auto; }
.ob-qr path { fill: var(--ink); }
.ob-qr__bg { fill: #fff; }
.ob-2fa__b { display: grid; gap: 6px; }
.ob-2fa__n { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ob-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ob-key code { padding: 7px 12px; border-radius: 10px; background: var(--canvas); color: var(--ink); font-size: 14px; letter-spacing: .04em; }

/* panels: a quiet card that groups related fields */
.ob-panel { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .03); }
.ob-panel__h { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.ob-panel__n { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
fieldset.ob-panel > legend.ob-panel__h { margin-bottom: 0; }

/* choice pills: light, with a tick when chosen */
.ob-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-pick, .ob-sec, .ob-sw, .ob-seg label, .ob-lang, .ob-opt, .ob-ck { position: relative; }
.ob-pick > input, .ob-sec > input, .ob-sw > input, .ob-seg input, .ob-lang > input, .ob-opt > input, .ob-ck__in {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ob-pick__b {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.ob-pick__mk, .ob-sec__mk { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C2C8D6; transition: background-color .2s, box-shadow .2s; }
.ob-pick > input[type="checkbox"] + .ob-pick__b .ob-pick__mk { border-radius: 5px; }
.ob-pick:hover .ob-pick__b { border-color: #B4BCCE; }
.ob-pick > input:checked + .ob-pick__b { border-color: var(--royal); background: #F4F6FF; color: #1B2A8C; box-shadow: 0 6px 16px -12px rgba(37, 71, 233, .8); }
.ob-pick > input:checked + .ob-pick__b .ob-pick__mk,
.ob-opt > input:checked ~ .ob-opt__box,
.ob-lang > input:checked + .ob-lang__b .ob-lang__mk,
.ob-ck__in:checked ~ .ob-ck__mk {
  background: var(--royal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3L9.5 3.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: none;
}
.ob-pick > input:focus-visible + .ob-pick__b,
.ob-sec > input:focus-visible + .ob-sec__c,
.ob-seg input:focus-visible + span,
.ob-lang > input:focus-visible + .ob-lang__b,
.ob-opt > input:focus-visible ~ .ob-opt__box,
.ob-ck__in:focus-visible ~ .ob-ck__mk { outline: 2px solid var(--royal); outline-offset: 3px; }

/* option rows: a checkbox with a line of explanation */
.ob-opts { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; list-style: none; }
.ob-opts > li + li { border-top: 1px solid var(--line); }
.ob-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 16px 12px 14px; cursor: pointer; transition: background-color .2s; }
.ob-opt:hover { background: #FAFBFD; }
.ob-opt:has(> input:checked) { background: #F8F9FF; }
.ob-opt__box { width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #C2C8D6; transition: background-color .2s, box-shadow .2s; }
.ob-opt__b { display: grid; gap: 1px; min-width: 0; }
.ob-opt__n { color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ob-opt__n.mono { font-size: 13px; font-weight: 500; }
.ob-opt__x { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* sectors */
.ob-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ob-sec__c {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 58px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s, background-color .2s, box-shadow .25s;
}
.ob-sec__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--canvas); color: var(--ink-2); transition: background-color .2s, color .2s; }
.ob-sec__i .i { width: 17px; height: 17px; }
.ob-sec__n { flex: 1; min-width: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.ob-sec:hover .ob-sec__c { border-color: #B4BCCE; }
.ob-sec > input:checked + .ob-sec__c { border-color: var(--royal); background: #F4F6FF; box-shadow: 0 10px 22px -16px rgba(37, 71, 233, .9); }
.ob-sec > input:checked + .ob-sec__c .ob-sec__i { background: var(--royal); color: #fff; }

/* volume */
.ob-volf { gap: 10px; }
.ob-volf__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.ob-volf__o { color: var(--ink); font-size: 19px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ob-range { --p: 46.6%; width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ob-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--royal) var(--p), var(--line) var(--p)); }
.ob-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--royal) var(--p), var(--line) var(--p)); }
.ob-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; border: 2px solid var(--royal); border-radius: 50%; background: #fff; box-shadow: 0 4px 12px -2px rgba(37, 71, 233, .5); -webkit-appearance: none; appearance: none; }
.ob-range::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--royal); border-radius: 50%; background: #fff; }
.ob-scale { display: flex; justify-content: space-between; margin: -4px 0 0; padding: 0 4px; color: var(--tone2); font-size: 11.5px; list-style: none; }
.ob-fit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #F4F6FF, #FBFCFF 70%);
  box-shadow: inset 0 0 0 1px #E0E5F7;
}
.ob-fit__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--royal); color: #fff; box-shadow: 0 8px 16px -8px rgba(37, 71, 233, .8); }
.ob-fit__i .i { width: 18px; height: 18px; }
.ob-fit__b { display: grid; gap: 3px; min-width: 0; }
.ob-fit__k { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ob-fit__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ob-fit__n b { color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.ob-fit__est { color: var(--royal-700); font-size: 13px; font-weight: 600; }
.ob-fit__why { color: var(--body); font-size: 13.5px; line-height: 1.5; }

/* checks */
.ob-ckgs { display: grid; gap: 22px; }
.ob-ckg__k { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.ob-ckg__c { color: var(--tone2); font-size: 11.5px; font-weight: 500; }
.ob-cks { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; list-style: none; }
.ob-cks > li + li { border-top: 1px solid var(--line); }
.ob-ck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; cursor: pointer; transition: background-color .2s; }
.ob-ck:hover { background: #FAFBFD; }
.ob-ck:has(> .ob-ck__in:checked) { background: #F8F9FF; }
.ob-ck__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--canvas); color: var(--ink-2); transition: background-color .2s, color .2s; }
.ob-ck__i .i { width: 18px; height: 18px; }
.ob-ck__in:checked ~ .ob-ck__i { background: #E9EDFF; color: var(--royal); }
.ob-ck__b { display: grid; gap: 1px; min-width: 0; }
.ob-ck__n { color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ob-ck__x { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ob-ck__p { color: var(--tone2); font-size: 13px; transition: color .2s; }
.ob-ck__in:checked ~ .ob-ck__p { color: var(--ink); }
.ob-ck__mk { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #C2C8D6; transition: background-color .2s, box-shadow .2s; }
.ob-ck__in:checked ~ .ob-ck__mk { background-size: 12px; }
.ob-bar {
  position: sticky;
  bottom: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 20px;
  padding: 10px 10px 10px 22px;
  border-radius: 24px;
  background: radial-gradient(120% 160% at 0% 0%, #1A2550, rgba(26, 37, 80, 0) 60%), rgba(7, 10, 23, .96);
  color: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 48px -22px rgba(7, 10, 23, .7);
}
.ob-bar :focus-visible { outline-color: #fff; }
.ob-bar__a { display: grid; }
.ob-bar__k { color: rgba(255, 255, 255, .55); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ob-bar__a b { color: #fff; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.ob-bar__b { display: grid; font-size: 13px; line-height: 1.45; }
.ob-bar__b > span:first-child { color: #fff; font-weight: 600; }
.ob-bar__b b { color: #fff; font-weight: 600; }
.ob-bar .ob-btn { min-height: 50px; }

/* brand */
.ob-up { display: flex; align-items: center; gap: 8px; }
.ob-up[hidden], .ob-up .ob-mini[hidden] { display: none; }
.ob-up__drop {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 14px 6px 6px;
  border: 1px dashed #B4BCCE;
  border-radius: 14px;
  background: var(--canvas);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ob-up__drop:hover { border-color: var(--royal); background: #F4F6FF; }
.ob-up__drop:focus-within { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .2); }
.ob-up__in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ob-up__thumb { display: grid; flex: none; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; transition: background-color .4s; }
.ob-up__thumb.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ob-up__thumb.has-logo > span { display: none; }
.ob-up__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ob-up__t { display: grid; min-width: 0; line-height: 1.3; }
.ob-up__t b { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ob-up__t span { color: var(--muted); font-size: 12.5px; }
.ob-colour { display: grid; gap: 16px; }
.ob-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ob-sw__c { display: block; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(10, 14, 31, .14); transition: box-shadow .2s, transform .2s var(--ease); }
.ob-sw:hover .ob-sw__c { transform: scale(1.06); }
.ob-sw__c--0 { background: #0F5C54; }
.ob-sw__c--1 { background: #2547E9; }
.ob-sw__c--2 { background: #5B34D6; }
.ob-sw__c--3 { background: #B42318; }
.ob-sw__c--4 { background: #B54708; }
.ob-sw__c--5 { background: #0A0E1F; }
.ob-sw__c--custom { background: conic-gradient(from 90deg, #F04438, #F79009, #12B76A, #1A9BF4, #5B34D6, #F04438); }
.ob-sw > input:checked + .ob-sw__c { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.ob-sw > input:focus-visible + .ob-sw__c { outline: 2px solid var(--royal); outline-offset: 7px; }
.ob-hexrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ob-hexpick input { display: block; width: 46px; height: 46px; padding: 4px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; }
.ob-hexpick input::-webkit-color-swatch-wrapper { padding: 0; }
.ob-hexpick input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.ob-hexpick input::-moz-color-swatch { border: 0; border-radius: 8px; }
.ob-hexin .ob-in { width: 128px; min-height: 46px; font-size: 16px; text-transform: uppercase; }
.ob-contrast { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: 12.5px; font-weight: 500; }
.ob-contrast b { font-family: var(--mono); font-weight: 600; }
.ob-contrast.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.ob-contrast.is-bad { background: var(--bad-bg); color: var(--bad-ink); }
.ob-langs2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-lang__b { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; transition: border-color .2s, background-color .2s; }
.ob-lang:hover .ob-lang__b { border-color: #B4BCCE; }
.ob-lang__c { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--canvas); color: var(--ink-2); font-size: 12px; font-weight: 600; transition: background-color .2s, color .2s; }
.ob-lang__t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.ob-lang__t b { color: var(--ink); font-size: 14px; }
.ob-lang__t span { color: var(--muted); font-size: 12.5px; }
.ob-lang__mk { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #C2C8D6; transition: background-color .2s, box-shadow .2s; }
.ob-lang > input:checked + .ob-lang__b { border-color: var(--royal); background: #F4F6FF; }
.ob-lang > input:checked + .ob-lang__b .ob-lang__c { background: var(--royal); color: #fff; }
.ob-prev { display: none; }
.ob-prev__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-prev__k { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ob-prev__langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.ob-prev__langs[hidden], .ob-prev__lb[hidden] { display: none; }
.ob-prev__lb { min-width: 44px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.ob-prev__lb[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10, 14, 31, .1); }
.ob-prev__card { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.ob-prev__card .op-h { margin-top: 10px; }
.ob-prev__card .op-btn { display: grid; place-items: center; margin-top: 8px; }

/* try it: the guide beside the phone */
.ob-run { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ob-run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 16px 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #F6F8FF, #fff);
}
.ob-run__msg { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; color: var(--body); font-size: 14px; }
.ob-run__msg b { color: var(--ink); font-size: 15px; }
.ob-run [data-autoplay][hidden] { display: none; }
.ob-run [data-autoplay]:disabled { opacity: .7; cursor: progress; }
.ob-rs { display: grid; gap: 2px; margin: 0; padding: 10px 12px 12px; list-style: none; }
.ob-run.is-checks .ob-rs { display: none; }
.ob-run.is-checks .ob-run__head { border-bottom: 0; }
.ob-rs__i { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; padding: 8px; border-radius: 14px; color: var(--muted); transition: background-color .3s; }
.ob-rs__i:not(:last-child)::after { content: ""; position: absolute; top: 40px; bottom: -6px; left: 21px; width: 2px; border-radius: 2px; background: var(--line); }
.ob-rs__mk { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted); font-size: 12px; font-weight: 600; transition: background-color .3s, box-shadow .3s, color .3s; }
.ob-rs__mk .i { width: 14px; height: 14px; stroke-width: 2.4; }
.ob-rs__b { display: grid; gap: 2px; padding-top: 4px; }
.ob-rs__t { font-size: 14px; font-weight: 600; }
.ob-rs__x { color: var(--royal-700); font-size: 13px; }
.ob-rs__i.is-done { color: var(--ink-2); }
.ob-rs__i.is-done .ob-rs__mk { background: var(--ok); box-shadow: none; color: #fff; }
.ob-rs__i.is-done::after { background: #A6EBC7; }
.ob-rs__i.is-cur { background: #F4F6FF; color: var(--ink); }
.ob-rs__i.is-cur .ob-rs__mk { background: var(--royal); box-shadow: 0 0 0 4px rgba(37, 71, 233, .16); color: #fff; }
.ob-results { display: grid; gap: 10px; }
.ob-results[hidden] { display: none; }
.ob-results__k { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ob-log { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; list-style: none; }
.ob-log:empty { display: none; }
.ob-lg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; font-size: 14px; transition: background-color .3s; }
.ob-lg + .ob-lg { border-top: 1px solid var(--line); }
.ob-lg__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--canvas); color: var(--ink-2); transition: background-color .3s, color .3s; }
.ob-lg__i .i { width: 16px; height: 16px; }
.ob-lg__n { color: var(--ink); font-weight: 600; }
.ob-lg__s { color: var(--tone2); font-size: 13px; text-align: right; }
.ob-lg.is-run { background: #F4F6FF; }
.ob-lg.is-run .ob-lg__i { background: var(--royal); color: #fff; animation: ob-throb 1s ease-in-out infinite; }
.ob-lg.is-done .ob-lg__i { background: var(--ok-bg); color: var(--ok-ink); }
.ob-lg.is-done .ob-lg__s { color: var(--ok-ink); font-weight: 600; }
.ob-result { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #ABEFC6; border-radius: 18px; background: var(--ok-bg); animation: ob-up .6s var(--ease) both; }
.ob-result[hidden] { display: none; }
.ob-result__i { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ok); color: #fff; animation: ob-pop .5s var(--ease) .1s both; }
.ob-result__i .i { width: 18px; height: 18px; stroke-width: 2.4; }
.ob-result p { display: grid; color: var(--ok-ink); font-size: 14px; }
.ob-result b { color: #054F31; font-size: 15.5px; }
.ob-only-narrow { display: none; }
/* the phone points at its next tap */
.ob[data-step="try"] .ob-phone .op-v:not([hidden]) .op-btn { --ring: color-mix(in srgb, var(--brand) 50%, transparent); animation: op-nudge 1.8s ease-out infinite; }
.ob[data-step="try"] .ob-phone .op-v--dark:not([hidden]) .op-btn { --ring: rgba(255, 255, 255, .5); }
.ob[data-step="try"] .ob-phone .is-capturing .op-btn, .ob[data-step="try"] .ob-phone .is-captured .op-btn { animation: none; }

/* connect */
.ob-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 18px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.ob-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 14px; color: var(--muted); font-size: 14.5px; font-weight: 600; text-align: center; transition: background-color .2s, color .2s, box-shadow .2s; }
.ob-seg span .i { width: 17px; height: 17px; }
.ob-seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10, 14, 31, .08), 0 6px 14px -8px rgba(15, 31, 122, .35); }
.ob-seg input:checked + span .i { color: var(--royal); }
.ob-pane { display: grid; gap: 14px; }
.ob-pane[hidden] { display: none; }
.ob-btn--sm .i { width: 16px; height: 16px; stroke-width: 1.8; }
.ob-btn--sm.btn--secondary { gap: 8px; padding: 0 18px 0 14px; }
.ob-keyout { display: grid; gap: 8px; animation: ob-up .5s var(--ease) both; }
.ob-keyout[hidden], .ob-ok[hidden], [data-make-key][hidden] { display: none; }
.ob-key--dark { gap: 6px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--night); }
/* a key or secret shown once must be readable and copyable whole: it wraps at
   any character (a token has no word breaks) instead of being cut off */
.ob-key--dark code { flex: 1 1 14ch; min-width: 0; padding: 0; background: none; color: #8FD8FF; font-size: 13.5px; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.ob-key--dark .ob-mini { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; }
.ob-key--dark :focus-visible { outline-color: #fff; }
.ob-warn { color: var(--warn-ink); font-size: 13px; }
.ob-ok { display: flex; align-items: flex-start; gap: 8px; color: var(--ok-ink); font-size: 13.5px; line-height: 1.5; animation: ob-up .45s var(--ease) both; }
.ob-ok .i { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.2; }

/* team */
.ob-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.ob-add .ob-f:first-child { grid-column: 1 / -1; }
.ob-add .ob-btn--sm { min-height: 52px; }
.ob-mates { display: grid; gap: 8px; list-style: none; }
.ob-mates:empty { display: none; }
.ob-mate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; animation: ob-up .45s var(--ease) both; }
.ob-mate__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E9EDFF; color: var(--royal); font-size: 13px; font-weight: 700; }
.ob-mate__e { min-width: 0; overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ob-mate__r { padding: 4px 10px; border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.ob-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; }
.ob-roles li { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 18px; background: var(--canvas); font-size: 13px; line-height: 1.45; }
.ob-roles b { color: var(--ink); font-size: 14px; }
.ob-roles__i { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ob-roles__i .i { width: 16px; height: 16px; }

/* ready */
.ob-done { display: grid; gap: 24px; margin-top: 30px; }
.ob-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; }
.ob-kt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; animation: ob-up .5s var(--ease) both; }
.ob-kt:nth-child(2) { animation-delay: .05s; }
.ob-kt:nth-child(3) { animation-delay: .1s; }
.ob-kt:nth-child(4) { animation-delay: .15s; }
.ob-kt:nth-child(5) { animation-delay: .2s; }
.ob-kt:nth-child(6) { animation-delay: .25s; }
.ob-kt__i { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--canvas); color: var(--ink-2); }
.ob-kt__i::after {
  content: "";
  position: absolute;
  right: -4px; bottom: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3L9.5 3.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
  box-shadow: 0 0 0 2px #fff;
}
.ob-kt__i .i { width: 18px; height: 18px; }
.ob-kt__i--brand { background: var(--brand); color: #fff; }
.ob-kt__b { display: grid; min-width: 0; line-height: 1.35; }
.ob-kt__k { color: var(--muted); font-size: 12px; }
.ob-kt__v { color: var(--ink); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ob-kt__s { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ob-kt__e { align-self: start; min-height: 32px; margin: -6px -4px 0 0; padding: 0 4px; border: 0; background: none; color: var(--royal); font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-kt__e:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-todo { display: grid; gap: 10px; }
.ob-todo__k { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ob-todo.is-clear .ob-todo__k { display: none; }
.ob-todo__l { display: grid; gap: 8px; list-style: none; }
.ob-td { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border: 1px dashed #C7CEDF; border-radius: 18px; background: #FAFBFD; }
.ob-td__i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #E9EDFF; color: var(--royal); }
.ob-td__i .i { width: 18px; height: 18px; }
.ob-td__b { display: grid; min-width: 0; line-height: 1.4; }
.ob-td__b b { color: var(--ink); font-size: 14.5px; }
.ob-td__b span { color: var(--muted); font-size: 13px; }
.ob-td--ok { border: 1px solid #ABEFC6; background: var(--ok-bg); }
.ob-td--ok .ob-td__i { background: var(--ok); color: #fff; }
.ob-td--ok .ob-td__b span { color: var(--ok-ink); }
.ob-again { margin-top: -6px; }

/* ---------- the stage ---------- */
.ob-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  margin: 0 12px;
  border-radius: 28px;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(37, 71, 233, .28), rgba(37, 71, 233, 0) 70%),
    linear-gradient(180deg, #0C1226, var(--night) 70%);
  color: #fff;
}
.ob-stage__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ob-stage__fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-position: center;
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 55%, #000 25%, transparent 85%);
  mask-image: radial-gradient(75% 65% at 50% 55%, #000 25%, transparent 85%);
}
.ob-stage__fx::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-dark); opacity: .28; mix-blend-mode: overlay; }
.ob-stage__glow {
  position: absolute;
  top: 60%; left: 50%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 71, 233, .42), rgba(37, 71, 233, 0));
  transform: translate(-50%, -50%);
  transition: background .8s;
}
.ob-stage.has-phone .ob-stage__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 55%, transparent), transparent); }
.ob-stage__top { position: relative; z-index: 3; display: grid; justify-items: start; gap: 12px; padding: 26px 30px 0; }
.ob-stage__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.ob-stage__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(100, 244, 248, .18); animation: ob-blink 2.4s ease-in-out infinite; }
.ob-stage__msg.is-swap { animation: ob-up .6s var(--ease) both; }
.ob-stage__msg { max-width: 30ch; font-size: clamp(18px, 1.7vw, 24px); font-weight: 560; line-height: 1.25; letter-spacing: -.025em; color: #fff; }

.ob-scene {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  aspect-ratio: 680 / 460;
  margin: -6px auto -10px;
  transition: transform .9s var(--ease), opacity .6s;
}
@media (min-width: 1080px) {
  .ob-scene { width: min(94%, 800px, calc((100vh - 250px) * 680 / 460)); margin: 0; }
  .ob-stage.has-phone .ob-scene { opacity: .5; transform: translateX(-12%) scale(.72); }
  .ob[data-step="try"] .ob-stage.has-phone .ob-scene { opacity: 1; }
}

/* the drawing on the dark stage */
.ob-iso { display: block; width: 100%; height: auto; overflow: visible; }
.ob-iso * { stroke-linejoin: round; stroke-linecap: round; }
.ob-iso :is(polygon, polyline, path, circle, ellipse) { transition: fill .6s, stroke .6s; }
.ob-floor { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.ob-grid { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.ob-iso .f-l { fill: #E6EAF3; stroke: #9AA1B5; stroke-width: 1.25; }
.ob-iso .f-r, .ob-iso .f-t, .ob-iso .scr { fill: #fff; stroke: #9AA1B5; stroke-width: 1.25; }
.ob-iso .scr { stroke: #B9BFCD; stroke-width: 1; }
.ob-iso .soft { fill: #EEF1F7; stroke: #CDD3E0; stroke-width: 1; }
.ob-iso .i-l { fill: #121731; stroke: #4A5270; stroke-width: 1.25; }
.ob-iso .i-r { fill: #181E3A; stroke: #4A5270; stroke-width: 1.25; }
.ob-iso .i-t { fill: #0A0E1F; stroke: #5A6488; stroke-width: 1.25; }
.ob-iso .r-l { fill: #1B36C4; stroke: #1B36C4; stroke-width: 1.25; }
.ob-iso .r-r { fill: var(--royal); stroke: var(--royal); stroke-width: 1.25; }
.ob-iso .r-t { fill: #3654F0; stroke: #6F88FF; stroke-width: 1.25; }
.ob-iso .r-t-edge { fill: none; stroke: #8FA3F5; stroke-width: 1; }
.ob-iso .ln { fill: none; stroke: #9AA1B5; stroke-width: 1.25; }
.ob-iso .notch { fill: none; stroke: #9AA1B5; stroke-width: 2.4; }
.ob-iso .flow, .ob-iso .dash { fill: none; stroke: rgba(154, 161, 181, .8); stroke-width: 1.4; stroke-dasharray: 3 4; }
.ob-iso .node { fill: #9AA1B5; }
.ob-iso .node-r { fill: var(--cyan); }
.ob-iso .tick-w { fill: none; stroke: #fff; stroke-width: 2.2; }
.ob-iso .ob-brand { fill: var(--brand); stroke: var(--brand); }
/* not there yet: a blueprint outline */
.ob-e { transition: opacity .6s var(--ease); }
.ob-e:not(.is-on) { opacity: .55; }
.ob-e:not(.is-on) :is(polygon, polyline, path, circle, ellipse) { fill: transparent; stroke: rgba(154, 161, 181, .42); stroke-width: 1; stroke-dasharray: 2 3; }
.ob-e--wire:not(.is-on), .ob-e--track:not(.is-on) { opacity: .3; }
.ob-stage.is-ready .ob-e.is-on { animation: ob-rise .9s var(--ease) both; }
.ob-e.is-on .ob-march { animation: ob-march 1.1s linear infinite; }
.ob-e--seal { transform-box: fill-box; transform-origin: 50% 100%; }
/* the flow's tiles */
.ob-t { opacity: 0; transform: translateY(-12px); transition: opacity .5s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms); }
.ob-t.is-on { opacity: 1; transform: none; }
.ob-t__top { fill: #fff; stroke: #9AA1B5; stroke-width: 1.25; }
.ob-t__ic { fill: none; stroke: #4A5270; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.ob-t.is-lit .f-l { fill: #1B36C4; stroke: #1B36C4; }
.ob-t.is-lit .f-r { fill: var(--royal); stroke: var(--royal); }
.ob-t.is-lit .ob-t__top { fill: #3654F0; stroke: #8FA3F5; }
.ob-t.is-lit .ob-t__ic { stroke: #fff; }
.ob-pk {
  opacity: 0;
  fill: var(--cyan);
  stroke: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(100, 244, 248, .9));
  transition: transform .5s cubic-bezier(.45, 0, .3, 1), opacity .3s;
}
.ob-pk.is-on { opacity: 1; }
.ob-pk.is-jump { opacity: 0; transition: none; }
/* labels and result chips, over the drawing */
.ob-lb, .ob-chip {
  position: absolute;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 4px));
  transition: opacity .4s, transform .5s var(--ease);
}
.ob-lb { background: rgba(14, 20, 40, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ob-lb::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 9px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.ob-lb.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); }
.ob-lb--core.is-on { background: rgba(37, 71, 233, .85); box-shadow: inset 0 0 0 1px rgba(143, 163, 245, .7); }
.ob-lb--seal.is-on { background: var(--ok); box-shadow: none; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); font-size: 11.5px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7); }
.ob-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ob-chip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 16px)); }

/* the cards: the phone and the first request */
.ob-cards { position: relative; z-index: 3; display: none; flex-direction: column; align-items: center; gap: 12px; padding: 4px 16px 20px; pointer-events: none; }
.ob-stage.has-code .ob-cards, .ob[data-step="try"] .ob-cards { display: flex; }
.ob[data-step="try"] .ob-scene { display: none; }
.ob-cards > * { pointer-events: auto; }
.ob-langs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ob-langs[hidden], .ob-langs__b[hidden] { display: none; }
.ob-langs__b { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-langs__b[aria-pressed="true"] { background: #fff; color: var(--ink); }
.ob-stage :focus-visible { outline-color: #fff; }
.ob-phone {
  display: none;
  flex: none;
  width: auto;
  height: min(580px, 80vh);
  aspect-ratio: 300 / 610;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(155deg, #3A4366, #0A0E1F 45%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 0 1px #000, 0 50px 90px -30px rgba(0, 0, 0, .85);
}
.ob[data-step="try"] .ob-phone { display: block; animation: ob-phone .8s var(--ease) both; }
.ob-codec {
  width: 100%;
  max-width: 460px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(10, 14, 31, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -20px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: ob-up .6s var(--ease) both;
}
.ob-codec[hidden] { display: none; }
.ob-codec__k { margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ob-codec pre { margin: 0; font-size: 12px; line-height: 1.7; color: #C9D3F5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-receipt { display: none; flex-wrap: wrap; align-content: flex-end; gap: 8px; min-height: 30px; padding: 0 30px 26px; list-style: none; }
.ob-rc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px 5px 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .86);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob-rc.is-new { animation: ob-pop .5s var(--ease) both; }
.ob-rc::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.3L9.5 3.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.ob-rc--sw::before { background: var(--brand); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }

@media (min-width: 1080px) {
  .ob-receipt { display: flex; }
  .ob-cards { position: absolute; top: 118px; right: 0; bottom: 70px; left: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 clamp(24px, 6%, 64px); }
  .ob[data-step="try"] .ob-scene { display: block; }
  .ob[data-step="try"] .ob-cards, .ob-stage.has-phone .ob-cards { display: flex; }
  .ob-stage.has-phone .ob-phone { display: block; height: min(600px, calc(100% - 50px)); animation: ob-phone .8s var(--ease) both; }
  .ob-stage.has-code .ob-cards { bottom: 26px; justify-content: flex-end; }
  .ob-stage.has-code .ob-receipt { visibility: hidden; }
  .ob-codec { max-width: 440px; }
}

/* ---------- the phone's screens (the hosted flow, in your brand) ---------- */
.ob-phone__scr {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 44px 18px 18px;
  border-radius: 38px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  transition: background .4s, color .4s;
}
.ob-phone__scr::before { content: ""; position: absolute; top: 11px; left: 50%; width: 84px; height: 24px; border-radius: var(--r-pill); background: #05070F; transform: translateX(-50%); }
.ob-phone__scr:has(> .op-v--dark:not([hidden])) { background: #0A0E1F; color: #fff; }
.op-top { display: flex; align-items: center; gap: 9px; }
.op-logo { display: grid; flex: none; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; transition: background .4s; }
.op-logo.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.op-logo.has-logo > span { display: none; }
.op-logo img { width: 100%; height: 100%; object-fit: contain; }
.op-name { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.op-lang { padding: 3px 8px; border-radius: var(--r-pill); background: var(--canvas); color: var(--muted); font-size: 10.5px; }
.ob-phone__scr:has(> .op-v--dark:not([hidden])) .op-lang { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.op-bar { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 3px; background: var(--line); }
.ob-phone__scr:has(> .op-v--dark:not([hidden])) .op-bar { background: rgba(255, 255, 255, .12); }
.op-bar i { display: block; width: 0; height: 100%; background: var(--brand); transition: width .6s var(--ease), background .4s; }
.op-v { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding-top: 22px; animation: ob-up .5s var(--ease) both; }
.op-v[hidden] { display: none; }
.op-h { font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; color: inherit; }
.op-h:focus { outline: none; }
.op-p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.op-v--dark .op-p { color: rgba(255, 255, 255, .66); }
.op-h--c, .op-p--c { text-align: center; }
.op-steps { display: grid; gap: 8px; margin-top: 4px; list-style: none; counter-reset: hf; }
.op-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--canvas); font-size: 12.5px; font-weight: 600; counter-increment: hf; }
.op-steps li::before { content: counter(hf); display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 11px; box-shadow: inset 0 0 0 1px var(--line); }
.op-fine { margin-top: auto; color: var(--muted); font-size: 11px; text-align: center; }
.op-btn {
  flex: none;
  min-height: 46px;
  margin-top: auto;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: filter .2s, background .4s, transform .2s var(--ease);
}
.op-btn:hover { filter: brightness(1.12); }
.op-btn:active { transform: scale(.98); }
.op-fine + .op-btn { margin-top: 0; }
.op-v--dark .op-btn { background: #fff; color: var(--ink); }
.op-code { padding: 14px; border-radius: 12px; background: var(--canvas); color: var(--ink); font-size: 22px; letter-spacing: .14em; text-align: center; }
.op-frame { position: relative; display: grid; flex: 1; place-items: center; min-height: 120px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #222B52, #0A0E1F 75%); }
.op-frame::before {
  --c: rgba(255, 255, 255, .85);
  content: "";
  position: absolute;
  inset: 12%;
  background:
    linear-gradient(var(--c), var(--c)) left top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 22px no-repeat;
}
.op-frame__card { position: relative; width: 74%; aspect-ratio: 1.42; border-radius: 9px; background: linear-gradient(135deg, #F4F6FA, #D9DFEB); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .7); transition: transform .4s var(--ease); }
.op-frame__card::after { content: ""; position: absolute; right: 7%; bottom: 10%; left: 7%; height: 12%; background: repeating-linear-gradient(90deg, #9AA1B5 0 3px, transparent 3px 5px); opacity: .55; }
.op-frame__card i { position: absolute; left: 41%; height: 6%; border-radius: 3px; background: #C2C9D8; }
.op-frame__card i:nth-child(1) { top: 15%; left: 8%; width: 26%; height: 52%; border-radius: 5px; background: linear-gradient(180deg, #B9C0D2, #9AA1B5); }
.op-frame__card i:nth-child(2) { top: 20%; width: 44%; }
.op-frame__card i:nth-child(3) { top: 34%; width: 32%; }
.op-frame__card i:nth-child(4) { top: 48%; width: 40%; }
.op-frame--doc .op-frame__card { width: 56%; aspect-ratio: .72; }
.op-frame--doc .op-frame__card::after { display: none; }
.op-frame--doc .op-frame__card i { left: 12%; }
.op-frame--doc .op-frame__card i:nth-child(1) { top: 10%; left: 12%; width: 30%; height: 7%; border-radius: 3px; background: #9AA1B5; }
.op-frame--doc .op-frame__card i:nth-child(2) { top: 26%; width: 60%; }
.op-frame--doc .op-frame__card i:nth-child(3) { top: 36%; width: 48%; }
.op-frame--doc .op-frame__card i:nth-child(4) { top: 46%; width: 70%; }
.op-scan { position: absolute; top: 14%; right: 10%; left: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 14px var(--cyan); animation: op-scan 2.2s ease-in-out infinite alternate; }
.is-capturing .op-frame::before, .is-captured .op-frame::before { --c: #47CD89; }
.is-captured .op-frame__card { transform: scale(.94); }
.is-captured .op-frame::after { content: ""; position: absolute; inset: 0; background: #fff; animation: op-flash .5s ease-out both; }
.is-capturing .op-btn, .is-captured .op-btn { opacity: .5; pointer-events: none; }
.op-oval { display: grid; flex: 1; place-items: center; min-height: 0; }
.op-oval svg { width: auto; height: 100%; max-height: 230px; }
.op-oval__bg { fill: #1A2245; stroke: rgba(255, 255, 255, .2); stroke-width: 2; }
.op-oval__fg { fill: none; stroke: #47CD89; stroke-width: 5; stroke-dasharray: 0 100; }
.is-capturing .op-oval__fg, .is-captured .op-oval__fg { animation: op-ring 1.5s var(--ease) forwards; }
.op-spin { width: 56px; height: 56px; margin: auto auto 6px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: ob-spin .9s linear infinite; }
.op-spin + .op-h { margin-top: 0; }
[data-hf="checking"] .op-p--c { margin-bottom: auto; }
.op-done { display: grid; place-items: center; width: 68px; height: 68px; margin: auto auto 6px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 14%, transparent); animation: ob-pop .6s var(--ease) both; }
.op-done .i { width: 30px; height: 30px; stroke-width: 2.4; }
[data-hf="done"] .op-p--c { margin-bottom: auto; }

/* ---------- narrow screens ---------- */
@media (max-width: 1079px) {
  .ob-only-wide { display: none; }
  .ob-only-narrow { display: inline; }
  .ob-stage__top { padding: 18px 20px 0; }
  .ob-stage__msg { font-size: 16px; }
  .ob-scene { margin: 22px auto -4px; }
  .ob-cards { padding-top: 18px; }
  .ob-lb, .ob-chip { padding: 3px 8px; font-size: 10.5px; }
  .ob-lb.is-on { transform: translate(-50%, calc(-100% - 8px)); }
  .ob-phone { width: min(100%, 380px); height: auto; aspect-ratio: auto; padding: 6px; border-radius: 32px; }
  .ob-phone__scr { height: auto; min-height: 480px; padding: 18px 18px 18px; border-radius: 27px; }
  .ob-phone__scr::before { display: none; }
  .op-oval svg { height: 200px; }
  .op-frame { min-height: 170px; }
  .ob-prev { display: grid; gap: 10px; }
}
@media (max-width: 640px) {
  .ob-top { padding-top: 14px; padding-bottom: 14px; }
  .ob-stage__top { padding: 14px 16px 0; }
  .ob-stage__k { display: none; }
  .ob-stage__msg { max-width: none; font-size: 15px; }
  .ob-scene { width: min(100%, 300px); margin: 14px auto 2px; }
  .ob-cards { padding: 12px 10px 14px; }
  .ob-seg span { gap: 0; font-size: 14px; }
  .ob-seg span .i { display: none; }
  .ob-prog__k { font-size: 11px; }
  .ob-stage { margin: 0 8px; border-radius: 22px; }
  .ob-s__h { font-size: 30px; }
  .ob-row2, .ob-row2--key { grid-template-columns: minmax(0, 1fr); }
  .ob-panel { padding: 18px 16px; border-radius: 20px; }
  .ob-2fa { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .ob-secs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-ck { gap: 12px; padding: 12px 14px 12px 10px; }
  .ob-ck__x { display: none; }
  .ob-bar { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 10px 12px 18px; }
  .ob-bar__b { grid-column: 1 / -1; grid-row: 2; }
  .ob-bar .ob-btn { grid-column: 2; grid-row: 1; }
  .ob-bar__a b { font-size: 22px; }
  .ob-roles { grid-template-columns: minmax(0, 1fr); }
  .ob-kit { grid-template-columns: minmax(0, 1fr); }
  .ob-td { grid-template-columns: auto minmax(0, 1fr); }
  .ob-td .btn { grid-column: 2; justify-self: start; }
  .ob-run__head { padding: 14px 14px 14px 16px; }
  .ob-s__go .ob-btn { flex: 1 1 100%; }
  .ob-s__go .btn--primary { justify-content: space-between; }
}
@media (max-width: 400px) {
  .ob-scene { width: min(100%, 268px); }
}

/* ---------- sign in ---------- */
.ob--signin .ob-main { align-self: center; }
.ob--signin .ob-f--2fa { animation: ob-up .5s var(--ease) both; }
.ob--signin .ob-f--2fa[hidden] { display: none; }
@media (min-width: 1080px) {
  .ob--signin { grid-template-rows: auto 1fr; }
  .ob--signin .ob-main { padding-bottom: 18vh; }
}
.ob-stage--still .ob-scene { margin-bottom: 26px; }
@media (max-width: 1079px) {
  .ob--signin .ob-stage { display: none; }
  .ob--signin .ob-main { padding-top: clamp(24px, 6vh, 56px); }
}

/* ---------- motion ---------- */
@keyframes ob-fade { from { opacity: 0; } }
@keyframes ob-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ob-pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: none; } }
@keyframes ob-rise { from { opacity: .2; transform: translateY(-16px); } }
@keyframes ob-march { to { stroke-dashoffset: -14; } }
@keyframes ob-blink { 50% { opacity: .35; } }
@keyframes ob-throb { 50% { box-shadow: 0 0 0 6px rgba(37, 71, 233, .15); } }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@keyframes ob-phone { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@keyframes op-scan { to { top: 84%; } }
@keyframes op-flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes op-ring { to { stroke-dasharray: 100 0; } }
@keyframes op-nudge { 0% { box-shadow: 0 0 0 0 var(--ring); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}
.ob-pk[data-at="s"] { transform: translate(95.1px, 175.6px); }
.ob-pk[data-at="core"] { transform: translate(384.6px, 309.7px); }
.ob-pk[data-at="app"] { transform: translate(546.2px, 305.8px); }
.ob-pk[data-at="turn"] { transform: translate(472.1px, 278.6px); }
.ob-pk[data-at="bend"] { transform: translate(532.7px, 313.6px); }
.ob-pk[data-at="0"] { transform: translate(138.9px, 195.0px); }
.ob-pk[data-at="1"] { transform: translate(167.5px, 211.5px); }
.ob-pk[data-at="2"] { transform: translate(196.1px, 228.1px); }
.ob-pk[data-at="3"] { transform: translate(224.7px, 244.6px); }
.ob-pk[data-at="4"] { transform: translate(253.3px, 261.1px); }
.ob-pk[data-at="5"] { transform: translate(281.9px, 277.6px); }
.ob-pk[data-at="6"] { transform: translate(310.5px, 294.1px); }
.ob-pk[data-at="7"] { transform: translate(339.2px, 310.7px); }
.ob-lb--hq { left: 48.39%; top: 10.50%; }
.ob-lb--shield { left: 59.28%; top: 35.85%; }
.ob-lb--mail { left: 50.62%; top: 47.68%; }
.ob-lb--team { left: 39.23%; top: 33.95%; }
.ob-lb--app { left: 83.66%; top: 56.65%; }
.ob-lb--dev { left: 66.71%; top: 51.48%; }
.ob-lb--phone { left: 17.08%; top: 14.83%; }
.ob-lb--core { left: 56.56%; top: 65.21%; }
.ob-lb--seal { left: 56.56%; top: 58.03%; }
.ob-lb--flow { left: 29.33%; top: 57.60%; }
.ob-chip--0 { left: 20.42%; top: 39.02%; }
.ob-chip--1 { left: 24.63%; top: 42.61%; }
.ob-chip--2 { left: 28.84%; top: 46.20%; }
.ob-chip--3 { left: 33.05%; top: 49.79%; }
.ob-chip--4 { left: 37.25%; top: 53.38%; }
.ob-chip--5 { left: 41.46%; top: 56.97%; }
.ob-chip--6 { left: 45.67%; top: 60.56%; }
.ob-chip--7 { left: 49.88%; top: 64.15%; }

/* the system map (library/map) */

/* ==========================================================================
   How it works · option 3: the system map. One wide isometric map of the whole
   journey; a verification runs through it on a loop and the four cells below
   follow along. Choosing a step jumps the run there.
   ========================================================================== */
.map__stage { position: relative; margin: 0; padding: 48px 32px 40px; border-top: 1px solid var(--line); }
.map__stage::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  height: 9px;
  pointer-events: none;
  background: linear-gradient(var(--tone2), var(--tone2)) 4px 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 0 4px / 9px 1px no-repeat, linear-gradient(var(--tone2), var(--tone2)) calc(100% - 4px) 0 / 1px 9px no-repeat, linear-gradient(var(--tone2), var(--tone2)) 100% 4px / 9px 1px no-repeat;
}
.map__art { position: relative; max-width: 1136px; margin-inline: auto; }
.map__art::before {
  content: "";
  position: absolute;
  inset: -8% -2%;
  z-index: -1;
  background:
    repeating-linear-gradient(30deg, transparent 0 27px, #EEF1F7 27px 28px),
    repeating-linear-gradient(150deg, transparent 0 27px, #EEF1F7 27px 28px);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 78%);
}
.hw-map { display: block; width: 100%; height: auto; }
.map__lbl { position: absolute; z-index: 1; padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(10, 14, 31, .05); color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -140%); transition: color .4s, border-color .4s, background-color .4s, box-shadow .4s; }
.map[data-stage="1"] .map__lbl[data-stage="1"], .map[data-stage="2"] .map__lbl[data-stage="2"], .map[data-stage="3"] .map__lbl[data-stage="3"], .map[data-stage="4"] .map__lbl[data-stage="4"] { border-color: rgba(37, 71, 233, .35); background: #fff; box-shadow: 0 0 0 3px rgba(37, 71, 233, .1); color: var(--royal); }
.map__lbl--reject { transform: translate(-50%, 60%); }

/* the run: parts light as the verification reaches them */
.hw-map [data-at], .hw-map .m-pkt { transition: opacity .35s var(--ease); }
.hw-map .m-lit, .hw-map .m-ok, .hw-map .m-focus, .hw-map .m-face .m-node, .hw-map .m-tap, .hw-map .m-puck { transform-box: fill-box; transform-origin: center; }
.map.is-playing .hw-map .m-lit:not(.is-on), .map.is-playing .hw-map .m-ok:not(.is-on) { opacity: 0; }
.map.is-playing .hw-map .m-focus:not(.is-on), .map.is-playing .hw-map .m-face:not(.is-on) .m-node { opacity: .28; }
.map.is-playing .hw-map .m-pkt { opacity: 0; }
.map.is-playing .hw-map .m-pkt.is-on { opacity: 1; }
.map:not(.is-playing) .hw-map .m-pkt { opacity: 0; }
.hw-map .m-lit.is-on, .hw-map .m-ok.is-on { animation: map-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes map-pop { from { transform: scale(.6); } }
.hw-map .m-focus.is-on { animation: map-focus 1.2s ease-in-out infinite alternate; }
@keyframes map-focus { to { transform: scale(1.05); } }
.hw-map .m-face.is-on .m-node { animation: map-node 1.1s ease-in-out infinite; }
@keyframes map-node { 50% { transform: scale(1.6); } }
.hw-map .m-rules.is-on .m-rules-top { animation: map-think 1.2s ease-in-out infinite; }
@keyframes map-think { 50% { fill: #232B4E; } }
.hw-map .m-drawer--2.is-on { animation: map-drawer .7s cubic-bezier(.45, 0, .3, 1) forwards; }
.hw-map .m-puck.is-on { animation: map-bob 2.4s ease-in-out infinite; }
.hw-map .m-tap.is-on { animation: map-tap .6s ease-in-out 2; }
@keyframes map-tap { 50% { transform: scale(.9); } }
.map.is-playing .m-branch { opacity: .5; }

/* the four steps */
.map__steps { border-top: 0; }
.map__steps > li.map-step { display: flex; flex-direction: column; padding: 28px 32px 32px; }
.map-step__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.map-step__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--royal), var(--sky)); transform: scaleX(var(--sp, 0)); transform-origin: left; }
.map-step__num { color: var(--tone2); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; transition: color .4s; }
.map-step__title { margin-top: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.map-step__btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.map-step__btn::after { content: ""; position: absolute; inset: 0; }
.map-step__btn:focus-visible { outline: none; }
.map-step:has(.map-step__btn:focus-visible) { outline: 2px solid var(--royal); outline-offset: -2px; }
.map-step__text { margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }
.map-step { transition: background-color .5s var(--ease); }
.map-step:hover { background: linear-gradient(180deg, #F7F9FF 0%, rgba(247, 249, 255, 0) 80%); }
.map-step.is-on .map-step__num { color: var(--royal); }
.map-step.is-on { background: linear-gradient(180deg, #F5F8FF 0%, rgba(245, 248, 255, 0) 80%); }

@media (max-width: 767px) {
  .map__stage { padding: 32px 0 24px; overflow-x: auto; scrollbar-width: none; }
  .map__stage::-webkit-scrollbar { display: none; }
  .map__art { width: 760px; max-width: none; }
  .map__stage::after { display: none; }
  .map__steps > li.map-step { padding: 22px 0 26px; }
}
.map__lbl--applicant { left: 5.26%; top: 11.63%; }
.map__lbl--capture { left: 14.34%; top: 67.51%; }
.map__lbl--checks { left: 38.15%; top: 60.23%; }
.map__lbl--rules { left: 54.28%; top: 30.32%; }
.map__lbl--review { left: 76.72%; top: 25.99%; }
.map__lbl--reject { left: 60.21%; top: 71.45%; }
.map__lbl--approve { left: 73.44%; top: 61.02%; }
.map__lbl--evidence { left: 91.84%; top: 30.32%; }
@keyframes map-drawer { to { transform: translate(-12.88px, 7.44px); } }
@keyframes map-bob { 50% { transform: translate(0.00px, -8.27px); } }

/* ==========================================================================
   41. Book a demo (demo.html) and Contact (contact.html): one card with three
   short steps, a summary line on top of it that opens for the details, and a
   calm hero above. (Focused version, chosen by Imran on 3 Oct 2026.)
   Form parts reuse the onboarding's fields and chips (.ob-*).
   ========================================================================== */
.dm { position: relative; isolation: isolate; padding: clamp(132px, 13vw, 168px) 0 clamp(72px, 8vw, 112px); }
.dm__bg { position: absolute; inset: 0 0 auto; z-index: -1; height: 620px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); pointer-events: none; }
.dm__bg canvas { width: 100%; height: 100%; }
.dm__head { max-width: 760px; margin: 0 auto; text-align: center; }
.dm__h { margin-top: 22px; font-size: clamp(38px, 5.4vw, 66px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.dm__h .ink { display: block; color: var(--ink); }
.dm__h .tone { display: block; color: var(--tone2); }
.dm__lede { max-width: 520px; margin: 22px auto 0; color: var(--body); font-size: 18px; line-height: 1.6; }
.dm__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "card"; align-items: start; gap: 0; max-width: 720px; margin: clamp(44px, 5vw, 64px) auto 0; }
.dm__grid--ct { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); grid-template-areas: none; gap: 28px; max-width: 1080px; }

/* ---------- the card and its steps ---------- */
.dm-card { grid-area: card; position: relative; min-width: 0; padding: clamp(24px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .04), 0 30px 70px -40px rgba(15, 31, 122, .35); }
.dm__grid--ct .dm-card { grid-area: auto; }
.dm__grid:not(.dm__grid--ct) .dm-card { border-radius: 0 0 28px 28px; }
.dm-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.dm-prog[hidden] { display: none; }
.dm-prog li { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 3px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; transition: border-color .4s var(--ease), color .3s; }
.dm-prog__n { color: var(--tone2); font-size: 12px; transition: color .3s; }
.dm-prog li.is-on { border-color: var(--royal); color: var(--ink); }
.dm-prog li.is-on .dm-prog__n { color: var(--royal); }
.dm-prog li.is-done { border-color: #9BAAF5; color: var(--ink-2); }
.dm-form { display: grid; grid-template-columns: minmax(0, 1fr); }
.dm-form[hidden] { display: none; }
.dm-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.dm-step[hidden] { display: none; }
.dm-form.is-steps .dm-step:not([hidden]) { animation: dm-in .5s var(--ease) both; }
.dm-form:not(.is-steps) .dm-step + .dm-step { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.dm-form:not(.is-steps) .dm-act > :not([type="submit"]) { display: none; }
@keyframes dm-in { from { opacity: 0; transform: translateY(10px); } }
.dm-step__h { color: var(--ink); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.dm-step__h:focus { outline: none; }
.dm-step__lede { margin-top: -14px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.dm-opt { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ob-fs > legend.ob-f__l { display: flex; }
.dm-fs .ob-f__err { margin-top: 2px; }
.dm .ob-secs { display: flex; flex-wrap: wrap; gap: 8px; }
.dm .ob-sec__c { min-height: 44px; padding: 5px 16px 5px 5px; border-radius: 999px; gap: 9px; }
.dm .ob-sec__i { width: 32px; height: 32px; border-radius: 50%; }
.dm .ob-sec__i .i { width: 15px; height: 15px; }
.dm .ob-sec__n { flex: none; font-size: 14px; white-space: nowrap; }
.dm-cks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-cks > li { border-top: 1px solid var(--line); }
.dm-cks > li:nth-child(-n+2) { border-top: 0; }
.dm-cks > li:nth-child(even) { border-left: 1px solid var(--line); }
.dm-cks .ob-ck { min-height: 60px; }
.dm-picks4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-picks4 .ob-pick__b, .dm-wins .ob-pick__b { width: 100%; justify-content: center; }
.dm-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-win .ob-pick__b { min-height: 58px; padding: 8px 12px; border-radius: 16px; }
.dm-win .ob-pick__t { display: grid; gap: 2px; text-align: left; }
.dm-win__t { color: var(--muted); font-size: 12px; font-weight: 500; }
.dm-win input:checked + .ob-pick__b .dm-win__t { color: #3B4FC4; }
.dm-tz { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.dm-tz .i { width: 15px; height: 15px; flex: none; }
.dm-tz b { color: var(--ink-2); font-weight: 600; }
.dm-note { font: inherit; font-size: 16px; min-height: 96px; padding-top: 12px; resize: vertical; line-height: 1.5; }
.dm-fine { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* the days: ten working days, two rows of five */
.dm-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dm-days:empty { display: none; }
.dm-day { position: relative; }
.dm-day > input { position: absolute; opacity: 0; pointer-events: none; }
.dm-day__b { display: grid; justify-items: center; gap: 1px; padding: 10px 6px 11px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s var(--ease); }
.dm-day__w { color: var(--muted); font-size: 12px; font-weight: 600; }
.dm-day__n { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.dm-day__m { color: var(--muted); font-size: 12px; }
.dm-day:hover .dm-day__b { border-color: #B4BCCE; }
.dm-day > input:checked + .dm-day__b { border-color: var(--royal); background: var(--royal); box-shadow: 0 12px 24px -14px rgba(37, 71, 233, .9); }
.dm-day > input:checked + .dm-day__b > * { color: #fff; }
.dm-day > input:checked + .dm-day__b .dm-day__w, .dm-day > input:checked + .dm-day__b .dm-day__m { color: rgba(255, 255, 255, .78); }
.dm-day > input:focus-visible + .dm-day__b { outline: 2px solid var(--royal); outline-offset: 3px; }

/* the actions */
.dm-act { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.dm-back { margin-right: auto; }
.dm-back__i { width: 16px; height: 16px; margin-right: 8px; transform: scaleX(-1); }
.dm-go { min-width: 180px; justify-content: space-between; }
.dm-act--one { justify-content: flex-start; }

/* ---------- the summary: a slim line on top of the card that opens for the details ---------- */
.dm-sum { grid-area: sum; position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; background: #F7F8FC; }
.dm-sum__bar { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 20px 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dm-sum__mk { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #EEF1FF; }
.dm-sum__mk svg { width: 26px; height: 22px; }
.dm-sum__mk use:first-child { fill: var(--royal); }
.dm-sum__mk use:last-child { fill: var(--sky); }
.dm-sum__line { display: grid; flex: 1; min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.dm-sum__line b { color: var(--ink); font-size: 15px; }
.dm-sum__line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-sum__chev { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: transform .3s var(--ease); }
.dm-sum__chev .i { width: 15px; height: 15px; }
.dm-sum.is-open .dm-sum__chev { transform: rotate(180deg); }
.dm-sum__bar:focus-visible { outline: 2px solid var(--royal); outline-offset: -4px; border-radius: 22px; }
.dm-sum__body { display: none; padding: 0 22px 18px; }
.dm-sum.is-open .dm-sum__body { display: block; }
.dm-sum__dl { display: grid; margin: 0; }
.dm-sum__dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.dm-sum__dl dt { padding-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.dm-sum__dl dd { min-width: 0; margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.dm-sum__sub { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.dm-ph { color: var(--tone2); font-weight: 400; }
.dm-flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: dmf; }
.dm-flow li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; counter-increment: dmf; animation: dm-chip .35s var(--ease) both; }
.dm-flow li::before { content: counter(dmf); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #EEF1FF; color: var(--royal); font-family: var(--mono); font-size: 10.5px; }
.dm-flow li.dm-ph { padding: 0; border: 0; background: none; font-weight: 400; }
.dm-flow li.dm-ph::before { content: none; }
@keyframes dm-chip { from { opacity: 0; transform: scale(.92); } }
.dm-sum__price { margin-top: 10px; color: var(--muted); font-size: 13px; font-weight: 400; }
.dm-sum__price b { color: var(--ink); font-size: 16px; font-weight: 600; }
.dm-sum__foot { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.dm-sum__foot a { color: var(--royal); font-weight: 600; text-decoration: none; }
.dm-sum__foot a:hover { text-decoration: underline; }

/* ---------- done ---------- */
.dm-done { display: grid; justify-items: center; padding: 18px 0 6px; text-align: center; animation: dm-in .6s var(--ease) both; }
.dm-done[hidden] { display: none; }
.dm-done__ico svg { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dm-done__ico circle { fill: #ECFDF3; stroke: #A6F4C5; stroke-width: 2; }
.dm-done__ico path { stroke: var(--ok); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: dm-tick .6s .25s var(--ease) forwards; }
@keyframes dm-tick { to { stroke-dashoffset: 0; } }
.dm-done__h { margin-top: 18px; color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.035em; }
.dm-done__h:focus { outline: none; }
.dm-done__x { max-width: 420px; margin-top: 8px; color: var(--body); font-size: 16px; line-height: 1.55; }
.dm-done__x b { color: var(--ink); font-weight: 600; }
.dm-next { display: grid; gap: 10px; width: 100%; max-width: 460px; margin: 26px 0 0; padding: 0; list-style: none; text-align: left; }
.dm-next li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #FAFBFD; color: var(--muted); font-size: 14px; line-height: 1.45; }
.dm-next b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.dm-next__i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #EEF1FF; color: var(--royal); }
.dm-next__i .i { width: 17px; height: 17px; }
.dm-done__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* ---------- contact ---------- */
.ct-card__h { margin-bottom: 22px; }
.ct-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ct-form[hidden] { display: none; }
.ct-side { display: grid; gap: 14px; min-width: 0; }
.ct-routes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ct-route { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: border-color .2s, box-shadow .3s var(--ease); }
.ct-route:hover { border-color: #C9D0E2; box-shadow: 0 18px 40px -26px rgba(15, 31, 122, .4); }
.ct-route__i { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #EEF1FF; color: var(--royal); }
.ct-route__t { color: var(--ink); font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.ct-route__x { margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ct-route__a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 6px; color: var(--royal); font-size: 14px; font-weight: 600; text-decoration: none; }
.ct-route__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ct-route__a .i { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.ct-route:hover .ct-route__a .i { transform: translateX(3px); }
.ct-route__a:focus-visible { outline: none; }
.ct-route:has(.ct-route__a:focus-visible) { outline: 2px solid var(--royal); outline-offset: 3px; }
.ct-mail { padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, #F7F8FC, #fff); }
.ct-mail__k { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ct-mail__v { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ct-mail__v a { color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ct-mail__v a:hover { color: var(--royal); }
.ct-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 13px/1 var(--font); cursor: pointer; transition: border-color .2s, color .2s; }
.ct-copy .i { width: 15px; height: 15px; }
.ct-copy:hover { border-color: #B4BCCE; color: var(--ink); }
.ct-copy.is-ok { border-color: #A6F4C5; color: var(--ok-ink); }

/* ---------- tablets and phones ---------- */
@media (max-width: 900px) {
  .dm__grid--ct { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .dm { padding-top: 116px; }
  .dm__h { font-size: clamp(34px, 10vw, 44px); }
  .dm__lede { font-size: 16.5px; }
  .dm__grid { margin-top: 32px; }
  .dm-card { padding: 22px 18px 0; border-radius: 24px; }
  .dm__grid:not(.dm__grid--ct) .dm-card { border-radius: 0 0 24px 24px; }
  .dm-sum { border-radius: 20px 20px 0 0; }
  .dm-sum__bar { min-height: 60px; padding: 10px 14px 10px 12px; gap: 12px; }
  .dm-sum__mk { width: 38px; height: 38px; border-radius: 12px; }
  .dm-sum__mk svg { width: 24px; height: 20px; }
  .dm-sum__line { font-size: 13px; }
  .dm-sum__line b { font-size: 14.5px; }
  .dm-sum__chev { width: 32px; height: 32px; }
  .dm-sum__body { padding: 0 18px 16px; }
  .dm .ob-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm .ob-sec__c { border-radius: 16px; }
  .dm .ob-sec__n { flex: 1; white-space: normal; line-height: 1.2; }
  .dm__grid--ct .dm-card, .dm-card.is-done { padding-bottom: 22px; }
  .dm-prog { margin-bottom: 24px; }
  .dm-prog li { font-size: 12px; }
  .dm-step { gap: 20px; }
  .dm-step__h { font-size: 24px; }
  .dm-cks { grid-template-columns: minmax(0, 1fr); }
  .dm-cks > li:nth-child(2) { border-top: 1px solid var(--line); }
  .dm-cks > li:nth-child(even) { border-left: 0; }
  .dm-picks4, .dm .ob-picks:not(.dm-wins) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm .ob-picks:not(.dm-wins) .ob-pick__b { width: 100%; min-height: 48px; padding-block: 6px; line-height: 1.25; }
  .ob-picks .ob-pick__b { min-height: 44px; }
  .dm .ob-row2 { grid-template-columns: minmax(0, 1fr); }
  .dm-days { display: flex; gap: 8px; margin-inline: -18px; padding: 2px 18px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none; }
  .dm-days::-webkit-scrollbar { display: none; }
  .dm-day { flex: 0 0 66px; scroll-snap-align: start; }
  .dm-wins { gap: 6px; }
  .dm-win .ob-pick__b { padding: 8px 8px; justify-content: center; }
  .dm-win .ob-pick__mk { display: none; }
  .dm-win .ob-pick__t { justify-items: center; text-align: center; }
  /* the step's actions stay under the thumb while the card is on screen */
  .dm-act { position: sticky; bottom: 0; z-index: 3; margin: 4px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 0 0 24px 24px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .dm-act .btn { min-height: 52px; }
  .dm-back { flex: none; padding-inline: 18px; }
  .dm-go { flex: 1; min-width: 0; }
  .dm__grid--ct .dm-act { position: static; margin: 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dm__grid--ct .dm-go { width: 100%; }
  .dm-done__go { flex-direction: column; align-self: stretch; }
  .dm-done__go .btn { width: 100%; }
  .ct-route { padding: 18px 16px 16px; }
}

/* phones: the field you type in stays above the sticky action bar */
@media (max-width: 640px) {
  html:has(.dm-form) { scroll-padding-bottom: 104px; }
}
@media (max-width: 400px) {
  .dm .ob-sec__i { display: none; }
  .dm .ob-sec__c { padding: 8px 12px; }
}
@media (max-width: 380px) {
  .dm-prog li:not(.is-on) { font-size: 0; }
  .dm-prog li:not(.is-on) .dm-prog__n { font-size: 12px; }
}

/* the section under the booking card starts closer (Imran, 3 Oct 2026) */
.page--demo .dm { padding-bottom: 56px; }
.page--demo #expect { padding-top: 64px; }
@media (max-width: 640px) {
  .page--demo .dm { padding-bottom: 40px; }
  .page--demo #expect { padding-top: 48px; }
}

/* ==========================================================================
   40. Mobile pass (2 Oct 2026). One system for phones: heads centred, cards
   and forms left; dark panels run edge to edge so every page shares one
   16px gutter; card rows you swipe carry a pager; every control is at least
   44px to the thumb; no label under 12px. Plus the nav's active state, and
   room above dark panels that follow a light section.
   ========================================================================== */

/* ---------- the nav: the page you are on sits in a soft pill, no dot ---------- */
.nav-pill .primary-nav a[aria-current="page"] { background: rgba(10, 14, 31, .06); color: var(--ink); font-weight: 500; }
.nav-pill .primary-nav a[aria-current="page"]::after { content: none; }
.has-hover-motion .nav-pill .primary-nav a[aria-current="page"]:hover { background: rgba(10, 14, 31, .06); }
.mobile-menu__list a[aria-current="page"] { margin-inline: -6px; padding-inline: 14px; border-bottom-color: transparent; border-radius: 14px; background: rgba(10, 14, 31, .05); color: var(--ink); }

/* ---------- breathing room where a light section meets a dark panel ---------- */
:is(.guides, .ph, .section) + .panel--dark { margin-top: clamp(56px, 7vw, 104px); }
.bi-grid { margin-bottom: 0; }

/* ---------- text links: a 44px target without moving the line ---------- */
.text-link { position: relative; }
.text-link::before { content: ""; position: absolute; inset: -11px -6px -8px; }

/* ---------- the mobile menu: a solid sheet over a dimmed page ---------- */
@media (max-width: 1023px) {
  .site-header.menu-open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(7, 10, 23, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: auto; animation: menu-dim .25s ease both; }
  .mobile-menu { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; max-height: calc(100dvh - 100px); overscroll-behavior: contain; }
  .mobile-menu__list a { min-height: 56px; }
  .mobile-menu__actions .btn--secondary { width: 100%; }
  html.menu-lock, html.menu-lock body { overflow: hidden; }
}
@keyframes menu-dim { from { opacity: 0; } }

/* ---------- the pager under a swipe row (built by js/mobile.js) ---------- */
.sw-pager { display: none; }

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 640px) {
  /* one gutter: dark panels run edge to edge, keeping their rounded corners */
  .panel, .bp__frame { margin-inline: 0; border-radius: 28px; }

  /* heads are centred; cards, lists and forms stay left */
  .section-head, .section-head > div, .ip-head__side, .ph__lead, .ph__aside, .hero--cp .hero__lead, .hero--cp .hero__aside, .bp__copy, .ev__head, .sides__head, .faq-split__head, .trust__head { text-align: center; }
  .section-head .lede, .ip-head__side .lede, .ph__lede, .hero__sub, .bp__lede, .ev__head .lede, .sides__lede, .faq-split__head p { margin-inline: auto; }
  .section-head .h2, .ph__h, .bp__h { margin-inline: auto; }
  .ip-head__side .text-link, .faq-split__head .text-link { margin-inline: auto; }
  .ph__btns, .hero--cp .hero__ctas { flex-direction: column; align-items: stretch; justify-content: center; width: 100%; }
  .ph__btns .btn, .hero--cp .hero__ctas .btn { width: 100%; flex: none; }
  .ph__ticks { flex-direction: column; align-items: flex-start; gap: 8px; width: fit-content; margin-inline: auto; text-align: left; }
  .hero--cp .hero__reassure { width: fit-content; margin-inline: auto; align-items: flex-start; }
  .hero--cp .badge { align-self: center; margin-inline: auto; }
  .ip-band { flex-direction: column; align-items: center; text-align: center; }
  .ip-band__t { flex-direction: column; align-items: center; }
  .ip-band__cta { justify-content: center; }

  /* card rows you swipe: real cards with a gap, so text never meets a rule */
  :is(.swipe, .ind-grid.xcells, .pcs.xcells, .vault.xgrid) { gap: var(--gutter); padding-bottom: 6px; scroll-padding-inline: var(--gutter); }
  :is(.swipe, .ind-grid.xcells, .pcs.xcells, .vault.xgrid) > * { flex-basis: 84% !important; padding: 22px 20px 24px !important; border: 1px solid var(--line) !important; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(10, 14, 31, .04); }
  .sw-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
  .sw-pager[hidden] { display: none; }
  .sw-pager__d { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); cursor: pointer; transition: width .3s var(--ease), background-color .3s; }
  .sw-pager__d.is-on { width: 20px; background: var(--royal); }
  .sw-pager__n { margin-left: 8px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
  .panel--dark .sw-pager__d, .dome-section .sw-pager__d { background: rgba(255, 255, 255, .22); }
  .panel--dark .sw-pager__d.is-on, .dome-section .sw-pager__d.is-on { background: var(--cyan); }
  .panel--dark .sw-pager__n, .dome-section .sw-pager__n { color: rgba(255, 255, 255, .6); }

  /* tab rails that scroll show it with a fade */
  .sc-tabs, .rt__steps, .in-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .sc-tab { min-height: 44px; }

  /* the shared demo form: iOS keeps the zoom at 16px and up */
  .bpf-f input, .bpf-f select { font-size: 16px; }
  .bpf { margin-inline: 0; }
  .bp-map { display: none; }
  .bpf-seg__o { min-height: 44px; }
  .bpf__alt a { display: inline-flex; align-items: center; min-height: 44px; }
  .bp__pause { width: 44px; height: 44px; }

  /* labels: nothing under 12px, and dark enough to read */
  .eyebrow { font-size: 12px; }
  .bpf__dur, .ft-reach__k, .ft-nav__h { font-size: 12px; }
  .ft-nav__h { color: rgba(255, 255, 255, .6); }

  /* questions wrap evenly instead of in two short lines */
  .faq__q, .bi-c__t { text-wrap: pretty; }

  /* the footer: groups fold away (js/mobile.js), links are thumb-sized */
  .ft-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .ft-nav.is-fold { display: block; }
  .ft-nav.is-fold .ft-nav__col { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .ft-nav.is-fold .ft-nav__h { margin: 0; }
  .ft-nav__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
  .ft-nav__pm { position: relative; width: 12px; height: 12px; flex: none; }
  .ft-nav__pm::before, .ft-nav__pm::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease); }
  .ft-nav__pm::after { transform: rotate(90deg); }
  .ft-nav__btn[aria-expanded="true"] .ft-nav__pm::after { transform: rotate(0); }
  .ft-nav.is-fold .ft-nav__col > ul { padding-bottom: 12px; }
  .ft-nav.is-fold .ft-nav__col > ul[hidden] { display: none; }
}
@media (max-width: 1023px) and (pointer: coarse) {
  .ft .ft-top { height: 44px; padding: 0 16px; }
}

/* ==========================================================================
   Home, on phones
   ========================================================================== */
@media (max-width: 767px) {
  /* the checkpoint runs edge to edge, so cards enter from the screen's edge, not mid-air */
  .hero--cp .cp__tokens { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
}
@media (max-width: 640px) {
  /* the flow builder: one card layer less, presets as an even three-way switch */
  .composer { padding: 8px; border-radius: 26px; }
  .composer__top { padding: 16px 14px 14px; border-radius: 20px; }
  .composer__presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; border-radius: 16px; }
  .preset { min-height: 44px; padding: 4px 6px; border-radius: 12px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
  .composer .preset__glider { border-radius: 12px; }
  .cflow__remove::after { content: ""; position: absolute; inset: -10px; }
  .composer__picker { gap: 18px; }
  .checks .checks__link { display: inline-flex; align-items: center; min-height: 44px; }

  /* two sides: the phone stays put and the five moments become cards you swipe */
  .sides { margin-top: 72px; padding-top: 48px; }
  .sides__grid { gap: 18px; }
  .sides__stage { position: relative; top: auto; padding: 0; background: none; }
  .sides__steps { display: flex; gap: var(--gutter); scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sides__steps::-webkit-scrollbar { display: none; }
  .sides__steps::before, .sides__steps::after { display: none; }
  .sd-step, .sd-step:first-child, .sd-step:last-child { flex: 0 0 86%; min-height: 0; justify-content: flex-start; padding: 20px 20px 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(255, 255, 255, .04); opacity: 1; scroll-snap-align: start; transition: border-color .4s, background-color .4s; }
  .sd-step::before { display: none; }
  .sd-step.is-on { border-color: rgba(100, 244, 248, .38); background: rgba(100, 244, 248, .06); }
  .sd-step__title { margin-top: 8px; font-size: 21px; }
  .sd-step__text { font-size: 15px; }

  /* the rules demo: rule text gets the width, the result sits under it */
  .tr-rule { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .tr-rule__if { grid-column: 2 / 4; }
  .tr-rule__res { grid-column: 3; grid-row: 2; align-self: center; }
  .tr-log__v { white-space: normal; overflow-wrap: anywhere; }

  /* the API scene: the label stays inside its card; long lines show they scroll */
  .rt__scene { overflow: hidden; }
  .rt-pane pre { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .rt-tool { min-width: 40px; min-height: 40px; }

  /* Sara: the brand switch stays on one row above the phone */
  .dx-stage--brand .br-switch { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .dx-stage--brand .br-switch::-webkit-scrollbar { display: none; }
  .br-go { flex: none; min-height: 36px; padding-inline: 12px; font-size: 12px; }

  /* the estimator's small links get a full target */
  .eq-clear, .eq-alt { display: inline-flex; align-items: center; min-height: 44px; }
  .eq-range, .composer__range { height: 44px; }

  /* long one-line feature lists sit tighter */
  .wf-points > li { padding-block: 22px 24px; }
}
@media (max-width: 380px) {
  .cflow__node { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 12px; }
  .cflow__tile { width: 48px; height: 48px; border-radius: 15px; }
  .cflow__node:not(:last-child)::after { left: 23px; top: 24px; }
  .cflow__node--end::before, .cflow__node--end::after, .cflow__halo { left: 24px; top: 24px; }
  .cflow__halo span { width: 48px; height: 48px; }
}
.sc__stage { display: grid; align-content: center; }

/* ==========================================================================
   Platform, on phones
   ========================================================================== */
.wf-canvas--v { display: none; }
@media (max-width: 1023px) {
  .mx-panel { transition: none; }
}
@media (max-width: 640px) {
  .cx-canvas { overflow: visible; }
  .wf-canvas--h { display: none; }
  .wf-canvas--v { display: block; min-width: 0; }
  .hcx { margin-inline: 0; }
  .hf-rec, .hf-lang, .hf-tip { font-size: 11px; }
  .map__stage { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); }
}

/* ==========================================================================
   Verification, on phones
   ========================================================================== */
.vf-more, .vf-tray__more { display: none; }
@media (max-width: 640px) {
  /* the hero board: a compact three-across grid of the nine checks */
  .vf-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vf-bt__a { align-items: center; padding: 14px 6px 12px; text-align: center; }
  .vf-bt__top { justify-content: center; font-size: 12px; }
  .vf-bt__c, .vf-bt__r, .vf-bt__go { display: none; }
  .vf-bt__ico { margin-top: 8px; }
  .vf-bt__n { min-height: 2.5em; margin-top: 6px; font-size: 13.5px; line-height: 1.25; }
  .vf-bt__n + .vf-bt__f { justify-content: center; margin-top: 6px; padding-top: 6px; border-top: 0; }
  .vf-board-wrap__k { justify-content: center; text-align: center; }
  .vf-bt:last-child { grid-column: auto; }
  .vf-board-wrap__k > span + span { display: none; }

  /* each check: a lighter picture, and the four details behind one tap */
  .vf-art { gap: 4px; padding-block: 14px; }
  .vf-art .vx-iso { max-width: 300px; }
  .vf-more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 14px; padding: 0 2px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 600 14.5px/1 var(--font); cursor: pointer; }
  .vf-more__pm { position: relative; width: 12px; height: 12px; }
  .vf-more__pm::before, .vf-more__pm::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease); }
  .vf-more__pm::after { transform: rotate(90deg); }
  .vf-more[aria-expanded="true"] .vf-more__pm::after { transform: rotate(0); }
  .vf-dl.is-fold { display: none; }
  .vf-add { min-height: 48px; margin-top: 16px; }

  /* labels you read: 12px and dark enough */
  .vf-dl dt, .vf-art__k, .vf-grp__n, .vf-bl thead th, .vf-rk__cap, .vf-rc__top, .pb-b__k { color: var(--muted); font-size: 12px; }

  /* the tray: one line, opens to show the checks and the actions */
  .vf-tray__in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t sum more" "list list list" "act act act"; gap: 8px 10px; padding: 8px 8px 8px 12px; }
  .vf-tray__t { grid-area: t; min-width: 0; }
  .vf-tray__n { display: inline-block; }
  .vf-tray__sum { grid-area: sum; }
  .vf-tray__more { grid-area: more; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: transform .3s var(--ease); }
  .vf-tray__more .i { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .3s var(--ease); }
  .vf-tray.is-open .vf-tray__more .i { transform: none; }
  .vf-tray__list, .vf-tray__act { display: none; }
  .vf-tray.is-open .vf-tray__list { grid-area: list; display: flex; flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .vf-tray.is-open .vf-tray__act { grid-area: act; display: flex; justify-content: space-between; }
  .vf-tray.is-open .vf-tray__act .btn { display: inline-flex; }
  .vf-tray__x { width: 32px; height: 32px; }
  .vf-tray__clear { height: 44px; }
}
@media (max-width: 380px) {
  .vf-tray__t > span:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
  /* the blocklist table becomes two short lists */
  .vf-bl, .vf-bl tbody, .vf-bl tr { display: block; }
  .vf-bl thead { display: none; }
  .vf-bl tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .vf-bl tbody th, .vf-bl tbody td { display: block; width: auto; padding: 2px 0; border: 0; }
  .vf-bl tbody td::before { content: attr(data-k); display: block; margin-top: 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
}

/* ==========================================================================
   Industries, on phones
   ========================================================================== */
.in-mxs { display: none; }
[data-inx] { scroll-margin-top: 104px; }
[data-inx] [id]:focus:not(:focus-visible), [data-inx] [id]:target { outline: none; }
@media (max-width: 640px) {
  /* side by side: pick a sector, see its checks and its price */
  .in-mxs { display: flex; gap: 6px; margin: 0 calc(var(--gutter) * -1) 14px; padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .in-mxs::-webkit-scrollbar { display: none; }
  .in-mxs__b { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 13.5px/1 var(--font); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
  .in-mxs__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--canvas); }
  .in-mxs__i .i { width: 14px; height: 14px; }
  .in-mxs__b[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
  .in-mxs__b[aria-pressed="true"] .in-mxs__i { background: rgba(255, 255, 255, .14); color: var(--cyan); }
  .in-mx-wrap { overflow: visible; }
  .in-mx[data-col] { min-width: 0; }
  .in-mx[data-col] tbody th, .in-mx[data-col] tfoot th, .in-mx[data-col] .in-mx__corner { position: static; box-shadow: none; background: none; }
  .in-mx[data-col="1"] tr > :not(:first-child):not(:nth-child(2)),
  .in-mx[data-col="2"] tr > :not(:first-child):not(:nth-child(3)),
  .in-mx[data-col="3"] tr > :not(:first-child):not(:nth-child(4)),
  .in-mx[data-col="4"] tr > :not(:first-child):not(:nth-child(5)),
  .in-mx[data-col="5"] tr > :not(:first-child):not(:nth-child(6)),
  .in-mx[data-col="6"] tr > :not(:first-child):not(:nth-child(7)) { display: none; }
  .in-mx[data-col] th:not(:first-child), .in-mx[data-col] td:not(:first-child) { width: 96px; }
  .in-mx__corner .mono { font-size: 12px; color: var(--muted); }

  /* every sector: list items line up with the heading */
  .in-sh > li { padding: 24px 0 26px; }

  /* the explorer's four stages read as one progress line */
  .iv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 14px 14px; border-top: 0; }
  .iv-steps__s, .iv-steps__s + .iv-steps__s, .iv-steps__s:nth-child(n+3) { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0 0; border: 0; box-shadow: inset 0 2px 0 var(--line); font-size: 12px; }
  .iv-steps__s .mono { font-size: 12px; }
  .in-next { min-height: 48px; }
  .in-next span:first-child { white-space: nowrap; }
}

/* ==========================================================================
   Developers, on phones
   ========================================================================== */
@media (max-width: 640px) {
  /* the chat demo: bubbles stay inside the card; code scrolls instead of breaking words */
  .cv-m { min-width: 0; max-width: 100%; }
  .cv-m__b { max-width: calc(100% - 38px); min-width: 0; }
  .cv-m__code { overflow-x: auto; font-size: 12px; white-space: pre; word-break: normal; overflow-wrap: normal; scrollbar-width: none; }
  .cv-m__from { font-size: 12px; }
  .cv-replay, .cv-mode { min-height: 40px; }

  /* webhooks: one box less, so the letter gets the width */
  .wk-card { padding: 0; background: none; box-shadow: none; }
  .wk-card + .wk-card { margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .wk-pick__o { min-height: 44px; }
  .wk-at__t, .wk-at__s { color: rgba(255, 255, 255, .62); }

  /* built in: lighter pictures, with room inside */
  .bi-c__art { height: 132px; padding: 12px 16px; }

  /* readable code labels */
  #updates code, #webhooks code, .dv-step__k, .bi-c__dev .mono { font-size: 12px; color: var(--muted); }
  #webhooks code { color: rgba(255, 255, 255, .62); }
  #webhooks .wl code { color: var(--muted); }
  .dv-how { padding-bottom: 56px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .cv { margin-inline: auto; }
}

/* ==========================================================================
   Pricing, on phones
   ========================================================================== */
@media (max-width: 640px) {
  .pr-anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .pr-anchors li { padding: 4px 6px; text-align: center; }
  .pr-anchors li + li { border-left: 1px solid var(--line-2); }
  .pr-anchors b { font-size: 24px; }
  .pr-anchors span { font-size: 12.5px; line-height: 1.3; }

  /* plans: three cards you swipe, the same height */
  .pp-list { display: flex; gap: var(--gutter); max-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .pp-list::-webkit-scrollbar { display: none; }
  .pp { flex: 0 0 86%; grid-row: auto; scroll-snap-align: start; }
  .pp-list + .sw-pager { margin-top: 0; }

  /* the estimator: even chips, thumb-sized controls */
  .pe-ind-wrap { display: grid; }
  .pe-inds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-ind { width: 100%; min-height: 44px; }
  .pe-ind em { font-size: 12px; }
  .pe-share { min-height: 44px; }
  .pe-vol__range { height: 44px; }
  .pe-vol__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .pe-vol__range::-moz-range-thumb { width: 28px; height: 28px; }
  .pe-mini.is-on { pointer-events: auto; cursor: pointer; }
  .pe-grp__k, .pl2 th, .pe-ck__p small, .pe-vol__ticks, .pp dt { font-size: 12px; }
}

/* ==========================================================================
   Security, About and the shared cells, on phones
   ========================================================================== */
@media (max-width: 640px) {
  /* the control room: the little screens as large as the pane allows */
  .sc-pane { padding: 24px 14px; }
  .sc-pane__vis { --sv: clamp(12px, calc((100vw - 72px) / 20), 16px); }

  /* rows of icon, title and text: the icon to the left, so a list reads quickly */
  .ip-cells:not(.swipe) > li:has(> .ip-cell__ico, > .ip-cell__n) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 22px 0 24px; }
  .ip-cells:not(.swipe) > li > .ip-cell__ico, .ip-cells:not(.swipe) > li > .ip-cell__n { grid-row: 1 / span 4; }
  .ip-cells:not(.swipe) > li:has(> .ip-cell__ico, > .ip-cell__n) > :not(.ip-cell__ico):not(.ip-cell__n) { grid-column: 2; }
  .ip-cells:not(.swipe) > li .ip-cell__t { margin-top: 2px; font-size: 17.5px; }
  .ip-cells:not(.swipe) > li .ip-cell__x { margin-top: 6px; font-size: 15px; }
  .ip-cells:not(.swipe) > li .ip-cell__n { padding-top: 4px; }

  /* the trust pill sits under its line, centred, as short as its words */
  .trust__badge { width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 8px 16px 8px 8px; text-align: left; }
}

/* ==========================================================================
   Start free (the onboarding) and Sign in, on phones and tablets
   ========================================================================== */
.ob-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 14px -6px; padding: 0 10px 0 6px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: 600 14px/1 var(--font); cursor: pointer; transition: color .2s, background-color .2s; }
.ob-back:hover { background: var(--canvas); color: var(--ink); }
.ob-back__i { width: 16px; height: 16px; transform: scaleX(-1); }
.ob-otp, .ob-tap-t { display: none; }
.ob-prog__k { color: var(--muted); }

/* below the side-by-side layout, the workspace scene folds into one line of news,
   except on the step where you try the flow on the phone */
@media (max-width: 1079px) {
  .ob:not([data-step="try"]) .ob-stage .ob-scene,
  .ob:not([data-step="try"]) .ob-stage .ob-cards,
  .ob:not([data-step="try"]) .ob-stage .ob-receipt { display: none; }
  .ob:not([data-step="try"]) .ob-stage { width: auto; max-width: 640px; margin: 0 auto; border-radius: 18px; }
  .ob:not([data-step="try"]) .ob-stage__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
  .ob:not([data-step="try"]) .ob-stage__top::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(100, 244, 248, .18); animation: ob-blink 2.4s ease-in-out infinite; }
  .ob:not([data-step="try"]) .ob-stage__k { display: none; }
  .ob:not([data-step="try"]) .ob-stage__msg { font-size: 14.5px; line-height: 1.4; }
}
@media (max-width: 1079px) and (min-width: 641px) {
  .ob:not([data-step="try"]) .ob-stage { margin-inline: auto; width: calc(100% - 2 * var(--pad)); }
}
@media (max-width: 640px) {
  .ob:not([data-step="try"]) .ob-stage { margin-inline: var(--pad); }
  .ob-main { padding-top: 22px; }
  .ob-prog__k { font-size: 12px; }

  /* the primary action stays under the thumb */
  .ob-s__go { position: sticky; bottom: 0; z-index: 4; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 6px calc(var(--pad) * -1) 0; padding: 12px var(--pad) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .ob-s__go .ob-btn, .ob-s__go .btn--primary { flex: 1 1 100%; min-height: 52px; }
  .ob-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* the flow step's bar: one line of price, the button beside it */
  .ob-bar { gap: 2px 12px; padding: 10px 10px 10px 16px; }
  .ob-bar__k { display: none; }
  .ob-bar__a { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; }
  .ob-bar__a::after { content: "per verification"; color: rgba(255, 255, 255, .6); font-size: 12.5px; white-space: nowrap; }
  .ob-bar__b { display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .ob-bar__b > span + span::before { content: " · "; }
  .ob-bar__b > span { display: inline; }
  .ob-bar .ob-btn { min-height: 48px; }
  .ob-ck__x { display: block; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

  /* the six code boxes share the width */
  .ob-code__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 6px repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 380px; }
  .ob-code__d { width: 100%; min-width: 0; height: 56px; }
  .ob-code__d:nth-child(4) { grid-column: 5; margin-left: 0; }

  /* two-factor on the phone that runs the authenticator */
  .ob-2fa { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ob-2fa__qr, .ob-scan-t { display: none; }
  .ob-otp { display: inline-flex; justify-content: center; width: 100%; min-height: 48px; margin: 4px 0 2px; }
  .ob-tap-t { display: inline; }
  .ob-in--code { max-width: none; }

  /* choices sit in an even grid */
  .ob .ob-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob .ob-picks .ob-pick__b { width: 100%; min-height: 46px; padding-block: 6px; line-height: 1.25; }
  .ob-sws { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
  .ob-sw__c { width: 40px; height: 40px; }

  /* brand: the live preview sits under the colour you pick */
  #f-brand > * { min-width: 0; }
  .ob-prev { grid-template-columns: minmax(0, 1fr); }
  #f-brand > .ob-prev { order: 2; }
  #f-brand > fieldset.ob-panel ~ fieldset.ob-panel { order: 3; }
  #f-brand > .ob-s__go { order: 4; }

  /* the team: who you invited on one line, their role and Remove on the next */
  .ob-mate { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i e e" "i r x"; row-gap: 6px; }
  .ob-mate__i { grid-area: i; align-self: start; }
  .ob-mate__e { grid-area: e; white-space: normal; overflow-wrap: anywhere; }
  .ob-mate__r { grid-area: r; justify-self: start; }
  .ob-mate > :last-child { grid-area: x; justify-self: end; min-height: 40px; }

  /* thumb-sized small controls */
  .ob-mini, .ob-pw__t, .ob-kt__e, .ob-prev__lb { min-height: 44px; }
  .ob-range { height: 44px; }
  .ob-top__aux a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .ob-langs2 { grid-template-columns: minmax(0, 1fr); }
  .ob--signin .ob-top__aux { font-size: 0; }
  .ob--signin .ob-top__aux a { font-size: 14px; }
}

/* ==========================================================================
   Home, second pass (after the re-check)
   ========================================================================== */
@media (max-width: 640px) {
  .hero--cp .hero__lead { align-items: center; }
  .hero--cp .hero__title { align-self: center; text-align: center; }
  .checks__foot { flex-direction: column; text-align: center; }
  .checks__note { justify-content: center; text-align: left; }
  /* paired buttons at the end of a section: full width, one above the other */
  .ind-foot { flex-direction: column; align-items: stretch; padding: 28px 0 0; }
  .ind-foot__t { flex-direction: column; text-align: center; }
  .ind-foot__cta, .ip-band__cta:has(.btn) { flex-direction: column; align-items: stretch; width: 100%; }
  .ind-foot__cta .btn, .ip-band__cta .btn { width: 100%; }

  /* the long fade into white is shorter on a phone */
  .checks .dome { padding-bottom: 230px; }
  .checks-bg {
    background:
      linear-gradient(180deg, #070A1C 0%, #0A1030 16%, #131E55 32%, #2A3C8E 48%, #5C71C4 62%, #9CAEE8 75%, #D2DCF8 86%, #F1F4FD 94%, #FFFFFF 100%) left bottom / 100% 230px no-repeat,
      linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C calc(100% - 230px));
  }
  .checks-bg__canvas { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 300px), transparent calc(100% - 190px)); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 300px), transparent calc(100% - 190px)); }

  /* the rules demo: until the rules decide, the outcome is an empty placeholder */
  .tr:not(.s-out) .tr-oc > * { visibility: hidden; }

  /* labels: 12px and readable */
  .ind__lbl, .ind__n, .eq-g__t, .pc__src, .rt__kicker { color: var(--muted); font-size: 12px; }
  .composer__fam-title { font-size: 12px; }

  /* the API scene: the floating label would run off the card, and the code pane says the same */
  .rt-tag { display: none; }
  .rt__bar { gap: 10px; padding-inline: 12px; }
  .rt-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Sara's brand switch shows that it scrolls */
  .dx-stage--brand .br-switch { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .br-go { min-height: 44px; }
  .eq--a .eq-tab { min-height: 44px; display: grid; place-items: center; }

  /* the demo form card keeps a margin from the panel's bottom edge */
  .bp__grid { padding-bottom: 20px; }
}
@media (max-width: 360px) {
  .code__dots { display: none; }
}

/* ==========================================================================
   Third pass (after the re-checks): every page
   ========================================================================== */
/* the industries table shows one sector at a time up to tablet width */
@media (min-width: 641px) and (max-width: 900px) {
  .in-mxs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
  .in-mxs__b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 13.5px/1 var(--font); cursor: pointer; }
  .in-mxs__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--canvas); }
  .in-mxs__i .i { width: 14px; height: 14px; }
  .in-mxs__b[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
  .in-mxs__b[aria-pressed="true"] .in-mxs__i { background: rgba(255, 255, 255, .14); color: var(--cyan); }
  .in-mx-wrap { overflow: visible; }
  .in-mx[data-col] { min-width: 0; }
  .in-mx[data-col] tbody th, .in-mx[data-col] tfoot th, .in-mx[data-col] .in-mx__corner { position: static; box-shadow: none; background: none; }
  .in-mx[data-col="1"] tr > :not(:first-child):not(:nth-child(2)),
  .in-mx[data-col="2"] tr > :not(:first-child):not(:nth-child(3)),
  .in-mx[data-col="3"] tr > :not(:first-child):not(:nth-child(4)),
  .in-mx[data-col="4"] tr > :not(:first-child):not(:nth-child(5)),
  .in-mx[data-col="5"] tr > :not(:first-child):not(:nth-child(6)),
  .in-mx[data-col="6"] tr > :not(:first-child):not(:nth-child(7)) { display: none; }
  .in-mx[data-col] th:not(:first-child), .in-mx[data-col] td:not(:first-child) { width: 140px; }
}
@media (max-width: 1023px) {
  .dv-how { padding-bottom: 56px; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .dvh__fig { display: flex; justify-content: center; }
}

@media (max-width: 640px) {
  /* every hero: the eyebrow sits centred with the heading */
  .ph__lead, .dvh__lead { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .ph__lead .eyebrow, .dvh__lead .eyebrow { align-self: center; }
  .dvh__lead .ph__lede { margin-inline: auto; }
  .dvh__lead .ph__ticks { align-self: center; }

  /* the brand in the header: a full target */
  .nav-pill .brand { padding-block: 9px; }

  /* home: leftovers */
  .checks__note { display: block; max-width: 34ch; margin-inline: auto; text-align: center; }
  .checks__note .ico { display: inline-block; margin-right: 6px; vertical-align: -3px; }
  .checks .dome { padding-bottom: 170px; }
  .checks-bg {
    background:
      linear-gradient(180deg, #070A1C 0%, #0A1030 16%, #131E55 32%, #2A3C8E 48%, #5C71C4 62%, #9CAEE8 75%, #D2DCF8 86%, #F1F4FD 94%, #FFFFFF 100%) left bottom / 100% 170px no-repeat,
      linear-gradient(180deg, #2447E6 0%, #15278A 14%, #0A1135 34%, #070A1C calc(100% - 170px));
  }
  .checks-bg__canvas { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 240px), transparent calc(100% - 140px)); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 240px), transparent calc(100% - 140px)); }
  .eq-sum__k, .eq-fit__k, .composer__sum-label { font-size: 12px; }
  .sides { border-top: 0; }

  /* industries */
  .in-fl__k { color: var(--muted); font-size: 12px; }
  .in-fl--dark .in-fl__k, .ib-col__k { color: rgba(255, 255, 255, .62); font-size: 12px; }
  .in-mxs { scroll-snap-type: x proximity; }
  .in-mxs__b { scroll-snap-align: center; }
  .in-tabs { scroll-snap-type: x proximity; }
  .in-tabs > * { scroll-snap-align: start; }
  .in-next { justify-content: space-between; width: 100%; }
  .in-sh > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 22px 0 24px; }
  .in-sh > li > .in-sh__i { grid-row: 1 / span 2; margin: 0; }
  .in-sh > li > :not(.in-sh__i) { grid-column: 2; margin-top: 0; }
  .in-sh__x { margin-top: 6px; }

  /* developers */
  .wk-pick__k { color: rgba(255, 255, 255, .62); font-size: 12px; }
  .cv-m__from { color: var(--muted); }
  .cv-m--app .cv-m__from { color: rgba(255, 255, 255, .7); }
  .wk-at.is-skip { opacity: .7; }
  .cv-mode, .cv-replay { min-height: 44px; }
  .wk-card + .wk-card { border-radius: 0; }
  .cv-m__code { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .bi-req { white-space: nowrap; font-size: 11px; }
  /* built in: six cards you swipe, not a long stack */
  .bi-grid { display: flex; gap: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .bi-grid::-webkit-scrollbar { display: none; }
  .bi-grid > .bi-c { flex: 0 0 86%; scroll-snap-align: start; }

  /* pricing */
  .pr-anchors li:nth-child(n+2) { border-left: 1px solid var(--line-2); }
  .pe-ind { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 8px; min-height: 52px; padding: 7px 12px 7px 10px; border-radius: 16px; text-align: left; }
  .pe-ind .i { grid-row: 1 / span 2; }
  .pe-ind em { grid-column: 2; line-height: 1.2; }
  .pl2 th, .pe-fit__k, .pe-sum__k, .pr-inc__k .mono, .bpf-f--sel label { font-size: 12px; }

  /* security: the little screens never drop below a readable size */
  .sc-pane__vis { --sv: clamp(14px, calc((100vw - 72px) / 20), 16px); }
  .sc-pane__vis .sv-card { max-width: 100%; }

  /* about and home: the trust pill as a short centred card */
  .trust__badge { flex-direction: column; gap: 8px; width: 100%; max-width: 340px; padding: 12px 18px 14px; border-radius: 20px; text-align: center; }

  /* the pager dots are easy to tap */
  .sw-pager__d { position: relative; }
  .sw-pager__d::after { content: ""; position: absolute; inset: -14px -3px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .mobile-menu__list a { min-height: 48px; padding-block: 10px; font-size: 19px; }
  .mobile-menu__actions { gap: 8px; padding-top: 12px; }
}

/* ---------- the onboarding, third pass ---------- */
.ob-check { min-height: 44px; align-items: center; }
.ob-check input { width: 24px; height: 24px; margin: 0; }
.ob-check__links { margin: 4px 0 0 36px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ob-check__links a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.ob-done-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #A6F4C5; border-radius: 14px; background: var(--ok-bg); color: var(--ok-ink); font-size: 15px; }
.ob-done-note[hidden] { display: none; }
.ob-done-note .i { flex: none; width: 18px; height: 18px; }
.ob-done-note b { color: var(--ink); }
.ob-ck__p, .ob-ckg__c, .ob-scale { color: var(--muted); }
@media (min-width: 641px) and (max-width: 1079px) {
  .ob:not([data-step="try"]) .ob-stage { width: calc(min(100vw, 640px) - 2 * var(--pad)); }
}
@media (max-width: 640px) {
  html:has(.ob-form) { scroll-padding-bottom: 150px; }
  .ob-back { min-height: 44px; }
  .ob-bar__a::after { content: none; }
  .ob-bar__b::before { content: "per verification · "; }
  .ob-sws { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
  .ob-kt__e { min-width: 44px; padding-inline: 8px; }
  .ob-mate > :last-child { min-height: 44px; }
  .ob[data-step="ready"] .ob-s__go { position: static; margin: 6px 0 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 10px; }
}

/* ---------- phones: the last labels under 12px, and the last small targets ---------- */
@media (max-width: 640px) {
  .composer__kicker, .cflow__meta, .cflow__price, .trust__built, .pf__tags li, .bl-table thead th, .ind__st, .ind__per, .pl__badge,
  .hf-st__n, .hf-st__n .mono, .pl-s__st, .vf-board-wrap__k > span, .ib-kick, .ib-rule__k, .vf-rule__if, .dv-step__n, .dv-step__dev code,
  .up-c__n, .pp__credit-v em, table.pl2 thead th, .sc-pane__n, .ip-cell__n, .vf-grp__k, .vf-grp__k > span, .ib-kick .mono { font-size: 12px; }
  .nav-pill .brand, .ob-top > .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .ft-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .rt-step { min-height: 44px; }
  .ft-reach__go.ft-copy, .ct-copy { min-width: 44px; min-height: 44px; }
  .map-step__btn { min-height: 44px; }
  .vf-pre__b { min-height: 44px; }
  .ip-cells > li:has(.ip-cell__a) { position: relative; }
  .ip-cell__a::after { content: ""; position: absolute; inset: 0; }
}
.ob-resend[hidden], .ob-code[hidden], .ob-proto[hidden] { display: none; }

/* ==========================================================================
   No pause buttons on show (Imran, 3 Oct 2026). The animations already stop
   off screen and with reduced motion; the pause controls stay in the page for
   keyboard and screen-reader users only, and appear when tabbed to.
   ========================================================================== */
.bp__pause:not(:focus-visible), .sc-play:not(:focus-visible), .rt-play:not(:focus-visible), .cp__pause:not(:focus-visible), .ft .ft-motion:not(:focus-visible) {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;
}

/* ==========================================================================
   Lead forms: the "Book a demo" banner, demo.html and contact.html
   (js/bp.js, js/demo.js), and the Growth plan flag on pricing.html (js/pricing.js).
   Owner: the lead forms. Sending, refused and failed states, the honeypot and
   the privacy line under each button.
   ========================================================================== */
/* the honeypot: moved off screen rather than display:none, which some bots
   read as "skip this one"; a person never reaches it (aria-hidden, tabindex -1) */
.idk-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* sending: the button keeps its place, its arrow turns into a spinner */
.btn.is-sending { cursor: progress; opacity: .88; }
.btn.is-sending:hover { transform: none; }
.btn.is-sending .btn__chip { position: relative; }
.btn.is-sending .btn__chip > * { visibility: hidden; }
.btn.is-sending .btn__chip::after { content: ""; position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: idk-lead-spin .8s linear infinite; }
@keyframes idk-lead-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-sending .btn__chip::after { animation-duration: 2.4s; } }
.dm-back:disabled { opacity: .5; cursor: not-allowed; }

/* the banner (dark) */
.bpf-f input[aria-invalid="true"], .bpf-f select[aria-invalid="true"] { border-color: rgba(253, 162, 155, .85); box-shadow: 0 0 0 4px rgba(240, 68, 56, .16); }
.bpf-f [aria-invalid="true"] ~ .bpf-f__ok { opacity: 0; }
.bpf__err { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(240, 68, 56, .14); box-shadow: inset 0 0 0 1px rgba(253, 162, 155, .35); color: #FFDCD8; font-size: 13.5px; line-height: 1.5; }
.bpf__err[hidden] { display: none; }
.bpf__err a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bpf__fine { margin: -4px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.5; text-align: center; }
.bpf__fine a { color: rgba(255, 255, 255, .86); text-decoration: underline; text-underline-offset: 2px; }
.bpf__fine a:hover { color: var(--cyan); }
.bpf__err a:focus-visible, .bpf__fine a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }

/* demo.html and contact.html (light cards) */
.dm-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bad-bg); box-shadow: inset 0 0 0 1px rgba(240, 68, 56, .22); color: var(--bad-ink); font-size: 14px; font-weight: 500; line-height: 1.5; }
.dm-err[hidden] { display: none; }
.dm-err a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dm-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* pricing: two plan cards while the Growth plan is off (features.growthPlan) */
@media (min-width: 961px) {
  .pp-list--no-growth { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-inline: auto; }
}

/* ==========================================================================
   Sign-in and onboarding on the platform API (signin.html, start.html;
   js/signin.js, js/onboard.js). Owned by that work; keep additions here.
   ========================================================================== */
/* many of these parts are display:grid/flex, which beats the hidden attribute */
.ob [hidden] { display: none !important; }

/* one message above the step: server errors, rate limits, a lost session */
.ob-alert { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid #FECDCA; border-radius: 14px; background: var(--bad-bg); color: var(--bad-ink); font-size: 14.5px; line-height: 1.5; animation: ob-up .4s var(--ease) both; }
.ob-main > .ob-alert { margin-bottom: 22px; }
.ob-alert--warn { border-color: #FEDF89; background: var(--warn-bg); color: var(--warn-ink); }
.ob-alert--ok { border-color: #A6F4C5; background: var(--ok-bg); color: var(--ok-ink); }
.ob-alert__act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ob-alert__act a, .ob-alert__act .ob-link { min-height: 0; color: inherit; font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* a request in flight */
.ob .is-busy { cursor: progress; }
.ob .btn.is-busy, .ob .ob-mini.is-busy, .ob .ob-link.is-busy { opacity: .72; }
.ob .btn.is-busy .btn__chip { position: relative; }
.ob .btn.is-busy .btn__chip .i { opacity: 0; }
.ob .btn.is-busy .btn__chip::after { content: ""; position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; border: 2px solid rgba(37, 71, 233, .25); border-top-color: var(--royal); border-radius: 50%; animation: ob-spin .8s linear infinite; }

/* start.html before the server has answered (js/onboard.js hides it): the
   step's own eyebrow, with a spinner for its icon, over the outline of a
   step in the same sizes and spacing, so the step replaces it in place.
   It sits in the content column, like the step does */
.ob-boot { display: grid; justify-items: start; animation: ob-fade .4s var(--ease) .12s both; }
.ob-boot__spin { width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ob-spin .8s linear infinite; }
.ob-boot__sk { display: grid; justify-items: start; width: 100%; }
.ob-boot__bar, .ob-boot__in, .ob-boot__btn { display: block; }
.ob-boot__bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, #F3F5FA 45%, var(--line) 90%) 0 0 / 220% 100%;
  animation: ob-boot-sheen 1.6s ease-in-out infinite;
}
/* each bar sits where a line of text sits: the heading's 1.08 line box and
   the lede's 26.4px one, with the step's own margins (.ob-s__h, .ob-s__lede,
   .ob-form), so the first input lands where the real one will */
.ob-boot__hd { display: grid; gap: .28em; width: 100%; margin-top: calc(18px + .14em); padding-bottom: .14em; font-size: clamp(30px, 2.7vw, 40px); }
.ob-boot__hd .ob-boot__bar { height: .8em; border-radius: .25em; }
.ob-boot__hd .ob-boot__bar:nth-child(1) { width: 88%; }
.ob-boot__hd .ob-boot__bar:nth-child(2) { width: 62%; }
.ob-boot__hd .ob-boot__bar:nth-child(3) { width: 44%; }
.ob-boot__ld { display: grid; gap: 14px; width: 100%; max-width: 52ch; margin-top: 21px; padding-bottom: 7px; }
.ob-boot__ld .ob-boot__bar:nth-child(1) { width: 78%; }
.ob-boot__ld .ob-boot__bar:nth-child(2) { width: 46%; }
.ob-boot__f { display: grid; gap: 12px; width: 100%; margin-top: 36px; }
.ob-boot__f + .ob-boot__f { margin-top: 26px; }
.ob-boot__bar--k { width: 96px; height: 11px; }
/* a phone wraps the heading and the lede onto one more line each */
.ob-boot__nar { display: none; }
@media (max-width: 640px) { .ob-boot__nar { display: block; } }
.ob-boot__in { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ob-boot__btn { width: 190px; height: 52px; margin-top: 28px; border-radius: var(--r-pill); background: var(--line); opacity: .7; }
@keyframes ob-boot-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* without JavaScript nothing would ever replace it */
@media (scripting: none) { .ob-boot { display: none; } }

/* already signed in, on step 1 */
.ob-signed { display: grid; gap: 10px; margin-top: 32px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ob-signed__t { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; }
.ob-signed__t .i { flex: none; width: 18px; height: 18px; color: var(--royal); }

/* waiting for the email link */
.ob-wait { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed #C7CEDF; border-radius: 14px; color: var(--body); font-size: 15px; }
.ob-wait__spin { flex: none; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--royal); border-radius: 50%; animation: ob-spin .9s linear infinite; }

/* two-factor: the server's QR as an image, and the recovery codes */
img.ob-qr { display: block; aspect-ratio: 1; }
.ob-codes { display: grid; gap: 16px; }
.ob-codes__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 16px; border-radius: 14px; background: var(--canvas); color: var(--ink); font-size: 14.5px; letter-spacing: .04em; list-style: none; }
.ob-codes__act { display: flex; flex-wrap: wrap; gap: 8px; }

.ob-fit__talk { justify-self: start; min-height: 28px; font-size: 13.5px; }
.ob-si-who { margin-bottom: -6px; }

/* team rows that were sent, or that failed with their own reason */
.ob-mate__ok { padding: 4px 10px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok-ink); font-size: 12.5px; font-weight: 600; }
.ob-mate.is-err { border-color: #FECDCA; }
.ob-mate__s { grid-column: 1 / -1; color: var(--bad-ink); font-size: 13px; line-height: 1.45; }
@media (max-width: 640px) {
  .ob-codes__l { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ob .btn.is-busy .btn__chip::after, .ob-boot__spin, .ob-wait__spin { animation-duration: 2.4s; }
  .ob-boot__bar { animation: none; }
}

/* ==========================================================================
   Home pricing without the Growth plan (IDK_CONFIG.features.growthPlan off,
   decision D8): two plan cards instead of three. js/eq.js removes the class
   when the flag brings the card back. Owner: index.html / js/eq.js.
   ========================================================================== */
.xcells--3.pls--no-growth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .xcells--3.pls--no-growth { grid-template-columns: minmax(0, 1fr); }
}