/* ============================================================
   TALVIN AI — Home
   Built from "Talvin Home v1 (standalone)" Claude Design export.
   Desktop layout reproduces the 1440px design 1:1; backgrounds
   are full-bleed with content constrained to --site-max.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --color-primary:        #171064;
  --color-accent:         #6300FF;
  --color-accent-light:   #7134FF;
  --color-accent-muted:   rgba(99, 0, 255, 0.1);

  /* Neutrals */
  --color-black:          #221E1F;
  --color-gray-4:         #838392;
  --color-gray-6:         #E7ECF3;
  --color-white:          #FFFFFF;

  /* Surfaces */
  --color-bg-page:        #FBF9FF;
  --color-bg-card-purple: #F5EEFF;
  --color-bg-purple-pale: #EFF1FF;
  --color-bg-dark:        #000000;

  /* Text */
  --color-text-primary:   #141414;
  --color-text-body:      #272727;
  --color-text-muted:     #6B6B78;
  --color-text-faint:     #9A9AA8;

  /* Lines */
  --line:                 #E7ECF3;
  --line-purple:          #E4E0EE;
  --line-purple-soft:     #EDE6FA;

  /* Type */
  --font-display:   'Sora', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-nav:       'Montserrat', system-ui, sans-serif;
  --font-decorative:'Kanit', system-ui, sans-serif;

  /* Layout */
  --site-max: 1440px;
  --gutter:   80px;
  --section-y: 90px;
}

@media (max-width: 1200px) { :root { --gutter: 48px; --section-y: 76px; } }
@media (max-width: 900px)  { :root { --gutter: 32px; --section-y: 64px; } }
@media (max-width: 640px)  { :root { --gutter: 20px; --section-y: 52px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep anchor targets clear of the sticky header */
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--color-white);
  font-family: var(--font-body);
  color: var(--color-text-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-primary); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.shell   { max-width: var(--site-max); margin: 0 auto; }
.section { max-width: var(--site-max); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.band    { width: 100%; }
.band--line   { border-bottom: 1px solid var(--line); }
.band--page   { background: var(--color-bg-page); }
.band--dark   { background: var(--color-bg-dark); }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 18px;
}
.eyebrow--muted { color: var(--color-text-faint); letter-spacing: 0.14em; }

.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(29px, 3.4vw, 42px); line-height: 1.18;
  letter-spacing: -0.05em; color: var(--color-text-primary);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-nav); font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 0; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--light { color: var(--color-text-primary); background: var(--color-white); }
.btn--light:hover { background: var(--color-accent); color: var(--color-white); }
.btn--ghost { color: var(--color-white); border-color: rgba(255,255,255,0.32); background: transparent; }
.btn--ghost:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-text-primary); }
.btn--sm    { font-size: 14px; padding: 11px 22px; }

/* ============================================================
   HERO
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg-dark);
  transition: box-shadow .28s ease, background .28s ease;
}
/* Once scrolled the bar becomes black glass: translucent enough to read the
   page moving underneath, blurred and slightly saturated so it still reads as
   one solid surface. */
body.scrolled .site-header {
  /* 0.62 is the floor: any more transparent and the nav links drop below
     4.5:1 against a white section scrolling underneath. */
  background: rgba(6, 4, 16, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(239,241,255,0.16), 0 10px 34px rgba(0,0,0,0.30);
}
body.scrolled .site-header .nav { border-bottom-color: transparent; }

/* Lift the link text to hold contrast against the lighter, translucent bar. */
body.scrolled .nav__links a,
body.scrolled .nav__signup { color: rgba(255,255,255,0.92); }
body.scrolled .nav__links a.is-active { color: #fff; }

/* Without backdrop-filter the translucency would put white nav text on top of
   whatever light section is underneath. Fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.scrolled .site-header { background: rgba(6, 4, 16, 0.94); }
}

/* The drawer sits over the page, so the bar must stay opaque behind it. */
body.nav-open .site-header {
  background: var(--color-bg-dark);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.hero__glow {
  position: absolute; top: -832px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1300px;
  background: radial-gradient(circle, rgba(99,0,255,0.40) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.hero__wordmark {
  position: absolute; left: 0; right: 0; top: 58px;
  font-family: var(--font-decorative);
  font-size: clamp(88px, 17vw, 240px); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em; text-align: center;
  color: rgba(99,0,255,0.10);
  user-select: none; pointer-events: none; white-space: nowrap;
}

/* Nav */
.nav {
  position: relative; z-index: 20;
  max-width: var(--site-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(239,241,255,0.14);
}
.nav__left { display: flex; align-items: center; gap: 48px; }
.nav__logo { display: flex; align-items: center; gap: 9px; }
.nav__logo img { height: 30px; width: auto; display: block; transition: opacity .2s ease; }
.nav__logo:hover img { opacity: .82; }
.nav__links {
  display: flex; gap: 30px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
}
.nav__links a {
  position: relative; color: rgba(255,255,255,0.72);
  transition: color .2s ease; padding-bottom: 3px;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .24s ease;
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 22px; }
.nav__signup {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.72);
  transition: color .2s ease;
}
.nav__signup:hover { color: var(--color-accent-light); }

.nav__toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(239,241,255,0.24);
  border-radius: 8px; cursor: pointer;
}
.nav__toggle span {
  display: block; position: relative; width: 18px; height: 1.5px;
  background: #fff; transition: background .2s ease;
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: #fff; transition: transform .25s ease, top .25s ease;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle span::after  { top: 0; transform: rotate(-45deg); }

.nav__drawer {
  display: none; position: fixed; inset: 72px 0 0; z-index: 60;
  background: #000; padding: 28px var(--gutter) 40px;
  overflow-y: auto; overscroll-behavior: contain;
}
body.nav-open .nav__drawer { display: block; }
.nav__drawer > a {
  display: block; padding: 16px 0; font-size: 19px; font-weight: 500;
  color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(239,241,255,0.12);
}
.nav__drawer > a:hover { color: #fff; }
.nav__drawer-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.nav__drawer-cta .btn { width: 100%; }

/* Hero body */
.hero__body {
  position: relative; z-index: 2;
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 500px; gap: 72px;
  align-items: center; padding: 76px var(--gutter) 72px;
}
.hero__title {
  max-width: 640px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -0.05em; color: var(--color-white); text-wrap: balance;
}
.hero__lede {
  margin-top: 22px; max-width: 560px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero__trust {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px;
}
.hero__trust-label {
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 11px; color: rgba(255,255,255,0.45);
}
.hero__trust-logos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px 34px; opacity: 0.62;
}
.hero__trust-logos img { width: auto; display: block; }

/* Demo capture card */
.demo-card {
  position: relative;
  background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 26px; overflow: hidden;
}
.demo-card__video {
  position: relative; border-radius: 8px; overflow: hidden;
  background: #0B0616; border: 1px solid rgba(239,241,255,0.14);
}
.demo-card__video img {
  display: block; width: 100%; height: 248px;
  object-fit: cover; object-position: top left; border-radius: 8px;
}
.demo-card__scrim {
  position: absolute; inset: 0; backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.66) 100%);
  border-radius: 10px;
}
.demo-card__play-wrap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; border-radius: 5px;
}
.demo-card__play {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.demo-card__play i {
  width: 0; height: 0; border-left: 14px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.demo-card__runtime {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7); text-align: center;
}

#demo-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#demo-form input {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(239,241,255,0.22);
  border-radius: 0; padding: 13px 14px; outline: none;
  transition: border-color .18s ease;
}
#demo-form input::placeholder { color: rgba(255,255,255,0.45); }
#demo-form input:focus { border-color: rgba(185,156,255,0.75); }
#demo-form button[type=submit] {
  width: 100%; font-family: var(--font-nav); font-weight: 600; font-size: 15px;
  color: #fff; background: var(--color-accent); border: 0; border-radius: 0;
  padding: 15px 20px; cursor: pointer; transition: background .2s ease;
}
#demo-form button[type=submit]:hover { background: #5200D6; }
.demo-form__fineprint { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.4); }

.demo-sent {
  margin-top: 18px; border: 1px solid rgba(185,156,255,0.45);
  background: rgba(99,0,255,0.14); border-radius: 8px; padding: 18px;
}
.demo-sent__title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.demo-sent__body { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.demo-sent__body strong { color: #fff; font-weight: 600; }
.demo-sent__actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.demo-sent__actions a { color: #B99CFF; font-weight: 600; }
#demo-reset {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.5); font-size: 13px; font-family: var(--font-body);
}
#demo-reset:hover { color: rgba(255,255,255,0.85); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.metric { padding: 46px 40px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: var(--gutter); }
.metric:last-child  { padding-right: var(--gutter); border-right: 0; }
.metric__value {
  font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 400; letter-spacing: -0.05em; color: var(--color-primary); line-height: 1;
}
.metric__arrow { color: #C9C9D4; }
.metric__label { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.ats {
  max-width: var(--site-max); margin: 0 auto;
  padding: 34px var(--gutter); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px 48px;
}
.ats__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text-faint); white-space: nowrap;
}
.ats__logos { display: flex; align-items: center; gap: 14px; }
.ats__logos img { width: 38px; height: 38px; border-radius: 8px; display: block; }
.ats__logos img.is-ashby {
  width: 56px; height: 56px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); padding: 4px;
}
.ats__note { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); flex: 1 1 260px; }

/* ============================================================
   ASK AI
   ============================================================ */
.askai-band { background: var(--color-bg-page); border-bottom: 1px solid var(--line); }
.askai-wrap { max-width: var(--site-max); margin: 0 auto; padding: 40px var(--gutter); }
.askai {
  border: 1.5px solid var(--color-accent); border-radius: 16px; background: #fff;
  padding: 26px 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; max-width: 1000px; margin: 0 auto;
}
.askai__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.03em; color: var(--color-text-primary); white-space: nowrap;
}
.askai__links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.askai__links a {
  display: block; width: 52px; height: 52px; border-radius: 12px;
  overflow: hidden; flex: none; transition: transform .18s ease;
}
.askai__links a:hover { transform: translateY(-2px); }
.askai__links img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem__title { margin-bottom: 52px; max-width: 820px; }
.problem__title br { display: block; }
.grad-text {
  background-image: linear-gradient(135deg, rgb(99,0,255), rgb(204,51,102));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.problem__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.problem__col { padding: 34px 60px 34px 0; border-right: 1px solid var(--line); }
.problem__col + .problem__col { padding: 34px 0 34px 60px; border-right: 0; }
.problem__kicker {
  font-size: 20px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 18px;
}
.problem__lede { font-size: 17px; line-height: 1.65; color: var(--color-text-primary); }
.problem__note {
  margin-top: 18px; font-size: 15px; line-height: 1.6;
  font-style: italic; color: var(--color-text-muted);
}
.problem__summary {
  padding-top: 36px; border-top: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4;
  letter-spacing: -0.03em; color: var(--color-text-primary); max-width: 900px;
}

/* Volume diagram */
.viz-volume { margin-top: 34px; height: 150px; position: relative; }
.viz-volume__axis { position: absolute; left: 0; right: 0; top: 78px; height: 1px; background: var(--line); transform: rotate(-7deg); }
.viz-volume__tick { position: absolute; left: 50%; top: 78px; width: 1px; height: 52px; background: var(--line); }
.viz-volume__foot { position: absolute; left: calc(50% - 5px); top: 130px; width: 11px; height: 1px; background: #C9C9D4; }
.viz-volume__big {
  position: absolute; left: 14px; top: 16px;
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: #fff;
  background-color: var(--color-accent-light);
}
.viz-volume__small { position: absolute; right: 38px; top: 62px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.viz-volume__dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #C9C9D4; background-color: var(--color-accent-muted); }
.viz-volume__caption { font-family: var(--font-display); font-size: 12px; color: var(--color-text-muted); }

/* Verification donut */
.viz-donut { margin-top: 34px; min-height: 150px; display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.viz-donut__ring {
  width: 118px; height: 118px; border-radius: 50%; flex: none;
  background: conic-gradient(#6300FF 0 70%, #E4D9FF 70% 100%);
  display: flex; align-items: center; justify-content: center;
}
.viz-donut__hole {
  width: 76px; height: 76px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: -0.03em; color: var(--color-text-primary);
}
.viz-donut__key { display: flex; flex-direction: column; gap: 12px; }
.viz-donut__key div { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.viz-donut__swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ============================================================
   PLATFORM
   ============================================================ */
.platform__intro { max-width: 720px; margin-bottom: 56px; }
.platform__intro .h2 { margin-bottom: 18px; }
.platform__lede { font-size: 16px; line-height: 1.7; color: var(--color-text-muted); }
.platform__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-purple); border: 1px solid var(--line-purple);
}
.pcard {
  background: #fff; padding: 38px 40px; display: block;
  position: relative; text-decoration: none; color: inherit;
}
.pcard > svg { margin-bottom: 22px; display: block; }
.pcard__title {
  font-size: 19px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-text-primary); margin-bottom: 10px;
}
.pcard__body { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); }
a.pcard:hover { background: #FCFAFF; color: inherit; }
.pcard__arrow {
  position: absolute; top: 34px; right: 36px; width: 30px; height: 30px;
  border-radius: 50%; border: 1.5px solid var(--line-purple);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pcard__arrow svg { display: block; margin: 0; }
a.pcard:hover .pcard__arrow {
  border-color: var(--color-accent); background: var(--color-accent-muted);
  transform: translate(2px, -2px);
}

.sally {
  background: linear-gradient(160deg, #171064 0%, #0B0616 100%);
  padding: 44px; color: #fff; position: relative; overflow: hidden; margin-top: 30px;
}
.sally__glow {
  position: absolute; top: -160px; right: -160px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(99,0,255,0.55) 0%, rgba(4,6,17,0) 70%);
  pointer-events: none;
}
.sally__inner { position: relative; }
.sally__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 26px;
}
.sally__title {
  font-family: var(--font-display); font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 400; letter-spacing: -0.04em; line-height: 1.3; margin-bottom: 16px;
}
.sally__body { margin-bottom: 34px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,0.7); }

/* ============================================================
   CUSTOMER EVIDENCE
   ============================================================ */
.evidence {
  display: grid; grid-template-columns: 1fr 400px; gap: 100px; align-items: center;
}
.evidence__quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px); line-height: 1.42;
  letter-spacing: -0.03em; color: var(--color-text-primary);
}
.evidence__by { margin-top: 30px; display: flex; align-items: center; gap: 14px; }
.evidence__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: url("../img/avatar-beenali.png") 50% 22% / 190% auto no-repeat;
}
.evidence__meta { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.evidence__meta strong { color: var(--color-text-primary); font-weight: 600; }
.evidence__stats { border-left: 1px solid var(--line); padding-left: 48px; }
.evidence__num {
  font-family: var(--font-display); font-size: clamp(42px, 4.4vw, 56px);
  font-weight: 400; letter-spacing: -0.05em; line-height: 1;
}
.evidence__num--accent { color: var(--color-accent); }
.evidence__num--primary { color: var(--color-primary); margin-top: 26px; }
.evidence__cap { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin-top: 8px; }
.evidence__cap--rule { padding-bottom: 26px; border-bottom: 1px solid var(--line); }

/* ============================================================
   PROCESS
   ============================================================ */
.process__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 48px;
}
.process__note { font-size: 14px; color: var(--color-text-faint); }
.process__rail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.step { min-width: 0; }
.step__inner { border-top: 2px solid var(--color-primary); padding-top: 28px; }
.step__num {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em;
  color: var(--color-accent); margin-bottom: 16px;
}
.step__thumb {
  border: 1px solid var(--line-purple); border-radius: 12px;
  background: var(--color-bg-card-purple); margin-bottom: 20px; height: 168px;
  display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden;
}
.step__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.step__title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin-bottom: 9px;
}
.step__body { font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted); }
/* Coming-soon variant */
.step--soon .step__inner { border-top-color: var(--line-purple); }
.step--soon .step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step--soon .step__num { color: #B9B9C4; margin-bottom: 0; }
.step__badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-faint); border: 1px solid var(--line-purple);
  border-radius: 4px; padding: 3px 7px;
}
.step--soon .step__thumb { border-style: dashed; border-color: #D9D2EA; }
.step--soon .step__thumb img { opacity: 0.85; }
.step--soon .step__title, .step--soon .step__body { color: var(--color-text-faint); }

/* ============================================================
   COMPARISON
   ============================================================ */
.compare-band { background-color: var(--color-accent-muted); }
.compare-wrap { max-width: var(--site-max); margin: 0 auto; padding: 96px var(--gutter); }
@media (max-width: 900px) { .compare-wrap { padding: var(--section-y) var(--gutter); } }
.compare__intro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.compare__intro .h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; margin-bottom: 16px; }
.compare__intro p { font-size: 16px; line-height: 1.75; color: rgba(20,20,20,0.6); }

.compare__table { background: #fff; border: 1px solid var(--line-purple-soft); overflow: hidden; }
.compare__row { display: grid; grid-template-columns: 260px 1fr 1fr; font-size: 15px; }
.compare__row--head { background-color: var(--color-bg-purple-pale); font-size: 11px; }
.compare__row--head > * {
  padding: 18px 32px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-gray-4);
}
.compare__row--head > :last-child { color: var(--color-primary); }
.compare__row:not(.compare__row--head) > * { padding: 22px 32px; border-top: 1px solid #F1EDF8; line-height: 1.6; }
.compare__aspect { font-weight: 600; color: var(--color-text-primary); }
.compare__old { color: var(--color-text-muted); }
.compare__new { color: var(--color-text-primary); background: #FCFAFF; }
.compare__cell-label { display: none; }

.compare__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.tcard { background: #fff; border: 1px solid var(--line-purple-soft); padding: 26px 28px; }
.tcard__title {
  font-size: 15px; font-weight: 600; color: var(--color-text-primary);
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.tcard__body { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; grid-template-columns: 340px 1fr; gap: 100px; align-items: start; }
.faq__intro .h2 { margin-bottom: 14px; }
.faq__intro p { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.faq__intro a { text-decoration: underline; text-underline-offset: 3px; }

.faq details > summary { list-style: none; cursor: pointer; }
.faq details > summary::-webkit-details-marker { display: none; }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; padding: 24px 0; border-top: 1px solid var(--line);
}
.faq details:last-of-type summary { border-bottom: 1px solid var(--line); }
.faq details[open]:last-of-type summary { border-bottom: 0; }
.faq details:last-of-type .faq__answer { border-bottom: 1px solid var(--line); }
.faq__q { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); }
.faq__x {
  font-family: var(--font-display); font-size: 18px; color: var(--color-accent);
  line-height: 1; flex: none; transition: transform .2s;
}
.faq details[open] .faq__x { transform: rotate(45deg); }
.faq__answer { padding: 0 60px 26px 0; font-size: 15px; line-height: 1.75; color: var(--color-text-muted); }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-wrap { max-width: var(--site-max); margin: 0 auto; background: #fff; padding: var(--gutter); }
.cta {
  position: relative; background: linear-gradient(160deg, #171064 0%, #0B0616 100%);
  overflow: hidden; padding: 64px; text-align: center; margin: 0 auto;
}
.cta__glow {
  position: absolute; top: -160px; right: -160px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(99,0,255,0.55) 0%, rgba(4,6,17,0) 70%);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 660px; margin: 0 auto; }
.cta__title {
  margin-bottom: 16px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.05em;
  color: #fff; text-wrap: balance;
}
.cta__body { margin-bottom: 30px; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.footer { position: relative; background: #000; color: #fff; overflow: hidden; }
.footer__glow {
  position: absolute; bottom: -720px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1200px;
  background: radial-gradient(circle, rgba(99,0,255,0.30) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.footer__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: 96px var(--gutter) 34px; }
.footer__grid { display: grid; grid-template-columns: 340px repeat(4, 1fr); gap: 60px; align-items: start; }
.footer__blurb { margin-bottom: 22px; font-size: 20px; line-height: 1.7; color: #fff; max-width: 280px; }
.footer__contact { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.8; }
.footer__contact a { color: inherit; }
.footer__contact a:hover { color: #fff; }
.footer__h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 18px;
}
.footer__links { font-size: 14px; line-height: 2.1; }
.footer__links a { display: block; color: rgba(255,255,255,0.7); }
.footer__links a:hover { color: #fff; }
.footer__wordmark {
  position: relative; margin-top: 40px;
  font-family: var(--font-decorative);
  font-size: clamp(84px, 21vw, 300px); line-height: 0.82; letter-spacing: 0.06em;
  color: #FFFFFF25; user-select: none; pointer-events: none; white-space: nowrap;
}
.footer__bottom {
  position: relative; margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; font-size: 13px; color: rgba(255,255,255,0.4);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 16px 30px; }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- ≤1200px: tighten the two big asymmetric grids --- */
@media (max-width: 1200px) {
  .hero__body { grid-template-columns: 1fr 420px; gap: 48px; }
  .evidence { gap: 56px; grid-template-columns: 1fr 320px; }
  .faq { gap: 56px; grid-template-columns: 280px 1fr; }
  .nav__left { gap: 32px; }
  .nav__links { gap: 20px; }
  .process__rail { gap: 20px; }
  .compare__row { grid-template-columns: 200px 1fr 1fr; }
  .compare__row > * { padding-left: 22px !important; padding-right: 22px !important; }
  .problem__col { padding-right: 40px; }
  .problem__col + .problem__col { padding-left: 40px; }
}

/* --- ≤1024px: nav collapses, hero stacks --- */
@media (max-width: 1024px) {
  .nav__links, .nav__signup { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__right .btn { display: none; }

  .hero__wordmark { top: 24px; }
  .hero__body {
    grid-template-columns: 1fr; gap: 44px;
    padding: 56px var(--gutter) 60px; align-items: start;
  }
  .hero__title, .hero__lede { max-width: 100%; }
  .demo-card { max-width: 520px; }

  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { padding: 34px var(--gutter) 34px var(--gutter); border-bottom: 1px solid var(--line); }
  .metric:nth-child(odd)  { border-right: 1px solid var(--line); }
  .metric:nth-child(even) { border-right: 0; }
  .metric:nth-child(n+3)  { border-bottom: 0; }
  .metric:first-child { padding-left: var(--gutter); }
  .metric:last-child  { padding-right: var(--gutter); }

  .compare__trust { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --- ≤900px: single-column content --- */
@media (max-width: 900px) {
  .problem__grid { grid-template-columns: 1fr; }
  .problem__col { padding: 28px 0; border-right: 0; }
  .problem__col + .problem__col { padding: 28px 0; border-top: 1px solid var(--line); }
  .problem__title { margin-bottom: 36px; }
  .problem__title br { display: none; }

  .platform__grid { grid-template-columns: 1fr; }
  .platform__intro { margin-bottom: 36px; }
  .sally { padding: 32px 26px; }

  .process__rail { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .evidence { grid-template-columns: 1fr; gap: 40px; }
  .evidence__stats {
    border-left: 0; padding-left: 0; padding-top: 32px;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  }
  .evidence__num--primary { margin-top: 0; }
  .evidence__cap--rule { padding-bottom: 0; border-bottom: 0; }

  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq__answer { padding-right: 24px; }
  .faq summary { gap: 20px; }

  .askai { flex-direction: column; padding: 26px 24px; gap: 22px; text-align: center; }
  .askai__title { white-space: normal; }
  .askai__links { justify-content: center; }

  .cta-wrap { padding: var(--gutter) var(--gutter) calc(var(--gutter) * 0.75); }
  .cta { padding: 48px 28px; }
  .footer__inner { padding: 64px var(--gutter) 28px; }

  /* Comparison table → stacked cards */
  .compare__table { border: 0; background: transparent; }
  .compare__row {
    display: block; background: #fff;
    border: 1px solid var(--line-purple-soft); margin-bottom: 12px;
  }
  .compare__row--head { display: none; }
  .compare__row:not(.compare__row--head) > * { border-top: 0; padding: 16px 20px; }
  .compare__aspect {
    background: var(--color-bg-purple-pale); padding: 14px 20px !important;
    font-size: 15px;
  }
  .compare__old, .compare__new { background: #fff; }
  .compare__new { border-top: 1px solid #F1EDF8 !important; }
  .compare__cell-label {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-gray-4); margin-bottom: 6px;
  }
  .compare__new .compare__cell-label { color: var(--color-primary); }
}

/* --- ≤640px: phone --- */
@media (max-width: 640px) {
  html { scroll-padding-top: 80px; }
  .nav { height: 64px; }
  .nav__drawer { inset: 64px 0 0; }
  .hero__wordmark { top: 10px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .hero__body { padding: 44px var(--gutter) 48px; gap: 36px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__trust { gap: 16px; }
  .hero__trust-logos { gap: 18px 24px; }

  .demo-card { padding: 18px; max-width: 100%; }
  .demo-card__video img { height: 190px; }

  .metrics { grid-template-columns: 1fr; }
  .metric { padding: 28px var(--gutter) !important; border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }

  .ats { gap: 16px 24px; padding: 26px var(--gutter); }
  .ats__note { flex-basis: 100%; }

  .askai-wrap { padding: 32px var(--gutter); }
  .askai__links a { width: 44px; height: 44px; }

  .pcard { padding: 28px 24px; }
  .pcard__arrow { top: 24px; right: 22px; }
  .problem__kicker { font-size: 16px; }
  .problem__lede { font-size: 16px; }

  .evidence__stats { grid-template-columns: 1fr; gap: 22px; }
  .process__rail { grid-template-columns: 1fr; gap: 30px; }


  .compare__trust { grid-template-columns: 1fr; gap: 12px; }
  /* the card used to butt straight up against the footer */
  .cta-wrap { padding: 40px var(--gutter) 40px; }
  .cta { padding: 40px 22px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__blurb { font-size: 18px; max-width: 100%; }
  .footer__bottom { justify-content: flex-start; }
}

/* ============================================================
   MOTION
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

/* Numerals must not reflow while counting. */
.count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Cards lift slightly on hover. */
.tcard, .step__thumb { transition: transform .25s ease, box-shadow .25s ease; }
.tcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(23,16,100,.08); }
.step:hover .step__thumb { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(23,16,100,.10); }

.askai__links a { transition: transform .2s ease, box-shadow .2s ease; }
.askai__links a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(23,16,100,.18); }

.hero__trust-logos img { transition: opacity .2s ease; }

.faq summary { transition: color .18s ease; }
.faq summary:hover .faq__q { color: var(--color-accent); }

.footer__links a, .footer__legal a, .footer__contact a { transition: color .18s ease; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tcard:hover, .step:hover .step__thumb, .askai__links a:hover { transform: none; }

  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   DEMO PAGE  (/demo/)
   ============================================================ */
.eyebrow--on-dark { color: var(--color-accent-light); }

/* Compact, centred hero — the calendar is the point of this page, so the
   header + hero are kept short enough to leave it in view on landing. */
.demo-hero { border-bottom: 1px solid rgba(239,241,255,0.10); }
.demo-hero__wordmark { top: 8px; }

.demo-hero__body {
  position: relative; z-index: 2;
  max-width: var(--site-max); margin: 0 auto;
  padding: 46px var(--gutter) 44px;
  text-align: center;
}
.demo-hero__copy { max-width: 760px; margin: 0 auto; }
.demo-hero__title {
  margin: 0 auto;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(31px, 3.9vw, 48px); line-height: 1.12;
  letter-spacing: -0.05em; color: var(--color-white); text-wrap: balance;
}
.demo-hero__lede {
  margin: 16px auto 0; max-width: 620px;
  font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.68);
}
.demo-hero__trust {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px 34px;
}
/* Booking band */
.cal-band { background: var(--color-bg-page); border-bottom: 1px solid var(--line); }
.cal-wrap { max-width: var(--site-max); margin: 0 auto; padding: 44px var(--gutter) var(--section-y); }
.cal-head { max-width: 640px; margin: 0 auto 22px; text-align: center; }
.cal-head .h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cal-head__note { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

.cal-frame {
  background: #fff; border: 1px solid var(--line-purple-soft);
  padding: 8px; max-width: 1180px;
  margin: 0 auto;            /* centre the calendar under the centred title */
  position: relative;        /* anchors the loading skeleton */
}
#cal-inline { width: 100%; min-height: 640px; overflow: hidden; }
#cal-inline.is-ready, #cal-inline.is-unavailable { min-height: 0; }

.cal-noscript { padding: 56px 24px; text-align: center; }
.cal-noscript p { margin-bottom: 18px; font-size: 15px; color: var(--color-text-muted); }
.btn--dark { background: var(--color-text-primary); color: #fff; }
.btn--dark:hover { background: var(--color-accent); color: #fff; }

.cal-fallback { margin-top: 20px; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); text-align: center; }
.cal-fallback a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .demo-hero__body { padding: 40px var(--gutter) 38px; }
}
@media (max-width: 640px) {
  .demo-hero__wordmark { top: 4px; }
  .demo-hero__body { padding: 32px var(--gutter) 30px; }
  .demo-hero__trust { margin-top: 22px; padding-top: 18px; gap: 14px 24px; }
  .cal-wrap { padding: 30px var(--gutter) var(--section-y); }
  #cal-inline { min-height: 560px; }
  .cal-frame { padding: 4px; }
}

/* ============================================================
   PRICING PAGE  (/pricing/)
   Values transcribed from the "Talvin Pricing" design export.
   ============================================================ */
:root {
  /* Export draws tier cards at 16px. Flip to 0 to match the squared
     panels used on the home page. */
  --tier-radius: 16px;
}

/* Export marks the current page with colour only — no underline. */
.nav__links a.is-active { color: #fff; }

/* Flat-colour text clip, as authored in the export. */
.clip-accent {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-color: var(--color-accent-light);
}

/* ---------- Hero ---------- */
.price-hero__body {
  position: relative; z-index: 2;
  max-width: var(--site-max); margin: 0 auto;
  padding: 76px var(--gutter) 64px; text-align: center;
}
.price-hero__title {
  margin: 0 auto; max-width: 720px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.1vw, 52px); line-height: 1.16;
  letter-spacing: -0.05em; color: var(--color-white); text-wrap: balance;
}
.price-hero__lede {
  margin: 22px auto 0; max-width: 620px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.price-hero__note { margin-top: 22px; font-size: 13px; color: rgba(255,255,255,0.42); }

/* ---------- Billing toggle ---------- */
.billing {
  max-width: var(--site-max); margin: 0 auto;
  display: flex; justify-content: center; padding: 48px var(--gutter) 8px;
}
.billing__switch {
  display: inline-flex; background: var(--color-bg-card-purple);
  border-radius: 9999px; padding: 5px; gap: 2px;
}
.billing__opt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 11px 24px; border-radius: 9999px; border: 0; cursor: pointer;
  color: var(--color-text-muted); background: transparent;
  transition: background .2s ease, color .2s ease;
}
.billing__opt.is-on { color: var(--color-text-primary); background: var(--color-white); }
.billing__badge {
  font-size: 11px; font-weight: 600; background: var(--color-primary);
  color: #fff; padding: 2px 8px; border-radius: 9999px;
}

/* ---------- Tier cards ---------- */
.tiers {
  max-width: var(--site-max); margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch;
}
.tier {
  display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--line); border-radius: var(--tier-radius); padding: 32px;
  background: #fff;
}
.tier--popular {
  border: 1.5px solid var(--color-accent);
  background: var(--color-bg-page);
}
.tier--dark { background: #0C0A18; color: #fff; border-color: #0C0A18; }

.tier__badge {
  position: absolute; top: -13px; left: 32px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--color-accent); color: #fff; padding: 5px 12px; border-radius: 9999px;
}
.tier__name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: 10px;
}
.tier--popular .tier__name { color: var(--color-accent); }
.tier--dark .tier__name { color: rgba(255,255,255,0.5); }

.tier__for {
  font-size: 13px; color: var(--color-text-muted);
  margin-bottom: 22px; min-height: 36px;
}
.tier--dark .tier__for { color: rgba(255,255,255,0.6); }

.tier__price {
  font-family: var(--font-display); font-size: 38px; font-weight: 400;
  letter-spacing: -0.04em; color: var(--color-text-primary); line-height: 1;
}
.tier--dark .tier__price { color: #fff; }
.tier__per { font-size: 14px; font-weight: 500; color: var(--color-text-faint); font-family: var(--font-body); }

.tier__allowance {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--color-text-primary); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.tier--popular .tier__allowance { border-top-color: #E4D9FF; }
.tier--dark .tier__allowance { border-top-color: rgba(255,255,255,0.14); color: #fff; }

.tier__info {
  cursor: help; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #C9C9D4; color: var(--color-text-faint); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-weight: 500;
}
.tier__minutes { font-size: 12.5px; color: var(--color-text-faint); margin-top: 2px; }
.tier--dark .tier__minutes { color: rgba(255,255,255,0.45); }

.tier__features {
  margin-top: 18px; display: flex; flex-direction: column; gap: 11px;
  font-size: 14px; color: var(--color-text-muted); flex: 1;
}
.tier__features .is-off { color: #C9C9D4; }
.tier--dark .tier__features { color: rgba(255,255,255,0.72); }

.tier__cta {
  margin-top: 22px; display: block; text-align: center;
  font-family: var(--font-nav); font-weight: 600; font-size: 14px;
  padding: 13px; border-radius: 0; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tier__cta--outline { color: var(--color-primary); border-color: var(--color-primary); background: transparent; }
.tier__cta--outline:hover { background: var(--color-primary); color: #fff; }
.tier__cta--solid { color: #fff; background: var(--color-accent); }
.tier__cta--solid:hover { background: #5200D6; color: #fff; }
.tier__cta--white { color: var(--color-text-primary); background: #fff; }
.tier__cta--white:hover { background: var(--color-accent); color: #fff; }

/* ---------- Value line ---------- */
.value-line { max-width: var(--site-max); margin: 0 auto; padding: 70px var(--gutter); text-align: center; }
.value-line p {
  font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 400; letter-spacing: -0.03em; line-height: 1.4;
  color: var(--color-text-primary); max-width: 760px; margin: 0 auto;
}

/* ---------- FAQ (pricing variant) ---------- */
.price-faq {
  max-width: var(--site-max); margin: 0 auto;
  padding: 80px var(--gutter) 90px; border-top: 1px solid var(--line);
}
.price-faq .h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.2; }
.price-faq .faq__q { font-size: 16px; }

/* ---------- Enterprise band ---------- */
.ent-band {
  background: var(--color-bg-page);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ent-band__inner {
  max-width: var(--site-max); margin: 0 auto; padding: 70px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 60px;
}
.ent-band__copy { max-width: 640px; }
.ent-band__title {
  margin-bottom: 12px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(25px, 2.9vw, 32px); letter-spacing: -0.04em; color: var(--color-text-primary);
}
.ent-band__body { font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }
.btn--primary { background: var(--color-primary); color: #fff; padding: 15px 30px; flex: none; }
.btn--primary:hover { background: var(--color-accent); color: #fff; }

/* ---------- Closing CTA (pricing variant) ---------- */
.cta__title--lg { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 26px; }
.cta--pricing .cta__actions { margin-bottom: 20px; }
.cta__fineprint { font-size: 13px; color: rgba(255,255,255,0.45); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .tiers { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .tier__for { min-height: 0; }
}
@media (max-width: 900px) {
  .price-hero__body { padding: 56px var(--gutter) 48px; }
  .billing { padding: 36px var(--gutter) 8px; }
  .tiers { padding: 32px var(--gutter) 0; }
  .value-line { padding: 52px var(--gutter); }
  .price-faq { padding: 56px var(--gutter) 64px; }
  .ent-band__inner { flex-direction: column; align-items: flex-start; gap: 28px; padding: 56px var(--gutter); }
  .ent-band__copy { max-width: 100%; }
}
@media (max-width: 640px) {
  .price-hero__body { padding: 44px var(--gutter) 40px; }
  .billing { padding: 30px var(--gutter) 6px; }
  .billing__switch { width: 100%; }
  .billing__opt { flex: 1; justify-content: center; padding: 12px 12px; font-size: 13.5px; }
  .billing__badge { font-size: 10px; padding: 2px 6px; }

  .tiers { grid-template-columns: 1fr; gap: 26px; padding: 30px var(--gutter) 0; }
  .tier { padding: 26px 22px; }
  .tier__badge { left: 22px; }

  .value-line { padding: 44px var(--gutter); }
  .btn--primary { width: 100%; }
  .cta--pricing .cta__actions .btn { flex: 1 1 100%; }
}

/* ---------- Booking calendar skeleton ---------- */
/* Overlays the iframe rather than stacking above it, so the frame keeps a
   single height and there is no jump when the real calendar paints. */
.cal-skeleton {
  position: absolute; inset: 8px; z-index: 2; background: #fff;
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 26px;
  padding: 26px 22px; overflow: hidden;
}
.cal-frame.is-loaded .cal-skeleton { display: none; }
.cal-skeleton__col { display: flex; flex-direction: column; gap: 12px; }
.cal-skeleton__col--info { border-right: 1px solid var(--line); padding-right: 26px; }
.cal-skeleton__col--slots { border-left: 1px solid var(--line); padding-left: 26px; }

.sk {
  display: block; border-radius: 4px;
  background: linear-gradient(90deg, #F1EEF8 25%, #E8E3F4 37%, #F1EEF8 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk--line { height: 11px; }
.sk--lg   { height: 18px; }
.sk--dot  { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 6px; }
.sk--slot { height: 40px; border-radius: 0; }
.cal-skeleton__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px;
}
.cal-skeleton__grid::before { content: ''; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 900px) {
  .cal-skeleton { grid-template-columns: 1fr; min-height: 420px; }
  .cal-skeleton__col--info { border-right: 0; padding-right: 0; }
  .cal-skeleton__col--slots { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ============================================================
   VOICE INTERVIEWS  (/voice-interviews/)
   Values transcribed from the "Talvin Voice Interviews" export.
   ============================================================ */

/* ---------- Hero ---------- */
.vi-hero__glow { top: -852px; }
.vi-hero__wordmark { top: 78px; color: rgba(99,0,255,0.09); }
.vi-hero__body {
  position: relative; z-index: 2;
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 560px; gap: 72px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.vi-hero__title {
  margin: 0; max-width: 620px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.vi-hero__lede {
  margin-top: 24px; max-width: 540px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.vi-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.vi-hero__stats {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.vi-hero__arrow { color: #B99CFF; }
.vi-hero__dot { color: rgba(255,255,255,0.28); }

/* Live transcript card */
.vi-transcript {
  position: relative; background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.vi-transcript__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16);
}
.vi-transcript__live { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600; color: #fff; }
.vi-transcript__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99,0,255,0.25);
  animation: vi-pulse 2s ease-in-out infinite;
}
@keyframes vi-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99,0,255,0.25); }
  50%      { box-shadow: 0 0 0 7px rgba(99,0,255,0.10); }
}
.vi-transcript__meta { font-size: 12px; color: rgba(255,255,255,0.45); }
.vi-transcript__thread { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }

.vi-msg { display: flex; gap: 12px; }
.vi-msg--them { flex-direction: row-reverse; }
.vi-msg__av {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.vi-msg__av--sally { background: var(--color-accent); color: #fff; }
.vi-msg__av--cand { background: url("../img/avatar-silva.png") 50% 30% / cover no-repeat; }
.vi-msg__b {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 15px;
}
.vi-msg__b--outline {
  background: transparent; color: rgba(255,255,255,0.6);
  border: 1px solid rgba(239,241,255,0.18);
}
.vi-msg__b--probe {
  background: rgba(99,0,255,0.16); border: 1px solid rgba(185,156,255,0.5);
}
.vi-msg__tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 7px;
}
.vi-msg__probe { font-size: 14px; line-height: 1.6; color: #fff; }

.vi-transcript__foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(239,241,255,0.16);
  display: flex; align-items: center; gap: 14px;
}
.vi-transcript__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4); flex: none;
}
.vi-transcript__verified { font-size: 12px; color: rgba(255,255,255,0.45); flex: none; }
.vi-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.vi-wave span {
  width: 3px; border-radius: 2px; background: rgba(255,255,255,0.5); flex: none;
  animation: vi-bar 1.6s ease-in-out infinite;
}
.vi-wave span.is-dim { background: rgba(255,255,255,0.32); }
.vi-wave span:nth-child(3n)   { animation-delay: .15s; }
.vi-wave span:nth-child(3n+1) { animation-delay: .3s; }
@keyframes vi-bar { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }

/* ---------- Three pillars ---------- */
.vi-pillars__title { margin-bottom: 52px; max-width: 760px; }
.vi-pillars__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.vi-pillar { padding: 36px 48px 0 0; border-right: 1px solid var(--line); }
.vi-pillar:nth-child(2) { padding: 36px 48px 0; }
.vi-pillar:last-child { padding: 36px 0 0 48px; border-right: 0; }
.vi-pillar__num {
  font-family: var(--font-display); font-size: clamp(30px, 3.1vw, 38px);
  font-weight: 400; letter-spacing: -0.05em; color: var(--color-primary); line-height: 1;
}
.vi-pillar__num--accent { color: var(--color-accent); }
.vi-pillar__lead {
  margin-top: 12px; font-size: 19px; font-weight: 600;
  letter-spacing: -0.03em; color: var(--color-text-primary);
}
.vi-pillar__body { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.vi-pillar__viz { margin-top: 30px; }
.vi-viz__cap {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 16px;
}
.vi-bars { display: flex; align-items: flex-end; gap: 22px; height: 158px; }
.vi-bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.vi-bars__val { font-size: 11px; color: var(--color-text-faint); margin-bottom: 8px; }
.vi-bars__val--accent { font-family: var(--font-display); font-size: 13px; color: var(--color-accent); }
.vi-bars__bar { border-radius: 5px; }
.vi-bars__bar--manual {
  height: 118px;
  background: repeating-linear-gradient(135deg, #EDEAF4 0 6px, #E4E0EE 6px 12px);
}
.vi-bars__bar--talvin { height: 14px; background: var(--color-accent); }
.vi-bars__lbl { font-size: 11.5px; color: var(--color-text-faint); margin-top: 10px; }
.vi-bars__lbl--on { color: var(--color-text-primary); font-weight: 600; }

.vi-compare { display: flex; align-items: stretch; gap: 14px; margin-top: 28px; }
.vi-compare__doc, .vi-compare__score { border-radius: 8px; padding: 12px; }
.vi-compare__doc { flex: 1; border: 1px solid var(--line-purple); background: #fff; }
.vi-compare__score { flex: 1.3; border: 1px solid var(--color-accent); background: var(--color-bg-card-purple); }
.vi-compare__h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #C9C9D4; margin-bottom: 9px;
}
.vi-compare__h--accent { color: var(--color-accent); }
.vi-compare__line { display: block; height: 5px; background: #EDEAF4; border-radius: 3px; margin-bottom: 6px; }
.vi-compare__line:last-child { margin-bottom: 0; }
.vi-compare__arrow { align-self: center; font-size: 15px; color: #C9C9D4; }
.vi-score { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.vi-score:last-child { margin-bottom: 0; }
.vi-score > span:first-child { font-size: 11px; color: var(--color-text-primary); width: 58px; flex: none; }
.vi-score__bar {
  flex: 1; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #6300FF 0 var(--v), #E4D9FF var(--v) 100%);
}

.vi-equal {
  position: relative; display: flex; align-items: flex-end; gap: 5px;
  height: 64px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.vi-equal > span:not(.vi-equal__rule) {
  flex: 1; height: 44px; background: var(--color-bg-purple-soft); border-radius: 2px 2px 0 0;
}
.vi-equal__rule {
  position: absolute; left: 0; right: 0; top: 20px;
  border-top: 1.5px dashed var(--color-accent); height: 0; pointer-events: none;
}
.vi-equal__axis {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-size: 11px; color: var(--color-text-faint); gap: 12px;
}
.vi-equal__note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Demo band ---------- */
.vi-demo-band { background: var(--color-bg-page); border-bottom: 1px solid var(--line); padding: 80px var(--gutter); }
.vi-demo {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center;
  background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 36px;
}
.vi-demo__video { position: relative; border-radius: 12px; overflow: hidden; background: #0B0616; }
.vi-demo__video img { display: block; width: 100%; height: 268px; object-fit: cover; object-position: top left; }
.vi-demo__scrim {
  position: absolute; inset: 0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.68) 100%);
}
.vi-demo__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.vi-demo__play {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.vi-demo__video:hover .vi-demo__play { transform: scale(1.06); background: rgba(255,255,255,0.22); }
.vi-demo__play i {
  width: 0; height: 0; border-left: 14px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px;
}
.vi-demo__cap {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7); text-align: center;
}
.vi-demo__title {
  margin-bottom: 12px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2;
  letter-spacing: -0.04em; color: var(--color-text-primary);
}
.vi-demo__lede { margin-bottom: 22px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
#vi-form { display: flex; flex-direction: column; gap: 10px; }
#vi-form input {
  width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--color-text-primary);
  background: #fff; border: 1px solid var(--line-purple); border-radius: 0;
  padding: 13px 14px; outline: none; transition: border-color .18s ease;
}
#vi-form input:focus { border-color: var(--color-accent); }
#vi-form button[type=submit] {
  width: 100%; font-family: var(--font-nav); font-weight: 600; font-size: 15px;
  color: #fff; background: var(--color-accent); border: 0; border-radius: 0;
  padding: 15px 20px; cursor: pointer; transition: background .2s ease;
}
#vi-form button[type=submit]:hover { background: #5200D6; }
.vi-form__note { font-size: 12.5px; color: var(--color-text-faint); }
.vi-sent { border: 1px solid var(--color-accent); background: var(--color-bg-card-purple); border-radius: 8px; padding: 18px; }
.vi-sent__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.vi-sent__body { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.vi-sent__body strong { color: var(--color-text-primary); font-weight: 600; }
#vi-reset {
  display: inline-block; margin-top: 12px; font-size: 13px; color: var(--color-accent);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body);
}
#vi-reset:hover { color: var(--color-primary); }

/* ---------- How it works ---------- */
.vi-how__title { margin-bottom: 52px; max-width: 820px; }
.vi-how__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.vi-step { padding: 36px 56px 40px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vi-step:nth-child(2) { padding: 36px 0 40px 56px; border-right: 0; }
.vi-step:nth-child(3) { padding: 36px 56px 0 0; border-bottom: 0; }
.vi-step:nth-child(4) { padding: 36px 0 0 56px; border-right: 0; border-bottom: 0; }
.vi-step__num {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em;
  color: var(--color-accent); margin-bottom: 14px;
}
.vi-step__title {
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-text-primary); margin-bottom: 10px;
}
.vi-step__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.vi-step__viz { margin-top: 26px; }

.vi-connect { display: flex; align-items: center; gap: 16px; }
.vi-connect__logos { flex: none; display: flex; align-items: center; gap: 8px; }
.vi-connect__logos img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.vi-connect__arrow { font-size: 15px; color: #C9C9D4; }
.vi-connect__card { flex: 1; border: 1px solid var(--line-purple); border-radius: 8px; background: #fff; padding: 12px 14px; }
.vi-connect__h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 9px;
}
.vi-connect__rows { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--color-text-primary); }
.vi-connect__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.vi-connect__rows .is-muted { color: var(--color-text-faint); }
.vi-connect__edit { color: var(--color-accent); }

.vi-live { border: 1px solid var(--line-purple); border-radius: 10px; padding: 18px; background: #fff; }
.vi-live__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vi-live__count { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.vi-live__tz { font-size: 11.5px; color: var(--color-text-faint); }
.vi-live__grid { display: grid; grid-template-columns: repeat(18, 1fr); gap: 5px; }
.vi-live__grid span {
  height: 12px; border-radius: 2px; background: var(--color-accent);
  animation: vi-blink 3s ease-in-out infinite;
}
.vi-live__grid span.is-sched { background: #E4D9FF; animation: none; }
.vi-live__grid span:nth-child(4n)   { animation-delay: .4s; }
.vi-live__grid span:nth-child(5n)   { animation-delay: .9s; }
.vi-live__grid span:nth-child(7n)   { animation-delay: 1.5s; }
@keyframes vi-blink { 0%,100% { opacity: 1; } 45% { opacity: .45; } }
.vi-live__key { display: flex; gap: 20px; margin-top: 14px; font-size: 11.5px; color: var(--color-text-muted); }
.vi-live__key span { display: flex; align-items: center; gap: 7px; }
.vi-live__sw { width: 9px; height: 9px; border-radius: 2px; background: var(--color-accent); flex: none; }
.vi-live__sw--sched { background: #E4D9FF; }

.vi-probe { border: 1px solid var(--line-purple); border-radius: 10px; background: var(--color-bg-page); padding: 20px; }
.vi-probe__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.vi-probe__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); flex: none;
}
.vi-probe__switch {
  display: inline-flex; background: #fff; border: 1px solid var(--line-purple);
  border-radius: 9999px; padding: 3px; gap: 2px;
}
.vi-probe__opt {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 9999px; border: 0; cursor: pointer;
  color: var(--color-text-muted); background: transparent;
  transition: background .2s ease, color .2s ease;
}
.vi-probe__opt.is-on { color: #fff; background: var(--color-accent); }
.vi-probe__h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 7px;
}
.vi-probe__h--accent { color: var(--color-accent); margin: 14px 0 7px; }
.vi-probe__said {
  font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted);
  padding-bottom: 14px; border-bottom: 1px solid #EDEAF4;
}
.vi-probe__reply { font-size: 14px; line-height: 1.6; color: var(--color-text-primary); min-height: 44px; }

.vi-rank { border: 1px solid var(--line-purple); border-radius: 10px; overflow: hidden; background: #fff; }
.vi-rank__head, .vi-rank__row { display: grid; grid-template-columns: 1fr 60px 1fr; }
.vi-rank__head {
  background: var(--color-bg-card-purple); padding: 11px 16px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-gray-4);
}
.vi-rank__row { padding: 14px 16px; border-top: 1px solid #F1EDF8; font-size: 12.5px; align-items: center; }
.vi-rank__who { display: flex; align-items: center; gap: 9px; color: var(--color-text-primary); font-weight: 600; }
.vi-rank__av { width: 24px; height: 24px; border-radius: 50%; flex: none; background-size: cover; background-position: 50% 30%; }
.vi-rank__score { font-family: var(--font-display); color: var(--color-primary); font-size: 15px; }
.vi-rank__score--top { color: var(--color-accent); }
.vi-rank__why { color: var(--color-text-muted); line-height: 1.5; }
.vi-rank__foot { padding: 12px 16px; border-top: 1px solid #F1EDF8; font-size: 12px; color: var(--color-text-faint); }

/* ---------- What makes it different ---------- */
.vi-diff__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 52px; }
.vi-diff__copy p { margin-bottom: 16px; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.vi-diff__copy p:nth-of-type(2) { margin-bottom: 24px; }
.vi-diff__pull {
  padding: 20px 24px; border-left: 2px solid var(--color-accent); background: #fff;
  font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.45; letter-spacing: -0.03em; color: var(--color-text-primary);
}
.vi-tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; }
.vi-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vi-tbl th, .vi-tbl td {
  text-align: left; padding: 20px 26px; border-top: 1px solid #F1EDF8;
  vertical-align: top; line-height: 1.55;
}
.vi-tbl thead th {
  border-top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-gray-4); background: #F9F6FF;
}
.vi-tbl thead th:first-child { width: 210px; }
.vi-tbl thead th.is-talvin { color: #fff; background: var(--color-primary); }
.vi-tbl tbody th { font-weight: 600; color: var(--color-text-primary); }
.vi-tbl tbody td { color: var(--color-text-muted); }
.vi-tbl tbody td.is-dim { color: #C9C9D4; }
.vi-tbl tbody td.is-talvin { color: var(--color-text-primary); background: #FCFAFF; font-weight: 500; }
.vi-tbl__lbl { display: none; }

/* ---------- Fraud prevention ---------- */
.vi-fraud { position: relative; background: #0C0A18; color: #fff; overflow: hidden; }
.vi-fraud__glow {
  position: absolute; top: -320px; right: -220px; width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(99,0,255,0.34) 0%, rgba(4,6,17,0) 68%);
  pointer-events: none;
}
.vi-fraud__inner { position: relative; }
.vi-fraud__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 52px; }
.vi-fraud__title { color: #fff; }
.vi-fraud__p { margin-bottom: 16px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.68); }
.vi-fraud__p--strong { margin-bottom: 0; color: #fff; }
.vi-fraud__link {
  display: inline-block; margin-top: 22px; font-size: 14px; color: #B99CFF;
  border-bottom: 1px solid rgba(185,156,255,0.4); padding-bottom: 3px;
}
.vi-fraud__link:hover { color: #fff; border-bottom-color: #fff; }
.vi-fraud__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vi-fcard {
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 11px; padding: 28px;
}
.vi-fcard__viz {
  border-radius: 8px; background: #0B0616; border: 1px solid rgba(239,241,255,0.14);
  margin-bottom: 22px; position: relative; overflow: hidden;
}
.vi-fcard__viz--video { height: 119px; }
.vi-fcard__face {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background-size: cover; background-position: 50% 30%;
}
.vi-fcard__box {
  position: absolute; left: calc(50% - 34px); top: calc(50% - 30px);
  width: 68px; height: 60px; border: 1px solid var(--color-accent); border-radius: 6px;
  animation: vi-scan 3s ease-in-out infinite;
}
@keyframes vi-scan { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.vi-fcard__match {
  position: absolute; bottom: 9px; left: 12px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #B99CFF;
}
.vi-fcard__rec {
  position: absolute; bottom: 9px; right: 12px; display: flex; align-items: center;
  gap: 6px; font-size: 10px; color: rgba(255,255,255,0.5);
}
.vi-fcard__rec span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
  animation: vi-rec 1.6s ease-in-out infinite;
}
@keyframes vi-rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.vi-fcard__viz--rows {
  height: 96px; padding: 14px; display: flex; flex-direction: column;
  gap: 9px; justify-content: center;
}
.vi-fcard__viz--rows > div {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: rgba(255,255,255,0.7);
}
.vi-fcard__viz--rows > div.is-off { color: rgba(255,255,255,0.4); }
.vi-fcard__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.vi-fcard__dot--off { background: rgba(255,255,255,0.3); }
.vi-fcard__viz--link {
  height: 96px; padding: 14px; display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
}
.vi-fcard__url { font-size: 11px; font-family: var(--font-display); color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }
.vi-fcard__hr { height: 1px; background: rgba(239,241,255,0.16); }
.vi-fcard__used { display: flex; justify-content: space-between; font-size: 11px; color: #B99CFF; gap: 12px; }
.vi-fcard__dead { color: rgba(255,255,255,0.35); text-decoration: line-through; }
.vi-fcard__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 9px; }
.vi-fcard__body { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.62); }

/* ---------- Use cases ---------- */
.vi-uses__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 48px; }
.vi-uses__head p { font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.vi-uses__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.vi-use { padding: 32px 56px 32px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 24px; align-items: flex-start; }
.vi-use:nth-child(2) { padding: 32px 0 32px 56px; border-right: 0; }
.vi-use:nth-child(3) { padding: 32px 56px 0 0; border-bottom: 0; }
.vi-use:nth-child(4) { padding: 32px 0 0 56px; border-right: 0; border-bottom: 0; }
.vi-use__icon {
  flex: none; width: 64px; height: 64px; border-radius: 10px;
  background: var(--color-bg-card-purple); box-sizing: border-box;
}
.vi-use__icon--pixels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 10px; }
.vi-use__icon--pixels span { background: var(--color-accent); border-radius: 1px; }
.vi-use__icon--pixels span.is-lt { background: #C9A9FF; }
.vi-use__icon--wave { display: flex; align-items: center; justify-content: center; gap: 3px; }
.vi-use__icon--wave span { width: 3px; background: var(--color-accent); border-radius: 2px; }
.vi-use__icon--wave span.is-lt { background: #C9A9FF; }
.vi-use__icon--donut { display: flex; align-items: center; justify-content: center; }
.vi-use__icon--donut > span {
  width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(#6300FF 0 90%, #E4D9FF 90% 100%);
  display: flex; align-items: center; justify-content: center;
}
.vi-use__icon--donut > span > span {
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg-card-purple);
  font-size: 9px; font-weight: 700; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.vi-use__icon--lines { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px; }
.vi-use__icon--lines span { height: 5px; background: var(--color-accent); border-radius: 3px; }
.vi-use__icon--lines span.is-lt { background: #C9A9FF; }
.vi-use__title { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.vi-use__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

/* ---------- Enterprise ---------- */
.vi-ent__head { max-width: 760px; margin-bottom: 48px; }
.vi-ent__head .h2 { margin-bottom: 16px; }
.vi-ent__head p { font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.vi-ent__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; }
.vi-ent__card { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 36px; display: flex; flex-direction: column; }
.vi-ent__title { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 10px; }
.vi-ent__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.vi-ent__logos { margin-top: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vi-ent__logos img { width: 42px; height: 42px; border-radius: 9px; display: block; }
.vi-ent__logos img.is-ashby { object-fit: contain; background: #fff; border: 1px solid var(--line); box-sizing: border-box; padding: 3px; }
.vi-ent__more {
  width: 42px; height: 42px; border-radius: 9px; border: 1px dashed #D9D2EA;
  color: var(--color-text-faint); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.vi-ent__sync {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid #F1EDF8;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--color-text-muted);
}
.vi-ent__sync-k { font-weight: 600; color: var(--color-text-primary); }
.vi-ent__rows { margin: 24px 0 0; }
.vi-ent__rows > div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 0; border-top: 1px solid #F1EDF8; font-size: 14px;
}
.vi-ent__rows dt { color: var(--color-text-primary); }
.vi-ent__rows dd { margin: 0; font-size: 12px; font-weight: 600; }
.vi-ent__rows dd.is-on { color: var(--color-accent); }
.vi-ent__rows dd.is-never { color: var(--color-text-faint); }

/* ---------- Proof ---------- */
.vi-proof { display: grid; grid-template-columns: 1fr 420px; gap: 100px; align-items: center; }
.vi-proof__quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px); line-height: 1.42;
  letter-spacing: -0.03em; color: var(--color-text-primary);
}
.vi-proof__by { margin-top: 30px; display: flex; align-items: center; gap: 14px; }
.vi-proof__av {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: url("../img/avatar-beenali.png") 50% 22% / 190% auto no-repeat;
}
.vi-proof__meta { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.vi-proof__meta cite { color: var(--color-text-primary); font-weight: 600; font-style: normal; }
.vi-proof__stats { border-left: 1px solid var(--line); padding-left: 48px; }
.vi-proof__csat {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.vi-proof__csat-n { font-family: var(--font-display); font-size: 22px; color: var(--color-text-primary); letter-spacing: -0.03em; }
.vi-proof__csat-n span { font-size: 13px; color: var(--color-text-faint); }
.vi-proof__csat-t { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.cta__inner--wide { max-width: 680px; }

/* ---------- Voice interviews: responsive ---------- */
@media (max-width: 1200px) {
  .vi-hero__body { grid-template-columns: 1fr 460px; gap: 48px; }
  .vi-diff__head, .vi-fraud__head, .vi-uses__head { gap: 48px; }
  .vi-proof { grid-template-columns: 1fr 340px; gap: 56px; }
  .vi-demo { grid-template-columns: 1fr 320px; gap: 36px; }
  .vi-step  { padding-right: 36px !important; }
  .vi-step:nth-child(2), .vi-step:nth-child(4) { padding-left: 36px !important; }
  .vi-use   { padding-right: 36px !important; }
  .vi-use:nth-child(2), .vi-use:nth-child(4) { padding-left: 36px !important; }
  .vi-pillar { padding-right: 32px; }
  .vi-pillar:nth-child(2) { padding: 36px 32px 0; }
  .vi-pillar:last-child { padding-left: 32px; }
}

@media (max-width: 1024px) {
  .vi-hero__body {
    grid-template-columns: 1fr; gap: 44px;
    padding: 56px var(--gutter) 60px; align-items: start;
  }
  .vi-hero__title, .vi-hero__lede { max-width: 100%; }
  .vi-transcript { max-width: 560px; }
  .vi-fraud__cards { grid-template-columns: 1fr; gap: 16px; }
  .vi-ent__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Pillars, steps and use cases all collapse to a single column with
     horizontal rules replacing the vertical dividers. */
  .vi-pillars__grid, .vi-how__grid, .vi-uses__grid { grid-template-columns: 1fr; }
  /* nth-child selectors above carry !important at >=1200px, so these resets
     must match their specificity or the left indent leaks through. */
  .vi-pillar:nth-child(n), .vi-step:nth-child(n), .vi-use:nth-child(n) {
    padding: 28px 0 !important; border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .vi-pillar:last-child, .vi-step:last-child, .vi-use:last-child { border-bottom: 0 !important; }
  .vi-pillars__title, .vi-how__title { margin-bottom: 32px; }

  .vi-diff__head, .vi-fraud__head, .vi-uses__head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .vi-demo { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .vi-demo-band { padding: var(--section-y) var(--gutter); }
  .vi-proof { grid-template-columns: 1fr; gap: 40px; }
  .vi-proof__stats { border-left: 0; padding-left: 0; padding-top: 32px; border-top: 1px solid var(--line); }

  /* Comparison table → stacked cards, same pattern as the home page. */
  .vi-tbl-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .vi-tbl, .vi-tbl tbody, .vi-tbl tr, .vi-tbl th, .vi-tbl td { display: block; width: auto; }
  .vi-tbl thead { display: none; }
  .vi-tbl tbody tr {
    background: #fff; border: 1px solid var(--line-purple-soft);
    border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  }
  .vi-tbl tbody th {
    background: var(--color-bg-purple-pale); padding: 14px 20px; border-top: 0;
    font-size: 15px;
  }
  .vi-tbl tbody td { padding: 14px 20px; border-top: 1px solid #F1EDF8; }
  .vi-tbl__lbl {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-gray-4); margin-bottom: 6px;
  }
  .vi-tbl td.is-talvin .vi-tbl__lbl { color: var(--color-primary); }
}

@media (max-width: 640px) {
  .vi-hero__body { padding: 44px var(--gutter) 48px; gap: 32px; }
  .vi-hero__actions .btn { flex: 1 1 100%; }
  .vi-hero__wordmark { top: 54px; letter-spacing: 0.22em; text-indent: 0.22em; }
  /* Stats stack, so the interpunct separator no longer has a job. */
  .vi-hero__stats { flex-direction: column; align-items: flex-start; gap: 6px; }
  .vi-hero__dot { display: none; }
  .vi-transcript { padding: 18px 18px 20px; }
  .vi-transcript__top { flex-wrap: wrap; gap: 8px; }
  .vi-wave { display: none; }        /* too cramped to read at this width */
  .vi-transcript__foot { justify-content: space-between; }

  .vi-bars { height: 132px; }
  .vi-compare { flex-direction: column; }
  .vi-compare__arrow { transform: rotate(90deg); }
  .vi-connect { flex-wrap: wrap; gap: 12px; }
  .vi-connect__card { flex: 1 1 100%; }
  .vi-connect__arrow { display: none; }
  .vi-live__grid { grid-template-columns: repeat(12, 1fr); }
  .vi-probe__switch { width: 100%; }
  .vi-probe__opt { flex: 1; padding: 8px 6px; }
  .vi-rank__head, .vi-rank__row { grid-template-columns: 1fr 44px; }
  .vi-rank__why { grid-column: 1 / -1; margin-top: 6px; }
  .vi-rank__head span:last-child { display: none; }

  .vi-fcard { padding: 22px; }
  .vi-use { gap: 16px; }
  .vi-use__icon { width: 52px; height: 52px; }
  .vi-ent__card { padding: 26px 22px; }
  .vi-demo { padding: 18px; }
  .vi-demo__video img { height: 200px; }
  .vi-proof__csat { align-items: flex-start; }
}

/* ============================================================
   JOB TRYOUTS  (/job-tryouts/)
   Values transcribed from the "Talvin Job Tryouts" export.
   ============================================================ */

/* ---------- Hero ---------- */
.jt-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.jt-hero__glow {
  position: absolute; top: -852px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1300px;
  background: radial-gradient(circle, rgba(99,0,255,0.40) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.jt-hero__wordmark {
  position: absolute; left: 0; right: 0; top: 78px;
  font-family: var(--font-decorative);
  font-size: clamp(88px, 17vw, 240px); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em; text-align: center;
  color: rgba(99,0,255,0.09);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.jt-hero__body {
  position: relative; z-index: 2;
  max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 570px; gap: 72px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.jt-hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 20px;
}
.jt-hero__title {
  margin: 0; max-width: 640px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -0.05em; color: var(--color-white); text-wrap: balance;
}
.jt-hero__lede {
  margin: 24px 0 0; max-width: 540px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.jt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.jt-hero__stats {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}

/* Scenario card */
.jt-scen {
  position: relative;
  background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.jt-scen__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16);
}
.jt-scen__live { display: flex; align-items: center; gap: 11px; }
.jt-scen__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99,0,255,0.25); flex: none;
}
.jt-scen__title { font-size: 13px; font-weight: 600; color: #fff; }
.jt-scen__meta { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.jt-scen__setup {
  margin-top: 18px; padding: 12px 14px; border-radius: 9px;
  background: rgba(99,0,255,0.14); border: 1px solid rgba(185,156,255,0.35);
}
.jt-scen__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 6px;
}
.jt-scen__setup-body { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.86); }
.jt-scen__thread { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.jt-msg { display: flex; gap: 12px; }
.jt-msg--them { flex-direction: row-reverse; }
.jt-msg__ai {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.jt-msg__avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.jt-msg__avatar--frontdesk { background: url("../img/avatar-frontdesk.png") 50% 30% / cover no-repeat; }
.jt-msg__bubble {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.86);
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 15px;
}
.jt-msg__bubble--outline {
  color: rgba(255,255,255,0.6); background: transparent;
  border: 1px solid rgba(239,241,255,0.18);
}
.jt-msg__bubble--react {
  background: rgba(99,0,255,0.16); border: 1px solid rgba(185,156,255,0.5);
}
.jt-msg__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 7px;
}
.jt-msg__react-body { font-size: 14px; line-height: 1.6; color: #fff; }

.jt-scen__foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(239,241,255,0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.jt-scen__scoring {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.jt-scen__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.jt-tag {
  font-size: 11px; color: rgba(255,255,255,0.4);
  border: 1px solid rgba(239,241,255,0.2); border-radius: 9999px; padding: 5px 11px;
}
.jt-tag--on { color: #B99CFF; border-color: rgba(185,156,255,0.4); }

/* ---------- Shared two-column intro ---------- */
.jt-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; margin-bottom: 52px;
}
.jt-split--end { align-items: end; margin-bottom: 40px; }
.jt-split--tight { margin-bottom: 48px; }
.jt-split__p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.jt-split__p--last { margin-bottom: 0; }

/* ---------- Why Job Tryouts: three pillars ---------- */
.jt-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.jt-pillar { padding: 36px 48px 0 0; border-right: 1px solid var(--line); }
.jt-pillar:nth-child(2) { padding: 36px 48px 0; }
.jt-pillar:last-child { padding: 36px 0 0 48px; border-right: 0; }
.jt-pillar__title {
  font-size: 19px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-text-primary); margin-bottom: 9px;
}
.jt-pillar__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

.jt-viz {
  height: 96px; border-radius: 10px; background: var(--color-bg-card-purple);
  box-sizing: border-box; margin-bottom: 22px;
}
.jt-viz--chat { padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.jt-viz__b { font-size: 11.5px; line-height: 1.45; padding: 8px 11px; }
.jt-viz__b--ai {
  align-self: flex-start; max-width: 78%; color: #fff;
  background: var(--color-accent); border-radius: 8px 8px 8px 2px;
}
.jt-viz__b--cand {
  align-self: flex-end; max-width: 70%; color: var(--color-primary);
  background: #fff; border: 1px solid #E4D9FF; border-radius: 8px 8px 2px 8px;
}
.jt-viz--score { padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.jt-viz__row { display: flex; align-items: center; gap: 9px; }
.jt-viz__lbl { font-size: 11px; color: var(--color-primary); width: 96px; flex: none; }
.jt-viz__bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #6300FF 0 var(--p), #E4D9FF var(--p) 100%);
}
.jt-viz--evid { padding: 14px; display: flex; align-items: center; gap: 12px; }
.jt-viz__card { flex: 1; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 10px; }
.jt-viz__card--on { flex: 1.25; border-color: var(--color-accent); }
.jt-viz__h {
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C9C9D4; margin-bottom: 7px;
}
.jt-viz__h--accent { color: var(--color-accent); }
.jt-viz__line { display: block; height: 4px; background: #EDEAF4; border-radius: 2px; margin-bottom: 5px; }
.jt-viz__quote { font-size: 10.5px; line-height: 1.45; color: var(--color-primary); }
.jt-viz__arrow { font-size: 14px; color: #C9A9FF; flex: none; }

/* ---------- Worked example ---------- */
.jt-example { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.jt-trans { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; overflow: hidden; }
.jt-trans__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 28px; border-bottom: 1px solid #F1EDF8; background: #F9F6FF;
}
.jt-trans__live { display: flex; align-items: center; gap: 10px; }
.jt-trans__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); flex: none; }
.jt-trans__title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.jt-trans__meta { font-size: 11.5px; color: var(--color-text-faint); white-space: nowrap; }
.jt-trans__body { padding: 28px; display: flex; flex-direction: column; gap: 20px; }

.jt-turn { display: flex; gap: 14px; }
.jt-turn--them { flex-direction: row-reverse; }
.jt-turn__col { text-align: right; }
.jt-turn__ai {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.jt-turn__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: url("../img/avatar-candidate-ae.png") 50% 30% / cover no-repeat;
}
.jt-turn__who {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-gray-4); margin-bottom: 8px;
}
.jt-turn__who--accent { color: var(--color-accent); }
.jt-turn__said { font-size: 15px; line-height: 1.7; color: var(--color-text-primary); padding: 14px 18px; }
.jt-turn__said--ai { background: var(--color-bg-card-purple); border-radius: 12px 12px 12px 3px; }
.jt-turn__said--react {
  background: var(--color-bg-card-purple); border: 1px solid #D9C6FF;
  border-radius: 12px 12px 12px 3px;
}
.jt-turn__said--cand {
  border: 1px solid var(--line-purple); border-radius: 12px 12px 3px 12px; text-align: left;
}

.jt-scored { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px; }
.jt-scored__h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-gray-4); margin-bottom: 20px;
}
.jt-crit { padding: 18px 0; border-bottom: 1px solid #F1EDF8; }
.jt-crit:first-child { padding-top: 0; }
.jt-crit--last { padding-bottom: 0; border-bottom: 0; }
.jt-crit__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.jt-crit__name { font-size: 14.5px; font-weight: 600; color: var(--color-text-primary); }
.jt-crit__verdict { font-family: var(--font-display); font-size: 14px; color: var(--color-accent); flex: none; }
.jt-crit__verdict--partial { color: var(--color-primary); }
.jt-crit__why { font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }
.jt-scored__note {
  margin-top: 24px; padding: 18px 20px; border-radius: 12px;
  background: var(--color-bg-card-purple);
  font-family: var(--font-display); font-size: 16px; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--color-primary);
}

/* ---------- How it works ---------- */
.jt-how__title { margin-bottom: 52px; max-width: 820px; }
.jt-how { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.jt-step { padding: 36px 56px 40px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jt-step:nth-child(2) { padding: 36px 0 40px 56px; border-right: 0; }
.jt-step:nth-child(3) { padding: 36px 56px 0 0; border-bottom: 0; }
.jt-step:nth-child(4) { padding: 36px 0 0 56px; border-right: 0; border-bottom: 0; }
.jt-step__num {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em;
  color: var(--color-accent); margin-bottom: 14px;
}
.jt-step__title {
  font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--color-text-primary); margin-bottom: 10px;
}
.jt-step__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }

/* 01 template library */
.jt-lib {
  margin-top: 26px; border: 1px solid var(--line-purple);
  border-radius: 10px; background: #fff; overflow: hidden;
}
.jt-lib__h {
  padding: 11px 16px; background: var(--color-bg-card-purple);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-gray-4);
}
.jt-lib__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px; border-top: 1px solid #F1EDF8;
  font-size: 13px; color: var(--color-text-muted);
}
.jt-lib__name { color: var(--color-text-primary); font-weight: 600; }
.jt-lib__pill {
  font-size: 11px; color: #fff; background: var(--color-accent);
  border-radius: 9999px; padding: 4px 10px; flex: none;
}
.jt-lib__use { font-size: 11px; color: var(--color-accent); flex: none; }
.jt-lib__foot { padding: 12px 16px; border-top: 1px solid #F1EDF8; font-size: 12px; color: var(--color-text-faint); }

/* 02 temperament */
.jt-temp {
  margin-top: 26px; border: 1px solid var(--line-purple);
  border-radius: 10px; background: var(--color-bg-page); padding: 20px;
}
.jt-temp__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.jt-temp__label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); flex: none;
}
.jt-temp__switch {
  display: inline-flex; background: #fff; border: 1px solid var(--line-purple);
  border-radius: 9999px; padding: 3px; gap: 2px;
}
.jt-temp__opt {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  padding: 7px 16px; border-radius: 9999px; border: 0; cursor: pointer;
  color: var(--color-text-muted); background: transparent;
  transition: background .2s ease, color .2s ease;
}
.jt-temp__opt.is-on { color: #fff; background: var(--color-accent); }
.jt-temp__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 7px;
}
.jt-temp__kicker--accent { color: var(--color-accent); margin: 14px 0 7px; }
.jt-temp__pressure {
  font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted);
  padding-bottom: 14px; border-bottom: 1px solid #EDEAF4;
}
.jt-temp__line { font-size: 14px; line-height: 1.6; color: var(--color-text-primary); min-height: 44px; }

/* 03 taking the tryout */
.jt-take {
  margin-top: 26px; border: 1px solid var(--line-purple); border-radius: 10px;
  background: #0C0A18; padding: 20px; color: #fff;
}
.jt-take__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.jt-take__url { font-size: 12px; color: rgba(255,255,255,0.6); }
.jt-take__pill {
  font-size: 11px; color: #B99CFF; border: 1px solid rgba(185,156,255,0.4);
  border-radius: 9999px; padding: 4px 10px; flex: none; white-space: nowrap;
}
.jt-take__row { display: flex; align-items: center; gap: 14px; }
.jt-take__mic {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--color-accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(99,0,255,0.18);
}
.jt-take__mic span { width: 12px; height: 18px; border-radius: 6px; background: #fff; display: block; }
.jt-take__time { font-size: 12px; color: rgba(255,255,255,0.5); flex: none; }
.jt-take__foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(239,241,255,0.16);
  font-size: 12px; color: rgba(255,255,255,0.5);
}
/* waveform, drawn from CSS so the markup stays clean */
.jt-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 34px; overflow: hidden; }
.jt-wave__b { width: 3px; border-radius: 2px; background: rgba(255,255,255,0.45); flex: none; }
.jt-wave__b--on { background: #B99CFF; }
.jt-wave__b--dim { background: rgba(255,255,255,0.32); }

/* 04 report */
.jt-report { margin-top: 26px; border: 1px solid var(--line-purple); border-radius: 10px; overflow: hidden; background: #fff; }
.jt-report__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--color-bg-card-purple);
}
.jt-report__name { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.jt-report__score { font-family: var(--font-display); font-size: 20px; color: var(--color-accent); }
.jt-report__body { padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.jt-report__row { display: flex; align-items: center; gap: 10px; }
.jt-report__lbl { font-size: 12px; color: var(--color-text-primary); width: 118px; flex: none; }
.jt-report__bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #6300FF 0 var(--p), #E4D9FF var(--p) 100%);
}
.jt-report__val { font-size: 11px; color: var(--color-text-faint); width: 26px; text-align: right; flex: none; }

/* ---------- Industries ---------- */
.jt-inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jt-ind { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px; }
.jt-ind__viz {
  height: 80px; border-radius: 10px; background: var(--color-bg-card-purple);
  margin-bottom: 22px; box-sizing: border-box;
}
.jt-ind__viz--bars { display: flex; align-items: flex-end; gap: 6px; padding: 12px 14px; }
.jt-ind__viz--bars > span { flex: 1; border-radius: 3px 3px 0 0; }
.jt-ind__ghost { height: 28px; background: #fff; border: 1px dashed #C9A9FF; border-bottom: 0; }
.jt-ind__viz--slider { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; gap: 8px; }
.jt-ind__ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-primary); }
.jt-ind__track { position: relative; height: 6px; border-radius: 3px; background: #E4D9FF; }
.jt-ind__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 72%; background: var(--color-accent); border-radius: 3px; }
.jt-ind__knob {
  position: absolute; left: 72%; top: -4px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-accent); transform: translateX(-50%);
}
.jt-ind__cap { font-size: 10px; color: var(--color-gray-4); }
.jt-ind__viz--dots { display: flex; align-items: center; justify-content: center; gap: 10px; }
.jt-ind__viz--dots span:nth-child(1) { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent); opacity: .9; }
.jt-ind__viz--dots span:nth-child(2) { width: 26px; height: 26px; border-radius: 50%; background: #C9A9FF; }
.jt-ind__viz--dots span:nth-child(3) { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #C9A9FF; }
.jt-ind__viz--dots span:nth-child(4) { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid #E4D9FF; }
.jt-ind__viz--chat { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; gap: 7px; }
.jt-ind__b { font-size: 10px; padding: 6px 9px; }
.jt-ind__b--ai { align-self: flex-start; color: #fff; background: var(--color-accent); border-radius: 7px 7px 7px 2px; }
.jt-ind__b--cand { align-self: flex-end; color: var(--color-primary); background: #fff; border: 1px solid #E4D9FF; border-radius: 7px 7px 2px 7px; }
.jt-ind__title { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.jt-ind__body { font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); }

/* ---------- Why simulation works (dark) ---------- */
.jt-sim { position: relative; background: #0C0A18; color: #fff; overflow: hidden; }
.jt-sim__glow {
  position: absolute; top: -320px; right: -220px; width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(99,0,255,0.34) 0%, rgba(4,6,17,0) 68%);
  pointer-events: none;
}
.jt-sim__inner {
  position: relative; max-width: var(--site-max); margin: 0 auto;
  padding: 88px var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.jt-sim__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 18px;
}
.jt-sim__title {
  margin: 0 0 30px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(29px, 3.4vw, 42px); line-height: 1.18;
  letter-spacing: -0.05em; color: #fff;
}
.jt-sim__p { margin: 0 0 18px; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.68); }
.jt-sim__p--last { margin-bottom: 28px; }

.jt-infer {
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 11px; padding: 26px;
}
.jt-infer__h {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px;
}
.jt-infer__rows { display: flex; flex-direction: column; gap: 18px; }
.jt-infer__lbl { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 9px; }
.jt-infer__lbl--accent { color: #B99CFF; }
.jt-infer__row { display: flex; gap: 7px; }
.jt-infer__cell {
  flex: 1; height: 26px; border-radius: 5px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(239,241,255,0.18);
  font-size: 10.5px; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.jt-infer__cell--on {
  background: rgba(99,0,255,0.35); border-color: rgba(185,156,255,0.5); color: #fff;
}
.jt-infer__gap { flex: 1; }
.jt-infer__foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(239,241,255,0.16);
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55);
}

.jt-vs { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jt-vs__card { border: 1px solid rgba(239,241,255,0.2); border-radius: 11px; padding: 20px; }
.jt-vs__card--on { border-color: rgba(185,156,255,0.5); background: rgba(99,0,255,0.14); }
.jt-vs__h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 14px;
}
.jt-vs__h--accent { color: #B99CFF; }
.jt-vs__lines { display: flex; flex-direction: column; gap: 6px; }
.jt-vs__lines span { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.22); }
.jt-vs__cap { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.jt-vs__cap--on { color: rgba(255,255,255,0.72); }

/* ---------- Recognition ---------- */
.jt-recog-band { border-bottom: 1px solid var(--line); }
.jt-recog {
  max-width: var(--site-max); margin: 0 auto; padding: 64px var(--gutter);
  display: grid; grid-template-columns: 190px 1fr; gap: 56px; align-items: center;
}
.jt-recog__badge {
  width: 170px; height: 170px; border-radius: 50%; border: 10px solid var(--color-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-sizing: border-box; flex: none;
}
.jt-recog__rank { font-family: var(--font-display); font-size: 38px; color: var(--color-primary); line-height: 1; }
.jt-recog__where {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-gray-4); margin-top: 8px;
}
.jt-recog__title {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3vw, 36px); line-height: 1.2;
  letter-spacing: -0.05em; color: var(--color-text-primary);
}
.jt-recog__body { margin: 0; max-width: 700px; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.jt-recog__body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Where it sits ---------- */
.jt-where { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.jt-where__title {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3vw, 36px); line-height: 1.2;
  letter-spacing: -0.05em; color: var(--color-text-primary);
}
.jt-where__body { margin: 0; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.jt-flow { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 32px; }
.jt-flow__step { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; font-size: 14.5px; color: var(--color-text-muted); }
.jt-flow__step--line { border-left: 1px dashed #E4D9FF; margin-left: 4.5px; padding-left: 11.5px; }
.jt-flow__step--after { padding-top: 16px; padding-bottom: 0; }
.jt-flow__step--line .jt-flow__dot { margin-left: -17px; }
.jt-flow__step--now {
  padding: 18px 20px; border-radius: 12px;
  background: var(--color-bg-card-purple); border: 1px solid var(--color-accent);
}
.jt-flow__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.jt-flow__dot--pale { background: #E4D9FF; }
.jt-flow__dot--mid { background: #C9A9FF; }
.jt-flow__dot--on { background: var(--color-accent); }
.jt-flow__name { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.jt-flow__meta { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .jt-hero__body { grid-template-columns: 1fr 460px; gap: 48px; }
  .jt-split, .jt-where, .jt-sim__inner { gap: 48px; }
  .jt-example { gap: 20px; }
  .jt-pillar { padding-right: 32px; }
  .jt-pillar:nth-child(2) { padding-left: 32px; padding-right: 32px; }
  .jt-pillar:last-child { padding-left: 32px; }
  .jt-step { padding-right: 36px; }
  .jt-step:nth-child(2), .jt-step:nth-child(4) { padding-left: 36px; }
  .jt-step:nth-child(3) { padding-right: 36px; }
  .jt-inds { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .jt-hero__wordmark { top: 44px; }
  .jt-hero__body { grid-template-columns: 1fr; gap: 44px; padding: 56px var(--gutter) 60px; align-items: start; }
  .jt-hero__title, .jt-hero__lede { max-width: 100%; }
  .jt-scen { max-width: 560px; }
  .jt-example { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .jt-split, .jt-where, .jt-sim__inner { grid-template-columns: 1fr; gap: 32px; }
  .jt-split { margin-bottom: 36px; }
  .jt-sim__inner { padding: 64px var(--gutter); }

  .jt-pillars { grid-template-columns: 1fr; }
  .jt-pillar,
  .jt-pillar:nth-child(2),
  .jt-pillar:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .jt-pillar:last-child { border-bottom: 0; }

  .jt-how { grid-template-columns: 1fr; }
  .jt-step,
  .jt-step:nth-child(2),
  .jt-step:nth-child(3),
  .jt-step:nth-child(4) {
    padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .jt-step:last-child { border-bottom: 0; }

  .jt-recog { grid-template-columns: 1fr; gap: 28px; padding: 52px var(--gutter); }
  .jt-vs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jt-hero__wordmark { top: 26px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .jt-hero__body { padding: 44px var(--gutter) 48px; gap: 36px; }
  .jt-hero__actions .btn { flex: 1 1 100%; }
  .jt-scen { padding: 18px 18px 20px; max-width: 100%; }
  .jt-scen__head { flex-wrap: wrap; gap: 8px; }

  .jt-trans__head { padding: 16px 18px; flex-wrap: wrap; gap: 8px; }
  .jt-trans__body { padding: 20px 18px; gap: 16px; }
  .jt-turn__said { font-size: 14px; padding: 12px 14px; }
  .jt-scored { padding: 22px 20px; }

  .jt-temp__switch { width: 100%; }
  .jt-temp__opt { flex: 1; padding: 8px 6px; font-size: 12px; }
  .jt-report__lbl { width: 96px; font-size: 11.5px; }

  .jt-inds { grid-template-columns: 1fr; }
  .jt-ind { padding: 22px 20px; }
  .jt-recog__badge { width: 132px; height: 132px; border-width: 8px; }
  .jt-recog__rank { font-size: 30px; }
  .jt-flow { padding: 22px 20px; }
  .cta--pricing .cta__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   RECRUITMENT AGENCIES  (/recruitment-agencies/)
   Values transcribed from the "Talvin Recruitment Agencies" export.
   ============================================================ */
.ra-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.ra-hero__glow, .uc-hero__glow {
  position: absolute; top: -852px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1300px;
  background: radial-gradient(circle, rgba(99,0,255,0.40) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.ra-hero__wordmark, .uc-hero__wordmark {
  position: absolute; left: 0; right: 0; top: 78px;
  font-family: var(--font-decorative);
  font-size: clamp(88px, 17vw, 240px); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em; text-align: center;
  color: rgba(99,0,255,0.09);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.ra-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 560px; gap: 72px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.ra-hero__eyebrow, .uc-hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 20px;
}
.ra-hero__title {
  margin: 0; max-width: 640px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.ra-hero__lede, .uc-hero__lede {
  margin: 24px 0 0; max-width: 540px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.ra-hero__actions, .uc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ra-hero__stat, .uc-hero__stat {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.ra-hero__pulse, .uc-hero__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99,0,255,0.22); flex: none;
}
.uc-hero__sep { color: rgba(255,255,255,0.28); }

/* Submission race card */
.ra-race {
  position: relative; background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.ra-race__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16);
}
.ra-race__live { display: flex; align-items: center; gap: 11px; }
.ra-race__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99,0,255,0.25); flex: none;
}
.ra-race__title { font-size: 13px; font-weight: 600; color: #fff; }
.ra-race__meta { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.ra-race__scale {
  display: flex; justify-content: space-between; margin-top: 20px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.ra-lane { margin-top: 14px; padding: 16px 18px; border-radius: 10px; }
.ra-lane--you { background: rgba(99,0,255,0.14); border: 1px solid rgba(185,156,255,0.42); }
.ra-lane--them { margin-top: 12px; border: 1px solid rgba(239,241,255,0.16); }
.ra-lane__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ra-lane__who { font-size: 12.5px; font-weight: 600; color: #fff; }
.ra-lane__who--dim { color: rgba(255,255,255,0.6); }
.ra-lane__when { font-size: 11px; color: rgba(255,255,255,0.4); white-space: nowrap; }
.ra-lane__when--on { color: #B99CFF; }
.ra-lane__track { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.ra-lane__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--color-accent); }
.ra-lane__fill--dim { background: rgba(255,255,255,0.32); }
.ra-lane__knob {
  position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(99,0,255,0.45);
}
.ra-lane__knob--dim { background: rgba(255,255,255,0.5); box-shadow: none; }
.ra-lane__tags { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.ra-chip {
  font-size: 10.5px; color: #fff; background: rgba(255,255,255,0.14);
  border-radius: 9999px; padding: 5px 10px;
}
.ra-chip--now { color: var(--color-text-primary); background: #fff; font-weight: 600; }
.ra-chip--dim { color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.07); }
.ra-race__foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(239,241,255,0.16);
  font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5);
}

/* Shared split intro */
.ra-split, .uc-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; margin-bottom: 52px;
}
.ra-split--end, .uc-split--end { align-items: end; }
.ra-split__p, .uc-split__p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }

/* Problem stats */
.ra-stats, .uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ra-stat, .uc-stat { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px; background: #fff; }
.ra-stat--on, .uc-stat--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.ra-stat__n, .uc-stat__n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4vw, 52px); line-height: 1;
  letter-spacing: -0.05em; color: var(--color-accent);
}
.uc-stat__n--quote { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.ra-stat__d, .uc-stat__d {
  margin-top: 14px; font-size: 15px; line-height: 1.65;
  color: var(--color-text-muted); min-height: 78px;
}
.uc-stat__d { min-height: 96px; }
.uc-stat__d--short { min-height: 74px; }
.ra-stat__viz, .uc-stat__viz { margin-top: 8px; border-top: 1px solid #EDEAF4; padding-top: 20px; }
.uc-stat--on .uc-stat__viz { border-top-color: #E4D9FF; }
.ra-stat__split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #EDEAF4; }
.ra-stat__legend, .uc-stat__legend {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-size: 11.5px; color: var(--color-text-faint);
}
.ra-stat__legend .is-on, .uc-stat__legend .is-on { color: var(--color-accent); font-weight: 600; }
.ra-stat__viz--rows { display: flex; flex-direction: column; gap: 9px; }
.ra-row { display: flex; align-items: center; gap: 10px; }
.ra-row__l { font-size: 11.5px; color: var(--color-primary); width: 92px; flex: none; }
.ra-row__b { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6300FF 0 var(--p), #EDEAF4 var(--p) 100%); }
.ra-stat__viz--bars { display: flex; align-items: flex-end; gap: 14px; height: 96px; }
.ra-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ra-bar__v { font-size: 12px; color: var(--color-text-faint); }
.ra-bar__v--on { color: var(--color-accent); font-weight: 600; }
.ra-bar__c { width: 100%; border-radius: 6px 6px 0 0; }
.ra-bar__l { font-size: 11px; color: var(--color-text-muted); text-align: center; }

/* Before / after table */
.ra-ba__title { margin-bottom: 40px; max-width: 760px; }
.ra-ba { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; overflow: hidden; }
.ra-ba__row { display: grid; grid-template-columns: 1fr 1fr; }
.ra-ba__row--head > * {
  padding: 22px 32px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; border-bottom: 1px solid var(--line-purple-soft);
}
.ra-ba__row--head > :first-child { background: #F7F5FB; color: var(--color-text-faint); }
.ra-ba__row--head > :last-child { background: #F2E9FF; color: var(--color-accent); border-bottom-color: #D9C6FF; border-left: 1px solid #D9C6FF; }
.ra-ba__old, .ra-ba__new { padding: 22px 32px; font-size: 15.5px; line-height: 1.65; border-bottom: 1px solid #F1EDF8; }
.ra-ba__old { color: var(--color-gray-4); }
.ra-ba__new { color: var(--color-text-primary); font-weight: 500; background: #FCFAFF; border-left: 1px solid var(--line-purple-soft); }
.ra-ba__row--last .ra-ba__old, .ra-ba__row--last .ra-ba__new { border-bottom: 0; }
.ra-ba__lbl { display: none; }

/* What Talvin handles */
.ra-handles { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.ra-handle { padding: 36px 48px 40px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ra-handle:nth-child(2) { padding: 36px 0 40px 48px; border-right: 0; }
.ra-handle:nth-child(3) { padding: 36px 48px 8px 0; border-bottom: 0; }
.ra-handle:nth-child(4) { padding: 36px 0 8px 48px; border-right: 0; border-bottom: 0; }
.ra-handle__title { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.ra-handle__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.ra-viz { border-radius: 12px; background: var(--color-bg-card-purple); margin-bottom: 24px; }
.ra-viz--chat { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ra-viz__b { font-size: 12px; line-height: 1.5; padding: 9px 12px; }
.ra-viz__b--ai { align-self: flex-start; max-width: 80%; color: #fff; background: var(--color-accent); border-radius: 9px 9px 9px 2px; }
.ra-viz__b--cand { align-self: flex-end; max-width: 74%; color: var(--color-primary); background: #fff; border: 1px solid #E4D9FF; border-radius: 9px 9px 2px 9px; }
.ra-viz__note {
  align-self: flex-start; display: flex; align-items: center; gap: 7px; margin-top: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent);
}
.ra-viz__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.ra-viz--refs { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.ra-viz__h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.ra-viz__h .is-on { color: var(--color-accent); }
.ra-ref {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid #E4D9FF; border-radius: 9px; padding: 10px 12px;
}
.ra-ref--pending { border-style: dashed; border-color: #C9A9FF; }
.ra-ref__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.ra-ref__dot--pale { background: #C9A9FF; }
.ra-ref__who { font-size: 12px; color: var(--color-primary); flex: 1; }
.ra-ref__who--dim { color: var(--color-gray-4); }
.ra-ref__st { font-size: 11px; color: var(--color-accent); font-weight: 600; }
.ra-ref__st--dim { color: var(--color-text-faint); font-weight: 400; }
.ra-viz--seq { padding: 18px 16px; }
.ra-seq { display: flex; align-items: center; }
.ra-seq__n { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ra-seq__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-accent); }
.ra-seq__dot--off { background: #fff; border: 2px solid #C9A9FF; }
.ra-seq__l { font-size: 10.5px; color: var(--color-primary); text-align: center; line-height: 1.4; }
.ra-seq__l--dim { color: var(--color-text-faint); }
.ra-seq__line { height: 2px; flex: 0.9; background: #C9A9FF; margin-bottom: 22px; }
.ra-seq__line--pale { background: #E4D9FF; }
.ra-seq__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid #E4D9FF; font-size: 11.5px; color: var(--color-text-muted); }
.ra-seq__foot span { color: var(--color-accent); font-weight: 600; }
.ra-viz--report { padding: 16px; }
.ra-rep { background: #fff; border: 1px solid #E4D9FF; border-radius: 10px; padding: 14px; }
.ra-rep__top { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid #F1EDF8; }
.ra-rep__av { width: 30px; height: 30px; border-radius: 50%; flex: none; background: url("../img/avatar-p1.png") 50% 30% / cover no-repeat; }
.ra-rep__meta { flex: 1; }
.ra-rep__name { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.ra-rep__sub { font-size: 11px; color: var(--color-text-faint); }
.ra-rep__score { font-family: var(--font-display); font-size: 20px; color: var(--color-accent); letter-spacing: -0.03em; }
.ra-rep__tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.ra-rep__tags span { font-size: 10.5px; color: var(--color-accent); border: 1px solid #D9C6FF; border-radius: 9999px; padding: 4px 10px; }

/* Economics */
.ra-econ { display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: start; }
.ra-econ__copy { max-width: 640px; }
.ra-econ__title { margin-bottom: 26px; }
.ra-econ__p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); }
.ra-econ__p--last { margin-bottom: 32px; }
.ra-econ__pull { border-left: 2px solid var(--color-accent); padding: 6px 0 6px 26px; }
.ra-econ__pull p {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 26px); line-height: 1.35;
  letter-spacing: -0.04em; color: var(--color-text-primary);
}
.ra-calc { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 30px; }
.ra-calc__h { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 22px; }
.ra-calc__fee { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ra-calc__amount {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1; letter-spacing: -0.05em; color: var(--color-text-primary);
}
.ra-calc__per { font-size: 13px; color: var(--color-text-faint); }
.ra-calc__presets { margin-top: 20px; display: flex; gap: 8px; }
.ra-calc__presets button {
  flex: 1; text-align: center; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 600; color: var(--color-accent);
  background: var(--color-bg-card-purple); border: 0; padding: 9px 0; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ra-calc__presets button:hover { background: #E4D9FF; }
.ra-calc__presets button.is-on { background: var(--color-accent); color: #fff; }
.ra-calc__bars { margin-top: 28px; padding-top: 26px; border-top: 1px solid #F1EDF8; }
.ra-calc__lbl { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }
.ra-calc__full { height: 14px; border-radius: 7px; background: var(--color-accent); }
.ra-calc__row { display: flex; justify-content: space-between; margin: 22px 0 10px; font-size: 12px; color: var(--color-text-muted); }
.ra-calc__row span:last-child { color: var(--color-text-faint); }
.ra-calc__track { height: 14px; border-radius: 7px; background: #EDEAF4; overflow: hidden; }
.ra-calc__fill { height: 14px; border-radius: 7px; background: #C9A9FF; transition: width .3s ease; }
.ra-calc__figures { margin-top: 28px; padding-top: 24px; border-top: 1px solid #F1EDF8; display: flex; flex-direction: column; gap: 18px; }
.ra-calc__big { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.04em; color: var(--color-accent); line-height: 1.1; }
.ra-calc__cap { font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); margin-top: 5px; }
.ra-calc__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid #F1EDF8; font-size: 12px; color: var(--color-text-faint); }

/* Founder demo */
.ra-founder-wrap { max-width: var(--site-max); margin: 0 auto; background: #fff; padding: var(--gutter); }
.ra-founder {
  position: relative; background: linear-gradient(160deg, #171064 0%, #0B0616 100%);
  overflow: hidden; border-radius: 4px; padding: 60px 64px;
}
.ra-founder__glow {
  position: absolute; top: -200px; left: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(99,0,255,0.50) 0%, rgba(4,6,17,0) 70%);
  pointer-events: none;
}
.ra-founder__inner { position: relative; display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: center; }
.ra-founder__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #B99CFF; margin-bottom: 18px; }
.ra-founder__title {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(27px, 3.1vw, 38px); line-height: 1.18; letter-spacing: -0.05em; color: #fff;
}
.ra-founder__body { margin: 0 0 28px; max-width: 520px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.7); }
.ra-slots {
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 22px 24px;
}
.ra-slots__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(239,241,255,0.16); }
.ra-slots__who { font-size: 13px; font-weight: 600; color: #fff; }
.ra-slots__len { font-size: 11px; color: rgba(255,255,255,0.45); }
.ra-slots__label { margin-top: 18px; margin-bottom: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.ra-slots__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ra-slot {
  font-size: 12.5px; color: rgba(255,255,255,0.75);
  border: 1px solid rgba(239,241,255,0.2); padding: 11px 0; text-align: center;
  transition: border-color .2s ease, color .2s ease;
}
a.ra-slot:hover { color: #fff; border-color: rgba(185,156,255,0.6); }
.ra-slot--on { color: #fff; background: rgba(99,0,255,0.22); border-color: rgba(185,156,255,0.45); }
.ra-slot--gone { color: rgba(255,255,255,0.35); border-color: rgba(239,241,255,0.1); text-decoration: line-through; }
.ra-slots__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(239,241,255,0.16); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }

/* Why agencies choose */
.ra-why-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ra-why__title { margin-bottom: 44px; }
.ra-why { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ra-card { border: 1px solid var(--line-purple); border-radius: 16px; padding: 24px; background: #fff; display: flex; flex-direction: column; }
.ra-card__viz { height: 64px; margin-bottom: 22px; }
.ra-card__viz--bars { display: flex; align-items: flex-end; gap: 5px; }
.ra-card__viz--bars > span { flex: 1; border-radius: 3px 3px 0 0; }
.ra-card__viz--speed { display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.ra-card__viz--speed > div { display: flex; align-items: center; gap: 8px; }
.ra-card__l { font-size: 10px; color: var(--color-text-faint); width: 38px; flex: none; }
.ra-card__l.is-on { color: var(--color-accent); font-weight: 600; }
.ra-card__b { height: 7px; border-radius: 4px; }
.ra-card__viz--grid { display: flex; align-items: center; gap: 12px; }
.ra-card__dots { display: flex; flex-direction: column; gap: 5px; }
.ra-card__dots span { display: none; }
.ra-card__dots::before, .ra-card__dots::after {
  content: ''; display: flex; gap: 5px; height: 13px;
  background: repeating-linear-gradient(90deg, #6300FF 0 13px, transparent 13px 18px);
  width: 67px; border-radius: 3px;
}
.ra-card__arrow { font-size: 14px; color: #C9A9FF; }
.ra-card__lines { display: flex; flex-direction: column; gap: 4px; }
.ra-card__lines span { width: 28px; height: 6px; border-radius: 3px; background: var(--color-primary); }
.ra-card__lines span.is-off { background: #EDEAF4; }
.ra-card__viz--bar3 { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.ra-card__viz--bar3 > span { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #6300FF 0 var(--p), #EDEAF4 var(--p) 100%); }
.ra-card__cap { font-size: 10px; color: var(--color-text-faint); margin-top: 2px; }
.ra-card__viz--faces { display: flex; align-items: center; justify-content: center; }
.ra-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background-size: cover; background-position: 50% 30%; }
.ra-face--1 { background-image: url("../img/avatar-p1.png"); }
.ra-face--2 { background-image: url("../img/avatar-candidate-ae.png"); margin-left: -11px; }
.ra-face--3 { background-image: url("../img/avatar-frontdesk.png"); margin-left: -11px; }
.ra-face--more {
  background: var(--color-bg-card-purple); margin-left: -11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--color-accent);
}
.ra-card__title { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); margin-bottom: 9px; }
.ra-card__body { font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }

/* Proof */
.ra-proof__title { margin-bottom: 44px; }
.ra-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ra-pcard { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 32px; }
.ra-pcard__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ra-pcard__n {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1; letter-spacing: -0.05em; color: var(--color-text-primary);
}
.ra-pcard__n--on { color: var(--color-accent); }
.ra-pcard__arrow { font-family: var(--font-display); font-size: 26px; color: #C9A9FF; }
.ra-pcard__d { margin-top: 16px; font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }
.ra-pcard__viz { margin-top: 28px; padding-top: 26px; border-top: 1px solid #F1EDF8; display: flex; flex-direction: column; gap: 10px; }
.ra-funnel { display: flex; align-items: center; gap: 12px; }
.ra-funnel__l { font-size: 11px; color: var(--color-text-faint); width: 74px; flex: none; }
.ra-funnel__b { height: 26px; border-radius: 5px; }
.ra-funnel__v { font-size: 11.5px; color: var(--color-text-muted); width: 34px; text-align: right; flex: none; margin-left: auto; }
.ra-funnel__v--on { color: var(--color-text-primary); font-weight: 600; }
.ra-pcard__legend {
  display: flex; justify-content: space-between; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 12px;
}
.ra-pcard__legend .is-on { color: var(--color-accent); }
.ra-swarm { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.ra-swarm::before { content: none; }
.ra-pcard__note { margin-top: 14px; font-size: 12px; color: var(--color-text-faint); }
.ra-rating {
  margin-top: 24px; background: #fff; border: 1px solid var(--line-purple-soft);
  border-radius: 20px; padding: 26px 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.ra-rating__n { display: flex; align-items: baseline; gap: 6px; flex: none; }
.ra-rating__n > span:first-child {
  font-family: var(--font-display); font-weight: 400; font-size: 38px;
  line-height: 1; letter-spacing: -0.05em; color: var(--color-accent);
}
.ra-rating__of { font-size: 15px; color: var(--color-text-faint); }
.ra-rating__pips { display: flex; gap: 4px; flex: none; }
.ra-rating__pips span { width: 11px; height: 11px; border-radius: 2px; background: var(--color-accent); }
.ra-rating__pips span.is-off { background: #E4D9FF; }
.ra-rating__d { font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); flex: 1 1 300px; }

/* FAQ variant used by both landing pages */
.faq--agency { grid-template-columns: 380px 1fr; gap: 80px; }
.faq--agency .h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.2; margin-bottom: 20px; }
.faq--agency .faq__intro p { font-size: 15px; line-height: 1.75; }

/* ============================================================
   UNIVERSITY CAREER SERVICES  (/university-career-services/)
   Values transcribed from the "Talvin University Career Services" export.
   ============================================================ */
.uc-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.uc-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 580px; gap: 64px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.uc-hero__title {
  margin: 0; max-width: 610px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(33px, 4.4vw, 56px); line-height: 1.14;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.uc-hero__lede { max-width: 545px; }

/* Practice card */
.uc-prac {
  position: relative; background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.uc-prac__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16); }
.uc-prac__live { display: flex; align-items: center; gap: 11px; }
.uc-prac__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.25); flex: none; }
.uc-prac__title { font-size: 13px; font-weight: 600; color: #fff; }
.uc-prac__meta { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.uc-prac__who { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.uc-prac__av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: url("../img/avatar-candidate-ae.png") 50% 30% / cover no-repeat; }
.uc-prac__id { flex: 1; }
.uc-prac__yr { font-size: 12.5px; color: #fff; }
.uc-prac__disc { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.uc-prac__wave { display: flex; gap: 2px; align-items: flex-end; height: 16px; flex: none; }
.uc-prac__wave span { width: 2px; background: var(--color-accent); }
.uc-prac__thread { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.uc-bub { font-size: 12.5px; line-height: 1.55; padding: 11px 13px; }
.uc-bub--q { color: #fff; background: rgba(99,0,255,0.28); border: 1px solid rgba(185,156,255,0.38); border-radius: 10px 10px 10px 2px; }
.uc-bub--a { color: rgba(255,255,255,0.78); border: 1px solid rgba(239,241,255,0.2); border-radius: 10px 10px 2px 10px; align-self: flex-end; max-width: 90%; }
.uc-prac__rule { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.uc-prac__rule > span:not(.uc-prac__rule-t) { flex: 1; height: 1px; background: rgba(239,241,255,0.16); }
.uc-prac__rule-t { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #B99CFF; }
.uc-prac__scores { display: flex; flex-direction: column; gap: 10px; }
.uc-sc__top { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(255,255,255,0.62); margin-bottom: 6px; }
.uc-sc__v { color: #fff; }
.uc-sc__track { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.uc-sc__track > div { height: 7px; border-radius: 4px; }

/* Problem stats extras */
.uc-tenths { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.uc-tenths span { height: 18px; border-radius: 3px; }
.uc-stat__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 10px; }
.uc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.uc-week span { height: 10px; border-radius: 2px; }
.uc-stat__viz--fb { display: flex; flex-direction: column; gap: 10px; }
.uc-fb { background: #fff; border-radius: 10px; padding: 12px 14px; }
.uc-fb--bad { border: 1px dashed #E4D9FF; }
.uc-fb--good { border: 1px solid var(--color-accent); }
.uc-fb__k { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; color: var(--color-text-faint); }
.uc-fb--good .uc-fb__k { color: var(--color-accent); }
.uc-fb__t { font-size: 12.5px; line-height: 1.5; color: var(--color-text-faint); }
.uc-fb--good .uc-fb__t { color: var(--color-primary); }

/* Quiet filter */
.uc-filter { display: grid; grid-template-columns: 1fr 520px; gap: 88px; align-items: start; }
.uc-filter__copy { max-width: 640px; }
.uc-filter__title { margin-bottom: 28px; }
.uc-filter__p { margin: 0 0 20px; font-size: 17px; line-height: 1.85; color: var(--color-text-muted); }
.uc-pull {
  margin-top: 40px; padding: 26px 30px; background: #fff; border-left: 3px solid var(--color-accent);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.35; letter-spacing: -0.04em; color: var(--color-primary);
}
.uc-gate { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; }
.uc-gate__h { padding-bottom: 16px; border-bottom: 1px solid #F1EDF8; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.uc-gate__rows { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.uc-gate__r { display: grid; grid-template-columns: 150px 1fr 40px; gap: 12px; align-items: center; }
.uc-gate__l { font-size: 12.5px; color: var(--color-primary); }
.uc-gate__l--dim { color: var(--color-text-faint); }
.uc-gate__b { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--c) 0 var(--p), #EDEAF4 var(--p) 100%); }
.uc-gate__b--full { background: var(--color-accent); }
.uc-gate__v { font-size: 11.5px; color: var(--color-text-faint); text-align: right; }
.uc-gate__v.is-on { color: var(--color-accent); font-weight: 600; }
.uc-gate__note { margin-top: 24px; padding: 16px 18px; background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 12px; font-size: 12.5px; line-height: 1.65; color: var(--color-text-muted); }
.uc-gate__after { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1EDF8; }
.uc-gate__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; }

/* What students get */
.uc-gets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uc-get { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px; background: #fff; display: flex; flex-direction: column; }
.uc-get--on { border-color: var(--color-accent); }
.uc-get__viz { background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 12px; padding: 18px; margin-bottom: 24px; }
.uc-get__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 14px; }
.uc-get__mic { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.uc-get__blob { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); flex: none; }
.uc-get__wave { flex: 1; display: flex; gap: 2px; align-items: center; height: 26px; }
.uc-get__wave span { border-radius: 2px; }
.uc-get__rows { display: flex; flex-direction: column; gap: 8px; }
.uc-get__row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 9px 11px; font-size: 11.5px; color: var(--color-primary); }
.uc-get__row .is-on { font-size: 11px; color: var(--color-accent); font-weight: 600; }
.uc-get__title { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.uc-get__body { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.uc-disc { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.uc-disc button {
  font-family: var(--font-body); font-size: 11px; color: var(--color-accent);
  background: #fff; border: 1px solid #D9C6FF; border-radius: 9999px;
  padding: 6px 12px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.uc-disc button.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.uc-disc__card { background: #fff; border: 1px solid #E4D9FF; border-radius: 10px; padding: 12px 13px; }
.uc-disc__lbl { font-size: 10.5px; color: var(--color-accent); font-weight: 600; margin-bottom: 8px; }
.uc-disc__q { font-size: 12px; line-height: 1.55; color: var(--color-primary); }
.uc-disc__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.uc-disc__tags span { font-size: 10px; color: var(--color-accent); border: 1px solid #D9C6FF; background: #fff; border-radius: 9999px; padding: 4px 9px; }
.uc-tries { display: flex; flex-direction: column; gap: 9px; }
.uc-try { display: grid; grid-template-columns: 44px 1fr 26px; gap: 10px; align-items: center; }
.uc-try__t { font-size: 11px; color: var(--color-text-faint); }
.uc-try__t.is-on { color: var(--color-primary); font-weight: 600; }
.uc-try__b { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--c) 0 var(--p), #EDEAF4 var(--p) 100%); }
.uc-try__v { font-size: 11px; color: var(--color-text-muted); text-align: right; }
.uc-try__v.is-on { color: var(--color-text-primary); font-weight: 600; }
.uc-tries__tags { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-purple-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.uc-tries__tags span { font-size: 10.5px; color: var(--color-accent); border: 1px solid #D9C6FF; border-radius: 9999px; padding: 5px 10px; }
.uc-tries__tags span.is-off { color: var(--color-gray-4); border-color: #EDEAF4; }
.uc-fourbar {
  margin-top: 24px; background: var(--color-bg-page); border: 1px solid var(--line-purple-soft);
  border-radius: 20px; padding: 26px 32px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.uc-fourbar__tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: none; max-width: 470px; }
.uc-fourbar__tags span { font-size: 10.5px; line-height: 1.4; white-space: nowrap; color: var(--color-accent); border: 1px solid #D9C6FF; background: #fff; border-radius: 9999px; padding: 6px 12px; }
.uc-fourbar__d { flex: 1 1 260px; font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }

/* What your team gets */
.uc-team__title { margin-bottom: 56px; }
.uc-team__row { display: grid; grid-template-columns: 1fr 620px; gap: 72px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line-purple-soft); }
.uc-team__row--first { padding-top: 0; }
.uc-team__row--flip { grid-template-columns: 620px 1fr; }
.uc-team__row--last { border-bottom: 0; padding-bottom: 0; }
.uc-team__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.32; letter-spacing: -0.04em; color: var(--color-text-primary); margin-bottom: 18px; }
.uc-team__p { margin: 0; max-width: 520px; font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); }
.uc-cohort { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.uc-cohort button {
  font-family: var(--font-body); font-size: 12px; color: var(--color-accent);
  background: #fff; border: 1px solid #D9C6FF; border-radius: 9999px;
  padding: 8px 15px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.uc-cohort button.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.uc-cap, .uc-week2, .uc-vis { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; }
.uc-cap__head, .uc-week2__head, .uc-vis__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid #F1EDF8;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint);
}
.uc-cap__head .is-on, .uc-week2__head .is-on, .uc-vis__head .is-on { color: var(--color-accent); }
.uc-cap__body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.uc-cap__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.uc-cap__v { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.uc-cap__v.is-on { color: var(--color-accent); }
.uc-cap__track { height: 16px; border-radius: 8px; background: #EDEAF4; overflow: hidden; }
.uc-cap__track--full { background: var(--color-accent); }
.uc-cap__fill { height: 16px; border-radius: 8px; background: #C9A9FF; transition: width .3s ease; }
.uc-cap__note { margin-top: 8px; font-size: 11.5px; color: var(--color-text-faint); }
.uc-cap__note span { color: var(--color-primary); font-weight: 600; }
.uc-cap__foot, .uc-week2__foot, .uc-vis__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid #F1EDF8; font-size: 12.5px; line-height: 1.7; color: var(--color-text-muted); }
.uc-week2__cols { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.uc-week2__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 12px; }
.uc-week2__k.is-on { color: var(--color-accent); }
.uc-week2__stack { display: flex; flex-direction: column; gap: 6px; }
.uc-week2__stack > div { border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; }
.uc-vis__rows { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.uc-vis__r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #EDEAF4; border-radius: 10px; }
.uc-vis__r--flag { border-color: var(--color-accent); background: var(--color-bg-page); }
.uc-vis__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background-size: cover; background-position: 50% 30%; }
.uc-vis__av--1 { background-image: url("../img/avatar-p1.png"); }
.uc-vis__av--2 { background-image: url("../img/avatar-frontdesk.png"); }
.uc-vis__av--3 { background-image: url("../img/avatar-candidate-ae.png"); }
.uc-vis__who { flex: 1; font-size: 12.5px; color: var(--color-text-muted); }
.uc-vis__who--on { color: var(--color-primary); font-weight: 600; }
.uc-spark { display: flex; gap: 3px; align-items: flex-end; height: 20px; flex: none; }
.uc-spark span { width: 5px; border-radius: 2px; }
.uc-vis__st { font-size: 11.5px; color: var(--color-accent); font-weight: 600; width: 64px; text-align: right; flex: none; }
.uc-evid { background: #0B0616; border-radius: 20px; padding: 30px 32px; position: relative; overflow: hidden; }
.uc-evid__glow { position: absolute; top: -150px; right: -110px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(99,0,255,0.45) 0%, rgba(4,6,17,0) 70%); pointer-events: none; }
.uc-evid__inner { position: relative; }
.uc-evid__k { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 22px; }
.uc-evid__rows { display: flex; flex-direction: column; gap: 14px; }
.uc-evid__r { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.uc-evid__r .is-on { color: #B99CFF; font-weight: 600; }
.uc-evid__r span:last-child { color: rgba(255,255,255,0.55); }
.uc-evid__r .is-on:last-child { color: #B99CFF; }
.uc-evid__track { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; }
.uc-evid__track > div { height: 12px; border-radius: 6px; }
.uc-evid__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,0.55); }

/* How it works */
.uc-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.uc-step { border: 1px solid var(--line-purple); border-radius: 16px; padding: 30px; background: #fff; }
.uc-step--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.uc-step__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.uc-step__n { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.05em; color: #E4D9FF; }
.uc-step__n--on { color: #C9A9FF; }
.uc-step__t { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); }
.uc-step__p { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.uc-step__viz { background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 12px; padding: 18px; }
.uc-step__viz--white { background: #fff; }
.uc-step__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 14px; }
.uc-step__k2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); }
.uc-step__k2 .is-on { color: var(--color-accent); letter-spacing: 0; text-transform: none; font-size: 11px; }
.uc-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 11.5px; }
.uc-kv span:first-child { color: var(--color-gray-4); }
.uc-kv span:last-child { color: var(--color-primary); font-weight: 600; }
.uc-kv--on { border-color: var(--color-accent); }
.uc-kv--on span { color: var(--color-accent) !important; }
.uc-clock { display: flex; gap: 4px; align-items: flex-end; height: 64px; }
.uc-clock__ax { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10.5px; color: var(--color-text-faint); }
.uc-step__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-purple-soft); font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); }
.uc-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.uc-score { background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 10px 8px; text-align: center; }
.uc-score__n { font-family: var(--font-display); font-size: 20px; color: var(--color-accent); letter-spacing: -0.04em; }
.uc-score__l { font-size: 10px; color: var(--color-gray-4); margin-top: 4px; }
.uc-note { background: #fff; border-left: 2px solid #C9A9FF; border-radius: 0 8px 8px 0; padding: 11px 13px; font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); margin-top: 8px; }
.uc-note--on { border-left-color: var(--color-accent); color: var(--color-primary); margin-top: 0; }
.uc-part { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; }
.uc-part span { height: 13px; border-radius: 2px; }
.uc-part__ax { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--color-text-faint); }
.uc-part__ax .is-on { color: var(--color-accent); font-weight: 600; }

/* Outcomes */
.uc-out { display: grid; grid-template-columns: 1fr 560px; gap: 80px; align-items: center; }
.uc-out__copy { max-width: 620px; }
.uc-out__title { margin-bottom: 26px; }
.uc-out__p { margin: 0 0 20px; font-size: 17px; line-height: 1.85; color: var(--color-text-muted); }
.uc-chain { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; }
.uc-chain__h { padding-bottom: 16px; border-bottom: 1px solid #F1EDF8; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 22px; }
.uc-chain__link { display: grid; grid-template-columns: 1fr 108px; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid #EDEAF4; border-radius: 10px; font-size: 13px; color: var(--color-text-faint); }
.uc-chain__link .is-mid { color: var(--color-text-muted); }
.uc-chain__link--on { padding: 16px; border-color: var(--color-accent); background: var(--color-bg-page); font-size: 13.5px; color: var(--color-primary); font-weight: 600; }
.uc-chain__tag { font-size: 11px; color: var(--color-text-faint); text-align: right; }
.uc-chain__tag.is-on { color: var(--color-accent); font-weight: 600; }
.uc-chain__arrow { text-align: center; font-size: 13px; color: #C9A9FF; padding: 6px 0; }
.uc-chain__arrow:first-of-type { color: #E4D9FF; }
.uc-chain__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid #F1EDF8; font-size: 12.5px; line-height: 1.7; color: var(--color-text-muted); }

/* Every major */
.uc-majors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.uc-major { border: 1px solid var(--line-purple); border-radius: 16px; padding: 26px; background: #fff; }
.uc-major--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.uc-major__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; }
.uc-major__t { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 10px; }
.uc-major__d { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 20px; }
.uc-major__list { display: flex; flex-direction: column; gap: 7px; }
.uc-major__list span { font-size: 11px; color: var(--color-primary); background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 8px; padding: 9px 11px; }
.uc-major--on .uc-major__list span { background: #fff; border-color: #E4D9FF; }
.uc-employer {
  margin-top: 24px; background: var(--color-bg-page); border: 1px solid var(--line-purple-soft);
  border-radius: 20px; padding: 26px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.uc-employer__d { font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); }
.uc-employer__box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E4D9FF; border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; }
.uc-employer__k { font-size: 11px; color: var(--color-gray-4); flex: none; }
.uc-employer__v { flex: 1; font-size: 13px; color: var(--color-primary); font-weight: 600; }
.uc-employer__st { font-size: 11px; color: var(--color-accent); font-weight: 600; flex: none; }

/* Institutions */
.uc-inst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uc-scope { display: flex; flex-direction: column; gap: 9px; }
.uc-scope__r { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 11px 12px; font-size: 11.5px; color: var(--color-primary); }
.uc-scope__r--on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.uc-scope__r--on span:last-child { color: rgba(255,255,255,0.75); font-weight: 400; }
.uc-scope__r--i1 { margin-left: 14px; }
.uc-scope__r--i2 { margin-left: 28px; }
.uc-scope__r--i3 { margin-left: 42px; }
.uc-scope__r--pilot { border-style: dashed; border-color: #C9A9FF; color: var(--color-accent); }
.uc-scope__r .is-dim { color: var(--color-gray-4); }
.uc-scope__r .is-on { color: var(--color-accent); font-weight: 600; }
.uc-get__viz--sec { display: flex; flex-direction: column; gap: 10px; }
.uc-sec { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-primary); }
.uc-sec__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.uc-sec__dot--pale { background: #C9A9FF; }
.uc-sec__sp { flex: 1; }
.uc-sec .is-on { color: var(--color-accent); font-weight: 600; }
.uc-sec .is-dim { color: var(--color-gray-4); }
.uc-sec__foot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-purple-soft); font-size: 11.5px; color: var(--color-text-muted); }
.uc-pack { display: flex; flex-direction: column; gap: 8px; }
.uc-pack > div { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 10px 12px; font-size: 11.5px; color: var(--color-primary); }
.uc-pack__tick { color: var(--color-accent); font-size: 12px; }
.uc-pack__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-purple-soft); font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); }
.uc-inst__link { margin-top: 26px; font-size: 14px; }

/* ---------- Responsive: both landing pages ---------- */
@media (max-width: 1200px) {
  .ra-hero__body { grid-template-columns: 1fr 440px; gap: 48px; }
  .uc-hero__body { grid-template-columns: 1fr 460px; gap: 48px; }
  .ra-split, .uc-split, .ra-econ, .uc-filter, .uc-out, .ra-founder__inner { gap: 48px; }
  .ra-econ { grid-template-columns: 1fr 420px; }
  .uc-filter { grid-template-columns: 1fr 420px; }
  .uc-out { grid-template-columns: 1fr 440px; }
  .uc-team__row { grid-template-columns: 1fr 480px; gap: 48px; }
  .uc-team__row--flip { grid-template-columns: 480px 1fr; }
  .ra-why { grid-template-columns: repeat(3, 1fr); }
  .uc-majors, .ra-stats, .uc-stats { grid-template-columns: repeat(2, 1fr); }
  .ra-handle { padding-right: 32px; }
  .ra-handle:nth-child(2), .ra-handle:nth-child(4) { padding-left: 32px; }
  .ra-handle:nth-child(3) { padding-right: 32px; }
}
@media (max-width: 1024px) {
  .ra-hero__wordmark, .uc-hero__wordmark { top: 44px; }
  .ra-hero__body, .uc-hero__body { grid-template-columns: 1fr; gap: 44px; padding: 56px var(--gutter) 60px; align-items: start; }
  .ra-hero__title, .ra-hero__lede, .uc-hero__title, .uc-hero__lede { max-width: 100%; }
  .ra-race, .uc-prac { max-width: 560px; }
  .ra-econ, .uc-filter, .uc-out { grid-template-columns: 1fr; }
  .ra-econ__copy, .uc-filter__copy, .uc-out__copy { max-width: 100%; }
  .uc-gets, .uc-inst { grid-template-columns: 1fr; }
  .uc-steps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ra-split, .uc-split { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .ra-stats, .uc-stats, .ra-proof, .uc-majors, .ra-why { grid-template-columns: 1fr; }
  .ra-stat__d, .uc-stat__d, .uc-stat__d--short { min-height: 0; }

  .ra-handles { grid-template-columns: 1fr; }
  .ra-handle, .ra-handle:nth-child(2), .ra-handle:nth-child(3), .ra-handle:nth-child(4) {
    padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .ra-handle:last-child { border-bottom: 0; }

  .ra-founder__inner { grid-template-columns: 1fr; gap: 36px; }
  .ra-founder { padding: 40px 32px; }
  .ra-founder-wrap { padding: var(--gutter) var(--gutter) 0; }

  .uc-team__row, .uc-team__row--flip { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .uc-team__row--flip > *:first-child { order: 2; }
  .uc-employer { grid-template-columns: 1fr; gap: 20px; }

  /* Before/after becomes stacked cards */
  .ra-ba { border: 0; background: transparent; border-radius: 0; }
  .ra-ba__row { display: block; background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
  .ra-ba__row--head { display: none; }
  .ra-ba__old, .ra-ba__new { border-left: 0; padding: 16px 20px; }
  .ra-ba__new { border-top: 1px solid #F1EDF8; }
  .ra-ba__lbl {
    display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px;
  }
  .ra-ba__new .ra-ba__lbl { color: var(--color-accent); }

  .faq--agency { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .ra-hero__wordmark, .uc-hero__wordmark { top: 26px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .ra-hero__body, .uc-hero__body { padding: 44px var(--gutter) 48px; gap: 36px; }
  .ra-hero__actions .btn, .uc-hero__actions .btn { flex: 1 1 100%; }
  .ra-race, .uc-prac { padding: 18px 18px 20px; max-width: 100%; }
  .ra-race__head, .uc-prac__head { flex-wrap: wrap; gap: 8px; }
  .ra-race__scale { font-size: 9px; }

  .ra-stat, .uc-stat, .ra-pcard, .ra-card, .uc-major, .uc-get, .uc-step { padding: 22px 20px; }
  .ra-calc, .uc-gate, .uc-cap, .uc-week2, .uc-vis, .uc-chain, .uc-evid { padding: 22px 20px; }
  .ra-calc__presets { flex-wrap: wrap; }
  .ra-calc__presets button { flex: 1 1 45%; }
  .ra-rating { gap: 16px; }
  .ra-seq__l { font-size: 9.5px; }
  .ra-founder { padding: 32px 22px; }
  .ra-slots__grid { grid-template-columns: 1fr 1fr; }

  .uc-gate__r { grid-template-columns: 110px 1fr 36px; gap: 8px; }
  .uc-gate__l { font-size: 11.5px; }
  .uc-week2__cols { gap: 12px; }
  .uc-chain__link { grid-template-columns: 1fr; gap: 4px; }
  .uc-chain__tag { text-align: left; }
  .uc-scores { grid-template-columns: repeat(2, 1fr); }
  .uc-scope__r--i1, .uc-scope__r--i2, .uc-scope__r--i3 { margin-left: 0; }
  .uc-fourbar { gap: 18px; }
  .uc-fourbar__tags { max-width: 100%; }
  .cta--pricing .cta__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   OFFSHORE HIRING  (/offshore-hiring/)
   Values transcribed from the "Talvin Offshore Hiring" export.
   ============================================================ */
.oh-hero, .af-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.oh-hero__glow, .af-hero__glow {
  position: absolute; top: -852px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1300px;
  background: radial-gradient(circle, rgba(99,0,255,0.40) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.oh-hero__wordmark, .af-hero__wordmark {
  position: absolute; left: 0; right: 0; top: 78px;
  font-family: var(--font-decorative);
  font-size: clamp(88px, 17vw, 240px); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em; text-align: center;
  color: rgba(99,0,255,0.09); user-select: none; pointer-events: none; white-space: nowrap;
}
.oh-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 580px; gap: 64px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.oh-hero__eyebrow, .af-hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #B99CFF; margin-bottom: 20px;
}
.oh-hero__title {
  margin: 0; max-width: 600px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.oh-hero__lede, .af-hero__lede {
  margin: 24px 0 0; max-width: 540px;
  font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68);
}
.oh-hero__actions, .af-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.oh-hero__stat, .af-hero__stat {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.oh-hero__pulse, .af-hero__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(99,0,255,0.22); flex: none;
}
.oh-hero__sep { color: rgba(255,255,255,0.28); }

/* Time-zone card */
.oh-zones {
  position: relative; background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.oh-zones__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16); }
.oh-zones__live { display: flex; align-items: center; gap: 11px; }
.oh-zones__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.25); flex: none; }
.oh-zones__title { font-size: 13px; font-weight: 600; color: #fff; }
.oh-zones__meta { font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.oh-zones__k { margin-top: 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.oh-zones__grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.oh-zone { border: 1px solid rgba(239,241,255,0.2); border-radius: 10px; padding: 12px 11px; }
.oh-zone__t { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.04em; color: #fff; }
.oh-zone__c { margin-top: 5px; font-size: 11px; color: rgba(255,255,255,0.5); }
.oh-zone__w { margin-top: 10px; display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.oh-zone__w span { width: 2px; }
.oh-zones__rule { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.oh-zones__rule > span:not(.oh-zones__rule-t) { flex: 1; height: 1px; background: rgba(239,241,255,0.16); }
.oh-zones__rule-t { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #B99CFF; }
.oh-rank { display: flex; flex-direction: column; gap: 8px; }
.oh-rank__r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(239,241,255,0.18); }
.oh-rank__r--on { background: rgba(99,0,255,0.16); border-color: rgba(185,156,255,0.42); }
.oh-rank__n { font-family: var(--font-display); font-size: 12px; color: #B99CFF; width: 16px; flex: none; }
.oh-rank__n--dim { color: rgba(255,255,255,0.4); }
.oh-rank__av { width: 26px; height: 26px; border-radius: 50%; flex: none; background-size: cover; background-position: 50% 30%; }
.oh-rank__av--1 { background-image: url("../img/avatar-candidate-ae.png"); }
.oh-rank__av--2 { background-image: url("../img/avatar-p1.png"); }
.oh-rank__av--3 { background-image: url("../img/avatar-frontdesk.png"); }
.oh-rank__who { flex: 1; font-size: 12.5px; color: #fff; }
.oh-rank__who--dim { color: rgba(255,255,255,0.75); }
.oh-rank__s { font-family: var(--font-display); font-size: 17px; color: #fff; letter-spacing: -0.03em; }
.oh-rank__s--dim { color: rgba(255,255,255,0.8); }
.oh-zones__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(239,241,255,0.16); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }

/* Shared split */
.oh-split, .af-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 52px; }
.oh-split--end, .af-split--end { align-items: end; }
.oh-split__p, .af-split__p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }
.oh-split__p { margin-bottom: 0; }
.af-split__p--last { margin-bottom: 0; }

/* Problem stats */
.oh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.oh-stat { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px; background: #fff; }
.oh-stat--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.oh-stat__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 3.8vw, 52px); line-height: 1; letter-spacing: -0.05em; color: var(--color-accent); }
.oh-stat__d { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--color-text-muted); min-height: 100px; }
.oh-stat__viz { margin-top: 8px; border-top: 1px solid #EDEAF4; padding-top: 20px; }
.oh-stat--on .oh-stat__viz { border-top-color: #E4D9FF; }
.oh-stat__split { display: flex; height: 16px; border-radius: 3px; overflow: hidden; }
.oh-stat__legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11.5px; color: var(--color-text-faint); }
.oh-stat__legend .is-on { color: var(--color-accent); font-weight: 600; }
.oh-stat__legend .is-dark { color: var(--color-text-primary); }
.oh-stat__note { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); }
.oh-stat__viz--rows { display: flex; flex-direction: column; gap: 9px; }
.oh-row { display: flex; align-items: center; gap: 10px; }
.oh-row__l { font-size: 11.5px; color: var(--color-primary); width: 104px; flex: none; }
.oh-row__l--dim { color: var(--color-text-faint); }
.oh-row__b { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6300FF 0 var(--p), #EDEAF4 var(--p) 100%); }
.oh-row__b--pale { background: linear-gradient(90deg, #C9A9FF 0 var(--p), #EDEAF4 var(--p) 100%); }
.oh-window { display: flex; gap: 3px; align-items: flex-end; height: 44px; }
.oh-window span { flex: 1; border-radius: 2px; }

/* Why offshore breaks */
.oh-breaks__title { margin-bottom: 56px; }
.oh-break { display: grid; grid-template-columns: 1fr 620px; gap: 72px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line-purple-soft); }
.oh-break:first-of-type { padding-top: 0; }
.oh-break--flip { grid-template-columns: 620px 1fr; }
.oh-break--last { border-bottom: 0; padding-bottom: 0; }
.oh-break__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.32; letter-spacing: -0.04em; color: var(--color-text-primary); margin-bottom: 18px; }
.oh-break__p { margin: 0; max-width: 560px; font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); }

.oh-card { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; }
.oh-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #F1EDF8; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 20px; }
.oh-card__head .is-dim { color: #C9C9D4; }
.oh-card__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 14px; }
.oh-card__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid #F1EDF8; font-size: 12.5px; line-height: 1.7; color: var(--color-text-muted); }

.oh-trip { display: flex; flex-direction: column; gap: 8px; }
.oh-trip__r { display: grid; grid-template-columns: 58px 1fr 96px; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid #EDEAF4; border-radius: 9px; }
.oh-trip__d { font-size: 11px; font-weight: 600; color: var(--color-text-faint); }
.oh-trip__t { font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
.oh-trip__w { font-size: 11px; color: var(--color-text-faint); text-align: right; }
.oh-trip__w.is-on { color: var(--color-accent); font-weight: 600; }
.oh-trip__win { margin-top: 10px; display: grid; grid-template-columns: 58px 1fr 96px; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--color-accent); background: var(--color-bg-page); border-radius: 9px; }
.oh-trip__tag { font-size: 11px; font-weight: 600; color: var(--color-accent); }

.oh-swap { display: flex; flex-direction: column; gap: 8px; }
.oh-swap__r { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid #EDEAF4; border-radius: 9px; font-size: 12.5px; color: var(--color-text-faint); }
.oh-swap__a { text-align: center; color: #C9A9FF; }
.oh-swap__b { color: var(--color-primary); font-weight: 500; }
.oh-swap__tags { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.oh-swap__tags span { font-size: 10.5px; color: var(--color-text-muted); border: 1px solid #EDEAF4; border-radius: 9999px; padding: 5px 10px; }
.oh-swap__tags .is-on { color: var(--color-accent); border-color: #D9C6FF; font-weight: 600; }

.oh-claim { font-size: 14px; line-height: 1.6; color: var(--color-primary); background: var(--color-bg-card-purple); border-radius: 10px; padding: 13px 15px; margin-bottom: 16px; }
.oh-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oh-vs__col { border: 1px solid #EDEAF4; border-radius: 10px; padding: 14px; }
.oh-vs__col--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.oh-vs__h { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 10px; }
.oh-vs__h.is-on { color: var(--color-accent); }
.oh-vs__t { font-size: 12.5px; line-height: 1.6; color: var(--color-text-muted); }
.oh-vs__note { margin-top: 10px; font-size: 11px; color: #C9C9D4; }
.oh-vs__q { font-size: 12px; line-height: 1.55; color: #fff; background: var(--color-accent); border-radius: 8px 8px 8px 2px; padding: 8px 10px; margin-bottom: 6px; }
.oh-vs__a { font-size: 12px; line-height: 1.55; color: var(--color-primary); background: #fff; border: 1px solid #E4D9FF; border-radius: 8px 8px 2px 8px; padding: 8px 10px; margin-bottom: 6px; }

.oh-cost { display: flex; flex-direction: column; gap: 14px; }
.oh-cost__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--color-primary); margin-bottom: 7px; }
.oh-cost__top .is-on { color: var(--color-accent); font-weight: 600; }
.oh-cost__top .is-dim { color: var(--color-text-faint); }
.oh-cost__track { height: 12px; border-radius: 6px; background: #EDEAF4; overflow: hidden; }
.oh-cost__track > div { height: 12px; border-radius: 6px; }

/* Founder story */
.oh-story { position: relative; background: #0C0A18; color: #fff; overflow: hidden; }
.oh-story__glow { position: absolute; top: -280px; left: -180px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(99,0,255,0.40) 0%, rgba(4,6,17,0) 70%); pointer-events: none; }
.oh-story__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: 88px var(--gutter); display: grid; grid-template-columns: 1fr 440px; gap: 80px; align-items: center; }
.oh-story__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #B99CFF; margin-bottom: 18px; }
.oh-story__title { margin: 0 0 26px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -0.05em; color: #fff; }
.oh-story__p { margin: 0 0 18px; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.68); }
.oh-story__p--last { margin-bottom: 0; color: rgba(255,255,255,0.85); }
.oh-quote { background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26); -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px); border-radius: 12px; padding: 28px 30px; }
.oh-quote__name { font-size: 14px; font-weight: 600; color: #fff; }
.oh-quote__role { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.oh-quote__mark { font-family: var(--font-display); font-size: 44px; line-height: 1; color: #B99CFF; margin: 18px 0 6px; }
.oh-quote__t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.5; letter-spacing: -0.03em; color: #fff; }
.oh-quote__org { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(239,241,255,0.16); font-size: 12px; color: rgba(255,255,255,0.45); }

/* How it works */
.oh-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.oh-step { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px; background: #fff; }
.oh-step__viz { background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 12px; padding: 18px; margin-bottom: 24px; }
.oh-step__k2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); }
.oh-step__k2 .is-on { color: var(--color-accent); letter-spacing: 0; text-transform: none; font-size: 11px; }
.oh-step__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.oh-step__n { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em; color: var(--color-accent); }
.oh-step__t { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); }
.oh-step__d { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.oh-step__note { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); }

.oh-depth { display: inline-flex; background: #fff; border: 1px solid var(--line-purple); border-radius: 9999px; padding: 3px; gap: 2px; }
.oh-depth button {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 9999px; border: 0; cursor: pointer;
  color: var(--color-text-muted); background: transparent; letter-spacing: 0; text-transform: none;
  transition: background .2s ease, color .2s ease;
}
.oh-depth button:hover { background: #E4D9FF; }
.oh-depth button.is-on { color: #fff; background: var(--color-accent); }
.oh-depth button.is-on:hover { background: var(--color-accent); }
.oh-comp { display: flex; flex-direction: column; gap: 12px; }
.oh-comp__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--color-primary); margin-bottom: 6px; }
.oh-comp__top .is-on { color: var(--color-accent); font-weight: 600; }
.oh-comp__top .is-dim { color: var(--color-text-faint); }
.oh-comp__track { height: 8px; border-radius: 4px; background: #EDEAF4; overflow: hidden; }
.oh-comp__track > div { height: 8px; border-radius: 4px; background: var(--color-accent); transition: width .3s ease; }

.oh-live { display: flex; flex-direction: column; gap: 8px; }
.oh-live__r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #E4D9FF; background: #fff; border-radius: 9px; font-size: 11.5px; color: var(--color-primary); }
.oh-live__r .is-dim { color: var(--color-text-faint); }
.oh-live__r > span:nth-child(2) { flex: 1; }
.oh-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.oh-live__dot--pale { background: #C9A9FF; }
.oh-live__w { display: flex; gap: 2px; align-items: flex-end; height: 12px; flex: none; }
.oh-live__w span { width: 2px; }
.oh-live__q { font-size: 11px; color: var(--color-text-faint); flex: none; }

.oh-result { }
.oh-result__top { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line-purple-soft); }
.oh-result__av { width: 30px; height: 30px; border-radius: 50%; flex: none; background: url("../img/avatar-candidate-ae.png") 50% 30% / cover no-repeat; }
.oh-result__meta { flex: 1; }
.oh-result__n { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.oh-result__s { font-size: 11px; color: var(--color-text-faint); }
.oh-result__score { font-family: var(--font-display); font-size: 20px; color: var(--color-accent); letter-spacing: -0.03em; }
.oh-result__bars { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.oh-result__bars > div { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--color-primary); }
.oh-result__bars > div > span:first-child { width: 104px; flex: none; }
.oh-result__b { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6300FF 0 var(--p), #E4D9FF var(--p) 100%); }
.oh-result__why { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); }
.oh-result__why span { color: var(--color-accent); font-weight: 600; }

.oh-prompt { display: flex; align-items: center; gap: 10px; background: #0C0A18; border-radius: 9px; padding: 12px 14px; font-size: 12.5px; color: #fff; margin-bottom: 12px; }
.oh-prompt__c { color: #B99CFF; font-family: var(--font-display); }
.oh-hits { display: flex; flex-direction: column; gap: 7px; }
.oh-hits__r { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #E4D9FF; background: #fff; border-radius: 9px; font-size: 12px; color: var(--color-primary); }
.oh-hits__r > span:nth-child(2) { flex: 1; }
.oh-hits__n { font-family: var(--font-display); font-size: 11px; color: var(--color-accent); width: 12px; flex: none; }
.oh-hits__s { font-family: var(--font-display); font-size: 14px; color: var(--color-accent); letter-spacing: -0.03em; flex: none; }

/* Ramp */
.oh-ramp { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 620px; gap: 72px; align-items: center; }
.oh-ramp__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.32; letter-spacing: -0.04em; color: var(--color-text-primary); margin-bottom: 18px; }
.oh-ramp__p { margin: 0; max-width: 520px; font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); }
.oh-ramp__fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.oh-ramp__n { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.05em; color: var(--color-text-primary); }
.oh-ramp__u { font-size: 13px; color: var(--color-text-faint); }
.oh-ramp__bars { display: flex; flex-direction: column; gap: 16px; }
.oh-ramp__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 8px; }
.oh-ramp__top .is-on { color: var(--color-accent); font-weight: 600; }
.oh-ramp__track { height: 16px; border-radius: 8px; background: #EDEAF4; overflow: hidden; }
.oh-ramp__track > div { height: 16px; border-radius: 8px; transition: width .3s ease; }

/* One standard */
.oh-std { display: grid; grid-template-columns: 1fr 620px; gap: 72px; align-items: start; }
.oh-std__copy { max-width: 640px; }
.oh-std__title { margin-bottom: 26px; }
.oh-std__p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.85; color: var(--color-text-muted); }
.oh-std__pull { margin-top: 32px; padding: 22px 26px; background: #fff; border-left: 3px solid var(--color-accent); }
.oh-std__pull p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.4; letter-spacing: -0.03em; color: var(--color-primary); }
.oh-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oh-office { border: 1px solid #EDEAF4; border-radius: 10px; padding: 14px; }
.oh-office__h { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 12px; }
.oh-office__r { margin-bottom: 9px; }
.oh-office__r div { font-size: 11.5px; color: var(--color-primary); margin-bottom: 5px; }
.oh-office__r span { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #6300FF 0 var(--p), #EDEAF4 var(--p) 100%); }
.oh-drift { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1EDF8; }
.oh-drift__h { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 14px; }
.oh-drift__chart { position: relative; height: 54px; }
.oh-drift__line { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--color-accent); border-radius: 1px; }
.oh-drift__lbl { position: absolute; left: 0; top: 14px; font-size: 10px; color: var(--color-accent); }
.oh-drift__dots { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; }
.oh-drift__dots span { width: 7px; height: 7px; border-radius: 50%; background: #C9A9FF; transform: translateY(calc(var(--o) * 0.62px)); }
.oh-drift__ax { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 10.5px; color: var(--color-text-faint); }
.oh-drift__ax .is-dim { color: #C9C9D4; }

/* Roles and markets */
.oh-roles { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
.oh-rolelist__h { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 18px; }
.oh-rolelist__i { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--color-text-primary); }
.oh-rolelist__i span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }
.oh-rolelist__link { margin-top: 20px; font-size: 14px; }
.oh-rolelist__link a { text-decoration: underline; text-underline-offset: 3px; }
.oh-clock { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; }
.oh-clock__ax { display: grid; grid-template-columns: 118px 1fr 74px; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 10px; color: var(--color-text-faint); }
.oh-clock__ticks { display: flex; justify-content: space-between; }
.oh-clock__rows { display: flex; flex-direction: column; gap: 10px; }
.oh-mkt { display: grid; grid-template-columns: 118px 1fr 74px; gap: 12px; align-items: center; }
.oh-mkt__n { font-size: 12.5px; color: var(--color-primary); }
.oh-mkt__track { position: relative; height: 12px; border-radius: 6px; background: #F4F1FA; }
.oh-mkt__b1, .oh-mkt__b2 { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.oh-mkt__b1 { background: #C9A9FF; }
.oh-mkt__b2 { background: var(--color-accent); }
.oh-mkt__z { font-size: 11px; color: var(--color-text-faint); text-align: right; }
.oh-clock__key { margin-top: 18px; padding-top: 16px; border-top: 1px solid #F1EDF8; display: flex; gap: 20px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); }
.oh-clock__key > span { display: flex; align-items: center; gap: 7px; }
.oh-clock__key .is-dim { color: var(--color-text-faint); }
.oh-key { width: 10px; height: 10px; border-radius: 3px; }
.oh-key--1 { background: #C9A9FF; }
.oh-key--2 { background: var(--color-accent); }

/* Proof */
.oh-proof__title { margin-bottom: 44px; }
.oh-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.oh-pcard { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 30px; }
.oh-pcard__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.05em; color: var(--color-text-primary); }
.oh-pcard__n span { color: var(--color-accent); }
.oh-pcard__d { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); min-height: 100px; }
.oh-pcard__viz { margin-top: 22px; padding-top: 22px; border-top: 1px solid #F1EDF8; display: flex; flex-direction: column; gap: 12px; }
.oh-vsbar__top { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 7px; }
.oh-vsbar__top .is-on { color: var(--color-accent); font-weight: 600; }
.oh-vsbar__b { display: block; height: 20px; border-radius: 5px; }
.oh-funnel { display: flex; align-items: center; gap: 12px; }
.oh-funnel__l { font-size: 11px; color: var(--color-text-faint); width: 74px; flex: none; }
.oh-funnel__b { height: 22px; border-radius: 5px; }
.oh-funnel__v { font-size: 11.5px; color: var(--color-text-muted); width: 34px; text-align: right; flex: none; margin-left: auto; }
.oh-funnel__v.is-on { color: var(--color-text-primary); font-weight: 600; }
.oh-pcard__legend { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); }
.oh-pcard__legend .is-on { color: var(--color-accent); }
.oh-swarm { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.oh-swarm span { height: 14px; border-radius: 2px; }
.oh-pcard__note { font-size: 11.5px; color: var(--color-text-faint); }
.oh-rating { margin-top: 24px; background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 26px 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.oh-rating__n { display: flex; align-items: baseline; gap: 6px; flex: none; }
.oh-rating__n > span:first-child { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.05em; color: var(--color-accent); }
.oh-rating__of { font-size: 15px; color: var(--color-text-faint); }
.oh-rating__pips { display: flex; gap: 4px; flex: none; }
.oh-rating__pips span { width: 11px; height: 11px; border-radius: 2px; background: var(--color-accent); }
.oh-rating__pips span.is-off { background: #E4D9FF; }
.oh-rating__d { font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted); flex: 1 1 300px; }

/* Enterprise */
.oh-ent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.oh-juris { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 11px 12px; margin-bottom: 8px; font-size: 11.5px; color: var(--color-primary); }
.oh-juris .is-on { color: var(--color-accent); font-weight: 600; }
.oh-juris .is-dim { color: var(--color-gray-4); }
.oh-sync { display: flex; align-items: center; justify-content: center; gap: 14px; background: #fff; border: 1px solid #E4D9FF; border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.oh-sync__a { color: var(--color-accent); font-size: 15px; }
.oh-flow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--color-text-muted); padding: 7px 0; }
.oh-flow__a { color: var(--color-accent); flex: none; width: 14px; }
.oh-ats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-purple-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.oh-ats span { font-size: 10.5px; color: var(--color-accent); border: 1px solid #D9C6FF; border-radius: 9999px; padding: 4px 10px; }

/* ============================================================
   AFFILIATE PARTNERSHIP  (/affiliate-partnership/)
   Rebuilt from talvin.ai/affiliate-partnership/ in the new theme.
   ============================================================ */
.af-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 520px; gap: 72px;
  align-items: center; padding: 78px var(--gutter) 76px;
}
.af-hero__title {
  margin: 0; max-width: 620px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(33px, 4.4vw, 54px); line-height: 1.12;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.af-calc {
  position: relative; background: rgba(239,241,255,0.05);
  border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 26px;
}
.af-calc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(239,241,255,0.16); }
.af-calc__live { display: flex; align-items: center; gap: 11px; }
.af-calc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.25); flex: none; }
.af-calc__title { font-size: 13px; font-weight: 600; color: #fff; }
.af-calc__meta { font-size: 12px; color: #B99CFF; white-space: nowrap; }
.af-calc__k { margin-top: 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.af-calc__fig { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.af-calc__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.05em; color: #fff; }
.af-calc__u { font-size: 12.5px; color: rgba(255,255,255,0.5); }
.af-calc__months { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.af-month { display: grid; grid-template-columns: 62px 1fr 58px; gap: 12px; align-items: center; }
.af-month__l { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.af-month__b { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #6300FF 0 var(--p), rgba(255,255,255,0.12) var(--p) 100%); }
.af-month__v { font-size: 12px; color: rgba(255,255,255,0.72); text-align: right; }
.af-month__v.is-on { color: #fff; font-weight: 600; }
.af-calc__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(239,241,255,0.16); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.af-calc__foot { margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.af-tag { font-size: 10.5px; color: rgba(255,255,255,0.6); border: 1px solid rgba(239,241,255,0.2); border-radius: 9999px; padding: 5px 10px; }
.af-tag--on { color: #B99CFF; border-color: rgba(185,156,255,0.45); }

.af-links { margin-top: 24px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.af-links a { text-decoration: underline; text-underline-offset: 3px; }

.af-why__title { margin-bottom: 44px; }
.af-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.af-benefit { border: 1px solid var(--line-purple); border-radius: 16px; padding: 26px; background: #fff; }
.af-benefit__viz { height: 76px; margin-bottom: 22px; border-radius: 10px; background: var(--color-bg-card-purple); padding: 14px; box-sizing: border-box; }
.af-benefit__viz--stack { display: flex; align-items: flex-end; gap: 6px; }
.af-benefit__viz--stack span { flex: 1; height: var(--p); background: var(--color-accent); border-radius: 3px 3px 0 0; }
.af-benefit__viz--nocap { display: flex; align-items: center; gap: 5px; }
.af-benefit__viz--nocap span { width: 9px; height: 9px; border-radius: 50%; background: #C9A9FF; }
.af-benefit__inf { width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; font-family: var(--font-display); font-size: 22px; color: var(--color-accent); margin-left: 4px; }
.af-benefit__viz--dash { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.af-dash__r { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-primary); }
.af-dash__r .is-on { color: var(--color-accent); font-weight: 600; }
.af-benefit__viz--kit { display: flex; flex-wrap: wrap; align-content: center; gap: 6px; }
.af-kit { font-size: 10.5px; color: var(--color-primary); background: #fff; border: 1px solid #E4D9FF; border-radius: 9999px; padding: 5px 10px; }
.af-kit--on { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.af-benefit__t { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.af-benefit__d { font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); }

.af-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.af-card { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px 26px; background: #fff; }
.af-card--on { border-color: var(--color-accent); background: var(--color-bg-page); }
.af-card__n { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; color: #C9A9FF; margin-bottom: 16px; }
.af-card__n--on { color: var(--color-accent); }
.af-card__t { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 10px; }
.af-card__d { font-size: 14.5px; line-height: 1.7; color: var(--color-text-muted); }

.af-join { display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: center; }
.af-join__title { margin-bottom: 18px; }
.af-join__p { margin: 0 0 28px; max-width: 520px; font-size: 16.5px; line-height: 1.8; color: var(--color-text-muted); }
.af-steps { background: #fff; border: 1px solid var(--line-purple-soft); border-radius: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 0; }
.af-step { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid #F1EDF8; }
.af-step:first-child { border-top: 0; padding-top: 0; }
.af-step:last-child { padding-bottom: 0; }
.af-step__n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--color-bg-card-purple); color: var(--color-accent);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.af-step__n--on { background: var(--color-accent); color: #fff; }
.af-step__t { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 4px; }
.af-step__d { font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }

/* ---------- Responsive: offshore + affiliate ---------- */
@media (max-width: 1200px) {
  .oh-hero__body { grid-template-columns: 1fr 460px; gap: 48px; }
  .af-hero__body { grid-template-columns: 1fr 440px; gap: 48px; }
  .oh-split, .af-split, .oh-break, .oh-ramp, .oh-std, .oh-roles, .oh-story__inner, .af-join { gap: 48px; }
  .oh-break { grid-template-columns: 1fr 480px; }
  .oh-break--flip { grid-template-columns: 480px 1fr; }
  .oh-ramp, .oh-std { grid-template-columns: 1fr 480px; }
  .oh-roles { grid-template-columns: 300px 1fr; }
  .oh-story__inner { grid-template-columns: 1fr 380px; }
  .af-join { grid-template-columns: 1fr 440px; }
  .oh-stats, .oh-proof, .oh-ent { grid-template-columns: repeat(2, 1fr); }
  .af-benefits, .af-who { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .oh-hero__wordmark, .af-hero__wordmark { top: 44px; }
  .oh-hero__body, .af-hero__body { grid-template-columns: 1fr; gap: 44px; padding: 56px var(--gutter) 60px; align-items: start; }
  .oh-hero__title, .oh-hero__lede, .af-hero__title, .af-hero__lede { max-width: 100%; }
  .oh-zones, .af-calc { max-width: 560px; }
  .oh-steps { grid-template-columns: 1fr; }
  .oh-roles { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .oh-split, .af-split { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .oh-stats, .oh-proof, .oh-ent, .af-benefits, .af-who { grid-template-columns: 1fr; }
  .oh-stat__d, .oh-pcard__d { min-height: 0; }
  .oh-break, .oh-break--flip, .oh-ramp, .oh-std, .oh-story__inner, .af-join {
    grid-template-columns: 1fr; gap: 32px;
  }
  .oh-break { padding: 36px 0; }
  .oh-break--flip > *:first-child { order: 2; }
  .oh-story__inner { padding: 64px var(--gutter); }
  .oh-std__copy { max-width: 100%; }
  .oh-ramp { margin-top: 40px; padding-top: 40px; }
  .oh-vs { grid-template-columns: 1fr; }
  .oh-offices { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oh-hero__wordmark, .af-hero__wordmark { top: 26px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .oh-hero__body, .af-hero__body { padding: 44px var(--gutter) 48px; gap: 36px; }
  .oh-hero__actions .btn, .af-hero__actions .btn { flex: 1 1 100%; }
  .oh-zones, .af-calc { padding: 18px 18px 20px; max-width: 100%; }
  .oh-zones__head, .af-calc__head { flex-wrap: wrap; gap: 8px; }
  .oh-zones__grid { grid-template-columns: repeat(2, 1fr); }

  .oh-stat, .oh-pcard, .oh-step, .af-benefit, .af-card { padding: 22px 20px; }
  .oh-card, .oh-clock, .oh-quote, .af-steps { padding: 22px 20px; }
  .oh-trip__r, .oh-trip__win { grid-template-columns: 46px 1fr; gap: 8px; }
  .oh-trip__w { grid-column: 2; text-align: left; }
  .oh-swap__r { grid-template-columns: 1fr; gap: 4px; }
  .oh-swap__a { display: none; }
  .oh-clock__ax, .oh-mkt { grid-template-columns: 86px 1fr 54px; gap: 8px; }
  .oh-mkt__n { font-size: 11.5px; }
  .oh-result__bars > div > span:first-child { width: 84px; font-size: 11px; }
  .oh-rating { gap: 16px; }
  .af-month { grid-template-columns: 54px 1fr 52px; gap: 8px; }
  .cta--pricing .cta__actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   BENTO BALANCE
   Cards in a row stretch to equal height, but their illustration
   blocks were sizing to their own content — up to 118px apart in
   the same row — which left dead space in the shorter cards.

   Two rules, by where the illustration sits in the card:
   · illustration LAST  -> it flexes to fill, so no card has a gap
   · illustration FIRST -> a shared min-height so titles and body
     copy line up across the row (measured max per group)

   Only applied while cards are side by side; below 900px every
   grid here is single-column and equal heights are meaningless.
   ============================================================ */
@media (min-width: 901px) {

  /* --- illustration last: let it absorb the slack --- */
  .oh-stat, .uc-stat, .ra-stat,
  .oh-pcard, .uc-step {
    display: flex; flex-direction: column;
  }
  .oh-stat__viz, .uc-stat__viz, .ra-stat__viz,
  .oh-pcard__viz, .uc-step__viz {
    flex: 1 1 auto;
  }
  /* keep their inner content anchored to the top of the grown box */
  .oh-stat__viz--rows, .uc-stat__viz--fb,
  .oh-pcard__viz, .uc-step__viz { justify-content: flex-start; }

  /* --- illustration first: equalise it across the row --- */
  .jt-ind__viz        { min-height: 80px; }
  .ra-card__viz       { min-height: 64px; }
  .af-benefit__viz    { min-height: 76px; }
  .ra-viz             { min-height: 201px; }
  .oh-step__viz       { min-height: 255px; }
  .uc-gets .uc-get__viz { min-height: 307px; }
  .uc-inst .uc-get__viz { min-height: 301px; }
  .oh-ent  .uc-get__viz { min-height: 231px; }
  .uc-steps .uc-step__viz { min-height: 241px; }

  /* cards whose illustration is first still benefit from a flex
     column so the body owns the remaining space rather than the card */
  .jt-ind, .ra-card, .af-benefit, .ra-handle, .oh-step, .uc-get {
    display: flex; flex-direction: column;
  }
  .jt-ind__body, .ra-card__body, .af-benefit__d,
  .ra-handle__body, .oh-step__d, .uc-get__body { flex: 1 1 auto; }

  /* the three-up pillar columns are dividers, not cards — even them
     out so the rules don't outrun the copy */
  .jt-pillar { display: flex; flex-direction: column; }
  .jt-pillar__body { flex: 1 1 auto; }

  /* --- equalise the copy blocks too ---
     Body text is the other variable. Reserving the row's tallest for
     each removes the last of the ragged bottoms, and where an
     illustration sits below the copy it now lines up as a result. */
  .jt-pillar__body  { min-height: 179px; }
  .jt-ind__body     { min-height: 99px; }
  .ra-card__body    { min-height: 116px; }
  .af-benefit__d    { min-height: 50px; }
  .af-card__d       { min-height: 74px; }
  .uc-major__d      { min-height: 96px; }
  .uc-step__p       { min-height: 102px; }
  .oh-pcard__d      { min-height: 124px; }

  /* titles that wrap to two lines in one card and one in the next */
  .uc-major__t      { min-height: 40px; }
  .af-card__t       { min-height: 40px; }
}

/* ============================================================
   BUYER'S GUIDES  (/best/*)
   Shared by the three comparison pages. Values transcribed from
   the "Best AI Interview Software / Screening Tools /
   High-Volume Hiring Software" exports.
   ============================================================ */
.cmp-hero { position: relative; background: var(--color-bg-dark); overflow: hidden; }
.cmp-hero__glow {
  position: absolute; top: -872px; left: 50%; transform: translateX(-50%);
  width: 1700px; height: 1300px;
  background: radial-gradient(circle, rgba(99,0,255,0.38) 0%, rgba(4,6,17,0) 62%);
  pointer-events: none;
}
.cmp-hero__wordmark {
  position: absolute; left: 0; right: 0; top: 98px;
  font-family: var(--font-decorative);
  font-size: clamp(88px, 17vw, 240px); line-height: 1;
  letter-spacing: 0.3em; text-indent: 0.3em; text-align: center;
  color: rgba(99,0,255,0.08); user-select: none; pointer-events: none; white-space: nowrap;
}
.cmp-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 520px; gap: 72px;
  align-items: start; padding: 56px var(--gutter) 72px;
}
.cmp-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.42); margin-bottom: 26px; }
.cmp-crumb a { color: inherit; }
.cmp-crumb a:hover { color: #fff; }
.cmp-crumb__now { color: #B99CFF; }
.cmp-hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #B99CFF; margin-bottom: 18px; }
.cmp-hero__title {
  margin: 0; max-width: 640px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(33px, 4.4vw, 56px); line-height: 1.14;
  letter-spacing: -0.05em; color: #fff; text-wrap: balance;
}
.cmp-hero__lede { margin: 24px 0 0; max-width: 560px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.68); }
.cmp-disc {
  margin-top: 30px; max-width: 560px; display: flex; gap: 14px; align-items: flex-start;
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 11px; padding: 18px 20px;
}
.cmp-disc__i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: #B99CFF;
}
.cmp-disc__t { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.62); }
.cmp-hero__meta {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(239,241,255,0.14);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: rgba(255,255,255,0.45);
}
.cmp-hero__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.22); flex: none; }
.cmp-hero__sep { color: rgba(255,255,255,0.28); }

/* glass panel used by each hero's diagram */
.cmp-panel {
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px);
  border-radius: 12px; padding: 24px 26px 22px;
}
.cmp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(239,241,255,0.16); }
.cmp-panel__t { font-size: 12.5px; font-weight: 600; color: #fff; }
.cmp-panel__m { font-size: 11px; color: rgba(255,255,255,0.42); white-space: nowrap; }
.cmp-panel__k { margin-top: 20px; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.cmp-panel__quote { border-radius: 10px; background: rgba(255,255,255,0.06); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.cmp-panel__rule { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
.cmp-panel__rule > span:not(.cmp-panel__rule-t) { flex: 1; height: 1px; background: rgba(239,241,255,0.16); }
.cmp-panel__rule-t { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #B99CFF; }
.cmp-panel__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(239,241,255,0.16); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.cmp-branch { display: flex; flex-direction: column; gap: 10px; }
.cmp-branch__b { border: 1px solid rgba(239,241,255,0.18); border-radius: 10px; padding: 14px 16px; }
.cmp-branch__b--on { border-color: rgba(185,156,255,0.45); background: rgba(99,0,255,0.16); }
.cmp-branch__h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cmp-branch__b--on .cmp-branch__h { color: #B99CFF; }
.cmp-branch__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.cmp-branch__b--on .cmp-branch__dot { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.28); }
.cmp-branch__q { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); }
.cmp-branch__b--on .cmp-branch__q { color: #fff; }
.cmp-branch__n { margin-top: 9px; font-size: 11.5px; color: rgba(255,255,255,0.38); }
.cmp-branch__b--on .cmp-branch__n { color: rgba(255,255,255,0.55); }

/* pill eyebrow used on light sections */
.cmp-pill {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary); background: #F1E8FF;
  border-radius: 9999px; padding: 7px 15px; margin-bottom: 20px;
}
.cmp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.cmp-split__p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--color-text-muted); }

/* short answer */
.cmp-short { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: start; }
.cmp-short__h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(27px, 3.1vw, 38px); line-height: 1.16; letter-spacing: -0.05em; color: var(--color-text-primary); }
.cmp-short__p { margin: 18px 0 0; font-size: 15px; line-height: 1.75; color: var(--color-text-muted); }
.cmp-rows { display: flex; flex-direction: column; gap: 1px; background: var(--line-purple); border: 1px solid var(--line-purple); border-radius: 16px; overflow: hidden; }
.cmp-rows__head { display: grid; grid-template-columns: 1fr 220px; background: var(--color-bg-card-purple); padding: 14px 26px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.cmp-row { display: grid; grid-template-columns: 1fr 220px; align-items: center; background: #fff; padding: 20px 26px; gap: 16px; }
.cmp-row__need { font-size: 15.5px; color: #3A3A46; }
.cmp-row__v { display: flex; align-items: center; gap: 10px; }
.cmp-mark { width: 24px; height: 24px; border-radius: 6px; background: #EFEBF7; color: #5B5570; font-family: var(--font-display); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.cmp-mark--on { background: var(--color-accent); color: #fff; }
.cmp-row__n { font-size: 15.5px; font-weight: 700; color: var(--color-text-primary); }
.cmp-row__n--on { color: var(--color-accent); }

/* vendor entries */
.cmp-vendors { display: flex; flex-direction: column; gap: 20px; }
.cmp-v { display: grid; grid-template-columns: 300px 1fr; gap: 48px; background: #fff;
  border: 1px solid #E4E0EE; border-radius: 20px; padding: 36px 40px; }
.cmp-v--on { border: 1.5px solid var(--color-accent); }
/* the category reads as a pill, and inverts on the featured card */
.cmp-v__cat { display: inline-block; margin-bottom: 16px; padding: 6px 12px; border-radius: 9999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #5B5570; background: #EFEBF7; }
.cmp-v--on .cmp-v__cat { color: #fff; background: var(--color-accent); }
.cmp-v__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cmp-v__mark { width: 38px; height: 38px; border-radius: 9px; background: #EFEBF7; color: #5B5570;
  font-family: var(--font-display); font-size: 17px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; }
.cmp-v--on .cmp-v__mark { background: var(--color-accent); color: #fff; }
.cmp-v__name { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: #141414; }
.cmp-v__tag { margin: 0 0 20px; font-size: 14.5px; line-height: 1.7; color: #6B6B78; }
.cmp-v__price { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F5EEFF; border-radius: 8px; padding: 11px 14px; }
.cmp-v__price span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-primary); }
.cmp-v__price span:last-child { font-size: 14px; font-weight: 700; color: var(--color-accent); }
/* "Best for" is a divided block, not a tinted box */
.cmp-v__best { margin-top: 20px; padding-top: 18px; border-top: 1px solid #EFEBF7; }
.cmp-v__bestk { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8A8698; margin-bottom: 10px; }
.cmp-v__bestv { font-size: 14px; line-height: 1.7; color: #3A3A46; }
.cmp-v__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.cmp-v__ch { display: flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-v__ch:has(.cmp-v__ci--yes) { color: var(--color-primary); }
.cmp-v__ch:has(.cmp-v__ci--no) { color: #8A8698; }
.cmp-v__ci { width: 18px; height: 18px; border-radius: 50%; font-size: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; }
.cmp-v__ci--yes { background: #F1E8FF; color: var(--color-accent); }
.cmp-v__ci--no { background: #F3F1F6; color: #8A8698; }
.cmp-v__cols p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: #3A3A46; }
.cmp-v__cols p:last-of-type { margin-bottom: 0; }
.cmp-v__extra { margin-top: 14px; padding: 12px 14px; background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 10px; font-size: 12.5px; line-height: 1.65; color: var(--color-text-muted); }

/* side-by-side table */
.cmp-tablehead { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.cmp-tablehead span { font-size: 13px; color: #8A8698; }
.cmp-tablewrap { background: #fff; border: 1px solid #E4E0EE; border-radius: 18px;
  overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* dark header band with the Talvin column called out, as in the export */
.cmp-table thead tr { background: #171064; }
.cmp-table thead th { text-align: center; padding: 18px 16px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.85); min-width: 130px; }
.cmp-table thead th:first-child { text-align: left; padding: 18px 24px; min-width: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); }
.cmp-table thead th:nth-child(2) { background: var(--color-accent); color: #fff; font-weight: 700; }
.cmp-table td { padding: 16px; text-align: center; color: #3A3A46;
  border-bottom: 1px solid #EFEBF7; vertical-align: top; line-height: 1.5; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td:first-child { padding: 16px 24px; text-align: left; font-weight: 600; color: #141414; }
.cmp-table td:nth-child(2) { font-weight: 700; color: var(--color-accent); background: #F9F5FF; }
/* unconfirmed cells read as muted, not as content */
.cmp-table td.is-none { color: #A9A6B4; }
.cmp-table small { font-size: 11px; color: var(--color-text-faint); }

/* where each wins (dark) */
.cmp-wins-band { position: relative; background: #000; color: #fff; overflow: hidden; }
.cmp-wins-band__glow { position: absolute; top: -500px; right: -300px; width: 1100px; height: 1100px; background: radial-gradient(circle, rgba(99,0,255,0.30) 0%, rgba(4,6,17,0) 65%); pointer-events: none; }
.cmp-wins__inner { position: relative; max-width: var(--site-max); margin: 0 auto; padding: 88px var(--gutter); }
.cmp-wins__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.cmp-wins__h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -0.05em; color: #fff; }
.cmp-wins__p { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.62); }
.cmp-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cmp-win { background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26); -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px); border-radius: 14px; padding: 26px 28px; display: flex; flex-direction: column; }
.cmp-win__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.cmp-win__mark { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; font-family: var(--font-display); font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.cmp-win__n { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.cmp-win__b { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.66); flex: 1 1 auto; }

/* related */
.cmp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cmp-rel { display: block; background: #fff; border: 1px solid var(--line-purple); border-radius: 16px; padding: 26px 28px; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.cmp-rel:hover { border-color: var(--color-accent); transform: translateY(-3px); color: inherit; }
.cmp-rel__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; }
.cmp-rel__t { font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 9px; }
.cmp-rel__d { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }

/* interactive widgets shared by these guides */
.cmp-widget { background: #fff; border: 1px solid var(--line-purple); border-radius: 16px; padding: 24px; }
.cmp-widget__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cmp-widget__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8A8698; }
.cmp-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-seg button {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: 6px; border: 1px solid #DCCFF5; color: var(--color-primary);
  background: #fff; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cmp-seg button:hover { background: #F5EEFF; }
.cmp-seg button.is-on { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.cmp-widget__fig { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.cmp-widget__n { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: -0.05em; color: var(--color-accent); }
.cmp-widget__u { font-size: 13px; color: #8A8698; }
.cmp-widget__track { height: 8px; border-radius: 4px; background: var(--line-purple); margin: 14px 0 18px; overflow: hidden; }
.cmp-widget__fill { height: 8px; border-radius: 4px; background: var(--color-accent); transition: width .3s ease; }
.cmp-qline { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: #3A3A46; }
.cmp-qline__b { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #F1E8FF; color: var(--color-accent); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.cmp-widget__note { margin-top: 9px; padding-left: 26px; font-size: 12.5px; line-height: 1.6; color: #8A8698; }
.cmp-cost { display: flex; flex-direction: column; gap: 14px; }
.cmp-cost__r { }
.cmp-cost__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 7px; }
.cmp-cost__v { font-weight: 600; color: var(--color-text-primary); }
.cmp-cost__v--on { color: var(--color-accent); }
.cmp-cost__track { height: 12px; border-radius: 6px; background: #EDEAF4; overflow: hidden; }
.cmp-cost__track > div { height: 12px; border-radius: 6px; transition: width .3s ease; }

/* ---------- responsive ---------- */
@media (min-width: 901px) {
  .cmp-rel__d { min-height: 72px; }
}
@media (max-width: 1200px) {
  .cmp-hero__body { grid-template-columns: 1fr 440px; gap: 48px; }
  .cmp-short { grid-template-columns: 300px 1fr; gap: 48px; }
  .cmp-split, .cmp-wins__intro { gap: 48px; }
  .cmp-v { grid-template-columns: 260px 1fr; gap: 32px; }
  .cmp-wins { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .cmp-hero__wordmark { top: 64px; }
  .cmp-hero__body { grid-template-columns: 1fr; gap: 44px; padding: 44px var(--gutter) 56px; }
  .cmp-hero__title, .cmp-hero__lede, .cmp-disc { max-width: 100%; }
  .cmp-panel { max-width: 560px; }
  .cmp-short { grid-template-columns: 1fr; gap: 32px; }
  .cmp-v { grid-template-columns: 1fr; gap: 28px; }
  .cmp-related { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cmp-split, .cmp-wins__intro { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .cmp-wins { grid-template-columns: 1fr; }
  .cmp-wins__inner { padding: 64px var(--gutter); }
  .cmp-v__cols { grid-template-columns: 1fr; gap: 24px; }
  /* table scrolls rather than crushing six columns */
  .cmp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table { min-width: 720px; }
}
@media (max-width: 640px) {
  .cmp-hero__wordmark { top: 40px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .cmp-hero__body { padding: 36px var(--gutter) 44px; gap: 32px; }
  .cmp-panel { padding: 18px 18px 18px; max-width: 100%; }
  .cmp-rows__head, .cmp-row { grid-template-columns: 1fr; gap: 10px; }
  .cmp-rows__head span:last-child { display: none; }
  .cmp-v { padding: 24px 20px; }
  .cmp-win { padding: 22px 20px; }
  .cmp-rel { padding: 22px 20px; }
  .cmp-widget { padding: 20px 18px; }
  .cmp-seg button { flex: 1 1 auto; }
  .cta--pricing .cta__actions .btn { flex: 1 1 100%; }
}

/* --- buyer's guide: page-specific blocks --- */
.cmp-related__title { margin-bottom: 32px; }

/* AIS: timeline */
.cmp-time { position: relative; padding: 0 0 8px; }
.cmp-time__line { position: absolute; left: 0; right: 0; top: 52px; height: 2px; background: linear-gradient(90deg, #E4E0EE 0%, #C9A9FF 45%, #6300FF 100%); }
.cmp-time__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cmp-time__w { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 20px; }
.cmp-time__w--past { color: #A9A6B4; }
.cmp-time__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px rgba(99,0,255,0.16); margin-bottom: 24px; }
.cmp-time__dot--past { background: #fff; border: 3px solid var(--line-purple); box-shadow: none; }
.cmp-time__t { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-primary); margin-bottom: 8px; }
.cmp-time__t--past { color: #8A8698; }
.cmp-time__d { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }
.cmp-time__d--past { color: #8A8698; }
.cmp-replaced {
  margin-top: 44px; display: grid; grid-template-columns: 1fr 480px; gap: 56px; align-items: center;
  background: var(--color-bg-page); border: 1px solid var(--line-purple); border-radius: 20px; padding: 40px;
}
.cmp-replaced__h { margin: 0 0 18px; font-family: var(--font-display); font-weight: 400; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.24; letter-spacing: -0.05em; color: var(--color-text-primary); }
.cmp-replaced__p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--color-text-muted); }
.cmp-replaced__p:last-child { margin-bottom: 0; }

/* AST: scatter */
.cmp-scatter { margin-top: 20px; }
.cmp-scatter__y { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.cmp-scatter__plot {
  position: relative; height: 210px; margin: 12px 0 10px;
  border-left: 1px solid rgba(239,241,255,0.2); border-bottom: 1px solid rgba(239,241,255,0.2);
  background-image: linear-gradient(rgba(239,241,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(239,241,255,0.06) 1px, transparent 1px);
  background-size: 25% 25%;
}
.cmp-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); transform: translate(-50%, 50%); }
.cmp-dot i { position: absolute; left: 14px; top: -5px; font-style: normal; font-size: 10.5px; white-space: nowrap; color: rgba(255,255,255,0.6); }
.cmp-dot--on { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(99,0,255,0.3); }
.cmp-dot--on i { color: #B99CFF; font-weight: 600; }
.cmp-scatter__x { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); }

/* HVH: pipeline */
/* Matches the export: label and value share a line, the bar sits under them,
   and the category tag hangs off the end of the bar. */
.cmp-pipe { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.cmp-pipe__top { display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.cmp-pipe__b { position: relative; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,0.16); }
.cmp-pipe__b--full { width: 100%; background: linear-gradient(90deg, #6300FF 0%, #8A3BFF 100%); }
.cmp-pipe__b--jam { background: var(--color-accent); box-shadow: 0 0 0 1px rgba(185,156,255,0.5); }
.cmp-pipe__tag { position: absolute; left: calc(100% + 14px); top: 5px; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); }
.cmp-pipe__tag--on { font-weight: 700; color: #B99CFF; }

/* AST + HVH: numbered question cards */
/* the export runs these as a 2x2 with a 28px gutter — no card spans */
.cmp-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cmp-q { border: 1px solid var(--line-purple); border-radius: 16px; padding: 28px; background: #fff; display: flex; flex-direction: column; }
.cmp-q__n { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 14px; }
.cmp-q__t { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-text-primary); margin-bottom: 10px; }
.cmp-q__p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); flex: 1 1 auto; }
.cmp-q__ex { margin-top: 16px; padding: 14px 16px; background: var(--color-bg-page); border: 1px solid var(--line-purple-soft); border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--color-primary); }
.cmp-q__ex span { display: block; margin-top: 8px; font-size: 11.5px; color: var(--color-text-faint); }
.cmp-q .cmp-widget { margin-top: 20px; }

@media (min-width: 901px) {
  .cmp-time__d { min-height: 96px; }
  .cmp-q__p    { min-height: 0; }
}
@media (max-width: 1200px) {
  .cmp-replaced { grid-template-columns: 1fr 400px; gap: 36px; }
  .cmp-qs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cmp-time__line { display: none; }
  .cmp-time__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cmp-time__d { min-height: 0; }
  .cmp-replaced { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .cmp-qs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cmp-time__grid { grid-template-columns: 1fr; }
  .cmp-q { padding: 22px 20px; }
  .cmp-pipe__r { grid-template-columns: 92px 1fr 34px; gap: 8px; }
  .cmp-pipe__tag { margin-left: 100px; }
  .cmp-scatter__plot { height: 170px; }
  .cmp-dot i { font-size: 9.5px; }
}

/* ==========================================================================
   Buyer's guides — category cards, bottleneck picker, dark "four numbers"
   ========================================================================== */

/* --- side-by-side pair inside a question card (AST Q1 / Q3) --- */
.cmp-duo { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-top: 4px; }
.cmp-duo__c { display: flex; flex-direction: column; justify-content: space-between;
  background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 12px; padding: 18px; }
.cmp-duo__c--bad  { background: #FDF7F7; border-color: #F0D6D6; }
.cmp-duo__c--good { background: #F5EEFF; border-color: #DCCFF5; }
.cmp-duo__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8A8698; margin-bottom: 14px; }
.cmp-duo__c--bad  .cmp-duo__k { color: #B36B6B; }
.cmp-duo__c--good .cmp-duo__k { color: var(--color-primary); }
.cmp-duo__bars { display: flex; flex-direction: column; gap: 9px; }
.cmp-duo__bars span { display: block; font-size: 11.5px; color: #3A3A46; margin-bottom: 5px; }
.cmp-duo__bars i { display: block; height: 6px; border-radius: 3px; background: #E4E0EE; }
.cmp-duo__bars b { display: block; height: 6px; border-radius: 3px; }
.cmp-duo__score { font-family: var(--font-display); font-size: 50px; line-height: 1; letter-spacing: -0.05em;
  color: #B36B6B; display: flex; align-items: baseline; gap: 8px; }
.cmp-duo__c--good .cmp-duo__score { color: var(--color-accent); }
.cmp-duo__score em { font-family: var(--font-body); font-style: normal; font-size: 11px; color: #5B5570; letter-spacing: 0; }
.cmp-duo__f { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: #8A7070; }
.cmp-duo__c--good .cmp-duo__f { color: #5B5570; }
.cmp-duo__f span { color: var(--color-accent); }

/* --- three category cards --- */
.cmp-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cmp-cat { display: flex; flex-direction: column; background: #fff;
  border: 1px solid #E4E0EE; border-radius: 18px; padding: 30px; }
.cmp-cat__k { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8A8698; margin-bottom: 12px; }
.cmp-cat__t { margin: 0 0 14px; font-family: var(--font-display); font-size: 23px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; }
.cmp-cat__p { margin: 0 0 24px; font-size: 14.5px; line-height: 1.75; color: #6B6B78; }
.cmp-cat__viz { background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 12px; padding: 18px; margin-bottom: 22px; }
.cmp-cat__viz--on { background: #F5EEFF; border-color: #DCCFF5; }
.cmp-cat__vk { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 12px; }
.cmp-cat__vf { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #5B5570; }
/* the illustration absorbs the slack so the tag rows line up across the row */
.cmp-cat__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-cat__tags span { font-size: 12px; font-weight: 600; color: var(--color-primary);
  background: #F1E8FF; border-radius: 6px; padding: 7px 12px; }
.cmp-cat__tags .is-on { color: #fff; background: var(--color-accent); }

.cmp-chase { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-chase li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #3A3A46; }
.cmp-chase li.is-bad { color: #B36B6B; }
.cmp-chase span { width: 22px; height: 22px; border-radius: 6px; background: #EFEBF7; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #5B5570; }
.cmp-chase li.is-bad span { background: #FDF7F7; color: inherit; }
.cmp-chase b { flex: 1; font-weight: 400; }
.cmp-chase i { font-style: normal; color: #8A8698; }
.cmp-chase li.is-bad i { color: inherit; }

.cmp-pile { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.cmp-pile span { height: 11px; border-radius: 2px; background: #C9A9FF; }
.cmp-pile .is-hot { background: var(--color-accent); }

.cmp-grade { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-grade li { display: flex; align-items: center; gap: 10px; }
.cmp-grade i { flex: 1; display: block; height: 6px; border-radius: 3px; background: #E4E0EE; }
.cmp-grade b { display: block; height: 6px; border-radius: 3px; }
.cmp-grade span { font-family: var(--font-display); font-size: 13px; color: #141414; width: 34px; text-align: right; }
.cmp-grade li.is-dim span { color: #8A8698; }

/* --- black band carrying the bottleneck picker --- */
.cmp-pickband { position: relative; overflow: hidden; margin-top: 28px;
  background: #000; border-radius: 18px; padding: 34px 40px;
  display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; }
.cmp-pickband__glow { position: absolute; top: -200px; right: -120px; width: 520px; height: 520px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.42) 0%, rgba(4,6,17,0) 68%); }
.cmp-pickband__p { position: relative; margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.82); }
.cmp-widget--tight { position: relative; padding: 20px 22px; border-radius: 12px;
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px); }
.cmp-widget--tight .cmp-widget__k { color: rgba(255,255,255,0.4); letter-spacing: 0.14em;
  display: block; margin-bottom: 14px; }
/* the export leaves 16px under the button row; without it the title collides */
.cmp-widget--tight .cmp-seg { gap: 7px; margin-bottom: 16px; }
.cmp-widget--tight .cmp-seg button { font-size: 11.5px; font-weight: 600; color: #fff;
  background: transparent; border: 1px solid rgba(239,241,255,0.28); border-radius: 6px;
  padding: 7px 11px; }
.cmp-widget--tight .cmp-seg button:hover { background: rgba(255,255,255,0.1); }
.cmp-widget--tight .cmp-seg button.is-on { background: var(--color-accent);
  border-color: var(--color-accent); color: #fff; }
.cmp-seg--wrap { flex-wrap: wrap; }
.cmp-pick__t { font-family: var(--font-display); font-size: 20px; line-height: 1.3; letter-spacing: -0.04em; color: #fff; }
.cmp-pick__b { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.6); }
.cmp-pick__v { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(239,241,255,0.16);
  font-size: 12px; color: #B99CFF; }

/* --- dark "four numbers" band --- */
.cmp-nums { position: relative; overflow: hidden; background: #000; color: #fff; padding: 88px 0; }
.cmp-nums__glow { position: absolute; top: -520px; left: -200px; width: 1200px; height: 1200px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.28) 0%, rgba(4,6,17,0) 65%); }
.cmp-nums .section { position: relative; }
.cmp-nums__head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.cmp-nums__h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 42px;
  line-height: 1.18; letter-spacing: -0.05em; color: #fff; }
.cmp-nums__p { margin: 0; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.62); }
.cmp-nums__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-num { display: flex; flex-direction: column; padding: 30px 32px; border-radius: 14px;
  background: rgba(239,241,255,0.05); border: 0.75px solid rgba(239,241,255,0.26);
  -webkit-backdrop-filter: blur(14.1px); backdrop-filter: blur(14.1px); }
.cmp-num__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.cmp-num__n { font-family: var(--font-display); font-size: 13px; color: #B99CFF; }
.cmp-num__t { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.cmp-num__p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.62); }
/* the visual absorbs the slack, so cards in a row finish level */
.cmp-num__viz { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 12px; background: rgba(255,255,255,0.05); padding: 20px; }
.cmp-num .cmp-widget { flex: 1 1 auto; }
.cmp-num__vk { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.cmp-num__vf { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(239,241,255,0.16);
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); }

.cmp-funnel { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.cmp-funnel i { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cmp-funnel b { display: block; border-radius: 6px 6px 0 0; }
.cmp-funnel__l { display: flex; gap: 10px; margin-top: 10px; font-size: 10.5px; line-height: 1.4; color: rgba(255,255,255,0.45); }
.cmp-funnel__l span { flex: 1; }

.cmp-tl + .cmp-tl { margin-top: 18px; }
.cmp-tl__top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px;
  color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.cmp-tl--on .cmp-tl__top { color: #fff; }
.cmp-tl__bar { display: flex; gap: 3px; }
.cmp-tl__bar i { height: 12px; border-radius: 3px; }
.cmp-tl__k { display: flex; gap: 3px; margin-top: 6px; font-size: 10px; color: rgba(255,255,255,0.35); }

.cmp-prec { display: flex; flex-direction: column; gap: 14px; }
.cmp-prec__l { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.cmp-prec__l--on { color: #fff; }
.cmp-prec__r { display: flex; gap: 5px; }
.cmp-prec__r span { flex: 1; height: 16px; border-radius: 3px; background: rgba(255,255,255,0.42); }
.cmp-prec__r .is-off { background: rgba(255,255,255,0.1); }

@media (max-width: 1024px) {
  .cmp-cats { grid-template-columns: 1fr 1fr; }
  .cmp-pickband { grid-template-columns: 1fr; gap: 26px; padding: 30px; }
  .cmp-nums__head { grid-template-columns: 1fr; gap: 20px; }
  .cmp-nums__h2 { font-size: 34px; }
}
@media (max-width: 900px) {
  .cmp-cats { grid-template-columns: 1fr; }
  .cmp-nums__grid { grid-template-columns: 1fr; }
  .cmp-nums { padding: 64px 0; }
}
@media (max-width: 640px) {
  .cmp-duo { grid-template-columns: 1fr; }
  .cmp-cat, .cmp-num { padding: 24px 20px; }
  .cmp-nums__h2 { font-size: 28px; }
  .cmp-duo__score { font-size: 40px; }
  .cmp-pile { grid-template-columns: repeat(10, 1fr); }
}

/* current page in the footer list — same rhythm as the links, no affordance */
.footer__links .is-here { color: rgba(255,255,255,0.45); cursor: default; }

/* ==========================================================================
   Lead tools — /tools/hiring-maturity-audit/, /tools/vendor-scorecard/
   ========================================================================== */

.tool-hero { position: relative; overflow: hidden; background: var(--color-bg-dark); color: #fff;
  padding: 96px 0 84px; }
.tool-hero__glow { position: absolute; top: -420px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 1100px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.34) 0%, rgba(4,6,17,0) 66%); }
.tool-hero__wordmark { position: absolute; right: -40px; bottom: -70px; pointer-events: none;
  font-family: var(--font-decor); font-size: 220px; line-height: 1; color: rgba(255,255,255,0.03); }
.tool-hero__body { position: relative; max-width: 780px; }
.tool-hero__eyebrow { display: inline-block; font-size: 15px; font-weight: 500; letter-spacing: -0.03em;
  background: #272727; border: 1px solid #363246; color: #fff; border-radius: 100px;
  padding: 6px 22px; margin-bottom: 26px; }
.tool-hero__title { margin: 0 0 22px; font-family: var(--font-display); font-weight: 400;
  font-size: 58px; line-height: 1.08; letter-spacing: -0.05em; color: #fff; }
.tool-hero__lede { margin: 0 0 32px; font-size: 18px; line-height: 1.72; color: rgba(255,255,255,0.68); }
.tool-hero__cta { display: inline-block; }
.tool-hero__sub { margin: 16px 0 0; font-size: 14px; color: rgba(255,255,255,0.45); }

/* --- three big numbers --- */
.tool-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tool-stat { background: #fff; border: 1px solid #E4E0EE; border-radius: 18px; padding: 32px 30px; }
.tool-stat__n { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1;
  letter-spacing: -0.05em; color: var(--color-accent); }
.tool-stat__l { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: #6B6B78; }
.tool-stats__note { margin: 20px 0 0; font-size: 12.5px; color: #8A8698; }

/* --- numbered feature cards --- */
.tool-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tool-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 30px; }
.tool-card__i { font-family: var(--font-display); font-size: 13px; color: var(--color-accent); margin-bottom: 16px; }
.tool-card__t { margin: 0 0 12px; font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; }
/* the copy absorbs the slack so cards in a row finish level */
.tool-card__d { flex: 1 1 auto; margin: 0; font-size: 14.5px; line-height: 1.75; color: #6B6B78; }
.tool-cards__foot { margin: 22px 0 0; font-size: 13px; color: #8A8698; }

/* --- maturity ladder --- */
.tool-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tool-rung { display: flex; align-items: flex-start; gap: 18px; background: #fff;
  border: 1px solid #E4E0EE; border-radius: 14px; padding: 20px 24px; }
.tool-rung__n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: #F1E8FF; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.tool-rung__b { font-size: 15px; line-height: 1.7; color: #6B6B78; padding-top: 4px; }
.tool-rung__b b { color: #141414; font-weight: 700; }
/* the rungs climb, so the curve is legible without a chart */
@media (min-width: 901px) {
  .tool-rung:nth-child(2) { margin-left: 28px; }
  .tool-rung:nth-child(3) { margin-left: 56px; }
  .tool-rung:nth-child(4) { margin-left: 84px; }
  .tool-rung:nth-child(5) { margin-left: 112px; }
}

/* --- landmine questions --- */
.tool-qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-q { display: flex; align-items: flex-start; gap: 16px; background: #fff;
  border: 1px solid #E4E0EE; border-radius: 14px; padding: 22px 24px; }
.tool-q__n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.tool-q__t { font-size: 15px; line-height: 1.65; color: #141414; padding-top: 3px; }

@media (max-width: 1024px) {
  .tool-hero__title { font-size: 46px; }
  .tool-stats, .tool-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .tool-qs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tool-hero { padding: 72px 0 64px; }
  .tool-hero__title { font-size: 34px; }
  .tool-hero__wordmark { font-size: 140px; }
  .tool-stats, .tool-cards { grid-template-columns: 1fr; }
  .tool-card, .tool-stat { padding: 24px 20px; }
  .tva-card, .tvc-card { padding: 26px 20px; }
  .tva-q, .tvc-q { font-size: 20px; }
  .tool-rung { padding: 18px 18px; gap: 14px; }
}

/* ==========================================================================
   Blog — /posts/ index and /posts/{slug}/ article pages
   ========================================================================== */

.blog-hero { position: relative; overflow: hidden; background: var(--color-bg-dark); color: #fff;
  padding: 60px 0 56px; text-align: center; }
.blog-hero__glow { position: absolute; top: -520px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 1100px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.32) 0%, rgba(4,6,17,0) 66%); }
.blog-hero__wordmark { position: absolute; right: -40px; bottom: -54px; pointer-events: none;
  font-family: var(--font-decor); font-size: 210px; line-height: 1; color: rgba(255,255,255,0.03); }
/* .section brings 90px of vertical padding; the hero sets its own rhythm */
.blog-hero__body { position: relative; padding-top: 0; padding-bottom: 0; }
.blog-hero__title { margin: 14px 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: 42px; line-height: 1.14; letter-spacing: -0.05em; color: #fff; }
.blog-hero__lede { margin: 0 auto; max-width: 760px; font-size: 16.5px; line-height: 1.72;
  color: rgba(255,255,255,0.68); }
.blog-hero .cmp-crumb { justify-content: center; }
.blog-hero .cmp-crumb a { color: rgba(255,255,255,0.6); }
.blog-hero .cmp-crumb__now { color: rgba(255,255,255,0.9); }

.blog-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 30px; }
.blog-search input { width: 320px; max-width: 100%; padding: 13px 16px; font: inherit; font-size: 15px;
  color: #141414; background: #fff; border: 1px solid #E4E0EE; border-radius: 12px; }
.blog-search input:focus { outline: none; border-color: var(--color-accent); }
.blog-count { margin: 0; font-size: 13.5px; color: #6B6B78; }
.blog-empty { margin: 40px 0 0; text-align: center; font-size: 16px; color: #6B6B78; }

.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
.bcard { display: flex; }
/* .bcard's display beats the UA [hidden] rule, so paginated-out cards would
   still occupy their grid track. This has to out-specify .bcard. */
.bcards .bcard[hidden] { display: none; }
.bcard__l { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #E4E0EE; border-radius: 18px; overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.bcard__l:hover { border-color: var(--color-accent); transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(99,0,255,0.10); }
.bcard__l:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.bcard__img { display: block; width: 100%; height: 208px; object-fit: cover; background: #F1E8FF; }
.bcard__img--none { display: block; width: 100%; height: 208px;
  background: linear-gradient(135deg, #2A1060 0%, #6300FF 100%); }
.bcard__meta { display: flex; align-items: center; gap: 8px; padding: 20px 22px 0;
  font-size: 12.5px; color: #8A8698; }
.bcard__t { margin: 10px 22px 0; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  line-height: 1.35; letter-spacing: -0.03em; color: #141414; }
/* the description absorbs the slack so cards in a row finish level */
.bcard__d { flex: 1 1 auto; margin: 10px 22px 0; font-size: 14px; line-height: 1.7; color: #6B6B78; }
.bcard__r { margin: 18px 22px 22px; font-size: 13.5px; font-weight: 600; color: var(--color-accent); }

/* ---------------------------------------------------------------- article */
.post__wrap { max-width: 940px; padding-left: 40px; padding-right: 40px;
  padding-bottom: 40px; }
.post__head { padding-top: 44px; }
.post__title { margin: 16px 0 18px; font-family: var(--font-display); font-weight: 400;
  font-size: 42px; line-height: 1.14; letter-spacing: -0.045em; color: #141414; }
.post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; color: #6B6B78; }
.post__sep { color: #C9C4D6; }
.post-cover { display: block; width: 100%; height: auto; margin-top: 30px;
  border-radius: 16px; border: 1px solid #E4E0EE; }

.post-toc { margin: 38px 0 0; padding: 22px 26px; background: #FBF9FF;
  border: 1px solid #E4E0EE; border-radius: 14px; }
.post-toc__h { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A8698; }
.post-toc__l { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px;
  font-size: 14.5px; }
.post-toc__l a { color: var(--color-primary); text-decoration: none; }
.post-toc__l a:hover { color: var(--color-accent); text-decoration: underline; }

/* The article body is raw WordPress HTML, so these are element selectors by
   necessity — there are no classes to hook. Scoped to .post__body. */
.post__body { margin-top: 38px; font-size: 17px; line-height: 1.78; color: #34313F; }
.post__body > *:first-child { margin-top: 0; }
.post__body h2 { margin: 46px 0 16px; font-family: var(--font-display); font-size: 28px;
  font-weight: 700; line-height: 1.28; letter-spacing: -0.035em; color: #141414; scroll-margin-top: 96px; }
.post__body h3 { margin: 34px 0 12px; font-family: var(--font-display); font-size: 20px;
  font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: #141414; scroll-margin-top: 96px; }
.post__body h4 { margin: 26px 0 10px; font-size: 17px; font-weight: 700; color: #141414; }
.post__body p { margin: 0 0 20px; }
.post__body a { color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.post__body a:hover { color: var(--color-primary); }
.post__body strong, .post__body b { font-weight: 700; color: #141414; }
.post__body ul, .post__body ol { margin: 0 0 22px; padding-left: 24px; }
.post__body li { margin-bottom: 9px; }
.post__body li > ul, .post__body li > ol { margin-top: 9px; }
.post__body hr { margin: 40px 0; border: 0; border-top: 1px solid #E7E1F5; }
.post__body blockquote { margin: 26px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--color-accent); color: #5B5570; font-style: normal; }
.post__body blockquote p:last-child { margin-bottom: 0; }
.post__body img { max-width: 100%; height: auto; border-radius: 12px; }
.post__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: #F1E8FF; border-radius: 5px; padding: 2px 6px; }

.post-tablewrap { overflow-x: auto; margin: 0 0 26px;
  border: 1px solid #E4E0EE; border-radius: 12px; }
.post-tablewrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.post-tablewrap th, .post-tablewrap td { text-align: left; padding: 13px 16px;
  border-bottom: 1px solid #E4E0EE; vertical-align: top; line-height: 1.6; }
.post-tablewrap tr:last-child td { border-bottom: 0; }
.post-tablewrap th { background: #FBF9FF; font-weight: 700; color: #141414; white-space: nowrap; }
.post-tablewrap td { color: #5B5570; }

/* the author's own in-post CTA, carried over from WordPress */
.post-cta { margin: 40px 0; padding: 30px 32px; background: #FBF9FF;
  border: 1px solid #DCCFF5; border-radius: 16px; }
.post-cta h2 { margin-top: 0; font-size: 22px; }
.post-cta > *:last-child { margin-bottom: 0; }

.post__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 48px; padding: 32px 0 0; border-top: 1px solid #E7E1F5; }
.post__back { font-size: 14.5px; font-weight: 600; color: #6B6B78; text-decoration: none; }
.post__back:hover { color: var(--color-accent); }

.post-more { margin-top: 0; padding: 44px 0 0; border-top: 1px solid #E7E1F5; }
.post-more__h { margin: 0 0 26px; font-family: var(--font-display); font-size: 24px; font-weight: 400;
  letter-spacing: -0.04em; color: #141414; }
.post-more__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-more__c { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px;
  background: #fff; border: 1px solid #E4E0EE; border-radius: 14px;
  text-decoration: none; color: inherit; transition: border-color 0.15s; }
.post-more__c:hover { border-color: var(--color-accent); }
.post-more__d { font-size: 12.5px; color: #8A8698; }
.post-more__t { font-family: var(--font-display); font-size: 16px; font-weight: 700;
  line-height: 1.4; letter-spacing: -0.02em; color: #141414; }

@media (max-width: 1024px) {
  .bcards, .post-more__g { grid-template-columns: 1fr 1fr; }
  .blog-hero__title { font-size: 44px; }
  .post__title { font-size: 34px; }
}
@media (max-width: 700px) {
  .bcards, .post-more__g { grid-template-columns: 1fr; }
  .blog-hero { padding: 64px 0 56px; }
  .blog-hero__title { font-size: 34px; }
  .blog-hero__wordmark { font-size: 130px; }
  .post__title { font-size: 28px; }
  .post__body { font-size: 16.5px; }
  .post__body h2 { font-size: 24px; }
  .post__body h3 { font-size: 18.5px; }
  .post-cta { padding: 24px 20px; }
  .blog-search input { width: 100%; }
  .blog-tools { flex-direction: column; align-items: stretch; }
}

/* .cmp-crumb was built for the dark comparison hero, so its links are white.
   On the article page it sits on white and needs its own colours. */
.post__head .cmp-crumb { flex-wrap: nowrap; max-width: 100%; }
.post__head .cmp-crumb a { color: #6B6B78; }
.post__head .cmp-crumb a:hover { color: var(--color-accent); }
.post__head .cmp-crumb > span { color: #C9C4D6; flex: 0 0 auto; }
.post__head .cmp-crumb__now { color: #34313F; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__head .cmp-crumb { min-width: 0; }
@media (max-width: 700px) {
  /* the title crumb just repeats the <h1> directly beneath it */
  .post__head .cmp-crumb__now,
  .post__head .cmp-crumb > span:nth-last-child(2) { display: none; }
}

/* --- blog pagination --- */
.blog-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 44px; }
.blog-pager:empty { display: none; }
.blog-pager__b { display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px; font-size: 14.5px; font-weight: 600;
  color: #34313F; background: #fff; border: 1px solid #E4E0EE; border-radius: 10px;
  text-decoration: none; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.blog-pager__b:hover { border-color: var(--color-accent); color: var(--color-accent); }
.blog-pager__b:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.blog-pager__b--nav { padding: 0 16px; }
.blog-pager__b.is-current { background: var(--color-accent); border-color: var(--color-accent);
  color: #fff; cursor: default; }
.blog-pager__b.is-off { opacity: 0.4; pointer-events: none; }
.blog-pager__gap { padding: 0 2px; color: #8A8698; }

@media (max-width: 700px) {
  .blog-pager { gap: 6px; }
  .blog-pager__b { min-width: 38px; height: 38px; padding: 0 9px; font-size: 13.5px; }
  /* on a narrow screen Prev/Next carry the navigation; numbers would wrap badly */
  .blog-pager__b--nav { padding: 0 14px; }
}

/* The article column carries the gutter itself, so it can run wider than the
   site default without touching the shared .section padding. */
@media (max-width: 1100px) {
  .post__wrap { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 760px) {
  .post__wrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .blog-hero { padding: 40px 0 34px; }
  .blog-hero__title { font-size: 32px; }
  .blog-hero__wordmark { font-size: 120px; bottom: -34px; }
}

/* --- standard end-of-post CTA, identical on every article --- */
.post-cta { position: relative; overflow: hidden; margin: 52px 0 0;
  background: var(--color-bg-dark); border-radius: 18px; padding: 40px 44px; }
.post-cta__glow { position: absolute; top: -230px; right: -140px; width: 560px; height: 560px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.48) 0%, rgba(4,6,17,0) 68%); }
.post-cta__body { position: relative; }
.post-cta__h { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.2; letter-spacing: -0.04em; color: #fff; }
.post-cta__p { margin: 0 0 26px; max-width: 560px; font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,0.7); }
.post-cta__a { display: flex; flex-wrap: wrap; gap: 12px; }
.post-cta__a .btn { border-radius: 0; }

/* the one post that ships its own CTA in the body keeps an in-article treatment */
.post-incta { margin: 34px 0; padding: 28px 30px; background: #FBF9FF;
  border: 1px solid #E4E0EE; border-radius: 14px; }
.post-incta > :first-child { margin-top: 0; }
.post-incta > :last-child { margin-bottom: 0; }
.post-incta h2 { margin: 0 0 12px !important; font-size: 21px !important; }

@media (max-width: 640px) {
  .post-cta { padding: 30px 24px; margin-top: 40px; }
  .post-cta__h { font-size: 22px; }
  .post-cta__a .btn { width: 100%; text-align: center; }
  .post-incta { padding: 22px 20px; }
}

/* ==========================================================================
   Primary navigation — dropdowns (08-navigation-spec.md)
   ========================================================================== */

.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__trigger, .nav__plain {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border: 0; background: none; border-radius: 8px;
  font-family: var(--font-nav, inherit); font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.82); text-decoration: none; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav__trigger:hover, .nav__plain:hover,
.nav__item.is-open .nav__trigger { color: #fff; background: rgba(255,255,255,0.08); }
.nav__trigger:focus-visible, .nav__plain:focus-visible,
.nav__signin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav__chev { transition: transform 0.18s ease; flex: 0 0 auto; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }
.nav__signin { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.82); text-decoration: none; }
.nav__signin:hover { color: #fff; }
.btn--outline { color: #fff; border-color: rgba(255,255,255,0.34); background: transparent; }
.btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

/* --- the panel --- */
.navp {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60;
  background: #0B0817; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.navp[hidden] { display: block; }          /* animate instead of snapping */
.nav__item.is-open .navp { opacity: 1; transform: none; pointer-events: auto; }
.navp--narrow { width: 340px; }
.navp--wide { width: 620px; }
/* Right-aligning the last dropdown threw a 620px panel ~500px left of its own
   trigger. At desktop widths there is room to open left-aligned like the rest;
   only flip when the panel would actually run off the viewport. */
@media (max-width: 1180px) {
  .nav__item:nth-last-child(2) .navp--wide { left: auto; right: 0; }
}
.navp__cols { display: grid; gap: 18px; }
.navp--wide .navp__cols { grid-template-columns: 1fr 1fr; gap: 26px; }
.navp__h { font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); padding: 0 12px; margin-bottom: 8px; }
.navp__i { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  transition: background 0.13s; }
.navp__i:hover, .navp__i:focus-visible { background: rgba(255,255,255,0.08); outline: none; }
.navp__i:focus-visible { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.navp__t { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.navp__d { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,0.52); }
.navp__more { display: block; margin-top: 14px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13.5px; font-weight: 600; color: #B99CFF; text-decoration: none; }
.navp__more:hover { color: #fff; }

/* --- mobile drawer accordions --- */
.nav__drawer-scroll { display: flex; flex-direction: column; }
.nvd__t { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); background: none;
  font: inherit; font-size: 17px; font-weight: 600; color: #fff; cursor: pointer; text-align: left; }
.nvd__chev { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.nvd__chev::before, .nvd__chev::after { content: ''; position: absolute; background: currentColor;
  transition: opacity 0.15s, transform 0.15s; }
.nvd__chev::before { left: 0; top: 5px; width: 12px; height: 2px; }
.nvd__chev::after { left: 5px; top: 0; width: 2px; height: 12px; }
.nvd__t[aria-expanded="true"] .nvd__chev::after { opacity: 0; transform: rotate(90deg); }
.nvd__body { padding: 6px 0 12px; display: flex; flex-direction: column; }
/* display:flex out-specifies the UA [hidden] rule, so every section sat open
   and the +/- toggled nothing visible. This has to beat .nvd__body. */
.nvd .nvd__body[hidden] { display: none; }
.nvd__body a { padding: 11px 0 11px 14px; font-size: 15.5px; color: rgba(255,255,255,0.76);
  text-decoration: none; }
.nvd__body a:hover { color: #fff; }
.nvd__h { padding: 12px 0 4px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,0.38); }
.nvd__plain { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 17px; font-weight: 600; color: #fff; text-decoration: none; }

@media (max-width: 1180px) {
  .nav__trigger, .nav__plain { padding: 9px 10px; font-size: 14.5px; }
  .nav__signin { display: none; }
}

/* --- footer: five columns, socials, newsletter, legal row --- */
.footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px 24px; }
.footer__contact { display: flex; flex-direction: column; gap: 4px; }
.footer__social { display: flex; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.footer__social a { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.16); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.footer__social a:hover { color: #fff; border-color: var(--color-accent); background: rgba(99,0,255,0.25); }

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --- placeholder pages --- */
.ph { position: relative; overflow: hidden; background: var(--color-bg-dark); color: #fff;
  padding: 64px 0 72px; }
.ph__glow { position: absolute; top: -460px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 1100px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.32) 0%, rgba(4,6,17,0) 66%); }
.ph__body { position: relative; max-width: 760px; }
.ph__eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #B99CFF; margin: 16px 0 14px; }
.ph__title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: 44px;
  line-height: 1.1; letter-spacing: -0.05em; color: #fff; }
.ph__lede { margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.68); }
.ph__note { margin: 0 0 28px; padding: 14px 18px; border-radius: 12px; font-size: 14.5px;
  line-height: 1.6; color: rgba(255,255,255,0.72);
  background: rgba(239,241,255,0.05); border: 1px solid rgba(239,241,255,0.2); }
.ph__note strong { color: #fff; }
.ph__a { display: flex; flex-wrap: wrap; gap: 12px; }
.ph__a .btn { border-radius: 0; }
.ph .cmp-crumb a { color: rgba(255,255,255,0.6); }
.ph .cmp-crumb__now { color: rgba(255,255,255,0.9); }
.ph-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ph-card { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 24px; background: #fff; border: 1px solid #E4E0EE; border-radius: 14px;
  text-decoration: none; transition: border-color 0.15s; }
.ph-card:hover { border-color: var(--color-accent); }
.ph-card__t { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #141414; }
.ph-card__a { color: var(--color-accent); }
/* 404 cards carry a description under the title; the card stays a two-child
   flex row so the arrow keeps its position on the placeholder pages too. */
.ph-card__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-card__d { font-family: var(--font-body); font-size: 13.5px; font-weight: 400;
  color: #5C5870; line-height: 1.45; }
@media (max-width: 640px) {
  .ph__title { font-size: 30px; }
  .ph-cards { grid-template-columns: 1fr; }
  .ph__a .btn { width: 100%; text-align: center; }
}

/* --- drawer breakpoint: these must come after the desktop nav block above,
       which would otherwise win the equal-specificity tie --- */
@media (max-width: 1024px) {
  .nav__links, .nav__signin { display: none; }
  .nav__right .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  /* the drawer is a column: links scroll, both CTAs stay pinned at the bottom */
  body.nav-open .nav__drawer { display: flex; flex-direction: column; padding-bottom: 0; }
  .nav__drawer-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 20px; }
  .nav__drawer-cta { flex: 0 0 auto; margin-top: 0;
    padding: 18px 0 max(20px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(239,241,255,0.14); background: #000; }
  .nav__drawer-cta .btn { border-radius: 0; }
}

/* ==========================================================================
   Lead-tool widgets — built on this design system, not ported
   ========================================================================== */

.tool-hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.tool-hero__sub { font-size: 13.5px; color: rgba(255,255,255,0.5); }

/* hero panel visuals */
.hp-curve { display: flex; align-items: flex-end; gap: 10px; height: 132px; list-style: none;
  margin: 0; padding: 0; }
.hp-curve li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 8px; height: 100%; }
.hp-curve span { display: block; width: 100%; border-radius: 6px 6px 0 0;
  background: rgba(201,169,255,0.34); }
.hp-curve .is-on span { background: var(--color-accent); }
.hp-curve b { font-family: var(--font-display); font-size: 11px; font-weight: 400;
  color: rgba(255,255,255,0.4); }
.hp-curve .is-on b { color: #fff; }

.sc-prev { display: flex; flex-direction: column; gap: 12px; }
.sc-prev__r { display: grid; grid-template-columns: 1fr; gap: 5px; }
.sc-prev__r span { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.sc-prev__r i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.18); }
.sc-prev__r i.is-us { background: var(--color-accent); }

/* maturity ladder */
.mat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mat { display: grid; grid-template-columns: 44px minmax(0, 1fr) 200px; gap: 22px; align-items: center;
  background: #fff; border: 1px solid #E4E0EE; border-radius: 14px; padding: 20px 24px; }
.mat__n { width: 38px; height: 38px; border-radius: 10px; background: #F1E8FF;
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.mat__t { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #141414; }
.mat__d { margin: 4px 0 0; font-size: 14.5px; line-height: 1.65; color: #6B6B78; }
.mat__bar { height: 8px; border-radius: 4px; background: #F1E8FF; }
.mat__bar i { display: block; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #C9A9FF, var(--color-accent)); }

/* --- the widget itself --- */
.tw-wrap { max-width: 760px; margin: 0 auto; }
.tw__ns { font-size: 15px; line-height: 1.7; color: #6B6B78; text-align: center; }
.tw__rail { height: 4px; border-radius: 99px; background: #EFEBF7; overflow: hidden; margin-bottom: 20px; }
.tw__rail i { display: block; height: 100%; width: 0; background: var(--color-accent);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.tw__card { background: #fff; border: 1px solid #E4E0EE; border-radius: 18px; padding: 34px 34px 30px;
  box-shadow: 0 14px 44px rgba(99,0,255,0.07); }
.tw__card--flush { border-radius: 0 0 18px 18px; border-top: 0; }
.tw__k { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 12px; }
.tw__q { margin: 0 0 18px; font-family: var(--font-display); font-size: 24px; font-weight: 700;
  line-height: 1.28; letter-spacing: -0.035em; color: #141414; }
.tw__sub { margin: -8px 0 18px; font-size: 14.5px; line-height: 1.6; color: #6B6B78; }
.tw__note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: #6B6B78; }
.tw__micro { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #6B6B78; }
.tw__micro.is-err { color: #B36B6B; }
.tw__pct { font-size: 13px; color: #8A8698; }

.tw__opts { display: flex; flex-direction: column; gap: 9px; }
.tw__opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px; background: #fff; border: 1px solid #E4E0EE; border-radius: 12px;
  font: inherit; font-size: 15px; color: #34313F; cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s; }
.tw__opt:hover { border-color: var(--color-accent); background: #FBF9FF; }
.tw__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tw__opt.is-on { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.tw__opt-k { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #F1E8FF;
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.tw__opt.is-on .tw__opt-k { background: rgba(255,255,255,0.22); color: #fff; }
.tw__opt-t { padding-top: 2px; }
.tw__box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 1.5px solid #DCCFF5; position: relative; }
.tw__opt.is-on .tw__box { border-color: rgba(255,255,255,0.7); }
.tw__opt.is-on .tw__box::after { content: ''; position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.tw__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.tw__chip { display: inline-flex; align-items: center; gap: 7px; padding: 11px 17px;
  background: #fff; border: 1px solid #E4E0EE; border-radius: 9999px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: #34313F; cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s; }
.tw__chip:hover { border-color: var(--color-accent); background: #FBF9FF; }
.tw__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tw__chip.is-on { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.tw__chip.is-lock { background: #F1E8FF; border-color: #DCCFF5; color: var(--color-primary);
  cursor: default; }

.tw__fields { display: flex; flex-direction: column; gap: 10px; }
.tw__in { width: 100%; padding: 14px 16px; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 12px; font: inherit; font-size: 15.5px; color: #141414; margin-top: 12px; }
.tw__fields .tw__in { margin-top: 0; }
.tw__in::placeholder { color: #9C97AC; }
.tw__in:focus { outline: none; border-color: var(--color-accent); }
.tw__in.is-err { border-color: #D98A8A; }
.tw__micro[role="alert"]:empty { display: none; }
.tw__micro[role="alert"] { color: #B36B6B; }

.tw__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 24px; }
.tw__back { padding: 8px 2px; border: 0; background: none; font: inherit; font-size: 14.5px;
  font-weight: 600; color: #6B6B78; cursor: pointer; }
.tw__back:hover { color: #141414; }
.tw__nav .btn { border-radius: 0; }
.tw__nav .btn:disabled { opacity: 0.4; pointer-events: none; }

/* --- result --- */
.tw-res { position: relative; overflow: hidden; background: var(--color-bg-dark);
  border-radius: 18px 18px 0 0; padding: 34px 34px 30px; }
.tw-res__glow { position: absolute; top: -250px; right: -160px; width: 560px; height: 560px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.5) 0%, rgba(4,6,17,0) 68%); }
.tw-res__body { position: relative; }
.tw-res__k { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.tw-res__score { display: flex; align-items: baseline; gap: 8px; }
.tw-res__score span { font-family: var(--font-display); font-size: 60px; line-height: 1;
  letter-spacing: -0.05em; color: #fff; }
.tw-res__score i { font-style: normal; font-size: 17px; color: rgba(255,255,255,0.45); }
.tw-res__lvl { margin: 12px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 400;
  letter-spacing: -0.04em; color: #fff; }
.tw-res__rungs { display: flex; gap: 6px; list-style: none; margin: 22px 0 0; padding: 0; }
.tw-res__rung { flex: 1; padding: 10px 8px; border-radius: 9px; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.tw-res__rung span { display: block; font-family: var(--font-display); font-size: 13px;
  color: rgba(255,255,255,0.4); }
.tw-res__rung b { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,0.55); }
.tw-res__rung.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.tw-res__rung.is-on span, .tw-res__rung.is-on b { color: #fff; }
.tw-res__d { margin: 22px 0 0; font-size: 15.5px; line-height: 1.72; color: rgba(255,255,255,0.72); }
.tw-res__moves { counter-reset: m; list-style: none; margin: 0; padding: 0; }
.tw-res__moves li { position: relative; margin-bottom: 10px; padding: 14px 16px 14px 50px;
  border: 1px solid #E4E0EE; border-radius: 12px; font-size: 15px; line-height: 1.6; color: #34313F; }
.tw-res__moves li::before { counter-increment: m; content: counter(m); position: absolute;
  left: 16px; top: 13px; width: 24px; height: 24px; border-radius: 7px;
  background: var(--color-accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.tw-res__a { margin-top: 22px; }
.tw-res__a .btn { border-radius: 0; }
.tw-res__note { margin: 20px 0 0; padding: 16px 18px; background: #FBF9FF; border: 1px solid #DCCFF5;
  border-radius: 12px; font-size: 14px; line-height: 1.7; color: #5B5570; }

.tw-tablewrap { overflow-x: auto; }
.tw-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tw-tbl th, .tw-tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #E4E0EE;
  vertical-align: top; line-height: 1.55; }
.tw-tbl thead th { font-size: 12px; font-weight: 700; color: #141414; white-space: nowrap; }
.tw-tbl tbody th { font-weight: 600; color: #141414; white-space: nowrap; }
.tw-tbl td { color: #6B6B78; min-width: 160px; }
.tw-tbl .is-us { background: #FBF9FF; color: var(--color-primary); }
.tw-tbl thead th.is-us { color: var(--color-accent); }

@media (max-width: 900px) {
  .mat { grid-template-columns: 38px minmax(0, 1fr); gap: 16px; }
  .mat__bar { display: none; }
}
@media (max-width: 640px) {
  .tw__card, .tw-res { padding: 24px 20px; }
  .tw__q { font-size: 20px; }
  .tw-res__score span { font-size: 46px; }
  .tw-res__rungs { flex-wrap: wrap; }
  .tw-res__rung { flex: 1 1 30%; }
  .tw__nav { flex-direction: column-reverse; align-items: stretch; }
  .tw__nav .btn { width: 100%; text-align: center; }
  .tw__back { text-align: left; }
}

/* --- buyer's guides: vendor category eyebrow + in-answer FAQ diagrams --- */

.faq__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faq__chips span { font-size: 12.5px; font-weight: 600; color: var(--color-primary);
  background: #F1E8FF; border-radius: 6px; padding: 7px 12px; }

.faq__viz { margin-top: 16px; padding: 18px; background: #FBF9FF; border: 1px solid #E4E0EE;
  border-radius: 12px; }
.faq__viz-k { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #8A8698; margin-bottom: 10px; }
.faq__viz-r { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.faq__viz-r i { flex: 1; border-radius: 3px 3px 0 0; background: #C9A9FF; }
.faq__viz-r--flat { margin-top: 14px; align-items: stretch; }
.faq__viz-r--flat i { height: 100%; background: var(--color-accent); }
.faq__viz-c { margin-top: 8px; font-size: 12px; color: #6B6B78; }

/* --- bento balance: high-volume page --- */
@media (min-width: 901px) {
  /* vendor entries carry a category line, so their heads must align */
  .cmp-v__cat { min-height: 29px; }
  /* the three category cards: illustration absorbs the slack, tags line up */
  .cmp-cat__viz { display: flex; flex-direction: column; justify-content: center; }
  .cmp-cat__p { min-height: 100px; }
  .cmp-cat__t { min-height: 32px; }
  /* the four numbers: equalise the copy so the diagrams start level in each row */
  .cmp-num__p { min-height: 128px; }
  .cmp-num__t { min-height: 26px; }
}

/* The hanging tag has nowhere to go on a narrow panel; drop it under the bar. */
@media (max-width: 760px) {
  .cmp-pipe__tag { position: static; display: block; margin-top: 6px; white-space: normal; }
  .cmp-pipe__b { overflow: visible; }
  .cmp-pipe__r { padding-bottom: 2px; }
}

/* --- four numbers: item 01 carries a table, so it spans the row --- */

.cmp-num__lead { margin: 0 0 14px; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.9); }
.cmp-num__lead b { color: #fff; font-weight: 700; }
.cmp-num__fin { margin: 18px 0 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.62); }
.cmp-num__fin b { color: #fff; font-weight: 700; }



/* --- four numbers, item 01: the three pricing models as a compact viz --- */
.cmp-model { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp-model__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 7px; }
.cmp-model__n { font-size: 13px; font-weight: 700; color: #fff; }
.cmp-model__t { font-size: 11.5px; color: rgba(255,255,255,0.5); text-align: right; }
.cmp-model__bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.cmp-model__bar i { display: block; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #8A3BFF, var(--color-accent)); }
.cmp-model__w { margin: 7px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.cmp-num__vf b { color: #fff; font-weight: 700; }

/* --- vendor entry sub-blocks (chips, stat pills, rating, quote, note) --- */
.cmp-v__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.cmp-v__chips span { font-size: 11.5px; color: #3A3A46; background: #FBF9FF;
  border: 1px solid #E4E0EE; border-radius: 6px; padding: 6px 10px; }
.cmp-v__stats { display: flex; gap: 12px; margin: 4px 0 14px; }
.cmp-v__stat { flex: 1; background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 10px;
  padding: 14px 16px; }
.cmp-v__statn { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.04em; color: #141414; }
.cmp-v__statl { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: #6B6B78; }
.cmp-v__rating { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px;
  background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 10px; padding: 14px 16px; }
.cmp-v__ratingn { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.04em;
  color: #141414; flex: 0 0 auto; }
.cmp-v__ratingl { font-size: 11.5px; line-height: 1.5; color: #5B5570; }
.cmp-v__quote { margin: 4px 0 14px; padding: 2px 0 2px 16px; border-left: 2px solid var(--color-accent); }
.cmp-v__quote p { margin: 0; font-size: 14px; line-height: 1.7; color: #3A3A46; font-style: italic; }
.cmp-v__quote cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; color: #8A8698; }
.cmp-v__note { margin: 4px 0 14px; background: #FBF9FF; border: 1px solid #E4E0EE;
  border-radius: 10px; padding: 14px 16px; }
.cmp-v__note p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #6B6B78; }
.cmp-v__note p + p { margin-top: 8px; }
.cmp-v__kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; font-size: 12.5px; }
.cmp-v__kv span:first-child { color: #6B6B78; }
.cmp-v__kv span:last-child { font-family: var(--font-display); color: #141414; }

/* --- wins band: dark on two pages, light on high-volume, Talvin highlighted --- */
.cmp-win--span { grid-column: span 2; }
.cmp-win--us { background: linear-gradient(120deg, rgba(99,0,255,0.32) 0%, rgba(99,0,255,0.08) 100%);
  border: 1px solid rgba(185,156,255,0.45); }

.cmp-wins-band--light { background: #FBF9FF; color: #141414; border-bottom: 1px solid #E7E1F5; }
.cmp-wins-band--light .cmp-wins-band__glow { display: none; }
.cmp-wins-band--light .cmp-wins__h2 { color: #141414; }
.cmp-wins-band--light .cmp-wins__p { color: #6B6B78; }
.cmp-wins-band--light .cmp-win { background: #fff; border: 1px solid #E4E0EE;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.cmp-wins-band--light .cmp-win__mark { background: #F1E8FF; color: var(--color-primary); }
.cmp-wins-band--light .cmp-win__n { color: #141414; }
.cmp-wins-band--light .cmp-win__b { color: #6B6B78; }
/* on the light page Talvin inverts instead */
.cmp-wins-band--light .cmp-win--us { background: linear-gradient(150deg, #171064 0%, #0B0616 100%);
  border: 0; }
.cmp-wins-band--light .cmp-win--us .cmp-win__n { color: #fff; }
.cmp-wins-band--light .cmp-win--us .cmp-win__b { color: rgba(255,255,255,0.72); }
.cmp-wins-band--light .cmp-win--us .cmp-win__mark { background: rgba(255,255,255,0.14); color: #fff; }

@media (max-width: 900px) {
  .cmp-win--span { grid-column: auto; }
}

/* --- Q2: the transcript that reads fine and scores wrong --- */
.cmp-asr { flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  background: #0C0713; border-radius: 12px; padding: 24px 22px; }
.cmp-asr__wave { display: flex; align-items: center; gap: 3px; height: 38px; }
.cmp-asr__wave i { flex: 1; border-radius: 2px; }
.cmp-asr__t { margin: 18px 0 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.82); }
.cmp-asr__t mark { background: rgba(99,0,255,0.35); border-bottom: 1px solid #B99CFF;
  padding: 1px 3px; color: inherit; }
.cmp-asr__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(239,241,255,0.16);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-asr__k { font-size: 11px; color: rgba(255,255,255,0.45); }
.cmp-asr__v { display: flex; align-items: center; gap: 10px; }
.cmp-asr__v b { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: #fff; }
.cmp-asr__v i { font-style: normal; font-size: 11px; color: #FF9E9E; }

.cmp-tableband { background: #FBF9FF; border-bottom: 1px solid #E7E1F5; }

/* --- ais FAQ: the volume threshold where the maths flips --- */
.faq__thresh { display: flex; gap: 4px; height: 34px; }
.faq__thresh i { border-radius: 4px; }
.faq__thresh .is-lo { flex: 1; background: rgba(201,169,255,0.45); }
.faq__thresh .is-hi { flex: 2; background: var(--color-accent); }
.faq__thresh-l { display: flex; gap: 4px; margin-top: 8px; font-size: 11.5px; color: #6B6B78; }
.faq__thresh-l span:first-child { flex: 1; }
.faq__thresh-l span:last-child { flex: 2; color: var(--color-primary); font-weight: 600; }

/* --- wins: the published-price line on the Talvin card --- */
.cmp-win__price { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cmp-win__price b { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: #fff; }
.cmp-win__price span { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.6); }

/* --- ast scatter: the band where conversational depth lives --- */
.cmp-scatter__field { position: absolute; left: 44%; right: 4%; top: 6%; bottom: 34%;
  border-radius: 14px; pointer-events: none;
  background: linear-gradient(140deg, rgba(99,0,255,0.28) 0%, rgba(99,0,255,0.06) 100%);
  border: 1px solid rgba(185,156,255,0.28); }

/* --- FAQ in-answer visuals: anti-gaming guards, and who gets assessed --- */
.faq__guard { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid #E7E1F5; font-size: 12.5px; }
.faq__guard:last-child { border-bottom: 0; }
.faq__guard span:first-child { font-weight: 700; color: #141414; white-space: nowrap; }
.faq__guard span:last-child { color: #6B6B78; text-align: right; }
.faq__ass { margin-top: 12px; }
.faq__ass span { display: block; font-size: 12px; color: #6B6B78; margin-bottom: 6px; }
.faq__ass i { display: block; height: 12px; border-radius: 3px; background: #E4E0EE; }
.faq__ass b { display: block; height: 12px; border-radius: 3px; background: #C9A9FF; }
.faq__ass b.is-on { background: var(--color-accent); }

/* ==========================================================================
   Legal pages — /privacy-policy/, /terms-and-conditions/
   ========================================================================== */
.legal-hero { position: relative; overflow: hidden; background: var(--color-bg-dark); color: #fff;
  padding: 56px 0 48px; }
.legal-hero__glow { position: absolute; top: -460px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 1000px; pointer-events: none;
  background: radial-gradient(circle, rgba(99,0,255,0.26) 0%, rgba(4,6,17,0) 66%); }
.legal-hero__body { position: relative; padding-top: 0; padding-bottom: 0; }
.legal-hero__title { margin: 14px 0 10px; font-family: var(--font-display); font-weight: 400;
  font-size: 40px; line-height: 1.12; letter-spacing: -0.05em; color: #fff; }
.legal-hero__meta { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.55); }
.legal-hero .cmp-crumb a { color: rgba(255,255,255,0.6); }
.legal-hero .cmp-crumb__now { color: rgba(255,255,255,0.9); }

/* a long legal document reads better with the index parked alongside it */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal__toc { position: sticky; top: 96px; }
.legal__toc-h { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: #8A8698; margin-bottom: 12px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal__toc a { display: block; padding: 6px 0; font-size: 13.5px; line-height: 1.5; color: #6B6B78;
  text-decoration: none; }
.legal__toc a:hover { color: var(--color-accent); }

.legal__body { max-width: 760px; font-size: 16px; line-height: 1.8; color: #34313F; }
.legal__body > *:first-child { margin-top: 0; }
.legal__body p { margin: 0 0 18px; }
.legal__h { margin: 42px 0 14px; font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; scroll-margin-top: 96px; }
.legal__sub { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px;
  margin: 0 0 14px !important; }
.legal__sub span { font-family: var(--font-display); font-size: 14px; color: var(--color-accent);
  padding-top: 2px; }
.legal__list { margin: 0 0 20px; padding: 0; list-style: none; }
.legal__list li { position: relative; padding: 12px 16px; margin-bottom: 8px;
  background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 10px;
  font-size: 15px; line-height: 1.7; }
.legal__list b { color: #141414; }

@media (max-width: 1000px) {
  .legal { grid-template-columns: 1fr; gap: 32px; }
  .legal__toc { position: static; padding-bottom: 20px; border-bottom: 1px solid #E7E1F5; }
  .legal__toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
}
@media (max-width: 640px) {
  .legal-hero { padding: 44px 0 38px; }
  .legal-hero__title { font-size: 30px; }
  .legal__toc ol { grid-template-columns: 1fr; }
  .legal__sub { grid-template-columns: 40px minmax(0, 1fr); }
}

/* --- workbench hero: the tool sits beside the pitch, not four folds below --- */
.tool-hero--work .cmp-hero__body { align-items: start; }
.tw-dock { background: rgba(255,255,255,0.04); border: 1px solid rgba(239,241,255,0.14);
  border-radius: 20px; padding: 18px; }
/* inside the dock the widget is already on a dark ground, so drop its own shadow */
.tw-dock .tw__card { box-shadow: none; }
.tw-dock .tw__ns { color: rgba(255,255,255,0.7); }
.tw-dock .tw__ns a { color: #B99CFF; }

@media (max-width: 1024px) {
  .tw-dock { padding: 14px; }
}
@media (max-width: 640px) {
  .tw-dock { padding: 0; background: none; border: 0; }
}

/* ==========================================================================
   /solutions/high-volume-hiring/
   ========================================================================== */
.hv-hero__a { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hv-hero__a .btn { border-radius: 0; }

.hv-queue { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.hv-queue__pile { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.hv-queue__pile span { height: 10px; border-radius: 2px; background: rgba(201,169,255,0.32); }
.hv-queue__pile .is-hot { background: var(--color-accent); }
.hv-queue__arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hv-queue__arrow span { width: 26px; height: 1px; background: rgba(255,255,255,0.32); position: relative; }
.hv-queue__arrow span::after { content: ''; position: absolute; right: 0; top: -3px;
  border-left: 6px solid rgba(255,255,255,0.5); border-top: 3px solid transparent;
  border-bottom: 3px solid transparent; }
.hv-queue__arrow b { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.4); }
.hv-queue__out { display: flex; flex-direction: column; gap: 5px; }
.hv-queue__out i { height: 10px; border-radius: 2px; background: var(--color-accent); }

/* --- the three volume statistics --- */
.hv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hv-stat { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 28px 26px; }
.hv-stat__k { font-size: 12px; color: #8A8698; margin-bottom: 4px; }
.hv-stat__n { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1;
  letter-spacing: -0.05em; color: var(--color-accent); }
.hv-stat__n em { font-style: normal; font-size: 18px; color: #6B6B78; letter-spacing: 0; }
.hv-stat__d { margin: 14px 0 20px; font-size: 14.5px; line-height: 1.7; color: #6B6B78; }
/* the visual absorbs the slack so the cards finish level */
.hv-stat__v { margin-top: auto; }
.hv-dots { display: flex; gap: 5px; }
.hv-dots i { flex: 1; height: 16px; border-radius: 3px; background: var(--color-accent); }
.hv-dots .is-off { background: #E4E0EE; }
.hv-dots__l { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px;
  font-size: 11px; color: #8A8698; }
.hv-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hv-bars li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center;
  font-size: 11.5px; color: #6B6B78; }
.hv-bars i { display: block; height: 9px; border-radius: 3px; background: #E4E0EE; }
.hv-bars .is-on i { background: var(--color-accent); }
.hv-bars .is-on span { color: #141414; font-weight: 600; }
.hv-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: #8A8698; }
.hv-race__r { margin-bottom: 10px; }
.hv-race__r span { font-size: 11.5px; color: #6B6B78; }
.hv-race__r b { float: right; font-size: 11.5px; font-weight: 600; color: #141414; }
.hv-race__r i { display: block; clear: both; height: 9px; margin-top: 6px; border-radius: 3px;
  background: #E4E0EE; }
.hv-race__r.is-on i { background: var(--color-accent); }

/* --- what breaks first --- */
.hv-breaks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hv-break { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 30px; }
.hv-break__t { margin: 0 0 12px; font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; }
.hv-break__p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.75; color: #6B6B78; }
.hv-break__v { margin-top: auto; }
.hv-mkt { background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 12px; padding: 18px; }
.hv-mkt__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 12px; }
.hv-mkt__k span { display: block; margin-top: 3px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: #8A8698; }
.hv-mkt__r { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid #EFEBF7; font-size: 12.5px; color: #3A3A46; }
.hv-mkt__r b { font-weight: 400; color: #8A8698; }
.hv-mkt__r em { font-style: normal; font-size: 11px; color: #B36B6B; }
.hv-mkt__r.is-ok em { color: var(--color-accent); }
.hv-mkt__f { margin-top: 12px; font-size: 12px; color: #6B6B78; }
.hv-mkt__f b { color: #141414; }
.hv-read { background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 12px; padding: 18px; }
.hv-read__k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 10px; }
.hv-read__q { margin: 0 0 14px; font-size: 13px; line-height: 1.65; color: #3A3A46; font-style: italic; }
.hv-read__c { background: #fff; border: 1px solid #E4E0EE; border-radius: 10px; padding: 14px;
  margin-bottom: 10px; }
.hv-read__c.is-on { border-color: #DCCFF5; background: #F9F5FF; }
.hv-read__h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8A8698; margin-bottom: 8px; }
.hv-read__c.is-on .hv-read__h { color: var(--color-accent); }
.hv-read__c p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; color: #3A3A46; }
.hv-read__n { margin-top: 8px; font-size: 11px; line-height: 1.5; color: #8A8698; }

/* --- how it works --- */
.hv-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hv-step { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 30px; }
.hv-step__n { font-family: var(--font-display); font-size: 13px; color: var(--color-accent);
  margin-bottom: 14px; }
.hv-step__t { margin: 0 0 12px; font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; }
.hv-step__p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.75; color: #6B6B78; }
.hv-step__v { margin-top: auto; }

.hv-widget { background: var(--color-bg-dark); border-radius: 14px; padding: 20px; }
.hv-widget__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-bottom: 12px; }
.hv-widget .cmp-seg { gap: 7px; margin-bottom: 16px; }
.hv-widget .cmp-seg button { font-size: 11.5px; font-weight: 600; color: #fff; background: transparent;
  border: 1px solid rgba(239,241,255,0.28); border-radius: 6px; padding: 7px 11px; cursor: pointer; }
.hv-widget .cmp-seg button:hover { background: rgba(255,255,255,0.1); }
.hv-widget .cmp-seg button.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.hv-widget__track { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; }
.hv-widget__track i { display: block; height: 7px; border-radius: 4px; background: var(--color-accent);
  transition: width 0.3s var(--ease-out, ease); }
.hv-widget__fig { margin-top: 12px; font-family: var(--font-display); font-size: 22px; color: #fff; }
.hv-widget__fig i { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.45); margin-left: 8px;
  font-family: var(--font-body); }
.hv-widget__note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.6); }

.hv-live { background: var(--color-bg-dark); border-radius: 14px; padding: 20px; }
.hv-live__k { display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.hv-live__k b { margin-left: auto; color: #fff; font-weight: 600; }
.hv-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; flex: 0 0 auto; }
.hv-live__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.hv-live__grid i { height: 10px; border-radius: 2px; background: rgba(201,169,255,0.35); }
.hv-live__grid i:nth-child(3n) { background: var(--color-accent); }
.hv-live__f { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-size: 11px; color: rgba(255,255,255,0.45); }
.hv-live__f b { color: #B99CFF; font-weight: 600; }
.hv-why { background: #FBF9FF; border: 1px solid #E4E0EE; border-radius: 12px; padding: 16px;
  font-size: 13px; line-height: 1.7; color: #3A3A46; }
.hv-why__k { font-weight: 700; color: var(--color-accent); }
.hv-prompt { display: flex; align-items: center; gap: 10px; background: var(--color-bg-dark);
  border-radius: 12px; padding: 14px 16px; }
.hv-prompt__c { color: var(--color-accent); font-size: 16px; }
.hv-prompt__t { flex: 1; font-size: 12.5px; color: rgba(255,255,255,0.82); }
.hv-prompt__n { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* --- ATS + consistency --- */
.hv-ats, .hv-cons { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.hv-ats__p, .hv-cons__p { margin: 0 0 18px; font-size: 16px; line-height: 1.8; color: #34313F; }
.hv-ats__p em { color: var(--color-primary); font-style: italic; }
.hv-ats__side { position: sticky; top: 96px; }
.hv-ats__pull { margin: 0 0 18px; padding: 18px 20px; background: #F5EEFF; border-radius: 12px;
  font-family: var(--font-display); font-size: 17px; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--color-primary); }
.hv-ats__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-ats__chips span { font-size: 12px; color: #3A3A46; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 6px; padding: 7px 11px; }
.hv-cap { margin-top: 18px; }
.hv-cap__r { margin-bottom: 14px; }
.hv-cap__top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px;
  font-size: 11.5px; color: rgba(255,255,255,0.6); }
.hv-cap__top b { color: #fff; font-weight: 600; text-align: right; }
.hv-cap__track { height: 9px; border-radius: 4px; background: rgba(255,255,255,0.14); }
.hv-cap__track i { display: block; height: 9px; border-radius: 4px; background: rgba(201,169,255,0.6);
  transition: width 0.3s var(--ease-out, ease); }
.hv-cap__r.is-on .hv-cap__track i { background: var(--color-accent); }

/* --- proof --- */
.hv-proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hv-proof { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 28px 26px; }
.hv-proof__n { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.04em;
  color: #141414; }
.hv-proof__n span { display: block; margin-top: 4px; font-size: 14px; font-weight: 400;
  color: var(--color-accent); }
.hv-proof__d { margin: 14px 0 20px; font-size: 14px; line-height: 1.7; color: #6B6B78; }
.hv-proof__v { margin-top: auto; }
.hv-vs__r { margin-bottom: 10px; font-size: 11.5px; color: #6B6B78; }
.hv-vs__r b { float: right; font-weight: 600; color: #141414; }
.hv-vs__r i { display: block; clear: both; height: 9px; margin-top: 6px; border-radius: 3px;
  background: #E4E0EE; }
.hv-vs__r.is-on i { background: var(--color-accent); }
.hv-chip2 { display: flex; gap: 8px; margin-bottom: 12px; }
.hv-chip2 span { font-size: 11.5px; font-weight: 600; color: #171064; background: #F1E8FF;
  border-radius: 6px; padding: 6px 10px; }
.hv-chip2 .is-on { color: #fff; background: var(--color-accent); }
.hv-grid { display: grid; grid-template-columns: repeat(23, 1fr); gap: 3px; }
.hv-grid i { height: 9px; border-radius: 2px; background: #E4E0EE; }
.hv-grid .is-on { background: var(--color-accent); }
.hv-funnel { list-style: none; margin: 0; padding: 0; }
.hv-funnel li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 10px;
  align-items: center; margin-bottom: 8px; font-size: 11.5px; color: #6B6B78; }
.hv-funnel i { display: block; height: 10px; border-radius: 3px; background: var(--color-accent); }
.hv-funnel b { text-align: right; font-family: var(--font-display); color: #141414; }
.hv-rating { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 24px;
  padding: 20px 24px; background: #fff; border: 1px solid #E4E0EE; border-radius: 14px; }
.hv-rating__n { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.04em;
  color: var(--color-accent); }
.hv-rating__d { font-size: 14px; color: #8A8698; }
.hv-rating__l { flex: 1 1 300px; font-size: 14px; line-height: 1.7; color: #6B6B78; }

/* --- enterprise --- */
.hv-ents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hv-ent { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E0EE;
  border-radius: 18px; padding: 28px 26px; }
.hv-ent__t { margin: 0 0 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.03em; color: #141414; }
.hv-ent__p { margin: 0 0 20px; font-size: 14px; line-height: 1.75; color: #6B6B78; }
.hv-ent__l { margin: auto 0 0; }
.hv-ent__l div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #EFEBF7; }
.hv-ent__l div:last-child { border-bottom: 0; }
.hv-ent__l dt { font-size: 12.5px; color: #6B6B78; }
.hv-ent__l dd { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--color-accent);
  text-align: right; }

@media (max-width: 1100px) {
  .hv-ats, .hv-cons { grid-template-columns: 1fr; gap: 32px; }
  .hv-ats__side { position: static; }
}
@media (max-width: 900px) {
  .hv-stats, .hv-proofs, .hv-ents { grid-template-columns: 1fr 1fr; }
  .hv-breaks, .hv-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hv-stats, .hv-proofs, .hv-ents { grid-template-columns: 1fr; }
  .hv-stat, .hv-proof, .hv-ent, .hv-break, .hv-step { padding: 24px 20px; }
  .hv-stat__n { font-size: 36px; }
  .hv-hero__a .btn { width: 100%; text-align: center; }
  .hv-queue { grid-template-columns: 1fr; }
  .hv-queue__out { flex-direction: row; }
  .hv-queue__out i { flex: 1; }
  .hv-grid { grid-template-columns: repeat(12, 1fr); }
}

/* --- hero panel: the queue resolving into a shortlist --- */
.hv-queue__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
  font-size: 11px; color: rgba(255,255,255,0.45); }
.hv-queue__k { margin-top: 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255,255,255,0.4); }
.hv-short { list-style: none; margin: 10px 0 0; padding: 0; }
.hv-short li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 10px;
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(239,241,255,0.12);
  font-size: 12px; color: rgba(255,255,255,0.8); }
.hv-short li:last-child { border-bottom: 0; }
.hv-short span { font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,0.4); }
.hv-short b { font-weight: 400; }
.hv-short i { font-style: normal; text-align: right; font-family: var(--font-display);
  color: var(--color-accent); }

/* --- the annotated candidate record --- */
.hv-rec { background: #fff; border: 1px solid #E4E0EE; border-radius: 14px; overflow: hidden;
  margin-bottom: 18px; }
.hv-rec__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: #FBF9FF; border-bottom: 1px solid #E4E0EE;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); }
.hv-rec__bar em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: #8A8698; }
.hv-rec__who { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px; border-bottom: 1px solid #EFEBF7; }
.hv-rec__who b { display: block; font-size: 15px; color: #141414; }
.hv-rec__who span { display: block; margin-top: 3px; font-size: 12px; color: #8A8698; }
.hv-rec__score { text-align: right; }
.hv-rec__score b { font-family: var(--font-display); font-size: 26px; color: var(--color-accent); }
.hv-rec__l { list-style: none; margin: 0; padding: 0; }
.hv-rec__l > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #EFEBF7; }
.hv-rec__l > li:last-child { border-bottom: 0; }
.hv-rec__l > li > span { width: 20px; height: 20px; border-radius: 6px; background: #F1E8FF;
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; }
.hv-rec__l b { display: block; font-size: 13px; color: #141414; margin-bottom: 6px; }
.hv-rec__bars { list-style: none; margin: 0; padding: 0; }
.hv-rec__bars li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px;
  align-items: center; margin-bottom: 5px; font-size: 11px; color: #6B6B78; }
.hv-rec__bars i { display: block; height: 6px; border-radius: 3px; background: var(--color-accent); }
.hv-rec__t { margin: 0 0 4px; font-size: 12px; line-height: 1.6; color: #3A3A46; }
.hv-rec__t em { font-style: normal; font-weight: 700; color: var(--color-accent); }
.hv-rec__n { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: #8A8698; }

/* --- scoring-drift chart --- */
.hv-side { display: flex; flex-direction: column; gap: 18px; }
.hv-drift { background: var(--color-bg-dark); border-radius: 14px; padding: 20px; }
.hv-drift__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); margin-bottom: 16px; }
.hv-drift__k span { display: block; margin-top: 4px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: rgba(255,255,255,0.32); }
.hv-drift__row { margin-bottom: 14px; }
.hv-drift__row b { display: block; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.75);
  margin-bottom: 7px; }
.hv-drift__line { position: relative; height: 26px; border-radius: 4px;
  background: rgba(255,255,255,0.06); overflow: hidden; }
.hv-drift__line.is-flat::after { content: ''; position: absolute; left: 0; right: 0; top: 11px;
  height: 4px; border-radius: 2px; background: var(--color-accent); }
/* the human line sags across the intake — that sag is the whole point */
.hv-drift__line i { position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(201,169,255,0.6) 0%, rgba(201,169,255,0.18) 100%);
  clip-path: polygon(0 34%, 22% 38%, 46% 52%, 72% 68%, 100% 82%, 100% 100%, 0 100%); }
.hv-drift__x { display: flex; justify-content: space-between; font-size: 10px;
  color: rgba(255,255,255,0.32); }
.hv-drift__f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid rgba(239,241,255,0.16); }
.hv-drift__f b { display: block; font-size: 11.5px; color: #fff; margin-bottom: 3px; }
.hv-drift__f span { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.5); }

@media (max-width: 640px) {
  .hv-drift__f { grid-template-columns: 1fr; }
  .hv-rec__bars li { grid-template-columns: 78px minmax(0, 1fr); }
}

/* a submit that did not land must not read like one that did */
.tw__micro.is-warn { color: #B36B6B; }
.tw__micro.is-warn a { color: var(--color-accent); text-decoration: underline; }

/* Lead-capture failure. The forms used to claim success unconditionally; this is
   what the visitor sees when the POST genuinely did not go through. */
.lead-err {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 4px;
  background: #FBEBEF; border: 1px solid #F0C2CD; color: #A3123A;
  font-size: 14px; line-height: 1.5;
}
.lead-err[hidden] { display: none; }


/* ============================================================================
   Responsible-AI guide (/ethical-use-of-ai-in-hiring/) and the HR AI-enablement
   landing page (/bootcamp/).

   Hero and final CTA reuse the site's own .hero / .cta components verbatim —
   these pages add no hero or CTA styling of their own. Only the body sections
   below are new, prefixed .rai-/.bc- so nothing collides with the export pages.
   ========================================================================== */

/* Hero body: single column (no right-hand visual), otherwise the .vi-hero scale. */
.pg-hero__body {
  position: relative; z-index: 2; max-width: var(--site-max); margin: 0 auto;
  padding: 78px var(--gutter) 76px;
}
.pg-hero__title {
  margin: 0; max-width: 19ch; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.12; letter-spacing: -0.05em;
  color: #fff; text-wrap: balance;
}
.pg-hero__lede { margin-top: 24px; max-width: 560px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,0.68); }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- ethics: the three pillars ---- */
.rai-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rai-pillar { border-top: 3px solid var(--color-accent); padding-top: 20px; }
.rai-pillar__n { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--color-accent); }
.rai-pillar__t {
  font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--color-text-primary); margin-top: 10px; letter-spacing: -0.02em;
}
.rai-pillar__d { margin-top: 10px; color: var(--color-text-muted); font-size: 15.5px; line-height: 1.6; }

/* ---- ethics: argument + diagram, alternating ---- */
.rai-block { padding-top: 56px; padding-bottom: 56px; }
.rai-block__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rai-block:nth-of-type(even) .rai-block__fig { order: -1; }
.rai-block__h {
  font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 400;
  color: var(--color-text-primary); line-height: 1.2; letter-spacing: -0.05em; text-wrap: balance;
}
.rai-block__text p { margin-top: 16px; color: var(--color-text-body); font-size: 16.5px; line-height: 1.7; max-width: 60ch; }
.rai-block__fig { margin: 0; background: var(--color-bg-page); border: 1px solid var(--line); padding: 26px; }
.rai-fig { width: 100%; height: auto; display: block; }

/* ---- bootcamp shared type ---- */
.bc-h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 400;
  color: var(--color-text-primary); line-height: 1.2; letter-spacing: -0.05em; text-wrap: balance;
}
.bc-lede { margin-top: 14px; max-width: 62ch; color: var(--color-text-muted); font-size: 16.5px; line-height: 1.65; }
.bc-shift__head, .bc-learn__head { margin-bottom: 34px; }

/* ---- bootcamp: the before/after table (the spine of the page) ---- */
.bc-tbl { border: 1px solid var(--line); background: #fff; }
.bc-tbl__head, .bc-tbl__row { display: grid; grid-template-columns: 150px 1fr 1fr; }
.bc-tbl__head {
  background: var(--color-bg-purple-pale); border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.bc-tbl__head > span { padding: 13px 20px; }
.bc-tbl__before { color: var(--color-text-faint); }
.bc-tbl__after  { color: var(--color-accent); }
.bc-tbl__row { border-bottom: 1px solid var(--line); }
.bc-tbl__row:last-child { border-bottom: 0; }
.bc-tbl__row > span { padding: 18px 20px; font-size: 15.5px; line-height: 1.55; }
.bc-tbl__k { font-weight: 600; color: var(--color-text-primary); font-family: var(--font-display); }
.bc-tbl__b { color: var(--color-text-faint); }
.bc-tbl__a { color: var(--color-text-body); background: rgba(99,0,255,0.04); box-shadow: inset 3px 0 0 var(--color-accent); }

/* ---- bootcamp: risks ---- */
.bc-risks { padding-top: 24px; }
.bc-risks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 30px; }
.bc-risk { background: #fff; padding: 24px 24px 26px; }
.bc-risk__t { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; letter-spacing: -0.02em; }
.bc-risk__d { margin-top: 9px; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }

/* ---- bootcamp: curriculum ---- */
.bc-mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bc-mod { background: #fff; padding: 20px 22px; display: flex; gap: 16px; align-items: baseline; }
.bc-mod__n { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.bc-mod__t { color: var(--color-text-body); font-size: 15.5px; line-height: 1.55; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .rai-pillars { grid-template-columns: 1fr; gap: 26px; }
  .rai-block__grid { grid-template-columns: 1fr; gap: 30px; }
  .rai-block:nth-of-type(even) .rai-block__fig { order: 0; }
  .bc-risks__grid { grid-template-columns: 1fr; }
  .bc-mods { grid-template-columns: 1fr; }
  .bc-tbl__head { display: none; }
  .bc-tbl__row { grid-template-columns: 1fr; }
  .bc-tbl__row > span { padding: 12px 18px; }
  .bc-tbl__k { padding-top: 18px; font-size: 17px; }
  .bc-tbl__b::before { content: "Before — "; color: var(--color-text-faint); font-weight: 600; }
  .bc-tbl__a::before { content: "AI-enabled — "; color: var(--color-accent); font-weight: 600; }
  .bc-tbl__a { box-shadow: inset 3px 0 0 var(--color-accent); margin-bottom: 4px; }
}
@media (max-width: 620px) {
  .pg-hero__body { padding-top: 56px; padding-bottom: 56px; }
  .rai-block__fig { padding: 16px; }
  .pg-hero__actions .btn { width: 100%; text-align: center; }
}

/* ============================================================================
   Post-result email capture on the two tool widgets (assets/js/tool-capture.js).
   Sits under the result, never in front of it — the answer is already on screen.
   ========================================================================== */
.tcap {
  margin-top: 28px; padding: 22px 24px 20px;
  background: var(--color-bg-card-purple); border: 1px solid rgba(99,0,255,0.16);
}
.tcap__t {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--color-text-primary); letter-spacing: -0.02em;
}
.tcap__d { margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); max-width: 58ch; }
.tcap__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tcap__in {
  flex: 1 1 190px; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--color-text-primary); background: #fff;
  border: 1px solid rgba(99,0,255,0.18); border-radius: 0;
}
.tcap__in:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-color: var(--color-accent); }
.tcap__btn {
  flex: 0 0 auto; padding: 12px 22px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--color-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  transition: filter 0.15s, box-shadow 0.15s;
}
.tcap__btn:hover:not(:disabled) { filter: brightness(0.88); box-shadow: 0 6px 20px rgba(99,0,255,0.24); }
.tcap__btn:disabled { opacity: 0.55; cursor: default; }
.tcap__err { margin-top: 9px; font-size: 13.5px; color: #C11742; }
.tcap__fine { margin-top: 12px; font-size: 12.5px; color: var(--color-text-faint); }
@media (max-width: 560px) {
  .tcap { padding: 18px; }
  .tcap__row { flex-direction: column; }
  .tcap__btn { width: 100%; }
}