/* ============================================
   Future Proof — Complete Theme CSS (v1.3.0)
   tokens + components + WordPress block overrides
   ============================================ */

/* ============================================
   Future Proof — Design Tokens
   Single source of truth for colors, type, spacing.
   ============================================ */

:root {
  /* ---------- Color: Surface ---------- */
  --color-cream: #FAF9F5;          /* warm off-white, default bg */
  --color-bone: #F2EFE7;           /* secondary surface */
  --color-white: #FFFFFF;          /* card surface */
  --color-ink: #0E1117;            /* near-black text */
  --color-ink-2: #2B313F;          /* darker secondary text */
  --color-ink-3: #4A5163;          /* tertiary text */
  --color-ink-4: #8A92A6;          /* muted */
  --color-line: #E5E1D8;           /* hairlines */
  --color-line-strong: #D4CFC1;

  /* ---------- Color: Brand ---------- */
  --color-indigo: #5747E8;         /* primary AI brand */
  --color-indigo-dark: #3D2FCC;
  --color-indigo-light: #E8E4FB;
  --color-violet: #1E1B4B;         /* hero gradient anchor */
  --color-violet-deep: #0A0E27;

  /* ---------- Color: Accents ---------- */
  --color-emerald: #00B97A;        /* check, success, growth */
  --color-emerald-dim: #008C5C;
  --color-coral: #FF6B5B;          /* warmth, human, parents */
  --color-amber: #F59E0B;          /* attention, schools */
  --color-cyan: #06B6D4;           /* AI live signal */

  /* ---------- Color: States ---------- */
  --color-yes: var(--color-emerald);
  --color-no: var(--color-ink-4);
  --color-partial: var(--color-amber);

  /* ---------- Typography ---------- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Fluid type scale: clamp(min, preferred, max) */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-3xl: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  --fs-4xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);
  --fs-display: clamp(3rem, 2rem + 6vw, 7rem);

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-display: -0.04em;
  --tracking-wide: 0.05em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing (8pt grid) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-14: 8rem;
  --space-16: 10rem;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 960px;
  --container-text: 720px;
  --gutter-x: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadow / Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 17, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 17, 23, 0.06), 0 1px 2px rgba(14, 17, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 17, 23, 0.06), 0 2px 4px rgba(14, 17, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(14, 17, 23, 0.08), 0 4px 8px rgba(14, 17, 23, 0.04);
  --shadow-xl: 0 24px 64px rgba(14, 17, 23, 0.10), 0 8px 16px rgba(14, 17, 23, 0.06);
  --shadow-glow: 0 0 0 1px rgba(87, 71, 232, 0.15), 0 12px 40px rgba(87, 71, 232, 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --dur-slower: 700ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-modal: 1000;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   Future Proof — Main Styles
   Loads after tokens.css
   ============================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter-x); }
.container-text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter-x); }

section { padding-block: clamp(var(--space-10), 8vw, var(--space-14)); }
section + section { border-top: 1px solid transparent; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-indigo);
  margin-bottom: var(--space-4);
}
.eyebrow--muted { color: var(--color-ink-3); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-3);
  max-width: 60ch;
}
em.brand { font-style: italic; color: var(--color-indigo); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--color-ink);
  color: var(--color-cream);
}
.btn--primary:hover {
  background: var(--color-indigo);
  box-shadow: var(--shadow-glow);
}
.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.btn--secondary:hover {
  border-color: var(--color-ink);
}
.btn--ghost {
  color: var(--color-ink);
  padding: 0.5rem 0.75rem;
}
.btn--ghost:hover { color: var(--color-indigo); }
.btn--lg { padding: 1.125rem 2rem; font-size: var(--fs-base); }
.btn .arrow {
  transition: transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--color-cream) 85%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-color: var(--color-line); }
/* Constantly-running spectral hairline under the sticky header */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-indigo) 22%,
    var(--color-cyan) 44%,
    var(--color-emerald) 64%,
    var(--color-indigo) 84%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.4;
  animation: footerSheen 9s linear infinite;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 0.8; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-mark a, .brand-mark .wp-block-site-title { white-space: nowrap; }
.brand-mark__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-indigo);
  box-shadow: 0 0 12px rgba(87, 71, 232, 0.6);
  animation: footerDotPulse 2.4s var(--ease-in-out) infinite;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav__links {
  display: none;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 900px) { .site-nav__links { display: flex; } }
.site-nav__link {
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--dur-base) var(--ease-out);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-indigo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__link:hover { color: var(--color-ink); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__cta { display: flex; gap: var(--space-3); align-items: center; flex-shrink: 0; }
/* Keep the header CTAs on one row, vertically centred (WP buttons default to wrap) */
.site-nav__cta .wp-block-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.site-nav__cta .wp-block-button { margin: 0; }

/* ---------- Mobile nav toggle (hamburger) ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--color-indigo); background: rgba(87, 71, 232, 0.06); }
.nav-toggle__bar {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-header.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.is-nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-6);
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 18px 40px rgba(15, 15, 20, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
  .site-header.is-nav-open .site-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav__links { display: flex; flex-direction: column; gap: 0.25rem; }
  .site-nav__link { padding: 0.65rem 0; font-size: var(--fs-md); }
  .site-nav__cta { flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; }
  .site-nav__cta .wp-block-buttons { flex-direction: column; width: 100%; gap: var(--space-3); }
  .site-nav__cta .wp-block-button { width: 100%; }
  .site-nav__cta .wp-block-button__link { display: block; width: 100%; text-align: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(var(--space-8), 6vw, var(--space-12));
  padding-bottom: clamp(var(--space-10), 8vw, var(--space-14));
  background: radial-gradient(ellipse at top, rgba(87, 71, 232, 0.06) 0%, transparent 50%),
              linear-gradient(180deg, var(--color-cream) 0%, var(--color-bone) 100%);
}
.hero__live-ticker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-2);
  margin-bottom: var(--space-7);
  box-shadow: var(--shadow-xs);
}
.live-dot {
  width: 8px; height: 8px;
  background: var(--color-emerald);
  border-radius: 50%;
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: inherit;
  border-radius: 50%;
  opacity: 0.4;
  animation: pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(2); opacity: 0; }
}
.hero__title {
  max-width: 16ch;
  margin-bottom: var(--space-6);
}
.hero__sub {
  max-width: 56ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-ink-3);
  margin-bottom: var(--space-8);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-9);
}
.hero__audiences {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.hero__audiences-label { color: var(--color-ink-4); }
.hero__audiences li {
  list-style: none;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-white);
}

/* Background gradient mesh — animated */
.hero__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
  filter: blur(80px);
}
.hero__mesh::before, .hero__mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: drift 18s var(--ease-in-out) infinite;
}
.hero__mesh::before {
  top: -10%; left: 10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(87, 71, 232, 0.45), transparent 70%);
}
.hero__mesh::after {
  bottom: -20%; right: 5%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0, 185, 122, 0.30), transparent 70%);
  animation-delay: -8s;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -20px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.95); }
}
.hero > .container { position: relative; z-index: 1; }

/* ---------- Bento (AI capabilities) ---------- */
.bento {
  background: var(--color-cream);
}
.bento__header {
  margin-bottom: var(--space-9);
  max-width: 60ch;
}
.bento__header p {
  font-size: var(--fs-md);
  color: var(--color-ink-3);
  margin-top: var(--space-4);
  line-height: var(--lh-relaxed);
}
.bento__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.bento__tile {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 280px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  grid-column: span 2;
}
.bento__tile:hover {
  border-color: var(--color-indigo);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.bento__tile--wide { grid-column: span 3; }
.bento__tile--tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento__grid { grid-template-columns: 1fr 1fr; }
  .bento__tile, .bento__tile--wide { grid-column: span 1; }
}
@media (max-width: 600px) {
  .bento__grid { grid-template-columns: 1fr; }
  .bento__tile { grid-column: span 1; }
}
.bento__tile-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-indigo);
}
.bento__tile-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--color-indigo);
  border-radius: 50%;
}
.bento__tile h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.bento__tile p {
  color: var(--color-ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-top: auto;
}
.bento__viz {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-3) 0;
  min-height: 80px;
}

/* ---------- Philosophy beat ---------- */
.philosophy {
  background: var(--color-bone);
  padding-block: clamp(var(--space-12), 12vw, var(--space-16));
}
.philosophy blockquote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  color: var(--color-ink-2);
}
.philosophy blockquote strong {
  font-weight: 400;
  color: var(--color-ink);
  display: block;
  margin-top: var(--space-5);
}
.philosophy__compare {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
  max-width: 700px;
}
.philosophy__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  gap: var(--space-5);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line-strong);
}
.philosophy__row:last-child { border-bottom: 1px solid var(--color-line-strong); }
.philosophy__row-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-4);
  padding-top: 0.25rem;
}
.philosophy__row em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--color-ink-2);
}
.philosophy__row--ours em { color: var(--color-indigo); }

/* ---------- Outcomes ---------- */
.outcomes {
  background: var(--color-cream);
}
.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-line-strong);
}
.outcome {
  padding: var(--space-8) var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--color-line-strong);
  border-right: 1px solid var(--color-line-strong);
}
.outcome:last-child { border-right: 0; }
@media (max-width: 700px) { .outcome { border-right: 0; } }
.outcome__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.outcome__caption {
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
  line-height: var(--lh-snug);
  max-width: 26ch;
}

/* ---------- Comparison teaser ---------- */
.compare-teaser {
  background: var(--color-bone);
}
.compare-teaser__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.compare-teaser__head p {
  color: var(--color-ink-3);
  font-size: var(--fs-md);
  max-width: 40ch;
}

.compare-table {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm);
}
.compare-table table { width: 100%; }
.compare-table th, .compare-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.compare-table thead th {
  background: var(--color-bone);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-3);
  font-weight: 500;
}
.compare-table thead th.is-us {
  background: var(--color-indigo-light);
  color: var(--color-indigo-dark);
}
.compare-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.compare-table tbody tr:hover { background: var(--color-bone); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td.is-us { background: rgba(232, 228, 251, 0.4); font-weight: 500; }

.mark-yes, .mark-no, .mark-partial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}
.mark-yes { background: var(--color-emerald); color: white; }
.mark-no { background: transparent; color: var(--color-ink-4); }
.mark-partial { background: var(--color-amber); color: white; }
.mark-no::before { content: '—'; }

.compare-teaser__footer {
  margin-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.compare-teaser__source {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-ink-4);
}

/* Vs-global-players battlecard + verdict (shared by home + compare) */
.global-compare { background: var(--color-cream); }
.compare-verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 800px) { .compare-verdict { grid-template-columns: 1fr; } }
.compare-verdict__stat {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-indigo);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-5) var(--space-6);
}
.compare-verdict__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-indigo);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.compare-verdict__stat span { color: var(--color-ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.compare-price-row th, .compare-price-row td {
  border-top: 2px solid var(--color-line);
  padding-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.compare-price-row .is-us strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-indigo); }

/* ---------- Audience switcher ---------- */
.audiences { background: var(--color-cream); }
.audiences__head { margin-bottom: var(--space-9); }
.audiences__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.audience-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.audience-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--accent, var(--color-indigo)) 200%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.audience-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, var(--color-indigo));
  box-shadow: var(--shadow-lg);
}
.audience-card:hover::before { opacity: 0.18; }
.audience-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-bg, var(--color-indigo-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, var(--color-indigo));
  margin-bottom: var(--space-4);
}
.audience-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.audience-card p {
  color: var(--color-ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-5);
}
.audience-card__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent, var(--color-indigo));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.audience-card--workforce { --accent: var(--color-indigo); --accent-bg: var(--color-indigo-light); }
.audience-card--schools   { --accent: var(--color-amber);  --accent-bg: rgba(245, 158, 11, 0.12); }
.audience-card--govt      { --accent: var(--color-emerald);--accent-bg: rgba(0, 185, 122, 0.10); }
.audience-card--parents   { --accent: var(--color-coral);  --accent-bg: rgba(255, 107, 91, 0.10); }

/* ---------- Demo tabs ---------- */
.demo { background: var(--color-bone); }
.demo__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-7); }
.demo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.demo__tab {
  padding: 0.625rem 1.125rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink-2);
  border: 1px solid var(--color-line);
  transition: all var(--dur-base) var(--ease-out);
}
.demo__tab:hover { border-color: var(--color-ink); }
.demo__tab.is-active {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}
.demo__viewport {
  background: var(--color-violet-deep);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  min-height: 480px;
  position: relative;
  overflow: hidden;
  color: var(--color-cream);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(87, 71, 232, 0.25), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 185, 122, 0.15), transparent 50%);
}
.demo__panel-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  max-width: 30ch;
  color: rgba(250, 249, 245, 0.9);
}
.demo__panel-meta {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(250, 249, 245, 0.5);
}

/* ---------- Customer proof ---------- */
.customers { background: var(--color-cream); }
.customers__head { margin-bottom: var(--space-8); }
.customers__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-line);
  margin-bottom: var(--space-9);
  opacity: 0.7;
}
.customers__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-2);
}
.customers__cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 800px) { .customers__cases { grid-template-columns: 1fr; } }
.case {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.case__quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.case__quote::before { content: '"'; color: var(--color-indigo); margin-right: 2px; }
.case__quote::after  { content: '"'; color: var(--color-indigo); margin-left: 2px; }
.case__attrib {
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
}
.case__metrics {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.case__metric {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-4);
}
.case__metric strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 2px;
}

/* ---------- Security / Trust ---------- */
.trust { background: var(--color-bone); }
.trust__head { margin-bottom: var(--space-8); max-width: 50ch; }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.trust-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.trust-card svg {
  width: 24px; height: 24px;
  color: var(--color-indigo);
}
.trust-card h4 { font-size: var(--fs-base); font-weight: 600; }
.trust-card p { font-size: var(--fs-sm); color: var(--color-ink-3); line-height: var(--lh-snug); }
.trust__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--color-line-strong);
}
.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  padding: 0.375rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
}
.badge--roadmap { opacity: 0.55; }

/* ---------- Integrations strip ---------- */
.integrations {
  background: var(--color-cream);
  padding-block: var(--space-9);
  text-align: center;
}
.integrations h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-5);
}
.integrations__cats {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-ink-3);
  margin-bottom: var(--space-6);
}
.integrations__cats span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-4);
  color: var(--color-ink-4);
}
.integrations__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-7);
  padding-block: var(--space-5);
  opacity: 0.65;
}
.integrations__logos span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-ink-2);
}
.integrations__note {
  font-size: var(--fs-sm);
  color: var(--color-ink-4);
  font-style: italic;
  margin-top: var(--space-5);
}

/* ---------- Final CTA band ---------- */
.final-cta {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(87, 71, 232, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 185, 122, 0.20), transparent 60%),
    linear-gradient(135deg, var(--color-violet-deep), var(--color-violet));
  color: var(--color-cream);
  padding-block: clamp(var(--space-12), 10vw, var(--space-14));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta h2 {
  color: var(--color-cream);
  max-width: 18ch;
  margin: 0 auto var(--space-5);
}
.final-cta p {
  font-size: var(--fs-md);
  color: rgba(250, 249, 245, 0.7);
  max-width: 50ch;
  margin: 0 auto var(--space-7);
}
.final-cta__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
/* Inverted primary button for dark sections — !important defeats the .btn--primary
   gradient (which is also !important) so the text isn't dark-on-dark. */
.final-cta .btn--primary,
.featured .btn--primary {
  background: var(--color-cream) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-lg) !important;
}
.final-cta .btn--primary:hover,
.featured .btn--primary:hover { background: #ffffff !important; color: var(--color-ink) !important; }
.final-cta .btn--secondary {
  color: var(--color-cream);
  border-color: rgba(250, 249, 245, 0.3);
}
.final-cta .btn--secondary:hover { border-color: var(--color-cream); }
.final-cta__trust {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: rgba(250, 249, 245, 0.55);
}
.final-cta__trust span:not(:last-child)::after {
  content: '·';
  margin: 0 var(--space-3);
  color: rgba(250, 249, 245, 0.3);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--color-ink);
  color: rgba(250, 249, 245, 0.7);
  padding-block: var(--space-10) var(--space-7);
}
/* Animated top accent line — a slow spectral sheen across the seam */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-indigo) 18%,
    var(--color-cyan) 38%,
    var(--color-emerald) 58%,
    var(--color-indigo) 80%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.85;
  animation: footerSheen 9s linear infinite;
}
@keyframes footerSheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--space-7) var(--space-5);
  margin-bottom: var(--space-9);
}
@media (max-width: 1000px) { .footer__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr 1fr; } }
/* Let footer rows use the full site container width — WP's constrained layout was
   clamping them to the ~720px content-size, squeezing columns and wrapping labels. */
.wp-block-group.site-footer.is-layout-constrained > * {
  max-width: var(--container-max) !important;
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.footer__intro h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  margin-bottom: var(--space-3);
}
/* Pulsing brand dot, echoing the header mark */
.footer__intro h3::before {
  content: '';
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-indigo);
  animation: footerDotPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes footerDotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(87, 71, 232, 0.7), 0 0 0 0 rgba(87, 71, 232, 0.5); }
  50%      { box-shadow: 0 0 8px rgba(87, 71, 232, 0.7), 0 0 0 6px rgba(87, 71, 232, 0); }
}
.footer__intro p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); max-width: 30ch; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 249, 245, 0.5);
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer__col a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  color: rgba(250, 249, 245, 0.7);
  transition: color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--color-indigo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.footer__col a:hover { color: var(--color-cream); transform: translateX(3px); }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__portal-bar {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(250, 249, 245, 0.08);
  border-bottom: 1px solid rgba(250, 249, 245, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__portal-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(250, 249, 245, 0.5);
}
.footer__portals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.footer__portals a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: rgba(250, 249, 245, 0.85);
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(250, 249, 245, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(250, 249, 245, 0.03);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.footer__portals a:hover {
  color: var(--color-cream);
  transform: translateY(-2px);
  border-color: rgba(87, 71, 232, 0.6);
  background: rgba(87, 71, 232, 0.12);
  box-shadow: 0 6px 18px rgba(87, 71, 232, 0.28);
}
.footer__lang {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(250, 249, 245, 0.6);
}
/* Compare-vs-players link bar */
.footer__compare-bar {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(250, 249, 245, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__compare-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: rgba(250, 249, 245, 0.5);
  white-space: nowrap;
}
.footer__compare-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__compare-links a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: rgba(250, 249, 245, 0.78);
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(250, 249, 245, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(250, 249, 245, 0.03);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.footer__compare-links a:hover {
  color: var(--color-cream);
  transform: translateY(-2px);
  border-color: rgba(87, 71, 232, 0.6);
  background: rgba(87, 71, 232, 0.12);
  box-shadow: 0 6px 18px rgba(87, 71, 232, 0.28);
}
.footer__compare-all {
  border-color: rgba(87, 71, 232, 0.5) !important;
  background: rgba(87, 71, 232, 0.14) !important;
  color: var(--color-cream) !important;
}
.footer__bottom {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(250, 249, 245, 0.5);
}
.footer__bottom ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-5);
}
.footer__bottom a {
  position: relative;
  color: rgba(250, 249, 245, 0.5);
  transition: color var(--dur-base) var(--ease-out);
}
.footer__bottom a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: rgba(250, 249, 245, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.footer__bottom a:hover { color: var(--color-cream); }
.footer__bottom a:hover::after { transform: scaleX(1); }

/* ---------- Utility ---------- */
.flow > * + * { margin-top: var(--space-5); }
.eyebrow-row { margin-bottom: var(--space-5); }
.divider { height: 1px; background: var(--color-line); margin-block: var(--space-7); }
.txt-mono { font-family: var(--font-mono); }
.txt-muted { color: var(--color-ink-3); }
.txt-mute2 { color: var(--color-ink-4); }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================
   WordPress block overrides (only deltas from static)
   ============================================ */

/* Constrain post-content but let inner sections go full-width */
.wp-site-blocks > main,
.wp-block-post-content {
  width: 100%;
}

/* Map WP button blocks onto our .btn system */
.wp-block-button.btn .wp-block-button__link {
  border-radius: var(--radius-pill);
  padding: 0.875rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.wp-block-button.btn .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.btn--primary .wp-block-button__link {
  background: var(--color-ink);
  color: var(--color-cream);
}
.wp-block-button.btn--primary .wp-block-button__link:hover {
  background: var(--color-indigo);
  box-shadow: var(--shadow-glow);
}
.wp-block-button.btn--secondary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.wp-block-button.btn--secondary .wp-block-button__link:hover { border-color: var(--color-ink); }
.wp-block-button.btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--color-ink);
  border: 0;
  padding: 0.5rem 0.75rem;
}
.wp-block-button.btn--ghost .wp-block-button__link:hover { color: var(--color-indigo); }
.wp-block-button.btn--lg .wp-block-button__link { padding: 1.125rem 2rem; font-size: var(--fs-base); }

/* WP admin bar offset (only when admin bar is showing) */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* WP's post-content default block gap — kill it inside our sections (we use our own spacing) */
.entry-content > section,
.wp-block-post-content > section {
  margin-block: 0 !important;
}

/* Site-title rendered as text — keep our brand-mark style */
.brand-mark .wp-block-site-title a {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-decoration: none;
}

/* Navigation block inside our header — keep our look */
.site-nav__links .wp-block-navigation__container { gap: var(--space-6); }
.site-nav__links .wp-block-navigation-item__content {
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  text-decoration: none;
}
.site-nav__links .wp-block-navigation-item__content:hover { color: var(--color-ink); }

/* Footer base color overrides */
.site-footer .wp-block-heading { color: var(--color-cream); }
.site-footer ul { list-style: none !important; padding: 0 !important; }
.site-footer li::before { content: none !important; }
.site-footer a { text-decoration: none !important; }

/* ============================================================
   v1.4 — DESIGN ELEVATION LAYER
   Grain, richer hero, premium buttons, card depth, hero visual
   ============================================================ */

/* ---- Subtle grain for warmth + depth ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Hero 3D knowledge-graph layer (three.js, front page) ---- */
.hero { position: relative; }
.hero3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---- Hero: tighter, richer multi-point mesh ---- */
.hero {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5.5rem);
  background:
    radial-gradient(46% 46% at 80% 16%, rgba(87,71,232,0.20), transparent 70%),
    radial-gradient(40% 40% at 10% 44%, rgba(6,182,212,0.13), transparent 70%),
    radial-gradient(46% 46% at 62% 92%, rgba(255,107,91,0.09), transparent 70%),
    linear-gradient(180deg, #FAF9F5, #F3F0E8);
}
.hero .container { position: relative; }
.hero__title {
  font-size: clamp(2.6rem, 1.2rem + 4vw, 4.75rem);
  line-height: 0.96;
  letter-spacing: -0.046em;
  margin-bottom: var(--space-5);
}
.hero__sub { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem); }
.hero__live-ticker {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(14,17,23,0.04), 0 10px 28px -10px rgba(87,71,232,0.18);
}
@media (min-width: 900px) {
  .hero__title { max-width: 11ch; }
  .hero__sub, .hero__cta, .hero__live-ticker { max-width: 600px; }
}

/* ---- Hero floating product visual ---- */
.hero-visual {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-46%);
  width: min(42%, 460px);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 900px) { .hero-visual { display: none; } }
.hero-visual__glow {
  position: absolute; inset: -40px;
  background:
    radial-gradient(circle at 60% 40%, rgba(87,71,232,0.35), transparent 60%),
    radial-gradient(circle at 30% 80%, rgba(6,182,212,0.22), transparent 55%);
  filter: blur(30px);
  z-index: 0;
}
.hero-visual__card {
  position: relative;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(14,17,23,0.04), 0 40px 80px -24px rgba(40,37,80,0.28), inset 0 1px 0 rgba(255,255,255,0.8);
  padding: 22px;
}
.hero-visual__card--main { transform: rotate(-1.5deg); }
.hvc-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-ink-3); margin-bottom: 16px;
}
.hvc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-emerald); box-shadow: 0 0 8px var(--color-emerald); }
.hvc-chip { margin-left: auto; background: var(--color-indigo-light); color: var(--color-indigo-dark); padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.hvc-q { font-family: var(--font-display); font-size: 21px; line-height: 1.25; color: var(--color-ink); margin-bottom: 16px; letter-spacing: -0.01em; }
.hvc-opt { padding: 11px 14px; border: 1px solid var(--color-line); border-radius: 11px; font-size: 13px; color: var(--color-ink-2); margin-bottom: 8px; background: #fff; }
.hvc-opt--sel {
  border-color: transparent;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#5747E8,#06B6D4) border-box;
  box-shadow: 0 6px 18px -6px rgba(87,71,232,0.4);
  font-weight: 500;
}
.hvc-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--color-ink-4); }
.hvc-bar { flex: 1; height: 6px; background: var(--color-line); border-radius: 99px; overflow: hidden; }
.hvc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5747E8, #06B6D4); border-radius: 99px; }
.hero-visual__card--mini { position: absolute; bottom: -46px; left: -54px; width: 190px; transform: rotate(2deg); padding: 18px; }
.hvc-mini-num { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--color-emerald); letter-spacing: -0.02em; }
.hvc-mini-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-4); margin: 6px 0 10px; }

/* ---- Premium buttons (gradient + glow + inset highlight) ---- */
.wp-block-button.btn--primary .wp-block-button__link,
.btn--primary {
  background: linear-gradient(135deg, #2A2550, #0E1117) !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(14,17,23,0.18), 0 5px 14px -6px rgba(87,71,232,0.26), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.wp-block-button.btn--primary .wp-block-button__link:hover,
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(14,17,23,0.20), 0 10px 24px -8px rgba(87,71,232,0.38), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* ---- Cards: gradient border + layered depth + glow hover ---- */
.bento__tile, .audience-card, .case, .trust-card, .sci-card {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(160deg, rgba(87,71,232,0.20), rgba(14,17,23,0.05) 48%) border-box;
  box-shadow: 0 1px 2px rgba(14,17,23,0.03), 0 16px 44px -18px rgba(14,17,23,0.14);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.bento__tile:hover, .audience-card:hover, .sci-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(14,17,23,0.04), 0 30px 60px -22px rgba(87,71,232,0.34);
}

/* ---- Tighter display headings ---- */
h2, .h2 { letter-spacing: -0.046em; }

/* ============================================================
   v1.4 — PHASE 2 REFINEMENTS
   Gradient numbers, viz glow, eyebrow detail, audience accents,
   premium comparison column
   ============================================================ */

/* Outcomes: gradient number text */
.outcome__number {
  background: linear-gradient(135deg, #0E1117 28%, #5747E8 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Bento visualization: glow on indigo accents */
.bento__viz svg { overflow: visible; }
.bento__viz [fill="var(--color-indigo)"] { filter: drop-shadow(0 0 5px rgba(87,71,232,0.55)); }

/* Eyebrow: refined leading line */
.eyebrow { position: relative; padding-left: 26px; }
.eyebrow::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px;
  background: linear-gradient(90deg, var(--color-indigo), transparent);
}

/* Audience cards: colored icon chip glow + per-accent hover glow */
.audience-card__icon { box-shadow: 0 6px 16px -6px var(--accent, var(--color-indigo)); }
.audience-card:hover {
  box-shadow: 0 2px 4px rgba(14,17,23,0.04),
              0 30px 60px -22px color-mix(in srgb, var(--accent, #5747E8) 40%, transparent);
}

/* Comparison table: premium Future Proof column */
.compare-table thead th.is-us {
  background: linear-gradient(135deg, #5747E8, #3D2FCC);
  color: #fff;
}
.compare-table td.is-us { background: rgba(87,71,232,0.06); }
.compare-table .mark-yes { box-shadow: 0 4px 10px -3px rgba(0,185,122,0.5); }

/* ---- Hero card gentle float (motion layer) ---- */
@keyframes fpFloatA { 0%,100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-9px); } }
@keyframes fpFloatB { 0%,100% { transform: rotate(2deg) translateY(0); }   50% { transform: rotate(2deg) translateY(7px); } }
.hero-visual__card--main { animation: fpFloatA 6.5s ease-in-out infinite; }
.hero-visual__card--mini { animation: fpFloatB 6.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-visual__card--main, .hero-visual__card--mini { animation: none; }
}

/* ============================================================
   v1.5 — SECONDARY PAGES (Platform / Resources / Company / Legal)
   ============================================================ */

/* Simple sub-page hero */
.sub-hero {
  padding-block: clamp(var(--space-9), 7vw, var(--space-12)) clamp(var(--space-7), 5vw, var(--space-9));
  background:
    radial-gradient(50% 60% at 80% 0%, rgba(87,71,232,0.10), transparent 60%),
    linear-gradient(180deg, var(--color-cream), var(--color-bone));
  border-bottom: 1px solid var(--color-line);
}
.sub-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); max-width: 18ch; margin-bottom: var(--space-5); }
.sub-hero .lead { max-width: 60ch; }
.sub-hero__meta { margin-top: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--color-ink-3); text-transform: uppercase; }

/* Prose for long-form (legal, about) */
.prose { max-width: 720px; margin-inline: auto; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: var(--space-8) 0 var(--space-4); }
.prose h3 { font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-3); }
.prose p { color: var(--color-ink-2); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); max-width: 68ch; }
.prose ul { margin: 0 0 var(--space-4) 1.25rem; color: var(--color-ink-2); line-height: var(--lh-relaxed); }
.prose li { margin-bottom: var(--space-2); }
.prose strong { color: var(--color-ink); }

/* Feature rows (platform pages) */
.feat-rows { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.feat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
  align-items: center; padding: var(--space-7);
  background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-xl);
}
.feat-row:nth-child(even) .feat-row__media { order: -1; }
@media (max-width: 760px) { .feat-row { grid-template-columns: 1fr; } .feat-row:nth-child(even) .feat-row__media { order: 0; } }
.feat-row h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.feat-row p { color: var(--color-ink-3); line-height: var(--lh-relaxed); }
.feat-row__media { aspect-ratio: 16/10; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-indigo-light), var(--color-bone)); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-indigo-dark); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-5); overflow: hidden; }
.feat-row__media svg { width: 100%; height: 100%; display: block; }

/* Generic 3-col card grid */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.s-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: var(--space-6); }
.s-card__eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-indigo); }
.s-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); margin: var(--space-3) 0; }
.s-card p { color: var(--color-ink-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.s-card a.s-card__cta { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-indigo); display: inline-block; margin-top: var(--space-4); }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.team-card { text-align: left; }
.team-card__avatar { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-indigo), var(--color-cyan)); margin-bottom: var(--space-3); display:flex; align-items:flex-end; padding: var(--space-4); color: #fff; font-family: var(--font-display); font-size: 2rem; }
.team-card h3 { font-size: var(--fs-base); font-weight: 600; }
.team-card p { font-size: var(--fs-sm); color: var(--color-ink-3); }

/* Role list (careers) */
.role-list { margin-top: var(--space-7); border-top: 1px solid var(--color-line-strong); }
.role-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); }
@media (max-width: 700px) { .role-row { grid-template-columns: 1fr; gap: var(--space-1); } }
.role-row strong { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); }
.role-row span { font-size: var(--fs-sm); color: var(--color-ink-3); font-family: var(--font-mono); }

/* Status page */
.status-banner { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-5) var(--space-6); background: rgba(0,185,122,0.08); border: 1px solid rgba(0,185,122,0.3); border-radius: var(--radius-lg); margin-bottom: var(--space-7); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-emerald-dim); }
.status-banner .live-dot { width: 10px; height: 10px; background: var(--color-emerald); border-radius: 50%; }
.status-list { border-top: 1px solid var(--color-line); }
.status-row { display:flex; justify-content: space-between; align-items:center; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.status-row__name { font-size: var(--fs-base); color: var(--color-ink); }
.status-row__pill { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-emerald-dim); display:flex; align-items:center; gap: 0.4rem; }
.status-row__pill::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--color-emerald); }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-8); align-items:start; }
@media (max-width: 800px){ .contact-grid { grid-template-columns: 1fr; } }
.contact-field { display:block; margin-bottom: var(--space-4); }
.contact-field label { display:block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-3); margin-bottom: var(--space-2); }
.contact-field input, .contact-field textarea, .contact-field select { width:100%; padding: 0.875rem 1rem; border:1px solid var(--color-line-strong); border-radius: var(--radius-md); font: inherit; background: var(--color-white); color: var(--color-ink); }
.contact-field textarea { min-height: 120px; resize: vertical; }
.contact-detail { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-line); }
.contact-detail strong { display:block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-3); margin-bottom: var(--space-2); }
.contact-detail span, .contact-detail a { font-size: var(--fs-md); color: var(--color-ink); }

/* Lite CTA band for secondary pages */
.cta-lite { background: var(--color-bone); padding-block: clamp(var(--space-9), 7vw, var(--space-12)); text-align:center; }
.cta-lite h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); max-width: 20ch; margin: 0 auto var(--space-5); }
.cta-lite p { color: var(--color-ink-3); max-width: 50ch; margin: 0 auto var(--space-6); }
.cta-lite .wp-block-buttons, .cta-lite .btnrow { display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; }

/* ---------- Proof band (homepage, below hero) ---------- */
.proof-band { background: var(--color-ink); color: var(--color-cream); padding-block: var(--space-9); }
.proof-band__lead {
  max-width: 56ch;
  margin: 0 auto var(--space-8);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}
.proof-band__lead em { font-style: italic; color: #A99CFF; }
.proof-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 720px) { .proof-band__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); } }
.proof-stat { text-align: center; }
.proof-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1;
  color: var(--color-cream);
  letter-spacing: -0.01em;
}
.proof-stat span { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: rgba(250, 249, 245, 0.6); }

/* ===== Inside-the-platform product UI (fpui-) ===== */
.fpui-stage{
    --ink:#0E1117; --ink2:#3A3F4B; --ink3:#6B7280; --ink4:#9AA1AD;
    --line:#E6E8EC; --line2:#EEF0F3; --bg:#EAECEF; --card:#FFFFFF; --soft:#F6F7F9;
    --in:#5747E8; --in-l:#ECEAFD; --in-d:#3D30B8;
    --em:#00B97A; --em-l:#E1F7EF; --am:#F59E0B; --am-l:#FCF1DD; --co:#FF6B5B; --co-l:#FFE9E6;
    --r:14px; --r2:10px; --r3:8px;
    --sh:0 1px 2px rgba(16,17,23,.04),0 8px 24px -10px rgba(16,17,23,.12);
    --shsm:0 1px 2px rgba(16,17,23,.06);
    --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .fpui-stage, .fpui-stage *{box-sizing:border-box}
  .fpui-stage{max-width:1080px;margin-inline:auto;display:flex;flex-direction:column;gap:30px}
  .fpui-lede{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--in);text-align:center;margin-bottom:-8px}
  .fpui-cap{text-align:center;color:var(--ink3);font-size:13px;margin-top:-18px}

  /* Browser window frame */
  .fpui-win{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
  .fpui-win__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:linear-gradient(#FCFCFD,#F4F5F7);border-bottom:1px solid var(--line)}
  .fpui-dots{display:flex;gap:7px}.fpui-dots i{width:11px;height:11px;border-radius:50%;display:block}
  .fpui-dots i:nth-child(1){background:#FF5F57}.fpui-dots i:nth-child(2){background:#FEBC2E}.fpui-dots i:nth-child(3){background:#28C840}
  .fpui-url{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:12px;color:var(--ink3);max-width:520px}
  .fpui-url svg{width:12px;height:12px;color:var(--em)}
  .fpui-win__body{padding:0}

  /* App shell (panel 1) */
  .fpui-shell{display:grid;grid-template-columns:212px 1fr;min-height:430px}
  .fpui-side{background:#0E1117;color:#C9CCD3;padding:16px 12px;display:flex;flex-direction:column;gap:3px}
  .fpui-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:600;color:#fff;font-size:15px}
  .fpui-brand .fpui-bd{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#6F60FF,#5747E8);box-shadow:0 0 0 3px rgba(87,71,232,.25)}
  .fpui-navi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;color:#AEB2BC;cursor:default}
  .fpui-navi svg{width:15px;height:15px;opacity:.8}
  .fpui-navi.fpui-on{background:rgba(87,71,232,.22);color:#fff;font-weight:500}
  .fpui-navi.fpui-on svg{opacity:1;color:#A99CFF}
  .fpui-navi.fpui-sub{margin-left:22px;font-size:12.5px;padding:6px 10px;color:#9197A2}
  .fpui-navsec{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5C616C;padding:14px 10px 5px}
  .fpui-main{background:var(--soft);padding:18px 20px;overflow:hidden}
  .fpui-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .fpui-greet h3{font-size:18px;font-weight:600}.fpui-greet p{font-size:12.5px;color:var(--ink3)}
  .fpui-tbright{display:flex;align-items:center;gap:10px}
  .fpui-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--ink2)}
  .fpui-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2)}
  .fpui-ldot{width:8px;height:8px;border-radius:50%;background:var(--em);box-shadow:0 0 0 0 rgba(0,185,122,.5);animation:fpui-pulse 2s infinite}
  @keyframes fpui-pulse{0%{box-shadow:0 0 0 0 rgba(0,185,122,.5)}70%{box-shadow:0 0 0 7px rgba(0,185,122,0)}100%{box-shadow:0 0 0 0 rgba(0,185,122,0)}}
  .fpui-ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6F60FF,#5747E8);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600}
  .fpui-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fpui-card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;box-shadow:var(--shsm)}
  .fpui-card h4{font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
  .fpui-big{font-size:30px;font-weight:700;letter-spacing:-.02em;font-family:var(--mono)}
  .fpui-sub{font-size:12px;color:var(--ink3)}
  .fpui-updn{font-size:11px;color:var(--em);font-weight:600}
  .fpui-exp{display:flex;gap:6px;margin-top:10px}
  .fpui-exp span{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--ink3)}
  .fpui-bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:8px}
  .fpui-bars i{flex:1;background:var(--in-l);border-radius:3px 3px 0 0}
  .fpui-bars i.fpui-h{background:var(--in)}
  .fpui-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--ink4);margin-top:5px}

  /* generic content header for focused panels */
  .fpui-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .fpui-crumb{font-size:12px;color:var(--ink3);font-family:var(--mono)}
  .fpui-head h3{font-size:17px;font-weight:600;margin-top:2px}
  .fpui-btn{background:var(--in);color:#fff;border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:500;display:inline-flex;gap:7px;align-items:center}
  .fpui-btn.fpui-ghost{background:#fff;border:1px solid var(--line);color:var(--ink2)}
  .fpui-body{padding:18px 20px}

  /* Quizzes */
  .fpui-difftabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .fpui-diff{border:1px solid var(--line);border-radius:10px;padding:9px 13px;min-width:120px;background:#fff}
  .fpui-diff .fpui-lv{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink4)}
  .fpui-diff .fpui-nm{font-size:13px;font-weight:600;margin:2px 0 4px}
  .fpui-diff .fpui-ct{font-size:11px;color:var(--ink3)}
  .fpui-diff.fpui-on{border-color:var(--in);background:var(--in-l);box-shadow:0 0 0 3px rgba(87,71,232,.08)}
  .fpui-diff.fpui-on .fpui-lv{color:var(--in-d)}
  .fpui-dot5{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
  .fpui-setlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .fpui-set{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--soft)}
  .fpui-set .fpui-ic{width:30px;height:30px;border-radius:8px;background:var(--in-l);color:var(--in);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}
  .fpui-set .fpui-t{flex:1}.fpui-set .fpui-t b{font-size:13.5px;font-weight:600}.fpui-set .fpui-t span{display:block;font-size:11.5px;color:var(--ink3)}
  .fpui-tag{font-family:var(--mono);font-size:10px;border-radius:6px;padding:3px 8px}
  .fpui-tag.fpui-ok{background:var(--em-l);color:#06794F}.fpui-tag.fpui-dr{background:var(--am-l);color:#8A5A06}
  .fpui-rulesbox{background:#0E1117;border-radius:12px;padding:16px;color:#D7DAE0}
  .fpui-rulesbox h5{font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8E94A0;margin-bottom:12px}
  .fpui-rrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .fpui-rrow:last-child{border-bottom:0}
  .fpui-rrow .fpui-lbl{font-size:13px}.fpui-rrow .fpui-lbl span{display:block;font-size:11px;color:#8E94A0;margin-top:1px}
  .fpui-sw{width:36px;height:21px;border-radius:999px;background:#3A3F4B;position:relative;flex:0 0 auto}
  .fpui-sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff}
  .fpui-sw.fpui-on{background:var(--in)}.fpui-sw.fpui-on::after{left:17.5px}
  .fpui-chipv{font-family:var(--mono);font-size:12px;background:rgba(87,71,232,.2);color:#C7BEFF;border-radius:7px;padding:4px 9px}

  /* Learning path */
  .fpui-flow{display:flex;align-items:stretch;gap:0;overflow:hidden;flex-wrap:wrap}
  .fpui-node{flex:1;min-width:120px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px;position:relative}
  .fpui-node+.fpui-node{margin-left:26px}
  .fpui-node+.fpui-node::before{content:'→';position:absolute;left:-21px;top:50%;transform:translateY(-50%);color:var(--ink4);font-size:16px}
  .fpui-node .fpui-s{font-family:var(--mono);font-size:10px;color:var(--ink4)}
  .fpui-node .fpui-ti{font-size:13px;font-weight:600;margin:3px 0 6px}
  .fpui-node .fpui-meta{font-size:11px;color:var(--ink3)}
  .fpui-node.fpui-cert{background:var(--em-l);border-color:#BFEBD9}
  .fpui-node.fpui-assess{background:var(--in-l);border-color:#D8D2FB}
  .fpui-branch{margin-top:14px;display:flex;align-items:center;gap:10px;background:var(--co-l);border:1px dashed #F4B3AA;border-radius:10px;padding:10px 14px;font-size:12px;color:#8A2C22}
  .fpui-branch .fpui-x{font-family:var(--mono);font-weight:600}
  .fpui-pathside{display:flex;flex-direction:column;gap:8px}
  .fpui-prow{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px}
  .fpui-prow.fpui-on{border-color:var(--in);background:var(--in-l)}
  .fpui-prow .fpui-m{font-size:11px;color:var(--ink3)}

  /* Distribution rules */
  .fpui-rulecard{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
  .fpui-rulecard__h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
  .fpui-rulecard__h b{font-size:13.5px}
  .fpui-clause{padding:14px 16px}
  .fpui-clause .fpui-lab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink4);width:46px;display:inline-block}
  .fpui-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 14px}
  .fpui-chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:6px 11px;font-size:12.5px;border:1px solid var(--line);background:#fff}
  .fpui-chip.fpui-k{background:var(--line2);color:var(--ink2)}
  .fpui-chip.fpui-act{background:var(--in-l);border-color:#D8D2FB;color:var(--in-d);font-weight:500}
  .fpui-chip.fpui-com{background:var(--em-l);border-color:#BFEBD9;color:#06794F;font-weight:500}
  .fpui-op{font-size:12px;color:var(--ink4);font-family:var(--mono)}
  .fpui-autoenroll{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0E1117;color:#D7DAE0;border-radius:10px;padding:12px 16px}
  .fpui-autoenroll .fpui-t b{font-size:13px;color:#fff}.fpui-autoenroll .fpui-t span{display:block;font-size:11px;color:#8E94A0}
  .fpui-twocol{display:grid;grid-template-columns:1fr 300px;gap:16px}
  .fpui-mini h5{font-size:11px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
  .fpui-comrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:7px}
  .fpui-comrow .fpui-cg{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;color:#fff;font-weight:600}
  .fpui-comrow .fpui-ct{flex:1;font-size:12.5px;font-weight:500}
  .fpui-comrow .fpui-ct span{display:block;font-size:11px;color:var(--ink3);font-weight:400}
  .fpui-comrow .fpui-n{font-family:var(--mono);font-size:12px;color:var(--ink2)}
  table.fpui-mini2{width:100%;border-collapse:collapse;font-size:12px}
  table.fpui-mini2 th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
  table.fpui-mini2 td{padding:9px 8px;border-bottom:1px solid var(--line2);color:var(--ink2)}
  table.fpui-mini2 .fpui-st{font-family:var(--mono);font-size:10px;background:var(--em-l);color:#06794F;border-radius:6px;padding:2px 7px}

  @media(max-width:760px){
    .fpui-shell{grid-template-columns:1fr}.fpui-side{display:none}
    .fpui-grid2,.fpui-twocol{grid-template-columns:1fr}
    .fpui-node+.fpui-node{margin-left:0;margin-top:26px}
    .fpui-node+.fpui-node::before{left:50%;top:-21px;transform:translateX(-50%);content:'↓'}
  }

/* ===== Inside-the-platform: learner screens (dark) + cross-platform ===== */
/* Dark theme: override the shared vars for any subtree wrapped in .fpui-lrn */
.fpui-lrn{
  --card:#121722; --soft:#0E1117; --line:#222A38; --line2:#1A212C;
  --ink:#E7EAF0; --ink2:#C2C8D2; --ink3:#8A92A0; --ink4:#5E6675; --bg:#0B0E14;
  --acc:#22D3EE; --acc-l:rgba(34,211,238,.12); --acc-d:#67E8F9;
}
.fpui-lrn .fpui-win{background:var(--card);border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.7)}
.fpui-lrn .fpui-win__bar{background:linear-gradient(#11161F,#0C1119);border-color:var(--line)}
.fpui-lrn .fpui-url{background:#0B0E14;border-color:var(--line);color:var(--ink3)}
.fpui-lrn .fpui-url svg{color:var(--acc)}

/* shared dark in-app top nav */
.fpui-appnav{display:flex;align-items:center;gap:22px;padding:13px 20px;border-bottom:1px solid var(--line)}
.fpui-appbrand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--acc);font-size:15px;margin-right:auto}
.fpui-appbrand small{color:var(--ink2);font-weight:600}
.fpui-appnav .fpui-nv{font-size:13px;color:var(--ink3);display:inline-flex;gap:6px;align-items:center}
.fpui-appnav .fpui-nv.fpui-on{color:var(--ink);font-weight:600}
.fpui-appnav .fpui-nv.fpui-on.fpui-pillnav{border:1px solid var(--acc);border-radius:999px;padding:5px 12px;color:var(--acc-d)}

/* ---- Knowledge Map ---- */
.fpui-kmhead{padding:14px 20px;border-bottom:1px solid var(--line)}
.fpui-kmtitle{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fpui-kmtitle h3{font-size:17px;font-weight:700;color:var(--ink)}
.fpui-kmtitle span{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.fpui-paths{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink4);margin-top:10px}
.fpui-paths b{color:var(--acc-d);font-weight:600}
.fpui-viewtabs{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.fpui-viewtab{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--ink2);display:inline-flex;gap:6px;align-items:center}
.fpui-viewtab.fpui-on{border-color:var(--acc);color:var(--acc-d);background:var(--acc-l);font-weight:500}
.fpui-kmbody{display:grid;grid-template-columns:1fr 230px}
@media(max-width:700px){.fpui-kmbody{grid-template-columns:1fr}}
.fpui-kgraph{background:radial-gradient(circle at 50% 38%,#101722,#0B0E14);padding:8px}
.fpui-kgraph svg{display:block;width:100%;height:auto}
.fpui-kgraph text{fill:#C2C8D2;font-family:var(--mono);font-size:9px}
.fpui-kinsights{border-left:1px solid var(--line);padding:16px;background:var(--soft)}
.fpui-kinsights h5{font-size:10px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin-bottom:10px}
.fpui-kinsights p{font-size:12px;color:var(--ink3);line-height:1.55}
.fpui-kbubble{background:var(--acc);color:#04212A;border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.45;font-weight:500;margin-top:12px}
.fpui-kmastery{margin-top:14px}
.fpui-kmrow{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink2);padding:7px 0;border-bottom:1px solid var(--line2)}
.fpui-kmrow b{font-family:var(--mono);color:var(--acc-d)}

/* ---- Adaptive Practice ---- */
.fpui-prtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.fpui-phases{display:flex;gap:14px;font-size:12px;color:var(--ink4);flex-wrap:wrap}
.fpui-phases .fpui-on{color:var(--acc-d);font-weight:600}
.fpui-qmeta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
.fpui-prbody{padding:18px 20px}
.fpui-bloomtag{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink3);margin-bottom:12px;flex-wrap:wrap}
.fpui-bloomtag b{color:#F59E0B;font-family:var(--mono);font-weight:600}
.fpui-qexplain{background:var(--soft);border-left:3px solid var(--acc);border-radius:0 8px 8px 0;padding:11px 14px;font-size:12.5px;color:var(--ink2);margin-bottom:16px}
.fpui-q{font-size:18px;font-weight:600;line-height:1.42;color:var(--ink);margin-bottom:16px}
.fpui-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
@media(max-width:560px){.fpui-opts{grid-template-columns:1fr}}
.fpui-opt{border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-size:13.5px;color:var(--ink2);display:flex;gap:11px;align-items:center}
.fpui-opt .fpui-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--ink3);flex:0 0 auto}
.fpui-conflbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin-bottom:8px}
.fpui-conf{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.fpui-confbtn{border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;font-size:12px;color:var(--ink3)}
.fpui-confbtn .fpui-cico{display:block;font-size:15px;margin-bottom:3px;color:var(--ink4)}
.fpui-confbtn.fpui-sel{border-color:var(--acc);background:var(--acc-l);color:var(--acc-d)}
.fpui-confbtn.fpui-sel .fpui-cico{color:var(--acc-d)}
.fpui-pickbtn{background:var(--acc);color:#04212A;border-radius:11px;padding:14px;text-align:center;font-weight:700;font-size:14px}

/* ---- Coding Sandbox ---- */
.fpui-sbtabs{display:flex;gap:7px;padding:14px 20px 0}
.fpui-sbtab{font-size:12.5px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:8px 14px;color:var(--ink3);display:inline-flex;gap:7px;align-items:center}
.fpui-sbtab.fpui-on{color:var(--acc-d);background:var(--soft);border-color:var(--line)}
.fpui-sbgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(max-width:700px){.fpui-sbgrid{grid-template-columns:1fr}}
.fpui-editor{background:#0B0E14;padding:0}
.fpui-edhead,.fpui-ophead{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);padding:9px 14px;border-bottom:1px solid var(--line)}
.fpui-code{display:flex;font-family:var(--mono);font-size:12.5px;line-height:1.7;padding:10px 0}
.fpui-gutter{padding:0 12px;color:#3A4252;text-align:right;user-select:none;border-right:1px solid var(--line2)}
.fpui-codelines{padding:0 14px;color:#C2C8D2;white-space:pre;overflow-x:auto}
.fpui-kw{color:#C792EA}.fpui-fn{color:#82AAFF}.fpui-str{color:#C3E88D}.fpui-num{color:#F78C6C}.fpui-cm{color:#5E6675;font-style:italic}
.fpui-output{background:var(--soft)}
.fpui-runbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line)}
.fpui-runbtn{background:var(--acc);color:#04212A;border-radius:8px;padding:6px 13px;font-size:12px;font-weight:700}
.fpui-restable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.fpui-restable th{text-align:left;color:var(--ink4);font-weight:500;padding:7px 14px;border-bottom:1px solid var(--line2)}
.fpui-restable td{padding:7px 14px;border-bottom:1px solid var(--line2);color:var(--ink2)}
.fpui-sbstatus{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:12px;color:var(--ink3)}
.fpui-pass{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;background:rgba(0,185,122,.14);color:#34D399;border-radius:6px;padding:3px 9px}

/* ---- Cross-platform devices ---- */
.fpui-xplat{display:flex;flex-direction:column;align-items:center;gap:26px}
.fpui-devices{display:flex;align-items:flex-end;justify-content:center;gap:30px;flex-wrap:wrap;width:100%}
.fpui-laptop{width:430px;max-width:60vw}
.fpui-lapscreen{background:#0B0E14;border:9px solid #1B2230;border-radius:14px 14px 0 0;aspect-ratio:16/10;overflow:hidden}
.fpui-lapbase{height:13px;background:linear-gradient(#20283A,#11161F);border-radius:0 0 12px 12px;margin:0 -22px;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.fpui-tablet{width:215px;background:#0B0E14;border:10px solid #1B2230;border-radius:20px;aspect-ratio:3/4;overflow:hidden}
.fpui-phone{width:150px;background:#0B0E14;border:9px solid #1B2230;border-radius:26px;aspect-ratio:9/19;overflow:hidden;position:relative}
.fpui-phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:3px;background:#2A3346;z-index:2}
.fpui-scr{height:100%;padding:12px 11px;font-size:9px;color:#C2C8D2;overflow:hidden}
.fpui-scr--lite{background:#F6F7F9;color:#3A3F4B;padding:12px}
.fpui-scrh{font-size:9px;font-weight:700;color:#E7EAF0;margin-bottom:7px}
.fpui-scr--lite .fpui-scrh{color:#0E1117}
.fpui-scrcard{background:#121722;border:1px solid #222A38;border-radius:7px;padding:8px;margin-bottom:6px}
.fpui-scr--lite .fpui-scrcard{background:#fff;border-color:#E6E8EC}
.fpui-scrbig{font-family:var(--mono);font-size:15px;font-weight:700;color:#fff}
.fpui-scr--lite .fpui-scrbig{color:#0E1117}
.fpui-scrline{height:5px;border-radius:3px;background:#222A38;margin:4px 0}
.fpui-scr--lite .fpui-scrline{background:#E6E8EC}
.fpui-scrline.fpui-acc{background:#22D3EE;width:60%}
.fpui-scropt{border:1px solid #222A38;border-radius:6px;padding:6px 7px;margin-bottom:5px;color:#C2C8D2}
.fpui-platbadges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fpui-platbadge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--ink2);background:var(--card)}
.fpui-platbadge svg{width:15px;height:15px;color:var(--in)}

/* capability -> live-proof deep links */
.proof-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(87,71,232,.55)}
.proof-link::after{content:'\2197';font-size:.72em;margin-left:3px;color:var(--color-indigo);vertical-align:super}
.proof-link:hover{color:var(--color-indigo);border-bottom-color:var(--color-indigo)}

/* ===== Gamification panel (dark, reuses .fpui-lrn) ===== */
.fpui-glayout{display:grid;grid-template-columns:1.08fr 1fr;gap:1px;background:var(--line)}
@media(max-width:700px){.fpui-glayout{grid-template-columns:1fr}}
.fpui-gleft,.fpui-gright{background:var(--card);padding:18px 20px}
.fpui-toast{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(87,71,232,.28),rgba(34,211,238,.16));border:1px solid rgba(34,211,238,.35);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--ink)}
.fpui-toast b{color:var(--acc-d)}
.fpui-gtop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fpui-streak{display:flex;align-items:center;gap:11px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:11px 15px;flex:1}
.fpui-streak .fl{font-size:22px;line-height:1}
.fpui-streak b{font-family:var(--mono);font-size:20px;color:#FFB020;line-height:1}
.fpui-streak span{display:block;font-size:11px;color:var(--ink3);margin-top:2px}
.fpui-ring{position:relative;width:74px;height:74px;flex:0 0 auto}
.fpui-ring svg{transform:rotate(-90deg);display:block}
.fpui-ring__t{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink);text-align:center;line-height:1.2}
.fpui-xp{margin-bottom:18px}
.fpui-xp__h{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-bottom:7px}
.fpui-xp__h b{color:var(--acc-d);font-family:var(--mono)}
.fpui-xp__bar{height:9px;border-radius:6px;background:var(--line);overflow:hidden}
.fpui-xp__bar i{display:block;height:100%;width:71%;background:linear-gradient(90deg,#5747E8,#22D3EE)}
.fpui-glabel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin:0 0 11px}
.fpui-badges{display:flex;gap:10px;flex-wrap:wrap}
.fpui-badge2{display:flex;flex-direction:column;align-items:center;gap:5px;width:58px;text-align:center}
.fpui-badge2 .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;background:var(--acc-l);border:1px solid rgba(34,211,238,.32)}
.fpui-badge2.lock .ic{background:var(--soft);border-color:var(--line);opacity:.45}
.fpui-badge2 span{font-size:9.5px;color:var(--ink3);line-height:1.2}
.fpui-lb__row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px}
.fpui-lb__row.me{background:var(--acc-l);border:1px solid rgba(34,211,238,.32)}
.fpui-lb__rk{font-family:var(--mono);font-size:13px;color:var(--ink4);width:16px;text-align:center}
.fpui-lb__av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6F60FF,#5747E8);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
.fpui-lb__nm{flex:1;font-size:13px;color:var(--ink2)}
.fpui-lb__xp{font-family:var(--mono);font-size:12px;color:var(--acc-d)}
.fpui-themes{margin-top:15px;font-size:11px;color:var(--ink4);line-height:1.5}
.fpui-themes b{color:var(--ink2)}

/* ===== Content-intelligence pipeline (light) ===== */
.fpui-pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-7)}
@media(max-width:820px){.fpui-pipe{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fpui-pipe{grid-template-columns:1fr}}
.fpui-pipestep{background:var(--color-white);border:1px solid var(--color-line);border-radius:14px;padding:18px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow-sm)}
.fpui-pipenum{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--color-indigo);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;font-weight:600}
.fpui-pipestep h4{font-size:14.5px;font-weight:600;margin-bottom:4px}
.fpui-pipestep p{font-size:12.5px;color:var(--color-ink-3);line-height:1.45}
.fpui-pipeio{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:var(--space-8)}
.fpui-pipeio .io{display:inline-flex;align-items:center;gap:8px;background:var(--color-bone);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:9px 16px;font-size:var(--fs-sm);color:var(--color-ink-2)}
.fpui-pipeio .io strong{color:var(--color-ink)}
.fpui-pipeio .io.out{background:var(--color-indigo);border-color:var(--color-indigo);color:#fff}
.fpui-pipeio .io.out strong{color:#fff}
.fpui-pipeio .ar{color:var(--color-ink-4);font-size:18px}

/* ===== 9 session types ===== */
.fpui-sessgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-7)}
@media(max-width:820px){.fpui-sessgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fpui-sessgrid{grid-template-columns:1fr}}
.fpui-sess{background:var(--color-white);border:1px solid var(--color-line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.fpui-sess h4{font-size:14.5px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:9px}
.fpui-sess h4 .ico{font-size:16px}
.fpui-sess p{font-size:12.5px;color:var(--color-ink-3);line-height:1.45}
.fpui-sess .tag{font-family:var(--font-mono);font-size:10px;background:var(--color-emerald);color:#fff;border-radius:6px;padding:2px 7px;margin-left:auto}
.fpui-sess.hot{border-color:var(--color-indigo);box-shadow:0 0 0 3px rgba(87,71,232,.08)}

/* ===== Analytics breadth ===== */
.fpui-analstat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin:var(--space-7) 0}
@media(max-width:720px){.fpui-analstat{grid-template-columns:repeat(2,1fr);row-gap:var(--space-6)}}
.fpui-analstat strong{display:block;font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--color-indigo)}
.fpui-analstat span{font-size:var(--fs-sm);color:var(--color-ink-3)}
.fpui-dims{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-7)}
.fpui-dim{font-family:var(--font-mono);font-size:12px;border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:5px 12px;color:var(--color-ink-2);background:var(--color-white)}
.fpui-dashlist{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-7)}
@media(max-width:720px){.fpui-dashlist{grid-template-columns:1fr}}
.fpui-dashlist div{font-size:var(--fs-sm);color:var(--color-ink-2);padding:10px 0;border-bottom:1px solid var(--color-line)}
.fpui-dashlist b{color:var(--color-ink)}
.fpui-recon{margin-top:var(--space-7);background:var(--color-ink);color:var(--color-cream);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-7);display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}
.fpui-recon .big{font-family:var(--font-display);font-size:2rem;color:#A99CFF;line-height:1;flex:0 0 auto}
.fpui-recon p{font-size:var(--fs-md);color:rgba(250,249,245,0.85);margin:0}
.fpui-recon b{color:var(--color-cream)}

/* ===== Anti-cheat / integrity ===== */
.fpui-acgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-7)}
@media(max-width:820px){.fpui-acgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fpui-acgrid{grid-template-columns:1fr}}
.fpui-ac{background:var(--color-white);border:1px solid var(--color-line);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--color-ink-2);display:flex;gap:11px;align-items:center}
.fpui-ac .n{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--color-coral);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:600}
.fpui-acprot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8)}
@media(max-width:720px){.fpui-acprot{grid-template-columns:1fr}}
.fpui-acprot > div{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:var(--lh-relaxed);border-left:3px solid var(--color-indigo);padding-left:var(--space-4)}
.fpui-acprot b{display:block;color:var(--color-ink);margin-bottom:4px}