/* Stage 2H.1 — self-hosted, Kinetic-controlled Plus Jakarta Sans (was a Google Fonts @import).
   Files/licence: ./fonts/ (SOURCE.md, OFL.txt). Same 5 weights the web UI actually uses. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/PlusJakartaSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/PlusJakartaSans-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/PlusJakartaSans-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
}

:root {
  --surface-primary: #f5f7fa;
  --surface-card: #ffffff;
  --surface-dark: #0a1628;
  --surface-dark-2: #111f34;
  --text-primary: #142033;
  --text-muted: #647083;
  --text-on-dark: #f7f8fb;
  --accent-primary: #f97316;
  --accent-secondary: #06b6d4;
  --border-subtle: #dce2ea;
  --border-strong: #aeb8c5;
  --shadow: 0 16px 40px rgba(10, 22, 40, 0.08);
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 52px;
  --radius-card: 16px;
  --radius-small: 9px;
  font-family: 'Plus Jakarta Sans', 'Aptos', Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background: var(--surface-primary);
}
* { box-sizing: border-box; }
html { background: var(--surface-primary); }
body { margin: 0; background: var(--surface-primary); min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.topbar { height: 72px; padding: 0 max(28px, calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--surface-dark); color:var(--text-on-dark); position:sticky; top:0; z-index:20; }
.topbar nav { display:flex; align-items:center; gap:14px; }
.brand { border:0; background:transparent; padding:0; display:flex; align-items:center; cursor:pointer; }
.brand-logo { display:block; height:26px; width:auto; }
.link-button { background:transparent; color:#d9e1ed; border:0; font-weight:700; }
.user-chip { font-size:12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 11px; color:#c9d2df; }
.page { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:64px 0 80px; min-height:calc(100vh - 130px); }
.page-narrow { width:min(760px, calc(100% - 40px)); }
.footer { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:24px 0 36px; border-top:1px solid var(--border-subtle); color:var(--text-muted); font-size:12px; display:flex; justify-content:space-between; gap:20px; }
h1 { font-size:clamp(38px, 5vw, 66px); line-height:1.02; letter-spacing:-.045em; margin:10px 0 18px; }
h1 span { color:var(--accent-primary); }
h2 { letter-spacing:-.02em; }
p { line-height:1.58; }
.lead { font-size:18px; line-height:1.58; color:var(--text-muted); max-width:780px; }
.eyebrow, .mini-label { font-size:11px; font-weight:800; letter-spacing:.2em; color:var(--accent-primary); text-transform:uppercase; }
.hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:70px; align-items:center; min-height:650px; }
.hero-copy .lead { max-width:700px; }
.hero-panel { background:var(--surface-dark); color:white; padding:38px; border-radius:22px; box-shadow:var(--shadow); }
.hero-panel blockquote { margin:24px 0 34px; font-size:27px; line-height:1.25; letter-spacing:-.025em; }
.three-step { display:grid; gap:12px; }
.three-step div { border-top:1px solid rgba(255,255,255,.13); padding-top:13px; display:flex; gap:12px; align-items:center; }
.three-step b { color:var(--accent-primary); }
.three-step span { color:#cbd4df; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.button { min-height:46px; padding:0 18px; border-radius:10px; font-weight:800; border:1px solid transparent; }
.button:focus-visible { outline:2px solid #F97316; outline-offset:2px; }
.button-primary { color:white; background:var(--surface-dark); border-color:var(--surface-dark); }
.button-primary:hover { background:#162641; }
.button-secondary { background:white; color:var(--text-primary); border-color:var(--border-subtle); }
.button-secondary:hover { border-color:var(--border-strong); }
.hero .button-primary { background:var(--accent-primary); border-color:var(--accent-primary); color:#101826; }
.microcopy { color:var(--text-muted); font-size:13px; margin-top:14px; }
.top-gap { margin-top:32px; }
.progress { display:flex; gap:10px; margin-bottom:38px; overflow:auto; padding-bottom:5px; }
.progress span { white-space:nowrap; font-size:11px; font-weight:800; color:#8490a1; padding:7px 10px; border-radius:999px; border:1px solid var(--border-subtle); }
.progress span.active { color:white; background:var(--surface-dark); border-color:var(--surface-dark); }
.form-stack { display:grid; gap:28px; }
.compact-form { max-width:720px; }
.field { display:grid; gap:8px; }
.field > span, fieldset legend { font-size:14px; font-weight:800; }
.field input, .field textarea, .select { width:100%; background:white; border:1px solid var(--border-subtle); border-radius:10px; padding:14px; color:var(--text-primary); outline:none; }
.field input:focus, .field textarea:focus, .select:focus { border-color:var(--accent-secondary); box-shadow:0 0 0 3px rgba(6,182,212,.10); }
.field-help { color:var(--text-muted); margin:0; font-size:14px; }
fieldset { border:0; padding:0; margin:0; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.choice-card { display:grid; gap:5px; border:1px solid var(--border-subtle); border-radius:var(--radius-card); background:white; padding:18px; cursor:pointer; position:relative; }
.choice-card input { position:absolute; opacity:0; }
.choice-card strong { font-size:16px; }
.choice-card span { color:var(--text-muted); font-size:13px; line-height:1.4; }
.choice-card:has(input:checked) { border-color:var(--surface-dark); box-shadow:0 0 0 2px var(--surface-dark) inset; }
.dimension-stack { display:grid; gap:18px; }
.dimension-card { background:white; border:1px solid var(--border-subtle); border-radius:var(--radius-card); padding:24px; box-shadow:0 3px 12px rgba(10,22,40,.03); }
.dimension-heading { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; margin-bottom:18px; }
.dimension-heading > span { color:var(--accent-primary); font-size:12px; font-weight:900; letter-spacing:.13em; padding-top:6px; }
.dimension-heading h2 { margin:0 0 5px; font-size:22px; }
.dimension-heading p { margin:0; color:var(--text-muted); font-size:14px; }
.clock-note { margin-top:7px !important; color:#31445e !important; font-weight:700; }
.state-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.state-choice { display:grid; gap:5px; min-height:104px; padding:14px; border:1px solid var(--border-subtle); border-radius:12px; background:#fbfcfe; cursor:pointer; position:relative; }
.state-choice input { position:absolute; opacity:0; }
.state-choice strong { font-size:14px; }
.state-choice span { color:var(--text-muted); font-size:12px; line-height:1.35; }
.state-choice:has(input:checked) { border-color:var(--accent-secondary); box-shadow:0 0 0 2px rgba(6,182,212,.18) inset; background:#f5fdff; }
.here-reference { margin-top:12px; display:flex; align-items:center; gap:9px; font-size:12px; }
.here-reference span { font-weight:900; color:var(--accent-primary); letter-spacing:.12em; }
.sticky-actions { position:sticky; bottom:16px; z-index:10; display:flex; justify-content:flex-end; gap:12px; background:rgba(245,247,250,.94); border:1px solid var(--border-subtle); backdrop-filter:blur(12px); padding:12px; border-radius:14px; margin-top:24px; }
.privacy-note { display:flex; gap:10px; align-items:flex-start; background:#eef8fb; border:1px solid #cfeaf0; border-radius:12px; padding:16px; }
.privacy-note span { color:#526173; }
.achievement-callout { display:grid; gap:7px; background:var(--surface-dark); color:white; padding:20px 22px; border-radius:14px; margin:20px 0 28px; }
.achievement-callout span { font-size:10px; font-weight:900; letter-spacing:.16em; color:var(--accent-primary); }
.achievement-callout strong { font-size:18px; line-height:1.4; }
.achievement-callout.small { margin:12px 0 16px; padding:14px 16px; }
.summary-list { display:grid; gap:10px; max-width:900px; }
.summary-item { background:white; border:1px solid var(--border-subtle); border-radius:12px; padding:17px; display:grid; gap:5px; }
.summary-item span { font-size:11px; font-weight:900; color:var(--accent-primary); text-transform:uppercase; letter-spacing:.1em; }
.decision-panel { margin-top:28px; background:white; border:1px solid var(--border-subtle); border-radius:18px; padding:28px; box-shadow:var(--shadow); }
.large-decision { margin-top:80px; text-align:center; }
.large-decision h1 { font-size:42px; }
.stacked-buttons { display:grid; gap:10px; max-width:460px; margin:24px auto 0; }
.questions-header { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:30px; }
.role-chip { border:1px solid var(--border-subtle); background:white; padding:10px 14px; border-radius:999px; white-space:nowrap; font-weight:800; font-size:12px; }
.question-card { background:white; border:1px solid var(--border-subtle); border-radius:18px; padding:28px; margin-bottom:16px; box-shadow:0 8px 24px rgba(10,22,40,.04); }
.question-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.question-meta span { font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:900; color:#738094; }
.question-meta .dim-name { font-size:13px; letter-spacing:.04em; color:var(--accent-primary); }
.transfer-context { display:flex; gap:12px; align-items:center; margin:18px 0 8px; padding:10px 12px; background:#f2f5f8; border-radius:8px; }
.transfer-context span, .ask-label, .evidence-grid span, .press span { font-size:10px; font-weight:900; letter-spacing:.14em; color:var(--accent-primary); }
.transfer-context strong { font-size:13px; }
.ask-label { margin-top:20px; }
.ask { font-size:30px; line-height:1.18; margin:6px 0 22px; max-width:850px; }
.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.evidence-grid > div { background:#f8fafc; border:1px solid var(--border-subtle); border-radius:10px; padding:14px; }
.evidence-grid p { margin:7px 0 0; font-size:14px; }
.press { margin-top:15px; display:flex; gap:12px; align-items:baseline; border-top:1px solid var(--border-subtle); padding-top:15px; }
.relevant { margin-top:14px; color:var(--text-muted); font-size:12px; }
.relevant span { font-weight:800; color:var(--text-primary); }
.action-panel { margin-top:28px; padding:20px; border-radius:14px; background:var(--surface-dark); color:white; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.action-panel > div:first-child { display:grid; gap:4px; }
.action-panel span { color:#bdc7d4; font-size:13px; }
.action-panel .button-primary { background:var(--accent-primary); border-color:var(--accent-primary); color:#131b27; }
.center { text-align:center; margin:18px 0; }
.empty-state { background:white; border:1px dashed var(--border-strong); border-radius:16px; padding:26px; color:var(--text-muted); }
.empty-state.large { padding:42px; }
.empty-state h2 { color:var(--text-primary); margin-top:0; }
.register-form { background:white; border:1px solid var(--border-subtle); padding:28px; border-radius:18px; box-shadow:var(--shadow); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkbox { display:flex; gap:9px; align-items:flex-start; font-size:14px; }
.poc-note { font-size:12px; color:var(--text-muted); border-left:3px solid var(--accent-primary); padding-left:12px; }
.dashboard-head, .vacancy-head, .evidence-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:28px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vacancy-card { background:white; border:1px solid var(--border-subtle); border-radius:16px; padding:20px; }
.vacancy-card h2 { margin:18px 0 7px; }
.vacancy-card p { color:var(--text-muted); font-size:13px; }
.card-top { display:flex; justify-content:space-between; gap:10px; color:#768296; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.card-actions, .candidate-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.muted-card { opacity:.72; }
.stale-notice { margin-top:12px; padding:9px 11px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; font-size:12px; color:#7c4313; }
.stale-notice.big { max-width:460px; }
.archived { margin-top:28px; }
.archived summary { cursor:pointer; font-weight:800; margin-bottom:14px; }
.developer-panel { margin-top:40px; border-top:1px solid var(--border-subtle); padding-top:20px; color:var(--text-muted); font-size:13px; }
.developer-panel > span { font-size:10px; font-weight:900; color:var(--accent-primary); letter-spacing:.13em; }
.context-summary { background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:14px 18px; margin-bottom:28px; }
.context-summary summary { cursor:pointer; font-weight:800; }
.context-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding-top:16px; }
.context-grid div { display:grid; gap:3px; }
.context-grid span { font-size:10px; color:var(--text-muted); font-weight:900; text-transform:uppercase; }
.candidate-section h2 { margin-top:34px; }
.candidate-list { display:grid; gap:10px; }
.candidate-card { background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.candidate-card h3 { margin:6px 0 4px; font-size:20px; }
.candidate-card p { margin:0; color:var(--text-muted); font-size:12px; }
.candidate-meta { display:flex; gap:8px; align-items:center; font-size:10px; font-weight:900; color:#718097; text-transform:uppercase; letter-spacing:.08em; }
.stale-badge { background:#fff2dc; color:#8a4d08; padding:4px 7px; border-radius:999px; }
.brief-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.brief-choice { border:1px solid var(--border-subtle); background:white; text-align:left; padding:30px; border-radius:18px; box-shadow:var(--shadow); color:var(--text-primary); }
.brief-choice span { color:var(--accent-primary); font-size:10px; font-weight:900; letter-spacing:.16em; }
.brief-choice h2 { font-size:28px; }
.brief-choice p { color:var(--text-muted); min-height:70px; }
.brief-paper { background:white; border:1px solid var(--border-subtle); padding:42px; border-radius:16px; box-shadow:var(--shadow); }
.brief-cover { display:flex; justify-content:space-between; gap:20px; border-bottom:2px solid var(--surface-dark); padding-bottom:28px; margin-bottom:30px; }
.brief-cover h1 { font-size:44px; margin:8px 0; }
.brief-achievement { margin:32px 0 46px; }
.brief-achievement > h2 { font-size:25px; max-width:850px; }
.retest-question { background:white; border:1px solid var(--border-subtle); border-radius:18px; padding:26px; margin-bottom:18px; }
.retest-instance { margin-top:20px; border-top:1px solid var(--border-subtle); padding-top:16px; }
.before-after { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 18px; }
.before-after div { background:#f7f9fb; border-radius:10px; padding:12px; display:grid; gap:4px; }
.before-after span { font-size:10px; font-weight:900; color:#7b8798; letter-spacing:.09em; }
.inline-radio { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 16px; }
.inline-radio label { border:1px solid var(--border-subtle); background:#fff; border-radius:9px; padding:9px 12px; }
.post-fields { display:grid; gap:14px; }
.evidence-list { display:grid; gap:10px; }
.evidence-row { background:white; border:1px solid var(--border-subtle); border-radius:13px; padding:17px 19px; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.evidence-row > div:first-child { display:grid; gap:4px; }
.evidence-row span { color:var(--text-muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.evidence-row strong { max-width:820px; }
.evidence-status { font-size:11px; font-weight:900; border:1px solid var(--border-strong); padding:8px 10px; border-radius:999px; white-space:nowrap; }
.update-note { color:var(--text-muted); font-size:12px; }
.transition-section { margin-top:42px; padding-top:32px; border-top:1px solid var(--border-subtle); }
.transition-section > h2 { font-size:32px; }
.transition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.transition-grid article { background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:18px; }
.transition-grid span { color:var(--accent-primary); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.transition-grid p { margin-bottom:0; }
.example-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; }
.example-output { background:var(--surface-dark); color:white; border-radius:18px; padding:24px; }
.compact-question { display:grid; gap:8px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.compact-question > span { color:var(--accent-primary); font-size:10px; font-weight:900; text-transform:uppercase; }
.compact-question small { color:#bac5d4; }
.comparison-table { display:grid; gap:10px; }
.comparison-row { background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:15px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.comparison-row > div { display:flex; align-items:center; gap:8px; }
.comparison-row label { font-size:11px; font-weight:800; color:var(--text-muted); }
.comparison-row small { grid-column:1 / -1; color:var(--text-muted); }
.status-pill { border:1px solid var(--border-subtle); padding:3px 6px; border-radius:999px; font-size:9px; font-weight:900; text-transform:uppercase; }
.status-changed { border-color:#f8c999; }
.status-unknown { border-color:#9fdbe6; }
.error-panel { padding:28px; background:white; border:1px solid var(--border-subtle); border-radius:16px; }
.stale-icon { font-size:46px; color:var(--accent-primary); }
.muted { color:var(--text-muted); }

@media (max-width: 900px) {
  .hero, .example-grid, .dashboard-grid, .transition-grid { grid-template-columns:1fr; }
  .state-grid { grid-template-columns:1fr 1fr; }
  .context-grid { grid-template-columns:1fr 1fr; }
  .dashboard-head, .vacancy-head, .questions-header, .action-panel { flex-direction:column; }
  .candidate-card { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .page { width:min(100% - 24px, 1180px); padding-top:38px; }
  .topbar { min-height:72px; height:auto; padding:10px 14px; gap:8px; }
  .topbar nav { gap:6px; min-width:0; }
  .topbar .poc-reset-link { display:none; }
  .topbar .user-chip { max-width:126px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-wrap { gap:7px; flex:0 0 auto; }
  .brand { font-size:17px; }
  .version-chip { font-size:9px; }
  .footer { width:calc(100% - 24px); flex-direction:column; }
  h1 { font-size:39px; }
  .choice-grid, .state-grid, .two-col, .evidence-grid, .brief-choice-grid, .before-after { grid-template-columns:1fr; }
  .comparison-row { grid-template-columns:1fr; }
  .brief-paper, .question-card, .dimension-card { padding:20px; }
  .ask { font-size:24px; }
  .sticky-actions { bottom:8px; }
}
@media print {
  .topbar, .footer, .no-print, .action-panel { display:none !important; }
  body, .page { background:white; }
  .page { width:100%; padding:0; }
  .brief-paper { box-shadow:none; border:0; padding:0; }
  .question-card { box-shadow:none; break-inside:avoid; }
}

/* v0.2 UX orientation and evidence-picture improvements */
.value-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:26px 0; }
.value-strip > div { background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:16px; display:grid; gap:6px; }
.value-strip b { color:var(--accent-primary); font-size:12px; }
.value-strip strong { font-size:14px; }
.value-strip span { color:var(--text-muted); font-size:12px; line-height:1.42; }
.honest-boundary { border-top:1px solid rgba(255,255,255,.13); padding-top:18px; margin-top:24px; display:grid; gap:6px; }
.honest-boundary strong { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-primary); }
.honest-boundary span { color:#cbd4df; font-size:13px; line-height:1.5; }
.section-help { color:var(--text-muted); max-width:760px; font-size:13px; margin-top:-6px; }
.compact-context { display:inline-flex; width:max-content; max-width:100%; border:1px solid rgba(255,255,255,.15); color:#dce4ef; border-radius:999px; padding:5px 8px; font-size:11px; font-weight:800; }
.orientation-strip { position:sticky; top:82px; z-index:12; display:flex; align-items:stretch; gap:1px; margin:-22px 0 24px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(10,22,40,.06); }
.orientation-strip > div { flex:1; min-width:0; background:white; padding:10px 13px; display:grid; gap:3px; }
.orientation-strip span { font-size:9px; font-weight:900; letter-spacing:.12em; color:var(--text-muted); }
.orientation-strip strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orientation-strip .orientation-detail { background:#fff8f1; }
.retest-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 20px; }
.retest-guide > div { display:flex; gap:10px; align-items:flex-start; background:white; border:1px solid var(--border-subtle); border-radius:12px; padding:13px; }
.retest-guide > div > span { flex:0 0 24px; width:24px; height:24px; border-radius:999px; display:grid; place-items:center; background:var(--surface-dark); color:white; font-weight:900; font-size:11px; }
.retest-guide p { margin:0; font-size:12px; color:var(--text-muted); line-height:1.45; }
.retest-guide strong { color:var(--text-primary); }
.single-question { padding-top:0; }
.question-anchor { position:sticky; top:138px; z-index:8; margin:0 -26px 18px; padding:20px 26px 15px; background:rgba(255,255,255,.97); border-bottom:1px solid var(--border-subtle); backdrop-filter:blur(12px); border-radius:18px 18px 0 0; }
.question-anchor .ask { margin-bottom:8px; }
.question-anchor p { margin:0; color:var(--text-muted); font-size:12px; }
.instance-count { font-size:10px; font-weight:900; letter-spacing:.12em; color:var(--accent-primary); margin-top:18px; }
.before-after small { color:var(--text-muted); font-size:11px; line-height:1.4; margin-top:3px; }
.selected-state-explainer { margin-top:8px; display:grid; gap:3px; padding:11px 12px; border-radius:9px; background:#eef8fb; border:1px solid #cfeaf0; }
.selected-state-explainer strong { font-size:12px; }
.selected-state-explainer span { color:#526173; font-size:12px; line-height:1.45; }
.state-key { margin-top:10px; border:1px solid var(--border-subtle); border-radius:10px; overflow:hidden; background:#fbfcfe; }
.state-key-title { padding:9px 11px; background:#f1f4f7; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#667489; }
.state-key > div:not(.state-key-title) { display:grid; grid-template-columns:minmax(120px,.35fr) 1fr; gap:10px; padding:8px 11px; border-top:1px solid var(--border-subtle); }
.state-key strong { font-size:11px; }
.state-key span { color:var(--text-muted); font-size:11px; line-height:1.35; }
.evidence-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.8fr); gap:28px; align-items:start; margin-bottom:38px; }
.evidence-intro h1 { font-size:48px; }
.status-key-grid { display:grid; gap:8px; }
.status-key-grid > div { background:white; border:1px solid var(--border-subtle); border-radius:10px; padding:11px 13px; display:grid; gap:3px; }
.status-key-grid strong { font-size:12px; }
.status-key-grid span { color:var(--text-muted); font-size:11px; line-height:1.4; }
.evidence-summary-section { margin:38px 0 46px; }
.summary-section-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:15px; }
.summary-section-head h2 { font-size:30px; margin:5px 0; }
.summary-section-head p { margin:0; color:var(--text-muted); max-width:760px; font-size:13px; }
.summary-count { min-width:44px; height:44px; display:grid; place-items:center; border-radius:999px; background:white; border:1px solid var(--border-subtle); font-size:18px; font-weight:900; }
.unresolved-section { padding-top:8px; }
.status-comparable { background:#f4f7f9; }
.status-evidence_found { background:#eef9f5; border-color:#bde4d3; }
.status-still_to_test { background:#fff7ed; border-color:#fed7aa; }
.status-still_unclear { background:#f5f4fb; border-color:#d9d5ed; }
.transition-explainer { max-width:900px; background:#eef8fb; border:1px solid #cfeaf0; border-radius:12px; padding:15px 17px; margin:12px 0 18px; }
.transition-explainer p { margin:5px 0 0; color:#526173; font-size:13px; }
.neutral-label { color:var(--text-muted); margin-top:12px; }

@media (max-width: 900px) {
  .value-strip, .retest-guide, .evidence-intro { grid-template-columns:1fr; }
  .orientation-strip { top:78px; }
  .question-anchor { top:190px; }
}
@media (max-width: 620px) {
  .orientation-strip { display:grid; grid-template-columns:1fr 1fr; margin:-10px 0 16px; overflow:hidden; }
  .orientation-strip > div { min-width:0; }
  .orientation-strip .orientation-detail { grid-column:1 / -1; }
  .question-anchor { top:190px; margin:0 -20px 16px; padding:16px 20px 12px; }
  .question-anchor .ask { font-size:22px; }
  .retest-guide { gap:7px; }
  .summary-section-head { align-items:flex-start; }
  .state-key > div:not(.state-key-title) { grid-template-columns:1fr; gap:3px; }
  .evidence-intro h1 { font-size:38px; }
}

/* v0.3 structural UX: context before recall */
.decision-guidance {
  display:grid;
  gap:5px;
  margin:0 0 22px;
  padding:16px 18px;
  border:1px solid #cfe0ea;
  background:#f7fbfd;
  border-radius:12px;
}
.decision-guidance strong { font-size:15px; }
.decision-guidance span { color:var(--text-muted); font-size:13px; line-height:1.5; }
.there-here-key {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0 6px;
}
.there-here-key > div { display:grid; gap:4px; padding:13px 15px; border:1px solid var(--border-subtle); border-radius:10px; background:white; }
.there-here-key span { font-size:10px; color:var(--accent-primary); font-weight:900; letter-spacing:.14em; }
.there-here-key strong { font-size:13px; }
.example-output-intro { color:#bac5d4; font-size:13px; margin:10px 0 14px; }
.example-question-panel { display:grid; gap:9px; padding:17px 0 19px; border-top:1px solid rgba(255,255,255,.13); }
.example-question-panel:first-of-type { border-top:0; }
.example-question-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.example-question-heading span { color:var(--accent-primary); font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.example-question-heading b { font-size:10px; color:#d8e0ea; text-transform:uppercase; letter-spacing:.07em; }
.example-transfer-sentence { color:#cbd4df; margin:0; font-size:13px; line-height:1.45; }
.example-ask { font-size:16px; line-height:1.4; }
.example-question-panel small { color:#9eacbd; line-height:1.45; }
.comparable-example strong { color:#d3dbe6; font-size:13px; line-height:1.45; }
.comparison-row label { display:grid !important; align-items:initial !important; gap:6px !important; }
.comparison-row label > span { font-size:9px; line-height:1.25; font-weight:900; color:#657287; text-transform:uppercase; letter-spacing:.06em; }

.questions-purpose {
  display:grid;
  gap:5px;
  margin:-8px 0 22px;
  padding:17px 19px;
  border-left:4px solid var(--accent-primary);
  background:#fff;
  border-top:1px solid var(--border-subtle);
  border-right:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  border-radius:0 12px 12px 0;
}
.questions-purpose strong { font-size:15px; }
.questions-purpose span { color:var(--text-muted); font-size:13px; line-height:1.5; }
.ask-against {
  display:grid;
  gap:5px;
  margin:-4px -4px 18px;
  padding:15px 17px;
  border-radius:11px;
  background:var(--surface-dark);
  color:white;
}
.ask-against span { color:var(--accent-primary); font-size:10px; font-weight:900; letter-spacing:.15em; }
.ask-against strong { font-size:15px; line-height:1.38; }
.ask-against strong + strong { border-top:1px solid rgba(255,255,255,.14); padding-top:7px; margin-top:2px; }
.transfer-context-rich { margin:15px 0 20px; border:1px solid #d5e0e8; background:#f5f8fb; border-radius:12px; overflow:hidden; }
.transfer-heading { display:grid; gap:6px; padding:14px 16px; }
.transfer-heading span { color:var(--accent-primary); font-size:10px; font-weight:900; letter-spacing:.14em; }
.transfer-heading strong { font-size:15px; line-height:1.45; }
.transfer-heading small { color:#657287; font-size:12px; line-height:1.45; }
.transfer-pair { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #d5e0e8; }
.transfer-pair > div { display:grid; gap:5px; padding:13px 16px; background:white; }
.transfer-pair > div + div { border-left:1px solid #d5e0e8; }
.transfer-pair span { color:#6c788b; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.transfer-pair strong { font-size:14px; }
.press-prominent {
  margin-top:18px;
  padding:15px 16px;
  border:1px solid #f4c79f;
  background:#fff8f1;
  border-radius:10px;
  align-items:flex-start;
}
.press-prominent span { flex:0 0 auto; padding-top:2px; }
.press-prominent strong { font-size:16px; line-height:1.4; }
.context-summary-intro { color:var(--text-muted); font-size:13px; margin:10px 0 2px; max-width:850px; }
.context-summary[open] summary { padding-bottom:3px; }

@media (max-width: 760px) {
  .there-here-key, .transfer-pair { grid-template-columns:1fr; }
  .transfer-pair > div + div { border-left:0; border-top:1px solid #d5e0e8; }
  .comparison-row { grid-template-columns:1fr; }
  .comparison-row small { grid-column:auto; }
  .ask-against { margin-left:0; margin-right:0; }
  .press-prominent { display:grid; gap:5px; }
}

.version-chip { font-size:10px; letter-spacing:.08em; color:#9aa7b8; }
.poc-reset-link { font-size:10px !important; color:#9aa7b8 !important; }
.context-error { background:#7f1d1d; padding:8px 10px; border-radius:6px; }
.capture-panel { border-top:3px solid var(--accent-primary); }

.brand-wrap { display:flex; align-items:center; gap:12px; }

/* v0.5 evidence-summary clarity */
.evidence-row-explained { align-items:flex-start; }
.evidence-row-main { display:grid !important; gap:9px !important; flex:1; }
.evidence-dimension { display:grid; gap:3px; }
.evidence-dimension > span { color:var(--accent-primary); letter-spacing:.08em; }
.evidence-dimension p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.45; max-width:760px; }
.evidence-achievement { font-size:14px; }
.update-note-labelled { display:grid; grid-template-columns:auto minmax(90px,auto) auto auto minmax(90px,auto); gap:7px; align-items:center; color:var(--text-muted); font-size:11px; }
.update-note-labelled > span { text-transform:none; letter-spacing:0; font-size:10px; color:var(--text-muted); font-weight:700; }
.update-note-labelled > strong { font-size:11px; color:var(--text-primary); }
.transfer-word { justify-self:center; }
.transition-card-explained { display:grid; gap:14px; }
.transition-dimension { display:grid; gap:4px; }
.transition-dimension > span { color:var(--accent-primary); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.transition-dimension p { margin:0; color:var(--text-muted); font-size:12px; line-height:1.45; }
.transition-achievement, .transition-change, .transition-landing { display:grid; gap:5px; padding-top:11px; border-top:1px solid var(--border-subtle); }
.transition-achievement > span, .transition-change > span, .transition-landing > span { font-size:9px; font-weight:900; letter-spacing:.12em; color:var(--text-muted); }
.transition-achievement strong { font-size:12px; line-height:1.45; }
.transition-change p, .transition-landing p { margin:0; font-size:12px; line-height:1.5; }
.transition-landing { background:var(--surface-secondary); margin:0 -6px -6px; padding:12px 12px 14px; border-radius:9px; }
@media (max-width:720px) {
  .update-note-labelled { grid-template-columns:1fr; gap:3px; }
  .transfer-word { justify-self:start; margin:2px 0; }
}

/* v0.6 summary output controls */
.export-toolbar {
  margin:28px 0 18px;
  padding:18px 20px;
  border:1px solid var(--border-subtle);
  border-top:3px solid var(--accent-primary);
  border-radius:14px;
  background:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.export-toolbar > div:first-child { display:grid; gap:5px; max-width:640px; }
.export-toolbar > div:first-child strong { font-size:14px; }
.export-toolbar > div:first-child span { color:var(--text-muted); font-size:12px; line-height:1.45; }
.share-scope-note { display:block; color:var(--text-muted); font-size:11px; line-height:1.45; max-width:650px; }

@media (max-width: 900px) {
  .export-toolbar { flex-direction:column; align-items:flex-start; }
}

@media print {
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .export-toolbar, [data-export-exclude] { display:none !important; }
  .question-card, .evidence-row, .transition-card-explained, .brief-achievement, .status-key-grid > div { break-inside:avoid; page-break-inside:avoid; }
  .evidence-summary-section, .transition-section { break-before:auto; }
  a { color:inherit; text-decoration:none; }
}
.export-resume {
  margin:18px 0;
  padding:16px 18px;
  border-radius:12px;
  background:#fff8f1;
  border:1px solid #f4c79f;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.export-resume > div { display:grid; gap:4px; }
.export-resume span { color:var(--text-muted); font-size:12px; }
@media (max-width: 760px) { .export-resume { flex-direction:column; align-items:flex-start; } }
.brief-role-context {
  margin:0 0 28px;
  padding:18px;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  background:#f8fafc;
}
.brief-role-context > div:first-child { display:grid; gap:4px; margin-bottom:10px; }
.brief-role-context > div:first-child span { color:var(--text-muted); font-size:12px; line-height:1.45; }

/* v0.7 functional UX additions */
.context-grid p, .context-grid small { margin:0; color:var(--text-muted); font-size:11px; line-height:1.4; }
.context-grid strong { margin-top:5px; }
.transfer-pair small { color:var(--text-muted); font-size:11px; line-height:1.4; }
.workspace-section { margin:34px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:14px; }
.section-heading h2 { margin:5px 0 0; }
.next-actions-section { background:var(--surface-dark); color:white; border-radius:18px; padding:24px; }
.next-actions-section h2 { color:white; }
.next-action-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.next-action-card { display:grid; gap:5px; text-align:left; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:white; border-radius:12px; padding:15px; cursor:pointer; }
.next-action-card span, .next-action-card small { color:rgba(255,255,255,.72); font-size:11px; }
.next-action-card strong { font-size:15px; }
.recent-candidate-list { display:grid; gap:8px; }
.recent-candidate { display:flex; justify-content:space-between; align-items:center; gap:18px; background:white; border:1px solid var(--border-subtle); border-radius:12px; padding:14px 16px; }
.recent-candidate > div { display:grid; gap:3px; }
.recent-candidate span { color:var(--text-muted); font-size:12px; }
.workspace-cue { display:grid; gap:3px; margin:12px 0; padding:10px; background:#eef8fb; border-radius:9px; }
.workspace-cue span { color:var(--accent-primary); font-size:9px; font-weight:900; letter-spacing:.12em; }
.workspace-tools { display:flex; justify-content:space-between; align-items:center; gap:20px; background:white; border:1px solid var(--border-subtle); padding:18px; border-radius:14px; margin:30px 0; }
.workspace-tools > div:first-child { display:grid; gap:4px; }
.workspace-tools span { color:var(--text-muted); font-size:12px; }
.workspace-guidance { margin:30px 0; background:white; border:1px solid var(--border-subtle); border-radius:14px; padding:16px 18px; }
.guidance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.guidance-grid > div { display:grid; gap:5px; padding:12px; background:#f8fafc; border-radius:10px; }
.guidance-grid span { color:var(--text-muted); font-size:12px; line-height:1.45; }
.candidate-card-rich { display:block; }
.candidate-card-main { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.candidate-next { margin-top:8px !important; }
.return-after-callout { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:16px; padding:15px; background:#eef8fb; border:1px solid #cfeaf0; border-radius:11px; }
.return-after-callout > div { display:grid; gap:4px; }
.return-after-callout span { color:var(--text-muted); font-size:12px; line-height:1.45; }
.modal-backdrop { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(10,22,40,.66); }
.modal-panel { position:relative; width:min(560px,100%); background:white; border-radius:18px; padding:30px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.modal-panel h2 { margin:8px 0; }
.modal-close { position:absolute; top:20px; right:24px; border:0; background:transparent; font-size:13px; cursor:pointer; }
.modal-email, .simulation-url { padding:12px; margin:16px 0; border-radius:9px; background:#f3f6f9; font-weight:800; overflow-wrap:anywhere; }
.k-modal { font-family:var(--k-font); padding:36px; border-radius:var(--k-r-card); box-shadow:0 24px 70px rgba(10,22,40,.22); }
.k-modal .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-modal .k-h1 { font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--k-navy); margin:12px 40px 10px 0; }
.k-modal .k-lead { color:var(--k-slate); font-size:15px; line-height:1.6; margin:0 0 4px; }
.k-modal .modal-email, .k-modal .simulation-url { background:var(--k-mist); border:1px solid var(--k-border); border-radius:6px; color:var(--k-navy); font-weight:700; font-size:14px; }
.k-modal .poc-note { border-left-color:var(--k-orange); color:var(--k-slate-lt); font-size:12px; margin-top:16px; }
.k-modal .simulation-confirmation { background:var(--k-mist); border:1px solid var(--k-border); color:var(--k-navy); font-weight:700; border-radius:6px; }
.k-modal .button { border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn); text-transform:uppercase; }
.k-modal .button-primary { background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; }
.k-modal .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }
/* Stage 2M — Share PDF fallback: a compact modal, not a broken share sheet or a copy-link
   promise. Background/backdrop live here since .k-modal above only ever styled the inner card. */
.k-share-fallback-overlay {
  position:fixed; inset:0; background:rgba(10,22,40,.5); display:flex; align-items:center;
  justify-content:center; padding:20px; z-index:200;
}
.k-share-fallback-overlay .k-modal { background:var(--k-white); max-width:420px; width:100%; }
.k-share-fallback-overlay .button-row { margin-top:22px; }
.k-referral-scope { display:grid; gap:14px; margin:18px 0; padding:16px 0; border-top:1px solid var(--k-border); border-bottom:1px solid var(--k-border); }
.k-referral-scope div { display:grid; gap:2px; }
.k-referral-scope b { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--k-navy); }
.k-referral-scope span { color:var(--k-slate); font-size:13px; line-height:1.5; }
.simulation-confirmation { margin:16px 0; padding:12px; border-radius:9px; background:#eaf7ef; color:#185c37; font-weight:800; }
.retest-entry-intro { display:grid; grid-template-columns:1fr minmax(320px,.7fr); gap:24px; align-items:start; margin:26px 0; }
.retest-entry-intro-single { grid-template-columns:1fr; }
.selection-guidance { display:grid; gap:5px; padding:16px; background:#eef8fb; border:1px solid #cfeaf0; border-radius:12px; }
.selection-guidance span { color:var(--text-muted); font-size:12px; line-height:1.45; }
.retest-checklist { display:grid; gap:9px; }
.retest-check-row { display:grid; grid-template-columns:auto minmax(180px,.8fr) minmax(220px,.8fr) minmax(280px,1.4fr); gap:14px; align-items:center; background:white; border:1px solid var(--border-subtle); border-radius:12px; padding:14px; cursor:pointer; }
.retest-check-row input { width:20px; height:20px; }
.retest-check-row > span { font-size:12px; line-height:1.4; }
.check-achievements { font-weight:800; }
.check-dimension { color:var(--text-muted); }
.check-dimension b { display:block; color:var(--text-primary); }
.check-ask { font-size:14px; }
.selection-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 0; }
.selection-actions span { color:var(--text-muted); font-size:12px; }
.retest-review-intro { margin:24px 0; }
.retest-review-grid { display:grid; gap:16px; }
.retest-review-card { background:white; border:1px solid var(--border-subtle); border-radius:16px; padding:22px; }
.review-question-head { display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; }
.review-question-head > span { width:30px; height:30px; display:grid; place-items:center; border-radius:999px; background:var(--surface-dark); color:white; font-weight:900; font-size:11px; }
.review-instance { padding:18px 0 0; margin-top:18px; border-top:1px solid var(--border-subtle); }
.decision-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.decision-buttons label { cursor:pointer; }
.decision-buttons input { position:absolute; opacity:0; }
.decision-buttons span { display:block; padding:10px 14px; border:1px solid var(--border-subtle); border-radius:9px; font-weight:800; background:white; }
.decision-buttons input:checked + span { background:var(--surface-dark); border-color:var(--surface-dark); color:white; }
.correction-toggle { display:inline-flex; gap:8px; align-items:center; margin:12px 0; color:var(--accent-primary); font-weight:800; font-size:12px; cursor:pointer; }
.correction-fields { margin-top:8px; }
.apply-linked-answer { margin-top:12px; }
.retest-submit-actions { grid-column:1 / -1; }
.brief-finish, .summary-finish { margin-top:32px; padding:22px; background:#eef8fb; border-radius:12px; }

@media (max-width: 900px) {
  .next-action-list, .guidance-grid, .retest-entry-intro { grid-template-columns:1fr; }
  .workspace-tools, .recent-candidate, .candidate-card-main, .return-after-callout { align-items:flex-start; flex-direction:column; }
  .retest-check-row { grid-template-columns:auto 1fr; }
  .retest-check-row .check-dimension, .retest-check-row .check-ask { grid-column:2; }
}

@media (max-width: 620px) {
  .modal-panel { padding:24px 20px; }
  .retest-review-card { padding:18px; }
  .retest-check-row { grid-template-columns:auto 1fr; align-items:start; }
  .decision-buttons { display:grid; grid-template-columns:repeat(3,1fr); }
  .decision-buttons span { text-align:center; padding:10px 8px; }
}

/* ============================================================
   STAGE 1 — Kinetic LI visual system (SCOPED)
   Source of truth: design-reference/Kinetic-Design-System
   Applies ONLY inside .k-here / .k-questions / .k-retest wrappers,
   which are added only to the three Stage 1 screens:
     A. Role Conditions HERE      (renderHere)
     B. Questions Worth Settling  (renderDraftQuestions)
     C. After Interview 1/Retest  (renderRetestEntry, renderRetest)
   Every other screen keeps its existing v0.7.1 presentation.
   No functional bindings (data-action/id/name) are touched here.
   Font import moved to the top of this file (CSS spec drops any
   @import that appears after a non-import rule) — see line 1.
   ============================================================ */

:root {
  --k-navy:      #0A1628;
  --k-navy-mid:  #0E2040;
  --k-orange:    #F97316;
  --k-orange-dk: #EA580C;
  --k-teal:      #06B6D4;
  --k-white:     #FFFFFF;
  --k-mist:      #F7F8FB;
  --k-border:    #E8ECF2;
  --k-border-lt: #F0F3F7;
  --k-slate:     #5A6B82;
  --k-slate-lt:  #94A3B8;
  --k-font: 'Plus Jakarta Sans', 'Aptos', Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  --k-r-btn:  2px;
  --k-r-card: 8px;
  --k-r-chip: 20px;
  --k-rule-w: 54px;
  --k-rule-h: 3px;
  --k-shadow-soft: 0 4px 16px rgba(10,22,40,.05);
  --k-shadow-card: 0 12px 30px rgba(10,22,40,.08);
  --k-transition: 0.32s cubic-bezier(0.4,0,0.2,1);
  --k-track-label: 3.5px;
  --k-track-btn: 1.5px;
}

.k-here, .k-questions, .k-retest { font-family:var(--k-font); color:var(--k-navy); }
.k-here h1, .k-here h2, .k-here h3, .k-here strong,
.k-questions h1, .k-questions h2, .k-questions h3, .k-questions strong,
.k-retest h1, .k-retest h2, .k-retest h3, .k-retest strong { font-family:var(--k-font); }
.k-here .k-lead, .k-questions .k-lead, .k-retest .k-lead { font-size:16.5px; line-height:1.7; color:var(--k-slate); max-width:640px; margin:0; }

/* shared button idiom: near-square orange primary / navy outline secondary, tracked uppercase */
.k-here .sticky-actions .button,
.k-there .sticky-actions .button,
.k-questions .action-panel .button,
.k-questions .k-finish-groups .button,
.k-evidence .k-finish-groups .button,
.k-retest .sticky-actions .button {
  border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn);
  text-transform:uppercase; transition:background var(--k-transition), color var(--k-transition), border-color var(--k-transition);
}
.k-here .sticky-actions .button-primary,
.k-there .sticky-actions .button-primary,
.k-questions .action-panel .button-primary,
.k-questions .k-finish-groups .button-primary,
.k-evidence .k-finish-groups .button-primary,
.k-retest .sticky-actions .button-primary { background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; padding:0 30px; min-height:48px; }
.k-here .sticky-actions .button-primary:hover,
.k-there .sticky-actions .button-primary:hover,
.k-questions .action-panel .button-primary:hover,
.k-questions .k-finish-groups .button-primary:hover,
.k-evidence .k-finish-groups .button-primary:hover,
.k-retest .sticky-actions .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }
.k-here .sticky-actions .button-secondary,
.k-there .sticky-actions .button-secondary,
.k-questions .k-finish-groups .button-secondary,
.k-evidence .k-finish-groups .button-secondary,
.k-retest .sticky-actions .button-secondary { background:transparent; border:1.5px solid var(--k-border); color:var(--k-slate); }
.k-here .sticky-actions .button-secondary:hover,
.k-there .sticky-actions .button-secondary:hover,
.k-questions .k-finish-groups .button-secondary:hover,
.k-evidence .k-finish-groups .button-secondary:hover,
.k-retest .sticky-actions .button-secondary:hover { border-color:var(--k-navy); color:var(--k-navy); }
.k-questions .action-panel .button-secondary { background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.k-questions .action-panel .button-secondary:hover { border-color:#fff; }

/* one canonical finishing-action hierarchy: current/output (flush), next-stage (thick navy
   rule + orange label), utility/navigation (quiet text links, no border/background). Shared
   by Saved Questions, Interview Briefs and What You Know Now / If They Join. */
.k-questions .k-finish-intro, .k-evidence .k-finish-intro { margin:32px 0 0; padding-top:28px; border-top:1px solid var(--k-border); }
.k-questions .k-finish-intro strong, .k-evidence .k-finish-intro strong { display:block; color:var(--k-navy); font-size:16px; margin-bottom:6px; }
.k-questions .k-finish-intro span, .k-evidence .k-finish-intro span { color:var(--k-slate); font-size:14.5px; line-height:1.6; max-width:640px; display:block; }
.k-questions .k-finish-groups, .k-evidence .k-finish-groups { display:grid; gap:0; margin-top:8px; }
.k-questions .k-finish-group, .k-evidence .k-finish-group { padding-top:28px; margin-top:28px; border-top:1px solid var(--k-border); }
.k-questions .k-finish-group-first, .k-evidence .k-finish-group-first { padding-top:0; margin-top:0; border-top:0; }
.k-questions .k-finish-group-continued, .k-evidence .k-finish-group-continued { padding-top:16px; margin-top:16px; border-top:0; }
.k-questions .k-finish-label, .k-evidence .k-finish-label { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-slate-lt); margin-bottom:12px; }
.k-questions .k-finish-copy, .k-evidence .k-finish-copy { color:var(--k-slate); font-size:14.5px; line-height:1.6; margin:0 0 16px; max-width:640px; }
.k-questions .k-finish-copy strong, .k-evidence .k-finish-copy strong { color:var(--k-navy); }
.k-questions .k-finish-next, .k-evidence .k-finish-next { border-top:2px solid var(--k-navy); }
.k-questions .k-finish-next .k-finish-label, .k-evidence .k-finish-next .k-finish-label { color:var(--k-orange); }
.k-questions .k-finish-utility, .k-evidence .k-finish-utility { padding-top:20px; }
.k-questions .k-finish-utility .button-row, .k-evidence .k-finish-utility .button-row { gap:22px; align-items:center; }
.k-utility-link {
  background:transparent; border:0; padding:0; font-family:inherit; cursor:pointer;
  color:var(--k-slate); font-weight:700; font-size:13px;
  text-decoration:underline; text-decoration-color:var(--k-border); text-underline-offset:3px;
  transition:color var(--k-transition), text-decoration-color var(--k-transition);
}
.k-utility-link:hover { color:var(--k-navy); text-decoration-color:var(--k-navy); }
.k-utility-link:focus-visible { outline:2px solid var(--k-orange); outline-offset:3px; border-radius:2px; }
.k-utility-confirmed { color:var(--k-slate-lt); font-weight:700; font-size:13px; }
.k-brief .k-finish-groups { margin-top:36px; }

/* the signature THERE/HERE comparison — hard navy/white contrast does the separating,
   not a bordered box; one shared border contains the whole two-tone unit instead of
   nesting a card-within-a-card. This is the canonical pattern wherever previous
   conditions are compared with this role: Questions Worth Settling, Saved Questions,
   Interview Briefs, Retest and the What You Know Now evidence rows all share it. */
.k-questions .transfer-context-rich, .k-retest .transfer-context-rich, .k-evidence .transfer-context-rich {
  border:0; border-radius:0; background:transparent; overflow:visible; margin:22px 0 30px;
}
.k-questions .transfer-heading, .k-retest .transfer-heading, .k-evidence .transfer-heading { padding:0 0 16px; background:transparent; }
.k-questions .transfer-heading span, .k-retest .transfer-heading span, .k-evidence .transfer-heading span { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-teal); }
.k-questions .transfer-heading strong, .k-retest .transfer-heading strong, .k-evidence .transfer-heading strong { font-size:18px; font-weight:700; color:var(--k-navy); line-height:1.45; display:block; margin-top:8px; }
.k-questions .transfer-heading small, .k-retest .transfer-heading small, .k-evidence .transfer-heading small { display:none; }
.k-questions .transfer-pair, .k-retest .transfer-pair, .k-evidence .transfer-pair {
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--k-border); border-radius:6px; overflow:hidden;
}
.k-questions .transfer-pair > div, .k-retest .transfer-pair > div, .k-evidence .transfer-pair > div { padding:24px 28px; border:0 !important; }
.k-questions .transfer-pair > div:first-child, .k-retest .transfer-pair > div:first-child, .k-evidence .transfer-pair > div:first-child { background:var(--k-mist); }
.k-questions .transfer-pair > div:last-child, .k-retest .transfer-pair > div:last-child, .k-evidence .transfer-pair > div:last-child { background:var(--k-navy); }
.k-questions .transfer-pair span, .k-retest .transfer-pair span, .k-evidence .transfer-pair span { color:var(--k-slate-lt); font-size:10.5px; font-weight:800; letter-spacing:.1em; }
.k-questions .transfer-pair > div:last-child span, .k-retest .transfer-pair > div:last-child span, .k-evidence .transfer-pair > div:last-child span { color:rgba(255,255,255,.55); }
.k-questions .transfer-pair strong, .k-retest .transfer-pair strong, .k-evidence .transfer-pair strong { color:var(--k-navy); font-size:19px; font-weight:700; display:block; margin-top:7px; }
.k-questions .transfer-pair > div:last-child strong, .k-retest .transfer-pair > div:last-child strong, .k-evidence .transfer-pair > div:last-child strong { color:#fff; }
.k-questions .transfer-pair small, .k-retest .transfer-pair small, .k-evidence .transfer-pair small { color:var(--k-slate-lt); font-size:12.5px; line-height:1.5; display:block; margin-top:7px; }
.k-questions .transfer-pair > div:last-child small, .k-retest .transfer-pair > div:last-child small, .k-evidence .transfer-pair > div:last-child small { color:rgba(255,255,255,.45); }
.k-questions .transfer-pair::before, .k-retest .transfer-pair::before, .k-evidence .transfer-pair::before {
  content:'→'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%; background:var(--k-orange); color:#fff;
  font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 5px var(--k-white); z-index:1;
}
.k-questions .ask-label, .k-retest .ask-label, .k-evidence .ask-label { color:var(--k-orange); font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); }
.k-questions .ask, .k-retest .ask, .k-evidence .ask { color:var(--k-navy); font-weight:800; letter-spacing:-.6px; line-height:1.22; }
.k-questions .question-meta span, .k-retest .question-meta span, .k-evidence .question-meta span { font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--k-slate-lt); }
.k-questions .question-meta .dim-name, .k-retest .question-meta .dim-name { font-size:13px; letter-spacing:.03em; color:var(--k-orange); }

@media (max-width:760px) {
  .k-questions .transfer-pair, .k-retest .transfer-pair, .k-evidence .transfer-pair { grid-template-columns:1fr; }
  .k-questions .transfer-pair::before, .k-retest .transfer-pair::before, .k-evidence .transfer-pair::before { display:none; }
}

/* ---------- shared: quiet text-only step breadcrumb (replaces pill/dashboard styling) ---------- */
.k-here .progress, .k-there .progress, .k-questions .progress {
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:0;
}
.k-here .progress span, .k-there .progress span, .k-questions .progress span {
  background:none; border:0; border-radius:0; padding:0;
  color:var(--k-slate-lt); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.k-here .progress span.active, .k-there .progress span.active, .k-questions .progress span.active { color:var(--k-orange); }
.k-here .progress span:not(:last-child)::after, .k-there .progress span:not(:last-child)::after, .k-questions .progress span:not(:last-child)::after {
  content:'/'; margin:0 8px; color:var(--k-border); font-weight:400;
}

/* ---------- A. Role Conditions HERE ---------- */
.k-here .k-screen-head {
  position:relative; background:var(--k-navy); color:#fff;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; box-sizing:border-box;
  padding:44px max(24px, calc((100vw - 1180px)/2 + 24px)) 40px; margin-top:22px; margin-bottom:44px;
}
.k-here .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-here .k-h1 { font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-1.2px; line-height:1.05; color:#fff; margin:14px 0 16px; max-width:760px; }
.k-here .k-screen-head .k-lead { color:rgba(255,255,255,.68); max-width:660px; }
.k-here .k-screen-head::after { content:''; display:block; width:var(--k-rule-w); height:var(--k-rule-h); background:var(--k-orange); margin-top:22px; }
.k-here .decision-guidance { background:transparent; border:0; border-radius:0; padding:20px 0 0; margin-top:6px; max-width:660px; }
.k-here .decision-guidance strong { font-size:17px; font-weight:700; color:#fff; display:block; margin-bottom:7px; }
.k-here .decision-guidance span { color:rgba(255,255,255,.6); font-size:15px; line-height:1.7; }
.k-here .dimension-stack { gap:0; }
.k-here .dimension-card {
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0 0 6px; margin-bottom:40px; border-bottom:1px solid var(--k-border);
}
.k-here .dimension-card:last-child { border-bottom:0; margin-bottom:8px; }
.k-here .dimension-heading { grid-template-columns:64px 1fr; margin-bottom:22px; }
.k-here .dimension-heading > span { color:var(--k-orange); font-size:12px; font-weight:800; letter-spacing:.16em; padding-top:8px; }
.k-here .dimension-heading > span::after { content:" —"; color:var(--k-slate-lt); }
.k-here .dimension-heading h2 { font-size:clamp(22px,2.2vw,28px); font-weight:800; letter-spacing:-.4px; color:var(--k-navy); margin:0 0 8px; }
.k-here .dimension-heading p { color:var(--k-slate); font-size:15.5px; line-height:1.6; margin:0; max-width:640px; }
.k-here .clock-note { color:var(--k-slate) !important; font-weight:600; font-size:15.5px !important; }
.k-here .state-grid {
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px;
  background:var(--k-border); border:1px solid var(--k-border); border-radius:6px; overflow:hidden;
}
.k-here .state-choice {
  background:var(--k-white); border:0; border-radius:0; min-height:0;
  padding:19px 20px; transition:background var(--k-transition), box-shadow var(--k-transition);
}
.k-here .state-choice strong { color:var(--k-navy); font-size:15px; font-weight:700; }
.k-here .state-choice span { color:var(--k-slate); font-size:13.5px; line-height:1.45; }
.k-here .state-choice:hover { background:var(--k-mist); }
.k-here .state-choice:has(input:checked) { background:var(--k-navy); box-shadow:inset 3px 0 0 var(--k-orange); }
.k-here .state-choice:has(input:checked) strong { color:#fff; }
.k-here .state-choice:has(input:checked) span { color:rgba(255,255,255,.62); }
.k-here .state-choice:has(input:focus-visible) { outline:2px solid var(--k-orange); outline-offset:-2px; }
.k-here .sticky-actions { background:rgba(255,255,255,.96); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-card); backdrop-filter:blur(12px); }

@media (max-width:620px) {
  .k-here .k-screen-head { margin-top:14px; padding:36px max(20px,4vw) 32px; }
  .k-here .state-grid { grid-template-columns:1fr; }
  .k-here .k-h1 { font-size:32px; }
}

/* ---------- B. Questions Worth Settling ---------- */
.k-questions .questions-header {
  position:relative; background:var(--k-navy); color:#fff;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; box-sizing:border-box;
  padding:44px max(24px, calc((100vw - 1180px)/2 + 24px)) 40px; margin-top:22px; margin-bottom:44px;
}
.k-questions .questions-header .eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
.k-questions .questions-header .eyebrow .questions-count { color:rgba(255,255,255,.5); font-weight:700; letter-spacing:.08em; }
.k-questions .questions-header h1 { font-size:clamp(32px,4vw,48px); font-weight:800; letter-spacing:-1.1px; color:#fff; margin:14px 0 10px; }
.k-questions .questions-header .lead { color:rgba(255,255,255,.68); font-size:16.5px; line-height:1.7; max-width:600px; }
.k-questions .questions-header > div:first-child::after { content:''; display:block; width:var(--k-rule-w); height:var(--k-rule-h); background:var(--k-orange); margin-top:20px; }
.k-questions .role-chip { border:1px solid rgba(255,255,255,.35); background:transparent; border-radius:var(--k-r-chip); padding:10px 18px; font-size:11px; font-weight:700; letter-spacing:.06em; color:#fff; box-shadow:none; }
.k-questions .questions-purpose { background:transparent; border:0; border-left:3px solid var(--k-orange); border-radius:0; padding:2px 0 2px 20px; margin:0 0 28px; }
.k-questions .questions-purpose strong { color:var(--k-navy); font-size:16.5px; }
.k-questions .questions-purpose span { color:var(--k-slate); font-size:14.5px; line-height:1.65; }
.k-questions .question-card {
  background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card);
  padding:32px 36px; margin-bottom:24px; box-shadow:var(--k-shadow-soft);
}
.k-questions .question-card:last-of-type { margin-bottom:8px; }
.k-questions .ask-against { background:transparent; border-radius:0; padding:0; margin:0 0 18px; }
.k-questions .ask-against span { color:var(--k-slate-lt); font-size:10px; font-weight:800; letter-spacing:.1em; }
.k-questions .ask-against strong { color:var(--k-slate); font-size:13.5px; font-weight:600; line-height:1.5; }
.k-questions .ask-against strong + strong { border-top-color:var(--k-border); }
.k-questions .ask { font-size:clamp(27px,3vw,36px); margin:8px 0 28px; }
.k-questions .evidence-grid { grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--k-border); padding-top:24px; margin-top:26px; }
.k-questions .evidence-grid > div { background:transparent; border:0; border-radius:0; padding:0; }
.k-questions .evidence-grid > div:first-child { border-right:1px solid var(--k-border); padding-right:30px; }
.k-questions .evidence-grid > div:last-child { padding-left:30px; }
.k-questions .evidence-grid span { color:var(--k-slate-lt); font-size:10.5px; letter-spacing:.1em; }
.k-questions .evidence-grid p { color:var(--k-slate); font-size:15px; line-height:1.6; margin-top:8px; }
.k-questions .press-prominent { border:0; background:transparent; border-radius:0; border-left:3px solid var(--k-orange); padding:2px 0 2px 20px; margin-top:26px; align-items:flex-start; }
.k-questions .press-prominent span { color:var(--k-orange-dk); font-size:11px; letter-spacing:var(--k-track-label); }
.k-questions .press-prominent strong { color:var(--k-navy); font-weight:700; font-size:17px; line-height:1.4; }
.k-questions .action-panel { background:var(--k-navy); border-radius:6px; padding:28px 30px; }
.k-questions .capture-panel { border-top:3px solid var(--k-orange); }
.k-questions .action-panel strong { color:#fff; font-size:17px; }
.k-questions .action-panel span { color:rgba(255,255,255,.62); font-size:14px; }

@media (max-width:620px) {
  .k-questions .questions-header { margin-top:14px; padding:36px max(20px,4vw) 32px; }
  .k-questions .ask { font-size:24px; }
  .k-questions .question-card { padding:22px 20px; margin-bottom:18px; }
  .k-questions .evidence-grid { grid-template-columns:1fr; }
  .k-questions .evidence-grid > div:first-child { border-right:0; border-bottom:1px solid var(--k-border); padding:0 0 18px; margin-bottom:18px; }
  .k-questions .evidence-grid > div:last-child { padding-left:0; }
}

/* ---------- C. After Interview 1 / Retest — stays light: no navy hero, just larger type and fewer boxes ---------- */
.k-retest .orientation-strip { border-radius:var(--k-r-card); box-shadow:none; border-color:var(--k-border); background:var(--k-border); }
.k-retest .orientation-strip > div { background:var(--k-white); padding:13px 16px; }
.k-retest .orientation-strip span { color:var(--k-slate-lt); font-size:9.5px; letter-spacing:.1em; }
.k-retest .orientation-strip strong { color:var(--k-navy); font-size:13px; }
.k-retest .orientation-strip .orientation-detail { background:#FFF5EC; }
.k-retest .orientation-strip .orientation-detail strong { color:var(--k-orange-dk); }
.k-retest .retest-entry-intro .eyebrow { color:var(--k-orange); letter-spacing:var(--k-track-label); font-size:11px; font-weight:800; }
.k-retest .retest-entry-intro h1 { font-size:clamp(32px,3.6vw,44px); font-weight:800; letter-spacing:-1px; color:var(--k-navy); margin:12px 0 10px; }
.k-retest .retest-entry-intro .lead { color:var(--k-slate); font-size:16px; line-height:1.7; }
.k-retest .selection-guidance { background:transparent; border:0; border-left:3px solid var(--k-orange); border-radius:0; padding:2px 0 2px 18px; }
.k-retest .selection-guidance strong { color:var(--k-navy); font-size:15.5px; }
.k-retest .selection-guidance span { color:var(--k-slate); font-size:14px; line-height:1.6; }
/* Coverage grouping — explicit headings carry the distinction, not colour alone.
   Rows are moved between these two lists in real time as checkboxes are toggled
   (see updateRetestEntryGrouping in app.ts). */
.k-retest .k-coverage-group { margin-top:4px; }
.k-retest .k-coverage-group-not { margin-top:36px; }
.k-retest .k-coverage-heading {
  font-size:12px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase;
  padding-top:22px; margin-bottom:6px; border-top:2px solid var(--k-border);
}
.k-retest .k-coverage-heading-covered { color:var(--k-navy); border-top-color:var(--k-navy); }
.k-retest .k-coverage-heading-not { color:var(--k-slate); }
.k-retest .k-coverage-note { color:var(--k-slate-lt); font-size:13px; line-height:1.5; margin:0 0 12px; }
.k-retest .k-coverage-empty { color:var(--k-slate-lt); font-size:13.5px; font-style:italic; padding:16px 2px; margin:0; }
/* Stage 2N — each question/achievement row reads as its own discrete card (first-user feedback:
   the coverage checklist and Interview Sheet selection screen still blended into one strip). */
.k-retest .retest-checklist { gap:12px; }
.k-retest .retest-check-row {
  background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-soft);
  padding:20px 22px; transition:background var(--k-transition), box-shadow var(--k-transition);
}
.k-retest .retest-check-row:hover { background:var(--k-mist); }
.k-retest .retest-check-row input { width:20px; height:20px; accent-color:var(--k-navy); flex:0 0 auto; }
/* Stage 2M.1 — the achievement caption must read as an explained field, not an unexplained
   uppercase string: an "Achievement" eyebrow (a fixed, non-user string) stays small-caps and
   stacks above the text, matching the sibling .check-dimension field in the same row; the user's
   own achievement text below it keeps normal casing, never forced uppercase. */
.k-retest .check-achievements { color:var(--k-slate-lt); font-size:11.5px; }
.k-retest .check-achievements > span { display:block; text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--k-slate-lt); margin-bottom:3px; }
.k-retest .check-achievements > strong { text-transform:none; font-weight:700; font-size:11.5px; color:var(--k-slate-lt); }
.k-retest .check-dimension { color:var(--k-slate); font-size:13px; line-height:1.45; }
.k-retest .check-dimension b { color:var(--k-navy); font-size:15px; font-weight:800; letter-spacing:-.1px; text-transform:none; display:block; margin-bottom:3px; }
.k-retest .check-ask { color:var(--k-navy); font-size:16px; font-weight:600; line-height:1.4; }
/* not-covered rows: quieter approved slate, never faint/disabled-looking */
.k-coverage-list[data-group="not-covered"] .check-dimension b { color:var(--k-slate); }
.k-coverage-list[data-group="not-covered"] .check-ask { color:var(--k-slate); font-weight:600; }
.k-retest .selection-actions .link-button { color:var(--k-orange); font-weight:700; font-size:13px; }
.k-retest .selection-actions span { color:var(--k-slate-lt); font-size:12px; }

@media (max-width:900px) {
  .k-retest .retest-check-row {
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    padding:20px 18px;
  }
  .k-retest .retest-check-row input { order:0; }
  .k-retest .check-dimension { order:1; width:100%; }
  .k-retest .check-achievements { order:2; width:100%; }
  .k-retest .check-ask { order:3; width:100%; font-size:16.5px; }
  .k-retest .k-coverage-group-not { margin-top:32px; }
}
.k-retest .sticky-actions { background:rgba(255,255,255,.97); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-card); backdrop-filter:blur(12px); }
.k-retest .retest-review-intro .eyebrow { color:var(--k-orange); font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); }
.k-retest .retest-review-intro h1 { font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.9px; color:var(--k-navy); margin:12px 0 10px; }
.k-retest .retest-review-intro .lead { color:var(--k-slate); font-size:15.5px; line-height:1.65; }
.k-retest .retest-review-grid { gap:0; }
/* Stage 2M — each question reads as its own discrete card (first-user feedback: questions were
   blending into one continuous block). Same restrained white-card treatment already used for
   .question-card elsewhere, not a new visual language. */
.k-retest .retest-review-card {
  background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-soft);
  padding:26px 28px; margin-bottom:24px;
}
.k-retest .retest-review-card:last-of-type { margin-bottom:8px; }
.k-retest .review-question-head > span {
  background:var(--k-navy); width:auto; min-width:30px; height:26px; padding:0 9px;
  border-radius:var(--k-r-chip); white-space:nowrap; font-size:10.5px; letter-spacing:.04em;
}
.k-retest .review-question-head { grid-template-columns:auto 1fr; }
.k-retest .review-question-head .ask { font-size:22px; margin:6px 0 0; }
.k-retest .instance-count { color:var(--k-slate-lt); font-size:10px; letter-spacing:.1em; }
.k-retest .achievement-callout.small {
  background:transparent; color:var(--k-navy); border:0; border-left:3px solid var(--k-slate-lt);
  border-radius:0; padding:2px 0 2px 16px; margin:16px 0 20px;
}
.k-retest .achievement-callout.small span { color:var(--k-slate-lt); font-size:10.5px; }
.k-retest .achievement-callout.small strong { font-size:15px; font-weight:600; }
.k-retest .evidence-field legend { font-size:16px; font-weight:700; color:var(--k-navy); margin-bottom:4px; }
.k-retest .evidence-field .field-help { font-size:13px; color:var(--k-slate-lt); margin-bottom:14px; }
/* the evidence decision is the visual centre of each retest item: largest, boldest control on the card */
.k-retest .decision-buttons { gap:10px; margin-top:14px; }
.k-retest .decision-buttons span {
  border-radius:var(--k-r-chip); border:1.5px solid var(--k-border); padding:14px 26px; font-size:15px; font-weight:700;
  color:var(--k-navy); background:var(--k-white); transition:background var(--k-transition), color var(--k-transition), border-color var(--k-transition);
}
.k-retest .decision-buttons input:checked + span { background:var(--k-navy); border-color:var(--k-navy); color:#fff; }
.k-retest .decision-buttons input:hover + span { border-color:var(--k-slate-lt); }
.k-retest .decision-buttons input:focus-visible + span { outline:2px solid var(--k-orange); outline-offset:2px; }
.k-retest .correction-toggle { color:var(--k-slate); font-weight:600; font-size:13px; }
.k-retest .correction-toggle:has(input:checked) { color:var(--k-orange-dk); }
.k-retest .apply-linked-answer { color:var(--k-orange); font-size:13px; font-weight:700; }
.k-retest select.retest-state-select { border:1px solid var(--k-border); border-radius:6px; font-size:14.5px; }
.k-retest .field.state-correction span { font-size:13px; font-weight:700; color:var(--k-navy); }

@media (max-width:620px) {
  .k-retest .retest-review-card { padding:18px; margin-bottom:18px; }
  .k-retest .decision-buttons { grid-template-columns:1fr 1fr 1fr; }
}

/* ============================================================
   STAGE 2A — Kinetic LI visual grammar, applied to:
     1. Achievement THERE       (renderThere)          — .k-there
     2. Saved Questions         (renderCandidateQuestions) — .k-questions (reused)
     3/4. Quick + Full Brief    (renderBrief)           — .k-questions + .k-brief
     5/6. What You Know Now /
          If They Join          (renderUpdated)         — .k-evidence
   Locked grammar carried over unchanged from Stage 1: tokens,
   THERE/HERE navy·white contrast, seam-grid selection, de-carded
   panels, scarce orange, reserved teal. No wording/logic touched.
   ============================================================ */
.k-there, .k-evidence, .k-brief { color:var(--k-navy); }

/* ---------- 1. Achievement THERE — natural counterpart of Role Conditions HERE ---------- */
.k-there .k-screen-head {
  position:relative; background:var(--k-navy); color:#fff;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; box-sizing:border-box;
  padding:44px max(24px, calc((100vw - 1180px)/2 + 24px)) 40px; margin-top:22px; margin-bottom:44px;
}
.k-there .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-there .k-h1 { font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-1.2px; line-height:1.05; color:#fff; margin:14px 0 16px; max-width:760px; }
.k-there .k-screen-head .k-lead { color:rgba(255,255,255,.68); max-width:660px; }
.k-there .k-screen-head::after { content:''; display:block; width:var(--k-rule-w); height:var(--k-rule-h); background:var(--k-orange); margin-top:22px; }
/* the specific achievement being reconstructed stays visible as a ghost panel on navy —
   same translucent-white-on-navy idiom the site uses for Methodology's step cards —
   so orientation ("this is THERE, for this achievement") never gets lost. */
.k-there .k-screen-head .achievement-callout {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:6px;
  padding:20px 22px; margin:28px 0 0; box-shadow:none;
}
.k-there .k-screen-head .achievement-callout span { color:var(--k-orange); }
.k-there .k-screen-head .achievement-callout strong { color:#fff; font-size:16px; }
.k-there .decision-guidance { background:transparent; border:0; border-radius:0; padding:20px 0 0; margin-top:2px; max-width:660px; }
.k-there .decision-guidance strong { font-size:17px; font-weight:700; color:#fff; display:block; margin-bottom:7px; }
.k-there .decision-guidance span { color:rgba(255,255,255,.6); font-size:15px; line-height:1.7; }
.k-there .dimension-stack { gap:0; }
.k-there .dimension-card {
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0 0 6px; margin-bottom:40px; border-bottom:1px solid var(--k-border);
}
.k-there .dimension-card:last-child { border-bottom:0; margin-bottom:8px; }
.k-there .dimension-heading { grid-template-columns:64px 1fr; margin-bottom:22px; }
.k-there .dimension-heading > span { color:var(--k-orange); font-size:12px; font-weight:800; letter-spacing:.16em; padding-top:8px; }
.k-there .dimension-heading > span::after { content:" —"; color:var(--k-slate-lt); }
.k-there .dimension-heading h2 { font-size:clamp(22px,2.2vw,28px); font-weight:800; letter-spacing:-.4px; color:var(--k-navy); margin:0 0 8px; }
.k-there .dimension-heading p { color:var(--k-slate); font-size:15.5px; line-height:1.6; margin:0; max-width:640px; }
.k-there .dimension-heading small { display:block; color:var(--k-slate-lt); font-size:12.5px; margin-top:6px; font-weight:600; }
.k-there .state-grid {
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2px;
  background:var(--k-border); border:1px solid var(--k-border); border-radius:6px; overflow:hidden;
}
.k-there .state-choice {
  background:var(--k-white); border:0; border-radius:0; min-height:0;
  padding:19px 20px; transition:background var(--k-transition), box-shadow var(--k-transition);
}
.k-there .state-choice strong { color:var(--k-navy); font-size:15px; font-weight:700; }
.k-there .state-choice span { color:var(--k-slate); font-size:13.5px; line-height:1.45; }
.k-there .state-choice:hover { background:var(--k-mist); }
/* selected = interaction only, never a favourable-candidate signal — same navy-fill +
   orange inset accent as HERE, deliberately not a different colour from HERE's selection. */
.k-there .state-choice:has(input:checked) { background:var(--k-navy); box-shadow:inset 3px 0 0 var(--k-orange); }
.k-there .state-choice:has(input:checked) strong { color:#fff; }
.k-there .state-choice:has(input:checked) span { color:rgba(255,255,255,.62); }
.k-there .state-choice:has(input:focus-visible) { outline:2px solid var(--k-orange); outline-offset:-2px; }
/* the HERE value being compared against while choosing THERE — a miniature echo of the
   canonical navy/white comparison, not a new pattern. */
.k-there .here-reference {
  margin-top:14px; display:inline-flex; align-items:center; gap:10px;
  background:var(--k-navy); color:#fff; padding:8px 16px; border-radius:var(--k-r-chip); font-size:13px;
}
.k-there .here-reference span { color:rgba(255,255,255,.55); font-weight:800; letter-spacing:.12em; font-size:10px; }
.k-there .here-reference b { color:#fff; font-weight:700; }
.k-there .sticky-actions { background:rgba(255,255,255,.96); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-card); backdrop-filter:blur(12px); }

@media (max-width:620px) {
  .k-there .k-screen-head { margin-top:14px; padding:36px max(20px,4vw) 32px; }
  .k-there .state-grid { grid-template-columns:1fr; }
  .k-there .k-h1 { font-size:32px; }
}

/* ---------- 2. Saved Questions — same hierarchy as Questions Worth Settling, plus purpose-grouped actions ---------- */
.k-questions .stale-notice.big { background:transparent; border:0; border-left:3px solid var(--k-orange-dk); border-radius:0; padding:2px 0 2px 18px; color:var(--k-slate); font-size:13.5px; }
.k-questions .export-toolbar, .k-evidence .export-toolbar { background:transparent; border:0; border-radius:0; padding:0; margin:0; box-shadow:none; }
.k-questions .export-toolbar > div:first-child strong, .k-evidence .export-toolbar > div:first-child strong { color:var(--k-navy); font-size:15px; }
.k-questions .export-toolbar > div:first-child span, .k-evidence .export-toolbar > div:first-child span { color:var(--k-slate); font-size:13px; }
.k-questions .workspace-tools { background:transparent; border:0; border-top:1px solid var(--k-border); border-radius:0; padding:24px 0 0; margin:32px 0 0; }
.k-questions .workspace-tools strong { color:var(--k-navy); font-size:15px; }
.k-questions .workspace-tools span { color:var(--k-slate); font-size:13px; }

/* ---------- 3/4. Quick + Full Interview Brief — a document, not a screen ---------- */
.k-brief .brief-paper { background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card); padding:52px 56px; box-shadow:var(--k-shadow-soft); }
.k-brief .brief-letterhead { margin-bottom:28px; }
.k-brief .brief-letterhead svg { display:block; height:34px; width:auto; }
.k-brief .brief-cover { border-bottom:3px solid var(--k-navy); padding-bottom:30px; margin-bottom:36px; }
.k-brief .brief-cover .eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
.k-brief .brief-cover h1 { font-size:clamp(34px,4vw,46px); font-weight:800; letter-spacing:-1.1px; color:var(--k-navy); margin:10px 0 6px; }
.k-brief .brief-cover p { color:var(--k-slate); font-size:16px; margin:0; }
.k-brief .role-chip { border:1px solid var(--k-border); background:var(--k-mist); border-radius:var(--k-r-chip); padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--k-navy); box-shadow:none; }
.k-brief .brief-role-context { background:transparent; border:0; border-left:3px solid var(--k-orange); border-radius:0; padding:2px 0 2px 20px; margin:0 0 40px; }
.k-brief .brief-role-context > div:first-child strong { color:var(--k-navy); font-size:16px; }
.k-brief .brief-role-context > div:first-child span { color:var(--k-slate); font-size:14px; }
.k-brief .mini-label { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
/* Stage 2F.3 Correction 2 -- compact "dimension: state" page-one reference, replacing the old
   .context-grid (dimension explainer + full state meaning per dimension); those full meanings
   remain available where THERE/HERE is actually interpreted, inside each question. */
.k-brief .context-compact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 22px; }
.k-brief .context-compact > div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--k-border); }
.k-brief .context-compact span { color:var(--k-slate-lt); font-size:11px; font-weight:700; letter-spacing:.03em; }
.k-brief .context-compact strong { color:var(--k-navy); font-size:13.5px; font-weight:700; text-align:right; }
.k-brief .brief-achievement { margin:0 0 52px; padding-top:36px; border-top:1px solid var(--k-border); }
.k-brief .brief-achievement:first-of-type { padding-top:0; border-top:0; }
.k-brief .brief-achievement > h2 { font-size:clamp(22px,2.4vw,29px); font-weight:800; letter-spacing:-.4px; color:var(--k-navy); margin:8px 0 24px; max-width:820px; }
/* Stage 2F.3 Correction 1 -- compact association note for a shared/deduplicated question filed
   under an achievement section other than one it also tests (see briefQuestionCard()). Never a
   second copy of the full achievement text. */
.k-brief .ask-shared-note { color:var(--k-slate-lt); font-size:11.5px; font-style:italic; margin:0 0 10px; }
/* Stage 2F.3 Correction 3 -- restrained end note, not a boxed content section. Overrides the
   shared .brief-finish/.summary-finish pale panel (~line 575) for the Full Brief only; renderUpdated's
   own .summary-finish panel is untouched. */
.k-brief .brief-finish { background:transparent; border-radius:0; padding:16px 0 0; margin-top:20px; border-top:1px solid var(--k-border); }
.k-brief .brief-finish .eyebrow { color:var(--k-orange); font-size:11px; }
.k-brief .brief-finish p { color:var(--k-slate); font-size:13.5px; line-height:1.6; margin:0; }

@media (max-width:620px) {
  .k-brief .brief-paper { padding:28px 24px; }
}

/* ---------- 5/6. What You Know Now / If They Join — evidence picture, not a scorecard ---------- */
.k-evidence .orientation-strip { border-radius:var(--k-r-card); box-shadow:none; border-color:var(--k-border); background:var(--k-border); }
.k-evidence .orientation-strip > div { background:var(--k-white); padding:13px 16px; }
.k-evidence .orientation-strip span { color:var(--k-slate-lt); font-size:9.5px; letter-spacing:.1em; }
.k-evidence .orientation-strip strong { color:var(--k-navy); font-size:13px; }
.k-evidence .orientation-strip .orientation-detail { background:#FFF5EC; }
.k-evidence .orientation-strip .orientation-detail strong { color:var(--k-orange-dk); }
.k-evidence .evidence-intro { grid-template-columns:1fr; margin-bottom:32px; }
.k-evidence .evidence-intro .eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
.k-evidence .evidence-intro h1 { font-size:clamp(32px,4vw,46px); font-weight:800; letter-spacing:-1.1px; color:var(--k-navy); margin:12px 0 14px; }
/* Stage 2N — the conclusion (what this candidate's evidence adds up to) comes before any detail:
   a dynamic count summary directly under the headline, with the old "not a score" reassurance
   demoted to a small supporting line rather than competing with the headline for attention. */
.k-evidence .evidence-summary-line { font-size:19px; font-weight:700; color:var(--k-navy); line-height:1.5; max-width:760px; margin:0 0 10px; }
.k-evidence .evidence-methodology-note { font-size:13px; color:var(--k-slate-lt); max-width:760px; margin:0; }
.k-evidence .evidence-status-key { margin:0 0 40px; }
.k-evidence .evidence-status-key summary { color:var(--k-slate); font-size:13px; font-weight:700; cursor:pointer; }
.k-evidence .status-key-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:16px; }
.k-evidence .status-key-grid > div { background:transparent; border:0; border-radius:0; padding:0; }
.k-evidence .status-key-grid strong { color:var(--k-navy); font-size:14px; display:block; margin-bottom:4px; }
.k-evidence .status-key-grid span { color:var(--k-slate); font-size:12.5px; line-height:1.55; }
.k-evidence .evidence-summary-section { margin:0 0 48px; }
.k-evidence .summary-section-head { align-items:flex-end; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid var(--k-navy); }
.k-evidence .mini-label { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
.k-evidence .summary-section-head h2 { font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.5px; color:var(--k-navy); margin:8px 0 6px; }
.k-evidence .summary-section-head p { color:var(--k-slate); font-size:14.5px; line-height:1.6; max-width:720px; }
.k-evidence .summary-count { background:transparent; border:2px solid var(--k-navy); color:var(--k-navy); font-size:20px; font-weight:800; min-width:52px; height:52px; }
/* Stage 2N — each finding is its own discrete card: the dimension/status header is separated
   from the body, the finding (what we know) is readable before the explanation (why it matters),
   and the achievement's own text keeps its original casing (never forced uppercase). */
.k-evidence .evidence-list { gap:16px; }
.k-evidence .evidence-row { display:flex; flex-direction:column; gap:16px; background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-soft); padding:24px 26px; }
.k-evidence .evidence-row-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.k-evidence .evidence-dimension { display:grid; gap:3px; }
.k-evidence .evidence-dimension > span, .k-evidence .evidence-field-label { color:var(--k-orange); font-size:10.5px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; }
.k-evidence .evidence-dimension > strong { color:var(--k-navy); font-size:20px; font-weight:800; letter-spacing:-.3px; }
.k-evidence .evidence-dimension > small { display:block; color:var(--k-slate-lt); font-size:12.5px; font-weight:400; margin-top:2px; }
.k-evidence .evidence-field-block { display:grid; gap:5px; }
.k-evidence .evidence-field-block p { color:var(--k-navy); font-size:15px; line-height:1.55; margin:0; }
.k-evidence .evidence-achievement { color:var(--k-slate); font-size:13.5px; font-weight:700; text-transform:none; }
.k-evidence .evidence-why .transfer-pair { margin-top:2px; }
.k-evidence .evidence-why .transfer-pair > div { padding:16px 18px; }
.k-evidence .evidence-empty-note { color:var(--k-slate-lt); font-size:13px; font-style:italic; margin:0; padding:2px 0; }
/* status = an information state, never a verdict: filled navy marks settled/found,
   a quiet outline marks still-open. No colour-coded (green/amber/red) scoring. */
.k-evidence .evidence-status {
  flex:0 0 auto; border-radius:var(--k-r-chip); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 16px; border:1.5px solid var(--k-navy); color:var(--k-navy); background:transparent; white-space:nowrap;
}
.k-evidence .status-comparable { border-color:var(--k-border); color:var(--k-slate); background:transparent; }
.k-evidence .status-evidence_found { background:var(--k-navy); border-color:var(--k-navy); color:#fff; }
.k-evidence .status-still_to_test, .k-evidence .status-still_unclear { border-style:dashed; color:var(--k-slate); background:transparent; }
.k-evidence .empty-state { background:transparent; border:1px dashed var(--k-border); border-radius:6px; color:var(--k-slate); padding:20px; }
.k-evidence .transition-section { margin-top:60px; padding-top:44px; border-top:1px solid var(--k-border); }
.k-evidence .transition-section > .eyebrow { color:var(--k-orange); font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); }
.k-evidence .transition-section > h2 { font-size:clamp(26px,2.8vw,34px); font-weight:800; letter-spacing:-.6px; color:var(--k-navy); margin:10px 0 20px; }
.k-evidence .transition-explainer { background:transparent; border:0; border-left:3px solid var(--k-slate-lt); border-radius:0; padding:2px 0 2px 20px; margin:0 0 32px; max-width:820px; }
.k-evidence .transition-explainer strong { color:var(--k-navy); font-size:15px; }
.k-evidence .transition-explainer p { color:var(--k-slate); font-size:14px; line-height:1.6; }
.k-evidence .transition-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border-top:1px solid var(--k-border); border-left:1px solid var(--k-border); }
.k-evidence .transition-grid article { background:transparent; border:0; border-radius:0; padding:26px; border-right:1px solid var(--k-border); border-bottom:1px solid var(--k-border); }
.k-evidence .transition-dimension > span { color:var(--k-orange); font-size:10.5px; font-weight:800; letter-spacing:.1em; }
.k-evidence .transition-dimension p { color:var(--k-slate); font-size:12.5px; }
.k-evidence .transition-achievement, .k-evidence .transition-change, .k-evidence .transition-landing { border-top-color:var(--k-border); }
.k-evidence .transition-achievement > span, .k-evidence .transition-change > span, .k-evidence .transition-landing > span { color:var(--k-slate-lt); font-size:10px; }
.k-evidence .transition-achievement strong { color:var(--k-navy); font-size:13.5px; }
.k-evidence .transition-change p, .k-evidence .transition-landing p { color:var(--k-slate); font-size:13.5px; }
.k-evidence .transition-landing { background:var(--k-mist); margin:0 -6px -6px; padding:14px 14px 16px; border-radius:6px; }
.k-evidence .summary-finish { background:transparent; border:0; border-top:2px solid var(--k-navy); border-radius:0; padding:28px 0 0; margin-top:48px; }
.k-evidence .summary-finish .eyebrow { color:var(--k-orange); font-size:11px; }
.k-evidence .summary-finish h2 { color:var(--k-navy); font-size:clamp(22px,2.4vw,28px); margin:8px 0 0; }

@media (max-width:900px) {
  .k-evidence .status-key-grid { grid-template-columns:1fr 1fr; gap:16px 24px; }
}
@media (max-width:620px) {
  .k-evidence .status-key-grid { grid-template-columns:1fr; }
  .k-evidence .transition-grid article { border-right:0; }
  .k-evidence .evidence-row { padding:20px 18px; }
  .k-evidence .evidence-row-head { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ---------- Stage 2A housekeeping: Quick / Full Brief choice screen ---------- */
.k-brief-choice { color:var(--k-navy); }
.k-brief-choice .k-screen-head-plain { margin:8px 0 56px; }
.k-brief-choice .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-brief-choice .k-h1 { font-size:clamp(32px,3.8vw,46px); font-weight:800; letter-spacing:-1.1px; line-height:1.08; color:var(--k-navy); margin:12px 0 10px; }
.k-brief-choice .k-lead { color:var(--k-slate); font-size:16px; max-width:640px; margin:0; }
.k-brief-choice .k-screen-head-plain::after { content:''; display:block; width:var(--k-rule-w); height:var(--k-rule-h); background:var(--k-orange); margin-top:22px; }
.k-brief-choice .brief-choice-grid { grid-template-columns:1fr 1fr; gap:2px; margin-top:0; background:var(--k-border); border:1px solid var(--k-border); border-radius:8px; overflow:hidden; }
.k-brief-choice .brief-choice { border:0; border-radius:0; box-shadow:none; padding:36px 34px; text-align:left; cursor:pointer; font-family:inherit; transition:background var(--k-transition); }
.k-brief-choice .brief-choice span { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); }
.k-brief-choice .brief-choice h2 { font-size:clamp(22px,2.2vw,27px); font-weight:800; letter-spacing:-.4px; margin:10px 0 12px; }
.k-brief-choice .brief-choice p { font-size:14.5px; line-height:1.6; margin:0 0 22px; }
.k-brief-choice .brief-choice b { font-size:13px; font-weight:700; letter-spacing:.03em; }
/* Quick is the more common single-brief path, so it carries the primary weight — the
   same primary/secondary convention used for buttons elsewhere, not a read on the candidate. */
.k-brief-choice .brief-choice-primary { background:var(--k-navy); color:#fff; }
.k-brief-choice .brief-choice-primary span { color:var(--k-orange); }
.k-brief-choice .brief-choice-primary p { color:rgba(255,255,255,.62); }
.k-brief-choice .brief-choice-primary b { color:var(--k-orange); }
.k-brief-choice .brief-choice-primary:hover { background:var(--k-navy-mid); }
.k-brief-choice .brief-choice-secondary { background:var(--k-white); color:var(--k-navy); }
.k-brief-choice .brief-choice-secondary span { color:var(--k-slate-lt); }
.k-brief-choice .brief-choice-secondary p { color:var(--k-slate); }
.k-brief-choice .brief-choice-secondary b { color:var(--k-navy); }
.k-brief-choice .brief-choice-secondary:hover { background:var(--k-mist); }

@media (max-width:760px) {
  .k-brief-choice .brief-choice-grid { grid-template-columns:1fr; }
}

/* ============================================================
   STAGE 2B1 — My Hiring Workspace, Vacancy view, Candidate rows
   .k-workspace = renderDashboard   .k-vacancy = renderVacancy
   Editorial task-led lists, not a grid of cards. Whitespace and
   rules do the separating; containers appear only where a record
   genuinely needs one (a row), never nested inside another.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
.k-workspace, .k-vacancy { color:var(--k-navy); }
.k-workspace h1, .k-workspace h2, .k-workspace h3, .k-workspace strong,
.k-vacancy h1, .k-vacancy h2, .k-vacancy h3, .k-vacancy strong { font-family:var(--k-font); }

/* shared: near-square Kinetic button idiom for standalone header buttons (not inside sticky-actions) */
.k-workspace .button, .k-vacancy .button {
  border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn);
  text-transform:uppercase; min-height:46px; transition:background var(--k-transition), color var(--k-transition), border-color var(--k-transition);
}
.k-workspace .button-primary, .k-vacancy .button-primary { background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; padding:0 26px; }
.k-workspace .button-primary:hover, .k-vacancy .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }
.k-workspace .button-secondary, .k-vacancy .button-secondary { background:transparent; border:1.5px solid var(--k-border); color:var(--k-slate); }
.k-workspace .button-secondary:hover, .k-vacancy .button-secondary:hover { border-color:var(--k-navy); color:var(--k-navy); }

/* shared: quiet "Next" action tag + copy, reused inside candidate rows (matches the Stage 2A finishing hierarchy) */
.k-workspace .k-finish-label, .k-vacancy .k-finish-label { font-size:10.5px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); margin-bottom:8px; }
.k-workspace .k-finish-copy, .k-vacancy .k-finish-copy { color:var(--k-slate); font-size:13px; line-height:1.6; margin:10px 0 0; max-width:440px; }

/* attention / muted row modifiers — reused across Next Actions, Vacancy and Candidate rows.
   Orange is the only accent used to mark "needs a look" — never a colour-coded status. */
.k-row-attention { box-shadow: inset 3px 0 0 var(--k-orange); }
.k-row-muted { opacity: .6; }

/* ---------- My Hiring Workspace ---------- */
.k-workspace-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:8px; padding-bottom:32px; border-bottom:1px solid var(--k-border); }
.k-workspace-head .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-workspace-head .k-h1 { font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-1px; line-height:1.06; color:var(--k-navy); margin:10px 0 8px; }
.k-workspace-head .k-lead { max-width:520px; margin:0; }

.k-ws-section { margin:44px 0; }
.k-ws-next { margin-top:8px; }
.k-ws-section-head { margin-bottom:18px; }
.k-ws-section-head .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); }
.k-ws-section-head h2 { font-size:clamp(20px,2.2vw,25px); font-weight:800; letter-spacing:-.3px; color:var(--k-navy); margin:8px 0 0; }
.k-ws-section-head .k-finish-copy { margin-top:8px; }
/* Stage 2M — "Current vacancies" is the section a returning user must find fastest, so it carries
   a materially larger/heavier heading than any individual vacancy title, with the explanatory
   sentence visually subordinate below it (reusing .k-finish-copy's existing muted treatment). */
.k-ws-current .k-ws-section-head h2 { font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.6px; margin:0; }
.k-ws-current .k-ws-section-head .k-finish-copy { font-size:15px; margin:10px 0 0; max-width:none; }
.k-ws-current .k-ws-section-head { margin-bottom:28px; }

/* Next Actions — the dominant, editorial task list. Who → what happened → what to do,
   left to right, one clean row per decision. No cards, no equal-weight grid. */
.k-next-list { border-top:1px solid var(--k-border); }
.k-next-row {
  display:grid; grid-template-columns:minmax(150px,220px) 1fr auto; align-items:center; gap:24px; width:100%;
  padding:24px 6px; border:0; border-bottom:1px solid var(--k-border); background:transparent;
  text-align:left; cursor:pointer; font-family:inherit;
  transition:background var(--k-transition);
}
.k-next-row:hover { background:var(--k-mist); }
.k-next-row:focus-visible { outline:2px solid var(--k-orange); outline-offset:-2px; }
.k-next-who, .k-next-what { display:grid; gap:4px; }
.k-next-who strong { font-size:18px; font-weight:800; color:var(--k-navy); letter-spacing:-.2px; }
.k-next-who em, .k-next-what em { font-style:normal; font-size:12px; color:var(--k-slate-lt); }
.k-next-what strong { font-size:17px; font-weight:700; color:var(--k-navy); line-height:1.3; }
.k-next-arrow { color:var(--k-orange); font-size:20px; font-weight:700; transition:transform var(--k-transition); justify-self:end; }
.k-next-row:hover .k-next-arrow { transform:translateX(4px); }
.k-next-row.k-row-attention { padding-left:19px; }

/* Stage 2N — Current Vacancies: each vacancy is its own discrete, clickable card (a shared list
   border read as one continuous strip rather than separate objects). */
.k-vacancy-list { display:grid; gap:16px; }
.k-vacancy-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card); box-shadow:var(--k-shadow-soft); padding:24px 26px; }
.k-vacancy-row.k-row-attention { padding-left:23px; box-shadow:inset 3px 0 0 var(--k-orange), var(--k-shadow-soft); }
.k-vacancy-row-main { flex:1; display:grid; gap:5px; text-align:left; background:transparent; border:0; padding:0; cursor:pointer; font-family:inherit; min-width:0; }
.k-vacancy-eyebrow { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--k-slate-lt); }
.k-vacancy-row-main h3 { font-size:clamp(21px,2.4vw,26px); font-weight:800; letter-spacing:-.4px; color:var(--k-navy); margin:2px 0 0; transition:color var(--k-transition); }
.k-vacancy-row-main:hover h3, .k-vacancy-row-main:focus-visible h3 { color:var(--k-orange-dk); }
.k-vacancy-row-main:focus-visible { outline:2px solid var(--k-orange); outline-offset:4px; }
.k-vacancy-meta { font-size:13px; color:var(--k-slate); }
.k-vacancy-cue { font-size:13px; color:var(--k-slate); }
.k-vacancy-cue b { color:var(--k-orange); font-weight:800; text-transform:uppercase; font-size:10px; letter-spacing:.08em; margin-right:6px; }
.k-vacancy-flag { font-size:13px; color:var(--k-orange-dk); font-weight:600; }
.k-vacancy-row-utility { flex:0 0 auto; padding-top:6px; }

/* Recent Candidates — dense, identity-led scan; candidate + role always shown together */
.k-recent-list { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; border-top:1px solid var(--k-border); }
.k-recent-row {
  display:flex; flex-direction:column; gap:3px; width:100%; border:0; border-bottom:1px solid var(--k-border);
  background:transparent; padding:15px 6px; text-align:left; cursor:pointer; font-family:inherit;
  transition:background var(--k-transition); min-width:0;
}
.k-recent-row:hover { background:var(--k-mist); }
.k-recent-row:focus-visible { outline:2px solid var(--k-orange); outline-offset:-2px; }
.k-recent-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.k-recent-row strong { font-size:14.5px; font-weight:700; color:var(--k-navy); white-space:nowrap; }
.k-recent-row em { font-style:normal; font-size:12px; color:var(--k-slate-lt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-recent-top span { font-size:11px; color:var(--k-slate); white-space:nowrap; flex:0 0 auto; }

.k-ws-utility { border-top:1px solid var(--k-border); padding-top:24px; margin:44px 0 0; }

/* Progressive disclosure — quiet by default so it never lengthens the normal scan */
.k-guidance { margin:28px 0; padding-top:22px; border-top:1px solid var(--k-border); }
.k-guidance summary { cursor:pointer; font-weight:700; color:var(--k-slate); font-size:13.5px; list-style:none; display:flex; align-items:center; gap:9px; transition:color var(--k-transition); }
.k-guidance summary::-webkit-details-marker { display:none; }
.k-guidance summary::before { content:'+'; color:var(--k-orange); font-weight:800; width:12px; }
.k-guidance[open] summary::before { content:'–'; }
.k-guidance summary:hover { color:var(--k-navy); }
.k-guidance summary:focus-visible { outline:2px solid var(--k-orange); outline-offset:4px; }
.k-guidance-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 32px; margin:22px 0 4px; }
.k-guidance-grid strong { display:block; color:var(--k-navy); font-size:13.5px; margin-bottom:4px; }
.k-guidance-grid span { color:var(--k-slate); font-size:12.5px; line-height:1.55; }
.k-account-controls-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:20px 0 4px; }
.k-account-controls-inner strong, .k-account-controls-inner span { display:block; }
.k-account-controls-inner strong { color:var(--k-navy); font-size:13.5px; margin-bottom:4px; }
.k-account-controls-inner span { color:var(--k-slate); font-size:12.5px; line-height:1.55; max-width:680px; }
.k-destructive-link { color:#8b2430; text-decoration-color:rgba(139,36,48,.35); white-space:nowrap; }
.k-destructive-link:hover { color:#651722; text-decoration-color:#651722; }
.k-destructive-link:disabled { opacity:.55; cursor:wait; }
.k-dev-panel summary { color:var(--k-slate-lt); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; }
.k-dev-panel summary::before { color:var(--k-slate-lt); }
.k-dev-panel p { color:var(--k-slate-lt); font-size:12px; margin:12px 0 14px; }

/* empty states — calm, intentional, one clear action; never a bare dashed box */
.k-empty { padding:36px 0 4px; border-top:1px solid var(--k-border); }
.k-empty h3 { font-size:19px; font-weight:800; color:var(--k-navy); margin:0 0 8px; }
.k-empty p { color:var(--k-slate); font-size:14.5px; line-height:1.6; margin:0 0 20px; max-width:520px; }

@media (max-width:900px) {
  /* candidate identity stays first and obvious on mobile — never dropped, just stacked */
  .k-next-row { grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:16px; row-gap:5px; padding:20px 6px; }
  .k-next-who { grid-column:1; grid-row:1; }
  .k-next-what { grid-column:1; grid-row:2; }
  .k-next-arrow { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .k-recent-list { grid-template-columns:1fr; }
  .k-guidance-grid { grid-template-columns:1fr; }
  .k-account-controls-inner { align-items:flex-start; flex-direction:column; }
}
@media (max-width:620px) {
  .k-workspace-head { flex-direction:column; align-items:flex-start; gap:16px; }
  .k-next-who strong { font-size:16px; }
  .k-next-what strong { font-size:15px; }
  .k-vacancy-row { flex-direction:column; gap:14px; }
  .k-vacancy-row-utility { padding-top:0; }
  .k-recent-row strong { max-width:160px; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- Vacancy view + candidate rows ---------- */
.k-back-link { display:inline-block; margin-bottom:18px; font-size:12.5px; }
.k-vacancy-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:8px; padding-bottom:28px; border-bottom:1px solid var(--k-border); }
.k-vacancy-head .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-vacancy-head .k-h1 { font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-1.1px; line-height:1.05; color:var(--k-navy); margin:10px 0 0; }
.k-vacancy-head-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:0 0 auto; }

.k-vacancy .context-summary { background:transparent; border:0; border-bottom:1px solid var(--k-border); border-radius:0; padding:22px 0; margin-bottom:0; box-shadow:none; }
.k-vacancy .context-summary summary { cursor:pointer; font-weight:700; color:var(--k-slate); font-size:13.5px; list-style:none; display:flex; align-items:center; gap:9px; transition:color var(--k-transition); }
.k-vacancy .context-summary summary::-webkit-details-marker { display:none; }
.k-vacancy .context-summary summary::before { content:'+'; color:var(--k-orange); font-weight:800; width:12px; }
.k-vacancy .context-summary[open] summary::before { content:'–'; }
.k-vacancy .context-summary summary:hover { color:var(--k-navy); }
.k-vacancy .context-summary-intro { color:var(--k-slate); font-size:13px; margin:16px 0 4px; max-width:640px; }
.k-vacancy .context-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding-top:20px; }
.k-vacancy .context-grid span { color:var(--k-slate-lt); font-size:10px; letter-spacing:.06em; }
.k-vacancy .context-grid strong { color:var(--k-navy); font-size:13.5px; }
.k-vacancy .context-grid p, .k-vacancy .context-grid small { color:var(--k-slate); font-size:11px; }

.k-candidate-list { border-top:1px solid var(--k-border); }
.k-candidate-row {
  display:grid; grid-template-columns:1.3fr 1fr; column-gap:32px; align-items:start;
  padding:32px 6px; border-bottom:1px solid var(--k-border);
}
.k-candidate-row.k-row-attention { padding-left:19px; }
.k-candidate-top { grid-column:1; }
.k-candidate-meta { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--k-slate-lt); }
.k-candidate-row h3 { font-size:23px; font-weight:800; letter-spacing:-.3px; color:var(--k-navy); margin:6px 0 4px; }
.k-candidate-sub { font-size:13px; color:var(--k-slate); margin:0 0 14px; }
/* progression: reuses the same quiet text breadcrumb idiom as the wizard step trail —
   reached = navy, not yet reached = slate, "/" separates. No stepper widget, no icons. */
.k-candidate-progress { display:flex; flex-wrap:wrap; align-items:center; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.k-candidate-progress span { color:var(--k-slate-lt); }
.k-candidate-progress span.k-done { color:var(--k-navy); }
.k-candidate-progress i { font-style:normal; margin:0 9px; color:var(--k-border); font-weight:400; }
.k-candidate-next { grid-column:2; grid-row:1; }
.k-candidate-utility { grid-column:1 / -1; padding-top:20px; margin-top:8px; border-top:1px solid var(--k-border); }
.k-candidate-utility .button-row { gap:20px; }

@media (max-width:900px) {
  .k-vacancy-head { flex-direction:column; }
  .k-vacancy-head-actions { align-items:flex-start; flex-direction:row; }
  .k-candidate-row { grid-template-columns:1fr; }
  .k-candidate-next { grid-column:1; grid-row:2; margin-top:18px; }
  .k-candidate-utility { grid-column:1; }
  .k-vacancy .context-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .k-vacancy-row { flex-direction:column; }
  .k-candidate-row { padding:26px 4px; }
  .k-candidate-utility .button-row { gap:14px 18px; }
  .k-vacancy .context-grid { grid-template-columns:1fr; }
}

/* ============================================================
   STAGE 2B2 — Registration/save gate, Worked Example, Landing
   ============================================================ */
.k-register { color:var(--k-navy); max-width:620px; margin:0 auto; }
.k-register .k-screen-head-plain { margin:8px 0 40px; }
.k-register .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-register .k-h1 { font-size:clamp(28px,3.4vw,38px); font-weight:800; letter-spacing:-.8px; line-height:1.15; color:var(--k-navy); margin:12px 0 14px; }
.k-register .k-lead { color:var(--k-slate); font-size:15.5px; line-height:1.7; margin:0; }
.k-register .k-screen-head-plain::after { content:''; display:block; width:var(--k-rule-w); height:var(--k-rule-h); background:var(--k-orange); margin-top:22px; }
.k-register-form { display:grid; gap:24px; }
.k-register-form .field > span { font-size:12.5px; font-weight:700; color:var(--k-slate); text-transform:uppercase; letter-spacing:.04em; }
.k-register-form .field input { border:0; border-bottom:1.5px solid var(--k-border); border-radius:0; padding:10px 2px; background:transparent; font-size:15px; color:var(--k-navy); transition:border-color var(--k-transition); }
.k-register-form .field input:focus { border-color:var(--k-orange); box-shadow:none; }
.k-register-form .field input:focus-visible { outline:2px solid var(--k-orange); outline-offset:2px; }
.k-register-form .checkbox { color:var(--k-slate); font-size:13.5px; }
.k-register-privacy { color:var(--k-slate-lt); font-size:12px; line-height:1.6; border-left:2px solid var(--k-border); padding-left:14px; margin:0; }
.k-pilot-trust-note { color:var(--k-slate-lt); font-size:13px; line-height:1.6; background:var(--k-mist); border-radius:8px; padding:12px 16px; margin:0 0 20px; }
.k-pilot-trust-note strong { color:var(--k-navy); }
.k-privacy-link-placeholder { color:var(--k-slate-lt); text-decoration:underline dotted; margin-left:4px; }
.k-register-error { color:#b91c1c; font-size:13px; line-height:1.6; border-left:2px solid #b91c1c; padding-left:14px; margin:0; }
.k-register .sticky-actions { justify-content:flex-start; background:transparent; border:0; box-shadow:none; backdrop-filter:none; padding:8px 0 0; position:static; }
.k-register .sticky-actions .button-primary {
  background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; border-radius:var(--k-r-btn);
  font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn); text-transform:uppercase; padding:0 32px; min-height:48px;
}
.k-register .sticky-actions .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }

@media (max-width:620px) {
  .k-register-form .two-col { grid-template-columns:1fr; }
}

/* ---------- Landing ---------- */
.k-landing { color:var(--k-navy); }
.k-landing-hero {
  position:relative; background:var(--k-navy); color:#fff;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; box-sizing:border-box;
  padding:64px max(24px, calc((100vw - 1180px)/2 + 24px)) 56px; margin-top:22px; margin-bottom:52px;
}
.k-landing-hero .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-landing-hero .k-h1 { font-size:clamp(38px,5.4vw,64px); font-weight:800; letter-spacing:-1.6px; line-height:1.04; color:#fff; margin:16px 0 20px; max-width:760px; }
.k-landing-hero .k-lead { color:rgba(255,255,255,.68); font-size:17px; line-height:1.7; max-width:640px; margin:0 0 30px; }
.k-landing-hero .k-lead strong { color:#fff; font-weight:700; }
.k-landing-hero .button-primary { background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn); text-transform:uppercase; padding:0 30px; min-height:50px; }
.k-landing-hero .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }
.k-landing-hero .button-secondary { background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn); text-transform:uppercase; padding:0 30px; min-height:50px; }
.k-landing-hero .button-secondary:hover { border-color:#fff; }
.k-landing-microcopy { color:rgba(255,255,255,.45); font-size:12.5px; margin:22px 0 0; }
/* Stage 2H.3 — a real .button-secondary, not a text link: unmistakably clickable but still
   subordinate to the orange primary CTA above it. Sits in its own row so it can stay narrower
   than the main CTA pair on desktop (a bare <button> is inline-block by default) while going
   full-width on mobile, same breakpoint as the existing button-row stacking below. Colour/contrast
   comes entirely from the existing .k-landing-hero .button-secondary rule already proven for "See
   a worked example" — nothing new invented here. */
.k-landing-signin { margin:14px 0 0; }
.k-landing-gives { margin-bottom:56px; }
.k-landing-gives .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-landing-gives h2 { font-size:clamp(24px,2.8vw,32px); font-weight:800; letter-spacing:-.5px; color:var(--k-navy); margin:10px 0 26px; max-width:640px; }
.k-landing-gives .value-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--k-border); border:1px solid var(--k-border); border-radius:var(--k-r-card); overflow:hidden; margin:0; }
.k-landing-gives .value-strip > div { background:#fff; border:0; border-radius:0; padding:26px 24px; }
.k-landing-gives .value-strip b { color:var(--k-orange); font-size:11px; font-weight:800; letter-spacing:.1em; }
.k-landing-gives .value-strip strong { color:var(--k-navy); font-size:15.5px; font-weight:700; }
.k-landing-gives .value-strip span { color:var(--k-slate); font-size:13px; line-height:1.55; }
.k-landing-pattern { margin-bottom:56px; }
.k-landing-there-here { max-width:720px; border:1px solid var(--k-border); border-radius:6px; overflow:hidden; }
.k-landing-there-here > div { padding:24px 26px; }
.k-landing-there-here > div:first-child { background:var(--k-mist); }
.k-landing-there-here > div:last-child { background:var(--k-navy); }
.k-landing-there-here span { color:var(--k-slate-lt); font-size:10.5px; font-weight:800; letter-spacing:.1em; }
.k-landing-there-here > div:last-child span { color:rgba(255,255,255,.5); }
.k-landing-there-here strong { display:block; color:var(--k-navy); font-size:16px; font-weight:700; margin-top:6px; }
.k-landing-there-here > div:last-child strong { color:#fff; }
.k-landing-settle { max-width:720px; color:var(--k-slate); font-size:14px; margin:16px 2px 0; }
.k-landing-settle b { color:var(--k-orange); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.k-landing-boundary { max-width:720px; border-left:3px solid var(--k-orange); padding:2px 0 2px 20px; margin-bottom:8px; }
.k-landing-boundary .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-landing-boundary p { color:var(--k-slate); font-size:14px; line-height:1.65; margin:8px 0 0; }

@media (max-width:760px) {
  .k-landing-there-here { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .k-landing-gives .value-strip { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .k-landing-hero { margin-top:14px; padding:44px max(20px,4vw) 40px; }
  .k-landing-hero .button-row { flex-direction:column; align-items:stretch; }
  .k-landing-signin .button { width:100%; }
}

/* ---------- Worked Example ---------- */
.k-worked { color:var(--k-navy); }
.k-worked .k-screen-head-plain { margin:8px 0 28px; }
.k-worked .button { border-radius:var(--k-r-btn); font-size:13px; font-weight:700; letter-spacing:var(--k-track-btn); text-transform:uppercase; }
.k-worked .button-primary { background:var(--k-orange); border:1px solid var(--k-orange); color:#fff; }
.k-worked .button-primary:hover { background:var(--k-orange-dk); border-color:var(--k-orange-dk); }
.k-worked .k-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-orange); }
.k-worked .k-h1 { font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-.8px; line-height:1.15; color:var(--k-navy); margin:12px 0 12px; max-width:760px; }
.k-worked .k-lead { color:var(--k-slate); font-size:15.5px; line-height:1.7; max-width:680px; margin:0; }
.k-worked-achievement { background:var(--k-navy); border-radius:6px; padding:18px 22px; margin-bottom:40px; }
.k-worked-achievement span { color:var(--k-orange); font-size:10.5px; font-weight:800; letter-spacing:var(--k-track-label); }
.k-worked-achievement strong { display:block; color:#fff; font-size:15.5px; margin-top:6px; }
.k-worked .k-finish-label { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-slate-lt); margin-bottom:16px; }
.k-worked-live-label { color:var(--k-orange) !important; }
.k-worked .comparison-table { display:grid; gap:0; border-top:1px solid var(--k-border); }
.k-example-row { padding:22px 4px; border-bottom:1px solid var(--k-border); }
.k-example-row-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.k-example-row-head b { color:var(--k-navy); font-size:17px; font-weight:800; letter-spacing:-.2px; }
.k-example-status { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--k-slate-lt); }
.k-example-status-changed { color:var(--k-orange-dk); }
.k-example-status-unknown { color:var(--k-teal); }
.k-example-reminder { color:var(--k-slate); font-size:13px; line-height:1.5; margin:0 0 14px; }
.k-example-selects { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.k-example-selects label { display:grid; gap:6px; }
.k-example-selects span { color:var(--k-slate-lt); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.k-example-selects .select { border:1px solid var(--k-border); border-radius:6px; padding:10px; font-size:13.5px; color:var(--k-navy); background:#fff; }
.example-output { background:var(--k-mist); border-radius:var(--k-r-card); padding:26px 28px; }
.example-output-intro { color:var(--k-slate); font-size:13px; line-height:1.6; margin:0 0 22px; }
.k-example-question-panel { padding:20px 0; border-top:1px solid var(--k-border); }
.k-example-question-panel:first-of-type { border-top:0; padding-top:0; }
.k-example-question-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.k-example-question-heading span { color:var(--k-navy); font-size:14.5px; font-weight:800; }
.k-example-question-heading b { color:var(--k-orange); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.k-example-transfer-sentence { color:var(--k-slate); font-size:13px; line-height:1.55; margin:8px 0 0; }
.k-example-question-panel .ask-label { color:var(--k-orange); font-size:10px; font-weight:800; letter-spacing:.1em; margin-top:14px; display:block; }
.k-example-ask { display:block; color:var(--k-navy); font-size:17px; font-weight:700; line-height:1.4; margin:6px 0 8px; }
.k-example-question-panel small { color:var(--k-slate-lt); font-size:11.5px; line-height:1.5; }
.k-example-comparable strong { display:block; color:var(--k-slate); font-size:13px; margin-top:8px; }
.k-example-comparable p { color:var(--k-slate); font-size:13px; }

@media (max-width:900px) {
  .k-worked .example-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .k-example-selects { grid-template-columns:1fr; }
  .example-output { padding:20px; }
}

/* ---------- Final pass: navigation safety + Kinetic bridge + output attribution ---------- */
.k-back-link:focus-visible { outline:2px solid var(--k-orange); outline-offset:3px; border-radius:2px; }
.sticky-actions .k-back-link, .button-row .k-back-link { margin-right:auto; margin-bottom:0; align-self:center; }

.k-kinetic-bridge { margin-top:40px; padding-top:24px; border-top:1px solid var(--k-border); }
.k-kinetic-bridge-inner { max-width:640px; }
.k-kinetic-bridge-eyebrow { font-size:11px; font-weight:800; letter-spacing:var(--k-track-label); text-transform:uppercase; color:var(--k-slate-lt); margin-bottom:8px; }
.k-kinetic-bridge-copy { color:var(--k-slate); font-size:14px; line-height:1.65; margin:0 0 12px; }
.k-kinetic-bridge-cta { font-size:13px; }

.k-output-attribution { display:flex; align-items:center; gap:12px; margin:32px 0 0; padding-top:20px; border-top:1px solid var(--k-border); }
.k-output-attribution svg { width:120px; height:26px; opacity:.85; flex-shrink:0; }
.k-output-attribution strong { display:block; font-size:13px; color:var(--k-navy); font-weight:700; }
.k-output-attribution span { display:block; font-size:12px; color:var(--k-slate-lt); }
.k-output-attribution-contact { margin-top:2px; }
.k-output-attribution-contact a { color:var(--k-slate); text-decoration:none; font-size:12px; }
.k-output-attribution-contact a:hover { color:var(--k-navy); text-decoration:underline; }
.k-output-attribution-contact a + a { margin-left:10px; padding-left:10px; border-left:1px solid var(--k-border); }

@media (max-width:620px) {
  .sticky-actions .k-back-link, .button-row .k-back-link { margin-right:0; }
  .k-output-attribution { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ============================================================
   STAGE 2F — Interview Sheet (renderInterviewSheet)
   One physical A4 page for the live interview: supersedes the
   old Quick Interview Brief. Adaptive by question count —
   k-sheet-small (1-3, spacious, 1 col), k-sheet-medium (4-6,
   compact, 2 col), k-sheet-large (7-9, compact, 3 col; orientation
   is switched per-render via an inline <style>@page{}</style>,
   not here, since @page can't be scoped by a class selector).
   Screen preview mirrors the print composition (same markup);
   print is the governing job-to-be-done. Restrained Kinetic
   navy/orange, same visual language as Questions Worth Settling
   and the Full Brief — an interviewer's working sheet, not a
   report or a spreadsheet.
   ============================================================ */
.k-sheet { color:var(--k-navy); }
.k-sheet h1, .k-sheet h2, .k-sheet strong { font-family:var(--k-font); }

.sheet-paper {
  background:var(--k-white); border:1px solid var(--k-border); border-radius:var(--k-r-card);
  box-shadow:var(--k-shadow-soft); padding:26px 30px; margin-top:8px;
}
.k-sheet-large .sheet-paper { padding:16px 20px; }

.sheet-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-bottom:2px solid var(--k-navy); padding-bottom:14px; margin-bottom:20px; }
.k-sheet-large .sheet-header { padding-bottom:8px; margin-bottom:10px; }
.sheet-header-brand { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
/* The brand SVG's own artwork (letterforms + underline rule) sits high inside its viewBox — more
   empty margin below the ink than above. Centering the SVG's geometric box against the label text
   therefore reads as the mark floating above the baseline. Nudge the rendered mark down by a fixed
   share of its own box height (translateY %, so it tracks the height overrides below); this is a
   layout-only correction, the source asset and its proportions are untouched. */
.sheet-header-brand svg { display:block; height:20px; width:auto; transform:translateY(7.5%); }
.k-sheet-large .sheet-header-brand svg { height:16px; }
.sheet-header-brand span { font-size:10.5px; font-weight:800; letter-spacing:var(--k-track-label); color:var(--k-orange); white-space:nowrap; }
.sheet-header-context { flex:1; min-width:0; }
.sheet-header-context h1 { font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--k-navy); margin:0 0 3px; }
.k-sheet-large .sheet-header-context h1 { font-size:15px; margin:0; }
.sheet-header-context p { font-size:12px; color:var(--k-slate); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-sheet-large .sheet-header-context p { font-size:10.5px; }
.sheet-header-count { font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--k-navy); border:1px solid var(--k-border); border-radius:999px; padding:6px 12px; white-space:nowrap; flex:0 0 auto; }
.k-sheet-large .sheet-header-count { padding:4px 10px; }

/* Achievement key — each represented achievement stated in full exactly once, near the top, only
   when more than one is represented on this sheet (a single achievement is already named in the
   header above instead). Reference letters (A/B/C) are assigned in achievement order, not
   question order, and reused verbatim beside each question's dimension (see .sheet-question-dim). */
.sheet-achievement-key { display:flex; flex-wrap:wrap; gap:5px 22px; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--k-border); }
.sheet-achievement-key span { font-size:11px; color:var(--k-slate); line-height:1.4; max-width:100%; }
.sheet-achievement-key b { color:var(--k-orange); font-weight:800; margin-right:5px; }
.k-sheet-large .sheet-achievement-key { gap:3px 16px; margin:0 0 8px; padding-bottom:6px; }
.k-sheet-large .sheet-achievement-key span { font-size:9px; }

.sheet-grid { display:grid; gap:14px; }
.k-sheet-small .sheet-grid { grid-template-columns:1fr; gap:16px; }
.k-sheet-medium .sheet-grid { grid-template-columns:1fr 1fr; gap:14px; }
.k-sheet-large .sheet-grid { grid-template-columns:repeat(3,1fr); gap:8px; }

.sheet-question {
  border:1px solid var(--k-border); border-radius:9px; padding:13px 15px;
  background:var(--k-white); display:flex; flex-direction:column; gap:5px;
}
.k-sheet-small .sheet-question { padding:22px 26px; gap:9px; }
.k-sheet-medium .sheet-question { padding:16px 18px; gap:6px; }
.k-sheet-large .sheet-question { padding:9px 11px; gap:3px; border-radius:7px; }

.sheet-question-dim { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--k-orange); }
.sheet-question-cue { font-size:11px; color:var(--k-slate); line-height:1.35; }
.k-sheet-small .sheet-question-cue { font-size:13px; }
.k-sheet-large .sheet-question-cue { font-size:9.5px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.sheet-ask-label { font-size:9.5px; font-weight:800; letter-spacing:.1em; color:var(--k-orange-dk); margin-top:1px; }
.k-sheet-large .sheet-ask-label { font-size:8.5px; margin-top:0; }
.sheet-ask { font-size:13.5px; font-weight:800; letter-spacing:-.1px; line-height:1.3; color:var(--k-navy); margin:2px 0 0; }
.k-sheet-small .sheet-ask { font-size:19px; }
.k-sheet-medium .sheet-ask { font-size:15px; }
.k-sheet-large .sheet-ask { font-size:12.5px; line-height:1.22; margin-top:0; }

.sheet-press { display:flex; align-items:baseline; gap:8px; border-top:1px solid var(--k-border); padding-top:6px; margin-top:2px; }
.k-sheet-large .sheet-press { padding-top:3px; margin-top:1px; gap:5px; }
.sheet-press span { font-size:9px; font-weight:800; letter-spacing:.1em; color:var(--k-slate-lt); flex:0 0 auto; }
.sheet-press strong { font-size:11.5px; font-weight:700; color:var(--k-navy); line-height:1.3; }
.k-sheet-small .sheet-press strong { font-size:14px; }
.k-sheet-medium .sheet-press strong { font-size:12.5px; }
.k-sheet-large .sheet-press strong { font-size:10.5px; line-height:1.2; }

.sheet-markers { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:4px; }
.k-sheet-large .sheet-markers { gap:4px 8px; margin-top:2px; }
.sheet-marker { display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; color:var(--k-slate); white-space:nowrap; }
.sheet-marker i { width:9px; height:9px; border-radius:50%; border:1.3px solid var(--k-slate-lt); display:inline-block; flex:0 0 auto; }
.k-sheet-small .sheet-marker { font-size:11px; }
.k-sheet-small .sheet-marker i { width:11px; height:11px; }
.k-sheet-large .sheet-marker { font-size:8px; gap:3px; }
.k-sheet-large .sheet-marker i { width:7px; height:7px; }

.sheet-overflow-note { font-size:12px; color:var(--k-slate-lt); text-align:center; margin:14px 0 0; }

/* Compact, single-line Kinetic attribution living INSIDE .sheet-paper (unlike the shared
   outputAttribution() block used elsewhere) so the required footer (decision log: "Output footer
   includes Kinetic provenance, email and website") doesn't push the one-physical-page Interview
   Sheet onto a second printed page. */
.sheet-footer { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:10px; border-top:1px solid var(--k-border); }
.sheet-footer svg { height:14px; width:auto; flex:0 0 auto; opacity:.85; transform:translateY(7.5%); }
.sheet-footer span { font-size:9px; color:var(--k-slate-lt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-sheet-small .sheet-footer { margin-top:20px; padding-top:14px; }
.k-sheet-small .sheet-footer span { font-size:10.5px; }

@media (max-width:760px) {
  .k-sheet-medium .sheet-grid, .k-sheet-large .sheet-grid { grid-template-columns:1fr; }
  .sheet-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .sheet-header-context { min-width:0; width:100%; }
  .sheet-header-context h1 { overflow-wrap:anywhere; }
  .sheet-header-context p { white-space:normal; overflow-wrap:anywhere; }
}

@media print {
  .sheet-paper { box-shadow:none; border:0; padding:0; }
  .sheet-question { break-inside:avoid; page-break-inside:avoid; }
  .sheet-header { break-after:avoid; }
  /* body's min-height:100vh and .page's min-height:calc(100vh - 130px)/padding (both ~line 29/38
     above) are harmless on every OTHER printable output (they're allowed to span pages), but each
     reserves a tall canvas that pushed the Interview Sheet's genuinely one-page content onto a
     trailing blank second page, even at 1 question, and (Stage 2F.2) contributed a redundant
     ~144px inset at the top/bottom of the Full Interview Brief on top of its own @page margin.
     Neutralised only where a .k-sheet or .k-brief is present. */
  body:has(.k-sheet, .k-brief) { min-height:0; }
  main.page:has(.k-sheet, .k-brief) { min-height:0; padding:0; }
  /* With body/.page no longer stretched to fill the page, any blank remainder below the sheet's
     short content shows the <html> element's own background (--surface-primary, never overridden
     for print elsewhere) instead of paper white. Scoped to .k-sheet and .k-brief only. */
  html:has(.k-sheet, .k-brief) { background:#fff; }
}

/* ---------------------------------------------------------------------------------------------
   Stage 2F.2 — Full Interview Brief print composition (Master Spec v1.2 §16.5/§16.6).
   Scoped entirely under .k-brief so none of it touches Questions Worth Settling or the saved
   candidate-questions page, which share .question-card/.brief-* markup but are out of this
   patch's scope. Section 16.6's locked content (achievement text, dimension + explainer,
   THERE/HERE + meanings, transfer sentence, ASK, LISTEN FOR, WATCH FOR, PRESS) is untouched --
   only spacing, break behaviour and the redundant screen-scale insets inherited from the shared
   .k-questions rules change here.
   ------------------------------------------------------------------------------------------- */
@media print {
  /* .k-brief .brief-paper (padding:52px 56px, border, shadow — screen-only styling further up
     this file) has higher specificity than the old global ".brief-paper{padding:0}" print reset,
     so it was silently winning and adding a redundant inset on every line of every page on top of
     the @page margin now set per-render in renderBrief(). Replaced by the @page margin alone. */
  .k-brief .brief-paper { padding:0; border:0; box-shadow:none; }

  /* The achievement section forcing break-inside:avoid (global rule, shared with other pages'
     .question-card et al.) is the single largest cause of wasted pagination here: an achievement
     with several questions can easily be taller than one page, so "avoid" is unsatisfiable and
     Chromium's fallback is to start the whole section on a fresh page anyway, stranding whatever
     space was left on the previous page. Letting it flow naturally, while still protecting the
     heading and tightening the section's own repeating spacing, removes that waste without
     losing the achievement-led structure (Change 3). */
  .k-brief .brief-achievement {
    break-inside: auto; page-break-inside: auto;
    margin: 0 0 10px; padding-top: 10px;
  }
  .k-brief .brief-achievement:first-of-type { padding-top: 0; }
  .k-brief .brief-achievement > h2 { break-after: avoid; page-break-after: avoid; margin: 3px 0 8px; }
  .k-brief .brief-letterhead { margin-bottom: 16px; }
  .k-brief .brief-cover { padding-bottom: 16px; margin-bottom: 20px; }

  /* Same reasoning for the individual card: letting the outer card flow, while keeping its
     smaller reading units intact, gives "stay together when it reasonably fits" (Change 2)
     without forcing the entire card to a fresh page merely because it doesn't. */
  .k-brief .question-card {
    break-inside: auto; page-break-inside: auto;
    padding: 12px 14px; margin-bottom: 8px; box-shadow: none;
  }
  .k-brief .ask-against, .k-brief .question-meta, .k-brief .transfer-context-rich {
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Preferred split point 1 (Change 2): before ASK. Keeping ASK+evidence+PRESS as one avoid-break
     unit means a card only splits ahead of this block, never inside it, when the whole card
     doesn't fit the remaining page. */
  .k-brief .question-ask-block { break-inside: avoid; page-break-inside: avoid; }
  .k-brief .ask-label { break-after: avoid; page-break-after: avoid; }
  /* Preferred split point 2 (Change 2): before the LISTEN FOR/WATCH FOR evidence section. This
     nested unit is the fallback the browser can still honour if question-ask-block itself is
     taller than a full page (an exceptionally long ASK) -- PRESS never ends up orphaned from the
     evidence it follows, because they can only ever break together, never mid-way through.  */
  .k-brief .question-evidence-block { break-inside: avoid; page-break-inside: avoid; }
  .k-brief .press { break-inside: avoid; page-break-inside: avoid; }

  /* Print-specific density (Change 4): these values are screen-scale ones inherited via the
     shared .k-questions rules further up this file (~line 817+), sized for an on-screen reading
     panel, not a paginated document -- each repeats per question/section, so trimming them (never
     the type sizes below normal document scale, never the line-heights) is what actually removes
     the bulk of the waste. Deliberately still generous, not crushed. */
  .k-brief .ask { font-size: 20px; margin: 4px 0 8px; }
  .k-brief .evidence-grid { padding-top: 6px; margin-top: 6px; }
  .k-brief .press-prominent { margin-top: 6px; padding: 2px 0 2px 14px; }
  .k-brief .transfer-context-rich { margin: 6px 0 8px; }
  .k-brief .transfer-heading { padding: 0 0 6px; }
  .k-brief .transfer-heading strong { margin-top: 3px; }
  .k-brief .transfer-pair > div { padding: 8px 12px; }
  /* The orange "->" transfer badge (~line 725) sits centred on the divider between THERE/HERE and
     reaches ~23px into each column (36px circle + 5px white ring). At the original 24-28px column
     padding it always cleared the HERE state name; the tightened print padding above brought that
     text close enough to be visibly clipped by the badge. Widening only the HERE column's inner
     edge keeps the badge exactly as designed (no redesign) while clearing the text again. */
  .k-brief .transfer-pair > div:last-child { padding-left: 28px; }
  .k-brief .brief-role-context { padding: 2px 0 2px 14px; margin: 0 0 20px; }
}