/* Talenteria site styles — see claude/new-site-design-spec.md in the project */
:root {
  --purple: #7A4E9A;        /* main / Recruiting */
  --purple-text: #5B3A78;   /* purple text on white */
  --purple-dark: #3E2655;
  --purple-light: #A884CC;  /* Training */
  --plum: #4E2F6B;          /* Surveys */
  --lav-1: #F8F4FC;         /* hero fade */
  --lav-2: #F5F0FA;         /* frames */
  --lav-3: #F7F3FB;         /* placeholders, highlighted tiles */
  --lav-4: #F7F4FA;         /* closing CTA band */
  --lav-line: #E2D6EE;
  --ink: #171724;
  --body: #4A4A58;
  --body-2: #5A5A68;
  --muted: #6B6B78;
  --faint: #9A9AA6;
  --line: #ECEAF0;
  --line-2: #DCD9E2;
  --radius: 6px;
  --wrap: 1200px;
  --font: "Manrope", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--purple-text); text-decoration: none; }
a:hover { color: var(--purple-dark); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 10; }
.skip-link:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 13px 26px; border-radius: var(--radius); font: 600 16px/1.2 var(--font); border: 1px solid transparent; cursor: pointer; text-align: center; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-text); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--purple-light); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: 32px; padding-top: 22px; padding-bottom: 22px; }
.logo { display: flex; flex: 0 0 auto; }
.logo img { width: 150px; display: block; }
.main-nav { flex: 1 1 auto; display: flex; gap: 30px; font-size: 15px; font-weight: 500; }
.main-nav a { color: var(--body); }
.main-nav a[aria-current="page"], .main-nav a:hover { color: var(--ink); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions .link { font-size: 15px; font-weight: 600; color: var(--ink); }
.menu-toggle { display: none; margin-left: auto; min-width: 44px; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer; }
@media (max-width: 960px) {
  .site-header .wrap { flex-wrap: wrap; gap: 16px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .main-nav, .header-actions { display: none; width: 100%; }
  .site-header.open .main-nav { display: flex; flex-direction: column; gap: 4px; }
  .site-header.open .main-nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .site-header.open .header-actions { display: flex; justify-content: space-between; padding-bottom: 8px; }
}

/* ---------- shared pieces ---------- */
.section { padding: 104px 0; }
.section.tight { padding: 80px 0; }
.section.border-top { border-top: 1px solid var(--line); }
.section.tinted { background: #FBF9FD; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; max-width: 720px; }
.section-head.center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.kicker { font-size: 14px; font-weight: 600; color: var(--purple-text); display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--purple)); flex: 0 0 auto; }
.h2 { font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.accent { color: var(--purple); }
.lead { font-size: 20px; color: var(--body); }
.muted { color: var(--muted); }
.c-rec { --c: var(--purple); --ct: var(--purple-text); }
.c-train { --c: var(--purple-light); --ct: #6E4A92; }
.c-surv { --c: var(--plum); --ct: var(--plum); }
.top-line { border-top: 3px solid var(--c, var(--purple)); }
.placeholder { background: var(--lav-3); border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 14px; padding: 24px; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-og { aspect-ratio: 1200 / 630; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--lav-1) 0%, #fff 100%); }
.hero .wrap { padding-top: 112px; padding-bottom: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.hero h1 { font-size: 64px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; max-width: 960px; }
.hero .lead { max-width: 680px; }
.product-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 14px; font-weight: 600; color: var(--body-2); }
.product-dots span { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb .sep { color: var(--purple-light); }
.breadcrumb [aria-current] { color: var(--purple-text); font-weight: 600; }

/* ---------- product tabs (home) ---------- */
.preview { padding: 24px 0 104px; }
.tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-bottom: 1px solid var(--line); width: fit-content; margin: 0 auto 24px; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 18px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 15px var(--font); color: var(--muted); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--c); }
.frame { border-radius: 14px; border: 1px solid #E9E1F2; background: var(--lav-2); padding: 12px; }
.frame-inner { border-radius: 10px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.panel[hidden] { display: none; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 32px; align-items: center; }
.split > .side { border-left: 1px solid var(--line); padding-left: 32px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 700px) { .split > .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; } }
.app { display: flex; flex-wrap: wrap; }
.app-nav { flex: 1 1 180px; max-width: 220px; border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--body-2); }
.app-nav span { padding: 9px 12px; border-radius: var(--radius); }
.app-nav .on { background: #F6F2FA; color: var(--purple-text); }
.app-main { flex: 999 1 520px; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 700px) { .app-nav { display: none; } }
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.app-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 600; color: var(--body-2); }
.app-meta span { display: inline-flex; align-items: center; gap: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { padding: 16px; border-radius: 8px; border: 1px solid var(--line); }
.tile small { display: block; font-size: 13px; color: var(--muted); }
.tile strong { font-size: 24px; font-weight: 700; }
.tile.hl { background: var(--lav-3); border-color: var(--lav-line); }
.tile.hl strong { color: var(--purple); }
.table-mock { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.table-mock .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 100px; gap: 12px; padding: 14px 16px; align-items: center; border-top: 1px solid var(--line); font-size: 15px; }
.table-mock .row.head { border-top: 0; background: #FBFAFD; font-size: 13px; font-weight: 600; color: var(--muted); padding: 12px 16px; }
.bar { height: 6px; border-radius: 3px; background: #ECE6F2; }
.bar > i { display: block; height: 6px; border-radius: 3px; background: var(--c, var(--purple)); }
.pill { font-size: 13px; font-weight: 600; text-align: center; padding: 6px; border-radius: var(--radius); border: 1px solid var(--line-2); }
.pill.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.bubble { max-width: 88%; padding: 12px 16px; border-radius: 12px 12px 12px 4px; background: #F6F2FA; }
.bubble.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #fff; border: 1px solid var(--line); }
.kv { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.kv .ok { color: var(--purple-text); font-weight: 600; }
.kv .na { color: #8A8A96; font-weight: 600; }
.theme { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; font-size: 15px; }

/* ---------- logos strip ---------- */
.customers { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 0 36px; overflow: hidden; }
.customers-title { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; }
.marquee { display: flex; width: max-content; animation: marquee 45s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.customers:hover .marquee { animation-play-state: paused; }
.marquee-track { display: flex; align-items: center; gap: 56px; padding: 0 28px; margin: 0; list-style: none; }
.marquee-track img { width: auto; display: block; opacity: .8; transition: opacity .2s; }
.marquee-track img:hover { opacity: 1; }
.marquee-track span { font-size: 17px; font-weight: 700; color: var(--faint); white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; gap: 24px 48px; }
  .marquee-track[aria-hidden] { display: none; }
}

/* ---------- feature rows ---------- */
.feature-rows { display: flex; flex-direction: column; gap: 112px; }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.feature-row .text { display: flex; flex-direction: column; gap: 18px; }
.feature-row.reverse .text { order: 2; }
@media (max-width: 720px) { .feature-row.reverse .text { order: 0; } }
.check-list { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.check-list li { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 10px 0; }
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list.lg li { font-size: 17px; padding: 16px 0; }
.check { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--c, var(--purple)); }

/* ---------- principles + summary ---------- */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.two-col.top { align-items: start; }
.summary-card { border-radius: 12px; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.barred { display: flex; flex-direction: column; gap: 22px; }
.barred > div { display: flex; gap: 14px; }
.barred > div::before { content: ""; flex: 0 0 3px; border-radius: 2px; background: var(--c, var(--purple)); }
.barred h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.barred p { color: var(--body-2); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 48px; }

/* ---------- quote ---------- */
.quote { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.quote .mark { font-size: 72px; line-height: 0.6; font-weight: 700; color: var(--purple); padding-top: 16px; }
.quote blockquote { margin: 0; font-size: 32px; line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; max-width: 900px; }
.quote figcaption { font-size: 15px; color: var(--body-2); }
.quote figcaption strong { color: var(--ink); }

/* ---------- blog cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.post-card { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.post-card:hover { color: var(--ink); }
.post-card:hover .title { color: var(--purple-text); }
.post-card .thumb { border-radius: 10px; background: var(--lav-3); border-top: 3px solid var(--c, var(--purple)); aspect-ratio: 1200 / 630; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .cat { font-size: 13px; font-weight: 600; color: var(--purple-text); }
.post-card .title { font-size: 19px; font-weight: 600; line-height: 1.35; }
.post-card .date { font-size: 14px; color: var(--muted); }
.post-card.text { border-top: 2px solid var(--c, var(--purple)); padding-top: 20px; }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }

/* ---------- CTA + footer ---------- */
.cta-band { background: var(--lav-4); }
.cta-band .wrap { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.cta-band h2 { max-width: 720px; }
.site-footer .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 14px; color: var(--body-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { color: var(--body-2); }
.site-footer .footer-link { background: none; border: 0; padding: 0; font: inherit; color: var(--body-2); cursor: pointer; }
.site-footer .footer-link:hover { color: var(--purple-text); }

/* ---------- article ---------- */
.post-hero .wrap { max-width: 860px; padding-top: 72px; padding-bottom: 40px; gap: 22px; }
.post-hero h1 { font-size: 48px; line-height: 1.12; letter-spacing: -0.025em; }
.post-hero .lead { font-size: 19px; max-width: 700px; }
.byline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 20px; font-size: 14px; color: var(--body-2); }
.byline .sepdot { width: 4px; height: 4px; border-radius: 50%; background: var(--purple-light); }
.post-image { max-width: 1040px; margin: 0 auto; padding: 8px 24px 48px; }
.post-image img, .post-image .placeholder { border-radius: 12px; border-top: 3px solid var(--purple); width: 100%; display: block; }
.post-layout { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; padding-top: 16px; padding-bottom: 96px; }
.post-body { flex: 999 1 620px; min-width: 0; max-width: 740px; }
.post-aside { flex: 1 1 260px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
@media (max-width: 960px) { .post-aside { position: static; } }
.toc { display: flex; flex-direction: column; font-size: 15px; }
.toc .label { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.toc a { padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--body-2); }
.toc a:hover, .toc a.active { border-left-color: var(--purple); color: var(--ink); font-weight: 600; }
.side-card { padding: 24px; border-radius: 12px; border: 1px solid var(--line); border-top: 3px solid var(--purple); display: flex; flex-direction: column; gap: 12px; }
.side-card strong { font-size: 17px; }
.side-card p { font-size: 15px; color: var(--body); }

.prose { font-size: 18px; color: #2E2E3A; }
.prose > * + * { margin-top: 22px; }
.prose > p:first-child { font-size: 21px; line-height: 1.55; color: var(--ink); }
.prose h2 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin-top: 48px; scroll-margin-top: 24px; }
.prose h3 { font-size: 22px; font-weight: 700; margin-top: 32px; }
.prose ul { list-style: none; padding: 0; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li + li { margin-top: 12px; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.prose ol { padding-left: 22px; }
.prose ol > li + li { margin-top: 10px; }
.prose ol > li::marker { color: var(--purple); font-weight: 700; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--purple-light); }
.prose blockquote, .prose .callout { margin-left: 0; margin-right: 0; padding: 20px 24px; border-radius: 10px; background: var(--lav-3); border-left: 3px solid var(--purple); color: var(--purple-dark); }
.prose blockquote p + p { margin-top: 10px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.prose thead tr { background: var(--lav-3); color: var(--purple-dark); text-align: left; }
.prose th { font-weight: 700; padding: 12px 16px; white-space: nowrap; }
.prose td { padding: 12px 16px; border-top: 1px solid var(--line); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; border-radius: 12px; border: 1px solid var(--lav-line); background: var(--lav-3); margin-top: 40px; }
.inline-cta div { flex: 1 1 320px; }
.inline-cta strong { display: block; font-size: 19px; }
.inline-cta p { font-size: 16px; color: var(--body); }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag, .chip { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--lav-line); color: var(--purple-text); font-weight: 600; }
.chip { background: var(--lav-3); color: var(--purple-dark); font-size: 15px; padding: 8px 14px; }
.chip.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.share { display: flex; gap: 16px; color: var(--body-2); }

/* ---------- product page ---------- */
.ranked { display: grid; grid-template-columns: 1fr 120px 40px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; }
.ranked.top { background: var(--lav-3); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.step { padding: 24px; border-radius: 10px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--c); display: flex; flex-direction: column; gap: 8px; }
.step .n { font-size: 14px; font-weight: 700; color: var(--purple); }
.step h3 { font-size: 18px; font-weight: 700; }
.step p { font-size: 15px; color: var(--body); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.link-card { padding: 24px; border-radius: 10px; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--purple)); color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.link-card:hover { color: var(--ink); border-color: var(--lav-line); }
.link-card strong { font-size: 18px; }
.link-card span { font-size: 15px; color: var(--body-2); }
.link-card em { font-style: normal; font-weight: 600; color: var(--purple-text); padding-top: 6px; }

/* ---------- forms ---------- */
.form-card { background: #fff; border-radius: 12px; border: 1px solid var(--line); border-top: 3px solid var(--purple); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea { min-height: 46px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid #D5CBE0; font: 400 16px var(--font); background: #fff; color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--purple); outline: 2px solid #E4D6F1; }
.hp { position: absolute; left: -10000px; }
.alerts { list-style: none; margin: 0; padding: 14px 16px; border-radius: 8px; background: #FBF1F4; border: 1px solid #F0CFD9; color: #7A1F3D; font-size: 15px; }

/* ---------- blog index ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.pager a, .pager span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--line); color: var(--ink); font-weight: 600; padding: 0 12px; }
.pager .current { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ---------- responsive type ---------- */
@media (max-width: 760px) {
  .hero .wrap { padding-top: 64px; }
  .hero h1 { font-size: 40px; }
  .post-hero h1 { font-size: 34px; }
  .h2 { font-size: 30px; }
  .lead { font-size: 18px; }
  .section { padding: 72px 0; }
  .feature-rows { gap: 72px; }
  .quote blockquote { font-size: 24px; }
  .table-mock .row { grid-template-columns: 1.2fr 1fr 80px; }
  .table-mock .row > :nth-child(3) { display: none; }
  .theme { grid-template-columns: 1fr; gap: 6px; }
}

/* thin colored top line — declared last so it wins over component borders */
.top-line, .frame-inner.top-line, .placeholder.top-line { border-top: 3px solid var(--c, var(--purple)); }
.field input { min-width: 0; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* imported content */
.prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.prose p:has(> img) { font-size: inherit; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--lav-3); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- sections layout (product pages from Markdown) ---------- */
.item-body { font-size: 16px; color: var(--body); display: flex; flex-direction: column; gap: 12px; }
.item-body.lg { font-size: 18px; }
.item-body p { margin: 0; }
.item-body ul, .item-body ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.item-body ul > li, .item-body ol > li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--line); }
.item-body ul > li:last-child, .item-body ol > li:last-child { border-bottom: 1px solid var(--line); }
.item-body ul > li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2.5px solid var(--c, var(--purple)); border-bottom: 2.5px solid var(--c, var(--purple)); transform: rotate(-45deg); }
.item-body ol { counter-reset: n; }
.item-body ol > li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 9px; font-weight: 700; color: var(--purple); }
.item-body h4, .item-body h5 { margin: 6px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.item-body strong { color: var(--ink); }
.item-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.step .item-body { font-size: 15px; }
.step .item-body ul > li { padding: 6px 0 6px 22px; border: 0; }
.step .item-body ul > li:last-child { border: 0; }
.barred .item-body { font-size: 15px; color: var(--body-2); }
.row-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--lav-3); display: block; }
.card-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 4px; }
.card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: var(--lav-3); }
.prose-center { text-align: center; }
.prose-center > p:first-child { font-size: 20px; }
.prose-sm { font-size: 17px; color: var(--body); }
.prose-sm > * + * { margin-top: 14px; }
.section-head.center .prose-sm { max-width: 720px; }
.barred > div > div { display: flex; flex-direction: column; gap: 8px; }

/* ---------- pricing ---------- */
.billing { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.bill-btn { min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--radius); background: transparent; font: 600 15px var(--font); color: var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bill-btn[aria-pressed="true"] { background: var(--purple); color: #fff; }
.bill-btn .save { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--lav-3); color: var(--purple-text); }
.bill-btn[aria-pressed="true"] .save { background: rgba(255,255,255,.2); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; padding: 28px 24px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 10px; }
.plan.popular { border: 2px solid var(--purple); box-shadow: 0 24px 50px -36px rgba(60,30,90,.5); }
.plan .badge { position: absolute; top: -12px; left: 24px; padding: 3px 10px; border-radius: var(--radius); background: var(--purple); color: #fff; font-size: 12px; font-weight: 700; }
.plan h3 { font-size: 22px; font-weight: 700; }
.plan .amount { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; }
.plan .cur { font-size: 20px; font-weight: 600; color: var(--body); }
.plan .num { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; }
.plan .per { font-size: 16px; color: var(--muted); }
.plan .bill-note { font-size: 13px; margin-bottom: 6px; }
.plan .check-list { font-size: 15px; margin-top: 6px; }
.plan .check-list li { padding: 8px 0; }
.plus-title { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 19px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--purple); font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq .prose { margin-top: 12px; }

.partner-logos { display: flex; align-items: center; gap: 16px; }
.partner-logos img { height: 56px; width: auto; max-width: 200px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.partner-logos img:first-child { padding: 0; border: 0; }
.partner-logos span { font-size: 24px; font-weight: 600; color: var(--purple-light); }

/* ---------- dropdown menus ---------- */
.main-nav { align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--radius); background: none; font: 500 15px var(--font); color: var(--body); cursor: pointer; }
.nav-link:hover, .nav-trigger:hover, .nav-item.open > .nav-trigger { color: var(--ink); background: var(--lav-3); }
.nav-link[aria-current="page"], .nav-trigger[data-active="true"] { color: var(--ink); font-weight: 600; }
.nav-trigger .chev { transition: transform .15s; color: var(--muted); }
.nav-item.open > .nav-trigger .chev { transform: rotate(180deg); }
.mega { display: none; position: absolute; top: calc(100% + 10px); left: -12px; z-index: 20; padding: 20px; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(40, 20, 70, .28); width: max-content; max-width: min(760px, 92vw); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-item.open > .mega { display: flex; }
@media (hover: hover) and (min-width: 961px) { .nav-item.has-menu:hover > .mega { display: flex; } .nav-item.has-menu:hover > .nav-trigger { color: var(--ink); background: var(--lav-3); } }
.mega-overview { flex: 0 0 240px; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 10px; background: var(--lav-2); border-top: 3px solid var(--c, var(--purple)); color: var(--ink); }
.mega-overview:hover { background: #EFE7F6; color: var(--ink); }
.mega-overview .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.mega-overview strong { font-size: 17px; font-weight: 700; }
.mega-overview span:not(.eyebrow) { font-size: 14px; color: var(--body); line-height: 1.5; }
.mega-overview em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--purple-text); margin-top: auto; padding-top: 6px; }
.mega.solo .mega-overview { flex-basis: 300px; }
.mega-group { display: flex; flex-direction: column; min-width: 250px; }
.mega-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 8px; }
.main-nav .mega-group a { padding: 9px 10px; border-radius: var(--radius); font-size: 15px; font-weight: 500; color: var(--ink); }
.main-nav .mega-group a:hover, .main-nav .mega-group a[aria-current="page"] { background: var(--lav-3); color: var(--purple-text); }
@media (max-width: 960px) {
  .site-header.open .main-nav { gap: 0; align-items: stretch; }
  .site-header.open .main-nav .nav-item { border-bottom: 1px solid var(--line); }
  .site-header.open .main-nav a.nav-link, .site-header.open .main-nav .nav-trigger { width: 100%; justify-content: space-between; padding: 12px 0; border: 0; border-radius: 0; background: none; }
  .mega { position: static; box-shadow: none; border: 0; padding: 0 0 16px; width: auto; max-width: none; flex-direction: column; gap: 12px; }
  .mega::before { display: none; }
  .mega-overview { flex-basis: auto; }
  .site-header.open .main-nav .mega-group a { border-bottom: 0; padding: 10px; }
}

/* ---------- Thank-you pages ---------- */
.thanks { background: linear-gradient(180deg, var(--lav-1, #F8F4FC) 0%, #fff 100%); padding: 72px 0 24px; }
.thanks-card { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--purple); border-radius: 12px; padding: 48px 48px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 12px 40px -24px rgba(62, 38, 85, .25); }
.thanks-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--lav-2); color: var(--purple); display: grid; place-items: center; margin-bottom: 4px; }
.thanks-card h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.thanks-card .lead { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0; }
.thanks-card .btn-row { margin-top: 8px; }
.thanks-steps { width: 100%; text-align: left; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.thanks-steps-title { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-text); margin-bottom: 16px; }
.thanks-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.thanks-steps li { display: flex; gap: 14px; align-items: flex-start; }
.thanks-steps .num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--lav-2); color: var(--purple-text); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.thanks-steps strong { display: block; font-size: 16px; line-height: 1.4; }
.thanks-steps p { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.thanks-note { width: 100%; text-align: left; font-size: 15px; }
@media (max-width: 600px) { .thanks { padding-top: 40px; } .thanks-card { padding: 32px 20px 28px; } .thanks-card .btn-row .btn { width: 100%; } }

/* ---------- Cookie notice ---------- */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px -16px rgba(62, 38, 85, .35); padding: 14px 16px 14px 20px; display: flex; align-items: center; gap: 16px; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 600px) { .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; } .cookie-actions .btn { flex: 1; } }

/* ---------- Hero: conversation with an AI person ---------- */
.call { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.call-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.call-topic { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--body-2); }
.call-topic .live { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--purple)); box-shadow: 0 0 0 4px var(--lav-2); }
.call-step { font-size: 13px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 5px 10px; border-radius: 6px; }
.call-progress { height: 4px; border-radius: 3px; background: #EEE8F4; }
.call-progress i { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--purple)); }
.call-body { display: grid; grid-template-columns: minmax(180px, 224px) 1fr; gap: 24px; align-items: stretch; }
.call-tiles { display: flex; flex-direction: column; gap: 12px; }
.vtile { position: relative; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #1d1726; }
.vtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtile figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(23, 23, 36, .58); padding: 3px 8px; border-radius: 6px; }
.vtile.voice { background: linear-gradient(135deg, var(--lav-2), #E9DDF4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.vtile.voice figcaption { color: var(--purple-text); background: rgba(255, 255, 255, .8); }
.vtile .initials { width: 56px; height: 56px; border-radius: 50%; background: var(--c, var(--purple)); color: #fff; font-weight: 700; font-size: 22px; display: grid; place-items: center; }
.call-talk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.say { padding: 16px 18px; border-radius: 12px; font-size: 17px; line-height: 1.55; }
.say b { display: block; font-size: 12px; font-weight: 700; color: var(--purple-text); margin-bottom: 4px; letter-spacing: .02em; }
.say.ai { background: var(--lav-2); border-radius: 12px 12px 12px 4px; }
.say.me { background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; color: var(--body); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--c, var(--purple)); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.call-bar { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.call-bar .rec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--body-2); white-space: nowrap; }
.call-bar .rec i { width: 8px; height: 8px; border-radius: 50%; background: #C2577A; }
.wave { display: flex; align-items: center; gap: 3px; height: 24px; flex: 1; min-width: 0; overflow: hidden; }
.wave i { flex: 0 0 3px; border-radius: 2px; background: var(--purple-light); }
.call-bar .modes { display: inline-flex; background: var(--lav-2); border-radius: 8px; padding: 3px; font-size: 13px; font-weight: 600; }
.call-bar .modes span { padding: 4px 10px; border-radius: 6px; color: var(--body-2); }
.call-bar .modes .on { background: #fff; color: var(--purple-text); box-shadow: 0 1px 2px rgba(23, 23, 36, .08); }
.call-note { margin: auto 0 0; padding-top: 4px; font-size: 14px; color: var(--muted); }
.vtile .wave { flex: 0 0 auto; height: 28px; }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
@media (max-width: 720px) {
  .call { padding: 16px; }
  .call-body { grid-template-columns: 1fr; gap: 16px; }
  .call-tiles { flex-direction: row; }
  .call-tiles .vtile { flex: 1; }
  .say { font-size: 15px; }
  .call-bar .modes { display: none; }
}

/* ---------- Hero: ATS pipeline (Recruiting tab) ---------- */
.ats { display: flex; }
.ats-nav { flex: 0 0 180px; border-right: 1px solid var(--line); padding: 22px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--body-2); }
.ats-nav span { padding: 9px 12px; border-radius: var(--radius); }
.ats-nav .on { background: var(--lav-2); color: var(--purple-text); }
.ats-main { flex: 1; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.ats-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-end; }
.ats-title { font-size: 20px; font-weight: 700; }
.ats-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ats-chips span { font-size: 12px; font-weight: 600; color: var(--purple-text); background: var(--lav-2); padding: 5px 10px; border-radius: 6px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 12px; }
.kcol { background: #FAF8FC; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.khead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; padding: 2px 4px 4px; }
.khead em { font-style: normal; font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.kcard { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.kcard.hl { border-color: var(--purple-light); box-shadow: 0 6px 18px -10px rgba(122, 78, 154, .45); }
.kcard .av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--lav-2); color: var(--purple-text); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.kcard strong { display: block; font-size: 13px; line-height: 1.3; }
.kcard small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.kcard .tag { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap; color: var(--purple-text); background: var(--lav-2); padding: 1px 6px; border-radius: 4px; }
.kcard .score { font-size: 12px; font-weight: 800; color: var(--purple-text); border: 2px solid var(--purple-light); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
@media (max-width: 1000px) { .ats-nav { display: none; } }
@media (max-width: 720px) {
  .ats-main { padding: 16px; }
  .kanban { grid-template-columns: repeat(4, 220px); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .kcol { scroll-snap-align: start; }
}

/* ---------- Hero: role-play workspace (Training tab) ---------- */
.rp { display: grid; grid-template-columns: 220px 1fr 240px; }
.rp-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-text); margin-bottom: 8px; }
.rp-brief, .rp-coach { padding: 22px 20px; background: #FCFAFD; }
.rp-brief { border-right: 1px solid var(--line); }
.rp-coach { border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.rp-coach .rp-label { margin-bottom: -6px; }
.rp-title { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.rp-brief p { font-size: 14px; color: var(--body); margin: 0 0 14px; }
.rp-brief dl { margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rp-brief dt { font-size: 12px; color: var(--muted); }
.rp-brief dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 14px; height: 6px; border-radius: 3px; background: #E7DEF0; }
.lvl i.on { background: var(--c, var(--purple)); }
.rp-chat { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 92%; }
.rp-msg.me { align-self: flex-end; }
.rp-msg > div { padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.rp-msg b { display: block; font-size: 11.5px; font-weight: 700; color: var(--purple-text); margin-bottom: 3px; }
.rp-msg.ai > div { background: var(--lav-2); border-bottom-left-radius: 4px; }
.rp-msg.me > div { background: #fff; border: 1px solid var(--line); border-bottom-right-radius: 4px; color: var(--body); }
.rp-av { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.rp-av.ai { background: linear-gradient(135deg, var(--purple-light), var(--purple)); color: #fff; position: relative; }
.rp-av.ai::after { content: "AI"; position: absolute; right: -6px; bottom: -4px; font-size: 8.5px; font-weight: 800; background: #fff; color: var(--purple-text); border: 1px solid var(--lav-line); border-radius: 4px; padding: 0 3px; line-height: 1.4; }
.rp-av.me { background: #fff; border: 1px solid var(--line); color: var(--body-2); font-size: 10px; }
.rp-input { margin-top: auto; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.rp-input .rec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--body-2); white-space: nowrap; }
.rp-input .rec i { width: 8px; height: 8px; border-radius: 50%; background: #C2577A; }
.rp-input .modes { display: inline-flex; background: var(--lav-2); border-radius: 8px; padding: 3px; font-size: 13px; font-weight: 600; }
.rp-input .modes span { padding: 4px 10px; border-radius: 6px; color: var(--body-2); }
.rp-input .modes .on { background: #fff; color: var(--purple-text); box-shadow: 0 1px 2px rgba(23, 23, 36, .08); }
.mood-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.mood-row em { font-style: normal; color: var(--purple-text); }
.mood-bar { height: 8px; border-radius: 5px; margin: 8px 0 4px; background: linear-gradient(90deg, #E9C3D1, #E7DEF0 50%, #D9C7EA); position: relative; }
.mood-bar i { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--purple); left: 50%; }
.mood-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.rp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.rp-checks li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.rp-checks li::before { content: ""; flex: 0 0 16px; height: 16px; margin-top: 1px; border-radius: 50%; }
.rp-checks .ok::before { background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.rp-checks .todo { color: var(--body-2); }
.rp-checks .todo::before { border: 2px dashed var(--purple-light); }
.rp-tip { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--purple-light); border-radius: 8px; padding: 10px 12px; }
.rp-tip b { color: var(--purple-text); margin-right: 4px; }
@media (max-width: 1000px) { .rp { grid-template-columns: 1fr 240px; } .rp-brief { display: none; } }
@media (max-width: 720px) {
  .rp { grid-template-columns: 1fr; }
  .rp-coach { border-left: 0; border-top: 1px solid var(--line); }
  .rp-chat { padding: 16px; }
  .rp-input .modes { display: none; }
}

/* Training tab: voice call stage */
.rp-call { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vc-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.vc-top .rec { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--body-2); }
.vc-top .rec i { width: 8px; height: 8px; border-radius: 50%; background: #C2577A; }
.vc-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vc-speaker { position: relative; border-radius: 14px; background: linear-gradient(160deg, #F7F2FB, #EEE4F7); padding: 22px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 190px; justify-content: center; }
.vc-speaker.me { background: #FAF8FC; border: 1px solid var(--line); }
.vc-speaker strong { font-size: 15px; margin-top: 8px; }
.vc-speaker small { font-size: 12px; color: var(--muted); }
.vc-orb { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.vc-orb span { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--purple-light), var(--purple)); }
.vc-speaker.me .vc-orb span { width: 60px; height: 60px; font-size: 14px; color: var(--body-2); background: #fff; border: 1px solid var(--line); }
.vc-orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--purple-light); opacity: 0; animation: vc-ring 2.4s ease-out infinite; }
.vc-orb .ring.r2 { animation-delay: 1.2s; }
@keyframes vc-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.vc-wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-top: 6px; }
.vc-wave i { width: 3px; height: var(--h); border-radius: 2px; background: var(--purple); animation: vc-bar 1s ease-in-out var(--d) infinite alternate; }
@keyframes vc-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.vc-mic { margin-top: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--purple-text); background: var(--lav-2); }
.vc-captions { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vc-captions p { margin: 0; font-size: 15px; line-height: 1.5; }
.vc-captions p.old { font-size: 13.5px; color: var(--muted); }
.vc-captions b { color: var(--purple-text); font-size: 12px; margin-right: 8px; text-transform: uppercase; letter-spacing: .05em; }
.vc-controls { display: flex; justify-content: center; gap: 12px; margin-top: auto; }
.vc-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); }
.vc-btn.end { background: #C2577A; color: #fff; }
@media (prefers-reduced-motion: reduce) { .vc-orb .ring, .vc-wave i { animation: none; } }
@media (max-width: 720px) { .rp-call { padding: 16px; } .vc-speaker { min-height: 160px; } }

/* Surveys tab: voice survey */
.vc-orb .ai-orb { background: #fff !important; border: 2px solid var(--purple-light) !important; color: var(--purple-text) !important; font-size: 16px !important; font-weight: 800; }
.sv-qs { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; counter-reset: q; }
.sv-qs li { counter-increment: q; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--muted); }
.sv-qs li::before { content: counter(q); flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #F1EBF7; color: var(--purple-text); }
.sv-qs li.done { color: var(--body-2); }
.sv-qs li.done::before { content: "✓"; background: var(--c, var(--purple)); color: #fff; }
.sv-qs li.now { color: var(--ink); font-weight: 700; }
.sv-qs li.now::before { background: #fff; border: 2px solid var(--c, var(--purple)); }
.sv-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-themes span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.sv-themes .pos { background: var(--lav-2); color: var(--purple-text); }
.sv-themes .neg { background: #F8E8EE; color: #9C3A5D; }
.sv-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------- Home: results band ---------- */
.stats-band { background: #FBF9FD; border-bottom: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 56px; padding-bottom: 56px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 0 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat strong { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--purple-text); }
.stat span { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.stat small { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; gap: 32px 0; } .stat:nth-child(3) { border-left: 0; padding-left: 0; } }

/* ---------- Home: how it works ---------- */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.steps3 li { position: relative; padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--c, var(--purple)); border-radius: 12px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.steps3 .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--purple-text); background: var(--lav-2); }
.steps3 h3 { font-size: 20px; font-weight: 700; margin: 6px 0 0; }
.steps3 p { color: var(--body-2); margin: 0; }
.steps3 li:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 44px; font-size: 18px; color: var(--purple-light); }
@media (max-width: 900px) { .steps3 { grid-template-columns: 1fr; } .steps3 li::after { display: none; } }

/* ---------- Home: problem callout in product rows ---------- */
.problem { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--lav-2); border-left: 3px solid var(--c, var(--purple)); }
.problem strong { flex: 0 0 auto; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--purple-text); }
.problem p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
.problem .src { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ---------- Home: built for ---------- */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aud { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.aud:hover { color: var(--ink); border-color: var(--purple-light); transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(62, 38, 85, .35); }
.aud .kicker { font-size: 12px; }
.aud strong { font-size: 19px; }
.aud p { margin: 0; color: var(--body-2); font-size: 15px; flex: 1; }
.aud em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--purple-text); }
@media (max-width: 900px) { .aud-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---------- Home: integrations ---------- */
.integ { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.integ-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.integ-logos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 96px; padding: 12px 8px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--body-2); border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s; }
.integ-logos a:hover { border-color: var(--purple-light); }
.integ-logos img { width: 100%; height: 28px; object-fit: contain; display: block; }
@media (max-width: 900px) { .integ { grid-template-columns: 1fr; gap: 32px; } .integ-logos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Home: review badges ---------- */
.badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 12px; }
.badges img { height: 56px; width: 140px; object-fit: contain; display: block; }

/* ---------- Home: FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 20px; }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; font-weight: 500; color: var(--purple); }
.faq-list details[open] summary::after { content: "–"; }
.faq-a { padding: 0 0 18px; color: var(--body); }
.faq-a p { margin: 0; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Landing pages ---------- */
.lp-hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.lp-hero h1 { max-width: 900px; }
.lp-hero .lead { max-width: 700px; }
.lp-proof { padding: 72px 0; background: #FBF9FD; border-bottom: 1px solid var(--line); }
.lp-proof-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: center; }
.lp-problem { padding: 22px 24px; }
.lp-problem strong { font-size: 44px; }
.lp-stat { border-left: 1px solid var(--line); padding: 0 0 0 28px; }
@media (max-width: 900px) { .lp-proof-grid { grid-template-columns: 1fr 1fr; } .lp-problem { grid-column: 1 / -1; } .lp-stat:nth-child(2) { border-left: 0; padding-left: 0; } }
.lp-visual { padding: 12px; }
.ui { padding: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.ui-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ui-head small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ui-head strong { font-size: 17px; }
.ui-pill { font-size: 12px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 4px 10px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ui-pill.live i { width: 7px; height: 7px; border-radius: 50%; background: #C2577A; }
.ui-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ui-levels div { background: var(--lav-2); border-radius: 8px; padding: 10px; }
.ui-levels div.mute { background: #F4F3F6; }
.ui-levels b { display: block; font-size: 20px; color: var(--purple-text); line-height: 1.1; }
.ui-levels .mute b { color: var(--muted); }
.ui-levels span { font-size: 11.5px; color: var(--body-2); }
.ui-cand { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.ui-cand-top, .ui-r { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; }
.ui-cand-top { grid-template-columns: 34px 1fr auto; margin-bottom: 2px; }
.ui .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 12px; font-weight: 700; }
.ui .av.sm { width: 28px; height: 28px; font-size: 10.5px; flex: 0 0 auto; }
.ui strong { font-size: 14px; }
.ui small { display: block; font-size: 12px; color: var(--muted); }
.ui .score { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--purple-light); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--purple-text); }
.ui-crit { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; font-weight: 600; }
.ui-crit i { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--purple) var(--w), #EEE8F4 var(--w)); }
.ui-crit.soft i { background: linear-gradient(90deg, var(--purple-light) var(--w), #EEE8F4 var(--w)); }
.ui-crit em { font-style: normal; text-align: right; color: var(--purple-text); font-weight: 700; }
.ui-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); background: #FCFAFD; border-left: 3px solid var(--purple-light); border-radius: 6px; padding: 9px 12px; }
.ui-note b { color: var(--purple-text); }
.ui-report { display: flex; flex-direction: column; gap: 2px; border: 1px dashed var(--lav-line); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.ui-report span { color: var(--muted); font-size: 12px; }
.ui-report b { color: var(--purple-text); }
.ui-search { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--purple-light); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; color: var(--ink); box-shadow: 0 0 0 4px var(--lav-2); }
.ui-search svg { color: var(--purple); flex: 0 0 auto; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips span { font-size: 12px; font-weight: 600; color: var(--purple-text); background: var(--lav-2); padding: 4px 9px; border-radius: 999px; }
.ui-results { display: flex; flex-direction: column; gap: 8px; }
.ui-r { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ui-tag { font-size: 11px; font-weight: 600; color: var(--body-2); background: #F4F3F6; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.ui-btn { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); color: var(--body-2); white-space: nowrap; grid-column: 3 / 5; }
.ui-btn.ok { background: var(--purple); border-color: var(--purple); color: #fff; }
.ui-comment { display: flex; gap: 10px; align-items: flex-start; background: var(--lav-2); border-radius: 10px; padding: 10px 12px; }
.ui-comment p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.ui-comment b { display: block; font-size: 11.5px; color: var(--purple-text); }
.ui-portal-note { font-size: 12.5px; color: var(--body-2); border-top: 1px solid var(--line); padding-top: 10px; }
.ui-portal-note span { font-weight: 700; color: var(--purple-text); margin-right: 6px; }
.ui .vc-speaker { min-height: 150px; padding: 16px 10px 14px; }
@media (max-width: 600px) { .ui-levels { grid-template-columns: 1fr 1fr; } .ui-tag { display: none; } .ui-r { grid-template-columns: 34px 1fr auto; } .ui-btn { grid-column: auto; } }

/* ---------- Landing hero: AI overview (Recruiting) ---------- */
.aio { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.aio-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.aio-head small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.aio-head strong { font-size: 20px; }
.aio-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: stretch; }
.aio-col { display: flex; flex-direction: column; gap: 14px; }
.aio-col .aio-card { flex: 1; }
.aio-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; font-size: 14px; }
.aio-card.hl { border-color: var(--purple-light); box-shadow: 0 16px 36px -22px rgba(122, 78, 154, .55); background: linear-gradient(180deg, #FDFBFE, #fff); }
.aio-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-text); }
.aio-label svg { color: var(--purple); }
.aio-big b { display: block; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.aio-big span { font-size: 13px; color: var(--muted); }
.aio-stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; }
.aio-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--body-2); }
.aio-legend li { display: flex; align-items: center; gap: 8px; }
.aio-legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.aio-legend b { margin-left: auto; color: var(--ink); }
.aio-prof { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.aio-prof img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.aio-prof strong { font-size: 15px; display: block; }
.aio-prof small { font-size: 12px; color: var(--muted); }
.aio-ring { --v: 88; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--purple) calc(var(--v) * 1%), #EEE8F4 0); display: grid; place-items: center; }
.aio-ring b { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: var(--purple-text); }
.aio-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); background: var(--lav-2); border-radius: 8px; padding: 10px 12px; }
.aio-why b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-text); margin-bottom: 2px; }
.aio-call { display: flex; align-items: center; gap: 10px; }
.aio-call strong { display: block; font-size: 14px; }
.aio-call small { font-size: 12px; color: var(--muted); }
.aio-orb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--purple-light), var(--purple)); box-shadow: 0 0 0 4px var(--lav-2); flex: 0 0 auto; }
.aio-wave { margin-top: 0; height: 26px; }
.aio-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--purple-light); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--ink); }
.aio-search svg { color: var(--purple); flex: 0 0 auto; }
.aio-found { font-size: 13px; color: var(--body-2); }
.aio-found b { color: var(--purple-text); font-size: 15px; }
@media (max-width: 900px) { .aio-grid { grid-template-columns: 1fr 1fr; } .aio-card.hl { grid-column: 1 / -1; order: -1; } }
@media (max-width: 600px) { .aio { padding: 16px; } .aio-grid { grid-template-columns: 1fr; } }

/* ---------- AI interviews page visuals ---------- */
.iv-followup { border: 1px dashed var(--purple-light); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.iv-followup span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--purple-text); margin-bottom: 2px; }
.iv-comp { display: flex; flex-direction: column; gap: 10px; }
.iv-qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iv-qlist li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.iv-qlist li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-weight: 700; font-size: 12px; }
.iv-qlist p { margin: 0; font-size: 14px; line-height: 1.45; }
.iv-qlist small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.iv-qlist em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--purple-text); }
.iv-qlist li.add { border-style: dashed; color: var(--muted); grid-template-columns: 26px 1fr; }
.iv-qlist li.add > span { background: #fff; border: 1px dashed var(--purple-light); }
.iv-msg { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.iv-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iv-modes span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--body-2); }
.iv-modes span.on { border-color: var(--purple); background: var(--lav-2); color: var(--purple-text); box-shadow: 0 0 0 1px var(--purple); }
.iv-lang { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--body-2); }
.iv-lang b { color: var(--ink); }
.iv-rep { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; align-items: center; }
.iv-video { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(135deg, #3E2655, #7A4E9A); display: grid; place-items: center; }
.iv-video .play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--purple); display: grid; place-items: center; font-size: 16px; padding-left: 3px; }
.iv-video small { position: absolute; left: 8px; bottom: 8px; color: #fff; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, .3); padding: 2px 6px; border-radius: 5px; }
.iv-trans { font-size: 13px; line-height: 1.5; color: var(--body-2); border-top: 1px solid var(--line); padding-top: 10px; }
.iv-trans b { color: var(--purple-text); margin-right: 6px; }
.iv-int { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iv-int div { background: var(--lav-2); border-radius: 10px; padding: 12px; }
.iv-int b { display: block; font-size: 26px; line-height: 1.1; color: var(--purple-text); }
.iv-int span { font-size: 12px; color: var(--body-2); }
.iv-timeline { position: relative; height: 34px; border-radius: 8px; background: repeating-linear-gradient(90deg, #F4F0F8 0 2px, transparent 2px 12px), #FCFAFD; border: 1px solid var(--line); }
.iv-timeline i { position: absolute; top: 6px; width: 4px; height: 20px; border-radius: 2px; background: #C2577A; }
.iv-timeline i.p { background: var(--purple-light); }
.iv-timeline span { position: absolute; bottom: -18px; font-size: 11px; color: var(--muted); }
.iv-timeline span:last-of-type { right: 0; }
.iv-timeline + .ui-note { margin-top: 12px; }
@media (max-width: 600px) { .iv-rep { grid-template-columns: 1fr; } .iv-int { grid-template-columns: 1fr; } }

/* ---------- Internal talent marketplace visuals ---------- */
.tm-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tm-role { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.tm-role.gap { border-style: dashed; background: #FCFAFD; }
.tm-role.gap p { margin: 0; font-size: 13px; color: var(--body-2); line-height: 1.5; }
.tm-role.gap b { color: var(--purple-text); display: block; }
.tm-rh strong { display: block; font-size: 15px; }
.tm-rh small { font-size: 12px; color: var(--muted); }
.tm-pick { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; background: var(--lav-2); border-radius: 10px; padding: 8px; }
.tm-pick .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--purple-text); font-size: 11px; font-weight: 700; }
.tm-pick b { display: block; font-size: 13.5px; }
.tm-pick small { font-size: 11.5px; color: var(--body-2); }
.tm-pick .score { font-size: 12px; font-weight: 800; color: var(--purple-text); }
.tm-alt { font-size: 12px; color: var(--muted); }
.tm-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-skills span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.tm-skills .s3 { background: var(--purple); color: #fff; }
.tm-skills .s2 { background: #D9C7EA; color: var(--purple-dark); }
.tm-skills .s1 { background: var(--lav-2); color: var(--purple-text); }
.tm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-facts div { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.tm-facts small { display: block; font-size: 11.5px; color: var(--muted); }
.tm-facts b { font-size: 13.5px; }
.tm-actions { display: flex; gap: 8px; }
.tm-actions .ui-btn { grid-column: auto; }
.ui-r.tm-opp { grid-template-columns: 1fr auto auto; }
.ui-r.tm-opp .ui-btn { grid-column: auto; }
.lp-proof-grid.solo { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
@media (max-width: 1000px) { .tm-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tm-roles { grid-template-columns: 1fr; } .tm-facts { grid-template-columns: 1fr; } }

/* ---------- Global hiring visuals ---------- */
.ml-flow { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 18px; align-items: center; }
.ml-in, .ml-out { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ml-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ml-langs span { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; background: var(--lav-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ml-langs b { width: 30px; height: 22px; border-radius: 5px; background: #fff; display: grid; place-items: center; font-size: 11px; color: var(--purple-text); }
.ml-langs em { font-style: normal; font-weight: 700; color: var(--purple-text); }
.ml-arrow { display: flex; align-items: center; }
.ml-arrow span { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; font-size: 12px; font-weight: 700; color: var(--purple-text); text-align: center; line-height: 1.35; padding: 10px 12px; border-radius: 999px; background: var(--lav-2); position: relative; }
.ml-arrow span::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--purple-light); font-size: 16px; }
.ml-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ml-row .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11px; font-weight: 700; }
.ml-row b { display: block; font-size: 13.5px; }
.ml-row small { font-size: 12px; color: var(--muted); }
.ml-row .score { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--purple-light); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--purple-text); }
.ml-switch { display: inline-flex; background: var(--lav-2); border-radius: 8px; padding: 3px; font-size: 12px; font-weight: 700; }
.ml-switch span { padding: 4px 9px; border-radius: 6px; color: var(--body-2); }
.ml-switch .on { background: #fff; color: var(--purple-text); box-shadow: 0 1px 2px rgba(23, 23, 36, .08); }
.ml-site { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ml-site-hero { background: linear-gradient(135deg, #4E2F6B, #7A4E9A); color: #fff; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.ml-site-hero b { font-size: 17px; }
.ml-site-hero span { font-size: 12px; opacity: .85; }
.ml-site .ui-results { padding: 10px; }
.ml-cv { display: grid; grid-template-columns: 0.8fr auto 1.2fr; gap: 12px; align-items: center; }
.ml-doc { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #FCFAFD; font-size: 12.5px; color: var(--body-2); line-height: 1.5; }
.ml-doc p { margin: 6px 0 0; }
.ml-tag { font-size: 11px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 3px 7px; border-radius: 5px; }
.ml-arrow2 { color: var(--purple-light); font-size: 20px; }
.ml-chat { display: flex; flex-direction: column; gap: 10px; }
.ml-m { max-width: 85%; font-size: 14px; line-height: 1.5; }
.ml-m.me { align-self: flex-end; background: var(--purple); color: #fff; padding: 9px 13px; border-radius: 12px 12px 4px 12px; }
.ml-m.bot { display: flex; gap: 8px; align-items: flex-end; }
.ml-m.bot p { margin: 0; background: var(--lav-2); padding: 9px 13px; border-radius: 12px 12px 12px 4px; }
@media (max-width: 900px) { .ml-flow { grid-template-columns: 1fr; } .ml-arrow { justify-content: center; } .ml-arrow span { max-width: none; } .ml-arrow span::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); } }
@media (max-width: 600px) { .ml-cv { grid-template-columns: 1fr; } .ml-arrow2 { display: none; } .ml-langs { grid-template-columns: 1fr; } }
.lp-proof-grid.stats-only { grid-template-columns: repeat(var(--n, 3), 1fr); }
.lp-proof-grid.stats-only .lp-stat:first-child { border-left: 0; padding-left: 0; }

/* ---------- Candidate experience visuals ---------- */
.cx-hero { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 28px; align-items: center; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.cx-phone { position: relative; border-radius: 34px; background: #171724; padding: 12px; box-shadow: 0 24px 50px -24px rgba(62, 38, 85, .6); }
.cx-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 20px; border-radius: 0 0 12px 12px; background: #171724; z-index: 1; }
.cx-screen { background: #fff; border-radius: 24px; padding: 34px 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 470px; }
.cx-screen > small { font-size: 11px; color: var(--muted); font-weight: 600; }
.cx-screen > strong { font-size: 20px; }
.cx-job { font-size: 13px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 6px 10px; border-radius: 8px; }
.cx-steps { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cx-steps li { position: relative; padding: 0 0 14px 26px; font-size: 13px; color: var(--muted); }
.cx-steps li::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #DCD2E8; background: #fff; }
.cx-steps li::after { content: ""; position: absolute; left: 7px; top: 17px; bottom: 1px; width: 2px; background: #EEE8F4; }
.cx-steps li:last-child::after { display: none; }
.cx-steps li.done::before { background: var(--purple); border-color: var(--purple); }
.cx-steps li.now::before { border-color: var(--purple); box-shadow: 0 0 0 4px var(--lav-2); }
.cx-steps b { display: block; color: var(--ink); font-size: 13.5px; }
.cx-steps li:not(.done):not(.now) b { color: var(--muted); }
.cx-steps span { font-size: 12px; }
.cx-msg { margin-top: auto; font-size: 13px; line-height: 1.45; background: var(--lav-2); border-radius: 10px; padding: 10px 12px; }
.cx-msg b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-text); }
.cx-side { display: flex; flex-direction: column; gap: 14px; }
.cx-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 28px -22px rgba(62, 38, 85, .45); }
.cx-card.in { box-shadow: none; }
.cx-p { margin: 0; font-size: 14px; color: var(--body); }
.cx-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-slots span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); color: var(--body-2); }
.cx-slots span.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.cx-evp { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 10px 4px; }
.cx-evp span { font-size: 12px; font-weight: 600; color: var(--purple-text); background: var(--lav-2); padding: 4px 10px; border-radius: 999px; }
.cx-evp + .ui-note small { color: var(--muted); font-size: 12px; }
.cx-form { display: flex; flex-direction: column; gap: 10px; }
.cx-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--body-2); }
.cx-form label span { font-size: 14px; font-weight: 500; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.cx-upload { border: 1.5px dashed var(--purple-light); border-radius: 8px; padding: 10px 12px; background: #FCFAFD; }
.cx-upload b { display: block; font-size: 13.5px; color: var(--purple-text); }
.cx-upload small { font-size: 12px; color: var(--muted); }
.cx-form .cx-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--body); }
.cx-check i { width: 18px; height: 18px; border-radius: 5px; background: var(--purple); color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.cx-tabs span { font-size: 13px; font-weight: 600; color: var(--body-2); padding: 8px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cx-tabs span.on { color: var(--purple-text); border-bottom-color: var(--purple); }
.cx-tabs b { background: var(--purple); color: #fff; font-size: 10px; border-radius: 8px; padding: 1px 6px; margin-left: 2px; }
@media (max-width: 800px) { .cx-hero { grid-template-columns: 1fr; padding: 18px; } .cx-phone { max-width: 300px; margin: 0 auto; } }
.cx-card .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 10.5px; font-weight: 700; flex: 0 0 auto; }
.cx-card .ml-m { font-size: 13.5px; }

/* Staffing agencies visuals */
.sa-client { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-text) !important; margin-bottom: 2px; }
.sa-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sa-stages i { height: 5px; border-radius: 3px; background: var(--lav-line); }
.sa-stages i:nth-child(-n+1) { background: var(--purple); }
.sa-stages[style*="--s:2"] i:nth-child(-n+2),
.sa-stages[style*="--s:3"] i:nth-child(-n+3),
.sa-stages[style*="--s:4"] i { background: var(--purple); }
.sa-line { margin: 0; font-size: 12.5px; color: var(--body-2); }
.sa-line b { color: var(--ink); }
.sa-status { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--lav-2); color: var(--purple-text); }
.sa-status.ok { background: var(--purple); color: #fff; }
.sa-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.sa-legend span + span::before { content: "→"; margin-right: 8px; color: var(--purple-text); }
.sa-legend::before { content: "Stages:"; font-weight: 700; }
@media (max-width: 600px) { .sa-orders .tm-role:nth-child(n+3) { display: none; } }

/* High-volume hiring visuals */
.hv-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; padding: 24px; align-items: center; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.hv-main { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.hv-funnel { display: flex; flex-direction: column; gap: 10px; }
.hv-row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 12px; align-items: center; font-size: 13.5px; }
.hv-row span { color: var(--body-2); }
.hv-row i { height: 22px; border-radius: 5px; background: linear-gradient(90deg, var(--purple), var(--purple-light)); width: var(--w); min-width: 8px; }
.hv-row b { text-align: right; font-size: 14px; }
.hv-row.hire i { background: var(--purple-dark); }
.hv-row.hire b { color: var(--purple-text); }
.hv-big { font-size: 22px; color: var(--purple-text); margin-right: 4px; }
.hv-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hv-day { display: flex; flex-direction: column; gap: 6px; }
.hv-day b { font-size: 12px; color: var(--muted); text-align: center; }
.hv-day span { font-size: 12.5px; font-weight: 600; text-align: center; padding: 6px 0; border-radius: 6px; border: 1px dashed var(--line-2); color: var(--muted); }
.hv-day span.bk { background: var(--lav-2); border: 1px solid var(--lav-line); color: var(--purple-text); }
.hv-doc { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; color: var(--body); }
.hv-doc b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.hv-doc p { margin: 0 0 8px; }
.hv-doc ul { margin: 0; padding-left: 18px; }
@media (max-width: 900px) { .hv-hero { grid-template-columns: 1fr; padding: 16px; } }
@media (max-width: 600px) { .hv-row { grid-template-columns: 1fr 64px; } .hv-row i { grid-column: 1 / -1; grid-row: 2; } .hv-row b { grid-row: 1; grid-column: 2; } .hv-cal { gap: 5px; } }
@media (max-width: 600px) { .hv-hero .cx-side .cx-card:nth-child(3) { display: none; } }

/* Tech companies visuals */
.tc-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-stack span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--purple); color: #fff; }
.tc-stack span.opt { background: var(--lav-2); color: var(--purple-text); }
.tc-stack span.opt::after { content: " · nice to have"; font-family: var(--font); font-weight: 500; }
.tc-ev { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tc-ev div { display: grid; grid-template-columns: 96px 1fr 20px; gap: 10px; align-items: center; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--lav-2); }
.tc-ev b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--purple-text); }
.tc-ev span { color: var(--body-2); }
.tc-ev i { font-style: normal; font-weight: 800; color: var(--purple); text-align: center; }
.tc-ev .soft { background: #fff; border: 1px dashed var(--line-2); }
.tc-ev .soft i { color: var(--muted); }
.tc-ans { margin: 0; font-size: 13px; color: var(--body-2); font-style: italic; }
.tc-hm { display: flex; gap: 8px; align-items: flex-start; }
.tc-hm .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 10.5px; font-weight: 700; flex: 0 0 auto; }
.tc-hm p { margin: 0; font-size: 13.5px; background: var(--lav-2); padding: 9px 12px; border-radius: 12px 12px 12px 4px; }
.tc-hm b { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--purple-text); }
.tc-pools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tc-pools div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tc-pools div.on { border-color: var(--purple); background: var(--lav-2); }
.tc-pools b { display: block; font-size: 13px; }
.tc-pools span { font-size: 12px; color: var(--muted); }
.tc-new { margin: 2px 0 0; font-size: 13.5px; color: var(--body); }
.tc-new b { color: var(--purple-text); }
@media (max-width: 600px) { .tc-pools { grid-template-columns: 1fr; } .tc-ev div { grid-template-columns: 1fr 16px; row-gap: 2px; } .tc-ev span { grid-column: 1; grid-row: 2; } .hv-hero .cx-side .cx-card:nth-child(3) { display: none; } }

/* AI Training visuals */
.c-train .ui-pill, .c-train .rp-label { color: #6E4A92; }
.tr-build { display: grid; grid-template-columns: 1fr 28px 1.2fr; gap: 10px; align-items: center; }
.tr-docs, .tr-scen { display: flex; flex-direction: column; gap: 7px; }
.tr-docs div { display: flex; align-items: center; gap: 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tr-docs i { font-style: normal; font-size: 10px; font-weight: 800; color: #6E4A92; background: var(--lav-2); border-radius: 4px; padding: 3px 5px; min-width: 30px; text-align: center; }
.tr-arrow { font-size: 20px; color: var(--purple-light); text-align: center; }
.tr-scen div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; background: var(--lav-2); border-radius: 8px; padding: 9px 11px; }
.tr-scen b { font-weight: 600; }
.tr-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-personas > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 38px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.tr-av { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--purple-light), var(--purple)); }
.tr-personas b { font-size: 14px; }
.tr-personas small { grid-column: 2; font-size: 12px; color: var(--muted); }
.tr-personas em { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; color: var(--body); }
.tr-tag { grid-column: 3; grid-row: 1; font-size: 11px; font-weight: 700; color: #6E4A92; background: var(--lav-2); padding: 3px 8px; border-radius: 999px; }
.tr-check { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tr-check p { margin: 4px 0 0; font-size: 13.5px; color: var(--body); }
.tr-check b { color: var(--ink); }
.tr-check small { display: block; font-size: 12px; color: var(--muted); }
.tr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-kpis div { background: var(--lav-2); border-radius: 10px; padding: 10px 12px; }
.tr-kpis small { display: block; font-size: 12px; color: var(--body-2); }
.tr-kpis b { font-size: 22px; color: var(--ink); margin-right: 6px; }
.tr-kpis em { font-style: normal; font-size: 12px; font-weight: 700; color: #6E4A92; }
.tr-table { display: flex; flex-direction: column; font-size: 13px; }
.tr-table div { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.2fr; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.tr-table .th { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tr-table div:last-child { border-bottom: 0; }
@media (max-width: 600px) {
  .tr-build { grid-template-columns: 1fr; } .tr-arrow { transform: rotate(90deg); }
  .tr-personas { grid-template-columns: 1fr; }
  .tr-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .tr-kpis div { padding: 8px; min-width: 0; } .tr-kpis small { font-size: 11px; } .tr-kpis b { font-size: 18px; display: block; }
  .tr-table div { grid-template-columns: 1.4fr .7fr 1.2fr; } .tr-table div span:nth-child(2) { display: none; }
}

/* Sample scenarios (landing) */
.lp-scen-sec { background: var(--lav-4); border-top: 1px solid var(--line); }
.scen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.scen { display: flex; flex-direction: column; gap: 10px; }
.scen h3 { font-size: 22px; margin-top: 8px; }
.scen > p { margin: 0 0 6px; color: var(--body); font-size: 16px; line-height: 1.55; flex: 1; }
.scen .btn { align-self: flex-start; }
.scen-vis { position: relative; border-radius: 14px; padding: 20px; min-height: 236px; display: flex; flex-direction: column; gap: 14px; justify-content: flex-start; background: linear-gradient(135deg, #fff, #F1E8F8); border: 1px solid var(--lav-line); overflow: hidden; }
.scen-vis::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(168,132,204,.28), transparent 70%); }
.scen-tag { position: absolute; top: 14px; left: 16px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ct); background: #fff; border: 1px solid var(--lav-line); padding: 3px 9px; border-radius: 999px; }
.scen-call { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; margin-top: 22px; box-shadow: 0 10px 24px -18px rgba(62, 38, 85, .5); }
.scen-orb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, var(--purple-light), var(--purple)); box-shadow: 0 0 0 5px var(--lav-2); }
.scen-call b { display: block; font-size: 14px; }
.scen-call small { font-size: 12px; color: var(--muted); }
.scen-call .vc-wave { margin-top: 0; height: 24px; }
.scen-quote { position: relative; margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ink); background: #fff; border-radius: 12px 12px 12px 4px; padding: 10px 14px; max-width: 92%; }
.scen-vis .lvl { position: absolute; top: 18px; right: 16px; }
.scen-note { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .scen-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.scen-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--lav-line); background: var(--lav-2); }

/* Support training visuals */
.ts-cmp { display: flex; flex-direction: column; font-size: 13.5px; }
.ts-cmp div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); align-items: center; }
.ts-cmp div:last-child { border-bottom: 0; }
.ts-cmp .th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ts-cmp .th span:last-child { color: #6E4A92; }
.ts-cmp span { color: var(--body-2); position: relative; padding-left: 20px; }
.ts-cmp div:not(.th) span::before { content: "×"; position: absolute; left: 0; color: var(--faint); font-weight: 800; }
.ts-cmp .th span { padding-left: 0; }
.ts-cmp b { font-weight: 600; color: var(--ink); background: var(--lav-2); border-radius: 8px; padding: 7px 10px; }
.ts-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-lib > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ts-lib .rp-label { margin-bottom: 2px; }
.ts-lib p { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; background: var(--lav-2); border-radius: 7px; padding: 7px 9px; }
@media (max-width: 600px) { .ts-lib { grid-template-columns: 1fr; } .ts-cmp div { grid-template-columns: 1fr; gap: 6px; } .ts-cmp .th { display: none; } }
.scen-grid.n2 { grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; }
@media (max-width: 900px) { .scen-grid.n2 { grid-template-columns: 1fr; } }

/* Onboarding visuals */
.to-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.to-path li { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 0 0 14px 30px; }
.to-path li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #DCD2E8; background: #fff; }
.to-path li::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: #EEE8F4; }
.to-path li:last-child { padding-bottom: 0; } .to-path li:last-child::after { display: none; }
.to-path li.done::before { background: var(--purple-light); border-color: var(--purple-light); }
.to-path li.now::before { border-color: var(--purple-light); box-shadow: 0 0 0 4px var(--lav-2); }
.to-path b { font-size: 14px; }
.to-path li:not(.done):not(.now) b { color: var(--muted); }
.to-path span { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.to-path em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 800; font-size: 13px; color: #6E4A92; background: var(--lav-2); padding: 4px 9px; border-radius: 999px; }
.c-train .aio-ring { background: conic-gradient(var(--purple-light) calc(var(--v) * 1%), #EEE8F4 0); }
.c-train .aio-ring b { font-size: 12.5px; color: #6E4A92; }
.to-coh { display: flex; flex-direction: column; gap: 8px; }
.to-coh > div { display: grid; grid-template-columns: 34px 120px 1fr 42px 130px; gap: 10px; align-items: center; font-size: 13.5px; }
.to-coh i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--purple-light) var(--w), #EEE8F4 var(--w)); }
.to-coh em { font-style: normal; font-weight: 700; color: #6E4A92; text-align: right; }
.to-st { font-size: 11.5px; font-weight: 700; text-align: center; padding: 4px 8px; border-radius: 999px; background: #F4F3F6; color: var(--body-2); white-space: nowrap; }
.to-st.ok { background: var(--purple-light); color: #fff; }
@media (max-width: 600px) { .to-coh > div { grid-template-columns: 34px 1fr 42px; } .to-coh i { grid-column: 2 / 4; grid-row: 2; } .to-st { display: none; } }
@media (max-width: 600px) { .lp-problem { flex-direction: column; align-items: flex-start; gap: 10px; } .lp-problem strong { font-size: 40px; } .problem p { min-width: 0; } }

/* Pre-sales visuals */
.tp-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-col { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tp-col.ai { background: var(--lav-2); border-color: var(--lav-line); }
.tp-col b { font-size: 14.5px; }
.tp-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--body); }
.tp-col li { position: relative; padding-left: 16px; line-height: 1.4; }
.tp-col li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-light); }
.tp-col .tr-av { grid-row: auto; }
.tr-av.me { background: #fff; color: var(--body-2); border: 1px solid var(--line); font-size: 11px; }
@media (max-width: 600px) { .tp-roles { grid-template-columns: 1fr; } }

/* Landing: try link, facts strip, ROI band */
.lp-try { margin: 16px 0 0; text-align: center; font-size: 15px; }
.lp-try a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ct); }
.lp-try-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--lav-2); }
.lp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-fact { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.lp-fact-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--lav-2); color: var(--ct); font-size: 18px; font-weight: 800; }
.lp-fact strong { font-size: 17px; }
.lp-fact p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.lp-roi-sec { padding-top: 0; }
.lp-roi { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 14px; padding: 28px 32px; background: linear-gradient(120deg, var(--lav-2), #EFE5F8); border: 1px solid var(--lav-line); }
.lp-roi p { margin: 6px 0 0; color: var(--body); font-size: 16px; }
@media (max-width: 1000px) { .lp-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-facts { grid-template-columns: 1fr; } .lp-roi { flex-direction: column; align-items: flex-start; padding: 22px; } }

/* Training admin + languages */
.ta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ta-f { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; }
.ta-f.wide { grid-column: 1 / -1; }
.ta-f small { font-size: 11.5px; color: var(--muted); }
.ta-f b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.tr-av.sm { width: 24px; height: 24px; font-size: 11px; grid-row: auto; }
.ta-seg { display: inline-flex !important; gap: 0 !important; background: var(--lav-2); border-radius: 7px; padding: 2px; align-self: flex-start; }
.ta-seg span { font-size: 12.5px; padding: 3px 10px; border-radius: 5px; color: var(--body-2); }
.ta-seg span.on { background: #fff; color: #6E4A92; box-shadow: 0 1px 2px rgba(23,23,36,.08); }
.ta-crit { display: flex; flex-direction: column; gap: 6px; }
.ta-crit div { display: flex; justify-content: space-between; font-size: 13.5px; background: var(--lav-2); border-radius: 7px; padding: 7px 10px; }
.ta-crit em { font-style: normal; font-weight: 700; color: #6E4A92; }
.c-train .ml-m.me { background: var(--purple-light); }
@media (max-width: 600px) { .ta-grid { grid-template-columns: 1fr; } }
.draft-flag { display: inline-block; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A5A00; background: #FFF4D6; border: 1px dashed #E0B44C; border-radius: 6px; padding: 4px 10px; }

/* Surveys visuals */
.c-surv .ui-pill, .c-surv .rp-label { color: var(--plum); }
.sv-tpl { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-tpl span { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--body-2); }
.sv-tpl span.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.sv-tpl span.add { border-style: dashed; color: var(--plum); }
.sv-flow { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--body); display: flex; flex-direction: column; gap: 3px; }
.ta-seg.sv span.on { color: var(--plum); }
.sv-k b { color: var(--plum); }
.sv-th { display: flex; flex-direction: column; gap: 8px; }
.sv-th div { display: grid; grid-template-columns: 170px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; }
.sv-th i { height: 8px; border-radius: 4px; }
.sv-th .pos i { background: linear-gradient(90deg, var(--plum) var(--w), #EEE8F4 var(--w)); }
.sv-th .neg i { background: linear-gradient(90deg, #C2577A var(--w), #F6E9EE var(--w)); }
.sv-th em { font-style: normal; font-weight: 700; text-align: right; color: var(--body-2); }
.sv-chart { width: 100%; height: auto; display: block; }
.sv-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--body-2); }
.sv-legend span::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: middle; }
.sv-alert { font-size: 13px; line-height: 1.5; color: var(--body); background: #FBF1F4; border: 1px solid #F0D4DE; border-left: 3px solid #C2577A; border-radius: 8px; padding: 10px 12px; }
.sv-alert b { display: block; color: #9B3C5D; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
@media (max-width: 600px) { .sv-th div { grid-template-columns: 1fr 28px; } .sv-th i { grid-column: 1 / -1; grid-row: 2; } }

/* Pricing: per-product features, grouped FAQ */
.pp-feats { margin-top: 56px; padding: 48px 32px 40px; border-radius: 16px; background: var(--lav-4); border: 1px solid var(--line); }
.pp-feats .section-head { margin-bottom: 28px; }
.pp-faq-h { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 36px 0 14px; color: var(--ct, var(--ink)); }
.pp-faq-h:first-of-type { margin-top: 0; }
.pp-faq-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--purple)); }
@media (max-width: 600px) { .pp-feats { padding: 32px 16px 24px; } }

/* About page */
.ab-mission { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.ab-mission .h2 { margin: 12px 0 14px; }
.ab-img { width: 100%; height: auto; border-radius: 16px; display: block; }
.ab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.ab-principles div { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 12px; padding: 16px; }
.ab-principles strong { font-size: 17px; }
.ab-principles p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.ab-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.ab-timeline li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; position: relative; }
.ab-timeline li::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px var(--lav-2); margin-bottom: 16px; }
.ab-when { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ct); }
.ab-timeline h3 { font-size: 18px; margin: 6px 0 8px; }
.ab-timeline p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.ab-quote { margin: 40px auto 0; max-width: 760px; text-align: center; font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ab-heritage { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; }
.ab-connect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ab-connect h3 { font-size: 19px; margin-bottom: 8px; }
.ab-connect p { margin: 0; color: var(--body); line-height: 1.55; }
.ab-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px !important; }
.ab-links a { font-weight: 600; color: var(--purple-text); }
@media (max-width: 1000px) { .ab-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .ab-mission { grid-template-columns: 1fr; gap: 28px; } .ab-principles { grid-template-columns: 1fr; } .ab-connect { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .ab-timeline { grid-template-columns: 1fr; } .ab-quote { font-size: 21px; } }
.ab-ent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-ent > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.ab-ent h3 { font-size: 18px; margin-bottom: 8px; }
.ab-ent p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
@media (max-width: 900px) { .ab-ent { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ab-ent { grid-template-columns: 1fr; } }

/* Integrations hub */
.in-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.in-bar p { margin: 0; color: var(--body-2); }
.in-bar strong { color: var(--purple-text); font-size: 20px; }
.in-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px; width: 340px; max-width: 100%; color: var(--muted); background: #fff; }
.in-search input { border: 0; outline: 0; font: inherit; font-size: 15px; width: 100%; color: var(--ink); background: transparent; }
.in-search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lav-2); }
.in-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.in-grid a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.in-grid a:hover { border-color: var(--lav-line); box-shadow: 0 12px 26px -20px rgba(62,38,85,.5); transform: translateY(-2px); }
.in-logo { height: 40px; display: flex; align-items: center; justify-content: center; width: 100%; }
.in-logo img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.in-name { font-size: 13px; font-weight: 600; color: var(--body-2); text-align: center; }
.in-empty { margin: 20px 0 0; text-align: center; color: var(--body-2); }
.in-list { margin-top: 12px; }
.in-list li { font-size: 14.5px; }
@media (max-width: 1100px) { .in-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .in-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .in-grid a { padding: 14px 6px 10px; gap: 8px; } .in-logo img { max-width: 80px; max-height: 32px; } .in-name { font-size: 11.5px; } .in-search { width: 100%; } }
.in-more .wide { grid-column: span 2; }
.in-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.in-chips span { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--lav-4); color: var(--ink); }
.in-api { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.in-api .h2 { margin: 12px 0 14px; }
.in-api-row { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 10px; align-items: center; }
.in-api-col, .in-api-core { display: flex; flex-direction: column; gap: 8px; }
.in-api-col span { font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; text-align: center; }
.in-api-core { border-radius: 12px; padding: 14px; background: var(--lav-2); border: 1px solid var(--lav-line); }
.in-api-core strong { font-size: 15px; color: var(--purple-text); text-align: center; margin-bottom: 2px; }
.in-api-core span { font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 7px; background: #fff; text-align: center; color: var(--body-2); }
.in-api-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.in-api-mid i { width: 2px; height: 40px; background: repeating-linear-gradient(var(--purple-light) 0 6px, transparent 6px 10px); }
.in-api-mid b { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--purple); padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 900px) { .in-api { grid-template-columns: 1fr; gap: 28px; } .in-more .wide { grid-column: auto; } }
@media (max-width: 600px) { .in-api-row { grid-template-columns: 1fr; } .in-api-mid { flex-direction: row; } .in-api-mid i { width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--purple-light) 0 6px, transparent 6px 10px); } }

/* Partners */
.pt-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-type { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; padding: 22px 20px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.pt-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--ct); background: var(--lav-2); }
.pt-type h3 { font-size: 19px; margin-top: 6px; }
.pt-for { margin: 0; font-size: 13px; font-weight: 600; color: var(--ct); }
.pt-type > p:not(.pt-for) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.pt-type .check-list li { font-size: 14px; }
.pt-join { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pt-join .h2 { margin: 12px 0 14px; }
.pt-join .check-list strong { color: var(--ink); }
@media (max-width: 1100px) { .pt-types { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .pt-join { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) { .pt-types { grid-template-columns: 1fr; } }

/* Contact */
.hero .wrap.ct-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; text-align: left; padding-top: 80px; padding-bottom: 88px; }
.ct-options { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.ct-opt { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ct-opt:hover { border-color: var(--lav-line); box-shadow: 0 12px 26px -22px rgba(62,38,85,.55); }
.ct-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); }
.ct-opt strong { display: block; font-size: 16px; color: var(--ink); }
.ct-opt small { display: block; font-size: 14px; color: var(--body-2); }
.ct-opt em { font-style: normal; color: var(--purple-text); font-weight: 700; }
.ct-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 20px; justify-content: center; }
.ct-office { border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: #fff; }
.ct-flag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--purple-text); }
.ct-office h3 { font-size: 22px; margin: 6px 0 10px; }
.ct-office address { font-style: normal; line-height: 1.6; color: var(--body); }
.ct-hours { margin: 12px 0; font-size: 14.5px; color: var(--body-2); }
.ct-office a { font-weight: 600; color: var(--purple-text); }
@media (max-width: 900px) { .ct-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; } .ct-offices { grid-template-columns: 1fr; } }
.hero .wrap.ct-hero .lead { margin: 0; } @media (max-width: 900px) { .hero .wrap.ct-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; } }

/* Legal pages with contents sidebar */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 56px; justify-content: center; padding-bottom: 96px; }
.legal-aside { position: relative; }
.legal-aside .toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; font-size: 14px; }
.legal-aside .toc a { padding: 6px 0 6px 12px; line-height: 1.35; }
.prose.legal h2 { scroll-margin-top: 96px; margin-top: 48px; font-size: 24px; }
.prose.legal h3 { font-size: 18px; margin-top: 28px; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 24px; } .legal-aside .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 12px; padding: 16px; } }
.legal-layout > * { min-width: 0; } .legal-aside .toc { box-sizing: border-box; width: 100%; }
.prose.legal { overflow-wrap: anywhere; } .prose.legal table { display: block; overflow-x: auto; max-width: 100%; }

/* Resource library */
.rs-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.rs-f { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--body-2); cursor: pointer; }
.rs-f.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.rs-group { margin-bottom: 44px; }
.rs-h { font-size: 22px; margin-bottom: 16px; }
.rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rs-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; background: #fff; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.rs-card:hover { box-shadow: 0 16px 32px -24px rgba(62,38,85,.55); transform: translateY(-2px); }
.rs-doc { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--lav-2); color: var(--ct); }
.rs-type { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ct); }
.rs-card strong { font-size: 18px; color: var(--ink); }
.rs-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--body); flex: 1; }
.rs-dl { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--purple-text); }
.rs-dl em { font-style: normal; }
@media (max-width: 1000px) { .rs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rs-grid { grid-template-columns: 1fr; } .rs-filters { justify-content: flex-start; } }

/* Integration detail */
.ig-crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); }
.ig-crumbs a { color: var(--purple-text); font-weight: 600; }
.ig-sync { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; align-items: center; padding: 36px; }
.ig-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; }
.ig-box.tal { background: var(--lav-2); border-color: var(--lav-line); }
.ig-logo { height: 52px; display: flex; align-items: center; justify-content: center; }
.ig-logo img { max-height: 48px; max-width: 150px; width: auto; height: auto; }
.ig-box strong { font-size: 17px; }
.ig-box small { font-size: 13px; color: var(--muted); }
.ig-flows { display: flex; flex-direction: column; gap: 18px; }
.ig-flow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--body-2); }
.ig-flow span { white-space: nowrap; }
.ig-flow i { flex: 1; height: 2px; background: var(--purple-light); position: relative; }
.ig-flow i.r::after, .ig-flow i.l::before { content: ""; position: absolute; top: -4px; border: 5px solid transparent; }
.ig-flow i.r::after { right: -2px; border-left-color: var(--purple-light); }
.ig-flow i.l::before { left: -2px; border-right-color: var(--purple-light); }
.ig-flow.back i { background: var(--purple); } .ig-flow.back i.l::before { border-right-color: var(--purple); }
.ig-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ig-about .h2 { margin: 12px 0 14px; }
.ig-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; }
.ig-facts div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.ig-facts dt { font-size: 12px; color: var(--muted); }
.ig-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.ig-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ig-steps li { counter-increment: s; position: relative; padding: 18px 18px 18px 62px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ig-steps li::before { content: counter(s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--lav-2); color: var(--purple-text); font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.ig-steps b { display: block; font-size: 16px; }
.ig-steps span { font-size: 14.5px; color: var(--body); }
.ig-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ig-seg .h2 { margin: 12px 0 14px; }
@media (max-width: 900px) { .ig-sync { grid-template-columns: 1fr; padding: 20px; } .ig-flow span { white-space: normal; } .ig-about, .ig-seg { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .ig-facts { grid-template-columns: 1fr 1fr; } }
.ig-logo img.ig-tal { width: 160px; max-width: 160px; height: auto; }

/* Blog index */
.bl-search { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 4px auto 0; padding: 6px 6px 6px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--muted); }
.bl-search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lav-2); }
.bl-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); background: transparent; }
.bl-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.bl-cats a { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--body-2); background: #fff; }
.bl-cats a span { font-weight: 500; color: var(--muted); margin-left: 4px; }
.bl-cats a.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.bl-cats a.on span { color: #E9DDF4; }
.bl-result { text-align: center; color: var(--body-2); margin: -16px 0 32px; }
.bl-feat { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; margin-bottom: 64px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; transition: box-shadow .15s; }
.bl-feat:hover { box-shadow: 0 20px 40px -30px rgba(62,38,85,.55); }
.bl-feat .thumb { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--lav-2); }
.bl-feat .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-feat h2 { font-size: 30px; line-height: 1.2; color: var(--ink); margin: 12px 0; }
.bl-feat p { margin: 0 0 14px; color: var(--body); font-size: 16px; line-height: 1.6; }
.bl-feat .date { font-size: 14px; color: var(--muted); }
.pager { flex-wrap: wrap; }
.pager .gap { border: 0; min-width: 20px; color: var(--muted); }
@media (max-width: 800px) { .bl-feat { grid-template-columns: 1fr; gap: 18px; padding: 14px; } .bl-feat h2 { font-size: 23px; } }
@media (max-width: 600px) { .bl-cats { justify-content: flex-start; } .pager a, .pager span { min-width: 40px; padding: 0 8px; } }
@media (max-width: 600px) { .bl-cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 32px; padding: 0 16px 6px; scrollbar-width: none; } .bl-cats::-webkit-scrollbar { display: none; } .bl-cats a { white-space: nowrap; flex: 0 0 auto; } }
/* Tables in articles: full width, scroll when wide */
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.prose .table-wrap table { display: table; width: 100%; border: 0; border-radius: 0; margin: 0; }
.prose .table-wrap th { white-space: normal; min-width: 90px; }
.form-card .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--body); cursor: pointer; }
.form-card .consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--purple); }
.form-card .consent a { color: var(--purple-text); font-weight: 600; }
.mega.xwide { max-width: min(1100px, 96vw); gap: 20px; }
.mega.xwide .mega-group { min-width: 0; }
.mega.xwide .mega-overview { flex-basis: 210px; }
.mega-title.stacked { margin-top: 14px; }
@media (max-width: 1240px) and (min-width: 961px) { .mega.xwide { left: -120px; } }
@media (max-width: 1100px) and (min-width: 961px) { .mega.xwide .mega-overview { display: none; } .mega.xwide { left: -60px; } }
/* AI reference checks */
.rc-refs { display: flex; flex-direction: column; gap: 8px; }
.rc-refs > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.rc-refs .av, .ui-comment .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.rc-refs p { margin: 0; font-size: 12.5px; color: var(--body-2); line-height: 1.4; }
.rc-refs b { display: block; font-size: 14px; color: var(--ink); }
.rc-refs em { font-style: normal; color: var(--purple-text); font-weight: 600; }
.rc-refs i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 3px 9px; border-radius: 6px; }
.rc-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rc-form label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.rc-form span { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-word; }
.rc-form.ghost { grid-template-columns: 1fr; border-style: dashed; border-color: var(--lav-line); }
.rc-form.ghost label { display: none; }
.rc-form.ghost span { color: var(--purple-text); }
.rc-log { display: flex; flex-direction: column; border-left: 2px solid var(--lav-line); margin-left: 6px; }
.rc-log div { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 10px; padding: 7px 0 7px 16px; font-size: 13px; }
.rc-log div::before { content: ""; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--purple-light); border: 2px solid #fff; }
.rc-log time { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 1px; }
.rc-log p { margin: 0; line-height: 1.45; color: var(--body); }
.rc-log b { color: var(--ink); }
@media (max-width: 560px) { .rc-form { grid-template-columns: 1fr; } .rc-log div { grid-template-columns: 1fr; gap: 2px; } }
.rc-refs i.neu, .rc-ref i.neu { color: var(--body-2); background: #F4F3F6; }
.rc-exp { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13.5px; margin-bottom: -6px; }
.rc-exp span { font-size: 12px; font-weight: 600; color: var(--purple-text); background: var(--lav-2); padding: 2px 8px; border-radius: 999px; }
.rc-ref { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.rc-ref-top { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.rc-ref-top .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11.5px; font-weight: 700; }
.rc-ref-top p { margin: 0; font-size: 12.5px; color: var(--body-2); line-height: 1.4; }
.rc-ref-top b { display: block; font-size: 14px; color: var(--ink); }
.rc-ref i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); padding: 3px 9px; border-radius: 6px; }
.rc-reply { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body-2); }
.rc-reply b { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* AI recruitment analytics */
.ra-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--body-2); margin-bottom: 8px; }
.ra-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; min-width: 0; }
.ra-grid { display: grid; grid-template-columns: 1.05fr .9fr 1.25fr; gap: 10px; }
.ra-col { display: flex; flex-direction: column; gap: 10px; }
.ra-kpi { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ra-kpi .ra-lbl { margin-bottom: 2px; font-weight: 600; }
.ra-kpi b { font-size: 17px; color: var(--purple-text); }
.ra-score { display: flex; flex-direction: column; gap: 8px; }
.ra-ring { --p: 70; width: 92px; height: 92px; margin: 2px auto 6px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, #fff 76%, transparent 77%), conic-gradient(var(--purple) calc(var(--p) * 1%), #EEE8F4 0); }
.ra-ring b { font-size: 22px; line-height: 1; color: var(--ink); }
.ra-ring small { font-size: 11px; color: var(--muted); }
.ra-vbars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; height: 170px; align-items: end; }
.ra-vbars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ra-vbars i { width: 70%; height: calc(var(--h) * .72); border-radius: 6px 6px 2px 2px; background: #E4D8F0; }
.ra-vbars .m i { background: #C9B3E0; } .ra-vbars .g i { background: var(--purple); } .ra-vbars .p i { background: #4E2A72; }
.ra-vbars span { font-size: 11px; color: var(--body-2); text-align: center; line-height: 1.2; }
.ra-vbars em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); order: -1; }
.ra-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.ra-hbars { display: flex; flex-direction: column; gap: 7px; }
.ra-hbars div { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.ra-hbars span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-hbars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--purple) var(--w), #EEE8F4 var(--w)); }
.ra-hbars em { font-style: normal; font-weight: 700; color: var(--purple-text); text-align: right; font-size: 12px; }
.ra-donut { display: flex; align-items: center; gap: 12px; }
.ra-donut svg { width: 96px; height: 96px; flex: 0 0 auto; transform: rotate(-90deg); }
.ra-donut ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--body-2); }
.ra-donut li { display: flex; align-items: center; gap: 6px; }
.ra-donut li i { width: 9px; height: 9px; border-radius: 3px; }
.ra-chips { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 8px; }
.ra-chips .ra-lbl { margin: 0; }
.ra-line { display: block; width: 100%; height: 80px; }
.ra-days { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.ra-src > div { grid-template-columns: 1.6fr repeat(4, 1fr) !important; }
.ra-ga { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border: 1px dashed var(--lav-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--body); }
.ra-ga .ra-lbl { margin: 0; color: var(--purple-text); }
@media (max-width: 760px) { .ra-grid { grid-template-columns: 1fr 1fr; } .ra-grid > .ra-card:last-child { grid-column: 1 / -1; } .ra-vbars { height: 130px; } .ra-split { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ra-grid { grid-template-columns: 1fr; } .ra-col { flex-direction: row; flex-wrap: wrap; } .ra-kpi { flex: 1 1 40%; } .ra-chips { grid-template-columns: 1fr; } .ra-src > div { grid-template-columns: 1.4fr repeat(4, 1fr) !important; font-size: 11.5px; } }
.ra-jobs > div { grid-template-columns: 1.7fr .8fr .8fr 1.3fr !important; align-items: center; }
.ra-jobs b { color: var(--purple-text); }
.ra-jobs i { display: inline-block; vertical-align: middle; width: 56px; height: 7px; margin-right: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--purple) var(--w), #EEE8F4 var(--w)); }
.ra-jobs .warn b { color: #9C3A5D; }
@media (max-width: 480px) { .ra-jobs > div { font-size: 11.5px; grid-template-columns: 1.4fr .7fr .7fr 1.1fr !important; } .ra-jobs i { width: 28px; margin-right: 4px; } }
/* Talent pools and AI search */
.pl-hero { display: grid; grid-template-columns: 200px 1fr; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.pl-side { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; border-right: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--body-2); }
.pl-side span { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: var(--radius); }
.pl-side .on { background: var(--lav-2); color: var(--purple-text); }
.pl-side em { font-style: normal; font-size: 11px; color: var(--purple-text); background: var(--lav-2); border-radius: 5px; padding: 1px 6px; }
.pl-side small { margin: 12px 10px 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pl-main { background: transparent; }
.pl-main .ui-r { background: #fff; }
.pl-sug { display: flex; flex-direction: column; gap: 8px; }
.pl-sug > div { display: grid; grid-template-columns: 34px 1fr 36px 110px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pl-sug .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11.5px; font-weight: 700; }
.pl-sug p { margin: 0; font-size: 12px; color: var(--body-2); line-height: 1.4; min-width: 0; }
.pl-sug p b { display: block; font-size: 14px; color: var(--ink); }
.pl-bars { display: flex; flex-direction: column; gap: 4px; }
.pl-bars i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--purple) var(--w), #EEE8F4 var(--w)); }
.pl-bars i:nth-child(2) { background: linear-gradient(90deg, #9A72C4 var(--w), #EEE8F4 var(--w)); }
.pl-bars i:nth-child(3) { background: linear-gradient(90deg, #C9B3E0 var(--w), #EEE8F4 var(--w)); }
.pl-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 11.5px; color: var(--body-2); }
.pl-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--purple); vertical-align: -1px; }
.pl-legend span:nth-child(2)::before { background: #9A72C4; } .pl-legend span:nth-child(3)::before { background: #C9B3E0; }
.pl-mail, .pl-campaign { border: 1px dashed var(--lav-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pl-mail p, .pl-campaign p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); }
.pl-campaign b { display: block; color: var(--ink); }
.pl-pools { grid-template-columns: 1fr 1fr !important; }
.pl-crit { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-crit span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--body-2); }
.pl-crit .on { background: var(--lav-2); border-color: var(--lav-2); color: var(--purple-text); }
.pl-ex { display: flex; flex-direction: column; gap: 4px; background: #FCFAFD; border-radius: 10px; padding: 12px 14px; }
.pl-ex p { margin: 0; font-size: 13px; color: var(--purple-text); }
@media (max-width: 760px) { .pl-hero { grid-template-columns: 1fr; } .pl-side { display: none; } .pl-sug > div { grid-template-columns: 34px 1fr 36px; } .pl-bars { grid-column: 2 / -1; } }
/* AI recruitment chatbot */
.cb-hero { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 24px; align-items: end; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.cb-site { position: relative; align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 300px; }
.cb-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #FAF8FC; }
.cb-bar i { width: 8px; height: 8px; border-radius: 50%; background: #E4DCEC; }
.cb-bar span { margin-left: 10px; font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; }
.cb-page { padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.cb-page small { font-size: 12px; font-weight: 700; color: var(--purple-text); }
.cb-page strong { font-size: 22px; line-height: 1.2; }
.cb-jobs { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; max-width: 320px; }
.cb-jobs span { font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.cb-bubble { position: absolute; right: 16px; bottom: 16px; font-size: 13.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; padding: 10px 14px; box-shadow: 0 12px 28px -18px rgba(62, 38, 85, .45); }
.cb-widget { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 0 14px; gap: 12px; box-shadow: 0 24px 50px -28px rgba(62, 38, 85, .5); overflow: hidden; }
.cb-widget .ml-chat { padding: 0 14px; }
.cb-widget .ml-m { font-size: 13px; }
.cb-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--purple); color: #fff; }
.cb-head .av { background: #fff; color: var(--purple-text); }
.cb-head b { display: block; font-size: 14px; } .cb-head small { font-size: 11.5px; opacity: .85; }
.cb-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.cb-quick span { font-size: 12px; font-weight: 600; color: var(--purple-text); border: 1.5px solid var(--purple-light); border-radius: 999px; padding: 4px 10px; }
.cb-quick .on { background: var(--purple); border-color: var(--purple); color: #fff; }
.cb-input { margin: 0 14px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.cb-recs { padding-left: 36px; }
.cb-slots { padding-left: 36px; }
@media (max-width: 860px) { .cb-hero { grid-template-columns: 1fr; } .cb-site { display: none; } }
.cb-head small { display: block; color: #fff; }
/* AI content generator */
.cg-hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
.cg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-tabs span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--body-2); }
.cg-tabs .on { background: var(--lav-2); border-color: var(--lav-2); color: var(--purple-text); }
.cg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-form .full { grid-column: 1 / -1; }
.cg-form label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.cg-form span { display: block; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 36px; }
.cg-form .full span { min-height: 56px; }
.cg-form .sel::after { content: "⌄"; float: right; color: var(--muted); }
.cg-actions { display: flex; gap: 8px; }
.cg-actions .ui-btn { grid-column: auto; display: inline-flex; align-items: center; gap: 6px; }
.cg-out { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; box-shadow: 0 18px 40px -28px rgba(62, 38, 85, .5); }
.cg-out strong { font-size: 17px; } .cg-out small { color: var(--muted); font-size: 12px; }
.cg-out p { margin: 4px 0; line-height: 1.5; color: var(--body); }
.cg-out b { font-size: 12.5px; margin-top: 4px; }
.cg-out ul, .cg-sec ul { margin: 0; padding-left: 18px; color: var(--body); line-height: 1.6; }
.cg-jhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cg-jhead small { display: block; font-size: 11.5px; color: var(--muted); }
.cg-jhead strong { display: block; font-size: 19px; }
.cg-jhead span:not(.ui-btn) { font-size: 12.5px; color: var(--body-2); }
.cg-jhead .ui-btn { grid-column: auto; padding: 8px 16px; font-size: 13px; }
.cg-intro { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--body); }
.cg-sec { font-size: 13px; } .cg-sec b { display: block; margin-bottom: 2px; }
.cg-seo { font-size: 12.5px; border: 1px dashed var(--lav-line); border-radius: 8px; padding: 8px 12px; color: var(--body); }
.cg-seo span { display: block; font-size: 11px; font-weight: 700; color: var(--purple-text); text-transform: uppercase; letter-spacing: .04em; }
.cg-mail { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cg-mail p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--body); }
.cg-mail .sub { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cg-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cg-values div { background: var(--lav-2); border-radius: 10px; padding: 10px 12px; }
.cg-values b { display: block; font-size: 13px; color: var(--purple-text); }
.cg-values span { font-size: 12px; color: var(--body-2); line-height: 1.4; }
.cg-qs { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.cg-qs span { display: inline-block; font-size: 11px; font-weight: 700; color: var(--purple-text); background: var(--lav-2); border-radius: 5px; padding: 1px 7px; margin-right: 6px; }
@media (max-width: 760px) { .cg-hero { grid-template-columns: 1fr; } .cg-values { grid-template-columns: 1fr; } .cg-form { grid-template-columns: 1fr; } }
/* Sample site gallery */
.scen-grid.gallery .scen-img { aspect-ratio: 4 / 3; object-position: top; }
.scen-grid.gallery .scen h3 { font-size: 19px; margin-top: 4px; }
.scen-grid.gallery .scen > p { font-size: 15px; }
.scen-grid.gallery .btn { padding: 9px 16px; font-size: 14px; }
/* Career site builder */
.cs-hero { display: grid; grid-template-columns: 230px 1fr; gap: 20px; padding: 22px; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.cs-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.cs-panel > small { font-size: 11.5px; color: var(--muted); font-weight: 600; } .cs-panel > b { font-size: 13.5px; margin-top: -8px; }
.cs-tree { display: flex; flex-direction: column; gap: 3px; }
.cs-tree span { padding: 7px 9px; border-radius: 8px; color: var(--body-2); font-weight: 600; }
.cs-tree .on { background: var(--lav-2); color: var(--purple-text); }
.cs-brand { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; font-weight: 600; color: var(--body-2); }
.cs-brand span { margin-right: auto; } .cs-brand i { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); }
.cs-ai { grid-column: auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; }
.cs-preview { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -32px rgba(62, 38, 85, .5); }
.cs-site { display: flex; flex-direction: column; }
.cs-nav { display: flex; align-items: center; gap: 16px; padding: 12px 18px; font-size: 12px; color: var(--body-2); }
.cs-nav b { color: #5B3B8C; letter-spacing: .06em; margin-right: auto; }
.cs-nav em { font-style: normal; font-weight: 700; color: #fff; background: #5B3B8C; border-radius: 6px; padding: 5px 10px; }
.cs-hero-band { margin: 0 18px; border-radius: 12px; padding: 26px 22px; background: linear-gradient(120deg, #5B3B8C, #8A5FB8); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.cs-hero-band small { font-size: 12px; opacity: .85; font-weight: 600; } .cs-hero-band strong { font-size: 24px; line-height: 1.2; }
.cs-search { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 6px; background: #fff; border-radius: 8px; padding: 5px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.cs-search span { padding: 6px 8px; } .cs-search span + span { border-left: 1px solid var(--line); }
.cs-search em { font-style: normal; font-weight: 700; color: #3A2350; background: #E8A23A; border-radius: 6px; padding: 6px 12px; }
.cs-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 18px 0; }
.cs-blocks div { background: #F4F0F8; border-radius: 10px; padding: 10px 12px; }
.cs-blocks b { display: block; font-size: 18px; color: #5B3B8C; } .cs-blocks span { font-size: 11.5px; color: var(--body-2); }
.cs-quote { display: flex; gap: 10px; align-items: center; margin: 12px 18px 18px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cs-quote .av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #F4F0F8; color: #5B3B8C; font-size: 11.5px; font-weight: 700; }
.cs-quote p { margin: 0; font-size: 13px; line-height: 1.45; } .cs-quote b { display: block; font-size: 11.5px; color: var(--muted); }
.cs-edit { display: flex; flex-direction: column; gap: 7px; }
.cs-blk { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.cs-blk > span { color: var(--muted); font-size: 13px; }
.cs-blk.on { border-color: var(--purple); box-shadow: 0 0 0 3px var(--lav-2); }
.cs-blk b { display: block; font-size: 13.5px; } .cs-blk small { font-size: 12px; color: var(--muted); }
.cs-add { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--purple-text); border: 1px dashed var(--lav-line); border-radius: 10px; padding: 8px; }
.cs-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-filters span { font-size: 12px; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--body-2); }
.cs-filters .q { flex: 1 1 160px; border-color: var(--purple-light); color: var(--ink); }
.cs-alert { display: flex; gap: 10px; align-items: center; background: var(--lav-2); border-radius: 10px; padding: 10px 12px; }
.cs-alert p { margin: 0; flex: 1; font-size: 12.5px; line-height: 1.45; } .cs-alert b { display: block; font-size: 13px; }
.cs-alert em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--purple); border-radius: 6px; padding: 6px 10px; }
.cs-fsec { display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.cs-fsec span { font-size: 11.5px; font-weight: 600; color: var(--body-2); background: #F4F3F6; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.cs-fsec.custom { border-color: var(--lav-line); background: #FCFAFD; } .cs-fsec.custom span { background: var(--lav-2); color: var(--purple-text); }
.cs-sites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-sites div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cs-sites .main { grid-column: 1 / -1; background: var(--lav-2); border-color: var(--lav-2); }
.cs-sites b { display: block; font-size: 13.5px; color: var(--ink); } .cs-sites span { font-size: 12px; color: var(--body-2); }
@media (max-width: 860px) { .cs-hero { grid-template-columns: 1fr; } .cs-panel { display: none; } }
@media (max-width: 520px) { .cs-nav span { display: none; } .cs-search { grid-template-columns: 1fr auto; } .cs-search span + span { display: none; } .cs-sites { grid-template-columns: 1fr; } }
/* Recruitment CRM */
.crm-avs { display: flex; } .crm-avs .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 10.5px; font-weight: 700; border: 2px solid #fff; margin-left: -6px; }
.crm-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crm-col { background: #FAF8FC; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.crm-col > b { display: flex; justify-content: space-between; font-size: 12px; color: var(--body-2); margin-bottom: 2px; }
.crm-col em { font-style: normal; color: var(--purple-text); }
.crm-card { display: grid; grid-template-columns: 1fr auto; gap: 0 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.crm-card span { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card small { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.crm-card i { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--purple-text); }
.crm-card.hot { border-color: var(--purple-light); box-shadow: 0 0 0 3px var(--lav-2); }
.crm-card.ok { background: var(--lav-2); border-color: var(--lav-2); }
.crm-ph { grid-template-columns: 34px 1fr auto !important; }
.crm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-fields div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.crm-fields label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.crm-fields span { font-size: 13px; font-weight: 600; }
.crm-stages { display: flex; flex-direction: column; gap: 0; counter-reset: st; }
.crm-stages div { counter-increment: st; display: grid; grid-template-columns: 26px 150px 1fr; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.crm-stages div:last-child { border-bottom: 0; }
.crm-stages div::before { content: counter(st); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11.5px; font-weight: 700; }
.crm-stages span { font-size: 12.5px; color: var(--body-2); }
.crm-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-boards div { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.crm-boards i { width: 30px; height: 17px; border-radius: 999px; background: #E6E1EC; position: relative; }
.crm-boards i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.crm-boards .on i { background: var(--purple); } .crm-boards .on i::after { left: 15px; }
.crm-share { display: flex; flex-direction: column; gap: 6px; }
.crm-panel { display: flex; align-items: center; gap: 4px; }
.crm-panel .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 10.5px; font-weight: 700; border: 2px solid #fff; margin-right: -8px; }
.crm-panel p { margin: 0 0 0 16px; font-size: 12.5px; color: var(--body-2); line-height: 1.4; }
.crm-score { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
@media (max-width: 760px) { .crm-board { grid-template-columns: 1fr 1fr; } .crm-stages div { grid-template-columns: 26px 1fr; } .crm-stages span { grid-column: 2; } }
@media (max-width: 480px) { .crm-fields, .crm-boards { grid-template-columns: 1fr; } }
/* Role journeys */
.rj-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rj-kpis div { background: var(--lav-2); border-radius: 10px; padding: 10px; }
.rj-kpis b { display: block; font-size: 22px; color: var(--purple-text); line-height: 1.1; }
.rj-kpis span { font-size: 11.5px; color: var(--body-2); line-height: 1.3; display: block; margin-top: 2px; }
.rj-todo { display: flex; flex-direction: column; gap: 6px; }
.rj-todo > div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.rj-todo i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--purple-light); margin-top: 2px; }
.rj-todo .done i { background: var(--purple); border-color: var(--purple); }
.rj-todo .done b { text-decoration: line-through; color: var(--muted); }
.rj-todo p { margin: 0; font-size: 12.5px; color: var(--body-2); line-height: 1.4; } .rj-todo b { display: block; font-size: 13.5px; color: var(--ink); }
.hm-cands { display: flex; flex-direction: column; gap: 8px; }
.hm-cands > div { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.hm-cands .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--purple-text); font-size: 11.5px; font-weight: 700; }
.hm-cands p { margin: 0; font-size: 12.5px; color: var(--body-2); line-height: 1.4; } .hm-cands b { display: block; font-size: 14px; color: var(--ink); }
.hm-cands .ui-btn { grid-column: auto; }
@media (max-width: 600px) { .rj-kpis { grid-template-columns: 1fr 1fr; } }
.cx-card .ui-r.tm-opp strong, .cx-card .ui-r.tm-opp small { display: block; } .cx-card .ui-r.tm-opp { padding: 8px 10px; }
/* Candidate NPS */
.nps-top { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; }
.nps-score { background: var(--lav-2); border-radius: 12px; padding: 12px; text-align: center; }
.nps-score b { display: block; font-size: 30px; line-height: 1.1; color: var(--purple-text); }
.nps-score span { font-size: 11.5px; color: var(--body-2); font-weight: 600; }
.nps-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.nps-bar i { width: var(--w); }
.nps-bar .pro, .nps-leg .pro { background: var(--purple); } .nps-bar .pas, .nps-leg .pas { background: #C9B3E0; } .nps-bar .det, .nps-leg .det { background: #D9849F; }
.nps-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--body-2); }
.nps-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.nps-stages > div { grid-template-columns: 1.6fr .6fr .8fr !important; }
.nps-stages b { color: var(--purple-text); }
@media (max-width: 600px) { .tr-table.nps-stages div span:nth-child(2), .tr-table.ra-src div span:nth-child(2), .tr-table.ra-jobs div span:nth-child(2) { display: block; } }
@media (max-width: 600px) { .ra-src .th { font-size: 9.5px; letter-spacing: 0; } .ra-src .th span { hyphens: manual; } .ra-src > div { gap: 4px !important; } }
/* Paid ad landing pages */
.ad-header .wrap { display: flex; justify-content: space-between; align-items: center; }
.ad-header .ad-cta { padding: 10px 18px; font-size: 15px; }
.ad-hero { text-align: left; }
.ad-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.ad-copy { display: flex; flex-direction: column; gap: 20px; }
.ad-copy h1 { font-size: clamp(36px, 4.4vw, 54px); text-align: left; }
.ad-copy .lead { margin: 0; text-align: left; }
.ad-proof { margin: 0; font-size: 14px; font-weight: 600; color: var(--body-2); }
#get-started { scroll-margin-top: 90px; }
@media (max-width: 960px) { .ad-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; } }
.hero .wrap.ad-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; text-align: left; padding-top: 64px; padding-bottom: 72px; }
.ad-hero .form-card { text-align: left; }
.ad-hero .check-list li { text-align: left; }
@media (max-width: 960px) { .hero .wrap.ad-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; } }
.ad-head-links { display: flex; align-items: center; gap: 20px; }
.ad-more { font-size: 15px; font-weight: 600; color: var(--body); }
.ad-more:hover { color: var(--purple-text); }
@media (max-width: 600px) { .ad-more { display: none; } }
/* Lead magnet pages */
.dl-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 32px; align-items: center; background: linear-gradient(135deg, #FCFAFD, #F5EEFA); }
.dl-book { perspective: 900px; }
.dl-cover { position: relative; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; color: #fff; background: linear-gradient(150deg, #4E2A72 0%, #7B4FA6 60%, #A884CC 100%); box-shadow: -6px 0 0 #3A1F57 inset, 0 30px 50px -24px rgba(62, 38, 85, .65); transform: rotateY(-8deg); }
.dl-type { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px 10px; }
.dl-cover strong { font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin-top: 18px; }
.dl-cover small { font-size: 13.5px; line-height: 1.45; opacity: .85; }
.dl-lines { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.dl-lines b { height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
.dl-lines b:nth-child(2) { width: 80%; } .dl-lines b:nth-child(3) { width: 60%; }
.dl-brand { font-size: 12px; font-weight: 800; letter-spacing: .14em; opacity: .9; margin-top: 10px; }
.dl-toc ol { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.dl-toc li { counter-increment: toc; display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.dl-toc li::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--purple-text); padding-top: 2px; }
@media (max-width: 860px) { .dl-wrap { grid-template-columns: 1fr; padding: 20px; } .dl-book { max-width: 240px; margin: 0 auto; } .dl-toc ol { grid-template-columns: 1fr; } }
/* Mobile fixes from site check */
.prose a { overflow-wrap: anywhere; }
@media (max-width: 480px) { .ui-head { flex-wrap: wrap; } .ui-head .ui-pill { white-space: normal; } }