/* ============================================================
   1. TOKENS  — mirror of the Figma "KILOWATT Tokens" collection
   ============================================================ */
:root {
  --color-base: #0b0a14;
  --color-surface: #14121f;
  --color-raised: #1c1930;
  --color-text: #edebf5;
  --color-muted: #8a85a6;
  --color-line: #2a2640;
  --color-magenta: #ff3d9a;
  --color-cyan: #38e8ff;
  --color-lilac: #a78bfa;

  /* sub-tones used inside the product mockups (raw hex in Figma) */
  --color-muted-2: #6b6682;
  --color-chip: #26252f;
  --color-track: #2f2e38;
  --nav-active-bg: #321229;
  --nav-active-border: #792150;
  --live-bg: #122d3a;
  --live-border: #227989;
  --delta-mag-bg: #3c142f;
  --delta-mag-border: #852357;
  --delta-cyan-bg: #143643;
  --delta-cyan-border: #227989;
  --delta-lilac-bg: #2a2442;
  --delta-lilac-border: #594a87;
  --upgrade-bg: #211c34;
  --upgrade-border: #51447b;
  --spark-cyan: #2794a6;
  --spark-magenta: #a22a67;
  --spark-lilac: #6c5aa2;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --container: 90rem;
  --margin-global: 4rem;
  --gutter: 1.5rem;

  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-l: 1.125rem;
  --radius-pill: 62.4375rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --size-h1: clamp(2.5rem, 5.2vw, 4.625rem);
  --size-h2: clamp(2rem, 3.6vw, 3.25rem);
  --size-h3: clamp(1.375rem, 2vw, 1.75rem);
  --size-body: 1.125rem;
  --size-small: 0.875rem;
  --size-label: 0.75rem;
}

/* ============================================================
   2. TAG SELECTOR BASE  — the Style Guide foundation
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
}
h1 {
  font-size: var(--size-h1);
}
h2 {
  font-size: var(--size-h2);
}
h3 {
  font-size: var(--size-h3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h4 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}
a:hover {
  color: var(--color-cyan);
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 0.125rem solid var(--color-cyan);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-s);
}
strong,
b {
  font-weight: 600;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input {
  font: inherit;
}

/* ============================================================
   3. STRUCTURE  — Client-First wrappers
   ============================================================ */
.page-wrapper {
  overflow-x: clip;
}
.padding-global {
  padding-left: var(--margin-global);
  padding-right: var(--margin-global);
}
.container-large {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}
.section_shell {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.section_shell.is-tight {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.is-surface {
  background: var(--color-surface);
}
.hairline {
  height: 0.0625rem;
  background: var(--color-line);
  border: 0;
  margin: 0;
}

/* ============================================================
   4. UTILITIES
   ============================================================ */
.text-label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.text-mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.text-muted {
  color: var(--color-muted);
}
.text-cyan {
  color: var(--color-cyan);
}
.text-magenta {
  color: var(--color-magenta);
}
.max-w-measure {
  max-width: 60ch;
}
.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.eyebrow_diamond {
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--color-magenta);
  transform: rotate(45deg);
  flex: none;
}

/* Figma: Button / Primary + Button / Secondary — radius 10, 28×16 padding */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: var(--space-4) 1.75rem;
  border-radius: 0.625rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 0.0625rem solid transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.button.is-primary {
  background: var(--color-magenta);
  color: var(--color-base);
  font-weight: 600;
  box-shadow: 0 0 1.875rem rgba(255, 61, 154, 0.5);
}
.button.is-primary:hover {
  color: var(--color-base);
  transform: translateY(-0.0625rem);
  box-shadow: 0 0 2.5rem rgba(255, 61, 154, 0.65);
}
.button.is-secondary {
  border-color: var(--color-text);
  color: var(--color-text);
  font-weight: 600;
}
.button.is-secondary:hover {
  border-color: var(--color-lilac); background: rgba(167,139,250,0.08);
  color: var(--color-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.375rem;
  padding: var(--space-1) 0.625rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge.is-cyan {
  background: rgba(56, 232, 255, 0.12);
  color: var(--color-cyan);
}
.badge.is-magenta {
  background: rgba(255, 61, 154, 0.14);
  color: var(--color-magenta);
}
.badge.is-quiet {
  background: rgba(237, 235, 245, 0.07);
  color: var(--color-muted);
}

.delta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}
.delta.is-up {
  color: var(--color-cyan);
}
.delta.is-down {
  color: var(--color-magenta);
}

/* Minimal-doodle accents — thin stroke, used sparingly */
.doodle {
  position: absolute;
  pointer-events: none;
  stroke: var(--color-lilac);
  fill: none;
  stroke-width: 1.4;
  opacity: 0.55;
}

/* ============================================================
   5. ANNOUNCEMENT + NAV
   ============================================================ */
/* Figma 11:13 — 1440 × 44 */
.announcement_bar {
  background: var(--color-surface);
  border-bottom: 0.0625rem solid var(--color-line);
}
.announcement_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.6875rem 0;
  font-size: 0.875rem;
  line-height: normal;
}
.announcement_badge {
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.25rem;
  background: var(--color-magenta);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-base);
}
.announcement_link {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-cyan);
}

/* Figma 11:14 — 1440 × 76 */
.nav_bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-base);
  border-bottom: 0.0625rem solid var(--color-line);
}
.nav_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.75rem;
  line-height: normal;
}
.nav_brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}
.nav_mark {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.375rem;
  flex: none;
  background: linear-gradient(135deg, #ff3d9a 0%, #38e8ff 71%);
}
.nav_menu {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
.nav_link {
  font-size: 1rem;
  color: var(--color-text);
}
.nav_link:hover {
  color: var(--color-cyan);
}
.nav_actions {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.button.is-nav {
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-s);
  background: var(--color-magenta);
  color: var(--color-base);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 0 1.375rem rgba(255, 61, 154, 0.45);
}
.button.is-nav:hover {
  color: var(--color-base);
  transform: translateY(-0.0625rem);
}

/* ============================================================
   6. HERO   — ported 1:1 from Figma 11:15 (frame 1440 × 1198)
   ============================================================ */
.hero_shell {
  position: relative;
  overflow: hidden;
  padding: 5.5rem var(--margin-global) 2.5rem;
}
/* background scene is authored at 1440 and centred, exactly as in Figma */
.hero_scene {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  min-width: 90rem;
  height: 74.875rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero_sun {
  position: absolute;
  left: 50%;
  margin-left: -16.25rem;
  top: 22rem;
  width: 32.5rem;
  height: 32.5rem;
}
.hero_suncut {
  position: absolute;
  left: 50%;
  margin-left: -17.5rem;
  width: 35rem;
  background: var(--color-base);
}
.hero_gridline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.0625rem;
  background: var(--color-cyan);
}
.hero_horizonglow {
  position: absolute;
  left: 0;
  top: 50rem;
  width: 100%;
  height: 13.125rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 61, 154, 0.3),
    rgba(11, 10, 20, 0)
  );
}
.hero_doodles {
  position: absolute;
  left: 50%;
  top: 0;
  width: 90rem;
  height: 74.875rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.hero_arrow {
  position: absolute;
  left: 20.625rem;
  top: 28.8125rem;
  width: 3.575rem;
  height: 5.84rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero_arrow img {
  width: 2.32875rem;
  height: 5.4375rem;
  transform: rotate(-14deg);
}
.hero_note {
  position: absolute;
  left: 12.875rem;
  top: 27.3125rem;
  transform: rotate(-6deg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-cyan);
  white-space: nowrap;
}
.hero_squiggle {
  position: absolute;
  left: 39.75rem;
  top: 18.75rem;
  width: 10.5rem;
  height: 0.4375rem;
}

.hero_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.625rem;
}
.hero_eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  border: 0.0625rem solid var(--color-lilac);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-lilac);
}
.hero_title {
  width: 68.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 5.125rem;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.hero_sub {
  width: 41.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.65;
}
.hero_buttons {
  display: flex;
  gap: 0.875rem;
}

/* --- dashboard mockup (Figma 18:2 — 1180 × 676) --- */
.mock_frame {
  width: 100%;
  display: flex;
  justify-content: center;
}
.mock_window {
  width: 73.75rem;
  height: 42.25rem;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-base);
  border: 0.0625rem solid rgba(167, 139, 250, 0.4);
  border-radius: 1rem;
  box-shadow:
    0 1.75rem 4.375rem rgba(0, 0, 0, 0.55),
    0 0 4.375rem rgba(167, 139, 250, 0.3);
  text-align: left;
  line-height: normal; /* Figma uses leading-normal inside the product UI */
}
.mock_rail,
.mock_segtable,
.mock_health,
.mock_chartpanel,
.mock_sidebar {
  overflow: hidden;
}
.mock_titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  flex: none;
  background: var(--color-raised);
  border-bottom: 0.0625rem solid var(--color-line);
}
.mock_url {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
  white-space: pre;
}
.mock_search {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: 0.4375rem;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.mock_searchtext {
  font-size: 0.625rem;
  color: var(--color-muted);
  white-space: pre;
}
.mock_kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.mock_badge {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-magenta);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  color: var(--color-base);
}
.mock_spacer {
  flex: 1;
}

.mock_body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* sidebar 196 */
.mock_sidebar {
  width: 12.25rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: var(--space-4) 0.875rem;
  background: var(--color-surface);
  border-right: 0.0625rem solid var(--color-line);
}
.mock_switch {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: var(--space-2) 0.5625rem;
  border-radius: 0.5625rem;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.mock_switchmark {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3125rem;
  flex: none;
  background: linear-gradient(135deg, #ff3d9a 0%, #38e8ff 71%);
}
.mock_switchcol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}
.mock_wsname {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-text);
}
.mock_wsmeta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.mock_caret {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.mock_grouplabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
  padding-top: 0.375rem;
}
.mock_navitem {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.375rem 0.5625rem;
  border-radius: 0.4375rem;
}
.mock_navitem.is-active {
  background: var(--nav-active-bg);
  border: 0.0625rem solid var(--nav-active-border);
  padding: 0.3125rem var(--space-2);
}
.mock_navlabel {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}
.mock_navitem.is-active .mock_navlabel {
  font-weight: 500;
  color: var(--color-text);
}
.mock_navcount {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.mock_divider {
  height: 0.0625rem;
  background: var(--color-line);
}
.mock_avatars {
  display: flex;
  align-items: center;
  padding: 0.125rem 0 0.125rem 0.5625rem;
}
.mock_avatars img {
  margin-right: -0.375rem;
}
.mock_more {
  padding: var(--space-1) 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-chip);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.mock_upgrade {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0.6875rem var(--space-3);
  border-radius: 0.625rem;
  background: var(--upgrade-bg);
  border: 0.0625rem solid var(--upgrade-border);
}
.mock_upgradetext {
  font-weight: 500;
  font-size: 0.625rem;
  color: var(--color-text);
}
.mock_quotatrack {
  display: flex;
  height: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}
.mock_quotafill {
  display: block;
  height: 100%;
  width: 6rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #a78bfa, #ff3d9a);
}

/* main */
.mock_main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  padding: var(--space-4) 1.125rem;
}
.mock_toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mock_h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.mock_live {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--live-bg);
  border: 0.0625rem solid var(--live-border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-cyan);
}
.mock_range {
  padding: var(--space-1) 0.625rem;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.mock_range.is-active {
  background: var(--color-chip);
  border: 0.0625rem solid var(--color-line);
  color: var(--color-text);
}

.mock_kpirow {
  display: flex;
  gap: 0.6875rem;
}
.mock_kpi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0.6875rem 0.8125rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.mock_kpilabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.mock_kpival {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
}
.mock_kpinum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.mock_kpidelta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
}
.mock_minispark {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 1.75rem;
}
.mock_minispark i {
  flex: 1;
  min-width: 0;
  border-radius: 0.1875rem;
}

.mock_split {
  display: flex;
  gap: 0.6875rem;
}
.mock_chartpanel {
  flex: 1;
  min-width: 0;
  height: 14.8125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.mock_panelhead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -0.71875rem;
}
.mock_paneltitle {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-text);
}
.mock_legend {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.mock_chart {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 13.125rem;
  margin-bottom: -0.71875rem;
}
.mock_chart i {
  flex: 1;
  min-width: 0;
  border-radius: 0.1875rem;
}
.mock_chart i.is-a {
  background: linear-gradient(
    180deg,
    rgba(56, 232, 255, 0.95),
    rgba(167, 139, 250, 0.28)
  );
}
.mock_chart i.is-b {
  background: linear-gradient(180deg, #ff3d9a, rgba(255, 61, 154, 0.22));
}
.mock_axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}

.mock_rail {
  width: 17rem;
  flex: none;
  height: 14.8125rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0.8125rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.mock_alertrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 0.0625rem solid var(--color-line);
}
.mock_delta {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
}
.mock_delta.is-magenta {
  background: var(--delta-mag-bg);
  border: 0.0625rem solid var(--delta-mag-border);
  color: var(--color-magenta);
}
.mock_delta.is-cyan {
  background: var(--delta-cyan-bg);
  border: 0.0625rem solid var(--delta-cyan-border);
  color: var(--color-cyan);
}
.mock_delta.is-lilac {
  background: var(--delta-lilac-bg);
  border: 0.0625rem solid var(--delta-lilac-border);
  color: var(--color-lilac);
}
.mock_alertname {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--color-text);
}
.mock_alerttime {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.mock_viewall {
  display: flex;
  align-items: center;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--color-line);
  color: var(--color-cyan);
  font-size: 0.75rem;
}
.mock_viewall span:first-child {
  flex: 1;
  font-weight: 500;
}
.mock_viewall span:last-child {
  font-family: var(--font-mono);
}

.mock_bottom {
  display: flex;
  gap: 0.6875rem;
  height: 12.25rem;
}
.mock_segtable {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.mock_tablehead {
  display: flex;
  align-items: center;
  padding-bottom: 0.5625rem;
}
.mock_segrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5625rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.mock_segname {
  width: 11.875rem;
  flex: none;
  font-size: 0.75rem;
  color: var(--color-text);
}
.mock_segusers {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.mock_segtrack {
  flex: 1;
  min-width: 0;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-chip);
  display: flex;
}
.mock_segfill {
  height: 100%;
  border-radius: var(--radius-pill);
}
.mock_segfill.is-magenta {
  background: var(--color-magenta);
  box-shadow: 0 0 0.625rem rgba(255, 61, 154, 0.4);
}
.mock_segfill.is-lilac {
  background: var(--color-lilac);
  box-shadow: 0 0 0.625rem rgba(167, 139, 250, 0.4);
}
.mock_segfill.is-cyan {
  background: var(--color-cyan);
  box-shadow: 0 0 0.625rem rgba(56, 232, 255, 0.4);
}
.mock_segpct {
  width: 2.375rem;
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
}
.mock_health {
  width: 17rem;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0.8125rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.mock_srcrow {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--color-line);
  padding-bottom: 0.0625rem;
}
.mock_srcname {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--color-text);
}
.mock_srcstate {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}

/* ============================================================
   7. LOGO STRIP
   ============================================================ */
/* Figma 11:16 — 1440 × 137 */
.logos_shell {
  background: var(--color-base);
  border-top: 0.0625rem solid var(--color-line);
  border-bottom: 0.0625rem solid var(--color-line);
}
.logos_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: 2.5rem 0;
  line-height: normal;
}
.logos_row {
  display: flex;
  align-items: center;
  width: 100%;
}
.logos_word {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

/* ============================================================
   8. FEATURE GRID   — Figma 11:17 (1440 x 708)
   ============================================================ */
.sectionhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 3.25rem;
  line-height: normal;
}
.sectionhead_eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
  white-space: pre;
}
.sectionhead_title {
  width: 56.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 2.875rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.featuregrid_shell {
  background: var(--color-base);
  padding: 6.5rem 0;
}
.featuregrid_list {
  display: flex;
  gap: var(--space-5);
}
.featurecard_item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  border-radius: var(--radius-l);
}
.featurecard_item.is-magenta {
  box-shadow: 0 0 2.75rem rgba(255, 61, 154, 0.14);
}
.featurecard_item.is-cyan {
  box-shadow: 0 0 2.75rem rgba(56, 232, 255, 0.14);
}
.featurecard_item.is-lilac {
  box-shadow: 0 0 2.75rem rgba(167, 139, 250, 0.14);
}
.featurecard_edge {
  height: 0.125rem;
  flex: none;
}
.is-magenta > .featurecard_edge {
  background: linear-gradient(
    to right,
    rgba(255, 61, 154, 0),
    #ff3d9a 50%,
    rgba(255, 61, 154, 0)
  );
}
.is-cyan > .featurecard_edge {
  background: linear-gradient(
    to right,
    rgba(56, 232, 255, 0),
    #38e8ff 50%,
    rgba(56, 232, 255, 0)
  );
}
.is-lilac > .featurecard_edge {
  background: linear-gradient(
    to right,
    rgba(167, 139, 250, 0),
    #a78bfa 50%,
    rgba(167, 139, 250, 0)
  );
}
.featurecard_stage {
  height: 11.875rem;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
  background: var(--color-base);
  border-bottom: 0.0625rem solid var(--color-line);
}
.featurecard_copy {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem 1.875rem var(--space-6);
  line-height: normal;
}
.featurecard_title {
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.featurecard_body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* card 1 — threshold sparkline */
.stage_spark {
  position: relative;
  width: 100%;
  height: 8.875rem;
}
.stage_thresholdline {
  position: absolute;
  left: 0;
  top: 3.25rem;
  width: 21.25rem;
  height: 0.0625rem;
  background: var(--color-muted);
}
.stage_thresholdlabel {
  position: absolute;
  left: 0;
  top: 2.375rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.stage_sparkimg {
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 21.25rem;
  height: 5.25rem;
}
.stage_breach {
  position: absolute;
  left: 18.75rem;
  top: 6.125rem;
  width: 0.6875rem;
  height: 0.6875rem;
}

/* card 2 — alert card */
.stage_alert {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 1.125rem;
  border-radius: var(--radius-m);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-cyan);
  box-shadow: 0 0 1.25rem rgba(56, 232, 255, 0.2);
}
.stage_alerthead {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}
.stage_sev {
  padding: 0.1875rem var(--space-2);
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--color-magenta);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-magenta);
}
.stage_alerttitle {
  font-weight: 500;
  font-size: 0.75rem;
}
.stage_attr {
  display: flex;
  justify-content: space-between;
  padding-top: 0.4375rem;
  border-top: 0.0625rem solid var(--color-line);
}
.stage_attrkey {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.stage_attrval {
  font-size: 0.75rem;
}

/* card 3 — ask + answer */
.stage_ask {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.stage_askinput {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0.875rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-lilac);
  box-shadow: 0 0 1.125rem rgba(167, 139, 250, 0.22);
}
.stage_prompt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-lilac);
}
.stage_asktext {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
}
.stage_caret {
  width: 0.125rem;
  height: 0.875rem;
  flex: none;
  background: var(--color-lilac);
  box-shadow: 0 0 0.5rem rgba(167, 139, 250, 0.8);
}
.stage_answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0.875rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.stage_answertext {
  font-size: 0.75rem;
  line-height: 1.6;
}
.stage_sql {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--color-cyan);
}

/* ============================================================
   9. FEATURE SPLIT   — Figma 11:18 (1440 x 592)
   ============================================================ */
.split_shell {
  background: var(--color-surface);
  border-top: 0.0625rem solid var(--color-line);
  border-bottom: 0.0625rem solid var(--color-line);
  padding: var(--space-9) 0;
}
.split_grid {
  display: flex;
  gap: 4.5rem;
  align-items: center;
}
.split_copy {
  width: 31.25rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  line-height: normal;
}
.split_eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-magenta);
  white-space: pre;
}
.split_title {
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.split_lead {
  width: 29.375rem;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.split_copy ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.split_bullet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.6;
}

.alertmock {
  flex: 1;
  min-width: 0;
  height: 25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-lilac);
  border-radius: 0.875rem;
  box-shadow: 0 0 3.125rem rgba(167, 139, 250, 0.22);
  line-height: normal;
}
.alertmock_bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 1.125rem;
  flex: none;
  background: var(--color-raised);
  border-bottom: 0.0625rem solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: pre;
}
.alertmock_body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5) 1.625rem;
}
.alertmock_head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.alertmock_sev {
  padding: var(--space-1) 0.5625rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid var(--color-magenta);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-magenta);
  white-space: pre;
}
.alertmock_title {
  font-weight: 500;
  font-size: 0.875rem;
}
.alertmock_chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5625rem;
  height: 13.0625rem;
}
.alertmock_chart i {
  flex: 1;
  min-width: 0;
  border-radius: 0.25rem;
}
.alertmock_chart i.is-a {
  background: linear-gradient(180deg, #a78bfa, rgba(56, 232, 255, 0.3));
}
.alertmock_chart i.is-b {
  background: linear-gradient(180deg, #ff3d9a, rgba(255, 61, 154, 0.25));
}
.alertmock_cause {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ============================================================
   10. METRICS BAND
   ============================================================ */
/* Figma 11:19 — 1440 x 200 */
.metrics_shell {
  position: relative;
  background: var(--color-base);
}
.metrics_underglow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.1875rem;
  background: linear-gradient(
    to right,
    rgba(167, 139, 250, 0),
    rgba(255, 61, 154, 0.9) 50%,
    rgba(56, 232, 255, 0)
  );
}
.metrics_row {
  display: flex;
  align-items: center;
  padding: var(--space-8) 0;
  line-height: normal;
}
.metrics_item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0 var(--space-6);
  border-left: 0.0625rem solid var(--color-line);
}
.metrics_item:first-child {
  border-left: 0;
  padding-left: 0;
}
.metrics_item dd {
  margin: 0;
}
.metrics_value {
  font-family: var(--font-display);
  font-size: 2.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.metrics_value.is-magenta {
  color: var(--color-magenta);
  text-shadow: 0 0 1.625rem rgba(255, 61, 154, 0.45);
}
.metrics_value.is-cyan {
  color: var(--color-cyan);
  text-shadow: 0 0 1.625rem rgba(56, 232, 255, 0.45);
}
.metrics_value.is-lilac {
  color: var(--color-lilac);
  text-shadow: 0 0 1.625rem rgba(167, 139, 250, 0.45);
}
.metrics_label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--color-muted);
}

/* ============================================================
   11. HOW IT WORKS — variant B (Figma 51:2037, 1440 x 1005)
   ============================================================ */
.steps_shell {
  background: var(--color-base);
  padding: 6.5rem 0;
}
.steps_header {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid var(--color-line);
  margin-bottom: 3.5rem;
  line-height: normal;
}
.steps_title {
  font-size: 2.75rem;
  letter-spacing: -0.02em;
}
.steps_meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
  white-space: pre;
}
.steps_split {
  display: flex;
  gap: 4.5rem;
  align-items: flex-start;
}
.steps_timeline {
  width: 38.75rem;
  flex: none;
  display: flex;
  flex-direction: column;
}
.step_item {
  display: flex;
  gap: var(--space-5);
  align-items: stretch;
  padding-bottom: 2.75rem;
}
.step_item:last-child {
  padding-bottom: 0;
}
.step_rail {
  width: 1.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step_railline {
  flex: 1;
  min-height: 0;
  width: 0.125rem;
}
.step_item.is-1 .step_railline {
  background: linear-gradient(
    180deg,
    rgba(56, 232, 255, 0.9),
    rgba(167, 139, 250, 0.35)
  );
}
.step_item.is-2 .step_railline {
  background: linear-gradient(
    180deg,
    rgba(167, 139, 250, 0.9),
    rgba(255, 61, 154, 0.35)
  );
}
.step_copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-bottom: var(--space-1);
  line-height: normal;
}
.step_n {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.step_num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}
.step_item.is-1 .step_num {
  color: var(--color-cyan);
}
.step_item.is-2 .step_num {
  color: var(--color-lilac);
}
.step_item.is-3 .step_num {
  color: var(--color-magenta);
}
.step_title {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.step_body {
  font-size: 0.875rem;
  line-height: 1.72;
  color: var(--color-muted);
}
.step_visual {
  padding: var(--space-4) 1.125rem;
  border-radius: var(--radius-m);
  background: var(--color-base);
}
.step_item.is-1 .step_visual {
  border: 0.0625rem solid #1b5a69;
  box-shadow: 0 0 1.625rem rgba(56, 232, 255, 0.16);
}
.step_item.is-2 .step_visual {
  border: 0.0625rem solid #433867;
  box-shadow: 0 0 1.625rem rgba(167, 139, 250, 0.16);
}
.step_item.is-3 .step_visual {
  border: 0.0625rem solid #631c44;
  box-shadow: 0 0 1.625rem rgba(255, 61, 154, 0.16);
}
.step_code {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
}
.step_code .tok-c {
  color: var(--color-cyan);
}
.step_code .tok-m {
  color: var(--color-muted-2);
  white-space: pre-wrap;
}
.step_chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.step_chip {
  padding: 0.375rem 0.6875rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  background: #2a2442;
  border: 0.0625rem solid #615192;
  color: var(--color-lilac);
}
.step_chip.is-add {
  background: #1d1c26;
  border-color: #3d3b45;
  color: var(--color-muted-2);
}
.step_toast {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}
.step_toasthead {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}
.step_toastname {
  font-weight: 600;
  font-size: 0.75rem;
}
.step_toasttime {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.step_toasttext {
  font-size: 0.75rem;
  line-height: 1.65;
  color: #bdbacc;
}

.steps_preview {
  position: sticky;
  top: 6.25rem;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.625rem;
  border-radius: var(--radius-l);
  background: var(--color-surface);
  border: 0.0625rem solid #423764;
  box-shadow: 0 0 3.75rem rgba(167, 139, 250, 0.2);
  line-height: normal;
}
.preview_label {
  display: flex;
  align-items: center;
  padding-bottom: 1.125rem;
}
.preview_labeltext {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.preview_pin {
  margin-left: auto;
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.3125rem;
  background: #2a2442;
  border: 0.0625rem solid #594a87;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-lilac);
}
.preview_surface {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  border-radius: var(--radius-m);
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.preview_kpis {
  display: flex;
  gap: 0.6875rem;
}
.preview_k {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--space-3) 0.875rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.preview_klabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.preview_kv {
  display: flex;
  align-items: flex-end;
  gap: 0.4375rem;
}
.preview_knum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.preview_kdelta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
}
.preview_chart {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 11.25rem;
}
.preview_chart i {
  flex: 1;
  min-width: 0;
  border-radius: 0.1875rem;
}
.preview_chart i.is-a {
  background: linear-gradient(
    180deg,
    rgba(56, 232, 255, 0.95),
    rgba(167, 139, 250, 0.28)
  );
}
.preview_chart i.is-b {
  background: linear-gradient(180deg, #ff3d9a, rgba(255, 61, 154, 0.22));
}
.preview_foot {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* ============================================================
   12. TESTIMONIALS — variant A (Figma 51:1974, 1440 x 692)
   ============================================================ */
.wall_shell {
  background: var(--color-base);
  padding: var(--space-9) 0;
}
.wall_header {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem solid var(--color-line);
  margin-bottom: 2.75rem;
  line-height: normal;
}
.wall_title {
  font-size: 2.625rem;
  letter-spacing: -0.02em;
}
.wall_rating {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
  white-space: pre;
}
.wall_grid {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.quote_featured {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 2.75rem;
  border-radius: 1.25rem;
  background: var(--color-surface);
  border: 0.09375rem solid rgba(255, 61, 154, 0.85);
  box-shadow: 0 0 4rem rgba(167, 139, 250, 0.18);
  line-height: normal;
}
.quote_logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: #9e99b2;
}
.quote_stars {
  display: flex;
  gap: 0.1875rem;
  font-size: 0.75rem;
  color: var(--color-magenta);
}
.quote_text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8125rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.quote_who {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.quote_name {
  font-weight: 600;
  font-size: 0.875rem;
}
.quote_role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.wall_col {
  width: 26.875rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.quote_side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 1.625rem 1.75rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  line-height: normal;
}
.quote_sidelogo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #8c87a3;
}
.quote_sidetext {
  font-size: 1rem;
  line-height: 1.65;
}
.quote_sidewho {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
}

/* ============================================================
   13. PRICING — variant C (Figma 51:2201, 1440 x 764)
   ============================================================ */
.pricing_shell {
  background: var(--color-base);
  padding: var(--space-9) 0;
}
.pricing_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 2.75rem;
  line-height: normal;
}
.pricing_lead {
  width: 38.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.pricing_panel {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.pricing_left {
  --slider-pos: 40%;
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding: 2.75rem;
  line-height: normal;
}
.slider_label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.slider_value {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
}
.slider_num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  letter-spacing: -0.03em;
}
.slider_unit {
  font-size: 1rem;
  color: var(--color-muted);
}
.slider_track {
  position: relative;
  display: flex;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: #2b2933;
  overflow: hidden;
}
.slider_fill {
  display: block;
  height: 100%;
  width: var(--slider-pos);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #38e8ff, #a78bfa 55%, #ff3d9a);
  box-shadow: 0 0 1.125rem rgba(255, 61, 154, 0.5);
}
.slider_knob {
  position: absolute;
  left: var(--slider-pos);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.375rem;
  height: 1.375rem;
}
.slider_ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.pricing_included {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  padding-top: var(--space-2);
}
.pricing_inc {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #d9d6e5;
}
.pricing_right {
  width: 25rem;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2.75rem;
  background: var(--color-base);
  border-left: 0.0625rem solid var(--color-line);
  line-height: normal;
  text-align: center;
}
.pricing_amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  letter-spacing: -0.04em;
  color: var(--color-magenta);
  text-shadow: 0 0 2.5rem rgba(255, 61, 154, 0.5);
}
.pricing_note {
  font-size: 0.75rem;
  color: var(--color-muted);
}
.pricing_fineprint {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}

/* ============================================================
   14. CTA BAND — variant A (Figma 51:2008, 1440 x 708)
   ============================================================ */
.cta_shell {
  position: relative;
  overflow: hidden;
  background: var(--color-base);
  padding: 6.5rem 0 25rem;
}
.cta_scene {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  min-width: 90rem;
  height: 44.25rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.cta_sun {
  position: absolute;
  left: 50%;
  margin-left: -11.875rem;
  top: 22.5rem;
  width: 23.75rem;
  height: 23.75rem;
}
.cta_suncut {
  position: absolute;
  left: 50%;
  margin-left: -13.125rem;
  width: 26.25rem;
  background: var(--color-base);
}
.cta_mountains {
  position: absolute;
  left: 0;
  top: 35rem;
  width: 100%;
  height: 9.25rem;
}
.cta_gridline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.0625rem;
}
.cta_horizonglow {
  position: absolute;
  left: 0;
  top: 38.75rem;
  width: 100%;
  height: 10.625rem;
  background: linear-gradient(
    to bottom,
    rgba(255, 61, 154, 0.34),
    rgba(11, 10, 20, 0)
  );
}
.cta_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.625rem;
  line-height: normal;
}
.cta_title {
  width: 65rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.625rem;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.button.is-ctaprimary {
  padding: 1.0625rem 1.875rem;
  box-shadow: 0 0 2.25rem rgba(255, 61, 154, 0.6);
}
.button.is-ctasecondary {
  padding: 1.0625rem 1.875rem;
  border-color: #4a4953;
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   15. FOOTER — variant C (Figma 51:2145, 1440 x 711)
   ============================================================ */
.footer_shell {
  position: relative;
  overflow: hidden;
  background: var(--color-base);
  padding-top: 4.5rem;
}
.footer_news {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2.125rem 2.5rem;
  border-radius: 1rem;
  background: var(--color-base);
  border: 0.0625rem solid #493e70;
  box-shadow: 0 0 2.75rem rgba(167, 139, 250, 0.16);
  line-height: normal;
}
.footer_newscopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.footer_newstitle {
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.footer_newssub {
  font-size: 1rem;
  color: var(--color-muted);
}
.footer_form {
  width: 26.25rem;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.footer_input {
  flex: 1;
  min-width: 0;
  padding: 0.8125rem var(--space-4);
  border-radius: 0.5625rem;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.footer_input::placeholder {
  color: var(--color-muted);
}
.button.is-subscribe {
  padding: 0.8125rem 1.375rem;
  border-radius: 0.5625rem;
  font-size: 1rem;
  box-shadow: 0 0 1.375rem rgba(255, 61, 154, 0.45);
}

.footer_top {
  display: flex;
  align-items: flex-start;
  padding: 3.5rem 0 3.25rem;
  line-height: normal;
}
.footer_statement {
  width: 35rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer_brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}
.footer_brandmark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.405rem;
  flex: none;
  background: linear-gradient(135deg, #ff3d9a 0%, #38e8ff 71%);
}
.footer_brandline {
  width: 32.5rem;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.footer_links {
  margin-left: auto;
  display: flex;
  gap: var(--space-7);
}
.footer_col {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}
.footer_colhead {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
}
.footer_link {
  font-size: 1rem;
  color: #bdbacc;
}

.footer_fine {
  display: flex;
  align-items: center;
  padding: var(--space-5) 0 2.5rem;
  border-top: 0.0625rem solid var(--color-line);
}
.footer_fine p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  white-space: pre;
}
.footer_fine i {
  flex: 1;
}

.footer_horizon {
  position: relative;
  height: 4.125rem;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.footer_neon {
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 100%;
  height: 0.125rem;
  box-shadow: 0 0 1.375rem rgba(255, 61, 154, 0.7);
  background: linear-gradient(
    to right,
    rgba(56, 232, 255, 0),
    #ff3d9a 50%,
    rgba(167, 139, 250, 0)
  );
}
.footer_gridline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.0625rem;
}
.footer_wordmark {
  display: block;
  text-align: center;
  height: 8.75rem;
  overflow: hidden;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.25rem;
  letter-spacing: -0.02em;
  background: linear-gradient(
    to right,
    rgba(255, 61, 154, 0.9),
    rgba(167, 139, 250, 0.75) 50%,
    rgba(56, 232, 255, 0.9)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  user-select: none;
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  :root {
    --margin-global: 2.5rem;
  }
  .nav_menu {
    display: none;
  }

  .metrics_row {
    flex-wrap: wrap;
  }
  .metrics_item {
    flex: 1 1 44%;
  }
  .featuregrid_list,
  .split_grid,
  .steps_split,
  .wall_grid,
  .pricing_panel,
  .footer_news,
  .footer_top {
    flex-direction: column;
  }
  .split_copy,
  .wall_col,
  .pricing_right,
  .steps_timeline,
  .footer_statement,
  .footer_form {
    width: 100%;
  }
  .hero_title {
    font-size: 3.5rem;
  }
  .steps_preview {
    position: static;
  }
  .pricing_right {
    border-left: 0;
    border-top: 0.0625rem solid var(--color-line);
  }
  .footer_links {
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--space-6);
  }
  .footer_wordmark {
    font-size: 6.875rem;
    height: auto;
  }

  .metrics_item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  /* The fine print is one row of mono text held apart by flex spacers. At 390px it
     no longer fits now that the type is larger, so the spacers collapse and it wraps. */
  .footer_fine { flex-wrap: wrap; gap: 0.375rem var(--space-4); }
  .footer_fine i { display: none; }
  .footer_fine p { white-space: normal; }

  :root {
    --margin-global: 1.25rem;
  }
  .section_shell {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .mock_body {
    grid-template-columns: 1fr;
  }
  .mock_sidebar {
    display: none;
  }

  .metrics_item {
    flex: 1 1 100%;
  }
  .metrics_item {
    border-left: 0;
    padding-left: 0;
  }
  .sectionhead {
    flex-direction: column;
    align-items: flex-start;
  }
  .sectionhead_aside {
    margin-left: 0;
  }
  .logos_row {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .hero_actions {
    flex-direction: column;
    width: 100%;
  }
  .hero_doodle,
  .cta_doodle {
    display: none;
  }
  .footer_form {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   17. AUTH PAGES — Figma 38:1105 / 38:1156 (1440 x 780)
   ============================================================ */
.auth_split {
  display: flex;
  align-items: stretch;
}
.auth_form {
  flex: 1;
  min-width: 0;
  height: 48.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem var(--space-9);
  background: var(--color-base);
  line-height: normal;
}
.auth_card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.auth_brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}
.auth_mark {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.375rem;
  flex: none;
  background: linear-gradient(135deg, #ff3d9a 0%, #38e8ff 71%);
}
.auth_title {
  font-size: 2.25rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.auth_sub {
  font-size: 0.875rem;
  line-height: 1.68;
  color: var(--color-muted);
}
.auth_sso {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.auth_ssobtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 0;
  border-radius: 0.625rem;
  border: 0.0625rem solid #3d3b45;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text);
}
.auth_ssobtn:hover {
  border-color: var(--color-lilac);
  color: var(--color-text);
}
.auth_or {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.auth_or i {
  flex: 1;
  height: 0.0625rem;
  background: var(--color-line);
}
.auth_or span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.auth_field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.auth_label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.auth_input {
  width: 100%;
  padding: 0.875rem var(--space-4);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.auth_input::placeholder {
  color: var(--color-muted);
}
.auth_extra {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-muted);
}
.auth_forgot {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-cyan);
}
.button.is-auth {
  width: 100%;
  padding: var(--space-4) 1.75rem;
  box-shadow: 0 0 1.75rem rgba(255, 61, 154, 0.5);
}
.auth_alt {
  display: flex;
  justify-content: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.auth_alt a {
  font-weight: 500;
  color: var(--color-magenta);
}
.auth_proof {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 48.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: 4.5rem;
  background: var(--color-surface);
  line-height: normal;
}
.auth_glow {
  position: absolute;
  left: 11.25rem;
  top: 29.375rem;
  width: 22.5rem;
  height: 22.5rem;
}
.auth_gridline {
  position: absolute;
  left: 0;
  width: 45rem;
  height: 0.0625rem;
}
.auth_quote {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.48;
  letter-spacing: -0.01em;
}
.auth_who {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.auth_name {
  font-weight: 600;
  font-size: 0.875rem;
}
@media (max-width: 991px) {
  .auth_split {
    flex-direction: column;
  }
  .auth_form,
  .auth_proof {
    height: auto;
    padding: 3.5rem var(--space-6);
  }
}

/* ============================================================
   18. PASSWORD — Figma 39:1513 (1440 x 651)
   ============================================================ */
.pw_shell {
  position: relative;
  overflow: hidden;
  background: var(--color-base);
  padding: 11.25rem 0;
}
.pw_scene {
  position: absolute;
  left: 50%;
  top: 0;
  width: 90rem;
  height: 40.6875rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.pw_glow {
  position: absolute;
  left: 33.125rem;
  top: 18.75rem;
  width: 23.75rem;
  height: 23.75rem;
}
.pw_gridline {
  position: absolute;
  left: 0;
  width: 90rem;
  height: 0.0625rem;
}
.pw_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  line-height: normal;
}
.pw_brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
}
.pw_mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4375rem;
  flex: none;
  background: linear-gradient(135deg, #ff3d9a 0%, #38e8ff 71%);
}
.pw_title {
  width: 50rem;
  max-width: 100%;
  text-align: center;
  font-size: 2.875rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.pw_sub {
  font-size: 1rem;
  color: var(--color-muted);
}
.pw_field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 28.75rem;
  max-width: 100%;
}
.pw_input {
  flex: 1;
  min-width: 0;
  padding: 0.9375rem 1.125rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.pw_input::placeholder {
  color: var(--color-muted);
}
.pw_error {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-magenta);
}

/* ============================================================
   19. INNER-PAGE NAV — Figma 33:19 "Nav / Dark"
   GSAP note (from Figma component doc): hide on scroll down,
   reveal on scroll up, backdrop blur past 2.5rem.
   ============================================================ */
.nav_bar.is-inner .nav_inner {
  height: auto;
  padding: 1.125rem 0;
  justify-content: flex-start;
}
.nav_bar.is-inner .nav_menu {
  margin: 0 auto;
}
.nav_bar.is-inner .nav_link {
  color: #bdbacc;
}
.nav_bar.is-inner .nav_link:hover {
  color: var(--color-cyan);
}
.nav_bar.is-inner .nav_actions {
  margin-left: auto;
}

/* ============================================================
   20. 404 — Figma 39:1418
   ============================================================ */
.e404_shell {
  position: relative;
  overflow: hidden;
  background: var(--color-base);
  padding: 8.75rem 0 18.125rem;
}
.e404_scene {
  position: absolute;
  left: 50%;
  top: 0;
  width: 90rem;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
.e404_glow {
  position: absolute;
  left: 34.375rem;
  top: 38.75rem;
  width: 21.25rem;
  height: 21.25rem;
}
.e404_gridline {
  position: absolute;
  left: 0;
  width: 90rem;
  height: 0.0625rem;
}
.e404_content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  line-height: normal;
}
.e404_code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.375rem;
  letter-spacing: -0.05em;
  background: linear-gradient(to right, #ff3d9a, #38e8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.e404_title {
  width: 56.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 2.75rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.e404_sub {
  width: 38.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.e404_quick {
  display: flex;
  gap: var(--space-5);
  padding-top: var(--space-2);
  font-size: 0.875rem;
  color: #bdbacc;
}
.button.is-ghostline {
  border-color: #46444e;
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   21. UTILITY PAGE HEADER + TABLE + PROSE
   (Licenses 39:1164/39:1168 — reused by Instructions & Style Guide)
   ============================================================ */
.util_head {
  background: var(--color-base);
  padding: 5.5rem 0 var(--space-7);
}
.util_headinner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  line-height: normal;
}
.util_eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
  white-space: pre;
}
.util_title {
  font-size: 3.25rem;
  letter-spacing: -0.03em;
}
.util_lead {
  width: 47.5rem;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--color-muted);
}
.util_body {
  background: var(--color-base);
  padding: 5.5rem 0;
}
.util_stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dtable {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.dtable_row {
  display: flex;
  align-items: center;
  padding: var(--space-4) 1.625rem;
  border-top: 0.0625rem solid var(--color-line);
}
.dtable_row.is-head {
  background: var(--color-raised);
  border-top: 0;
}
.dtable_cell {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: #bdbacc;
  line-height: normal;
}
.dtable_row.is-head .dtable_cell {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  line-height: normal;
}
.prose h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.prose p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-muted);
}
@media (max-width: 767px) {
  .dtable_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
  .util_title {
    font-size: 2.25rem;
  }
}

/* ============================================================
   22. INSTRUCTIONS — Figma 39:1322 / 39:1326 / 39:1330
   ============================================================ */
.callout_band {
  background: var(--color-surface);
  padding: 4.5rem 0;
}
.callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 1.75rem;
  border-radius: 0.875rem;
  background: #281024;
  border: 0.0625rem solid #792150;
  line-height: normal;
}
.callout_label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-magenta);
}
.callout_text {
  font-size: 1rem;
  line-height: 1.72;
  color: #bdbacc;
}
.spec_band {
  background: var(--color-base);
  padding: 4.5rem 0 5.5rem;
}
.spec_stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: normal;
}
.spec_h {
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.spec_table {
  display: flex;
  flex-direction: column;
}
.spec_row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 0.0625rem solid var(--color-line);
}
.spec_key {
  width: 17.5rem;
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-cyan);
}
.spec_val {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}
@media (max-width: 767px) {
  .spec_row {
    flex-direction: column;
    gap: 0.375rem;
  }
  .spec_key {
    width: 100%;
  }
}

/* ============================================================
   23. CHANGELOG — Figma 45:1924 / 45:1933
   ============================================================ */
.cl_head {
  background: var(--color-base);
  padding: var(--space-9) 0 3.5rem;
}
.cl_headrow {
  display: flex;
  align-items: flex-end;
  line-height: normal;
}
.cl_headcopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.cl_title {
  width: 48.75rem;
  max-width: 100%;
  font-size: 3.25rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.cl_sub {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cl_subinput {
  width: 13.75rem;
  padding: 0.8125rem var(--space-4);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.cl_subinput::placeholder {
  color: var(--color-muted);
}
.button.is-clsub {
  padding: 0.8125rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  box-shadow: 0 0 1.375rem rgba(255, 61, 154, 0.45);
}

.cl_body {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.cl_split {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
}
.cl_rail {
  width: 12.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  line-height: normal;
}
.cl_raillabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.cl_railitem {
  display: flex;
  align-items: center;
  padding: 0.5625rem 0 0.5625rem var(--space-3);
  border-left: 0.0625rem solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #bdbacc;
}
.cl_railitem.is-active {
  border-left: 0.125rem solid var(--color-magenta);
  font-weight: 700;
  color: var(--color-magenta);
}
.cl_railitem span {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--color-muted-2);
  font-weight: 400;
}
.cl_releases {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.cl_release {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 1.75rem 1.875rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  line-height: normal;
}
.cl_release.is-magenta {
  box-shadow: 0 0 2rem rgba(255, 61, 154, 0.1);
}
.cl_release.is-cyan {
  box-shadow: 0 0 2rem rgba(56, 232, 255, 0.1);
}
.cl_release.is-lilac {
  box-shadow: 0 0 2rem rgba(167, 139, 250, 0.1);
}
.cl_relhead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cl_ver {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.cl_release.is-magenta .cl_ver {
  color: var(--color-magenta);
  text-shadow: 0 0 1.125rem rgba(255, 61, 154, 0.35);
}
.cl_release.is-cyan .cl_ver {
  color: var(--color-cyan);
  text-shadow: 0 0 1.125rem rgba(56, 232, 255, 0.35);
}
.cl_release.is-lilac .cl_ver {
  color: var(--color-lilac);
  text-shadow: 0 0 1.125rem rgba(167, 139, 250, 0.35);
}
.cl_date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.cl_item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--color-line);
}
.cl_sym {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
}
.cl_sym.is-add {
  background: var(--delta-cyan-bg);
  border: 0.0625rem solid var(--delta-cyan-border);
  color: var(--color-cyan);
}
.cl_sym.is-chg {
  background: var(--delta-lilac-bg);
  border: 0.0625rem solid var(--delta-lilac-border);
  color: var(--color-lilac);
}
.cl_sym.is-fix {
  background: var(--delta-mag-bg);
  border: 0.0625rem solid var(--delta-mag-border);
  color: var(--color-magenta);
}
.cl_text {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.68;
  color: #bdbacc;
}
@media (max-width: 991px) {
  .cl_split {
    flex-direction: column;
  }
  .cl_rail {
    width: 100%;
  }
  .cl_headrow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

/* ============================================================
   24. INTEGRATION DETAIL (docs) — Figma 44:1713 / 44:1721
   ============================================================ */
.crumb_band {
  background: var(--color-surface);
  padding: 2.5rem 0;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  line-height: normal;
}
.crumb .is-here {
  color: var(--color-cyan);
}
.crumb .crumb_edit {
  margin-left: auto;
  white-space: pre;
}

.docs_band {
  background: var(--color-base);
  padding: 3.5rem 0 var(--space-9);
}
.docs_split {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
  line-height: normal;
}
.docs_nav {
  width: 13.75rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.docs_group {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}
.docs_grouplabel {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.docs_link {
  display: block;
  padding: 0.375rem 0 0.375rem var(--space-3);
  border-left: 0.0625rem solid var(--color-line);
  font-size: 0.75rem;
  color: #bdbacc;
}
.docs_link.is-active {
  border-left: 0.125rem solid var(--color-cyan);
  font-weight: 500;
  color: var(--color-text);
}
.docs_main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
}
.docs_h {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.docs_logo {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.78rem;
  background: linear-gradient(135deg, #38e8ff 0%, rgba(56, 232, 255, 0.8) 71%);
}
.docs_title {
  font-size: 2.5rem;
  letter-spacing: -0.03em;
}
.docs_meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
  white-space: pre;
}
.docs_tabs {
  display: flex;
}
.docs_tab {
  padding: var(--space-3) 1.125rem;
  border-bottom: 0.0625rem solid var(--color-line);
  font-size: 0.875rem;
  color: #bdbacc;
}
.docs_tab.is-active {
  border-bottom: 0.125rem solid var(--color-cyan);
  font-weight: 600;
  color: var(--color-text);
}
.docs_tabfill {
  flex: 1;
  border-bottom: 0.0625rem solid var(--color-line);
}
.docs_lead {
  font-size: 1rem;
  line-height: 1.76;
  color: #bdbacc;
}
.docs_callout {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  padding: var(--space-4) 1.25rem;
  border-radius: var(--radius-m);
  background: #0f202b;
  border: 0.0625rem solid #1d6372;
  font-size: 0.875rem;
}
.docs_callout i {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--color-cyan);
}
.docs_callout p {
  flex: 1;
  min-width: 0;
  line-height: 1.68;
  color: #bdbacc;
}
.docs_h2 {
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.docs_step {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem var(--space-4);
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.docs_check {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: var(--color-cyan);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  color: var(--color-base);
}
.docs_check.is-todo {
  background: none;
  border: 0.0625rem solid var(--color-line);
  color: transparent;
}
.docs_stepnum {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-cyan);
}
.docs_steptext {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: #bdbacc;
}
.docs_code {
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.docs_codebar {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-raised);
  border-bottom: 0.0625rem solid var(--color-line);
}
.docs_codetab {
  padding: 0.6875rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.docs_codetab.is-active {
  border-bottom: 0.125rem solid var(--color-cyan);
  color: var(--color-cyan);
}
.docs_copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.docs_codebody {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding: 1.125rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.75;
}
.docs_codebody .c {
  color: var(--color-cyan);
}
.docs_codebody .m {
  color: #bdbacc;
  white-space: pre-wrap;
}
.docs_toc {
  width: 12.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.docs_toclink {
  display: block;
  padding: 0.3125rem 0 0.3125rem var(--space-3);
  border-left: 0.0625rem solid var(--color-line);
  font-size: 0.75rem;
  color: #bdbacc;
}
.docs_toclink.is-active {
  border-left: 0.125rem solid var(--color-cyan);
  color: var(--color-text);
}

@media (max-width: 991px) {
  .docs_split {
    flex-direction: column;
  }
  .docs_nav {
    width: 100%;
  }
}

/* ============================================================
   25. PRICING PAGE — Figma 34:20 / 34:29 / 41:1226 / 51:6633
   ============================================================ */
.prc_head {
  background: var(--color-base);
  padding: 6.5rem 0 4.5rem;
}
.prc_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  line-height: normal;
}
.prc_title {
  width: 65rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.75rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.prc_lead {
  width: 42.5rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--color-muted);
}
.prc_toggle {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.prc_toggleopt {
  padding: 0.5625rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  color: #bdbacc;
}
.prc_toggleopt.is-on {
  background: var(--color-magenta);
  color: var(--color-base);
  font-weight: 600;
  box-shadow: 0 0 1.25rem rgba(255, 61, 154, 0.45);
}

.prc_tiers {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.prc_row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.prc_tier {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.875rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  line-height: normal;
}
.prc_tier.is-featured {
  padding: 2.375rem 1.875rem;
  background: var(--color-raised);
  border: 0.09375rem solid var(--color-magenta);
  box-shadow: 0 0 3.125rem rgba(255, 61, 154, 0.3);
}
.prc_tierhead {
  display: flex;
  align-items: center;
}
.prc_tiername {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.prc_tierbadge {
  margin-left: auto;
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--color-magenta);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-base);
}
.prc_price {
  display: flex;
  align-items: flex-end;
  gap: 0.4375rem;
}
.prc_amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: -0.03em;
}
.prc_tier.is-featured .prc_amount {
  color: var(--color-magenta);
  text-shadow: 0 0 1.375rem rgba(255, 61, 154, 0.4);
}
.prc_per {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted);
}
.prc_rule {
  height: 0.0625rem;
  background: var(--color-line);
}
.prc_feat {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  font-size: 0.875rem;
  color: #bdbacc;
}
.prc_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0;
  border-radius: 0.625rem;
  margin-top: auto;
  background: #22202a;
  border: 0.0625rem solid var(--color-line);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}
.prc_cta.is-primary {
  background: var(--color-magenta);
  border-color: transparent;
  color: var(--color-base);
  box-shadow: 0 0 1.5rem rgba(255, 61, 154, 0.45);
}
.prc_cta:hover {
  color: var(--color-text);
}
.prc_cta.is-primary:hover {
  color: var(--color-base);
}

.prc_compare {
  background: var(--color-base);
  padding: 0 0 5.5rem;
}
.prc_sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: 2.75rem;
  line-height: normal;
}
.prc_sectitle {
  width: 56.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 2.625rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.matrix {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.matrix_row {
  display: flex;
  align-items: center;
  padding: 0.9375rem 1.625rem;
  border-top: 0.0625rem solid var(--color-line);
}
.matrix_row.is-head {
  background: var(--color-raised);
  border-top: 0;
}
.matrix_label {
  width: 21.25rem;
  flex: none;
  font-size: 0.875rem;
  color: #bdbacc;
  line-height: normal;
}
.matrix_cell {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.875rem;
  color: #bdbacc;
  line-height: normal;
}
.matrix_cell.is-team {
  color: var(--color-magenta);
}
.matrix_cell.is-off {
  color: #5c5770;
}
.matrix_row.is-head .matrix_label,
.matrix_row.is-head .matrix_cell {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text);
}
.matrix_row.is-head .matrix_cell.is-team {
  color: var(--color-magenta);
}

.prc_faq {
  background: var(--color-base);
  padding: 5.5rem 0;
}
.faq_cols {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}
.faq_col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.faq_item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--radius-m);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  line-height: normal;
}
.faq_q {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
}
.faq_q span:first-child {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.faq_q span:last-child {
  font-family: var(--font-mono);
  color: var(--color-cyan);
}
.faq_a {
  font-size: 0.875rem;
  line-height: 1.72;
  color: var(--color-muted);
}
@media (max-width: 991px) {
  .prc_row,
  .faq_cols {
    flex-direction: column;
  }
  .prc_title {
    font-size: 2.5rem;
  }
  .matrix_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
  .matrix_label {
    width: 100%;
  }
  .matrix_cell {
    text-align: left;
  }
}

/* ============================================================
   26. PRODUCT PAGE — Figma 51:5224 / 51:5228 / 51:5358
   ============================================================ */
.pd_head {
  background: var(--color-base);
  padding: var(--space-9) 0;
}
.pd_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  line-height: normal;
}
.pd_title {
  width: 65rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.875rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.pd_lead {
  width: 43.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--color-muted);
}

.pd_canvasband {
  background: var(--color-base);
  padding: 3.5rem 0 5.5rem;
}
.pd_canvas {
  position: relative;
  height: 45rem;
}
.pd_stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 82rem;
  height: 45rem;
  transform: translateX(-50%);
}
.pd_shell {
  position: absolute;
  left: 13.5rem;
  top: 3.75rem;
  width: 55rem;
  height: 37.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-base);
  border: 0.0625rem solid #493e70;
  border-radius: 1rem;
  line-height: normal;
  box-shadow:
    0 1.5rem 3.75rem rgba(0, 0, 0, 0.5),
    0 0 4.125rem rgba(167, 139, 250, 0.26);
}
.pd_callout {
  position: absolute;
  width: 11.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  line-height: normal;
}
.pd_callouthead {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}
.pd_calloutnum {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}
.pd_callouttitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.pd_calloutbody {
  width: 12.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.pd_leader {
  position: absolute;
  height: 0.0625rem;
  width: 1.75rem;
}
.pd_pin {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-base);
}
.pd_pin.is-cyan {
  background: var(--color-cyan);
  box-shadow: 0 0 1.125rem rgba(56, 232, 255, 0.8);
}
.pd_pin.is-magenta {
  background: var(--color-magenta);
  box-shadow: 0 0 1.125rem rgba(255, 61, 154, 0.8);
}
.pd_pin.is-lilac {
  background: var(--color-lilac);
  box-shadow: 0 0 1.125rem rgba(167, 139, 250, 0.8);
}
.pd_kpi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: var(--space-3) 0.8125rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.pd_kpinum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.pd_chartpanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.8125rem 0.9375rem;
  border-radius: 0.625rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.pd_chart {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 10.625rem;
}
.pd_chart i {
  flex: 1;
  min-width: 0;
  border-radius: 0.1875rem;
}
.pd_chart i.is-a {
  background: linear-gradient(
    180deg,
    rgba(56, 232, 255, 0.95),
    rgba(167, 139, 250, 0.28)
  );
}
.pd_chart i.is-b {
  background: linear-gradient(180deg, #ff3d9a, rgba(255, 61, 154, 0.22));
}

.pd_pillars {
  background: var(--color-surface);
  padding: 5.5rem 0;
}
.pd_pillarrow {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.pd_pillar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 1.625rem;
  border-top: 0.125rem solid;
  line-height: normal;
}
.pd_pillar.is-cyan {
  border-color: #268fa1;
}
.pd_pillar.is-magenta {
  border-color: #9d2964;
}
.pd_pillar.is-lilac {
  border-color: #69579e;
}
.pd_pillarname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
}
.pd_pillar.is-cyan .pd_pillarname {
  color: var(--color-cyan);
}
.pd_pillar.is-magenta .pd_pillarname {
  color: var(--color-magenta);
}
.pd_pillar.is-lilac .pd_pillarname {
  color: var(--color-lilac);
}
.pd_pillartext {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* CTA BAND — VARIANT C (terminal) — Figma 51:6992 */
.term_shell {
  background: var(--color-base);
  padding: 6.5rem 0;
}
.term_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
  line-height: normal;
}
.term_title {
  width: 56.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.25rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.term_window {
  width: 51.25rem;
  max-width: 100%;
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-surface);
  border: 0.0625rem solid #1f6e7e;
  box-shadow: 0 0 3.125rem rgba(56, 232, 255, 0.22);
}
.term_bar {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.6875rem var(--space-4);
  background: var(--color-raised);
  border-bottom: 0.0625rem solid var(--color-line);
}
.term_path {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
  white-space: pre;
}
.term_copy {
  margin-left: auto;
  padding: var(--space-1) 0.6875rem;
  border-radius: 0.375rem;
  background: #13323e;
  border: 0.0625rem solid #227989;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-cyan);
}
.term_body {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  padding: var(--space-5);
  font-family: var(--font-mono);
}
.term_cmd {
  display: flex;
  gap: 0.5625rem;
  font-size: 0.875rem;
}
.term_prompt {
  font-weight: 700;
  color: var(--color-magenta);
}
.term_ok {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-cyan);
  white-space: pre-wrap;
}
.term_arrow {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-lilac);
  white-space: pre-wrap;
}
.term_cursorrow {
  display: flex;
  gap: 0.5625rem;
  align-items: center;
  font-size: 0.875rem;
}
.term_cursor {
  width: 0.5625rem;
  height: 1.125rem;
  background: var(--color-text);
}

@media (max-width: 991px) {
  .pd_pillarrow {
    flex-direction: column;
  }
  .pd_title {
    font-size: 2.5rem;
  }
}

/* ============================================================
   27. FEATURE ALERT — Figma 42:1536 / 42:1540 / 42:1622 + CTA B 51:7048
   ============================================================ */
.fa_head {
  background: var(--color-base);
  padding: var(--space-9) 0;
}
.fa_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  line-height: normal;
}
.fa_title {
  width: 62.5rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.625rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.fa_lead {
  width: 45rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--color-muted);
}

.fa_canvasband {
  background: var(--color-base);
  padding: var(--space-8) 0 5.5rem;
}
.fa_canvas {
  position: relative;
  height: 41.25rem;
}
.fa_stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 82rem;
  height: 41.25rem;
  transform: translateX(-50%);
}
.fa_card {
  position: absolute;
  left: 23.5rem;
  top: 7.75rem;
  width: 35rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.625rem 1.75rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 0.09375rem solid #852357;
  box-shadow: 0 0 3.75rem rgba(255, 61, 154, 0.24);
  line-height: normal;
}
.fa_cardhead {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.fa_sev {
  padding: var(--space-1) 0.5625rem;
  border-radius: 0.375rem;
  background: #411531;
  border: 0.0625rem solid #9d2964;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-magenta);
}
.fa_cardtitle {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.fa_cardtime {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.fa_cardbody {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #bdbacc;
}
.fa_attr {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.fa_attrkey {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
}
.fa_attrval {
  margin-left: auto;
  font-size: 0.75rem;
  color: #bdbacc;
}
.fa_query {
  padding: 0.6875rem 0.875rem;
  border-radius: 0.5625rem;
  background: var(--color-base);
  border: 0.0625rem solid #1b5866;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-cyan);
}
.fa_actions {
  display: flex;
  gap: 0.625rem;
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--color-line);
}
.fa_btn {
  padding: var(--space-2) 0.8125rem;
  border-radius: var(--radius-s);
  border: 0.0625rem solid var(--color-line);
  font-weight: 500;
  font-size: 0.75rem;
  color: #bdbacc;
}
.fa_btn.is-primary {
  background: #411531;
  border-color: #852357;
  color: var(--color-magenta);
}
.fa_btn:hover {
  color: var(--color-text);
}
.fa_leader {
  position: absolute;
  height: 0.0625rem;
  width: 7.375rem;
}

.fa_reasons {
  background: var(--color-surface);
  padding: 5.5rem 0;
}
.fa_reasonstack {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  line-height: normal;
}
.fa_reasonhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fa_reasontitle {
  font-size: 2.625rem;
  letter-spacing: -0.02em;
}
.fa_row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.fa_rowkey {
  width: 17.5rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.fa_rowval {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.72;
  color: var(--color-muted);
}

/* CTA BAND — VARIANT B (split + card) — Figma 51:7048 */
.ctab_shell {
  background: var(--color-surface);
  padding: var(--space-9) 0;
}
.ctab_split {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}
.ctab_copy {
  width: 38.75rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  line-height: normal;
}
.ctab_title {
  font-size: 3.25rem;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.ctab_lead {
  width: 35rem;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.ctab_fine {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  white-space: pre;
}
.ctab_card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.625rem 1.75rem;
  border-radius: 1rem;
  background: var(--color-base);
  border: 0.09375rem solid #9d2964;
  box-shadow: 0 0 3.75rem rgba(255, 61, 154, 0.28);
  line-height: normal;
}
.ctab_cardhead {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}
.ctab_name {
  font-weight: 600;
  font-size: 0.75rem;
}
.ctab_time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.ctab_h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ctab_b {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}

@media (max-width: 991px) {
  .ctab_split {
    flex-direction: column;
  }
  .ctab_copy {
    width: 100%;
  }
  .fa_title {
    font-size: 2.5rem;
  }
  .fa_row {
    flex-direction: column;
    gap: var(--space-2);
  }
  .fa_rowkey {
    width: 100%;
  }
}

/* ============================================================
   28. CAREERS — Figma 38:768 / 38:772 / 38:799
   ============================================================ */
.cr_head {
  background: var(--color-base);
  padding: 6.5rem 0 4.5rem;
}
.cr_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  line-height: normal;
}
.cr_title {
  width: 65rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.625rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.cr_lead {
  width: 43.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--color-muted);
}

.cr_jobs {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.cr_jobstack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: normal;
}
.cr_h2 {
  width: 51.25rem;
  max-width: 100%;
  font-size: 2.625rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.cr_job {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding: 1.625rem 1.75rem;
  border-radius: 0.875rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.cr_jobcopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}
.cr_jobtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
}
.cr_jobmeta {
  font-size: 0.875rem;
  color: var(--color-muted);
  white-space: pre;
}
.cr_apply {
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-s);
  border: 0.0625rem solid #227989;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--color-cyan);
  white-space: pre;
}
.cr_apply:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.cr_perksband {
  background: var(--color-surface);
  padding: 5.5rem 0;
}
.cr_perkstack {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  line-height: normal;
}
.cr_perkhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cr_perkrow {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.cr_perk {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-radius: 1rem;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.cr_perk.is-cyan {
  box-shadow: 0 0 2.125rem rgba(56, 232, 255, 0.12);
}
.cr_perk.is-magenta {
  box-shadow: 0 0 2.125rem rgba(255, 61, 154, 0.12);
}
.cr_perk.is-lilac {
  box-shadow: 0 0 2.125rem rgba(167, 139, 250, 0.12);
}
.cr_perkname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.cr_perktext {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}
@media (max-width: 991px) {
  .cr_perkrow {
    flex-direction: column;
  }
  .cr_job {
    flex-direction: column;
    align-items: flex-start;
  }
  .cr_title {
    font-size: 2.5rem;
  }
}

/* ============================================================
   29. SECURITY — Figma 38:1007 / 38:1011 / 38:1024 / 38:1046
   ============================================================ */
.sec_badges {
  background: var(--color-surface);
  padding: var(--space-8) 0;
}
.sec_badgerow {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.sec_badge {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 1.375rem var(--space-5);
  border-radius: 0.875rem;
  background: var(--color-base);
  line-height: normal;
}
.sec_badge.is-cyan {
  border: 0.0625rem solid #1b5866;
  box-shadow: 0 0 1.75rem rgba(56, 232, 255, 0.14);
}
.sec_badge.is-magenta {
  border: 0.0625rem solid #601c43;
  box-shadow: 0 0 1.75rem rgba(255, 61, 154, 0.14);
}
.sec_badge.is-lilac {
  border: 0.0625rem solid #423764;
  box-shadow: 0 0 1.75rem rgba(167, 139, 250, 0.14);
}
.sec_badgename {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.sec_badge.is-cyan .sec_badgename {
  color: var(--color-cyan);
}
.sec_badge.is-magenta .sec_badgename {
  color: var(--color-magenta);
}
.sec_badge.is-lilac .sec_badgename {
  color: var(--color-lilac);
}
.sec_badgemeta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.sec_rows {
  background: var(--color-base);
  padding: 5.5rem 0;
}
.sec_rowstack {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  line-height: normal;
}
.sec_rowhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sec_h2 {
  width: 51.25rem;
  max-width: 100%;
  font-size: 2.625rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.sec_row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: 1.25rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.sec_rowkey {
  width: 16.25rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.sec_rowval {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.sec_nda {
  background: var(--color-surface);
  padding: 4.5rem 0;
}
.sec_ndarow {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  line-height: normal;
}
.sec_ndacopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sec_ndatitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}
.sec_ndasub {
  font-size: 0.875rem;
  color: var(--color-muted);
}
@media (max-width: 991px) {
  .sec_badgerow {
    flex-wrap: wrap;
  }
  .sec_badge {
    flex: 1 1 44%;
  }
  .sec_row,
  .sec_ndarow {
    flex-direction: column;
    gap: var(--space-3);
  }
  .sec_rowkey {
    width: 100%;
  }
}

/* ============================================================
   30. CONTACT (router) — Figma 46:1996 / 46:2000 / 46:2029
   ============================================================ */
.co_head {
  background: var(--color-base);
  padding: 6.25rem 0 3.5rem;
}
.co_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  line-height: normal;
}
.co_title {
  width: 56.25rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.75rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.co_lead {
  width: 40rem;
  max-width: 100%;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.68;
  color: var(--color-muted);
}

.co_routes {
  background: var(--color-base);
  padding: var(--space-9) 0 var(--space-8);
}
.co_routerow {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.co_route {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-radius: 1rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  line-height: normal;
}
.co_route.is-on {
  background: var(--color-raised);
  border: 0.09375rem solid var(--color-magenta);
  box-shadow: 0 0 2.875rem rgba(255, 61, 154, 0.28);
}
.co_routehead {
  display: flex;
  align-items: center;
}
.co_routename {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.co_radio {
  margin-left: auto;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: var(--radius-pill);
  border: 0.09375rem solid var(--color-line);
}
.co_routetext {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.co_sla {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 0.0625rem solid var(--color-line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}
.co_sla.is-magenta {
  color: var(--color-magenta);
}
.co_sla.is-cyan {
  color: var(--color-cyan);
}
.co_sla.is-lilac {
  color: var(--color-lilac);
}

.co_formband {
  background: var(--color-surface);
  padding: 4.5rem 0 5.5rem;
}
.co_split {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
}
.co_form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  line-height: normal;
}
.co_formhead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.co_tag {
  padding: 0.3125rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--delta-mag-bg);
  border: 0.0625rem solid var(--delta-mag-border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-magenta);
}
.co_formtitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.co_row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.co_field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.co_label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.co_input {
  width: 100%;
  padding: 0.875rem var(--space-4);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.co_input::placeholder {
  color: var(--color-muted);
}
textarea.co_input {
  height: 6.875rem;
  resize: vertical;
  font-family: var(--font-body);
}
.co_consent {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.co_check {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 0.375rem;
  border: 0.0625rem solid var(--color-line);
  background: none;
}
.co_consenttext {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.co_fine {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
}
.co_direct {
  width: 23.75rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  line-height: normal;
}
.co_directlabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.co_card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.375rem;
  border-radius: var(--radius-m);
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.co_cardkey {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}
.co_cardkey.is-magenta {
  color: var(--color-magenta);
}
.co_cardkey.is-cyan {
  color: var(--color-cyan);
}
.co_cardkey.is-lilac {
  color: var(--color-lilac);
}
.co_cardkey.is-muted {
  color: var(--color-muted-2);
}
.co_cardval {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.co_office {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #bdbacc;
}
@media (max-width: 991px) {
  .co_routerow,
  .co_split,
  .co_row {
    flex-direction: column;
  }
  .co_direct {
    width: 100%;
  }
  .co_title {
    font-size: 2.5rem;
  }
}

/* ============================================================
   31. INTEGRATIONS (connection map) — Figma 44:1449 / 44:1453 / 44:1514
   ============================================================ */
.in_mapband {
  background: var(--color-base);
  padding: var(--space-6) 0 5.5rem;
}
.in_map {
  position: relative;
  height: 37.5rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.in_stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 82rem;
  height: 37.5rem;
  transform: translateX(-50%);
}
.in_wire {
  position: absolute;
  height: 0.09375rem;
  transform-origin: center;
}
.in_node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem var(--space-4) 0.6875rem 0.875rem;
  border-radius: var(--radius-m);
  background: var(--color-base);
  line-height: normal;
}
.in_node.is-cyan {
  border: 0.0625rem solid #248495;
  box-shadow: 0 0 1.25rem rgba(56, 232, 255, 0.22);
}
.in_node.is-lilac {
  border: 0.0625rem solid #615192;
  box-shadow: 0 0 1.25rem rgba(167, 139, 250, 0.22);
}
.in_node.is-magenta {
  border: 0.0625rem solid #91265e;
  box-shadow: 0 0 1.25rem rgba(255, 61, 154, 0.22);
}
.in_mark {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  border-radius: 0.3575rem;
}
.in_nodename {
  font-weight: 500;
  font-size: 0.75rem;
}
.in_nodekind {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.in_hub {
  position: absolute;
  left: 34.4375rem;
  top: 15.4375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 1.375rem 1.875rem;
  border-radius: var(--radius-l);
  background: var(--color-base);
  border: 0.125rem solid var(--color-magenta);
  box-shadow: 0 0 3.75rem rgba(255, 61, 154, 0.5);
  line-height: normal;
}
.in_hubbrand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
}
.in_hubmark {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.4225rem;
  background: linear-gradient(135deg, #ff3d9a 0%, rgba(56, 232, 255, 0.8) 71%);
}
.in_hubmeta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
  white-space: pre;
}

.in_tableband {
  background: var(--color-surface);
  padding: 5.5rem 0;
}
.in_tablestack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: normal;
}
.in_tablehead {
  display: flex;
  align-items: center;
}
.in_tabletitle {
  font-size: 2.125rem;
  letter-spacing: -0.02em;
}
.in_search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  width: 18.75rem;
  padding: var(--space-3) var(--space-4);
  border-radius: 0.625rem;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.in_searchicon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted-2);
}
.in_searchinput {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 0.875rem;
  color: var(--color-text);
}
.in_searchinput::placeholder {
  color: var(--color-muted);
}
.in_table {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-base);
  border: 0.0625rem solid var(--color-line);
}
.in_row {
  display: flex;
  align-items: center;
  padding: 0.9375rem 1.625rem;
  border-top: 0.0625rem solid var(--color-line);
}
.in_row.is-head {
  background: var(--color-raised);
  border-top: 0;
}
.in_cell {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: #bdbacc;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.in_cell.is-name {
  font-weight: 500;
  color: var(--color-text);
}
.in_row.is-head .in_cell {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}

@media (max-width: 991px) {
  .in_row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .in_tablehead {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .in_search {
    margin-left: 0;
  }
}

/* ============================================================
   32. CUSTOMERS — Figma 44:1885 / 44:1889 / 44:1918 / 44:1931
   ============================================================ */
.cu_wall {
  background: var(--color-surface);
  padding: 5rem 0;
}
.cu_wallgrid {
  display: flex;
  flex-direction: column;
}
.cu_wallrow {
  display: flex;
  align-items: center;
  border-top: 0.0625rem solid var(--color-line);
}
.cu_wallrow:last-child {
  border-bottom: 0.0625rem solid var(--color-line);
}
.cu_logo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.125rem 0;
  border-left: 0.0625rem solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: #736e87;
  line-height: normal;
}
.cu_logo:first-child {
  border-left: 0;
}

.cu_stats {
  background: var(--color-base);
  padding: 4.5rem 0;
}
.cu_statrow {
  display: flex;
  align-items: center;
  line-height: normal;
}
.cu_stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0 var(--space-6);
  border-left: 0.0625rem solid var(--color-line);
}
.cu_stat:first-child {
  border-left: 0;
  padding-left: 0;
  padding-right: var(--space-6);
}
.cu_statnum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
}
.cu_statnum.is-cyan {
  color: var(--color-cyan);
  text-shadow: 0 0 1.5rem rgba(56, 232, 255, 0.4);
}
.cu_statnum.is-magenta {
  color: var(--color-magenta);
  text-shadow: 0 0 1.5rem rgba(255, 61, 154, 0.4);
}
.cu_statnum.is-lilac {
  color: var(--color-lilac);
  text-shadow: 0 0 1.5rem rgba(167, 139, 250, 0.4);
}
.cu_statlabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.cu_tableband {
  background: var(--color-surface);
  padding: 5.5rem 0;
}
.cu_filters {
  margin-left: auto;
  display: flex;
  gap: 0.5625rem;
}
.cu_filter {
  padding: var(--space-2) 0.875rem;
  border-radius: var(--radius-pill);
  border: 0.0625rem solid var(--color-line);
  font-size: 0.75rem;
  color: #bdbacc;
}
.cu_filter.is-on {
  background: var(--delta-mag-bg);
  border-color: #91265e;
  font-weight: 600;
  color: var(--color-magenta);
}
.cu_pill {
  padding: var(--space-1) 0.5625rem;
  border-radius: 0.3125rem;
  background: #37132c;
  border: 0.0625rem solid #792150;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--color-magenta);
}
.cu_name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
@media (max-width: 991px) {
  .cu_wallrow {
    flex-wrap: wrap;
  }
  .cu_logo {
    flex: 1 1 50%;
  }
  .cu_statrow {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .cu_stat {
    flex: 1 1 44%;
    border-left: 0;
    padding: 0;
  }
}

/* ============================================================
   33. ABOUT (manifesto) — Figma 46:1857 / 46:1861 / 46:1887 / 46:1903
   ============================================================ */
.ab_head {
  background: var(--color-base);
  padding: 7.5rem 0 var(--space-9);
}
.ab_headinner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: normal;
}
.ab_title {
  width: 75rem;
  max-width: 100%;
  font-size: 4.875rem;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.ab_lead {
  width: 47.5rem;
  max-width: 100%;
  font-size: 1.1875rem;
  line-height: 1.76;
  color: var(--color-muted);
}

.ab_principles {
  background: var(--color-base);
  padding: var(--space-9) 0;
}
.ab_principle {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
  padding: 2.75rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.ab_num {
  width: 7.5rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75rem;
  letter-spacing: -0.03em;
  line-height: normal;
}
.ab_num.is-magenta {
  color: var(--color-magenta);
  text-shadow: 0 0 1.625rem rgba(255, 61, 154, 0.3);
}
.ab_num.is-cyan {
  color: var(--color-cyan);
  text-shadow: 0 0 1.625rem rgba(56, 232, 255, 0.3);
}
.ab_num.is-lilac {
  color: var(--color-lilac);
  text-shadow: 0 0 1.625rem rgba(167, 139, 250, 0.3);
}
.ab_pcopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  line-height: normal;
}
.ab_ptitle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.ab_ptext {
  width: 47.5rem;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.76;
  color: var(--color-muted);
}

.ab_stats {
  background: var(--color-surface);
  padding: 5rem 0;
}
.ab_statrow {
  display: flex;
  align-items: center;
  line-height: normal;
}
.ab_stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 1.75rem;
  border-left: 0.0625rem solid var(--color-line);
}
.ab_stat:first-child {
  border-left: 0;
  padding-left: 0;
  padding-right: 1.75rem;
}
.ab_statnum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem;
  letter-spacing: -0.02em;
}
.ab_statnum.is-cyan {
  color: var(--color-cyan);
  text-shadow: 0 0 1.125rem rgba(56, 232, 255, 0.35);
}
.ab_statnum.is-magenta {
  color: var(--color-magenta);
  text-shadow: 0 0 1.125rem rgba(255, 61, 154, 0.35);
}
.ab_statnum.is-lilac {
  color: var(--color-lilac);
  text-shadow: 0 0 1.125rem rgba(167, 139, 250, 0.35);
}
.ab_statlabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.ab_signed {
  background: var(--color-base);
  padding: 5.5rem 0;
}
.ab_signedstack {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  line-height: normal;
}
.ab_signedtitle {
  font-size: 2.375rem;
  letter-spacing: -0.02em;
}
.ab_names {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-3);
}
.ab_name {
  padding-right: 1.75rem;
  font-size: 1rem;
  color: #bdbacc;
}
@media (max-width: 991px) {
  .ab_title {
    font-size: 2.75rem;
  }
  .ab_principle {
    flex-direction: column;
    gap: var(--space-3);
  }
  .ab_num {
    width: auto;
    font-size: 2.75rem;
  }
  .ab_statrow {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .ab_stat {
    flex: 1 1 44%;
    border-left: 0;
    padding: 0;
  }
}

/* ============================================================
   34. BLOG — Figma 36:496 / 36:500 / 36:511 / 36:522
   ============================================================ */
.bl_filters {
  background: var(--color-base);
  padding: var(--space-9) 0 var(--space-7);
}
.bl_filterrow {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.bl_filter {
  padding: 0.5625rem var(--space-4);
  border-radius: var(--radius-pill);
  border: 0.0625rem solid var(--color-line);
  font-size: 0.75rem;
  color: #bdbacc;
}
.bl_filter.is-on {
  background: var(--delta-mag-bg);
  border-color: #91265e;
  font-weight: 600;
  color: var(--color-magenta);
}

.bl_featband {
  background: var(--color-base);
  padding: var(--space-9) 0 4.5rem;
}
.bl_featured {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  padding: 2.25rem;
  border-radius: var(--radius-l);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
  box-shadow: 0 0 2.75rem rgba(255, 61, 154, 0.12);
  line-height: normal;
}
.bl_featimg {
  flex: 1;
  min-width: 0;
  height: 18.75rem;
  border-radius: var(--radius-m);
  background: linear-gradient(
    146deg,
    rgba(255, 61, 154, 0.55) 0%,
    rgba(167, 139, 250, 0.3) 39%,
    #0b0a14 71%
  );
}
.bl_featcopy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.bl_meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.bl_cat {
  padding: var(--space-1) 0.5625rem;
  border-radius: 0.3125rem;
  background: var(--delta-mag-bg);
  border: 0.0625rem solid var(--delta-mag-border);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-magenta);
}
.bl_metatext {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
  white-space: pre;
}
.bl_feattitle {
  font-size: 2.25rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.bl_featlead {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--color-muted);
}
.bl_readlink {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-magenta);
  white-space: pre;
}

.bl_grid {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.bl_gridstack {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.bl_row {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
}
.bl_post {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  line-height: normal;
}
.bl_postimg {
  height: 11.875rem;
  border-radius: var(--radius-m);
}
.bl_postmeta {
  display: flex;
  align-items: center;
}
.bl_postcat {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}
.bl_postcat.is-magenta {
  color: var(--color-magenta);
}
.bl_postcat.is-cyan {
  color: var(--color-cyan);
}
.bl_postcat.is-lilac {
  color: var(--color-lilac);
}
.bl_postread {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted-2);
}
.bl_posttitle {
  font-size: 1.3125rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.bl_postlead {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.bl_pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.bl_page {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-s);
  border: 0.0625rem solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #bdbacc;
}
.bl_page.is-on {
  background: var(--delta-mag-bg);
  border-color: var(--delta-mag-border);
  color: var(--color-magenta);
}
@media (max-width: 991px) {
  .bl_featured,
  .bl_row {
    flex-direction: column;
  }
  .bl_filterrow {
    flex-wrap: wrap;
  }
}

/* ============================================================
   35. BLOG POST (CMS) — Figma 36:653 / 36:661 / 36:663
   ============================================================ */
.bp_head {
  background: var(--color-base);
  padding: 5.5rem 0 var(--space-7);
}
.bp_headinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  line-height: normal;
}
.bp_meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
  white-space: pre;
}
.bp_title {
  width: 58.75rem;
  max-width: 100%;
  text-align: center;
  font-size: 3.375rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.bp_author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.bp_authorname {
  font-weight: 600;
  font-size: 0.875rem;
}
.bp_authorrole {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.bp_heroband {
  background: var(--color-base);
  padding: var(--space-9) 0 var(--space-8);
}
.bp_hero {
  height: 26.25rem;
  border-radius: var(--radius-m);
  background: linear-gradient(
    157deg,
    rgba(255, 61, 154, 0.55) 0%,
    rgba(167, 139, 250, 0.3) 39%,
    #0b0a14 71%
  );
}

.bp_body {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.bp_split {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
}
.bp_toc {
  width: 15rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  line-height: normal;
}
.bp_toclabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted-2);
}
.bp_toclink {
  display: block;
  padding: 0.375rem 0 0.375rem 0.875rem;
  border-left: 0.125rem solid var(--color-line);
  font-size: 0.75rem;
  color: #bdbacc;
}
.bp_toclink.is-on {
  border-left-color: var(--color-magenta);
  font-weight: 500;
  color: var(--color-text);
}
.bp_article {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  line-height: normal;
}
.bp_standfirst {
  font-size: 1.1875rem;
  line-height: 1.72;
  color: #bdbacc;
}
.bp_h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.bp_p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-muted);
}
.bp_callout {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem var(--space-5);
  border-radius: var(--radius-m);
  background: #0f202b;
  border: 0.0625rem solid #1d6372;
}
.bp_calloutlabel {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-cyan);
}
.bp_callouttext {
  font-size: 1rem;
  line-height: 1.7;
  color: #bdbacc;
}
@media (max-width: 991px) {
  .bp_split {
    flex-direction: column;
  }
  .bp_toc {
    width: 100%;
  }
  .bp_title {
    font-size: 2.25rem;
  }
}

/* ============================================================
   36. CASE STUDY (magazine) — Figma 45:1653 / 45:1678 / 45:1680 / 45:1705
   ============================================================ */
.cs_head {
  background: var(--color-base);
  padding: 5.5rem 0 var(--space-8);
}
.cs_headrow {
  display: flex;
  gap: var(--space-8);
  align-items: flex-end;
  line-height: normal;
}
.cs_titlecol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cs_title {
  width: 47.5rem;
  max-width: 100%;
  font-size: 3.875rem;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.cs_meta {
  width: 17.5rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.cs_kv {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  border-top: 0.0625rem solid var(--color-line);
}
.cs_k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.cs_v {
  margin-left: auto;
  font-weight: 500;
  font-size: 0.75rem;
}

.cs_heroband {
  background: var(--color-base);
  padding: var(--space-9) 0 4.5rem;
}
.cs_hero {
  height: 23.75rem;
  border-radius: var(--radius-l);
  background: linear-gradient(
    154deg,
    rgba(255, 61, 154, 0.5) 0%,
    rgba(167, 139, 250, 0.3) 37%,
    #0b0a14 74%
  );
}

.cs_body {
  background: var(--color-base);
  padding: var(--space-9) 0 5.5rem;
}
.cs_split {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
}
.cs_marginstats {
  width: 15rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  line-height: normal;
}
.cs_stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 1.25rem;
  border-top: 0.125rem solid;
}
.cs_stat.is-magenta {
  border-color: #9d2964;
}
.cs_stat.is-cyan {
  border-color: #268fa1;
}
.cs_stat.is-lilac {
  border-color: #69579e;
}
.cs_statnum {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
}
.cs_stat.is-magenta .cs_statnum {
  color: var(--color-magenta);
  text-shadow: 0 0 1.25rem rgba(255, 61, 154, 0.35);
}
.cs_stat.is-cyan .cs_statnum {
  color: var(--color-cyan);
  text-shadow: 0 0 1.25rem rgba(56, 232, 255, 0.35);
}
.cs_stat.is-lilac .cs_statnum {
  color: var(--color-lilac);
  text-shadow: 0 0 1.25rem rgba(167, 139, 250, 0.35);
}
.cs_statlabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.cs_cols {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}
.cs_col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  line-height: normal;
}
.cs_h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4375rem;
  letter-spacing: -0.01em;
}
.cs_p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.cs_pull {
  background: var(--color-surface);
  padding: 4.5rem 0;
}
.cs_pullinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  line-height: normal;
}
.cs_quote {
  width: 62.5rem;
  max-width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.125rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
}
.cs_attr {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-magenta);
  white-space: pre;
}
@media (max-width: 991px) {
  .cs_headrow,
  .cs_split,
  .cs_cols {
    flex-direction: column;
    gap: var(--space-6);
  }
  .cs_meta,
  .cs_marginstats {
    width: 100%;
  }
  .cs_title {
    font-size: 2.5rem;
  }
  .cs_quote {
    font-size: 1.5rem;
  }
}

/* ============================================================
   37. STYLE GUIDE — Figma 39:972 / 39:976 / 39:1008 / 39:1039 / 39:1069
   ============================================================ */
.sg_head {
  background: var(--color-base);
  padding: 5.5rem 0 3.5rem;
}
.sg_headinner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  line-height: normal;
}
.sg_title {
  font-size: 3rem;
  letter-spacing: -0.03em;
}
.sg_lead {
  width: 47.5rem;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.sg_band {
  padding: 4.5rem 0;
}
.sg_band.is-surface {
  background: var(--color-surface);
}
.sg_band.is-base {
  background: var(--color-base);
}
.sg_stack {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  line-height: normal;
}
.sg_stack.is-tight {
  gap: var(--space-5);
}
.sg_label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--color-cyan);
}
.sg_typerow {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 0.0625rem solid var(--color-line);
}
.sg_typerow.is-top {
  align-items: flex-start;
}
.sg_tag {
  width: 3.75rem;
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
}
.sg_sample {
  flex: 1;
  min-width: 0;
}
.sg_size {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-muted-2);
}
.sg_quote {
  padding: 0.375rem 0 0.375rem 1.75rem;
  border-left: 0.1875rem solid var(--color-magenta);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.sg_sublabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--color-muted-2);
}
.sg_list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.sg_li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.68;
  color: #bdbacc;
}
.sg_num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-cyan);
}
.sg_links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}
.sg_swatches {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.sg_swatch {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sg_box {
  height: 4.5rem;
  border-radius: 0.625rem;
  border: 0.0625rem solid var(--color-line);
}
.sg_swatchname {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: #bdbacc;
}
.sg_buttons {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.button.is-disabled {
  background: #22202a;
  border-color: transparent;
  color: #bdbacc;
  opacity: 0.5;
  font-weight: 500;
  pointer-events: none;
}
.sg_pill {
  padding: 0.6875rem 1.375rem;
  border-radius: var(--radius-pill);
  background: #13323e;
  border: 0.0625rem solid #227989;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-cyan);
}
.sg_form {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.sg_field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sg_fieldlabel {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
}
.sg_input {
  width: 100%;
  padding: 0.875rem var(--space-4);
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-line);
}
.sg_input::placeholder {
  color: var(--color-muted);
}
.sg_input.is-focus {
  border: 0.09375rem solid #268fa1;
  box-shadow: 0 0 1rem rgba(56, 232, 255, 0.25);
}
.sg_input.is-error {
  border: 0.09375rem solid #9d2964;
  box-shadow: 0 0 1rem rgba(255, 61, 154, 0.25);
}
@media (max-width: 991px) {
  .sg_typerow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .sg_tag {
    width: auto;
  }
  .sg_swatches {
    flex-wrap: wrap;
  }
  .sg_swatch {
    flex: 1 1 28%;
  }
  .sg_form {
    flex-direction: column;
  }
  .sg_title {
    font-size: 2.125rem;
  }
}


/* ============================================================
   RESPONSIVE — fixes found by measuring, not by eyeballing
   Each rule below closes a specific overflow that a per-element audit
   (scrollWidth vs clientWidth, every element, 4 viewports) actually reported.
   ============================================================ */

/* The hero mockup is drawn at its native 1180x676 and is `flex: none`, so it never
   shrank — and because a flex item defaults to min-width:auto, that 73.75rem propagated
   up and made the whole page wider than the screen on every phone.
   It is scaled rather than reflowed on purpose: the dashboard inside has fixed column
   widths, so reflowing it would break the composition it exists to show. The frame
   clips, so the scale steps below only ever crop a few pixels at the edges. */
.mock_frame { overflow: hidden; }


@media (max-width: 991px) {
  .mock_window { transform: scale(0.58); margin-bottom: -17.75rem; }
  /* .ab_principle turns into a column here, but it kept align-items:flex-start —
     in a column that stops children from stretching, so .ab_pcopy collapsed to the
     47.5rem max-content width of its paragraph and punched out of the page. */
  .ab_principle { align-items: stretch; }
}
@media (max-width: 767px) {
  .mock_window { transform: scale(0.42); margin-bottom: -24.5rem; }
}
@media (max-width: 479px) {
  .mock_window { transform: scale(0.3); margin-bottom: -29.5625rem; }
}

/* The annotated product canvas holds a 1312px stage the same way the hero holds its
   scene, but unlike .in_map it never clipped, so the stage widened its ancestors. */
.pd_canvas { overflow: hidden; }

/* The install snippet is mono text with white-space:pre-wrap, which wraps at spaces but
   will not break `data-key="kw_live_8f2a…"`. That single unbreakable token was hanging
   1.625rem out of every step row at every viewport — a constant, which is what gave it away. */
.step_code { overflow-wrap: anywhere; }

/* .steps_timeline is a fixed 620px column with flex:none, so it stopped shrinking well
   before the phone breakpoints and pushed the whole row out. */
.steps_timeline { max-width: 100%; }

@media (max-width: 991px) {
  .steps_split { flex-direction: column; gap: 2.5rem; }
  .steps_timeline { width: 100%; }
}

/* Six wordmarks cannot share one row on a phone: each is flex:1 with min-width:0, so
   they were allowed to shrink but the words themselves never break. Let the row wrap. */
@media (max-width: 767px) {
  .logos_row { flex-wrap: wrap; justify-content: center; gap: 0.875rem 1.75rem; }
  .logos_word { flex: 0 1 auto; }
}


/* ============================================================
   WEBFLOW BREAKPOINTS
   Webflow only exposes max-width at 991 / 767 / 479. Above that its breakpoints are
   min-width (1280 / 1440 / 1920), so the old max-width:1360/1300/1200 rules could not
   be rebuilt in the Designer at all. They are inverted here: the narrow, stacked layout
   is now the base, and the wide absolute-canvas layout is switched on at min-width.
   1440 is chosen deliberately — the annotated canvases are 82rem plus page margin, so
   they only fit from 1440 up, and this reproduces the previous behaviour exactly.
   ============================================================ */

/* --- base is now the stacked layout (previously a max-width 1360 query) --- */
.pd_canvas { height: auto; }
.pd_stage { position: static; width: 100%; transform: none; height: auto; }
.pd_shell { position: static; width: 100%; height: 37.5rem; }
.pd_callout, .pd_leader, .pd_pin { display: none; }

.fa_canvas { height: auto; }
.fa_stage { position: static; width: 100%; transform: none; height: auto; }
.fa_card { position: static; width: 100%; }
.fa_canvas .pd_callout, .fa_leader, .fa_canvas .pd_pin { display: none; }

.in_map { height: auto; padding: var(--space-5); }
.in_stage { position: static; width: 100%; transform: none; height: auto; }
.in_wire { display: none; }
.in_node, .in_hub { position: static; margin-bottom: 0.625rem; }

/* the table of contents only has room from 1280 up */
.docs_toc { display: none; }

/* the 1180px mockup only fits at full size from 1440 up */
.mock_window { transform: scale(0.78); transform-origin: top center; margin-bottom: -9.3125rem; }

/* --- wide layouts switch on at Webflow's min-width breakpoints --- */
@media (min-width: 1280px) {
  .docs_toc { display: flex; }
}

@media (min-width: 1440px) {
  .pd_canvas { height: 45rem; }
  .pd_stage { position: absolute; left: 50%; top: 0; width: 82rem; height: 45rem; transform: translateX(-50%); }
  .pd_shell { position: absolute; left: 13.5rem; top: 3.75rem; width: 55rem; height: 37.5rem; }
  .pd_callout { display: flex; }
  .pd_leader, .pd_pin { display: block; }
  .pd_pin { display: flex; }

  .fa_canvas { height: 41.25rem; }
  .fa_stage { position: absolute; left: 50%; top: 0; width: 82rem; height: 41.25rem; transform: translateX(-50%); }
  .fa_card { position: absolute; left: 23.5rem; top: 7.75rem; width: 35rem; }
  .fa_canvas .pd_callout { display: flex; }
  .fa_leader { display: block; }
  .fa_canvas .pd_pin { display: flex; }

  .in_map { height: 37.5rem; padding: 0; }
  .in_stage { position: absolute; left: 50%; top: 0; width: 82rem; height: 37.5rem; transform: translateX(-50%); }
  .in_wire { display: block; }
  .in_node, .in_hub { position: absolute; margin-bottom: 0; }

  .mock_window { transform: none; margin-bottom: 0; }
}

/* --- phone/tablet steps restated last so they win over the new base --- */
@media (max-width: 991px) { .mock_window { transform: scale(0.58); margin-bottom: -17.75rem; } }
@media (max-width: 767px) { .mock_window { transform: scale(0.42); margin-bottom: -24.5rem; } }
@media (max-width: 479px) { .mock_window { transform: scale(0.3);  margin-bottom: -29.5625rem; } }


/* ============================================================
   MOBILE — measured on real viewport widths
   Chrome headless clamps its window to 500px, so an earlier pass that thought it was
   testing 390px was really testing 500px and never exercised the phone breakpoint at
   all. Everything below was found by rendering inside a sized iframe instead.
   ============================================================ */

@media (max-width: 991px) {
  /* The hero doodles (arrow, note, squiggle) are pinned to absolute coordinates in the
     1440px hero. Once the title rewraps, the squiggle lands across "Know by" and reads
     as a strikethrough. They are annotations for the wide composition only. */
  .hero_doodles, .hero_squiggle, .hero_arrow, .hero_note { display: none; }

  /* Title and its right-aligned meta shared one row; the meta is nowrap mono, so it ran
     into the heading instead of moving. Same shape in several section headers. */
  .wall_header, .alertmock_head, .cl_head, .cs_head { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
  .wall_rating, .cl_date, .cs_v, .steps_meta { margin-left: 0; white-space: pre-wrap; }

  /* The sparkline and its threshold rule are fixed 340px assets inside a fluid card. */
  .stage_spark, .stage_sparkimg, .stage_thresholdline { width: 100%; max-width: 21.25rem; }

  /* Footer: three link columns and the form were still trying to sit in a row. */
  .footer_links { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem 1.25rem; }
  .footer_form { width: 100%; }
  .footer_news { align-items: stretch; gap: var(--space-5); }
  .footer_top { gap: 2.5rem; }
}

@media (max-width: 767px) {
  .hero_title { font-size: 2.75rem; }
  .hero_sub { font-size: 1rem; }

  /* Statistics were 2-up at 44% each, which left the numbers squeezed against their
     labels. One per row, and the divider moves from the left edge to the top. */
  .metrics_row { flex-direction: column; align-items: stretch; padding: 2.5rem 0; }
  .metrics_item { flex: 1 1 100%; padding: 1.125rem 0; border-left: 0; border-top: 0.0625rem solid var(--color-line); }
  .metrics_item:first-child { border-top: 0; padding-top: 0; }
  .ab_statrow { flex-direction: column; }
  .ab_stat { flex: 1 1 100%; }

  .footer_links { grid-template-columns: repeat(2, 1fr); }

  /* Centred headings look deliberate at desktop width but ragged over three or four
     wrapped lines on a phone. Everything reads from the same left edge instead. */
  .sectionhead, .sectionhead_title, .sectionhead_eyebrow,
  .ab_headinner, .pd_headinner, .fa_headinner, .cr_headinner,
  .co_headinner, .prc_headinner, .bp_headinner, .util_headinner,
  .sg_headinner, .pricing_head, .cta_content, .hero_content {
    align-items: flex-start;
    text-align: left;
  }
  .hero_title, .cta_title, .pd_title, .fa_title, .prc_title,
  .ab_title, .co_title, .cr_title, .util_title, .pricing_lead, .hero_sub { text-align: left; }
  .hero_buttons { width: 100%; }
  .hero_buttons .button { flex: 1 1 auto; }
}

@media (max-width: 479px) {
  .hero_title { font-size: 2.25rem; }
  .footer_links { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero_buttons { flex-direction: column; align-items: stretch; }
}


/* ============================================================
   MOBILE NAVIGATION
   The markup carried no menu button at all below the tablet breakpoint — the link list
   was simply set to display:none, so on a phone the site had no navigation whatsoever.
   ============================================================ */
.nav_toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.625rem; height: 2.625rem;
  margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav_burger { display: block; width: 1.375rem; height: 0.875rem; position: relative; }
.nav_burger i {
  position: absolute; left: 0; width: 100%; height: 0.09375rem; border-radius: 0.125rem;
  background: var(--color-text);
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s linear;
}
.nav_burger i:nth-child(1) { top: 0; }
.nav_burger i:nth-child(2) { top: 0.390625rem; }
.nav_burger i:nth-child(3) { top: 0.78125rem; }
/* The bars become the close cross, so the control never changes meaning mid-tap. */
.nav_toggle.is-open .nav_burger i:nth-child(1) { transform: translateY(0.390625rem) rotate(45deg); }
.nav_toggle.is-open .nav_burger i:nth-child(2) { opacity: 0; }
.nav_toggle.is-open .nav_burger i:nth-child(3) { transform: translateY(-0.390625rem) rotate(-45deg); }

.nav_scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(11,10,20,.72);
  opacity: 0; visibility: hidden;
  transition: opacity .3s linear, visibility .3s linear;
}

@media (max-width: 991px) {
  .nav_toggle { display: inline-flex; }
  .nav_scrim.is-open { opacity: 1; visibility: visible; }

  .nav_menu {
    display: flex !important;          /* beats the base rule that hid the list outright */
    position: fixed;
    top: 0; bottom: 0;
    right: 0;
    z-index: 70;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: var(--space-9) var(--margin-global) 2.5rem;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-base);
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.16,1,.3,1);
  }
  .nav_menu.is-open { transform: translateX(0); }

  .nav_menu li { width: 100%; }
  .nav_menu a, .nav_menu .nav_link {
    display: block;
    width: 100%;
    padding: 1.125rem 0;
    border-bottom: 0.0625rem solid var(--color-line);
    font-size: 1.25rem;
  }
}

/* The cursor blinks on its own — a JS timer for this would run forever for no reason. */
.term_cursor { animation: term-blink 1.05s steps(1, end) infinite; }
@keyframes term-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term_cursor { animation: none; } }

/* KPI-479-FIX
   The KPI number and its delta sit in a flex row whose children default to min-width:auto,
   so on the narrowest phones they refused to shrink and pushed the card open. */
@media (max-width: 479px) {
  .mock_kpival, .pd_kpirow { flex-wrap: wrap; }
  .mock_kpinum, .mock_kpidelta, .pd_kpinum { min-width: 0; overflow-wrap: anywhere; }
  .pd_kpi { min-width: 0; }
}

/* PHONE-479-TAIL
   Last two overflows on the narrowest phones. The sparkline card keeps a 340px cap that
   is wider than the card itself once the page margin drops to 20px, and the step blocks
   still hold their desktop min-content width. */
@media (max-width: 479px) {
  .stage_spark, .stage_sparkimg, .stage_thresholdline { max-width: 100%; }
  .stage_breach { left: auto; right: 0.5rem; }
  .steps_split, .steps_timeline, .step_item, .step_copy, .step_visual { min-width: 0; max-width: 100%; }
  .step_visual { overflow-x: auto; }
}

/* STEPS-PREVIEW-FIX
   When .steps_split stacks into a column only .steps_timeline was told to fill the width.
   Its sibling kept its desktop width and hung 34px out of the section on a phone. */
@media (max-width: 991px) {
  .steps_preview { width: 100%; max-width: 100%; min-width: 0; }
}

/* PREVIEW-KPI-FIX
   The preview panel's KPI rows and the alert mock's title bar are flex rows whose items
   default to min-width:auto — they would not shrink below their text on a 22.5rem screen.
   Letting them wrap is the only honest option: shrinking the type further would put it
   under the 0.625rem floor the type scale sets. */
@media (max-width: 479px) {
  .preview_kpis, .preview_kv, .preview_k, .alertmock_bar, .alertmock_head { flex-wrap: wrap; min-width: 0; }
  .preview_kpis > *, .preview_kv > *, .alertmock_bar > * { min-width: 0; }
  .preview_knum, .preview_kdelta { overflow-wrap: anywhere; }
}

/* CTA-TITLE-BREAK
   On the narrowest phones the CTA heading holds one word longer than the column. Breaking inside a
   word is ugly, but it is the lesser evil against text leaving the screen. */
@media (max-width: 479px) {
  .cta_title, .hero_title, .term_title { overflow-wrap: anywhere; }
  .mock_toolbar { flex-wrap: wrap; }
}